Webdesign et Photoshop : qualité et productivité - retour sur l'atelier, slides, scripts et fichiers d'exemple

Pour ceux qui y étaient et les autress, voilà le résumé de mon atelier à Paris Web et tout le matériel nécessaire pour ne JAMAIS designer directement en code dans le navigateur ;)

Ce compte-rendu sera surtout utile pour ceux qui y étaient, pour les autres certains points vont sembler incompréhensible, mais tout s’éclairera quand la vidéo sera en ligne (date indéterminée)

La vidéo de l’atelier

UPDATE !! la vidéo est en ligne !! (Merci à Paris Web de mettre ces vidéos à disposition gratuitement)

Les fichiers

Quelques notes rapides au sujet des slides, pas très explicites seules.

Slide #4 sur la méthodo

Chez nous, les fichiers sont organisés en versions dans un dossier “PSD” et incrémentés sur 2 chiffres. Si il y a plusieurs pistes, elles sont chacune dans un dossier au sein du dossier PSD. Les exports sont eux dans un dossier portant la date du jour lui même dans un dossier “JPG”.

exemple :

PSD
-Axe 1
—home_01
—home_02
—home_03
—page_panier_01
-Axe 2
—home_01
—home_02
—page_panier_01

JPG
-20101710
—home_01.jpg

Dans tous les cas, il faut essayer de limiter la taille des fichiers. Un fichier de home assez complet peut tenir en moins de 50Mo (moins de 20Mo pour certains de mes fichiers). Évidemment, ça dépend des cas, il n’y a pas de règle, mais un fichier de 500Mo pour du web à de grandes chances d’être mal optimisé, sauf cas particulier.

Pensez à ranger aussi l’intérieur de vos PSD et à supprimer les calques d’essai inutiles. Prenez le reflexe de replier tous les dossiers de calques avant de sauver et fermer le fichier. Il suffit pour cela d’appuyer sur Alt et de cliquer sur la petite flèche à gauche du dossier. Pour la nomenclature inter, j’utilise des majuscules, et parfois des couleurs pour les grandes sections du site “HEAD” “CONTENT” “FOOTER” et des minuscules pour le reste.

Slide #5 quelques tips en vrac

  • les repères commentés
  • la grille à décaler au lieu de se créer un petit calque carré de x pixels comme un goret ;)
  • Cocher l’option magnétisme des pixels pour les formes vectorielles
  • Utiliser le curseur sur l’icône devant les champs numériques pour modifier les valeurs
  • Dans une boite de dialogue : échap pour la fermer, touche alt pour faire apparaitre une option “rétablir”
  • Utiliser des les doubles masques vectoriels ET pixel pour avoir une maîtrise totale
  • Cocher “effets masqués par le masque de fusion” dans les styles de calques pour faire certains effets
  • shift + drag’n’drop de calque dans un fichier de même taille pour dupliquer en place
  • Possibilité d’ouvrir des fichiers depuis internet en les drag’n’droppant ou simplement en copiant/collant l’url dans la boite de dialogue “ouvir” (fonctionne avec les PNG24 sans le bug du fond noir)
  • utiliser les motifs pour faire des lignes pointillées ou tordues, comme sur le site MAIF
  • Possibilité de versionning dans les options la palette d’historique

Slide #7 partage de paramètres

Utiliser le gestionnaire de paramètres prédéfinis pour gérer et exporter les paramètres. Créez-vous des formes et des nuanciers prédéfinis sur chacun de vos projets.

Slide #8

Utilisez les variables mais seulement dans le cas de gros volumes de documents à gabarits fixes, sans formatage de texte. possibilité d’importer des données depuis excel ou équivalent. Les variables se trouvent dans images/variables/définir ou “ensemble de données” si vous les avez déjà définies.

Slide #9

utilisez le Javascript pour scripter des actions avancées et piloter Photoshop entièrement, avec des possibilité de variable et de conditions, contrairement aux actions. la doc sur les scripts se trouve dans les répertoire de Photoshop.

Merci

À tous ceux qui ont suivi cet atelier, merci de l’avoir choisi (pas évident avec l’atelier sur css3 et HTML5 de Raphaël Goetter en même temps) j’espère qu’il vous aura été utile, n’hésitez pas si vous avez des retours, des questions, ou même des scripts ou tips à partager avec moi et les autres participants.

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Haut de page