Tutoriel PS Web Design VIII - Conception de mises en page inhabituelles 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 tutoriel, je vais vous montrer comment manipuler quelques formes simples, pour obtenir une magnifique mise en page. Comme vous l'avez vu, j'essaie de créer des mises en page inhabituelles. il est possible de créer également un autre type de mises en page (pas habituelles).

Dans ce tutoriel, je vais vous montrer comment faire preuve d'intelligence avec quelques formes simples pour obtenir une magnifique mise en page. Vous m'avez vu essayer de créer des mises en page inhabituelles. Je tiens à vous dire qu'il est possible de créer également un autre type de mise en page (pas celui habituel).

Commencez par créer un nouveau document (CTRL N) avec la taille suivante : 960 x 900 pixels, et avec la couleur de fond #5c7a02 Document (Ctrl N), taille : 960px*. 900px, couleur d'arrière-plan : #5c7a02

Sélectionnez l'outil Rectangle arrondi et définissez le rayon de votre coin sur 50 pixels

Sélectionnez l'outil Arrondi Outil Rectangle et définissez le rayon sur 50px

Avec cet outil je vais créer une forme au milieu de ma mise en page, puis je vais appuyez sur CTRL T et pendant que je maintiens la touche Maj enfoncée, je vais faire pivoter la forme. Pour le moment, la couleur que vous choisirez n'a pas d'importance, j'utiliserai des couleurs différentes pour chaque forme que je crée, car je veux vous montrer. où je placerai les formes.Maintenant, je vais changer la couleur de toutes ces formes en # 3c3427.En haut de ma mise en page, j'ajouterai une autre forme, mais cette fois j'utiliserai l'outil Rectangle.Je vais changer la couleur pour cela forme à # 3c3427, et en bas à droite de cette mise en page j'ajouterai une autre forme.

Créez un rectangle arrondi au milieu de la page et appuyez sur Ctrl T pour libérer la transformation, maintenez la touche Maj enfoncée et faites pivoter le rectangle arrondi. Je ne vous ai pas encore dit quelle couleur utiliser. Je vais créer des rectangles arrondis de différentes couleurs car je vais vous montrer comment je dispose ces rectangles arrondis. Maintenant, je vais changer la couleur de ces rectangles en #3c3427. En haut de la page, je vais ajouter un rectangle, cette fois en utilisant l'outil Rectangle. J'utilise toujours la couleur #3c3427 pour ce rectangle. Dans le coin inférieur droit de la mise en page, je vais ajouter un autre rectangle arrondi

. Le tutoriel était plus fastidieux, alors je l'ai modifié moi-même. Les étapes sont différentes, mais le résultat final est le même.

Créer un rectangle arrondi (432, 29, 480, 644), couleur : #3c3427

Créer un rectangle arrondi (0, 0, 485, 485), digression, (644-50*2)/1.414 50*2≈485

Appuyez sur Ctrl T, transformation libre, faites pivoter de 45 degrés, appuyez sur Entrée pour confirmer et quitter la transformation libre

Appuyez à nouveau sur Ctrl T, transformation libre, ajustez les paramètres sur (153, 29, 644, 644), appuyez sur Entrée pour confirmer et quitter la transformation libre

Appuyez sur Ctrl G pour fusionner les deux rectangles arrondis en un seul groupe.

Copiez le groupe, faites-le pivoter de 90 degrés dans le sens des aiguilles d'une montre et ajustez le groupe à la position appropriée (-190, 375)

Créez un rectangle arrondi (457, 677, 450, 500) dans le coin inférieur droit de la mise en page, la couleur est toujours #3c3427

Avec l'outil Rectangle arrondi, je vais créer 2 autres formes

Assurez-vous d'avoir sélectionné les deux calques dans votre palette de calques, puis appuyez sur CTRL T, et avec le pointeur de votre souris, faites pivoter la forme à gauche. Je placerai mes formes comme dans l'image suivante. Sur cette forme verte j'aurai mon bouton texte.

Dessinez deux rectangles arrondis avec des rectangles arrondis

Sélectionnez ces deux-là. calques, appuyez sur Ctrl T et utilisez votre souris pour faire pivoter votre rectangle. Disposez le rectangle comme indiqué ci-dessous, et au-dessus du vert, j'ajouterai quelques boutons de texte

Ou faites-le selon vos propres idées

Définissez d'abord le rayon du rectangle arrondi sur 70 et créez un nouveau rectangle arrondi d'une largeur de 970 px et d'une hauteur de 154 px. Couleur : #c7da8b. Appuyez sur Ctrl T, faites pivoter de -45 degrés et appuyez sur Entrée pour confirmer. Appuyez à nouveau sur Ctrl T, ajustez la position du rectangle arrondi à (-428, 59)

Copiez le calque, appuyez sur Ctrl T et ajustez la taille C'est 70% de la valeur d'origine et la position est (-216, 96). Changez la couleur en #a8ca01 avec un gros pinceau rond et lisse.

Créez un nouveau calque au-dessus de tous les calques, utilisez l'outil Pinceau, ajustez le pinceau en un énorme pinceau lisse

(la couleur est blanche, le la taille du pinceau est de 600px, la dureté : 10%) , ajoutez quelques points

(trois points)

sur le calque.

Ensuite, je vais changer le mode de fusion de ce calque en superposition

Changer le mode de fusion de ce calque en superposition

Voici mon résultat jusqu'à présent

Voici mon résultat

Maintenant, avec l'outil de type horizontal, je vais écrire du texte. La police que je vais choisir est Bookman Old Style.

Maintenant, avec l'outil de type horizontal, je vais écrire du texte. choisir est Bookman Old Style .Italic.

Le texte du haut Bienvenue sur notre site Web et le texte du bas Les services sont définis avec les polices suivantes

Pour le texte du titre Grafpedia dans le bloc vert à gauche, utilisez les paramètres de police suivants et ajoutez un style de calque

Le texte du menu Accueil, Produits, Portfolio et Contact dans le bloc vert à gauche sont définis avec le texte suivant :

Les deux colonnes de texte incliné Portfolio et Dernières Nouvelles sont fixées avec le texte suivant :

Le texte de la barre de menu à droite, Entreprise, Produits, Programme, Contactez-nous, couleur : noir. Le paramètre de texte est le suivant :

Le paramètre de texte d'un morceau de texte sous Bienvenue sur notre site Web est le suivant suit :

Le reste du texte du paragraphe est défini comme suit :

Le résultat final est le suivant :

Maintenant, je vais ajouter quelques images de mon derniers tutoriels dans la partie médiane de ma mise en page. Je vais découper quelques images rondes de mes tutoriels précédents.

Je vais ajouter quelques images des tutoriels précédents au milieu de la mise en page, je vais découper quelques images rondes de mes tutoriels précédents. 🎜>

En haut du site j'ajouterai une autre forme arrondie 142, 524, 40), le rayon est de 20px, la couleur est blanche

Je vais sélectionner l'outil Ligne, et avec une ligne fine (1 pixel) je vais créer deux lignes entre mes boutons de texte

Sélectionner l'outil Ligne et définissez l'épaisseur sur 1 px, puis créez deux lignes entre mes boutons de texte(une noire, une blanche)

Je sélectionnerai les deux calques de lignes dans ma palette de calques, puis j'appuierai sur CTRL E (pour fusionner les calques en un seul). sélectionnez l'outil Gomme, et j'utiliserai un pinceau mécanique doux d'une taille comprise entre 200 et 300 pixels. Ensuite, je supprimerai la partie droite de la ligne Ctrl E (fusionner les calques), sélectionnerai l'outil Gomme, sélectionnerai un cercle aux bords doux. avec une taille comprise entre 200 et 300px

(choisir 250 est plus adapté)

, je supprimerai la moitié droite de la ligne droite

Je supprimerai également la partie gauche, et je ferai quelques doublons après ce calque. Avec l'outil Déplacer ou avec votre touche fléchée je déplacerai les calques dupliqués vers le bas.

Je supprimerai également la partie gauche. moitié, puis dupliquez le calque. Utilisez l'outil de déplacement pour déplacer ces calques vers la position appropriée

Avec la même technique que ci-dessus, j'ajouterai également quelques lignes sur d'autres parties du mise en page . Vous pouvez modifier le mode de fusion de ce calque pour le superposer.

Utilisez la même technique pour ajouter des lignes droites à d'autres parties de la mise en page. Changez le mode de fusion de ces calques de lignes en Superposition

Je vais créer un nouveau calque juste sous mes images rondes, je sélectionnerai l'outil Pinceau et. avec un pinceau doux et rond, je ferai un point sur ma mise en page à l'endroit suivant. Veuillez définir votre couleur de premier plan sur noir.

Créez un nouveau calque sous l'image du cercle. Sélectionnez l'outil Pinceau, sélectionnez un outil cercle aux bords doux et ajoutez un gros point

comme indiqué ci-dessous (définissez le rayon sur 360 px, dureté 20 %)

. Choisissez le noir comme couleur de premier plan.

Sélectionnez l'outil de sélection rectangulaire et créez une sélection comme la mienne

<.>

Votre sélection doit être juste entre les lignes horizontales que vous avez placées il y a quelques étapes. Assurez-vous maintenant d'avoir sélectionné le bon calque (avec le dessin au pinceau noir), et appuyez maintenant sur CTRL I, ou allez sur Image. > Ajustements > Inverser. Votre mise en page ressemblera à celle-ci.

Votre zone de sélection est marquée par les deux lignes horizontales faites précédemment. Sélectionnez le gros calque de point noir avant, appuyez sur Ctrl I ou cliquez sur : Image > Ajustements > Inverser, votre mise en page ressemblera à ceci :

Appuyez sur CTRL D si la sélection est toujours active, et changez maintenant le mode de fusion pour ce calque sur Superposition, et vous pouvez également réduire la valeur d'opacité à 40 %.

Appuyez sur Ctrl D pour désélectionner, changez le mode de fusion du calque en Superposition et l'opacité à 40 %

Voici à quoi ressemblera mon diaporama simple

C'est l'effet de la barre coulissante de ma photo

Maintenant je vais ajouter quelques boutons ronds

Je vais ajouter des boutons ronds sur les côtés gauche et droit (le bouton gauche ajoute Style de calque de lueur intérieure, bouton à droite pour ajouter des styles de calque de lueur intérieure et de trait)

Couleur de trait : #4e4c48

Au milieu de ma mise en page j'ajouterai également une forme ronde

Au milieu de ma mise en page, ajouter Un cercle (avec trait, couleur de remplissage : #5a4d3a, couleur de trait : #b9f308)

Voici ma mise en page finale

Voici mon résultat final

Post-scriptum :

Une telle mise en page est en effet rare

Les points forts de ce tutoriel sont :

1. Utilisez l'outil gomme pour obtenir l'effet de dégradé

2. Utiliser la fusion des calques L'option est la superposition pour obtenir. points forts

3. L'effet d'inversion dans le tutoriel est particulièrement incroyable.

Pour plus de didacticiels de conception de sites Web PS VIII - Concevoir des mises en page inhabituelles dans Photoshop Pour les articles connexes, veuillez faire attention au site Web PHP chinois !