Vous êtes nombreux à visiter le blog dorénavant, même si c’est encore moins exprimé en commentaire…

Pour augmenter encore le nombre de vos visites une nouvelle rubrique “Design” est crée…

Sans transition… Aujourd’hui je vais reprendre un design par Fabio étape par étape, nous allons voir comment réaliser une template web en utilisant des outils genre : Eraser, Motifs de fond (pattern), outil Trait, shapes, effet 3D…

je vais essayer de rendre les choses plus faciles pour que ce tuto soit accessible par un designer niveau “Débutant +”

Vous pouvez jeter un coup d’oeuil sur le rendu final en cliquant l’image ci dessous..

Vous aimez bien ? on commence alors (Autrement.. on commence de toute façon)

Etape 1:

Créons un nouveau document avec 1000x 750x, double clique sur le calque de fond, et dans Incrustation en Couleur choisissez Marron foncé (#3a0101)

Etape 2

Affichez les règles ( Affichage ->Règles) sur votre feuille, et ajoutez quelques repères (Affichage -> Nouveaux repère). Créer 2 repères horizontaux, le premier à 30px et le deuxième à 250px, Après, ajouter 2 repères verticaux à 100px et à 900px (voir la photo ci dessous)

Etape3

En utilisant l’outil rectangle (U) . créez un rectangle en se basant sur les repères que vous avez tracé, renommez le calque “Header“. N’oubliez pas de choisir la couleur blanche..

Etape 4

Choisissez la couleur noir, et avec l’outil Ellipse (U) dessinez la forme qui sera par la suite l’ombre. Dessinez là en sorte que ça dépasse un peu le rectangle blanc (voir photo), renommez le calque “Shadow” et positionnez le sous le calque “Header”.

Après cela, Convertissez le calque Pour les filtres dynamiques, Appliquez par la suite un Flou Gaussian de 4px et réduisez l’opacité du claque à 60 %. (cliquez image)

Etape 5

Sélectionnez le calque “Header“, clique droit -> Option de fusion ->Incrustation en degradé. Changez le style à Radial, j’ai utilisé la couleur rouge…

Etape6

Sur un nouveau calque que vous nommez “hDivider” sélectionnez l’outil Trait (U) choisissez la couleur la plus claire dans le header, et dessinez une ligne horizental, n’oubliez pas de presser la touche “maj” en dessinant, ça vous aide à garder une forme straight.

Choisissez les Option de fusion du nouveau calque et appliquez ces options

Claque -> Masque de fusion -> tout faire apparaitre. Ajoutez ensuite un masque de fusion au claque en cliquant l’icône en bas de la fenêtre de calques, après cela, et en utilisant l’outils Eraser (E), (opacité 50%, Flux 50%) effacez les deux parties extrêmes à droite et à gauche..

Voila comment ça doit avoir l’aire

Etape 7

Créez le menu avec l’outil Texte (T) Utilisez la couleur blanche pour le texte.. sélectionnez les calques et regroupez les, renommé le calque en White Links.

Répétons les réglages de l’étape 6 pour avoir un jolie ombre porté qui donne un effet 3D.. cliquez la photo

Etape 8

Vous vous rappelez comment nous avons crée le hDivider dans l’étape 6 , nous allons utilisez la même technique, pour créer des séparateurs verticaux cette fois..

Nommez le calque (vous deviez regroupé toute les lignes puis appliquez les reglages de l’etape 6) vDivider

Enregistrez ce motif et ouvrez le, cliquez Edition -> utilisez comme motif , nommez le “WebPattern“.

Maintenant de retour à notre fenêtre principale, dupliquez le calque Header et renommez le “Pattern“, dans ces options de fusion, décochez Incrustation en degradé et coché Incrustation de motif, Choisissez le WebPattern que nous venons de créer et mettez Produit pour le mode de fusion ( voir l’image)

De retour à la fenêtre des calques, vous choisissez un mode de fusion Produit..

Etape finale

maintenant, Nous pouvons ajouter un logo, vous tapez ce que vous voulez, vous appliquez quelques effets.. bref, vous avez compris le principe..

Conclusion

Vous n’êtes pas obliger de suivre mes étapes et appliquez mes réglages à la lettre …En design, il y a toujours plusieurs façon de faire une chose..

N’hésitez pas à demander des clarifications, ou juste à me dire “merci Vlad’, t’es trop fort ! “