L'autre jour, un de mes amis a dit quelque chose qui a attiré mon attention: "J'essaie d'apprendre à découper un PSD". C'est une déclaration assez simple. Dès qu'il l'a dit, je savais exactement de quoi il parlait et pourtant, il y avait quelque chose là-dedans qui ne réglait pas tout à fait.
En voyant mon hésitation, mon ami a répondu en posant une question: "Est-ce que nous coupons encore les fichiers PSD?" Bonne question! Pour les débutants, le jargon n'est pas simplement du jargon, il implique un processus et suggère une méthode d'action. Pour cette raison, il est souvent utile pour les développeurs plus avancés de définir leurs termes de manière significative pour les autres. Aujourd'hui, nous allons plonger dans la théorie qui sous-tend le processus de conversion d'un fichier PSD en une page Web et terminerons par une discussion sur les hauts et les bas de la conception dans le navigateur.
Notre exemple de fichier
Nous ne convertirons pas actuellement un fichier PSD en HTML / CSS, nous discutons simplement du comment et du pourquoi afin que vous puissiez comprendre parfaitement l'approche typique adoptée par les concepteurs Web d'aujourd'hui.
J'avais besoin d'un PSD à référencer tout au long de l'article, alors j'ai saisi l'impressionnant PSD gratuit Creative Studio Minimal de GraphicsFuel.com.
Qu'est-ce que le tranchage?
La première chose que nous devrions parler est ce que cela signifie? Slice? un PSD. En gros, le terme signifie simplement couper en morceaux votre document Photoshop, qui sera ensuite servi au serveur Web, mis en ordre par HTML et stylé / positionné par CSS.
À un niveau plus spécifique, le découpage en tranches peut faire référence à un ensemble d'outils spécifique à l'intérieur de Photoshop. En utilisant l'outil Slice, nous pouvons partitionner notre document en petits morceaux. Fondamentalement, nous dessinons simplement un rectangle autour de chaque élément que nous souhaitons séparer en une image individuelle.
Pourquoi trancher?
Les outils de découpage de Photoshop ne sont là que pour votre commodité. Il y a une tonne de grands concepteurs de sites Web qui ne les touchent jamais et il n'y a rien de mal à cela.
L'objectif des outils de découpage est de faciliter le processus d'enregistrement de nombreuses images, à court terme pour la construction initiale et à long terme pour les révisions. En gros, cela vous évite d'avoir à découper chaque portion manuellement et à la sauvegarder.
Bien que le processus soit un peu pénible, je dois admettre qu’un PSD joliment coupé est une chose de toute beauté. Voici un exemple clair où plusieurs éléments doivent être enregistrés en tant qu’images. Sans découpage, chacun de ceux-ci représenterait un processus de récolte et de sauvegarde que je dois subir.
Lorsqu'elles sont découpées, une seule action Enregistrer pour le Web peut convertir toutes ces tranches en fichiers image autonomes. Cela réduit vraiment votre temps sur la tâche répétitive de rognage et d’enregistrement si vous utilisez un seul fichier Photoshop comme source.
Faire trancher sucer moins
Si vous n'êtes toujours pas sûr des outils de découpage de Photoshop ou si vous pensez que c'est une grosse perte de temps, vous devriez consulter notre article intitulé Comment faire du slicing sucer moins: trucs et astuces pour découper un fichier PSD.
Dans cet article, j'explique en détail le processus de découpage et le fonctionnement de tous les outils de découpage de Photoshop. Plus important encore, vous trouverez quelques astuces sur la manière de rendre le processus de découpage bien meilleur. Des choses comme les tranches basées sur des couches et le masquage des tranches automatiques contribuent grandement à en faire un processus supportable.
Pourquoi trancher est vieille école
Donc, c'est trancher. Maintenant que vous savez de quoi il s'agit, il est temps d'explorer comment ce processus a changé au fil des ans à un point tel que le découpage en tranches est une activité fondamentalement différente de celle qu'elle était auparavant.
Il était une fois, personne n'utilisait de CSS (je sais, l'horreur!). Même lorsque CSS est arrivé, les outils fournis aux concepteurs de sites Web étaient plutôt limités par rapport à ce que nous connaissons aujourd'hui.
Par conséquent, les sites Web qui essayaient de repousser les limites en ne ressemblant pas à de la merde avaient tendance à utiliser une tonne d'images. Chaque fois qu'une conception contenait une police personnalisée, un simple dégradé, une ombre portée ou un coin arrondi, il fallait utiliser une image pour extraire l'effet dans le navigateur.
En conséquence, le tranchage était un gros problème. Lorsque vous avez créé une maquette de site Web Photoshop, si vous décidiez d'appliquer une sorte de glaçage esthétique, qui était énorme avant le coup d'envoi minimal, nous devions alors découper chaque petite partie de votre conception en minuscules vous avez probablement ensuite utilisé des tableaux HTML pour reconstruire. Brutal non? Surtout quand on sait que nous avions tous une connexion Web incroyablement lente à l'époque, donc toutes ces images ont pris un temps fou à se charger.
CSS tue l'image
Au fur et à mesure de l'évolution et de la croissance de CSS, une nouvelle tendance est apparue dans la conception Web: le design sans image. Si vous avez consulté des blogs sur le design il y a quelques années, vous auriez vu une tonne d'articles intitulés "Créez un bouton de fantaisie sans images!". À ce jour, vous voyez encore des titres comme celui-ci nous apparaître alors que les gens effectuent des exploits incroyables avec CSS.
Cette tendance ne serait pas possible sans les étonnantes fonctionnalités CSS dont nous bénéficions maintenant. Soudain, vous pouvez arrondir les angles, ajouter des ombres, implémenter plusieurs arrière-plans, créer des dégradés, utiliser des polices personnalisées et bien plus encore avec du code pur. L'objectif général de nombreux concepteurs Web est maintenant de tirer parti de CSS et d'utiliser le moins d'images possible dans notre balisage. ? Sans image? n’est pas nécessairement quelque chose à atteindre (vous avez presque toujours besoin de quelques images) mais plutôt à généralement vouloir l'approcher le plus humainement possible tout en maintenant un soutien élevé.
Avantages et inconvénients de la conception sans image
Cette tendance s'accompagne de hauts et de bas. L’avantage, c’est que, contrairement à ce que pourraient penser les non-développeurs, le CSS est un moyen très simple et facile de maintenir et d’ajuster un dessin à long terme. Si vous souhaitez modifier quelque chose de petit, comme une police ou une couleur d'arrière-plan, il vous suffit de rechercher / remplacer quelques lignes de code et vous êtes prêt à partir.Il existe également l’avantage que même des milliers de lignes de CSS peuvent être réduites au point que son effet sur les temps de chargement est presque négligeable.
L'énorme inconvénient, à ne pas minimiser, c'est la compatibilité. Avec les images, les fichiers PNG étaient quasiment la seule chose dont nous devions nous préoccuper (à part le temps de chargement, bien sûr). Maintenant, avec CSS, nous avons des problèmes de support à tous les niveaux. Les navigateurs qui prennent en charge une nouvelle fonctionnalité ne le font qu'avec un préfixe unique, ce qui permet un codage ridiculement répétitif. De nombreuses fonctionnalités ne sont disponibles que sur un seul moteur de navigateur, d'autres sont prises en charge partout mais IE (certaines choses ne changent jamais); ça peut être un vrai bordel.
Le but ultime est de garder à l'esprit ce qu'il y a de mieux pour l'utilisateur. Si utiliser une image pour quelque chose produit le plus de bien possible pour la plupart des gens, foncez.
Moins d'images, moins de tranchage
En nous appuyant sur ces informations, nous pouvons enfin aborder la question de savoir si les concepteurs Web découpent encore des fichiers PSD.
Généralement, lorsque nous examinons un document Photoshop destiné à être converti en site Web, nous essayons de voir le code chaque fois que cela est possible. C'est comme ce moment dans la matrice où Neo regarde autour de lui pour voir ce qu'il considérait autrefois comme le monde normal et voit soudain le code derrière. Les concepteurs Web ne voient pas les calques et les effets de calque, nous voyons les propriétés div et CSS.
Etant donné que c'est le cas, la majeure partie du travail nécessaire à la réalisation d'une conception statique est davantage une opération de reconstruction que de découpage. Au lieu de découper ce bouton brillant et de le servir sous forme d'image, je vais utiliser CSS pour le reconstruire à partir de zéro. Ce processus est répété sur l’ensemble du site, souvent avec des images principalement utilisées pour le contenu réel plutôt que pour le design (bien qu’il reste encore beaucoup à faire avec du CSS pur).
Conception dans le navigateur
La question qui revient sans aucun doute à l'esprit de nombreux débutants en conception de sites Web lorsqu'ils lisent à propos de ce processus est bien entendu: "N'est-ce pas tout un peu répétitif?" D'abord, vous concevez et construisez un site dans Photoshop, Illustrator, Fireworks (oui, je me souviens que Fireworks est idéal pour le contenu Web, alors ne me criez pas dans les commentaires) ou tout autre outil de présentation de choix, puis vous recommencez à zéro le navigateur et reconstruisez ce que vous venez de créer en utilisant du code plutôt que des images dans la mesure du possible.
La réponse est un oui retentissant.? Le résultat est un mouvement de personnes qui encouragent le transfert du processus de conception directement vers le navigateur. Commencez dans le code, terminez dans le code, utilisez Photoshop uniquement lorsque vous devez créer une image et éliminez pratiquement tout ce non-sens répétitif.
Je suis tout pour ce processus. C'est super maigre et rationalise vraiment votre flux de travail. Malheureusement, il n’est pas toujours facile d’obtenir le meilleur travail possible en utilisant cette méthode du côté créatif de votre cerveau. Sarah Parmenter a récemment abordé ce problème dans son message, "Je ne peux pas concevoir dans le navigateur". dans lequel elle révèle le "secret coupable" Même si Photoshop n’est pas un bon moyen d’afficher le type de contenu Web dynamique et réactif dont les clients ont besoin aujourd’hui, il génère davantage de créativité que l’utilisation directe du HTML et du CSS.
Comment concevez-vous des sites Web?
Cet article représente une longue réponse à ce qui semblait être une question simple. Cependant, sous cette question, nous avons tous eu du mal à nous battre ces derniers temps, des débutants aux professionnels: quel est le meilleur processus pour concevoir un site Web? Le processus de conception créative devrait-il être distinct du processus de codage ou devrait-il être identique? Devrions-nous créer des maquettes dans une application de mise en page, puis les découper pour le navigateur ou existe-t-il un meilleur moyen? Fireworks est-il vraiment la solution ou reste-t-il une solution manquante?
Je veux entendre vos pensées à ce sujet. À quoi ressemble votre flux de travail actuel, du début à la fin? Où commencez-vous le processus de conception et comment se répercute-t-il sur un site Web actif? Quels outils trouvez-vous précieux en cours de route? Quel serait votre outil de conception Web idéal?