Le travail d’un web designer nécessite quelques outils indispensables pour mener à bien la conception d’un site internet. Voici une liste non exhaustive de quelques outils gratuits et très utiles.
Avec l’apparition du Responsive Web design, il est plus que jamais nécessaire d’avoir une maquette qui envisage à priori les différents points de rupture de votre design, pour ce faire une maquette calée sur un grille favorisera son déploiement sur les différents device.

Modular Grid Pattern

Les outils en ligne sont légion, mais le plus pratique pour optimiser son worflow est de rester dans son environnement de travail, qui pour beaucoup reste Photoshop aujourd’hui. http://modulargrid.org propose une web app et une extension pour photoshop.
Que vous soyez adepte d’une grille 960px ou d’une grille plus grande 1280px ou 1366px . L’outil propose un paramétrage qui peut répondre à tous les cas de figure.

télécharger : http://modulargrid.org

Flaticon et BlendMe

L’iconographie est un élément important pour l’ergonomie d’un site web, du simple icône pour moteur de recherche juqu’à des icônes signifiant pour tous types d’actions ou simplement dans un but esthétique, ils sont devenus incontournable. Leur utilsation est de plus en plus appréciée des web designers du faite de leur intégration souple via le format SVG ou en font web. Deux sites proposant une extension photoshop ont retenues mon attention :
http://www.flaticon.com/ et http://blendme.in/

télécharger : http://www.flaticon.com/ et http://blendme.in/

Optimisation et export des images

Arrive l’étape d’export des images, que vous soyez intégrateur ou non de votre web design, ces outils vous intéresseront, car ils constituent la passerelle entre graphisme et web

CSS3ps

le codage des effet css3 étant encore assez long à cause de la disparité des navigateurs, cette extension se révèle très pratique, elle génère en fichier de sortie le code CSS3 des élément stylés dans photoshop.

télécharger : http://css3ps.com/

Superslicr

Cet outil reste encore très pertinent pour l’export des images au format web, bien que le dernière version de Photoshop intègre maintenant la fonction Generator, qui rend le même service ou presque Superslicr garde encore ma préférence. En effet elle n’oblige pas à renommer tous vos calques avec l’extension image et plus imporant vous gardez le contrôle sur les paramètres d’optimisation des images qui à mon goût ne se sont pas assez optimisées avec generator.

télécharger : http://www.mightymeta.co.uk/superslicr-ditch-the-slice-tool/

Compression des images

La compression des images n’est pas la fonction la plus performante de Photoshop, depuis le disparition d’ImageReady et l’annonce de l’arrêt de Fireworks, il faut bien avouer que le logiciel restait une alternative intéressante, toutefois il n’est pas interdit d’utiliser quelques outils gratuits en ligne :

Pour les images JPG
http://jpeg-optimizer.com/
http://kraken.io

Pour les images GIF
http://ezgif.com/optimize

Pour les images PNG
http://punypng.com/
http://tinypng.org/

en appli mac
http://imageoptim.com/

Cutandslice

Un outil en corrélation avec les images pour mobile, cette extension produit des images en fonction des devices : Desktop, mobile (Android et iPhone)

Télécharger : http://www.cutandslice.me/