32
Créer un header class en utilisant des motifs évolués.
Je vais vous montrer comment créer un header pour site internet class en maitrisant les nuances de couleurs et les motifs.
Bonjour à tous, il y a longtemps que je préparais ce tuto et aujourd’hui il est fin prêt :) : Créer un header class en utilisant des motifs évolués.
Tout d’abord le psd :
- Fichier source Photoshop
- Clic ici pour télécharger le fichier source photoshop utilisé dans ce tutorial
Et le motif téléchargeable ici.
ETAPE 1
Création du document :
J’ai travaillé sur un petit format, donc créez déja un nouveau document
500x500px Fond transparent !
ETAPE 2
Création du fond :
Tout d’abord, rennomez ce premier calque en : « fond », puis remplissez le avec le pot de peinture de la couleur : AC0000
Créez un nouveau calque et réglez votre dégradé en mode radial en ayant comme couleurs celles-ci :
Puis cliquez sur le bouton inverser (un bouton très pratique pour les fainéants ^^) et tracez un dégradé du centre du document à l’extrémité du document.
Vous obtenez normalement ceci en baissant l’opacité du calque à 40%
Bien ; maintenant insérez-y le motif : ouvrez le document téléchargé sur deviantart, lisez le .psd, effacez le dossier Layout et le calque « Fond », maintenant faîtes :
Edition -> Utiliser comme motif entrez lui le nom que vous voulez et faîtes ok.
Revenez sur notre document et créez un nouveau calque. Maintenant faîtes Edition->Remplir->Motif-> Selectionnez votre motif et Ok.
Vous obtenez normalement ça :
Joli hein !! 
ce tuto est peut être long mais le résultat final va vous étonner 
ETAPE 3
Création barre de menu :
Créez un nouveau calque. Tracez une barre qui sera notre futur header. Sur le psd copiez le style de calque du calque 3 et collez le sur le nouveau calque de notre document. Vous obtenez normallement ça :
Maintenant créez un nouveau calque et tracez un rectangle de toute petite largeur sur le Header ....n’hésitez pas à zoomer
Appliquez lui le style de calque du calque 4, vous obtenez normalement ça :
ETAPE 4
Taper le texte :
Tapez votre texte (ici j’ai utilisé la police d’écriture Arial).
ETAPE 5
Petites barres de séparation. Tracez de petites barres de séparation entre les différents mots : Pour cela, tracez des petits rectangles de largeur minimale et dupliquez ce calque pour séparer chacun des mots. Baissez l’opacité des calques à 11%
ETAPE 6
Menu animé.
Tracez un petit rectangle sur un bouton du menu puis baissez son opacité à 7%, cela donne l’effet d’un site animé.
Tracez un rectangle au-dessus de votre barre de menu puis appliquez lui le style de calque de mon calque forme 1, vous obtenez normalement ça :
Maintenant tapez votre texte ou logo ; à vous de voir, et le tuto est fini
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 46 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
-
13 janvier 2008 19:03, par Maxime
Ha je voulais le faire ce tuto avec les patterns... Tant pis
Très sympa
Répondre -
-
14 janvier 2008 14:06, par milo13
j’ai suivi ton tuto, en y ajoutant quelques modifications
Répondre
-
-
14 janvier 2008 09:29, par Wonka
Moi j’aurais quelques petites chose à redire, mais le resultat final est vraiment sympa alors je me tais
Répondre Bravo à Fiziko qui est très fort C’est pas pour rien qu’il écris sur Wonka :p-
14 janvier 2008 17:54, par Fiziko
Merci beaucoup
Répondre prochain tuto :
Créer une carte de visite il ne me reste plus qu’à le rédiger :p-
15 janvier 2008 09:43, par Wonka
En sachant qu’il y en as déjà un sur les cartes de visites
Répondre Pas de problème pour en faire un autre, mais tu peux faire une correspondance entres les deux !
-
-
-
16 janvier 2008 16:16, par Crimson Orpheo
Ce qui m’intéresserai beaucoup comme tuto ce serai un tuto sur la création de tapisseries en motif, comme celle sur ce tuto. ça donne un bon rendu avec du moderne et j’aimerai vraiment apprendre à faire mes propres motifs de tapisseries. Un tuto comme celui là est-il prévu wonka ?
Répondre -
18 janvier 2008 11:16, par Black bot
Bonjour et tout d’abord félicitation pour ce super tuto, simple mais efficace !
En revanche si je devais être pointilleux, je dirais que sur le bas de la « tapisserie » il y a la marque de répétition du motif qui est trop petit pour notre webdesign, et je n’imagine pas pour un 600 par 800 ou même 1024*768...
Sinon très bonne technique !
Répondre-
-
25 janvier 2008 17:50, par pacooufra5913
merci j’ai pas utilissé le motif mais bon^^mon resultat
Voir en ligne : http://fra5913.free.fr
Répondre
-
-
-
29 janvier 2008 20:10, par Sébastien
Répondre
Voila mon header
Je suis débutant sur photoshop
Mais j’aime sa
J’envisage de devenir créateur graphique plus tard
Merci.-
4 février 2008 21:02, par Fiziko
Très jolie à part la police d’écriture Arggg
Répondre
Sa ne se marie pas du tout je trouve
Mais continue à progresser c’est de la motivation qu’il faut pour réussir
-
-
1er février 2008 21:01, par susu035
Bon tuto ! Ce n’est pas très détaillé dans les explications mais avec le PSD, c’est parfait !
Bien joué...
Répondre -
4 février 2008 01:02, par jsidf
Je suis bloqué l’étape 2 (je ne connais rien paintshop pro). Comment fait-on pour Regler le dégradé . « Créez un nouveau calque et réglez votre dégradé en mode radial en ayant comme couleurs celles-ci »
Merci
Répondre-
4 février 2008 20:59, par Fiziko
Le radial, c’est un petit carré près du dégradé, il y a un point blanc au centre.
Répondre
-
-
4 février 2008 17:55, par nigga_h
voici un header que je viens de reakiser que penser vous http://
Répondre
-
4 février 2008 21:00, par Fiziko
Pas trop mal
Répondre , par contre le motif est de très mauvaise qualité :s -
-
-
3 mars 2008 17:43, par SB inc.
voila pour moi
ce tuto m’a vraiment donné envie d’me faire un site, vous auriez un liens sympa pour la conception de site ?
encore merci ! =)
Répondre-
9 mars 2008 18:15, par Fiziko
Joli, pour le site je te conseille http://www.siteduzero.com/
Répondre-
10 mars 2008 09:56, par Wonka
Même conseil ce site est vraiment une mine d’or pour ceux qui veulent débuter avec les langages de programmation tel que HTML PHP ou javascript ! Bonne chance à toi !
Répondre
-
-
-
17 mai 2008 18:00, par hakim
Voici donc ma première contribution au site ... Qu’en pensez vous ?
Répondre
-
-
18 mai 2008 13:23, par hakim
Je ne comprends pas pourquoi ma contribution avait été effacé, je la repost donc !
Répondre
-
-
-
31 août 2008 22:49, par Bartimeus
Voula ce que j’ai fait, cependant, je n’ai pas utilisé photosho, mais photofiltre studio, un logiciel de moindre qualité (mais de moindre prix aussi
Répondre)
Merci, superbe tuto !-
1er septembre 2008 15:47, par Wonka
C’est pas mal du tout, même avec Photofiltre, bien joué
Répondre
-
-
23 novembre 2008 05:14, par CL
Merci beaucoup, Vous faites un travail : M-A-G-N-I-F-I-Q-U-E. Seulement je dois avouer que ce sont des tutos pour initiés ! Car celui ci par exple, je le réalise moi aussi mais enfin je bloc. Je n’arrive pas a savoir comment :
- Copier le style de calque
- Appliquer le style de calque
- M’en servir une fois terminé si j’y parvient ! Ex : les liens : vont ils etre découpés ou alors va t-on utiliser des CSS... Bref les tutos n’entrent pas dans les détails pour débutants coe moi. S.V.P c’est très intéressant ! Comment puis-je avoir des réponses à mes questions
-
23 novembre 2008 11:31, par Wonka
Pour copier un style de calque il suffit de cliquez droit sur le calque sur lequel le calque existe, puis selectionner dans le menu déroulant copier le style de calque.
Pour le coller sur un autre calque même manipulation mais dans le menu déroulant il faut alors choisir coller le style de calque.
Tout cela se passe bien évidemment dans la fenètre des calques.
Et pour finir oui il faut découper tout cela et le coder en CSS, cela n’est pas une mince affaire et je ne m’attarderais pas sur des explications dans ce commentaire car ceci correspondrait a plusieurs tutos
Bonne chance.
Répondre-
23 novembre 2008 23:45, par CL alias Signkay
Merci infiniment Wonka ! Pour ce qui est de découper et coder en CSS, je vais essayer de m’aider des autres tutos. Tu es G-E-N-I-A-L !
Répondre
-
