Outils du web design
Les outils gratuits pour aider les webmasters à construire un site et améliorer son apparence et sa facilité d'utilisation.
Les systèmes de gestion de contenu, thèmes et plugins ne sont pas inclus dans cette liste.
Créer des composants
SVG Edit
Editeur HTML 5 d'images en SVG, en ligne ou sur le bureau. Au contraire d'Inkscape, il est très simple d'emploi. Les dessins vectoriels ne sont pas sauvés directement, le code SVG est affiché pour être copié et collé dans un éditeur de texte. Parmi les autres défauts, dans le code SVG généré, les attributs sont présentés dans n'importe quel ordre, cela change d'un vecteur à l'autre, et des quantités d'attributs alourdissent le code de façon inutile parce qu'ils ont la valeur par défaut. En outre une bogue fait que les id que l'on donne ne sont pas repris dans le code généré (version 2.8.1).
VPaint
Un autre outil vectoriel mais permet de dessiner de façon interactive. Il est encore en version beta. (Win/Mac/Lin).
Graphes
Les charts tools de Google construisent des graphiques à partir de vos données, que vous pouvez inclure sur vos pages avec un code JavaScript.
Logo Maker (Sur ce site)
Pour créer des titres en trois dimensions. Outil en ligne sur ce site.
Il est aussi possible de créer des logos en relief avec le menu script-fu
de Gimp ou comme dans cette page, avec du code SVG à insérer dans le code HTML de la page. Voir la section xml de ce site.
CSS 3 Maker
Genère des feuilles de style CSS 3 pour différents attributs.
Dessiner des images
Les logiciels de dessin à main levée
MyPaint, Krita, Paint.NET sont conçus pour remplacer le chevalet et la palette de peinture. L'image à droite est une capture d'écran de Krita.
Editeur gratuit et open source d'animations 2D vectorielles, comme Flash. Les animations ne sont pas constituées de frames, mais d'objets évoluant par morphing, ou par cut-out qui consiste a créer des objets composés d'éléments que l'on peut animer individuellement.
Peut importer des fichiers SVG, et exporter au format SVG, avec des limitations. Produit aussi des fichiers AVI qui peuvent s'afficher dans la balise <video>.
DevianArt Muro
Pour peindre partout sans chevalet, un logiciel en ligne gratuit écrit en HTML 5 avec des outils basiques, mais une quantité de filtres.
Image Analyzer 
Retouche d'images, ne permet pas l'édition mais diverses améliorations.
Favicon
Outil de création de ces petites images.
DarkRoom
Alternative à Lightroom de Photoshop, mais pour Linux seulement, permet de gérer un stock de photos et de faire des manipulations de rendu.
Renderman
Par Pixar, moteur de rendu maintenant gratuit pour un usage non commercial. Les revenus indirects comme les publicités sur Youtube ne sont pas considérés comme revenu commerciaux.
(Windows, Linux, Mac.)
Clara.io
Aternative complètement gratuite à Renderman, fonctionne dans le navigateur.
Avec Inkscape il est possible de réaliser des dessins pour une page Web. Inkscape peut aussi dessiner des logos en SVG.
Générer automatiquement des dessins
Autodraw
Outil en ligne par Google doté d'une intelligence artificielle il transforme des croquis simple ou des griboullis en dessins réalistes.
Comix Editor
Editeur de bande dessinée simpliste en HTML. Le principe consiste à modifier des objets prédéfinis. Fonctionne sur Chrome.
beFunky
Un moyen simple d'enrichir une page Web: Transformer des photos en dessins en un clic (avec l'effet Line artopia). Pour cela il suffit de charger une photo, la transformation se fait en un clic!
Il est aussi possible de réaliser une HDR.
Il transforme aussi vos vidéos en dessins animés.
Transformer et mettre au point
TinyPNG
Service en ligne qui compresse les images PNG comme des JPG tout en conservant la transparence. L'image résultante reste au format PNG. Si vous préférez utiliser un programme local, il y a pngnq ou PNG Quant, qui dispose en outre d'une interface graphique sur Windows et peut réaliser une importante réduction de taille.
Browsershots.
Tester vos pages sous différents navigateurs et systèmes d'exploitation.
Voir tous les plugins pour webmaster qui peuvent aider à la mise au point du design d'un site.
Voir aussi l'article Super Résolution pour augmenter la résolution d'une image.
Images et kits graphiques
Trouver des images libres de droits.
Webfont de Google
Ajoute des polices de caractère indépendantes du système à vos pages, requiert un code JavaScript.
Voir aussi...