Share
Dans ce tutoriel, j'utiliserai Photoshop CS6 pour concevoir une page de portefeuille simple, propre et à trois colonnes, avec une chronologie des tendances. Au cours de ce processus, nous verrons comment créer des grilles personnalisées avec des directives, mettre en forme une typographie et jouer avec les couleurs et les contrastes pour obtenir l’esthétique souhaitée. Le fichier PSD terminé sera prêt à être remis à un développeur pour le codage.
Pour pouvoir suivre, vous aurez besoin des éléments suivants (disponibles gratuitement):
Commencez par créer un nouveau document (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous.
Définissons des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. Aller à Voir> Nouveau guide… et définissez les paramètres suivants: vertical à 20px, 50px, 115px, 230px, 550px, 570px, 875px et 1180px et horizontal à 60px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
Nous allons garder notre document bien organisé dès le début, alors créons trois groupes de couches nommés Barre latérale de gauche, Descriptions et Travail. Si vous vous en tenez à cette étiquette Photoshop, les choses resteront organisées et faciles à naviguer ou à modifier. Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône..
La barre latérale à gauche servira de zone pour un profil d'utilisateur, un avatar, des liens sociaux et une navigation principale. Construisons!
Sélectionnez le Outil Rectangle (T), changer la couleur de premier plan en # 11171c et dessinez un rectangle de 230x1320px à l’intérieur du Barre latérale de gauche groupe. Il doit être placé à gauche du document entre le bord du document et la quatrième ligne directrice verticale..
Créez un nouveau groupe au-dessus de la forme de rectangle créée précédemment et nommez-le. Photo de profil. Après cela, choisissez le Outil Ellipse (U) et en maintenant le Décalage Cliquez sur le bouton, tracez un cercle de 100 x 100 pixels et placez-le juste en dessous de la première ligne directrice horizontale. Il devrait également être centré sur la troisième ligne directrice verticale.
Maintenant, rendez-vous sur uifaces.com et prenez l'un des avatars disponibles. Vous pouvez également trouver votre propre photo et la coller au-dessus de la forme de cercle récemment créée. Après cela, maintenez la Alt clé et la souris sur la vignette du calque photo jusqu'à ce que vous voyiez une petite flèche vers le bas. Lorsque vous le voyez, relâchez le bouton et cela créera un Masque d'écrêtage, reliant votre photo à une forme circulaire. Alignez-le comme bon vous semble, en utilisant le Outil de déplacement (V).
Maintenant minimiser le Photo de profil groupe en cliquant sur cette petite flèche à côté du titre du groupe. Après cela, changez la couleur de premier plan en #FFFFFF et choisissez le Outil de type horizontal (T). Sélectionnez le Lato (régulier) police, définir la taille sur 16 pt et écrivez le nom de notre propriétaire de portefeuille. Dans mon cas c'est le complètement fictif Chris Johnson. Le placer 25px sous la photo de profil et assurez-vous qu’elle est centrée sur la troisième ligne directrice verticale.
Nous avons maintenant besoin d’une brève description de notre portefeuille afin que les visiteurs puissent comprendre immédiatement de quoi il en retourne. Nous allons utiliser le même outil; tout ce que nous devons faire est de réduire la taille de la police à 14 pt et écrivez quelques mots sur le propriétaire du portefeuille. Pour le faire paraître organisé et équilibré placez-le 20px plus bas, il a un peu d’espace pour respirer.
Bien. Maintenant, plaçons quelques icônes de réseaux sociaux facilitant la connexion avec le propriétaire du portefeuille. Créez un nouveau groupe avec le titre suivant: Des médias sociaux. Après cela, rendez-vous sur Iconfinder pour télécharger les icônes Dribbble, Twitter, Facebook et Google+ au format PNG. Faites-les glisser vers votre document Photoshop et placez-les à l'intérieur du Des médias sociaux groupe. Maintenant, cliquez avec le bouton droit sur l’icône Dribbble, sélectionnez Options de fusion… et appliquer le Superposition de couleurs option. Au lieu du rouge par défaut, définissez la couleur sur blanc.
Toutes les autres icônes doivent également être blanches. Appliquons donc le même style de calque au reste des icônes. Faites simplement un clic droit sur le Dribbble couche d'icônes et sélectionnez Copier le style de calque. Après cela, maintenez la CMD touche et sélectionnez le Gazouillement, Facebook et Google+ couches. Cliquez à nouveau sur l'un d'eux et sélectionnez Coller le style de calque. Enfin, alignez les icônes de manière à créer un 10px écart de chaque côté et le groupe est placé 20px en dessous du texte de description.
Changeons la couleur de premier plan en blanc #FFFFFF, puis choisissez le Outil Ligne (U), ensemble poids à 1px et en maintenant le Décalage tracez une ligne horizontale du bord gauche du document à la quatrième ligne directrice verticale. Le déplacer 50px des icônes.
Pour rendre notre ligne plus subtile visuellement, réduisons celle de la couche Opacité à dix%.
Concentrons-nous maintenant sur notre navigation, alors créez un nouveau groupe appelé La navigation et placez-le au-dessus du rectangle sombre. Après cela, sélectionnez une icône de document dans le jeu d’icônes Free Vector Icons from Chapps et faites-la glisser vers le document de votre portefeuille. Frappé CMD + T redimensionner l'icône pour 13x16px. Après cela, double-cliquez sur le nom de la couche et renommez-le en Icône de travail. Ceci fait, double-cliquez sur une vignette de calque et changez la couleur en # d35136. Placez l'icône 40px en dessous de la ligne subtile et 20px à partir du bord gauche, de sorte qu'il s'aligne sur le premier repère vertical.
Maintenant, pour quelques éléments de navigation. Choisissez le Outil de type horizontal (T), choisir la Lato (gras) police, définir la taille sur 14 pt et écrivez ce qui suit: TRAVAIL. Placez-le devant le deuxième repère horizontal et assurez-vous qu’il s’aligne verticalement avec le Icône de travail.
Changer la couleur de premier plan en # 424a51 et, en utilisant le même outil de texte, écrivez quelques catégories pour le travail, chacune commençant par une nouvelle ligne. Assurez-vous que la hauteur de la ligne est définie sur 24 pt donc nos catégories sont facilement lisibles. Placez le calque catégories 20px sous le calque de texte créé précédemment.
Nous devons indiquer l'état actif du lien. Pour la catégorie active, utilisez le blanc #FFFFFF, cliquez simplement sur le texte en Outil de type horizontal (T) est toujours sélectionné, mettez en surbrillance la première catégorie et changez la couleur.
Maintenant, choisissez une icône d'utilisateur dans le jeu d'icônes précédemment utilisé et redimensionnez-la en 16x16px en utilisant CMD + T. Cliquez deux fois sur la vignette du calque de l'icône et remplacez la couleur par # 27b599, renommer la couche en Icône d'utilisateur il est donc plus facile de gérer nos couches. Le placer 30px en dessous de la dernière catégorie pour lui donner un espace négatif qui servira de séparateur.
Changer la couleur de premier plan en vert # 27b599 comme utilisé pour le Icône d'utilisateur et choisissez le Outil de type horizontal (T). Sélectionnez le Lato (gras) police, définissez la taille sur 14 pt et écrire SUR. Placez cette étiquette juste après l'icône de l'utilisateur, comme vous l'avez fait pour la section ci-dessus. Puis changez la couleur de premier plan en # 424a51 et entrez des titres de liens pour la section "à propos de".
Créons maintenant la dernière section de notre navigation. Contact. Choisissez l'icône de courrier de Icônes vectorielles gratuites de Chapps et le redimensionner à 16x13px, après cela changer sa couleur à # 088ecc et placez-le systématiquement comme les icônes avant, 30px sous la dernière couche de texte du Sur section. Ayant entré le CONTACT texte, changez la couleur de premier plan en # 424a51 et notez quelques titres de liens pour la section.
Passant d'un bloc à droite, commençons par les descriptions des éléments de notre portefeuille.
Nous allons minimiser l'utilisation actuelle La navigation et Barre latérale de gauche groupes en cliquant sur les petites flèches à côté des noms de groupe. Étendre le Descriptions groupe, changez la couleur de premier plan en # f7f7f7 et sélectionnez le Outil Rectangle (T). Ensuite, tracez un rectangle vertical entre le bord de Barre latérale de gauche et la cinquième ligne directrice verticale. Ce rectangle devrait être 320x1320px.
Maintenant changez la couleur de premier plan en # e7e7e8 et choisissez le Outil Ligne (U). Réglez le poids sur 1px et, en maintenant le bouton Décalage tracez une ligne verticale de haut en bas sur la cinquième ligne directrice verticale. Cela devrait créer une meilleure séparation visuelle entre le Descriptions section de groupe et l’arrière-plan principal. Frappé CMD +; masquer / afficher les directives. Enfin, renommez le calque ligne en Ligne V ça a du sens plus tard.
Nous allons tracer une autre ligne verticale, alors changez la ligne Poids 3px et tracez une autre ligne à travers le document (en maintenant la Décalage clé pour maintenir une verticalité parfaite). Cliquez deux fois sur le nom du calque pour le renommer. Chronologie. Après cela, déplacez la ligne 24px à droite de la Barre latérale de gauche bord et 30px du haut du document.
Changer la couleur de premier plan en notre rouge précédemment utilisé # d35136 et choisissez le Outil Ellipse (U). Après cela, maintenez la Décalage clé et dessinez un cercle de 11x11px. Placez-le 20px à droite du bord de la Barre latérale de gauche zone et 20px du haut du document. Notre petit cercle devrait être bien placé en haut de la ligne récemment créée.
Maintenant, cliquez avec le bouton droit sur la couche de cercle créée récemment et sélectionnez Options de fusion… . Cliquer sur Accident vasculaire cérébral. Ensemble Taille à 3px, Position à À l'extérieur et la couleur à # f7f7f7. Ce trait de couleur de fond créera l’effet de notre cercle flottant à côté d’une ligne.
Changez la couleur de premier plan en # 11171c et choisissez le Outil de type horizontal (T). Comme d'habitude, choisissez le Lato (gras) police, définissez la taille sur 14 pt et entrez une date pour le travail, par exemple "7 nov 2013". Puis, en utilisant le Outil de déplacement (V), déplacez le calque de date 20 pixels à la droite du cercle rouge et 20 pixels du haut du document.
Vous devriez maintenant avoir remarqué une tendance dans notre espacement. Il est important d'être cohérent et d'utiliser un espacement rythmique pour différents éléments afin que le design soit équilibré..
Changez la couleur de premier plan en # 5e5e5e il est donc légèrement plus léger que la date. Cela crée une hiérarchie visuelle rendant la lecture beaucoup plus facile. Utilisez le même Outil de type horizontal (T), Lato police, mais cette fois, changez le poids de la police en Ordinaire et entrez quelques lignes pour une brève description de travail. Ensuite, faites un saut de ligne en appuyant sur le Entrer cliquez deux fois sur le bouton et entrez le client et les balises pour le travail, par exemple:
Mettez en surbrillance "client" et "tags" et définissez le poids de la police sur Audacieux, ils seront donc différents de la description et seront perçus comme des liens. Enfin, assurez-vous que la hauteur de ligne est définie sur 18 pt donc nos lignes ont assez d'espace pour respirer.
Pour dupliquer les caractéristiques que nous venons de créer, sélectionnez les calques cercle rouge, date et description. Puis frappe CMD + J, ou faites un clic droit et sélectionnez Dupliquer les calques… , frappe D'accord après. Déplacez le contenu dupliqué de quelques centaines de pixels sous l’original. Nous ajusterons la position plus tard, car cela dépendra de la hauteur de l'image de travail que nous placerons à côté..
La dernière section verticale de notre mise en page concerne les éléments du portefeuille eux-mêmes. Construisons!
Nous allons commencer (comme d'habitude) en minimisant l'utilisation actuelle Descriptions groupe et ouverture du Travail groupe. Choisissez le Outil Rectangle (U) et tracez un rectangle de 610x400px entre les sixième et huitième repères verticaux (la couleur importe peu cette fois-ci, assurez-vous simplement qu'elle est visible). Placez-le 20px en dessous du haut du document afin qu'il ait 20px d'espace tout autour.
Maintenant, choisissez une image de votre travail. J'utiliserai la capture d'écran du modèle PSD pour ordinateur portable que j'ai précédemment conçue. Faites-le glisser dans la fenêtre de votre document Photoshop et assurez-vous qu'il est placé au-dessus du calque de forme rectangulaire précédemment créé. Tenir ALT Touchez la souris sur le nom de la couche d’écran jusqu’à ce que vous voyiez une petite flèche vers le bas. Lorsque vous le voyez, relâchez la touche et cela créera un Masque d'écrêtage de sorte que votre image ne sera visible que dans la zone du rectangle. Enfin, appuyez sur CMD + T et redimensionnez l'image comme vous le souhaitez.
Sélectionnez le calque de forme rectangle, dupliquez-le et déplacez-le 20px en dessous de la première image. Ajoutez une autre image de votre travail, comme nous l’avions déjà fait. Pour le deuxième exemple de travail, j'ai utilisé Raindrops photo de unsplash.com. Après cela, créez une troisième pièce et placez-la 20px en dessous de la seconde. Pour la troisième image de travail, j'ai utilisé la photo Skyline de NYC, à nouveau sous la forme unsplash.com..
Nous devons maintenant revenir en arrière et nous assurer que tout est aligné correctement. Ouvrez le Descriptions groupe à nouveau et trouver les couches cercle rouge, date et description. Sélectionnez-les tous en tenant CMD et déplacez-les vers le bas jusqu'à ce qu'ils soient alignés avec le haut de la deuxième image du portefeuille. Dupliquez ces couches en cliquant sur CMD + J, ou en cliquant avec le bouton droit sur les calques et en sélectionnant Dupliquer les calques… . Après cela, placez-les à côté de la troisième image de travail et alignez-les sur le haut de cette image..
Impressionnant. Nous sommes proches de la fin. Minimiser le Descriptions groupe et ouvrir Travail groupe à nouveau. Ensuite, sélectionnez l’icône d’actualisation dans le jeu d’icônes et faites-la glisser dans votre document de portefeuille. Frappé CMD + T et le redimensionner à 20x20px. Cliquez deux fois sur la vignette du calque de l'icône et remplacez la couleur par # a0a2a4. Enfin placez-le 20px en dessous de l'image de travail.
Dernière étape! Créons un élément dynamique qui apparaîtra lorsque notre site Web sera déroulé et que le serveur chargera plus de travail. Choisissez le Outil de type horizontal (T), choisir 14 pt Taille Lato (gras) police et entrez le texte Chargement… . Placez-le à côté de l'icône d'actualisation et déplacez-le 10px vers la droite. Ensuite, sélectionnez les deux calques, l’icône et le texte, puis placez-les au centre de la ligne de repère verticale de l’image de travail..
Donc là vous l'avez. Nous avons procédé à la création d’une mise en page de portefeuille, à partir de rien, de manière organisée et efficace. Le fichier que nous avons créé est prêt à être remis à un développeur qui peut le séparer, trouver tous les éléments nécessaires et le construire pour le navigateur..
J'espère que vous avez appris quelque chose de nouveau en suivant ce tutoriel. Si vous avez des questions ou rencontrez des difficultés, n'hésitez pas à m'envoyer un message dans la section commentaires ou via Twitter..
Accentsconagua