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).

Draw.io
Editeur en ligne pour dessiner des diagrammes, très intuitif. Il ne fait pas plus que Inkscape ou l'outil Draw de LibreOffice, mais est un peu plus simple et peut être utilisé partout, avec un smartphone ou une tablette connectée. De nombreuses formes sont disponibles.
S'appelait auparavant diagram.ly.

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.

Wordle: Nuage de tag
Ce service en ligne permet de générer un nuage de tag à partir d'une URL, en analysant les mot-clés contenus sur le site! Utile en référencement pour connaître le sémantique d'un sujet, il peut aussi en créant une image à partir d'une phrase constituer une moyen rapide d'illustrer une page...

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.

Krita

Synfig Studio: Animation

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.

Picozu
Autre outil en ligne, il permet de charger des fichiers de Photoshop. Basé sur HTML 5.

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.

Nik Collection
Ensemble d'outils de manipulation d'images gratuite par Google. Très appréciée des photographes professionnels, elle permet des améliorations comme le HDR et une quantité de filtres. (Win/Mac)

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.

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

Browser Turns Editor
Plugin pour Firefox qui édite directement une page Web, utile pour la mise au point et l'agencement des éléments.

Waifu
Augmente la taille d'image sans perte de qualité grâce à un réseau neuronal. C'est un outil en ligne, voir aussi l'article Super Résolution pour des outils à télécharger.

Voir tous les plugins pour webmaster qui peuvent aider à la mise au point du design d'un site.

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...