Maison  >  Article  >  interface Web  >  Tutoriel PS Web Design III - Conception d'une mise en page de site Web élégante dans Photoshop

Tutoriel PS Web Design III - Conception d'une mise en page de site Web élégante dans Photoshop

高洛峰
高洛峰original
2017-02-10 15:16:101189parcourir

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.

Commençons le tutoriel
Ouvrez Photoshop et créez un nouveau document 1020 par 1100px

Commençons le tutoriel

Ouvrez Photoshop et créez un nouveau document Un document, taille : 1020*1100px

Ensuite, utilisez l'outil Rectangle pour créer un rectangle couvrant l'intégralité du document, couleur : #e5e4e4PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Vous pouvez envisager cette étape , je pense personnellement qu'il est préférable d'utiliser l'outil Pot de peinture

Étape 1

Je sélectionnerai l'outil ellipse et je créerai cette forme blanche

Étape 1

Sélectionnez l'outil ellipse pour créer comme suit Ellipse blanche

Étape 2 35px

Étape 2

Utilisez Filtre>Flou>Flou gaussien, définissez le rayon sur 35pxPS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 3

À partir des fichiers Premium, disponible pour nos membres Premium, j'utiliserai des ornements vectoriels dessinés à la main et j'ajouterai un élément sur mon document

Je réduirai également l'opacité à 4%

Étape 3

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计 Dans Premium. Fichiers, rendez-vous sur nos Membres Premium, j'utiliserai le motif de Hand Drawn Vector Ornaments pour le mettre dans mon document

Ajouter son opacité à 4%


Étape 4

Ensuite, je sélectionnerai l'outil Rectangle et je créerai ces 3 formes en haut :


Étape 4

Ensuite, utilisez l'outil Rectangle pour créez 3 rectangles sur le dessus. PS网页设计教程III——在Photoshop中设计优雅的网站布局设计 La hauteur des trois rectangles est de 6px

, et les couleurs sont : #cdaeac, #ad8b8a, #a18280

Étape 5

Avec type Outil J'écrirai « Site Web élégant » et comme slogan j'utiliserai « un design de trendyTUTS ». La police utilisée est Ariston, avec une taille de 48 pts

Pour « Élégant », j'ai appliqué ces styles de calque :

.

Étape 5Utilisez l'outil de texte pour ajouter le texte du site Web élégant et ajoutez le texte (un dessin de trendyTUTS) à la ligne du logo ci-dessous. La police est Ariston, taille 48.

Ajoutez le style de calque suivant à Elegant :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #c7c1c1

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Pour « Site Web », ce calque styles :

Ajoutez le style de calque suivant au site Web :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #d38475

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Mon résultat :

Le résultat est le suivant :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 6

Dans cette étape, j'utiliserai à nouveau nos fichiers Premium cette fois à partir d'Universal Vector Icons 2, je sélectionnerai une icône de badge et je l'ajouterai sur mon document.

Étape 6

Dans cette étape, je souhaite accéder à nouveau aux fichiers Premium. Cette fois, en utilisant Universal Vector Icons 2, sélectionnez l’icône du badge à ajouter à mon document.

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Je vais appliquer les styles de calque suivants à mon badge :

Ajoutez les styles de calque suivants à l'icône tout de suite :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #d2d2d2

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Voici mon résultat :

Le résultat est le suivant :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 7

Avec Type Tool J'ajouterai du texte sur le côté droit. J'écrirai « Appelez-nous – 1-800-elegant »

Étape 7

Utilisez l'outil texte pour ajouter appelez-nous – 1-800-. élégant sur le côté droit. L'appel à nous est le même que le style de calque élégant précédent, et 1-800-elegant est le même que le style de calque de site Web précédent .

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 8

J'utiliserai l'outil Rectangle et je créerai cette forme noire.

Étape 8

Utilisez l'outil Rectangle pour ajouter le rectangle noir suivant. (0, 223, 1020, 65) Couleur : #636363

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 9

Avoir un rectangle Outil sélectionné Je vais créer une autre forme en haut de la forme créée à l'étape 6. J'ai utilisé une couleur rouge juste pour les propositions de démonstration. Lorsque vous créerez cette forme, vous devrez utiliser cette couleur : #e5e4e4

Étape. 9

Utilisez l'outil Rectangle pour créer un autre rectangle au-dessus du rectangle précédent. Je recommande d'utiliser la couleur rouge à des fins de démonstration. Lorsque vous créerez ce rectangle, vous devrez utiliser la couleur : #e5e4e4

Suivez le tutoriel, en utilisant également d'abord la couleur rouge, puis changez en #e5e4e4, rectangle (70, 223, 882, 40)

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 10

Assurez-vous que le calque de la forme créée à l'étape 8 est sélectionné sur votre calque palette, sélectionnez Outil de sélection directe et faites glisser un peu depuis le coin inférieur gauche de la forme. Veuillez voir la capture d'écran :

Procédez de la même manière pour le côté droit :

<.>Veuillez vous assurer que le calque rectangulaire nouvellement créé est sélectionné, utilisez l'outil de sélection directe pour faire glisser le coin inférieur gauche du rectangle, voir la capture d'écran :

Maintenez la touche Maj enfoncée tout en faisant glisser, vous pouvez le garder horizontal et suivez les invites sur le panneau d'information , il peut être parfaitement glissé dans un angle de 45 degrés

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

De la même manière, faites glisser le coin inférieur droit du rectangle, Puis changez la couleur en #e5e4e4 Le résultat est le suivant :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Step 11

Avec l'outil Rectangle, je vais créer cette forme Couleur utilisée : # d67474

Étape 11

Utilisez l'outil Rectangle pour créer un rectangle

(76, 187, 870, 76)

, couleur : #d67474

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 12

Avec l'outil Ellipse, je vais créer cette forme :

Étape 12

Utiliser l'outil Ellipse Je vais créer cette forme :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Et j'appliquerai un flou gaussien d'environ 34 pixels. Mon résultat 34px (

Personnellement, je pense que le rayon de 8px est plus approprié. Je ne sais pas pourquoi, mais en gros on ne voit rien dans ses paramètres

Les résultats sont les suivants

Étape 13PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Je vais entourer la navigation de ce signe « —————————— ». Je vais appliquer ces styles de calque :

Étape 13

J'entoure le symbole "----------" autour de la barre de navigation Pour plus de beauté, ajoutez le style de calque suivant. :

Utilisez l'outil texte pour ajuster l'espacement des caractères afin d'obtenir l'effet d'une boîte en pointillés

Mon résultat

Le résultat est le suivantPS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 14

Avec Type Tool, j'ajouterai le texte pour la navigation
J'ai utilisé la police Ariston d'une taille de 24 pixels

Étape 14

Utilisez l'outil texte pour ajouter du texte sur la barre de navigation, police Ariston, taille 24px

Afin d'être le identique à l'échantillon, le texte correct a également ajouté des paramètres de projection :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 15

Avec Pen Tool, je vais créer cette flèche qui fera office de sélecteur pour la navigation.

Étape 15

Utilisez Pen Tool pour créer la flèche triangulaire lorsque le menu de la barre de navigation est sélectionné.

Utilisez l'outil Polygone et changez le nombre de côtés à 3. Il peut être plus pratique de créer un triangle

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 16

Avec l'outil rectangle, je vais créer cette forme au milieu de la page. Assurez-vous que le calque de la forme créée est sélectionné sur votre palette de calques, sélectionnez l'outil de sélection directe et faites glisser un peu depuis le haut. coin gauche de la forme. Veuillez consulter la capture d'écran :

Étape 16

Utilisez l'outil rectangle pour créer un rectangle (36, 552, 950, 50) dans le milieu de la page, en vous assurant que la forme est rectangulaire. Le calque étant sélectionné, utilisez l'outil de sélection directe pour faire glisser le coin supérieur gauche du rectangle, veuillez vous référer à l'image ci-dessous :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Je vais procéder de la même manière pour le coin droit, puis j'appliquerai ces styles de calque :

Ajustez le côté droit du rectangle de la même manière, puis ajoutez les styles de calque suivants : Les trois couleurs de l'éditeur de dégradé sont de gauche à droite Pour : #f4f4f4, #fefefe, #ffffff

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

<.>

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

🎜>

Étape 17

Avec l'outil Rectangle, je vais créer une autre forme et j'appliquerai ces styles de calque :

Étape 17

Créez un autre rectangle avec l'outil Rectangle

(36, 602, 950, 438)

, puis ajoutez les styles de calque suivants : Les couleurs de l'éditeur de dégradé à gauche sont : #f6f6f6, #ffffff, #ffffff

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 18

Avec Pen Tool, je vais créer ces triangles au bas de la forme créée à l'étape 15

Utilisez l'outil Plume pour créer deux triangles au bas du rectangle blanc

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Je vais appliquer un flou gaussien d'environ 40 pixels.

Ajouter aux deux triangles flou gaussien, paramètres : 40px
Mon résultat

Le résultat est le suivant :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 19

Ensuite, j'utiliserai les fichiers Premium. À partir d'Universal Vector Icons 2, j'ajouterai une ampoule et à partir d'ornements vectoriels dessinés à la main, j'utiliserai quelques ornements.

Étape 19

Suivant Pour ajouter un motif d'ampoule à partir d'Universal Vector Icons 2 à partir de Premium Files et quelques motifs à partir d'ornements vectoriels dessinés à la main.

Étape 20

Avec Type Tool, j'ajouterai du texte

Étape 20

Ajouter du texte avec Type Tool

Étape 21

Pour améliorer le titre « Nous donnons vie aux idées » J'ai utilisé 2 types de polices : Arial et Ariston. J'ai également utilisé 6 lignes (3 sur. à gauche et 3 à droite du titre). Pour ces lignes, j'ai appliqué ces styles de calque :

Étape 21

Pour le texte du titre We Bring Ideas to Life, utilisez deux polices. : Arial et Ariston. Taille de la police : 44px, ajoutez une ombre intérieure au texte du titre, les paramètres sont comme indiqué sur la figure, couleur : #bbb7b6.

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Ajoutez 6 lignes droites (3 à gauche du titre, 3 à droite du titre), et ajoutez le style de calque suivant à ces lignes :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Ombre intérieure : Couleur : #797979

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #fbfbfb

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 22

Avec Pen Tool je vais créer ces 2 triangles et j'appliquerai un gaussien Flou d'environ 10px

Étape 22

Créez 2 triangles avec l'outil Plume et effectuez un flou gaussien dessus avec les paramètres 10px

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 23

En haut des triangles créés à l'étape 21, avec l'outil Rectangle, je vais créer cette forme et j'appliquerai ces styles de calque.

Étape 23

Utilisez l'outil rectangle pour créer un rectangle (720, 518, 184, 56) au-dessus de l'ombre tout à l'heure, et ajoutez le style de calque suivant :

Référence exemple, il semble que ce devrait être l'outil rectangle arrondi. Le paramètre de rayon que j'ai donné est 10

.

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #e7e7e7

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 24

L'outil Rectangle étant toujours sélectionné, je vais créer une autre forme sur le dessus de la forme créée à l'étape 22, j'appliquerai ces styles de calque et avec l'outil Type, je vais ajouter du texte

Étape 24

Gardez l'outil Rectangle sélectionné, créez un nouveau rectangle au-dessus du rectangle précédent, ajoutez le style de calque suivant et ajoutez du texte

est un exemple de référence. J'utilise toujours des rectangles arrondis, je copie directement le calque tout à l'heure, puis je le transforme librement et je mets en retrait chacun de 14 pixels. La couleur et le style du texte sont les mêmes que ceux de l'étape 19.

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de dégradés, les couleurs sont : #f6f6f6, #ffffff

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 25

Parce que cette zone ce sera un jquery diaporama, nous devrons également créer les flèches. Je sélectionnerai l'outil Ligne avec un poids de 10 pixels, je dessinerai 2 lignes identiques, puis avec l'outil de transformation libre (Ctrl T), je les organiserai pour créer une flèche et j'appliquerai ce calque. styles également :

Étape 25

Puisque nous allons afficher le diaporama avec jquery, nous allons créer des flèches gauche et droite. Je vais sélectionner l'outil Ligne, définir un poids de 10 px, dessiner 2 lignes identiques, puis les disposer avec l'outil de transformation libre (Ctrl T) pour créer une flèche. J'utiliserai également les styles de calque suivants :

Ces deux flèches ont quand même demandé beaucoup d'efforts. La méthode actuelle consiste à utiliser d'abord l'outil Ligne droite pour tracer une ligne droite horizontale d'une longueur de 40 pixels. , Ctrl JDupliquez le calque et faites pivoter le calque dupliqué de 90 degrés dans le sens des aiguilles d'une montre. Ajustez légèrement ces deux lignes pour que les coins supérieurs gauches coïncident. Fusionnez ensuite les calques et faites-les pivoter de 45 degrés dans le sens inverse des aiguilles d'une montre. Puis Ctrl T Free Transform, la hauteur est ajustée à environ 94 % de la valeur d'origine. Ajoutez ensuite les styles suivants. Après avoir créé une flèche, Ctrl J duplique le calque et le retourne horizontalement pour obtenir une autre flèche. Ajustez ensuite la flèche à la position appropriée.

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #c7c1c1

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 26

Maintenant, je vais créer la zone de contenu. Je vais sélectionner l'outil Type et j'écrirai « Dernier projet ». J'ai appliqué ces styles de calque :

Étape 26

Créons maintenant la zone de contenu. Utilisez l'outil Texte pour ajouter le texte Dernier projet. Et ajoutez les styles de calque suivants :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Superposition de couleurs : Couleur : #ececec

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Étape 27

Avec Pen Tool je vais créer ces 2 triangles et j'appliquerai un flou gaussien d'environ 10px.

Sur ces triangles, j'ajouterai une image. Je répéterai le même processus et je créerai un total de 6 vignettes similaires.

Étape 27

Dessinez 2 triangles avec l'outil stylo, et ajoutez-y du flou gaussien, paramètre 10px

au dessus du triangle, ajoutez l'image. Répétez le même processus, en créant un total de 8 vignettes d'images similaires

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Voici mon résultat final :

PS网页设计教程III——在Photoshop中设计优雅的网站布局设计

Expérience :

1. Établir correctement le regroupement des couches :

Je ne l'ai pas ressenti avant. Après avoir terminé ces trois exemples, il y aura souvent des dizaines de calques, ce qui sera un casse-tête à éditer à l'avenir. Par conséquent, un nouveau groupe de calques est généralement créé en fonction de différentes zones, et les calques de cette zone sont fusionnés dans le même groupe. De cette façon, il sera beaucoup plus facile de le modifier à l’avenir. Du point de vue de la conception Web, il est généralement divisé en ces groupes : en-tête, navigation, fonctionnalité, contenu, pied de page, curseur, etc. Le regroupement de calques n'est pas nécessaire et n'embellira pas votre page Web, mais il peut simplifier votre futur travail de maintenance et d'édition

2. Ligne pointillée :

dans PS Il n'y a pas option pour définir le style de ligne. Par conséquent, ce n’est pas très pratique si vous souhaitez tracer une ligne pointillée. Cet article propose une méthode très astucieuse. Utilisez l'outil texte pour ajouter le texte "--------", puis ajustez l'espacement des caractères, ce qui permet de simuler rapidement et facilement l'effet d'une ligne droite.

3. L'effet du texte intégré :

À de nombreux endroits de cet article, des styles de calque sont ajoutés pour obtenir l'effet du texte intégré.

Pour plus de didacticiels de conception de sites Web PS III - Concevoir une mise en page de site Web élégante dans Photoshop Pour les articles connexes, veuillez faire attention au site Web PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn