Tutoriel PS Web Design XV – Comment créer un portefeuille dynamique de conceptions Web dans Photoshop

En tant que codeur, mes bases artistiques sont faibles. Nous pouvons nous référer à certains didacticiels PS de pages Web matures pour améliorer nos capacités de conception. Pour paraphraser une phrase : « Si vous connaissez trois cents poèmes Tang, vous pouvez les réciter même si vous ne savez pas comment les composer. »

Les tutoriels de cette série proviennent de tutoriels PS en ligne, tous venus de l'étranger, et tous en anglais. J'essaie de traduire ces excellents tutoriels. En raison des capacités de traduction limitées, les détails de la traduction doivent encore être réglés. Nous espérons que les internautes vous donneront quelques conseils.

Promesse :

1. Le logiciel utilisé dans cet article est la version Photoshop CS5

2 Les captures d'écran du tutoriel original sont en anglais sur la base desquelles je les ai reprises. la reproduction. version chinoise de l'image

3. Certaines opérations dans le texte original ne donnent pas de paramètres. J'ai mesuré certains paramètres grâce à des tests répétés, qui sont affichés en rouge. Pour certains paramètres incorrects, les paramètres corrects sont directement affichés en texte rouge

Par exemple : (90, 22, 231, 77) , indiquant que les coordonnées du coin supérieur gauche du le rectangle sont (90, 22) , largeur 231, hauteur 77

Par exemple : (90, 22) , indiquant que les coordonnées du coin supérieur gauche du rectangle sont (90, 22), et les deux autres paramètres du rectangle ont été précisés dans le tutoriel

4. Ma propre expérience sera jointe à la fin du tutoriel. Certaines sont des optimisations de certaines étapes du tutoriel, etc.

Dans ce didacticiel de conception de sites Web, nous allons créer une mise en page de portfolio magnifique et colorée à l'aide de Photoshop. Je vais vous montrer de nombreuses techniques pour créer différentes choses comme des coins de papier pliés, des lignes pointillées, des images. carrousels, barres 3D et plus encore ! Je vais vous expliquer chaque étape en détail afin que vous ne deviez pas deviner comment appliquer une certaine technique. Nous utiliserons le système de grille 960 pour créer cette mise en page (que je vais utiliser). couverture au début).

Dans ce tutoriel, nous allons créer un portfolio magnifique et coloré en PS. Je vais vous montrer de nombreuses techniques utilisées pour créer différentes choses comme des coins de papier incurvés, des lignes pointillées, des tickers d'images, des bannières 3D et bien plus encore ! Je vous guiderai à travers chaque étape avec des détails précis afin que vous n'ayez pas à deviner quelle technique particulière a été utilisée. Nous allons créer cette mise en page en utilisant le système de grille 960 (utilisé depuis le début).

Étape 1 : Comprendre la grille

Téléchargez la grille 960 et décompressez l'archive. Dans le dossier des modèles Photoshop, vous en trouverez trois. Fichiers PSD. Chacun a une grille avec un certain nombre de colonnes (12, 16 et 24). Pour cette mise en page, nous utiliserons la grille à 16 colonnes. Alors, ouvrez le fichier 960_grid_16_col.psd. dans Photoshop. Comme vous pouvez le voir, vous avez 16 bandes verticales rouges (presque rosées) à l'intérieur de votre document. Nous allons créer la mise en page à l'intérieur de ces bandes verticales rouges.

Dans le panneau Calques, vous avez deux groupes : « 16 ». Col Grid » (qui contient toutes les bandes verticales rouges) et « Layer 1″ (nous n'avons pas besoin de ce calque, vous pouvez donc le supprimer).

Pour afficher ou masquer la grille, cliquez sur l'œil icône du groupe « 16 Col Grid » dans le panneau Calques pour basculer sa visibilité. Tous les éléments de la mise en page doivent être créés sous ce groupe, il doit donc être au premier plan à tout moment. Le fichier .PSD contient également des lignes directrices. , ce qui sera très utile. Pour afficher ou masquer les lignes directrices, accédez à Affichage > Afficher > Guides (ou appuyez sur Ctrl/Cmd ;).

C'est à peu près tout ce que vous devez savoir sur la grille.

Avant de commencer, assurez-vous que votre panneau d'informations est ouvert (Fenêtre > Infos). Au cours du tutoriel, je vous demanderai de créer des formes d'une certaine taille et vous pourrez voir la largeur exacte. et la hauteur de vos formes dans le panneau d'informations pendant que vous les créez.

Étape 1 : Comprendre la grille
Téléchargez la grille 960 et décompressez-la Archive . Dans le dossier des modèles Photoshop, vous trouverez trois fichiers PSD. Chacun possède une grille avec un certain nombre de colonnes (12, 16 et 24). Pour cette mise en page, nous utiliserons une grille de 16 colonnes. Alors, ouvrez le fichier 960_grid_16_col.psd dans Photoshop. Vous pouvez voir que vous avez 16 bandes verticales rouges (presque roses) dans votre document. Nous allons créer la mise en page Web sur ces bandes verticales rouges.
Dans le panneau des calques, il y a deux groupes : "16 Col Grid" (qui contient toutes les bandes verticales rouges) et "Layer 1" (nous n'avons pas besoin de ce calque pour que vous puissiez le supprimer).
Pour afficher ou masquer la grille, cliquez sur l'icône en forme d'œil du groupe "16 Col Grid" pour basculer sa visibilité dans le panneau Calques. Les éléments gauche et droit de la mise en page Web sont créés en dessous de ce groupe, ils sont donc toujours au-dessus. Le fichier PSD contient des lignes directrices qui seront très utiles. Pour afficher ou masquer les guides, accédez à Affichage > Afficher les guides (ou appuyez sur Ctrl/Cmd ;
C'est à peu près tout ce que vous devez savoir sur les grilles
Dans notre Avant de commencer, assurez-vous d'avoir les informations. panneau ouvert (Fenêtre > Info). Dans ce tutoriel, je vais vous demander de créer une forme avec une certaine échelle. Lorsque vous créez une forme, vous êtes dans le panneau Info. Vous pourrez voir la largeur et la hauteur exactes. 🎜>

Points de connaissances de base et compréhension de la situation de base du système d'aménagement. Ce tutoriel de traduction n'utilise pas de système de mise en page.

Étape 2 : Modifier la taille de la toile

Pour nous donner plus d'espace en hauteur, nous devons augmenter la taille de notre toile. Accédez à Image > Taille de la toile et modifiez la hauteur à 1920px

Pour nous donner plus d'espace dans le sens de la hauteur, nous devons augmenter la taille de notre toile. Cliquez sur : Image > Taille du canevas, hauteur 1920px.

Le système de mise en page 960 n'étant pas utilisé, cette étape est modifiée pour créer un nouveau document, taille : 1020px*1920px

Étape 3 : Création de l'arrière-plan de la mise en page

Sélectionnez l'outil Rectangle (U) et créez un rectangle blanc de taille

940px

par

1920px

. Assurez-vous que les guides de Photoshop sont activés (Ctrl/Cmd ;) afin de pouvoir créer le rectangle facilement. Nommez ce calque « bg », double-. cliquez dessus pour ouvrir la fenêtre Style de calque et utilisez les paramètres de l'image suivante pour appliquer un style de calque

Outer Glow

et Stroke. Étape 3 : Créer l'arrière-plan de la mise en page

Utilisez l'outil Rectangle pour créer un rectangle blanc

(40, 0)

, taille : 940px*1920px. Assurez-vous que les guides PS sont actifs (Ctrl/Cmd;) afin de pouvoir créer facilement un rectangle comme celui-ci. Nommez le calque bg, double-cliquez pour ouvrir la fenêtre de style de calque et ajoutez-y des styles de calque de lueur externe et de trait en fonction des paramètres ci-dessous :

Couleur de trait : # 1f1907

Étape 4 : Création de l'en-tête

Créez un nouveau groupe et nommez-le «

header

". ​​​​Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle en utilisant la couleur

#aedee1

. Nommez ce calque "header bg", double-cliquez. dessus et utilisez les paramètres de l'image suivante pour un style de calque

Superposition de dégradés

. Étape 4 : Créer un en-tête Zone

Créer un nouvel en-tête de groupe. Sélectionnez ensuite l'outil Rectangle et créez un rectangle

(40, 0, 940, 96)

avec la couleur : #aedee1. Nommez-le header bg, double-cliquez sur le calque et ajoutez un style de calque de superposition de dégradé selon les paramètres ci-dessous

Étape 5 : Traitement de type typographique du nom du site

Sélectionnez l'outil Texte (T) et écrivez le nom de votre mise en page en utilisant la couleur

# 93b9bb

. J'ai utilisé la police Museo 700 pour le mot « créatif » et Museo 300 pour « folio ».

Nous allons maintenant créer un traitement de type typographique en utilisant les styles de calque de Photoshop. calque de texte pour ouvrir la fenêtre Style de calque et utilisez les paramètres de l'image suivante pour les styles de calque Inner Shadow,

Inner Glow

et Bevel and Emboss. De cette façon, si vous souhaitez un tutoriel plus détaillé sur cette technique, consultez le tutoriel Inset Typography de Jacob sur Six Revisions (qui utilise une technique différente).

Étape 5 : Traitement concave du nom du site Web
Sélectionnez l'outil de saisie (T) et écrivez le nom de votre site Web, couleur : #93b9bb. Utilisez la police Museo 700 pour le texte créatif et Museo 300 pour le texte du folio.

Nous allons maintenant créer un processus concave en utilisant les styles de calque de Photoshop. Double-cliquez sur votre calque de texte pour ouvrir la fenêtre Styles de calque et définissez les styles de calque Inner Shadow, Inner Glow, Bevel et Emboss comme indiqué ci-dessous. À propos, si vous souhaitez un didacticiel plus détaillé sur cette technique, consultez le didacticiel Inset Typography de Jacob (utilisant une technique différente) sur Six Revisions.

Étape 6 : Création d'un petit nuage dans l'en-tête

Créez un nouveau groupe et nommez-le « nuage ».

Sélectionnez ensuite l'outil Ellipse (U ), maintenez la touche Maj enfoncée pour conserver les proportions et créez quelques cercles blancs de tailles différentes.

Disposez ensuite tous ces cercles à l'aide de l'outil de déplacement (V) pour former un nuage. Définissez l'opacité du ". cloud » à 80%.

Étape 6 : Créez un petit nuage dans la zone de la tête
Créez un nouveau groupe et nommez-le cloud.

Sélectionnez ensuite l'outil Ellipse (U), maintenez la touche Maj enfoncée pour conserver les proportions et créez plusieurs cercles blancs de tailles différentes. (Plus précisément, ce tutoriel de traduction utilise 5 cercles)

Utilisez ensuite l'outil de déplacement (V) pour disposer ces cercles pour former un nuage. Définissez l'opacité du groupe de cloud sur 80 %.

Étape 7 : Créer une bannière « embauchez-moi »

Maintenant, nous allons créer un petit morceau de papier et écrivez dessus un texte d'appel à l'action qui attirera des clients potentiels. Un appel à l'action fort est très important pour un site Web de portfolio, car il encourage les visiteurs qui pourraient chercher à embaucher un concepteur à entrer en contact avec. le propriétaire du site Web.

Créez un nouveau groupe et nommez-le « embauchez-moi« Puis sélectionnez l'outil Rectangle (U) et créez un petit rectangle dans le côté droit de l'en-tête. en utilisant la couleur #f7efda.

Nommez ce calque « papier », double-cliquez dessus pour ouvrir la fenêtre Style de calque et utilisez les paramètres suivants image.

Étape 7 : Créer un tableau d'affichage "hrie me"

Maintenant, nous allons créer un petit morceau de papier avec un texte d'appel à l'action pour attirer des clients potentiels. Un texte d'appel à l'action mis en avant est très important pour un site Web de portfolio, car il encourage les concepteurs potentiels à cliquer dessus et à contacter le propriétaire du site Web.

Créez un nouveau groupe, engagez-moi. Sélectionnez ensuite l'outil Rectangle (U) et créez un petit rectangle (795, 15, 145, 81) sur le côté droit de la zone de tête, couleur : #f7efda.

Nommez ce calque de papier, double-cliquez pour ouvrir la fenêtre de style de calque et définissez le style comme indiqué ci-dessous.

Étape 8 : Plier un coin du papier

Maintenant, je vais vous montrer comment créer un effet de coin plié dans Photoshop. Tout d'abord, cliquez sur le masque vectoriel du calque « papier » pour le rendre actif. .

Sélectionnez ensuite l'outil Plume (P), assurez-vous que le bouton « Calques de forme » est activé et sélectionnez le bouton Soustraire de la zone de forme dans la barre d'options.

Utilisez maintenant le stylo. Outil (P) pour créer un triangle sur le coin supérieur droit du rectangle jaune comme vous le voyez dans l'image suivante 🎜>Maintenant, je vais vous montrer comment créer un effet de coin en zigzag dans Photoshop. Tout d’abord, activez le masque vectoriel sur le calque de papier.

Sélectionnez ensuite l'outil Plume (P), assurez-vous que le mode est "Couche de forme" et sélectionnez le bouton "Soustraire de la zone de forme" dans la barre d'options.

Utilisez maintenant l'outil Plume (P) pour créer un triangle dans le coin supérieur droit du rectangle jaune que vous voyez dans l'image ci-dessous.

Cette étape est une étape très intéressante qui n'est jamais apparue dans les tutoriels précédents, je vais donc ajouter un processus détaillé ici Comme je ne suis pas doué pour utiliser l'outil stylo, j'ai plutôt utilisé l'outil rectangle. pendant l'explication.

Activez d'abord le masque vectoriel du papier, cliquez sur le masque vectoriel du calque papier sur le panneau des calques (celui de droite des deux rectangles sur le calque papier) .

Puis sélectionnez l'outil rectangle, cliquez sur les boutons "Couche de forme" et "Soustraire de la zone de forme"

Dessinez un petit carré dans le coin supérieur droit du rectangle sur le calque de papier (maintenez la touche Maj enfoncée)

Utilisez l'outil de sélection directe pour sélectionner le point de contrôle dans le coin inférieur droit du petit rectangle

Appuyez sur la touche Suppr touche du clavier pour supprimer le point de contrôle dans le coin inférieur gauche Contrôlez les points pour former un triangle

Cliquez sur les calques restants pour terminer ceci étape

Étape 9 : Appliquez une superposition de dégradé sur le papier plié

Créez un nouveau calque et utilisez l'outil Plume (P) pour créer un triangle comme celui que vous voyez dans l'image suivante en utilisant la couleur #f1e9d3.

Nommez ce calque « coin », double-cliquez dessus et utilisez les paramètres de l'image suivante pour Superposition de dégradés>

Créez un nouveau calque et à l'aide de l'outil Plume (P), créez un triangle avec la couleur : #f1e9d3, comme le celui vu dans l’image ci-dessous.

Nommez ce calque "coin", double-cliquez sur le calque et configurez la superposition de dégradé comme indiqué ci-dessous.

Pour ceux qui ne savent pas utiliser l'outil Plume, vous pouvez utiliser l'outil Rectangle et l'outil de sélection directe pour sélectionner un point de contrôle puis le supprimer pour créer un triangle

Étape 10 : Ajouter une ombre au coin du papier

Créer un nouveau calque sous le calque « coin ».

Sélectionnez l'outil Plume (P) et créez un triangle noir comme celui de l'image suivante.Cliquez avec le bouton droit sur le nouveau calque et sélectionnez

Convertir en objet intelligent

.

Ensuite, allez dans Filtre > Flou > Flou gaussien et utilisez un rayon

2px

.Ajoutez un masque. sur ce calque (Calque > Masque de calque > Révéler tout), sélectionnez une petite pointe de pinceau noire (B) et peignez avec elle sur l'ombre du côté droit du coin du papier pour l'effacer.

Nom ce calque « ombre » et définissez son opacité sur

15 %

.

Étape 10 : Ajoutez une ombre aux coins pliés de le papier Sous le calque de coin, créez un nouveau calque.

Sélectionnez l'outil Plume (P) et créez un triangle noir comme dans l'image ci-dessous.

Pour cette étape, il est préférable de copier le calque conner

Cliquez avec le bouton droit sur le nouveau calque et sélectionnez "Convertir en objet intelligent". Peut-être en raison de la version PS, dans la version CS5, afin de terminer les étapes suivantes, cette étape devrait consister à pixelliser le calque.

Cliquez ensuite sur : Filtre > Flou > Flou gaussien et utilisez un rayon de 2px.

Ajoutez un masque à ce calque (Calque > Masque de calque > Afficher tout), sélectionnez la petite pointe d'un stylo noir (B) et peignez l'ombre de la protection d'angle en papier sur le côté droit de celui-ci, en plaçant c'est effacé.

Nommez ce calque d'ombre et réglez son opacité à 15 %

Étape 11 : Ajouter du bruit au papier

Maintenant, nous allons ajouter un peu de bruit au papier pour le rendre plus réaliste Ctrl/Cmd-clic sur le masque vectoriel du calque « papier » pour faire une sélection du. papier. Créez un nouveau calque au-dessus de tous les autres de ce groupe et remplissez la sélection de blanc (#ffffff

) à l'aide de l'outil Pot de peinture (G).

Convertissez ce calque en un. objet intelligent, puis accédez à Filtre > Bruit > Ajouter du bruit et utilisez les paramètres de l'image suivante.

Nommez ce calque « bruit

» et définissez son mode de fusion sur

. Multipliez et calque l'opacité à 15%

.

Dans les étapes suivantes, nous ajouterons également du bruit à d'autres éléments de la mise en page et je ferai référence à cette étape, donc vous vous voudrez peut-être garder à l'esprit cette méthode.

Maintenant, nous allons ajouter un peu de bruit au papier pour le rendre plus réaliste. Appuyez sur Ctrl/Cmd. Cliquez sur le masque vectoriel sur le calque de papier pour effectuer une sélection du papier. Créez un nouveau calque au-dessus de tous les autres calques de ce groupe, sélectionnez l'outil Pot de peinture (G) et remplissez la sélection de blanc (#FFFFFF).

Convertissez ce calque en objet intelligent, puis cliquez sur : Filtre > Bruit > Ajouter du bruit, défini comme indiqué ci-dessous.

Nommez ce calque « bruit », définissez son mode de fusion sur Multiplier et modifiez l'opacité du calque à 15 %.

Dans les prochaines étapes, nous ajouterons du bruit aux autres éléments, je répéterai également cette étape afin que vous souhaitiez peut-être garder cette méthode à l'esprit.

Étape 12 : Ajouter un texte sur le papier

Il est maintenant temps d'ajouter votre texte d'appel à l'action. Sélectionnez l'outil de texte horizontal (T) et écrivez un texte sur le papier en utilisant la couleur #514c3f et la police Museo.

Étape 12 : Ajouter du texte sur papier

Il est maintenant temps d'ajouter votre texte d'appel à l'action. Sélectionnez l'outil Texte horizontal (T) et écrivez le texte sur le papier en utilisant la couleur : #514c3f et la police Museo.

Étape 13 : Ajouter un avion en papier

Télécharger un avion en papier image depuis Internet et ouvrez-la dans Photoshop. Utilisez ensuite l'outil de déplacement (V) pour déplacer l'avion dans votre document. L'image que j'ai utilisée provient de GraphicRiver et coûte 3 $ (ou 1 $ si vous avez un dépôt prépayé).

Convertissez ce calque en objet intelligent. Ensuite, allez dans Édition > Transformation libre (Ctrl/Cmd T), maintenez la touche Maj enfoncée pour conserver les proportions, modifiez la taille de l'avion en papier et faites-le pivoter. l'avion pointe vers la bannière d'appel à l'action pour la rendre encore plus visible.

Allez dans Filtre > Bruit > Ajouter du bruit et utilisez les paramètres de l'image suivante.

Ensuite nommez ce calque « avion en papier », double-cliquez dessus pour ouvrir la fenêtre Style de calque et utilisez les paramètres de l'image ci-dessous pour un style de calque Ombre portée.

Étape 13 : Ajouter un avion en papier

Téléchargez une image d'avion en papier sur Internet et ouvrez-la dans Photoshop. Utilisez ensuite l'outil de déplacement (V) pour déplacer l'avion dans votre document. L'image que j'ai utilisée provient de GraphicRiver, qui coûte 3 $ (ou 1 $ si vous avez un dépôt prépayé).

Convertissez ce calque en objet intelligent. Cliquez ensuite sur : Édition > Transformation libre (Ctrl/Cmd T), maintenez la touche Maj enfoncée pour conserver les proportions, modifiez la taille de l'avion en papier et faites-le pivoter. J'ai pointé le texte d'appel à l'action vers le tableau d'affichage pour le rendre plus visible.

Cliquez sur : Filtres > Bruit > pour ajouter du bruit, en utilisant les paramètres de l'image ci-dessous.

Ensuite, nommez cette couche de papier aérien, double-cliquez dessus pour ouvrir la fenêtre de style de calque et définissez le style de calque de la projection comme indiqué ci-dessous.

Étape 14 : Créer une ligne pointillée derrière l'avion

J'ai utilisé Adobe Illustrator (oui, j'ai un peu triché, mais vous pouvez aussi utiliser Photoshop pour cela – ce ne sera tout simplement pas aussi simple) pour créer une ligne pointillée derrière l'avion. Si vous n'avez pas Illustrator, vous pouvez télécharger et utiliser mon image PNG en ligne pointillée appelée dashed_line.png (conseils pour les utilisateurs de Windows : faites un clic droit sur l'un des liens et sélectionnez Enregistrer sous). Ouvrez-le dans Photoshop et positionnez-le sur votre toile à l'aide de l'outil de déplacement (V).

Facultatif : pour les utilisateurs d'Adobe Illustrator

Si vous en avez possédez Adobe Illustrator et savez comment l'utiliser, vous pouvez suivre les étapes suivantes. Ouvrez un nouveau document (Ctrl/Cmd N) et utilisez l'outil Rectangle (M) pour créer un grand rectangle gris. Sélectionnez ensuite l'outil Plume (P) et créez un chemin comme celui de l'image suivante. Utilisez un trait 1pt blanc (#ffffff) et aucun remplissage. Ensuite, ouvrez le panneau Trait (Fenêtre > Trait) et utilisez les paramètres de l'image suivante.

Sélectionnez votre ligne pointillée à l'aide de l'outil de sélection (V), copiez-la (Ctrl/Cmd C), revenez à Photoshop et collez-le comme un objet intelligent (Ctrl/Cmd V).

Nommez ce calque « ligne » et placez-le sous le calque « avion en papier ». Utilisez Transformation libre (Ctrl/Cmd T) pour faire pivoter cette ligne comme vous le souhaitez.

 

步骤14：创建纸飞机后面的虚线

Pour Adobe Illustrator, pour Adobe Illustrator, pour Photoshop ou pour Photoshop. Illustrateur, 你可以Il s'agit d'un fichier Dashed_line.png. ，和它放置在你的画布，使用移动工具（V） 。

可选：Adobe Illustrator的用户

如果你有Adobe Illustrator和知道如何使用它，你可以按照下面的步骤。打开En utilisant Ctrl / Cmd N）,使用矩形工具（M）创建一个大的灰色矩形。然后选择钢笔工具（P），像一个从下面的图片中创使用1点白色（＃FFFFFF）描边和无填充。然后打开« ”面板（点击：窗口>描边），从下面的图片中使用的设置。

使用选择工具（V）选择您En utilisant Ctrl / Cmd C）,到Photoshop中，作为一个智能对象（按Ctrl / Cmd V），并将其粘贴。

 

命名此层为line，并把它放"avion en papier" 。

 

 

Étape 15 : Création de la barre de navigation

Créez un nouveau groupe sous le groupe « en-tête » et nommez-le « barre de navigation ».

Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle de dimensions 940px par 40px et de couleur #c0e332. Nommez ce calque « barre de navigation bg», double-cliquez dessus et utilisez les paramètres de l'image suivante.

 

步骤15：创建导航栏

En-tête de la barre de navigation.

然后选择矩形工具（U）创建一个矩形 （40，96），尺寸：940px*40px，颜色： #c0e332。命名此层为navigation bar bg，双击它按照下图进行设置。

Étape 16 : Créez des lignes de 1 px pour les détails

Sélectionnez l'outil Ligne (U), définissez le poids sur 1 px et créez une ligne horizontale en haut de la barre de navigation en utilisant la couleur #7e961d. Nommez ce calque « Ligne sombre de 1 px ».

Appuyez sur Ctrl/Cmd J pour dupliquer ce calque et déplacez la nouvelle ligne en bas de la barre de navigation.

 

Étape 16 : Ajoutez une ligne de 1 px au détail

Sélectionnez l'outil Ligne (U) avec le poids défini sur 1 px et créez une ligne horizontale en haut de la barre de navigation (40, 96, 940, 1) , Couleur : #7e961d. Nommez ce calque "Ligne sombre 1px".

Appuyez sur Ctrl/Cmd J pour dupliquer ce calque et déplacer la nouvelle ligne horizontale vers le bas de la barre de navigation (40, 135, 940, 1) .

Étape 17 : Donnez de la profondeur aux lignes 1px

Créez une nouvelle ligne avec le poids de 1px en utilisant l'outil Ligne (U) et la couleur #d8fd42.

Nommez ce calque « 1px light line » et placez-le en dessous la première ligne sombre.

Dupliquez ce calque (Ctrl/Cmd J) et placez le nouveau au-dessus de la deuxième ligne sombre. La ligne 1px donne une impression de profondeur

En utilisant le. Outil Ligne (U) d'une épaisseur de 1px, créez une nouvelle ligne horizontale avec la couleur : #d8fd42.

Nommez ce calque "1px light line" et déplacez-le en dessous de la première ligne sombre (40, 97, 940, 1)

.

Dupliquez ce calque (Ctrl/Cmd J) et déplacez-le au-dessus de la deuxième ligne sombre

(40, 134, 940, 1) .

Étape 18 : Tapez les éléments du menu de navigation

Sélectionnez l'outil Texte (T) et écrivez le nom de vos éléments de menu de navigation. Utilisez la police Museo 700 et la couleur

#336600.

Étape 18 : Saisissez les éléments du menu de navigation

Sélectionnez l'outil Texte (T) et entrez un nom pour l'élément de menu de navigation. Utilisez la police museo700, couleur : #336600.

Étape 19 : Création de la zone de contenu en vedette

Créez un nouveau groupe au-dessus de la « barre de navigation " groupe et nommez-le "

en vedette".

Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle avec les dimensions

940px par 450px

en utilisant la couleur

#e6b633.Nommez ce calque « zone en vedette bg« .

Étapes 19 : Créez une zone de contenu en vedette

Créez un nouveau groupe en vedette au-dessus du groupe de la barre de navigation.

Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle (40, 136)

, taille : 940px*450px, couleur : #e6b633.

Nommez ce calque comme zone sélectionnée bg

Étape 20 : Ajoutez des lignes de 1 px pour les détails

La conception Web est une question de détails. Utilisez l'outil Ligne (U) pour créer deux lignes horizontales avec le poids

1px au bas du rectangle jaune.

Pour le ligne sombre, utilisez la couleur

#755c18 et nommez le calque « 1px dark line

« .

Pour la ligne claire, utilisez la couleur #ffdf87 et nommez son calque « Ligne lumineuse 1px

». La conception Web dépend des détails. Utilisez l'outil Ligne (U) pour créer deux lignes horizontales d'une épaisseur de 1 px au bas du rectangle jaune.

Pour la ligne sombre (40, 585, 960, 1) , utilisez la couleur : #755c18 et nommez le calque 1px dark line.

Pour la ligne lumineuse

(40, 584, 960, 1)

, utilisez la couleur : #ffdf87 et nommez le calque 1px light line.

Étape 21 : Ajouter du bruit à l'arrière-plan du contenu présenté

Nous allons maintenant ajouter du bruit à l'arrière-plan de la zone de contenu en vedette comme nous l'avons fait avec le papier. Ctrl/Cmd-cliquez sur le masque vectoriel du calque « zone en vedette bg » pour sélectionner le rectangle jaune. Créez ensuite un nouveau calque et remplissez la sélection de blanc (. #ffffff) à l'aide de l'outil Pot de peinture (G).

Convertissez ce calque en objet intelligent.

Ensuite, allez dans Filtre > Ajouter du bruit > et utilisez les paramètres. à partir de l'image suivante.

Définissez le mode de fusion de ce calque sur Multiplier, réduisez l'opacité du calque à 25 % et nommez-le « bruit«.

Étape 21 : Ajouter du bruit à l'arrière-plan du contenu présenté

Nous allons maintenant ajouter du bruit à la zone de contenu présenté, Tout comme le contexte de notre article précédent. Appuyez sur Ctrl/Cmd et cliquez sur le masque vectoriel de la zone sélectionnée bg pour décrire la sélection du rectangle jaune. Créez ensuite un nouveau calque et utilisez l'outil Pot de peinture (G) pour remplir la sélection de blanc (#FFFFFF).

Convertissez ce calque en objet intelligent.

Cliquez ensuite sur : Filtre > Bruit > pour ajouter du bruit, en utilisant les paramètres de l'image ci-dessous.

Réglez le mode de fusion de ce calque sur Multiplier, réduisez l'opacité du calque à 25 % et nommez-le bruit.

Étape 22 : Créer une barre bleue pour les titres

Créez un nouveau groupe et nommez-le « barre bleue ».

Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle comme celui que vous voyez dans l'image suivante en utilisant la couleur #1e92e4.

Nommez également ce calque « barre bleue », double-cliquez dessus pour ouvrir la fenêtre Style de calque et utilisez les paramètres de l'image suivante pour y ajouter un style de calque Superposition de dégradé et Trait.

Sélectionnez ensuite l'outil de déplacement (V) et déplacez votre rectangle 10px au-delà du bord gauche de la mise en page et à une distance de 20px de la barre de navigation.

Étape 22 : Créer le titre row Une barre bleue de

crée une nouvelle barre bleue de groupe.

Sélectionnez ensuite l'outil Rectangle (U) et créez un rectangle (30, 156, 190, 42) avec la couleur : #1e92e4, comme dans l'image ci-dessous.

Nommez ce calque barre bleue, double-cliquez pour ouvrir la fenêtre de style de calque et ajoutez une superposition de dégradé et un style de calque de trait comme indiqué ci-dessous.

Choisissez ensuite l'outil de déplacement (V) et déplacez le rectangle à 10 px au-delà du bord gauche et à 20 px à partir de la barre de navigation supérieure.

Couleur du trait : #3a77be

Étape 23 : Créez l'effet 3D

Créez un nouveau calque, sélectionnez l'outil Plume (P) et créez un petit triangle sous le coin inférieur gauche du rectangle pour donner l'impression que la barre bleue est en 3D.

Nommez ce calque « triangle », double-cliquez dessus et utilisez les paramètres de l'image suivante pour la Superposition de dégradés.

Étape 23 : Créer un effet 3D

Créez un nouveau calque, sélectionnez l'outil Plume (P) et créez un petit triangle sous le coin inférieur gauche de la barre bleue du rectangle,Couleur : #166ead, ressemble à sa teinte 3D.

Cette étape peut également consister à utiliser l'outil rectangle pour créer un nouveau rectangle (30, 198, 10, 10), puis à sélectionner directement l'outil pour sélectionner le point de contrôle dans le coin inférieur gauche de le rectangle et appuyez sur Supprimer pour supprimer le point de contrôle dans le coin inférieur gauche. Cliquez pour obtenir le triangle

Nommez ce calque triangle, double-cliquez sur le calque et définissez la superposition de dégradé comme indiqué ci-dessous.

Étape 24 : Ajouter le texte sur la barre bleue

Sélectionnez l'outil Texte (T) et écrivez « En vedette » » sur la barre bleue en utilisant la police Museo 700 et la couleur #ffffff.

Étape 24 : Ajoutez du texte sur la barre bleue

Sélectionnez l'outil Texte (T) et écrivez En vedette »Sur la barre bleue, utilisez Police : Musée 700, Couleur : #FFFFFF.

Étape 25 : Ajouter des images à la zone de contenu en vedette

Créez un nouveau groupe et nommez-le Je viens d'utiliser des images aléatoires et des captures d'écran de Six Revisions et de mon site PSDBURN.Déplacez chaque image de votre toile à l'aide de l'outil de déplacement (V), en les disposant comme vous le voyez ci-dessous.

Ajoutez un Inner Glow et un Stroke à chaque image en utilisant les paramètres de l'image suivante pour créer un effet de double trait.

Étapes 25 : Ajoutez des images dans la zone de contenu en vedette Créez un nouveau groupe iamges

puis ouvrez les images que vous aimez dans Photoshop, chacune mesure 260 px * 290 px. J'ai juste utilisé des images aléatoires et des captures d'écran de Six Revisions et de mon site Web PSDBURN.

À l'aide de l'outil de déplacement (V) sur votre toile, disposez-les comme vous le voyez dans l'image ci-dessous. Après calcul, les positions de ces 3 images sont (80, 207), (380, 207), (680, 207)

Ajoutez une lueur intérieure et un contour à chaque image comme indiqué ci-dessous Paramètres de bord pour créer un effet de double trait.

Couleur du trait : #5d5643

Étape 26 : Création d'un bouton « Lire la suite »

Créez un nouveau groupe et nommez-le «

boutons

».

Sélectionnez ensuite le rectangle arrondi Outil (U), définissez le rayon sur 6px et créez un rectangle arrondi en utilisant la couleur

#f8c539

.Double-cliquez sur ce calque pour ouvrir le style de calque fenêtre et utilisez les paramètres de l'image suivante.

Sélectionnez ensuite l'outil Texte (T) et écrivez « Lire la suite » » sur votre bouton en utilisant la police Museo 500 et la couleur #3d382a.

Étape 26 : Créez un bouton Lire la suite

Créez un nouveau groupe de boutons.

Sélectionnez ensuite l'outil Rectangle arrondi (U), définissez le rayon sur 6px, coloriez : #f8c539 et créez un rectangle arrondi (322, 524, 179, 41) .

Double-cliquez sur le calque pour ouvrir la fenêtre de style de calque et définissez-le comme indiqué ci-dessous.

Sélectionnez ensuite l'outil Texte (T) et écrivez Lire la suite » sur le bouton, en utilisant la police Museo 500 et la couleur : #3d382a.

Étape 27 : Création d'un bouton « afficher le portfolio »

Dupliquez le calque rectangle arrondi que vous avez créé à l'étape précédente (Ctrl/Cmd J) et déplacez le nouveau calque arrondi rectangle à droite. Changez ensuite sa couleur en #dfd7c0 et la couleur du trait en #ccc5b2.

Utilisez l'outil Texte (T), la police Museo. 300 et la couleur #3d382a pour écrire « Voir le portfolio » sur votre bouton.

Étape 27 : Créer une vue du portfolio Copiez le bouton

sur le calque du rectangle arrondi créé à l'étape précédente (appuyez sur Ctrl/Cmd J) et déplacez-le vers la droite du rectangle arrondi à l'étape précédente (522, 524) . Changez ensuite sa couleur en : #dfd7c0 et la couleur du trait en : #ccc5b2.

Utilisez l'outil Texte (T), Police : Museo 300, Couleur : #3d382a, sur le bouton écrivez Voir le portfolio

Étape 28 : Création d'une lampe

Nous allons maintenant créer une lampe qui éclairera l'image du milieu de la zone de contenu en vedette. Créez un nouveau groupe et nommez-le. " lampe", ​​​​Sélectionnez ensuite l'outil Rectangle arrondi (U), définissez le rayon sur 7px et créez un petit rectangle arrondi en utilisant la couleur #8f631e. .

Double-cliquez sur ce calque pour ouvrir la fenêtre Style de calque et utilisez les paramètres de l'image suivante pour appliquer Inner Shadow, Inner Glow, Styles de calque Superposition de dégradé et Trait.

Nommez ce calque « bois ».

Ajoutez un peu de bruit au partie en bois de la lampe, comme vous l'avez fait avec le papier à l'étape 11. Utilisez une quantité de 5 % de bruit uniforme et monochromatique.

Réglez le mode de fusion de cette couche de bruit sur Multiplier 35%.

Étape 28 : Créer une lampe

Maintenant, nous allons placer une lumière au milieu du zone de contenu en vedette Lampe allumée. Créez une nouvelle lampe de groupe. Sélectionnez ensuite l'outil Rectangle arrondi (U), définissez le rayon sur 7 px et créez un petit rectangle arrondi (475, 162, 66, 12) avec la couleur : # 8f631e.

Double-cliquez pour ouvrir la fenêtre de style de calque et utilisez l'image ci-dessous pour définir les styles de calque d'ombre intérieure, de lueur intérieure, de superposition de dégradé et de trait.

Nommez cette couche de bois.

Ajoutez un peu de bruit à la partie en bois de la lampe, comme vous l'avez fait avec le papier à l'étape 11. Utilisez une répartition uniforme de 5 % et une seule couleur.

Réglez le mode de fusion du calque de bruit sur Multiplier et l'opacité sur 35 %.

描边的颜色： #634513

 

Étape 29 : Création de l'abat-jour de notre lampe

Nous' Je vais créer une lampe qui illumine en quelque sorte notre travail en vedette, ce qui est non seulement symbolique de ce que signifie la zone en vedette, mais également pour attirer davantage l'attention sur cette section de la mise en page Web. Sélectionnez l'outil Rectangle arrondi (U) et créez un rectangle arrondi comme celui de l'image suivante en utilisant la couleur #9ce340.

Assurez-vous que le masque vectoriel de ce calque est sélectionné, cliquez sur le bouton Exclure les zones de forme qui se chevauchent dans la barre d'options et faites glisser un nouveau rectangle sur la moitié inférieure du premier pour effacer cette zone. Jetez un œil à l'image suivante pour référence.

Ensuite, double-cliquez sur ce calque et utilisez les paramètres de l'image ci-dessous pour ajouter Inner Glow, Bevel and Emboss, Superposition de dégradés et Trait styles de calques.

 

步骤29：为我们的灯创建灯罩

我们将按顺序创建一盏灯，照亮我们的特色工作，这不仅是在的特色区域的符号，也希望带来更多的关注这部分的网络布局。选择圆角矩形工具（ U）创建一个圆角矩形（439，168，141，39），半径设置为15px，像下面的图片，颜色： #9ce340。

单击选择这层的"从形状区域减去"按钮，并拖动一个新的矩形的在前一个矩形的下半部分，达到删除的目的。就像下面的图片一样。之前做的纸片折角的做法是一样的。

然后双击这一层，从下面的图像中添加内发光，斜面和浮雕，渐变叠加和描边的图层样式。

Couleur du trait : #84b93d

Étape 30 : Donner à notre lampe une jolie superposition de dégradé

Dupliquez le calque que vous avez créé à l'étape précédente (Ctrl/Cmd J) et réglez son remplissage sur 0%. Faites un clic droit sur ce calque et sélectionnez Effacer le style de calque.

Ensuite, double-cliquez dessus et utilisez les paramètres de l'image suivante pour Superposition de dégradé. .

Étape 30 : Donnez à nos lumières une jolie superposition de dégradé

Copiez le calque créé à l'étape précédente (Ctrl/Cmd J), réglez son remplissage sur %. Cliquez avec le bouton droit sur le calque et sélectionnez Effacer le style de calque.

Ensuite, double-cliquez dessus et configurez la superposition de dégradé comme indiqué ci-dessous.

Couleurs de l'éditeur de dégradés : #535b5e, #fefefe, #535b5e, #fefefe, #535b5e.

Étape 31 : Ajoutez une autre superposition de dégradé sur l'abat-jour

Dupliquez le calque de l'étape précédente (Ctrl/Cmd J) et utilisez les paramètres de l'image suivante pour la Superposition de dégradés.

Étape 31 : Ajoutez une autre superposition de dégradé à l'abat-jour

Dupliquez le calque de l'étape précédente (appuyez sur Ctrl/Cmd J) et configurez la superposition de dégradé comme indiqué ci-dessous.

Étape 32 : Ajouter du bruit à l'abat-jour

Ajoutez du bruit à la lampe pour lui donner un peu de texture en utilisant la même technique que celle que vous avez utilisée pour le papier à l'étape 11. Réglez le mode de fusion de ce calque de bruit sur Multiplier et réglez l'opacité du calque sur 15%.

Étape 32 : Ajouter du bruit à la lumière Ajoutez du bruit pour lui donner un peu de texture, tout comme la technique que vous avez utilisée pour le papier à l'étape 11. Définissez le mode de fusion de ce calque de bruit sur Multiplier et définissez l'opacité du calque sur 15 %.

Étape 33 : Donner de la profondeur à l'abat-jour

Dupliquez le calque que vous avez créé à l'étape 29 (« Forme 1″) et placez-la au-dessus du calque « bruit ».

Effacez le style de calque et changez la couleur de cette forme en #eef8e2.

Allez pour Modifier > Transformation libre (Ctrl/Cmd T) et diminuer la largeur de la forme comme vous le voyez dans l'image ci-dessous.

Ajoutez un masque à ce calque (Calque > Masque de calque > Révéler tout) , sélectionnez l'outil Dégradé (G) et faites glisser un dégradé noir à transparent du bas vers le milieu de cette forme.

Nommez ce calque « surbrillance » et définissez son mode de fusion sur Superposition et opacité du calque à 20% Dupliquez le calque créé à l'étape 29 et déplacez-le au-dessus du calque de bruit.

Effacez le style du calque et changez la couleur de cette forme : #eef8e2.

Cliquez sur : Édition > Transformation libre (Ctrl/Cmd-T) et réduisez la largeur de la forme comme vous le voyez dans l'image ci-dessous. Ajoutez un masque à ce calque (cliquez sur : Calque > Masque de calque > Afficher tout), sélectionnez l'outil Dégradé (G) et sélectionnez un dégradé noir à transparent à partir de cette forme. Faites glisser le dégradé de bas en haut. milieu.

Nommez ce calque en surbrillance et définissez son mode de fusion sur Superposition et l'opacité du calque sur 20 %.

Étape 34 : Créer une ampoule

Quoi une lampe serait-elle sans ampoule ? Créez un nouveau calque sous le calque « Forme 1 », sélectionnez l'outil Ellipse (U) et créez un cercle (maintenez la touche Maj enfoncée pour créer un cercle parfait) en utilisant la couleur

. #f6f3a2

.

Nommez ce calque « ampoule », double-cliquez dessus et utilisez les paramètres de l'image suivante pour

Inner Glow

, Superposition de dégradés et styles de calques

Trait

. Étape 34 : Créer une ampoule Non Comment une ampoule peut-elle être considérée comme une lumière ? Créez un nouveau calque sous le calque d'ombre, sélectionnez l'outil Ellipse (U) et créez un cercle (maintenez la touche Maj enfoncée pour créer un cercle parfait) avec la couleur : #f6f3a2.

Nommez ce calque

ampoule

, double-cliquez dessus pour définir les styles de calque de lueur intérieure, de superposition de dégradé et de trait comme indiqué ci-dessous.

Couleur du trait : #8cc93d

Étape 35 : Création de la source de lumière à partir de la lampe

Créez un nouveau calque au-dessus du calque « ampoule ».

Sélectionnez ensuite l'outil Plume (P) et créez une forme blanche comme celle que vous voyez dans l'image suivante.

Convertissez ce calque en objet intelligent.

Ensuite, allez dans Filtre > Flou > Flou gaussien et définissez le rayon sur 7px.

Nommez ce calque « lumière » et définissez son opacité sur 25 %.

Étape 35 : Créez la lumière émise par la lampe

Créez un nouveau calque au-dessus du calque de l'ampoule.

Sélectionnez ensuite l'outil Plume (P) et créez une forme blanche comme celle que vous voyez dans l'image ci-dessous.

Si vous n'êtes pas habitué à utiliser l'outil Plume, vous pouvez suivre les étapes ci-dessous :

Créer un nouveau rectangle (377, 193, 266, 304), couleur : #f6f3a2

Appuyez sur Ctrl T pour transformer librement, cliquez avec le bouton droit pour sélectionner la perspective et faites glisser le point de contrôle dans la partie supérieure coin gauche à la position appropriée, comme indiqué dans la figure ci-dessous :

Convertissez ce calque en objet intelligent.
Cliquez ensuite sur : Filtre > Flou > Flou gaussien, définissez le rayon sur 7 px.
Nommez ce calque clair et réglez son opacité à 25 %.

Étape 36 : Création de la flèche droite du carrousel d'images

Créer un nouveau groupe et un nouveau nom C'est "flèche droite". Sélectionnez l'outil Ellipse (U) et créez un cercle au milieu du bord droit de la zone de contenu présenté. Utilisez la couleur

#e6b633. . Sélectionnez l'outil Ellipse (U) pour créer un cercle centré sur le côté droit de la zone de contenu présenté. Utilisez la couleur : #e6b633. Nommez ce cercle de calque.

Étape 37 : Ajoutez du bruit à la flèche droite

Ajoutez du bruit sur le cercle jaune en utilisant la même technique que celle que vous avez utilisée à l'

Étape 11 pour le papier >

Ajoutez du bruit au cercle jaune, en utilisant la même technique que pour ajouter du bruit au papier à l'étape 11.

Le mode de fusion des calques est Multiplier et l'opacité est de 25 %

Étape 38 : Ajouter un trait au cercle

Dupliquez le calque « cercle » (Ctrl/Cmd J) et placez le nouveau en dessous.

Double-cliquez dessus. et utilisez les paramètres de l'image suivante pour ajouter un style de calque Outer Glow

et un

Stroke.

Ajoutez ensuite un masque à ce calque (Couche > ; Calque Masque > Révéler tout).

Sélectionnez l'outil Dégradé (G) et faites glisser un dégradé horizontal noir à transparent du côté gauche du cercle vers le côté droit. Jetez un œil à l'image suivante pour référence.

Nommez ce calque «

trait« .

Étape 38 : Ajoutez un trait au cercle

Dupliquez le calque du cercle (Ctrl/Cmd J) et placez le nouveau calque sous le calque du cercle.

Double-cliquez sur le calque et définissez les styles de calque de lueur et de trait extérieur comme indiqué ci-dessous.

Ajoutez ensuite un calque de masque (cliquez sur : Calque > Masque de calque > Afficher tout).

Sélectionnez l'outil Dégradé (G) et faites glisser le dégradé horizontal noir vers transparent du côté gauche du cercle vers le côté droit (Il devrait en fait être le côté central gauche du cercle vers la droite côté ). Jetez un œil aux images ci-dessous pour référence.

Nommez ce trait de calque. Étape 39 : Créez les flèches réelles

Sélectionnez l'outil Forme personnalisée (U) et créez deux flèches sur votre cercle en utilisant la couleur

#fbf2db

. Flèche 2

(il s'agit d'une forme par défaut dans Photoshop dans le cadre du groupe de formes personnalisées

Flèches

J'ai choisi cette forme car elle ressemble le plus aux flèches de la barre bleue « En vedette »). texte, nous donnant quelques éléments de conception répétitifs dans la mise en page.

Étape 39 : Créer de vraies flèches Créez 2 flèches dans votre jardin, couleur : #fbf2db. La forme personnalisée s'appelle Flèche 2 (comme l'une des formes par défaut dans Photoshop et faisant partie du groupe de formes personnalisées Flèche). J'ai choisi cette forme car elle ressemble le plus aux flèches du texte dans la barre bleue "En vedette", ce qui ne nous donne que quelques éléments de conception répétitifs dans la mise en page.

Étape 40 : Création de la flèche gauche du carrousel d'imagesDupliquez la « flèche droite » groupe (faites un clic droit dessus et sélectionnez Dupliquer le groupe).

Allez dans Édition > Transformer > Retourner horizontalement et utilisez l'outil de déplacement (V) pour le déplacer dans le côté gauche de la mise en page.

Nommez ce groupe « flèche gauche«

Dupliquez le groupe fléché droit (faites un clic droit dessus et sélectionnez Dupliquer le groupe

Cliquez sur : Modifier > Transformer). > Retournez horizontalement et utilisez l'outil de déplacement (V) pour vous déplacer vers la gauche de la mise en page

Ce groupe est nommé flèche gauche

<.>

Étape 41 : Ajouter le nom des images

Créez un nouveau groupe et nommez-le «

noms d'images

« . Sélectionnez l'outil Rectangle arrondi (U), définissez le rayon sur

5px

et créez un rectangle arrondi blanc (

#ffffff

) au bas de chaque image de la zone de contenu présenté.Ajoutez un style de calque

Trait

à chacun de ces rectangles en utilisant les paramètres de l'image suivante.

Sélectionnez ensuite l'outil Texte (T) et écrivez le nom de vos images à l'intérieur. ces rectangles en utilisant la police

Verdana

et la couleur

#38352c

.

Étape 41 : Ajouter le nom de l'image

Créez un nouveau nom d'image de groupe.

Sélectionnez l'outil Rectangle arrondi (U), définissez le rayon sur 5 px et créez un rectangle arrondi blanc au bas de chaque image dans la zone de contenu présenté, respectivement (110, 475, 200, 32) et (410, 475, 200, 32) et (710, 475, 200, 32)

.

Définissez le style de calque de trait pour chaque rectangle arrondi comme indiqué ci-dessous.

Sélectionnez ensuite l'outil Texte (T) et écrivez le nom de chaque image, en utilisant Police : Verdana, Couleur : #38352c.

Couleur du trait : #999382

Étape 42 : Création du " zone services »

Créez un nouveau groupe et nommez-le « services ».

Sélectionnez l'outil Rectangle (U) et créez un rectangle de hauteur 340px en utilisant la couleur #e6e2d5.

Nommez ce calque « services bg » et définissez son opacité sur 25% .

Étape 42 : Créer une zone de services

Créer un nouveau groupe de services

Sélectionnez l'outil Rectangle (U) Créer un rectangle (40, 586, 940, 340) , hauteur 340px, couleur : #e6e2d5.

Nommez ce calque "services bg" et définissez son opacité à 25%.

Étape 43 : Ajouter la barre bleue « Services »

Dupliquez le groupe « barre bleue » de la zone en vedette et déplacez-le dans le groupe « services ».

Utilisez ensuite l'outil de saisie (T) pour changer le texte « En vedette » en « Services ».

Étape 43 : Ajoutez la barre bleue de la zone de service

Copiez le groupe de barres bleues dans la zone sélectionnée et déplacez-le du groupe de zones sélectionnées vers le groupe de services.

Utilisez ensuite l'outil Texte (T) pour remplacer En vedette par Services.

Étape 44 : Ajouter une liste de services

Créez un nouveau groupe et nommez-le « navigation«.

Sélectionnez l'outil Rectangle (U) et créez un rectangle sous le bleu en utilisant la couleur #edeadf.

Double-cliquez sur ce calque pour ouvrir la fenêtre Style de calque et utiliser les paramètres de l'image suivante pour la Superposition de dégradés.

Dupliquez ce rectangle trois fois et disposez-les tous à l'aide de l'outil de déplacement (V). .

Étape 44 : Ajouter une liste de services

Créer une nouvelle navigation de groupe

Sélectionnez l'outil Rectangle (U) sur Créer un rectangle (40, 648, 180, 42) en dessous de la barre bleue, couleur : #edeadf.

Double-cliquez pour ouvrir la fenêtre de style de calque et définissez la superposition de dégradé comme indiqué ci-dessous.

Dupliquez ce rectangle trois fois et utilisez l'outil de déplacement (V) pour le déplacer vers l'emplacement approprié.

Étape 45 : Créer des séparateurs

Sélectionner la ligne Outil (U) et créez des lignes avec le poids 1px pour séparer les rectangles que vous avez créés à l'étape précédente Utilisez la couleur #d9d6c9 Regroupez ensuite tous ces calques (Ctrl/. Cmd G) et nommez le groupe « séparateurs« .

Étape 45 : Créer des séparateurs

Sélectionnez la ligne épaisse de 1 px créée avec l'outil Ligne (U) et séparez le rectangle que vous avez créé à l'étape précédente. Couleur : #d9d6c9. Sélectionnez ensuite tous ces calques et fusionnez-les dans un groupe (Ctrl/Cmd G) et nommez-le séparateurs.

Les cinq droites sont (40, 689, 180, 1) et (40, 731, 180, 1) et (40, 773, 180, 1) et (40, 815, 180 , 1) et (219 648,1 168)

Étape 46 : Rédigez les services que vous proposez

Sélectionnez l'outil Type (T) et rédigez une liste de services en utilisant la police Museo 300 et la couleur #3f3d36.

Étape 46 : Liste des services fournis

Choisissez l'outil Type (T) pour rédiger la liste des services, police Museo 300, couleur : #3f3d36.

Étape 47 : Ajouter une image pour chaque service

Nous allons maintenant ajouter une image représentative pour chaque service répertorié. Créez un nouveau groupe et nommez-le « images » Puis ajoutez une image recadrée aux dimensions 160px par 210px. style à partir de l'une des images de la zone de contenu présenté et collez-la sur cette image pour obtenir le même effet de double trait.

Utilisez l'outil Rectangle arrondi (U) pour créer un rectangle arrondi blanc au bas de celui-ci. image

Ajoutez ensuite un trait 1px #999381 à ce calque.

Sélectionnez l'outil Texte (T) et écrivez le nom du premier service de votre liste à l'intérieur. ce rectangle en utilisant la police Verdana et la couleur #38352c.

Étape 47 : Ajouter l'image

Nous allons maintenant ajouter des images représentatives pour chaque service. Créez un nouveau groupe d'images. Ajoutez ensuite une image

(240, 606) avec une taille recadrée de 160px*210px. Copiez le style de calque de l'image de la zone de contenu présentée et collez-le dans cette image pour obtenir le même effet de double trait.

Utilisez l'outil Rectangle arrondi (U) pour créer un rectangle arrondi blanc au bas de l'image.

Ajoutez un trait de 1px à ce calque, couleur : #999381

Utilisez l'outil texte pour écrire le nom du premier service de la liste de services dans le rectangle, police : Verdana, couleur : #38352c

Étape 48 : Ajouter plus d'images

Ajoutez trois images supplémentaires et répétez l'étape précédente pour chacune.

Déplacez ensuite les deuxième et quatrième images

20px vers le bas (sélectionnez les images, choisissez l'outil de déplacement (V), maintenez la touche Maj enfoncée et appuyez sur la touche fléchée vers le bas deux fois). Cela semble un peu plus intéressant que d'aligner chaque image de la même manière. Ajoutez trois images supplémentaires et répétez les étapes précédentes pour chacune.

Déplacez ensuite le deuxième et le quatrième vers le bas de 20 px (sélectionnez l'image de l'image, sélectionnez l'outil de déplacement (V), maintenez la touche Maj enfoncée et appuyez deux fois sur la touche Flèche vers le bas). C'est un peu plus intéressant à regarder que d'aligner chaque image.

Étape 49 : Ajouter deux boutons d'appel à l'action

Dupliquez les deux boutons du zone de contenu en vedette et déplacez-les sous les images de la zone de services à l'aide de l'outil de déplacement (V). Ensuite, changez le texte du bouton jaune en « Engagez-moi aujourd'hui !

» et écrivez quelques mots avant. Jetez un œil à l’image suivante pour référence.

Désormais, les visiteurs/clients potentiels qui aiment les œuvres présentées dans le site portfolio ont ici deux options : embaucher le designer ou voir davantage de son travail. Grâce à ces boutons d'appel à l'action, nous souhaitons encourager le potentiel. les clients doivent agir et nous contacter pour un nouveau projet. Puisque « Engagez-moi aujourd'hui ! » est notre appel à l'action le plus souhaité, nous utilisons une couleur plus proéminente et la plaçons à gauche, ce qui, pour les lecteurs de langue anglaise de gauche à droite, serait la première chose qu'ils verraient.

Étape 49 : Ajoutez deux boutons de fonction

Dupliquez les deux boutons de la zone Contenu en vedette et utilisez l'outil Déplacer (V) pour les déplacer sous l'image de la zone Services. Ensuite, changez le texte du bouton jaune en Embauchez-moi aujourd'hui et écrivez une phrase devant. Jetez un œil aux images ci-dessous pour référence.

Les clients potentiels qui aiment le travail présenté sur le site du portfolio ont deux options : embaucher le designer ou voir son travail. Grâce à ces boutons fonctionnels, nous souhaitons encourager les clients potentiels à nous contacter de manière proactive et à obtenir un nouveau projet. Merci Embauchez-moi aujourd'hui ! Pour l'action que nous souhaitions le plus, nous lui avons fait utiliser une couleur plus proéminente et l'avons positionnée à gauche de manière à ce que les lecteurs anglais de gauche à droite soient le premier bouton qu'ils voient.

Étape 50 : Ajouter deux séparateurs

Créer deux lignes avec un poids de 1px en bas de la zone de services. Utilisez la couleur #c0bcb1 pour la première ligne et #ffffff pour la seconde.

Étape 50 : Ajouter 2 séparateurs

Créez 2 lignes droites horizontales d'une épaisseur de 1px au bas de la zone de service. La première ligne droite (40, 925, 940, 1) couleur : #c0bcb1, la deuxième ligne droite (40, 924, 940, 1) couleur : #ffffff

Étape 51 : Créer un arrière-plan pour la zone du blog

Créer un nouveau groupe sous le groupe « services » et nommez-le « blog ». Cela contiendra des extraits d'articles de blog, que de nombreux portefeuilles possèdent aujourd'hui.

Sélectionnez l'outil Rectangle (U) et créez un rectangle de hauteur <.> 345px en utilisant la couleur #f8f5ec.

Nommez ce calque «

blog bg » et définissez son opacité sur 25% .

Étape 51 : Créez l'arrière-plan de la zone de blog

Sous le groupe de services, créez un nouveau blog de groupe. Cela contiendra un résumé des articles de blog, et nous avons maintenant de nombreux articles de blog.

Choisissez l'outil Rectangle (U) et créez un rectangle

(40, 926, 940, 345) avec la couleur : #f8f5ec.

Nommez ce calque blog bg et définissez son opacité à 25 %.

Étape 52 : Ajouter une barre bleue à la zone du blog

Dupliquez la « barre bleue » groupe de la zone de services et déplacez-le vers le bas.

Utilisez l'outil Texte (T) pour changer le texte « Services » en «

Blog ».

Étape 52 : Ajouter une barre bleue à la zone du blog

Copiez le groupe de barres bleues dans la zone de service et déplacez-le vers la position appropriée

Utiliser l'outil texte pour ajouter le texte Services a été modifié en Blog

Étape 53 : Rédaction des catégories du blog

Dupliquez le groupe « navigation » de la zone de services et déplacez-le dans le groupe « blog ».

Utilisez ensuite l'outil de déplacement (V) pour déplacer les rectangles sous la barre bleue de la zone de blog. J'utiliserai cette liste pour les catégories du blog.

Sélectionnez l'outil Texte (T) et modifiez le texte de la liste. Si nécessaire, ajoutez plus de rectangles en dupliquant l'un de ces calques autant de fois que nécessaire.

Étape 53 : Écrivez la catégorie blog

Copiez le groupe de navigation de la zone de service et déplacez-le vers le groupe blog.

Utilisez ensuite l'outil de déplacement (V) pour vous déplacer sous le rectangle de la barre bleue dans la zone du blog. Nous utiliserons cette liste de catégories pour rédiger notre blog.

Sélectionnez l'outil Texte (T) et modifiez la liste de texte. Plusieurs fois, vous devrez ajouter plus de rectangles en dupliquant ces calques si nécessaire.

N'oubliez pas de copier le délimiteur et d'apporter les modifications appropriées

Étape 54 : Ajout de deux articles de blog

Créez un nouveau groupe et nommez-le « articles ». Ajoutez deux images à votre zone de blog avec les dimensions 340px par 140px .

Copiez le style de calque de l'une des images de la zone de services et collez-le sur ces deux images pour obtenir le même effet de double trait.

Sélectionnez ensuite l'outil Texte (T) et écrivez du texte sous vos images. Utilisez la police Verdana avec la couleur #222222 pour les titres et #444444 pour le bloc de texte.

Étape 54 : Ajouter deux articles de blog

Créez un nouveau groupe d'articles. Deux images à ajouter à votre espace blog, dimensions : 340px*140px.

Copiez le style de calque de l'image de la zone de service et collez-le dans les deux images afin qu'il obtienne le même effet de double trait.

Sélectionnez ensuite l'outil Texte (T) et écrivez du texte sous votre image. Couleur du titre : #222222, Couleur du bloc de texte : #444444, Police : Verdana.

Étape 55 : Appel à l'action pour lire votre blog

Utilisez l'outil de saisie ( T) d'écrire la question « Vous voulez plus d'articles et de tutoriels ? » sous les articles du blog. Ajoutez ensuite un bouton à côté de cette question avec le texte « Lire le blog ».

Remarque : vous pouvez dupliquer ce bouton du groupe « services ».

Étape 55 : Ajouter un bouton de fonction lire votre blog

Utilisez l'outil Texte (T) pour écrire Vous voulez plus d'articles et de tutoriels sous votre article de blog ? Ajoutez ensuite un bouton et ajoutez du texte qui répond à la question Lire le blog.

Remarque : Vous pouvez copier ce bouton depuis le groupe de services.

Étape 56 : Plus de séparateurs

Dupliquez les deux couches de séparation à partir du bas de la zone de services et utilisez l'outil Déplacer (V) pour les déplacer en bas de la zone du blog. > Dupliquez les calques de séparation en bas de la zone de service et déplacez-les vers le bas de la zone du blog à l'aide de l'outil Déplacer

Étape 57 : Création de la zone « À propos de moi »

Créez un nouveau groupe, nommez-le « à propos

» et déplacez-le sous le groupe «blog».

Sélectionnez l'outil Rectangle (U) et créez un rectangle avec la hauteur

200px et la couleur #e6e2d5

. Nommez ce calque «

about bg » et définissez son opacité sur 25 %

.

Dupliquez un groupe de barres bleues que vous avez créé aux étapes précédentes, déplacez-le dans le coin supérieur gauche de cette zone et changez le texte en « À propos de moi ».Écrivez quelques phrases sous la barre bleue à l'aide de l'outil Texte (T). Vous pouvez ensuite ajouter des icônes sociales. sous ce texte. Ceux que j'ai utilisés proviennent de Function et vous pouvez les télécharger gratuitement.

Enfin, ajoutez deux lignes avec le poids 1px en bas de cette zone >

Créez un nouveau groupe sur

,

et déplacez-le sous le blog. groupe. Choisissez l'outil Rectangle (U) et créez un rectangle

(40, 1271, 940, 200)

avec la couleur : #e6e2d5. Nommez ce calque "à propos de bg" et définissez son opacité sur 25 %. Copiez la barre bleue que vous avez créée à l'étape précédente et déplacez-la vers le coin supérieur gauche de cette zone et modifiez le texte À propos de moi.

Utilisez l'outil Texte (T) pour écrire une phrase sous la barre bleue. Ensuite, vous pouvez ajouter des icônes de réseaux sociaux. J'utilise tout depuis Function, vous pouvez le télécharger gratuitement. Enfin, ajoutez deux lignes droites de 1px en bas de cette zone (

peut copier le séparateur

en bas de la zone de blog précédente).

Étape 58 : Création de la zone de contact

Créez un nouveau groupe sous le groupe « à propos » et nommez-le "

contact

".Utilisez l'outil Rectangle (U) pour créer un rectangle de hauteur

450px

et de couleur #f8f5ec. Nommez ce calque «

contact bg

» et définissez son opacité sur 25%.Dupliquez un groupe de barres bleues que vous avez préalablement créé.Déplacez cette nouvelle barre bleue dans le coin supérieur gauche de la zone de contact et utilisez l'outil Texte (T) pour changer le texte en « Contact ».

Étape 58 : Créez la zone Contactez-nous

Créez un nouveau contact de groupe sous le groupe À propos.

Utilisez l'outil Rectangle (U) pour créer un rectangle (40, 1271, 940, 449) avec la couleur : #f8f5ec. Nommez ce calque contact bg et réglez son opacité à 25%.

Copiez la barre bleue que vous avez créée à l'étape précédente Copiez la barre bleue que vous avez créée à l'étape précédente.

Placez cette nouvelle barre bleue dans le coin supérieur gauche de la zone de contact et utilisez l'outil Texte (T) pour changer le texte en Contact.

Étape 59 : Créez le bouton d'envoi du formulaire de contact

Utilisez l'outil Rectangle (U) pour créez un formulaire de contact. Définissez la couleur de chaque rectangle sur

#ebe9e5

Utilisez ensuite l'outil Texte (T) et la couleur #8c8a86 pour écrire le nom de chaque champ du contact. formulaire à l'intérieur.

Ajoutez un bouton d'envoi sous le formulaire de contact.Vous pouvez dupliquer l'un des boutons que vous avez précédemment créés et changer le texte en « Envoyer ".

Étape 59 : Créer un formulaire de contact et un bouton d'envoi

Créez un formulaire de contact à l'aide de l'outil Rectangle (U). Paramètres de couleur pour chaque rectangle : #ebe9e5. Utilisez ensuite l'outil Texte (T), couleur : #8c8a86, pour écrire le nom de chaque champ dans le formulaire de contact.

Ajoutez un bouton d'envoi sous le formulaire de contact. Vous pouvez copier le bouton que vous avez créé précédemment et changer le texte en bouton Envoyer et le déplacer vers la position appropriée.

Formulaire de nom : (100, 1553, 280, 36)

Formulaire d'e-mail : (100, 1599, 280, 36)

Formulaire d'objet : (100, 1645, 280, 36)

Formulaire de message : (100, 1691, 400, 130)

Étape 60 : Création du footer

On arrive à la finale étape de ce tutoriel, alors continuez ! Créez un nouveau groupe et nommez-le « 

pied de page

 » ​​Ensuite, utilisez l'outil Rectangle (U) pour créer un rectangle d'une hauteur de30px<.> et la couleur #e6e2d5

.

Nommez ce calque « footer bg » et définissez son opacité sur 25%.

Ajoutez deux lignes avec le poids

1px en haut du pied de page.Sélectionnez ensuite l'outil Texte (T) et rédigez une déclaration de droit d'auteur.

Utilisez la police Verdana et la couleur #595753.

Étape 60 : Créer un pied de page

Notre dernière étape de ce tutoriel, respectez-la ! Créez un nouveau pied de page de groupe. Utilisez ensuite l'outil Rectangle (U) pour créer un rectangle (40, 1888, 940, 32) avec la couleur : #e6e2d5.

Nommez ce calque "footer bg" et définissez son opacité sur 25%.

Ajoutez deux lignes horizontales de 1px en haut du pied de page ( peut copier les deux séparateurs en bas de la zone du blog).

Sélectionnez ensuite l'outil Texte (T) et rédigez une déclaration de droit d'auteur.

Utiliser la police : police Verdana, couleur : #595753.

Résultat final :

Post-scriptum :

Il s'agit également d'un tutoriel très détaillé, avec un total de 60 étapes. Le point fort de ce tutoriel est de réaliser certains effets spéciaux en "soustrayant de la zone de forme", comme l'effet de coin du papier, l'effet d'abat-jour, etc. Deuxièmement, un grand nombre d’effets de superposition de dégradés sont utilisés pour obtenir de superbes effets. La production de lampes dans le tutoriel est également un point fort. Même ces étapes constituent à elles seules un bon tutoriel.

Pour plus de tutoriels de conception de sites Web PS