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.
Pour commencer, ouvrez un nouveau document et remplissez l'arrière-plan avec la couleur suivante : #2b2b2b
Tout d'abord, créez un nouveau document, Taille : 1100px*720px et remplissez le fond de couleur : #2b2b2b
L'étape suivante consiste à remplir le fond avec un motif . Vous pouvez ajouter le motif via les styles de calque. Veuillez noter que ce motif se trouve dans le pack suivant de 815 modèles de pixels Photoshop
L'étape suivante consiste à remplir l'arrière-plan avec un motif. Vous pouvez ajouter des styles de superposition de motifs. Veuillez noter que ce motif se trouve dans 815 modèles de pixels Photoshop.
si vous n'avez pas d'abonnement UDT vous pouvez créer ce modèle seul Créez un nouveau document : 2px par 2px avec un fond transparent ajoutez un petit point de 1 pixel. . Ensuite, allez dans Modifier > Définir le motif. Choisissez un nom et cliquez sur OK. Vous pouvez ensuite utiliser le motif dans votre panneau de style de calque.
Si vous n'avez pas de compte UDT, vous pouvez créer le motif. toi-même. Nouveau document : 2px*2px, avec fond transparent. Utilisez l'Outil Crayon pour ajouter un point de 1 px. Cliquez ensuite sur : Modifier > Définir le modèle . Donnez-lui un nom et cliquez sur OK. Ensuite, vous pouvez utiliser ce motif dans votre panneau Styles de calque
Avec l'outil Rectangle arrondi, veuillez créer une forme comme dans l'outil image suivante. Cliquez sur l'image suivante pour mieux voir , 226), couleur : #000000
Sur le côté gauche, je vais créer une autre petite forme avec le même outil.
(32, 184, 70, 81)
Ensuite, j'ajouterai le calque suivant styles.
Ensuite, définissez le style de calque comme indiqué ci-dessousCouleur de l'éditeur de dégradé : #010101, #b8b8b8, #4c4c4c
Avec le même outil, je vais créer une nouvelle forme, puis j'utiliserai l'outil de perspective pour modifier votre apparence. Vous pouvez trouver l'outil de perspective dans Édition > Transformer > Outils de perspective pour modifier son apparence. Vous pouvez trouver l'outil de perspective en cliquant sur :
Modifier > Transformer > Perspective. Ajoutez un style de superposition de dégradé à ce calque
Couleurs de l'éditeur de dégradé : #000000, #343434
Dupliquez la première forme et accédez à Filtre > Bruit. Assurez-vous de changer le mode de fusion de ce calque en Superposition (vous pouvez trouver le mode de fusion de superposition en haut de votre palette de calques – Vous verrez probablement Normal. Si vous utilisez le menu déroulant, vous pouvez trouver la superposition)
Copiez le rectangle arrondi précédent,
convertissez en objet intelligent
, puis cliquez sur : Filtre> Modifiez les options de fusion de ce calque en Superposition. (Vous pouvez trouver les options de fusion en haut de votre panneau de calques - ce que vous voyez habituellement est Normal. Vous pouvez voir Superposition lorsque vous cliquez sur la liste déroulante)
Avec l'outil Ligne, je vais créer deux lignes fines
<.>Ensuite, je vais dupliquer les deux lignes et j'irai dans Filtre > Flou > Flou gaussien. Vous pouvez jouer avec les paramètres jusqu'à ce que vous obteniez le même résultat que le mien. filtre, mais de cette façon, vous n'apprendrez pas ce que fait cet outil.
Copiez ensuite ces lignes et cliquez sur :Filtre> Flou gaussien
. Vous pouvez vous référer aux paramètres ci-dessous jusqu'à obtenir un effet similaire au mien. Je vais vous donner quelques paramètres de filtre de flou adaptés, mais vous n'êtes pas obligé de suivre strictement cette étape
Fusionnez les calques des deux lignes droites épaisses à l'arrière et pixellisez-les. Et cliquez sur : Filtre > Flou > Flou gaussien . Et placez le nouveau calque sous les deux couches d'origine de deux minces Fusez ces trois couches en groupe et sélectionnez le groupe, cliquez: Calque> Masque de calque> Afficher tout pour ajouter un masque de calque. Sélectionnez l'outil de gradient, définissez le gradient comme indiqué ci-dessous et ajoutez un gradient au groupe Sur le côté gauche, je vais créer un bouton en retrait. J'utiliserai l'outil Rectangle arrondi, puis j'ajouterai quelques styles de calque. J'ai utilisé un bouton rectangulaire arrondi , couleur: # d7d7d7 et j'ai ajouté quelques styles de calque Polygon pour ajouter un petit triangle au milieu du bouton, la couleur est Black, le même style que le rectangle arrondi Bellow, vous pouvez voir les styles de calque. ce style de calque. Après avoir vu le style de calque. Veuillez noter que vous pouvez télécharger 18 000 styles de calques Photosho ici. Vous pouvez trouver ces styles de calque dans voici mon résultat jusqu'à présent. Nouveau rectangle blanc, utilisez la perspective pour la transformer en forme suivante) et ajustez-la à la taille appropriée Je vais dupliquer tous les calques du navigateur de diaporama, et je les placerai sur le côté droit. Je vais dupliquer tous les calques du navigateur de diaporama, et je les placerai sur le côté droit. . Fusionnez ces calques en un groupe et convertissez-les en objets intelligents, puis dupliquez les calques, retournez-les horizontalement et déplacez-les vers la bonne position sur la droite ) Au milieu, je vais créer une forme simple. Cliquez sur l'image pour voir l'image en taille réelle. Au milieu, je vais créer une forme simple 🎜> (142, 165. , 816, 136), Couleur : #2a2a2a Avec l'outil stylo, je vais créer une forme comme celle-ci. Créez la forme suivante Utilisez l' Outil Rectangle pour en créer un nouveau. Un rectangle (142, 135, 816, 30) Appuyez sur Ctrl T pour transformer librement, cliquez avec le bouton droit pour sélectionner la perspective et faites glisser le point du coin supérieur gauche avec la souris de 40 px vers la gauche (vous pouvez ouvrir le panneau d'information en même temps pour garantir le déplacement de 40 px) Outil Rectangle arrondi Cliquez avec le bouton droit sur le calque à l'intérieur de votre palette de calques, choisissez Pixelliser la forme, puis supprimez la partie inférieure de la forme. Cliquez avec le bouton droit sur le calque, sélectionnez Pixelliser le calque et supprimez la partie inférieure de la forme (Vous pouvez utiliser l'outil de sélection rectangulaire pour sélectionner une sélection rectangulaire, transformer la sélection et ajuster la valeur Y de la sélection à 135) Dupliquez ce calque et cliquez sur : Filtrer > Ajouter du bruit . Définissez les paramètres que vous souhaitez pour définir le bruit dans la fenêtre, mais n'en définissez pas trop Avec l'outil Ligne, vous pouvez ajouter une simple ligne horizontale de 1 pixel. J'utiliserai la couleur suivante : #8d8d8d Avec l'outil Ligne droite, vous pouvez ajouter une ligne horizontale de 1 px（102，134，896， 1）, les couleurs que j'ai utilisées : #8d8d8d Au bas de ce diaporama, j'ajouterai une autre forme. Elle a été réalisée. avec l'outil Plume. Ajoutez une autre forme en bas du curseur d'image. J'ai utilisé l' Outil Plume pour copier directement le trapèze inversé ci-dessus, le retourner verticalement, le déplacer vers la position appropriée et décocher l'inverse dans la superposition de dégradé Ensuite, je vais créer une nouvelle forme. Cette dernière a été créée avec. Outil rectangle. Ensuite, je vais utiliser l'Outil Rectangle pour créer un nouveau rectangle (102, 331, 896, 6) avec la couleur : #707070 . Et utilisez l'outil ligne droite pour ajouter à nouveau une ligne horizontale (102, 331, 896, 1), couleur : #8d8d8d En haut, j'ajouterai un logo texte simple. Je vais créer un logo texte simple en haut Le texte original n'introduit pas la police, j'ai donc trouvé un. police et couleur similaires : #383838 Pour que le texte apparaisse en ligne, ajoutez deux styles de calque Sur le côté droit de l'en-tête, j'ajouterai un menu simple . Un menu commun doit être ajouté à droite de la zone d'en-tête. La police est comme indiqué ci-dessous et le style est le même que celui du LOGO ci-dessus Sous chaque menu de texte, j'ajouterai quelques lignes simples ci-dessous. . La couleur des lignes droites est toujours : #383838 Ensuite avec l'outil Ellipse je vais créer un petit cercle sur. en haut de chaque ligne. Le style du calque est cohérent avec le texte du menu Également sous le logo, j'ajouterai une jolie forme ronde. Cela a été réalisé avec l'outil Rectangle arrondi, et j'ai utilisé le style de calque en retrait que j'ai utilisé plusieurs fois sur cette mise en page liée à l'iPhone. Et ajoutez un magnifique rectangle arrondi sous le LOGO, en utilisant le Et ajoutez une ligne droite verticale Avec quelques lignes, je vais essayer de combiner toutes les lignes verticales. Avec quelques lignes droites, je vais essayer de relier toutes les lignes droites verticales. Cette étape est également extrêmement simple, je vais donc l'ajouter ici complètement Ouvrez le panneau d'information (appuyez sur F8 pour afficher le panneau d'information), utilisez pour tracer une ligne droite inclinée, couleur : #383838, ΔX=24, ΔY=18, et déplacez la ligne vers la position appropriée. Ajoutez le texte du menu à la ligne en utilisant le même style de calque Dupliquez la ligne inclinée et retournez-la horizontalement. Copiez-les plusieurs fois et déplacez-les vers la ligne droite sous chaque texte de menu Utilisez l' Outil Ligne Maintenant je vais ajouter quelques icônes iPhone créées par JackieTran Maintenant, je vais ajouter certaines des icônes iPhone de JackieTran Sous chaque icône J'ai placé une ombre simple. Pour créer l'ombre, c'est très simple. Sélectionnez l'outil Rectangle arrondi et créez une forme sombre, puis ajoutez un filtre de flou. Ajoutez quelques ombres simples sous chaque icône. Créer ces ombres est très simple. Sélectionnez l' Outil Rectangle arrondi pour créer une forme sombre, puis ajoutez un filtre de flou Remarque : après À cette étape, j'ai trouvé que les boutons gauche et droit initialement créés étaient trop brusques. Je l'ai donc modifié, en changeant l'opacité de la ligne rouge à 45 %, et en réduisant le halo blanc, comme indiqué ci-dessous : Ici, je peux apprécier les avantages des objets intelligents. Modifiez le côté gauche et changez le côté droit en même temps forme sombre. J'ai utilisé l' pour créer à nouveau un rectangle arrondi sombre Si vous n'êtes pas doué pour l'utiliser. l'outil Plume, vous pouvez suivre les étapes ci-dessous pour le compléter Utilisez l'outil Rectangle pour en créer un nouveau Un rectangle (142, 363, 816, 15)
Appuyez sur Ctrl T pour transformer librement, cliquez avec le bouton droit et sélectionnez la perspective, faites glisser le coin inférieur gauche pour modifier la largeur. Pour 896 Vous trouverez ci-dessous les styles de calque que j'ai utilisés. La couleur est changée en : #555555, ajoutez ensuite quelques styles de calque utilisés couleurs de l'éditeur de dégradé : #8b8b8b, #262626 Je vais créer une autre forme comme dans l'image suivante. Cliquez sur l'image pour mieux voir le résultat. Suivez L'image ci-dessous crée un autre rectangle arrondi Voici le style de calque que j'ai utilisé pour la dernière forme. C'est J'ai ajouté un style de calque à la forme Couleurs de l'éditeur de dégradés : #242424, #b8b8b8, #4c4c4c Je vais dupliquer ce calque et j'ajouterai encore une fois du bruit Je vais dupliquer ce calque, convertir en objet intelligent et ajouter du bruit Ensuite, avec l'outil Stylo, je créerai la forme suivante. Veuillez utiliser le même style de calque que ci-dessus. Utilisez le même style de calque que ci-dessus Créer un nouveau coin arrondi avec l'outil Rectangle arrondi Créez un rectangle d'un rayon de 12px
Dupliquez cette forme et sélectionnez les deux calques dans votre palette de calques. Une fois les deux calques sélectionnés, appuyez sur CTRL E pour fusionner le calque en un seul avec l'outil Gomme, supprimez-le. partie inférieure de la forme. Assurez-vous d'avoir sélectionné un pinceau rond et lisse. Dupliquez la forme et sélectionnez les calques dans le panneau Calques. Après avoir sélectionné ces calques, appuyez sur CTRL E pour les fusionner en un seul calque. Utilisez l'outil Gomme pour effacer le bas de la forme. Assurez-vous de choisir un pinceau rond et lisse Avec l'outil Rectangle arrondi, je vais créer une nouvelle forme. J'utiliserai les mêmes styles de calque en retrait 405, 884, 250) Voici les styles de calque une fois de plus. Je vais créer une ombre simple Pour créer cette ombre, je vous recommande de créer un nouveau calque, placez-le sous. la grande forme, puis avec l'outil Pinceau, commencez à dessiner très doucement jusqu'à ce que vous soyez satisfait du résultat. Je vais créer une ombre simple. Pour créer une ombre, vous pouvez créer un nouveau calque, le placer sous la forme plus grande, puis utiliser l'outil Pinceau pour peindre une ombre lisse jusqu'à ce que vous en soyez satisfait. Je vais ajouter une forme sombre et du texte. Je vais ajouter une forme sombre et du texte <.> La couleur du rectangle arrondi en première ligne : #191919, la couleur du texte en première ligne : #b0b0b0 Le rectangle arrondi en la deuxième ligne Couleur : #222222, la couleur du texte de la deuxième ligne : #b7b7b7 La couleur du rectangle arrondi de la troisième ligne : #292929, la couleur du texte dans la troisième ligne : #bcbcbc Ajoutez le même style de calque à chaque rectangle que le texte du menu ajoutez la superposition de couleurs #b0b0b0 à la première rangée d'icônes, la superposition de couleurs #b7b7b7 à la deuxième rangée d'icônes, et ajoutez la superposition de couleurs #b7b7b7 à la troisième rangée d'icônes Superposition de couleurs pour #bcbcbc 
Ajoutez les styles de calque suivants à ce calque
Créer un rectangle arrondi 
Arrondi Outil Rectangle
J'utiliserai l'outil Plume pour créer une forme avec un joli aspect en perspective. >Outil Plume
(91). , 383, 918, 290) 
Réglez le remplissage sur 0 %
Pour plus de tutoriels de conception de sites Web PS XXIII - Création d'un site Web pour vendre des applications iPhone 5, veuillez faire attention au site Web PHP chinois pour les articles connexes !
securefx ne peut pas se connecter
navigateur wap
La différence entre les services distribués et les microservices
Quelles sont les technologies de base nécessaires au développement Java ?
tutoriel pascal
Quels sont les types de données ?
Comment résoudre le problème selon lequel Ethernet ne peut pas se connecter à Internet
Que signifie le contexte ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
