Tutoriel PS Web Design XXIII - Créer un site Web vendant des applications iPhone 5

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

. Cliquez sur l'image ci-dessous pour la voir plus clairement

Sur le côté gauche, je vais créer une autre petite forme avec le même outil.

Utilisez Utilisez le même outil pour ajouter un autre petit rectangle arrondi à gauche

(32, 184, 70, 81)

Ensuite, j'ajouterai le calque suivant styles.

Ensuite, définissez le style de calque comme indiqué ci-dessous

Couleur 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

Cela a pris beaucoup de mal pour faire cette étape, mais j'ai trouvé que c'était impossible de le faire juste en suivant ses pas. Cet effet apparaît. Alors, je l'ai corrigé et ajouté moi-même.

Ne copiez pas ces deux lignes droites, utilisez l'outil Ligne droite, définissez la largeur sur 3 pixels et tracez deux autres lignes droites rouges sur les lignes droites d'origine

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

(45, 212, 22, 25)

, couleur: # d7d7d7 et j'ai ajouté quelques styles de calque

Utilisez l'outil

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)

J'utiliserai le filtre Blur, puis je ferai glisser La couche sous les précédentes.

Pour y appliquer un filtre flou, faites glisser la couche sous les précédentes,

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

. Cliquez sur l'image pour la voir en taille réelle

Avec l'outil stylo, je vais créer une forme comme celle-ci.

Avec l'outil stylo, je vais créer une forme comme celle-ci.

Créez la forme suivante

Si vous n'êtes pas doué pour utiliser l'outil stylo, vous pouvez utiliser la méthode 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)

Pour ce calque, j'ajouterai les styles de calque suivants.

Ajoutez les styles de calque suivants à ce calque

Couleurs de l'éditeur de dégradé : #707070 et #262626

Avec l'outil Rectangle arrondi, je vais créer une forme comme la suivante

Outil Rectangle arrondiCréer un rectangle arrondi

comme indiqué ci-dessous (102, 41, 896, 126), définir le rayon sur 10 px et couleur : #707070

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 cette forme et allez dans Filtre > Ajouter du bruit > le bruit que vous voulez, mais assurez-vous qu'il n'est pas trop fort.

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

verticales

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 Arrondi Outil Rectangle

, et j'ai utilisé le style de calque intégré, que j'ai déjà utilisé plusieurs fois sur ce site de vente d'iPhone.

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

Utilisez l'outil Ligne

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

pour dessiner une ligne horizontale line Lignes droites, connectez ces lignes droites, coloriez : #383838 et ajoutez le même style de calque que les lignes droites inclinées

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'

Outil Rectangle arrondi

pour créer à nouveau un rectangle arrondi sombre

(80, 358, 940, 30), définissez le rayon sur 6px et la couleur : #010101

J'utiliserai l'outil Plume pour créer une forme avec un joli aspect en perspective. >Outil Plume

Créer un magnifique trapèze inversé

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 (91). , 383, 918, 290)

. Cliquez sur l'image pour voir plus clairement

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

Pour ceux qui ne savent pas utiliser l'outil Plume, vous pouvez vous référer aux étapes suivantes

Créer un nouveau coin arrondi avec l'outil Rectangle arrondi Créez un rectangle d'un rayon de 12px

Cliquez avec le bouton droit sur le calque et sélectionnez Pixelliser le calque. Utilisez l'outil de sélection rectangulaire pour sélectionner la moitié inférieure du rectangle arrondi, appuyez sur la touche Suppr pour supprimer, puis appuyez sur Ctrl D pour désélectionner

pour ajouter et utiliser le même style de calque que le rectangle arrondi précédent, décochez l'option inverse dans le style de dégradé et modifiez la couleur sur le côté droit de l'éditeur de dégradé pour : #828282

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

Après avoir utilisé mon processus précédent, cette étape peut être ignorée

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)

. Je vais utiliser les mêmes styles de calque en ligne

Voici les styles de calque une fois de plus.

Réglez le remplissage sur 0 %

et ajoutez le style de calque suivant lorsque vous l'avez utilisé plusieurs fois : 3e3c3d

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

Ensuite, j'ajouterai quelques icônes.

Ensuite, ajoutez quelques icônes,

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

Ci-dessous, vous pouvez voir les icônes placées sur le côté droit, et en même temps vous pouvez voir quelques lignes entre chaque catégorie. 🎜>

Ci-dessous vous pouvez voir le résultat final.

Ci-dessous vous pouvez voir. le résultat final. J'espère que cette mise en page vous plaira

Post-scriptum :

Félicitations à ce designer pour son utilisation intelligente de la couleur pour obtenir un effet 3D . Le concepteur a utilisé les couleurs et les compétences PS à sa guise. Le traducteur a dû réfléchir attentivement à certaines étapes sans les fichiers sources. Heureusement, il avait de l'expérience dans les didacticiels précédemment traduits et certaines étapes pouvaient encore être résolues par restauration ou approximation.

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 !