Share
L'établissement d'une grille de référence pour vos conceptions Photoshop est une première étape indispensable dans tout nouveau projet de site Web. Une grille de base établira un espacement cohérent entre les éléments de votre page, créant ainsi un rythme harmonieux tout au long de la page. En outre, au cours de la phase de développement, l’utilisation d’un framework CSS avec une grille de référence compatible peut faciliter la conversion de la conception en code..
Dans un récent tutoriel sur Webdesign Tuts +, Amir nous a montré comment créer un script Flexible Grid pour Photoshop afin de simplifier la tâche en configurant vos guides pour votre mise en page. Dans le même ordre d'idées, nous allons utiliser une extension Photoshop qui fera le gros du travail pour nous - une excellente option, en particulier si la création de votre propre script personnalisé est un peu trop ambitieuse pour vos besoins..
Je vais vous expliquer chaque étape nécessaire pour définir une grille de base horizontale et verticale dans Photoshop flexible, personnalisable et facile à remplir en moins de dix minutes..
Dans le tutoriel d'aujourd'hui, je vais utiliser une extension gratuite de Cameron McEfee appelée - de manière appropriée - GuideGuide. Rendez-vous sur http://www.guideguide.me pour télécharger le plugin.
Sélectionnez la version qui correspond à votre Photoshop (CS4 +) et enregistrez-la dans un emplacement approprié sur votre disque dur..
Remarque: Les utilisateurs OSX avec Photoshop CS5 devront installer le correctif Adobe Extension Manager..
Assurez-vous que votre Photoshop est fermé, ouvrez votre Adobe Extension Manager.
En cliquant sur le lien "Installer" dans le menu du haut, naviguez jusqu'à votre extension GuideGuide extraite et cliquez sur "Ouvrir". Après avoir accepté les conditions générales, GuideGuide sera prêt à être consulté lors de la prochaine ouverture de Photoshop..
Lancez Photoshop et, dans le menu Fichier "Fenêtre", sélectionnez "Extensions → GuideGuide"..
L'extension GuideGuide apparaîtra maintenant dans votre espace de travail. Ne vous inquiétez pas trop du champ de saisie pour l'instant, nous allons creuser dans l'extension prochainement..
Nous allons simplifier les choses aujourd’hui et reproduire la grille de 960 pixels utilisée par 960 Grid System (bien que vous puissiez l’approcher en utilisant les mesures que vous trouvez les plus faciles). Si nous nous dirigeons vers le site, la grille que nous allons reproduire est présentée en anglais simple sur la page d'accueil:
Pour reformuler cela, nous allons créer aujourd’hui un canevas de 960 pixels de large avec 12 colonnes de même taille et espacées de la même distance. Avec une marge de 10 px de chaque côté de la toile, il restera une gouttière de 20 px entre chacune des colonnes..
Avant de continuer, je sais ce que vous dites peut-être: "Pourquoi ne pas simplement télécharger le modèle Photoshop à partir du site?". Ce que je vais vous montrer comment créer aujourd'hui est entièrement personnalisable pour tout projet et tout framework CSS, quels que soient le nombre de colonnes, la largeur de la toile ou les gouttières. Nous utilisons simplement un exemple simple pour démontrer les techniques.
Dans Photoshop, sélectionnez Fichier → Nouveau et créez un nouveau document de 960 pixels de large par 1050 pixels de haut..
Assurez-vous que vos règles sont affichées (Affichage → Règles), faites glisser deux guides vers les bords du canevas..
En ouvrant l’extension GuideGuide, vous remarquerez un certain nombre de champs de saisie et d’éléments de menu qui nous permettront de définir notre grille de lignes de base horizontale, comme suit (vous pouvez également survoler chaque icône pour obtenir une description.)
Entrez les valeurs comme suit et cliquez sur le bouton GuideGuide:
Une fois que vous avez soumis les valeurs, Photoshop générera automatiquement tous les guides de la grille:
Remarque: L'utilisation de GuideGuide sans sélection entraînera automatiquement le rendu des guides sur tout le canevas. Si vous ne souhaitez que des repères sur une partie du document (une barre de navigation, par exemple), créez une sélection à l'aide de l'outil Rectangle de sélection (M) avant d'utiliser l'extension..
Dans l'état actuel des choses, nous disposons d'une grille de base horizontale parfaitement utilisable. Pour nous faciliter la tâche, nous allons maintenant ajouter une aide visuelle pour nous dire ce qu'est une colonne et ce qu'est une gouttière - ce qui peut être difficile à différencier lorsque vous effectuez un zoom avant sur le document..
Créer un nouveau calque (Ctrl + Maj + N) et tracez une sélection de la largeur et de la hauteur de la première colonne. Pressage Ctrl + BkSpace, remplissez la sélection avec # ff0084. Vous pouvez également utiliser l'outil Forme pour cela, mais assurez-vous que vos pixels sont sélectionnés avec précision..
Ensuite, créez 12 versions au total de la couche en appuyant sur Ctrl + J 11 fois. En sélectionnant la couche la plus haute, faites glisser la colonne à la douzième position avec l’outil Déplacer (V)..
Ensuite, sélectionnez les douze couches (Ctrl + Clic) et distribuez les colonnes en sélectionnant le Distribuer des centres horizontaux icône sous l'outil Déplacement (V) (alternativement, couche → aligner → centres horizontaux)
Enfin, nettoyez le document en sélectionnant tous les calques de colonne et en les fusionnant. (Ctrl + E). Renommez le calque "Ligne de base horizontale" et diminuez l'opacité jusqu'à 10%..
Maintenant que nous avons établi une ligne de base horizontale, il est temps de passer à notre ligne de base verticale. Nous n'allons pas approfondir la théorie des lignes de base verticales aujourd'hui, mais si vous souhaitez en savoir plus, consultez la rubrique Définition du type de site Web dans une grille de ligne de base..
Aujourd'hui, nous allons définir notre ligne de base verticale en fonction d'une taille de police de 14 pixels. Pour établir une hauteur de ligne de 1,5 et pour nous donner beaucoup de flexibilité, notre ligne de base sera de 7 pixels (c'est-à-dire que trois unités de base sont égales à 21 pixels)..
Je vais vous montrer deux méthodes pour y parvenir - n'hésitez pas à utiliser celle qui vous parle et qui décrit votre flux de travail.!
Pour commencer, nous allons utiliser GuideGuide une fois de plus. Ouvrez le poste, entrez la valeur suivante et appuyez sur le bouton GuideGuide:
Une fois soumis, Photoshop générera tous les guides de notre ligne de base verticale:
À ce stade, le lecteur le plus astucieux aura compris que cette méthode n’est possible que parce que nous avons créé la hauteur de notre document avec un multiple parfait de 7px (1050px). Si nous ne prenions pas cette étape initiale, le GuideGuide afficherait autant de guides 7px que possible et laisserait le reste au bas du document..
Et dans cette étape simple, nous avons créé une ligne de base verticale parfaitement fonctionnelle. Le seul problème est que ce document est maintenant très occupé. De plus, si vous avez l'habitude d'utiliser des guides dans vos conceptions, cette méthode peut rapidement devenir confuse, désordonnée et inutilisable..
Si cette méthode ne vous plaît pas, vous pouvez supprimer les guides horizontaux (Ctrl + Alt + Z) et créer une ligne de base alternative en utilisant une grille de pixels.
Pour notre méthode alternative, ouvrez le panneau des préférences de grille de Photoshop. (Édition → Préférences → Grilles, repères et tranches). Entrez les valeurs suivantes pour la grille de pixels:
Pour revenir à votre document, vous pouvez activer ou désactiver la visibilité de la grille. (Ctrl + '), où chaque ligne horizontale de la grille établit votre ligne de base verticale - comme vous pouvez le voir ici avec un zoom de 600% appliqué.
L'avantage de cette méthode est que nous avons séparé les lignes de base horizontale et verticale, ce qui vous permet de basculer facilement leur visibilité en fonction de la partie de la conception sur laquelle vous travaillez..
Quelle que soit la méthode que vous préfériez (guides ou couches de grille), la dernière étape consiste à créer une assistance visuelle pour notre ligne de base verticale de la même manière que nous l'avons fait pour notre ligne de base horizontale (mais nous allons utiliser une méthode différente)..
Créez un nouveau document 1 x 7 x 1 avec un arrière-plan transparent:
A l'aide de l'outil Rectangle de sélection (M), définissez le style sur Taille fixe, et les dimensions à 1px x 1px. Créez une sélection au bas du document (vous souhaiterez un zoom avant autant que vous puissiez aller ici (Z)) et remplissez-la avec # 00ff12 (Ctrl + Bkspace).
Ensuite, définissez ce document comme un motif (Édition → Définir un motif). Nommez-le 'Ligne de base verticale 7px'.
Retournez à votre document principal. Créer un nouveau calque (Ctrl + Maj + N), sélectionner la toile entière (Ctrl + A) et appuyez sur Ctrl + Bkspace pour remplir la sélection. Dans les menus déroulants, sélectionnez «Motif» pour le type de remplissage et votre «ligne de base 7px» nouvellement créée pour le motif..
Renommez le calque en 'Ligne de base verticale' et réduisez l'opacité à environ 30%..
Bien que les éléments ne s'alignent sur aucun des aides visuelles, quelle que soit la méthode utilisée pour la ligne de base verticale (repères ou couches de grille) aux étapes précédentes, votre couche visuelle nouvellement créée sera parfaitement alignée sur la ligne de base, ce qui facilitera la capture de la conception entière.
Et avec cela, vous avez créé une grille de ligne de base parfaite en pixels avec des couches visuelles pratiques pour votre prochain projet. Il ne vous reste plus qu'à donner à votre conception un peu de marge de manœuvre.
Ouvrez votre boîte de dialogue Taille de la toile (Image → Taille de la toile) et changer la largeur à 1400px.
Le résultat final:
Si vous avez fait tout le chemin, bon travail! Vous avez maintenant toutes les techniques nécessaires pour créer vos propres grilles de base personnalisées dans Photoshop..
Le seul conseil que je puisse vous donner est que, bien que GuideGuide gère très bien tous les calculs nécessaires, il doit respecter les limites de Photoshop, à savoir que les guides ne peuvent être placés que sur un pixel complet. Si votre grille appelle des mesures inférieures au pixel, les guides seront rendus aussi fidèlement que possible, leurs positions étant arrondies au pixel entier le plus proche. Dans cet esprit, un peu de planification au début peut éviter beaucoup de maux de tête d'un pixel plus tard dans le projet..
Pour finir, vous pouvez utiliser GuideGuide pour bien plus que des lignes de base; expérimentez en l'utilisant pour la mise en place de grilles pour toutes sortes d'éléments de conception, du cadre photo au menu!
Merci encore, et n'oubliez pas de vous abonner et de laisser un commentaire ci-dessous - nous aimerions connaître votre opinion!
Accentsconagua