Share
Ce que vous allez créerDans ce tutoriel, je vais vous guider dans le processus de création d'un portefeuille simple et propre basé sur Instagram. Nous utiliserons des images frappantes, une palette de couleurs épurée et des polices de caractères lisses. Nous commencerons par créer une version Web, puis nous vous montrerons comment l'adapter rapidement pour une vue mobile..
Pour pouvoir suivre, vous aurez besoin des éléments suivants (disponibles gratuitement):
Commencez par créer un nouveau document Photoshop (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous. Vous êtes libre d'utiliser une toile de toutes les dimensions que vous préférez - le Web n'est pas une largeur fixe, après tout.
Assurez-vous que la résolution est définie sur 72 pixels / pouceDéfinissons des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. Je n'utilise pas toujours une grille, mais l'établissement de certaines lignes directrices assurera la propreté et aidera à définir la largeur de notre site Web. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000 pixels comme largeur de site Web et j'ajoute quelques indications à partir des coins afin qu'il ait de l'espace pour respirer.
Remarque: Instructions utilisées pour ce tutoriel: vertical à 100px, 600px et 1100px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
En nous conformant à l'étiquette de Photoshop, nous allons garder les choses organisées et faciles à naviguer et à modifier. Créons trois groupes de couches nommés En-tête, Photos et Contact. 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..
L'en-tête ou la zone "au-dessus du pli" (où que ce soit ces jours-ci) joue un rôle très important dans la communication avec les utilisateurs et garantit que les visiteurs restent sur le site Web. Pour ce portfolio, je vais utiliser une photo de belles montagnes et un message simple pour décrire l’aventure et les défis..
Créons d'abord l'arrière-plan du blog. À l'intérieur de Entête groupe dessine n’importe quelle forme de rectangle de couleur à l’aide du Outil Rectangle (U). Dans mon cas, j'ai dessiné un rectangle de taille 1200x600px et l'ai placé en haut du document..
Maintenant, téléchargez Mountains photo, faites-le glisser vers le document Photoshop et placez-le au-dessus du calque rectangle. Renommez le calque d'image en quelque chose que vous pourrez reconnaître plus tard, dans mon cas, j'ai utilisé IMG. Après cela maintenez la Alt clé et souris sur la couche de photo jusqu'à ce que vous voyiez une petite flèche pointant vers le bas, puis relâchez-la. Vous venez de créer un Masque d'écrêtage.
Maintenant frappé CMD + T et redimensionner la photo pour répondre à vos besoins.
Pointe: tenir Décalage clé pour transformer proportionnellement.
Faisons quelques ajustements à notre image pour la rendre plus vivante et mémorable. Créez un nouveau calque, appelez-le Shadow et créez un calque. Masque d'écrêtage comme nous l'avons fait pour l'image de la montagne. Puis choisissez le Outil de dégradé (G) et définir des couleurs dégradées pour aller du noir # 000000 transparent, maintenez la touche Maj enfoncée tout en faisant glisser le curseur de la souris vers le milieu de l'image. Enfin réduire le dégradé Opacité à 60%.
J'utilise habituellement cette technique pour assombrir les images lumineuses et placer le texte blanc au-dessus.
Ajoutons encore plus de couleurs à notre en-tête pour le rendre encore plus génial. Créez un nouveau calque, nommez-le Gradient et sélectionnez à nouveau le Outil de dégradé (G). Après cela, définissez les dégradés de couleur pour passer du violet # 37056b au rose # ff01fc (ou toute autre couleur de votre choix) et faites-la glisser du coin supérieur gauche de l’image au coin inférieur droit. Enfin, réduisez le dégradé Opacité à 20%.
Il est temps de placer un logo pour notre portefeuille. Choisissez le Outil de type horizontal (T) et entrez le nom de votre portefeuille, que ce soit votre nom ou votre pseudo. Pour ce tutoriel, j'ai utilisé un très élégant Kaushan Script 21px police de taille. Placez votre nouveau logo dans le coin supérieur gauche de votre site Web, à côté du premier repère vertical. Poussez-le 50px pour lui donner assez d'espace négatif pour qu'il ait l'air propre et professionnel.
Nous ajouterons des icônes de médias sociaux pour que les gens puissent vous suivre et suivre votre travail. Faites glisser les icônes Facebook, Twitter et Instagram d'Iconfinder vers votre document Photoshop, renommez les calques pour qu'ils soient rapidement identifiables et placez-les en haut à droite, à côté du dernier repère vertical. Après cela, cliquez avec le bouton droit de la souris sur l’une des couches d’icônes, sélectionnez Options de fusion… et appliquer le Couleur Recouvrir option avec la couleur blanche #ffffff. Faites la même chose avec le reste des icônes.
Assurez-vous de laisser suffisamment d'espace sur les côtés et alignez vos icônes horizontalement avec votre logo..
Finissons notre zone d'en-tête. Nous avons une belle image et beaucoup d'espace. Mettons un message d'introduction simple afin que les visiteurs puissent comprendre en quoi consiste ce site Web.
Choisir la Outil de type horizontal (T) et en utilisant 36px Taille Lato (noir) police entrez quelques mots. Dans mon cas, j'utilise "BONJOUR! JE SUIS JONATHAN". Juste après, sur une nouvelle ligne avec une police plus petite, entrez des informations supplémentaires sur vous-même ou sur votre travail que les visiteurs peuvent trouver intéressantes. Pour ce tutoriel, j'ai utilisé 16px Taille Lato (Ordinaire)
J'aime voyager partout dans le monde et concevoir de belles choses.
Assurez-vous que la hauteur de ligne est suffisamment grande pour que votre texte dispose d'un espace pour respirer. Enfin, placez votre texte au milieu de la zone En-tête..
Dans cette section, nous placerons des photos sur Instagram pour montrer quelques exemples de travaux, démontrant à quel point l'artiste ou le designer est compétent et pertinent..
Commençons par changer le fond pour cette zone. Réduisez le groupe d'en-têtes en cliquant sur une petite flèche en regard du nom du groupe et ouvrez le groupe Photos. Après cela, choisissez le Outil Rectangle (U) et tracez un rectangle légèrement gris. Dans mon cas j'ai utilisé #eeeeeepour la couleur et dessiné unRectangle 1200x880px.
Ajoutons maintenant une ligne décrivant le travail. Cela peut être simplement "Dernier ouvrage" ou dans mon cas "DERNIÈRES PHOTOS". Le texte doit être lisible, c'est pourquoi j'ai utilisé le gris # 9b9b9b et la police est Lato (gras) 12px Taille. Veuillez noter que l’espacement des lettres est assez important (270) qui sert uniquement à styliser le titre de la zone et ne fonctionnerait pas pour le texte normal. Encore une fois, donnez à votre titre assez d’espace et déplacez-le de l’image vers le bas. 80px.
Génial! Nous sommes enfin prêts à ajouter de superbes photos à notre portfolio. Créez un nouveau groupe appelé Photo. Après cela, vous devez décider du nombre d'images que vous souhaitez afficher dans une rangée. J'ai décidé d'aller avec quatre, donc je dois faire quelques calculs avant de déterminer les pixels.
La largeur de notre site Web est de 1000 pixels, je vais donc le diviser par 4, ce qui me donnera 250 pixels pour chaque image, mais nous devons également laisser un espacement sur les côtés, disons une gouttière de 20 pixels entre les images. Donc, la largeur finale de l'image sera (1000px-60px) / 4 = 235px.
Choisissez le Outil Rectangle (U) et en maintenant la touche Maj enfoncée, tracez un rectangle de 235x235px. Après cela, choisissez une image de votre flux Instagram ou une image provenant de unsplash.com ou de getrefe.tumblr.com, faites-la glisser vers votre document Photoshop et placez-la au-dessus du rectangle. Ensuite, en maintenant la touche Alt enfoncée, créez un Masque d'écrêtage et en utilisant CMD + T redimensionnez l'image et placez-la comme vous le souhaitez.
Nous devons maintenant ajouter le nombre de "j'aime" (comme preuve sociale) et une brève description. Créez un nouveau calque et nommez-le Ombre, placez-le au-dessus de l'image et assurez-vous de créer un calque. Masque d'écrêtage pour cela aussi. Après cela, en utilisant le Pente Outil (G) Appliquez un dégradé allant du noir au transparent, comme indiqué précédemment dans ce didacticiel. Enfin réduire sa Opacité à 60%.
Choisissez le Outil de type horizontal (T) et entrez un nombre de goûts. J'ai utilisé 13px Taille Montserrat police et gauche 15px espace à gauche et en bas afin de donner assez d’espace pour respirer mais pas pour submerger l’image.
Maintenant, choisissez le Outil Rectangle (U) et dessinez un rectangle blanc en dessous de la photo. Puis prenez le Outil de type horizontal (T) et écrivez une courte description de photo que vous utiliseriez sur Instagram, y compris des hashtags et une date de publication sur une nouvelle ligne. La police que j'ai utilisée pour ce tutoriel est Montserrat 12px taille en gris # 808080.
Remarque: Assurez-vous que votre espacement est cohérent. Si vous avez utilisé 15px sur les côtés du nombre de mentions, faites de même avec la description..
Nous en avons terminé avec l'élément photo et il est maintenant temps d'ajouter quelques photos supplémentaires à notre portfolio. Réduisez le groupe de photos et dupliquez-le en appuyant sur CMD + J ou en cliquant avec le bouton droit de la souris sur le nom du groupe et en sélectionnant Groupe en double… Après cela, dupliquez autant de photos que vous le souhaitez et organisez-les dans une grille. Dans mon exemple j'ai 20px d'espacement et d'images différentes de unsplash.com et de getrefe.tumblr.com.
Dans cette zone, nous allons mettre un message simple et contacter "call to action" ainsi que des informations génériques sur le copyright..
Réduisez le groupe de photos en cliquant sur la petite flèche en regard du nom du groupe et ouvrez le groupe de contacts. Après cela, choisissez le Outil de type horizontal (T) et en utilisant des caractères assez gros, entrez un titre pour la section; dans mon cas, il s'agit de "GET IN TOUCH". Donnez-lui beaucoup d'espace en haut et ajoutez une brève description pour inciter l'utilisateur à agir. J'ai utilisé # 565d64 pour la couleur et 36px Taille Lato (noir) police pour le titre et 16px Lato (Ordinaire) pour la description.
Nous avons maintenant besoin d’un bouton d’appel à l’action sur lequel les utilisateurs cliqueront pour exécuter l’action souhaitée. Pour ce tutoriel, utilisons un simple bouton de contact. J'ai utilisé le Outil Rectangle (U), dessiné une forme simple et placé le texte dessus. Assurez-vous de laisser suffisamment d'espace au-dessus du bouton pour qu'il soit propre et équilibré.
Enfin, mettons une ligne de droit d'auteur générique au bas de notre portefeuille. Avant de le faire, choisissez le Outil Ligne (U) et dessine un gris subtil # e0e0e0 horizontal 1px ligne à travers le document en laissant autour 90px de l'espace tout en bas. Juste après, placez votre ligne de copyright. Dans ce cas j'ai utilisé 12px Taille Lato (gras) police avec espacement des lettres de 270 et gris foncé # 9b9b9b.
Et voilà, vous avez terminé avec la version Web du portfolio! Maintenant, je vais vous montrer comment transformer rapidement la version Web pour le mobile afin que vous puissiez visualiser le site Web réactif..
Créons un nouveau document et définissons les dimensions pour 320x2100px. Créez trois lignes directrices verticales à 20px, 150px et 300px pour nous guider en laissant un peu d’espace sur les côtés. Après avoir sélectionné tous les groupes dans notre document de version Web, faites-les tous glisser vers un nouvel onglet de document jusqu'à ce que le nouveau document apparaisse et libérez les groupes dans le document..
Maintenant ouvrez le groupe Header, trouvez notre logo et utilisez le Bouge toi Outil (V) déplacez-le vers la droite jusqu'à ce qu'il soit visible dans notre nouvel agencement étroit. Laissez-le à côté de la première ligne directrice verticale. Après cela, trouvez les icônes sociales et déplacez-les vers la gauche.
Il est maintenant temps d'adapter le message principal. Choisissez le Outil de type horizontal (T), coupez la ligne de description et réduisez la police de message principale pour l’adapter entre les premier et troisième repères verticaux. Ajustez les options de hauteur de ligne et vous êtes prêt à partir.
Ouvrez le groupe Photos et déplacez-vous dans le titre "DERNIÈRES PHOTOS", car nous n'avons pas besoin de beaucoup d'espace sur la vue mobile. Après cela, recherchez le groupe Photo et déplacez-le entre les repères verticaux. Puis ouvrez le groupe, cliquez sur la forme du rectangle d’arrière-plan de la description, appuyez sur CMD + T et redimensionner pour être 280px en largeur. Faites la même chose avec le rectangle de photo. Enfin, organisez les photos dans une colonne et redimensionnez-les pour les adapter aux directives..
Notre section Photos étant plus longue que sur la version Web, des ajustements d’arrière-plan sont nécessaires. Trouvez le calque d'arrière-plan Photos et appuyez sur CMD + T pour le redimensionner, le rendre plus grand et laisser un peu d’espace au bas de la section.
Enfin, nous devons réorganiser notre section de contact de manière à ce que le message s’intègre parfaitement dans les directives définies. Ouvrez le groupe de contacts et utilisez le Outil de type horizontal (T) rompez les lignes de message de contact pour les faire correspondre à nos consignes. Assurez-vous de réduire l'espace au-dessus et au-dessous des éléments, car nous n'avons pas besoin de beaucoup d'espace blanc pour la vue mobile. En outre, réduisez la hauteur de ligne pour le message afin qu'il ait l'air propre et professionnel.
La dernière chose à faire est de diviser la ligne de copyright en deux lignes afin qu’elle se situe également entre les instructions..
Vue mobile complète.C'est tout. Nous en avons terminé avec les versions Web et mobile de notre nouveau portefeuille basé sur Instagram. J'espère que vous avez appris quelque chose de nouveau et que les compétences que vous avez acquises vous aideront à construire des choses incroyables à l'avenir.
J'aimerais entendre vos commentaires et voir les résultats de ce tutoriel.!
Accentsconagua