Je suppose qu'un titre plus approprié pourrait être «Photoshop est-il toujours un outil approprié pour concevoir une typographie sur le Web? Mais cela manque de l'attrait dramatique de ce qui précède.
Comme beaucoup d'entre vous, j'ai toujours utilisé Photoshop pour créer des compositions de maquette de mes créations. Pour autant que je m'en souvienne, il s’agit du standard de l’industrie et du logiciel de choix pour la plupart des concepteurs avec lesquels j’ai travaillé. J'ai passé des semaines à concevoir des mises en page parfaites pour les pixels, à regrouper les éléments dans des dossiers hiérarchiques et à étiqueter toutes mes couches pour que la transition de la belle maquette au code soit aussi fluide que possible.
Je serais plein d’enthousiasme, d’énergie et d’excitation en expliquant mes conceptions à un développeur, en basculant des états de calques pour essayer d’illustrer ma vision à travers Photoshop mais je serais toujours un peu déçu car mon design brillant et poli était transformé en ce que je verrais dans le navigateur. Bien sûr, cela ressemblerait à mon design ... Et j'ai en quelque sorte reconnu les caractères mais il manquait cette netteté dont je me souvenais de mes compositions. Ce n'était pas que les développeurs ne l'avaient pas bien codé, plus que la typographie que j'avais créée dans Photoshop n'avait pas été traduite en code.
Au moment de choisir les polices il y a peu de choses plus importantes que de savoir si une police est facilement lisible ou non. Dans Photoshop, ce n’est pas vraiment un problème, car tout va bien. Peu importe la police que vous utilisez, quelle que soit sa taille ou son poids (dans des limites raisonnables) car elle sera parfaitement rendue à l’écran.
Malheureusement, cela ne s'étend pas au navigateur. Souvent, lors de la visualisation de ma conception dans le navigateur, les relations entre les éléments et le type étaient toutes fausses. Les tailles de police et les hauteurs de ligne que j'avais attribuées aux styles de ma composition de photoshop ne seraient pas identiques à celles du navigateur. Si j'avais désigné une marge de 20 pixels au-dessus du titre dans mes conceptions, cette distance pourrait avoir changé car la hauteur de ligne de l'en-tête aurait un effet sur la taille de la marge, ce qui ne se produirait pas dans Photoshop. Je devrais alors commencer le long et fastidieux processus des redoutables «réglages».
Croyez-moi, ce n'est pas seulement le développeur qui se moque de l'idée qu'un concepteur soit assis à côté de lui et lui demande d'augmenter la hauteur de la ligne de copie de deux pixels. Entrer. 'En fait, 1 pixel plus petit' ... Entrez. «Peut-être que c'était mieux comment c'était». Ce type de mise au point du CSS, peu à peu, pour voir les résultats en temps réel via le navigateur prend du temps et ne favorise pas la créativité. Les développeurs en ont assez de passer la journée à modifier de manière répétée ce qu’ils considèrent comme le plus petit des détails qui ne fait aucune différence, et les concepteurs ne sont pas capables d’expérimenter en changeant rapidement et facilement les caractères et les styles.
Pour les concepteurs qui connaissent bien CSS, vous pouvez utiliser des outils tels que Pyromane pour modifier efficacement votre propre conception dans le navigateur, en notant toutes les modifications CSS dans un document que vous pouvez ensuite transmettre à un développeur pour implémenter. C'est effectivement la même chose que de rester assis avec un développeur et de faire des changements CSS, mais beaucoup moins fastidieux pour le développeur et permettra également au concepteur d’expérimenter davantage les tailles et les styles avant de prendre une décision. Bien que ce soit un bon outil pour inspecter et modifier des parties du HTML et du CSS, vous perdrez toutes les modifications que vous apportez dès que le navigateur est rafraîchi, ce qui peut être très ennuyeux si vous avez changé beaucoup d’éléments ajustements
Vous pouvez utiliser le Plug-in Firediff pour enregistrer un enregistrement de toutes les modifications que vous apportez dans Firebug, ce qui est génial car cela vous évite de devoir noter chaque modification dans une feuille de calcul distincte pour plus tard. Le plus gros problème avec cette méthode est lorsque vous commencez à introduire des polices Web dans l'équation, car toutes les polices choisies doivent être installées sur votre kit de type ou elles n'apparaîtront pas dans le navigateur. Cela rend les choses beaucoup plus difficiles et moins libres d'expérimenter facilement avec différentes polices, car vous ne pouvez pas seulement tester rapidement les polices.
Des services comme Typecast Il est beaucoup plus facile pour les concepteurs de travailler avec les polices Web et je fais pratiquement toute ma typographie pour le Web en l’utilisant. Il vous permet de créer des maquettes typographiques (comme vous le feriez dans Photoshop) en utilisant son interface visuelle pour attribuer des polices, des styles, des poids, des couleurs, des hauteurs de lignes, des marges, des marges, etc. à votre typographie. La meilleure chose à propos de l'utilisation de Typecast est que tout fonctionne dans le navigateur, vous prenez donc des décisions sur le type exactement comme il sera rendu pour l'utilisateur. Est-ce qu'une certaine police n'a pas l'air trop chaude à 19 pixels? Faites-le cogner jusqu'à 20 en un seul clic, redescendez à 19 avant de vous fixer à 18 pixels, le tout en secondes plutôt qu'en heures avec un développeur.
Vous pouvez utiliser toutes les polices Web de leurs collections de 23 000 polices, y compris les polices Google, Typekit et autres dans vos compositions, ce qui facilite les expérimentations (elles ont récemment été achetées par Monotype, qui possède Fonts.com et Myfonts. sur le chemin bientôt). Selon moi, Typecast introduit une notion de enjouement dans la typographie, car cela vous encourage à essayer des variantes de polices, que vous n’avez peut-être jamais découvertes si elles n’étaient pas facilement disponibles et facilement interchangeables.
Une autre fonctionnalité très utile de typecast est la possibilité d'afficher et de modifier le CSS de votre type. Vous pouvez ajouter des couleurs et des images d'arrière-plan, des états de survol ou même des transitions en modifiant simplement le panneau CSS. Une fois satisfait de votre création, vous pouvez facilement exporter et enregistrer le code CSS, qui peut ensuite être téléchargé sur votre site ou envoyé à un développeur. Comme tout a été conçu dans le navigateur, il apparaîtra exactement comme vous le souhaitez.
Photoshop n'est pas la norme de l'industrie pour rien, et certains d'entre vous hyperventileront à l'idée de le laisser tomber dans la conception dans le navigateur, après tout, nous sommes des créateurs et non des codeurs. Eh bien, posez le sac en papier car il est toujours possible de créer une belle typographie en utilisant des polices Web dans Photoshop. Extensis ont créé un plug-in qui peut être installé sur les versions CS5 et supérieures de Photoshop qui vous donneront accès à toutes les polices WebINK et Google Web à utiliser gratuitement, directement dans Photoshop.
Cela signifie que vous pouvez utiliser l'une des polices Web de WebINK ou de Google dans vos compositions de conception, comme vous le feriez pour toutes les polices installées sur votre système. Elles s'afficheront à peu près comme dans le navigateur. Le plug-in ne vous donnera accès qu'aux polices Web de WebINK et Google pour le moment, mais il mettra automatiquement à jour les nouvelles polices dès qu'elles seront ajoutées à la bibliothèque de polices WebINK et Google.
Un autre plug-in précieux qui facilite la transition entre les compositions Photoshop et les CSS compatibles avec les navigateurs est le plug-in gratuit basé sur le cloud de css3ps.com . L'une des principales raisons pour lesquelles de nombreux concepteurs travaillent avec Photoshop est le contrôle des calques et des éléments de forme. Etre capable d'expérimenter facilement et rapidement des ombres, des lueurs, des couleurs, des textures, des coins arrondis et plus est presque une seconde nature pour la plupart et quelque chose que même des concepteurs expérimentés peinent à reproduire exactement dans le navigateur. Pour ceux-là, ce plug-in est parfait car il vous permet de créer vos compositions de la manière que vous connaissez le mieux, puis de convertir facilement les styles de votre forme en CSS3 compatibles avec les navigateurs. Cette méthode est idéale pour concevoir des boutons, la navigation ou tout autre élément pour lequel vous avez créé une forme.
Peut-être existe-t-il encore un rôle pour Photoshop en tant qu'outil de conception de mises en page Web, mais en ce qui concerne la conception de la typographie pour le Web, des applications telles que Firebug et Typecast l'ont dépassée. Le temps nécessaire pour mettre à jour les compositions statiques ne peut tout simplement pas être comparé à la vitesse et à la facilité avec lesquelles vous pouvez apporter des modifications au navigateur. Pour ceux d'entre vous qui n'arrivent même pas à concevoir l'idée de concevoir dans le navigateur, les plug-ins ci-dessus devraient au moins donner à Photoshop le coup de pouce dont il a besoin pour rester pertinent et faciliter la transition.
Utilisez-vous Photoshop pour concevoir des sites Web? Photoshop va-t-il suivre Flash? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, utilisations image morte via Shutterstock.