Share
Suivez-moi tout au long du processus de création d’une mise en page propre et moderne de votre portefeuille de photographies. Nous allons couvrir quelques bases de Photoshop, y compris comment travailler avec les grilles, la transparence, la conception des icônes et d'autres sujets intéressants..
Nous allons concevoir notre modèle comme un arhitect construit une maison; à partir du sol. La base de notre thème est la base, préparons donc tout ce dont nous avons besoin. Commencez par créer un nouveau document de taille 1420x850px comme dans l'écran ci-dessous.
Vous pouvez remplir l'espace vide avec une photo de votre choix ou celle que vous trouverez dans le téléchargement source (trouvée à l'origine sur wallon.ru)..
Pour que notre image d'arrière-plan n'attire pas trop l'attention du reste de l'interface, nous allons l'obscurber avec un léger effet de motif. Créez un nouveau document 3x3px, sélectionnez l'outil Crayon (ou appuyez simplement sur B), et tracez deux lignes parallèles:
Nous devons maintenant enregistrer ce modèle dans nos archives en sélectionnant Edition> Définir un modèle… Cela fait, revenez au document principal et appliquez le modèle sur l'image. Vous le trouverez disponible parmi les autres motifs sous Calque> Style de calque> Superposition de motif…
Choisissez le motif que nous avons créé précédemment et réglez l'opacité sur 20%. Nous devons garder le fichier .psd organisé dès le début, alors créez un nouveau dossier dans la section "Calques" et insérez notre image à l'intérieur (si vous ne voyez pas le panneau Calques, accédez à Fenêtre> Calques).
De nombreux thèmes de photographie utilisent des logos minimalistes afin de ne pas contraster avec l'atmosphère de chaque photo. Nous allons maintenant concevoir un logo simple mais attrayant. J'ai décidé d'appeler le modèle "Microfilm", j'ai donc saisi "micro" avec Aller Bold et "film" avec Aller Regular, les deux à 40 pixels.
Placez le texte quelque part dans le document principal. Appliquons maintenant quelques effets au logo afin de le rendre plus attrayant. Sélectionnez le "micro" calque et allez dans "Calque> Style de calque> Lueur externe".
Après avoir appliqué un éclat extérieur, passez à la section Incrustation de dégradé et appliquez l’effet suivant..
Maintenant, mettons à jour la couche "film" avec quelques effets également. Nous utiliserons le même effet Outer Glow que ci-dessus, mais la superposition de dégradé est différente. Allez à Calque> Style de calque> Superposition de dégradé.
Une fois le logo créé, nous pouvons enfin le mettre à sa place. L’un des meilleurs emplacements pour un logo est le coin supérieur gauche de l’écran (les utilisateurs y sont habitués, notamment dans les pays où la lecture est effectuée de gauche à droite et de haut en bas). J'ai joué avec pendant un certain temps jusqu'à ce que le placement me plaise: créez deux nouveaux guides à l'aide de View> New Guide…
Créer un nouveau guide horizontal en utilisant de nouveaux paramètres.
Utilisez les guides pour orienter et positionner votre logo.
N'oubliez pas de créer un nouveau dossier et d'y placer votre logo pour que tout reste propre.
Notre menu est un ensemble de carrés étiquetés avec des nombres qui se déplacent quand ils sont survolés. Le menu sera placé verticalement centré, nous allons donc laisser 260px en haut et 260px en bas de notre canevas, ce qui nous donne une surface de travail de 330px en hauteur. Créons les guides nécessaires afin de simplifier notre processus de conception. Affichage> Nouveau guide…
J'aimerais vous donner un conseil supplémentaire, si vous ne savez pas comment masquer temporairement les guides, appuyez simplement sur CTRL + H. Créez donc notre premier onglet de menu, sélectionnez l'outil Rectangle (ou appuyez sur U) et maintenez la touche enfoncée. le bouton shift crée un carré de 64x64px. Pour voir la taille actuelle de votre forme, consultez le panneau d’information (Fenêtre> Info). Après avoir créé le premier carré, placez-le dans le coin du guide créé précédemment.
Sélectionnez votre case carrée et réduisez l'opacité à 78%.
À l’aide de la police Calibri (ou de quelque chose de similaire), tapez "1" et définissez la taille sur 29px. Changez la couleur en # d0d0d0 et mettez-la au milieu de notre onglet de menu carré. Gardez votre modèle organisé en créant un dossier spécifique pour le menu..
Maintenez les touches ALT + SHIFT enfoncées et faites glisser la zone de menu vers le bas, laissez une distance de 1px. Suivez cette étape afin de créer cinq onglets de menu et de changer leurs noms en leurs numéros respectifs..
La dernière partie de cette étape est la création d'un effet de survol, sélectionnez la base du deuxième (ou de tout autre onglet) et appuyez sur CTRL + T. Faites glisser la zone horizontalement et étendez la largeur à 270px. Après avoir agrandi la forme, changez la couleur de la boîte en # e42b17.
Créez un nouveau guide afin d’aligner correctement le texte de votre menu, utilisez les paramètres indiqués ci-dessous:
Sélectionnez la police Cicle (Gordita) et entrez votre texte déroulant. J'ai écrit "shortcodes" à 27px et défini la couleur sur # f4f4f4. Placez votre texte sur la même ligne que le numéro et pensez à utiliser les guides comme lignes d'orientation.
Il n'y a rien de compliqué dans la création de l'arrière-plan de ce modèle, cependant, il est très important de respecter strictement la taille, car cela représentera notre zone de contenu. Nous n'avons pas besoin de l'arrière-plan photo pour détourner notre attention de la zone de contenu, c'est pourquoi nous allons le concevoir pour qu'il occupe seulement la moitié de la page..
Prenez l'outil Rectangle et créez une forme de 710x850 (la moitié de notre document principal), remplissez-la de noir et réglez l'opacité à 78%.
Enfin, nous sommes prêts à commencer notre voyage vers la page de contenu, dont la structure dépend de la façon dont nous alignons notre contenu. C'est pourquoi il est si important pour nous de créer dès le départ les guides nécessaires pour pouvoir configurer parfaitement notre contenu et soulager nos yeux du charme de la symétrie. Créons les guides en utilisant Affichage> Nouveau guide…
Sélectionnez l'outil Elipse et créez un cercle de 50 x 50 pixels, positionnez-le au coin de nos guides de contenu et appliquons des effets de style. Réglez d'abord l'opacité du calque sur 85%, puis allez à Calque> Style de calque> Éclat extérieur.
Puis passez à la section de dégradé et appliquez l’effet suivant:
Sélectionnez l'outil Forme personnalisée, choisissez une icône de votre choix, puis, tout en maintenant la touche Maj enfoncée, appliquez-la au milieu du cercle..
Stylisons notre forme personnalisée avec un simple dégradé.
Définissez visuellement un nouveau guide au bas du cercle créé précédemment. En prenant le milieu du cercle comme point d’orientation, tapez un titre aléatoire. Maintenant, mettez à jour les paramètres de texte; Définissez la taille de police Aller 14px et allez à Calque> Style de calque> Éclat extérieur.
Passez ensuite à la section Gradient Overlay et créez un nouvel effet..
Nous avons besoin de trois colonnes pour nos en-têtes et, comme je l’ai dit plus tôt, il est très important de faire attention à l’espacement et de respecter la symétrie. Nous pourrions faire avec la création de nouveaux guides afin de positionner nos messages d'en-tête une fois que nous les avons terminés - suivez la même procédure qu'avant Voir> Nouveau guide…
En utilisant la police Sansation Regular de 14px, saisissez du texte aléatoire. Lors de la conception d'un modèle, je visite généralement un site Web factice. Tapez votre contenu dans la colonne "guide" que nous avons créée précédemment.
Maintenant, modifions notre texte en appliquant un dégradé personnalisé. Allez dans Calque> Style de calque> Superposition de dégradé..
Sélectionnez la colonne entière et maintenez la touche ALT + MAJ enfoncée tout en la faisant glisser dans la zone libre créée à l'aide de guides, puis répétez la même étape pour créer la troisième colonne..
Apportez des modifications générales au texte et aux icônes. n'oubliez pas de tout structurer dans des dossiers pour garder le document propre.
La dernière partie de cette étape est la création d’un séparateur qui sert à diviser notre contenu. Il y a plusieurs façons de le créer, mais j'utiliserai l'une des méthodes les plus simples. Sélectionnez l'outil Ligne et tracez une forme d'un côté à l'autre de la marge du guide..
Appliquez des effets de style à la ligne afin de la rendre plus attrayante; aller à Calque> Style de calque> Ombre portée.
Allons droit au but. Nous devons créer la section galerie et nous commencerons par le titre. Créez un nouveau guide comme nous le faisions avant View> New Guide…
Tapez "Gallery Showcase" ou tout autre titre en utilisant la police Aller et définissez la taille sur 19px. Ensuite, placez notre texte au coin du guide que nous avons créé précédemment.
Nous utiliserons les mêmes effets de style que dans le titre de notre contenu principal. Pour ce faire, sélectionnez les effets de texte dans la boîte "Calques" et faites-la glisser vers "Galerie Showcase".
Avant de continuer à travailler sur la section Galerie, créons un autre guide qui représentera la bordure de la zone de la galerie..
Laissez un petit espace vide en dessous du titre et tapez du texte aléatoire en utilisant Sansation (14px), mais n'oubliez pas de ne pas franchir la ligne de bordure créée précédemment..
De la même manière, nous avons fait glisser les effets du titre du contenu supérieur vers le titre de la galerie, puis nous avons fait glisser l’effet de texte du contenu supérieur.
C'est l'heure de la partie la plus importante de la section galerie; créer les cadres. Il existe de nombreuses manières efficaces de concevoir cela, mais elles seraient mieux expliquées dans un screencast où vous pourrez voir toutes les étapes du processus. C'est pourquoi je vais concevoir nos images de galerie d'une manière plus primitive.
Sélectionnez l'outil Rectangle arrondi, définissez le rayon sur 10 pixels et créez une forme de 327 x 145 pixels.
Allez à Calque> Style de calque> Contour et appliquez un contour de 4 pixels coloré # b63f25, puis positionnez votre image entre les guides..
Sélectionnez à nouveau l'outil Rectangle arrondi et créez une nouvelle forme de 91x60px (rayon 10px), puis appliquez un trait de 2px..
Maintenez les touches ALT + SHIFT enfoncées et faites glisser la forme créée précédemment, laissez une distance de 24px avant chacune d'elles. Créez deux autres cases de cette façon et n'oubliez pas de respecter la limite.
Avant de commencer notre travail sur la section des nouvelles, créons un séparateur vertical qui divisera ces deux sections. Commençons par créer un guide Voir> Nouveau guide…
Sélectionnez l'outil Ligne et créez une forme avec une hauteur de 325px, puis placez-la à la position du guide créé précédemment.
Stylisons maintenant le séparateur. aller à Calque> Style de calque> Ombre portée.
Enfin, nous pouvons continuer avec la création de la section nouvelles. Créez une nouvelle ligne directrice puis sélectionnez le titre "Galerie". Tout en maintenant les touches ALT + SHIFT enfoncées, faites-le glisser vers le coin créé à partir de guides, puis renommez-le..
Sélectionnez l'outil Rectangle rond et avec un rayon de 10px, créez une forme de 74x61px. Appliquez un trait de deux pixels et positionnez notre rectangle quelques pixels sous le titre principal..
Tapez du texte aléatoire composé de trois lignes (ne dépassez pas les limites de la ligne de bordure) à l'aide de la police Sansation de 12px et faites glisser les effets à partir du texte de la galerie..
En utilisant le même style de texte, j'ai tapé "Écrit par une personne aléatoire à une date aléatoire", je n'ai pas utilisé d'effets originaux, mais j'ai appliqué quelques superpositions de couleurs simples..
Sélectionnez le calque séparateur horizontal et dupliquez-le, puis redimensionnez-le à l'aide de CTRL + T à 292 pixels et déplacez-le au-dessous de notre nouvelle publication nouvellement créée..
Sélectionnez votre publication avec un séparateur et maintenez la touche ALT + MAJ enfoncée, faites-la glisser vers le bas pour créer deux autres publications. Effectuer les modifications requises dans le texte.
Prenez à nouveau le séparateur horizontal supérieur et, tout en maintenant les touches ALT + MAJ enfoncées, faites-le glisser sous la galerie et la section actualités..
Bienvenue à la dernière étape, un peu plus et nous en avons terminé avec notre modèle de photographie, alors allons droit au but! Tapez le titre de votre zone de devis en utilisant le même style de texte que dans la galerie et les derniers titres d'actualités..
Créons une nouvelle directive pour nos guillemets.
A l’aide d’Arial, tapez le symbole entre guillemets ("e;), réglez la taille sur 204 pixels, puis appliquez les effets suivants en les positionnant le long du guide que nous avons créé précédemment.
J'ai saisi une citation en utilisant la police Aller Italic, de taille 18px, et appliqué le même dégradé que dans le texte général de la section galerie. Faites glisser les effets de la même manière que nous avons fait plusieurs fois auparavant (n'oubliez pas de respecter les lignes de bordure).
La dernière partie de cette étape est la création d’un bouton "LIRE PLUS". Sélectionnez l'outil Rectangle arrondi et créez une forme de taille 182x36px avec un rayon de 10px, puis appliquez un effet de dégradé comme indiqué ci-dessous..
Dupliquez le calque, puis soustrayez-le avec un rectangle et appliquez le même dégradé que celui utilisé pour les guillemets, puis ajoutez quelques détails tels que du texte et des flèches..
Avaient fini! Merci d’avoir suivi ce didacticiel et j’espère que vous aurez appris quelque chose de nouveau et pourrez utiliser certaines de ces techniques dans vos propres projets. Si vous avez besoin de conseils supplémentaires, n'hésitez pas à laisser des commentaires ou des questions et je serai plus que disposé à vous aider.
Accentsconagua