Concevoir un portfolio simple inspiré d'Instagram dans Photoshop

Dans ce tutoriel, je vais vous guider à travers le processus de création d'un portfolio simple et propre dans le style Instagram. Nous utiliserons des images frappantes, une palette de couleurs propre et typographies lisses. Nous allons commencer en créant une version web et puis je vais vous montrer comment l’adapter rapidement pour l’affichage mobile.

Ressources du tutoriel

Pour suivre ce tutoriel, vous aurez besoin des ressources suivantes (disponibles gratuitement) :

• Photo de montagnes de Unsplash
• Police Kaushan Script de Font Squirrel
• Police Lato de Font Squirrel
• Icônes de médias sociaux de Iconfinder
• Galeries de photos de Unsplash
• Galeries de photos de Refe

Préparer le document

Étape 1

Commencez par créer un nouveau document Photoshop (Fichier > Nouveau...) en utilisant les paramètres ci-dessous. Vous êtes libre d’utiliser un caneva aux dimensions que vous préférez - le web n’a pas de largeur fixe, après tout.

Étape 2

Nous allons définir quelques repères pour que notre mise en page ai suffisamment d’espace et semble équilibrée. Je n’utilise pas toujours une grille, mais mettre en place certains repères assureront la propreté et permettront de définir la largeur de notre site Web. Allez dans Affichage > Nouveau repère... et définissez les repères. Habituellement, je choisis 1000px comme largeur de site web et j'ajoute quelques repères aux coins pour qu'il y ai de l'espace.

Remarque : Les repères utilisés pour ce tutoriel : vertical à 100px, 600px et 1100px.

Astuce : Vous pouvez également utiliser le plugin Photoshop GuideGuide pour rendre ce processus encore plus rapide.

Étape 3

Pour respecter Photoshop etiquette, nous allons garder les choses organisé, simple à la navigation et à la modification. Nous allons créer trois groupes de calques nommés "En-tête", "Photos" et "Contact". Pour créer les groupes allez à Calque > Nouveau > Groupe... et donnez à chacun les titres mentionnés ci-dessus. Pour créer un groupe rapide, il suffit de cliquer sur l'icône correspondant.

Conception de l'en-tête

L’en-tête ou « au-dessus du pli » (où que ce soit ces jours-ci) joue un rôle très important en séduisant les utilisateurs et en veillant à ce que les visiteurs restent sur le site web. Pour ce portfolio, je vais utiliser la photo de quelques belles montagnes et un message simple afin de dépeindre l’aventure et défi.

Étape 1

Nous allons d’abord créer le fond du blog. Dans le groupe "En-tête", dessinez n’importe quelle forme de rectangle de couleur à l’aide de l’outil Rectangle (U). Dans mon cas, j'ai dessiné un rectangle de 1200x600px et l'ai placé en haut du document.

Maintenant téléchargez la photo de montagnes, faites-la glisser dans le document Photoshop et placez-la au-dessus du calque du rectangle. Renommez le calque de l’image afin de pouvoir le reconnaître plus tard, dans mon cas, j’ai utilisé IMG. Après ça, maintenez enfoncée la touche Alt et de la souris au-dessus de la couche photo jusqu'à ce que vous voyez une petite flèche pointant vers le bas, puis relâchez-le. Vous venez de créer un masque d’écrêtage.

Maintenant appuyez sur CMD + T et de redimensionner la photo selon vos besoins.

Astuce : maintenez enfoncée la touche Maj enfoncée pour transformer proportionnellement.

Étape 2

Nous allons ajuster l'image afin qu'elle soit un peu plus vive et mémorable. Créez un nouveau calque, appelez-le "Ombre" et créer un masque d’écrêtage, comme nous l’avons fait pour l’image de la montagne. Choisissez l’outil dégradé (G), puis définissez des couleurs de dégradé allant du noir #000000 au transparent, maintenez la touche Maj enfoncée, tirez la souris du bas de l'image jusqu'au milieu. Enfin réduisez l'opacité du calque dégradé à 60%.

J’utilise habituellement cette technique pour assombrir des images lumineuses et placer du texte blanc par dessus.

Étape 3

Nous allons ajouter quelques couleurs en plus à notre en-tête pour la rendre encore plus géniale. Créez un nouveau calque, nommez-le "Dégradé" et une fois de plus prenez l’outil dégradé (G). Après avoir défini les couleurs du dégradé comme allant du violet #37056b au rose #ff01fc (ou n'importe quels autres couleurs que vous voulez) et faites glisser le coin supérieur gauche de l’image vers le coin inférieur droit. Enfin, réduisez l'opacité du calque dégradé à 20%.

Étape 4

Il est temps de placer un logo sur notre portfolio. Choisissez l’outil de Texte Horizontale (T) et entrez le nom de votre portfolio, que ce soit votre nom ou pseudo. Pour ce tutoriel, j’ai utilisé une typhographie très élégante Kaushan Script de taille 21px. Placez votre nouveau logo dans le coin supérieur gauche de votre site web à côté du premier repère vertical. Abaissez-le de 50px afin de lui donner assez d’espace négatif pour que le tout semble propre et professionnel.

Étape 5

Nous ajouterons quelques icônes de médias sociaux, afin que les gens puissent vous suivre vous et votre travail. Faites glisser les icônes Facebook, Twitter et Instagram de Iconfinder vers votre document Photoshop, renommer les calques afin qu’ils soient rapidement reconnaissables et placez-les sur le haut du côté droit à côté du dernier repère vertical. Après cela, faîtes un clic droit sur l'un des calques de vos icônes, sélectionnez Options de fusion... et appliquez l’option Incrustation couleur avec la couleur blanche #ffffff. Faites de même avec le reste des icônes.

Assurez-vous de laisser suffisamment d’espace sur les côtés et aligner vos icônes horizontalement avec votre logo.

Étape 6

Nous allons finir notre en-tête. Nous avons une belle image et pas mal d'espaces. Nous allons mettre un message simple d'introduction pour que les visiteurs puissent comprendre le sujet du site web.

Choisissez l’outil Texte Horizontal (T) et en utilisant la typographie Lato (Black) en taille 36px et entrez quelques mots. Dans mon cas, j’utilise « HELLO ! JE SUIS JONATHAN ». Juste après cela, sur une nouvelle ligne avec une police plus petite entrez des trucs plus d'informations sur vous-même ou votre travail afin que les visiteurs puissent trouver cela intéressant. Pour ce tutoriel, j’ai utilisé Lato (Regular) en taille 16px 

J’aime voyager partout dans le monde et concevoir de belles choses.

Assurez-vous que la hauteur de ligne est assez grande pour que votre texte dispose d’espace pour respirer. Enfin, placez votre texte au milieu de la zone d’en-tête.

Conception de la zone des photos

Dans cette zone, nous placerons des photos venant d'Instagram pour montrer quelques exemples de travaux, démontrant à quel point l'artiste ou le designer est qualifié et compétent.

Étape 1

Nous allons tout d’abord changer l’arrière-plan de cette zone. Minimisez le groupe "En-tête" en cliquant sur la petite flèche à côté du nom de groupe et ouvrez le groupe "Photos". Après cela, choisissez l’outil Rectangle (U) et dessinez un rectangle légèrement gris. Dans mon cas j’ai utilisé #eeeeee pour la couleur et ai dessiné un rectangle de 1200x880px.

Étape 2

Maintenant nous allons ajouter une ligne décrivant le travail. Cela peut être simplement « Derniers travaux » ou dans mon cas « Dernières photos ». Le texte doit être lisible, pour cela j'ai utilisé le gris #9b9b9b et la police Lato (Bold) en taille 12px. Veuillez noter que l'interlettrage est assez substantielle (270), il est utilisé uniquement pour styliser le titre de la zone et ne fonctionnerait pas pour du texte normal. Une fois de plus donnez à votre titre assez d’espace et déplacez-le vers le bas de l’image de 80px.

Étape 3

Formidable ! Nous sommes enfin prêts à ajouter quelques photos cool à notre portfolio. Créer un nouveau groupe appelé "Photo". Après cela, vous devrez décider combien de photos vous souhaitez afficher dans une ligne. J’ai décidé que ce serait quatre, donc j’ai besoin de faire un peu de mathématique avant de déterminer les pixels.

La largeur de notre site web est 1000px, donc je vais diviser par 4 ce qui me donne 250px pour chaque image, mais nous devons aussi laisser un espacement sur les côtés, disons que 20px de gouttière entre les images suffiront. Donc la largeur de l’image finale sera (1000px-60px) / 4 = 235px.

Choisissez l’outil Rectangle (U) et maintenez la touche Maj enfoncée, tracez un rectangle de taille de 235x235px. Choisissez ensuite une image provenant de votre compte Instagram ou prenez en une de unsplash.com ou getrefe.tumblr.com, faites-la glisser vers votre document Photoshop et placez-la au-dessus du rectangle. Ensuite, maintenez enfoncée la touche Alt, créer un masque d’écrêtage et avec CMD + T redimensionnez l’image et placez-la à votre guise.

Étape 4

Maintenant, il faut ajouter le nombre de « likes » (servant de preuve d'appréciation sociale) et une brève description. Créez un nouveau calque et nommez-le "Ombre", placez-le au-dessus de l’image et prenez soin de créer un masque d’écrêtage pour elle aussi bien. Après cela, à l’aide de l’outil dégradé (G) appliquez un dégradé allant du noir au transparent comme utilisé plus haut dans ce tutoriel. Enfin, réduisez son opacité à 60 %.

Choisissez l’outil de Texte Horizontal (T) et entrez un nombre de "likes". J’ai utilisé la police Montserrat en taille 13px et un espace de 15px à gauche et en bas afin de donner suffisamment d’espace mais ne pas submerger l’image.

Maintenant prenez l’outil Rectangle (U) et dessinez un rectangle blanc sous la photo. Puis prenez l’outil de Texte Horizontal (T) et écrivez une courte description de la photo que utiliseriez sur Instagram, y compris les hashtags et la date à laquelle elle a été postée. La police que j’ai utilisé pour ce tutoriel est Montserrat avec une taille de 12px en gris #808080.

Remarque : Assurez-vous que ce soit cohérent avec votre espace, si vous avez utilisé 15px sur les côtés pour le nombre de "likes", faites la même chose avec la description.

Étape 5

Nous en avons finis avec la question de la photo et maintenant il est temps d’ajouter quelques images à notre portfolio. Minimisez le groupe "Photo" et dupliquez-le en appuyant sur CMD + J ou en faisant un clic-droit sur le nom du groupe et en sélectionnant Dupliquez le groupe... après ça, dupliquez autant de fois que nécessaire. Dans mon exemple j’ai 20px d'espacement et différentes images de unsplash.com et getrefe.tumblr.com.

Conception de la zone de contact

Dans cette zone nous allons écrire un message simple et créer une bouton de contact ainsi que des informations génériques de copyright.

Étape 1

Minimisez le groupe "Photos" en cliquant sur la petite flèche à côté du nom de groupe et ouvrez le groupe de "Contact". Une fois que c'est fait, sélectionnez l’outil de Texte Horizontal (T) et à l’aide de très gros caractères entrez un titre pour la section, dans mon cas, c’est « ENTRER EN CONTACT ». Donnez-lui beaucoup d’espace en haut et ajouter une courte description afin de pousser l'utilisateur à vous contacter. J’ai utilisé la couleur #565d64 pour la police Lato (Black) de taille 36px pour le titre et Lato (Regular) en 16px pour la description.

Étape 2

Maintenant nous avons besoin d’un "call-to-action" (un bouton d'appel à l'action) sur lequel les utilisateurs cliqueront sur pour effectuer l’action souhaitée. Pour ce tutoriel, nous allons utiliser un simple bouton de contact. J’ai utilisé l’outil Rectangle (U), ai dessiné une forme simple et placé le texte au-dessus de celle-ci. Assurez-vous d’utiliser beaucoup d’espace au-dessus du bouton de sorte qu’il semble équilibré et propre.

Étape 3

Enfin, nous allons mettre une ligne générique de copyright en bas de notre portfolio. Avant cela, choisissez l’outil de ligne (U) et tracez une ligne horizontal de 1px de couleur grise #e0e0e0 à travers le document laissant environ 90px d'espace tout en bas. Juste après cela placez votre ligne de droit d’auteur. Dans ce cas j’ai utilisé la police Lato (Bold) en 12px avec un interlettrage de 270 et un gris sombre #9b9b9b comme couleur.

Vous avez terminé... Avec la version web

Et voilà vous y êtes, tout est terminé avec la version web du portfolio! Maintenant je vais vous montrer comment vous pouvez transformer rapidement la version web en version mobile et ainsi avoir un site responsive.

Conception de la version mobile

Étape 1

Nous allons créer un nouveau document et définir les dimensions comme étant 320x2100px. Créez trois repères verticaux à 20px, 150px et 300px pour vous guider, en laissant peu d’espace sur les côtés. Après ça, sélectionnez tous les groupes de notre document de la version web, faites-les glisser dans un nouvel onglet de document jusqu'à ce que le nouveau document apparaisse et relâchez les groupes là-bas.

Étape 2

Maintenant ouvrez le groupe "En-tête", trouvez notre logo et à l’aide de l’outil déplacement (V) déplacez le vers la droite jusqu'à ce qu’il soit visible dans notre nouvelle mise en page étroite. Laissez-le à côté du premier repère vertical. Après cela, trouvez les icônes sociales et déplacez-les vers la gauche.

Étape 3

Maintenant il est temps d’adapter le message d'introduction. Choisir l’outil de Texte Horizontal (T), brisez la ligne de description et de réduisez la police principal message jusqu'à qu'elle soit entre le premier et le troisième repère vertical. Ajustez les options de hauteur de ligne, et vous voilà prêt.

Étape 4

Ouvrez le groupe "Photos" et montez le titre « Dernières photos » puisqu'il n'y aura a pas autant d'espace sur l'affichcage mobile. Après cela, trouvez le groupe "Photo" et déplacez-la entre les repères verticaux. Ouvrez ensuite le groupe, cliquez sur le rectangle de description, appuyez sur CMD + T et redimensionnez-le à 280px en largeur. Faites de même avec le rectangle de la photo. Enfin, organisez les photos dans une seule colonne et redimensionnez-les pour qu'elles logent entre les repères.

Étape 5

Notre section "Photos" est devenu plus longue que sur la version web, quelques réglages du fond sont donc nécessaire. Trouvez l'arrière plan des photos et appuyez sur CMD + T pour redimensionner, rendez-le plus grand et laissez de l’espace en bas de la section.

Étape 6

Enfin nous devons réorganiser notre section contact pour que le message rentre entre les deux repère et soit aligné correctement. Ouvrez le groupe "Contact" et à l’aide de l’outil de Texte Horizontal (T), brisez les lignes du message de contact pour que celui-ci rentre entre les repères. N’oubliez pas de réduire l’espace au-dessus et en dessous des éléments car il n'y a pas besoin d’autant l’espace blanc pour l’affichage mobile. Aussi, réduisez la hauteur de ligne pour le message, afin qu'il semble propre et professionnel.

La dernière chose est de briser la ligne copyright en deux lignes afin qu'elle se retrouve également entre les repères.

Félicitations !

C’est tout. Nous en avons finis avec les version web et mobile de notre portfolio inspiré d'Instagram. J’espère que vous avez appris quelque chose de nouveau et que les compétences que vous avez gagné vous aideront à construire des choses étonnantes dans le futur.

J’aimerais entendre vos commentaires et voir les résultats de ce tutoriel !