Identification Abonné :

Votre Email :

Votre Mot de Passe :

Se souvenir de moi

login

Etape 1 Créer un Nouveau document de 800x400 pixels.   Remplir le fond de la couleur de votre choix (préférer une couleur pastel d'une luminosité moyenne).   Créer un nouveau calque .   Sélectionner un rectagle avec l'outil Rectangle de sélection d'une largeur de 760 pixels, toute hauteur.   Remplir la sélection en blanc.   Pourquoi 760 pixels de largeur ? C'est a quelques pixels de moins pret, la largeur des navigateurs internet en plein écran en 800x600 de résolution d'écran. Ainsi, votre site sera compatible 800x600 pixels ou + (Les bords colorés vont s'agrandir avec la taille de la fenetre du navigateur et la zone contenu sera centrée sur la page).

Etape 2 Créer un nouveau calque .   Avec l'outil Rectangle de sélection , sélectionner la partie haute de la zone blanche qui sera le futur emplacement du bandeau illustration/logo de notre entête de site.   Remplir la sélection de la couleur de votre choix (préférer une couleur vive et du même ton que le fond).   Créer un nouveau calque .   Toujours avec l'outil Rectangle de sélection , sélectionner ensuite une bande d'environ 25 pixels de haut en dessous du bandeau haut qui sera notre futur bandeau de navigation du site.   Remplir la sélection de la couleur de votre choix (préférer une couleur relativement foncé, du même ton que le bandeau logo et légérement pastel).

Etape 3 Maintenant que nos zones logo, navigation et contenu sont créées, nous allons habiller le bandeau logo. Pour cela, on va rechercher les images adapté au sujet du site. dans cette exemple, nous allons prendre comme sujet, un site de clan counter strike. Une petite recherche sur google images, et me voila avec une image qui servira de fond de bandeau, une autre image qui sera détouré pour créer un objet de 1er plan par dessus le côté gauche du bandeau et le logo counter strike condition zero qui servira de base a la réalisation du logo du site.   NB : n'oubliez pas les droits d'auteurs. demander l'autorisation ou payé les droits aux ayant droits avant d'utiliser une source copyrightée.

Etape 4 Attaquons par travailler sur le fond de bandeau.   Ouvrir l'image de fond.   Dupliquer le calque de l'image.

Etape 5 Nous allons passer l'image en monochrome de la couleur de notre rectangle de bandeau logo. pour cela rendez-vous dans le menu Image > Réglages > Teinte/Saturation : Mode Redéfinir coché, Aperçu coché, modifier les paramétres jusqu'a obtenir la teinte désirée. Pour l'exemple : Teinte : 65 Saturation : 89 Luminosité : +6

Etape 6 Sélectionner ensuite avec l'outil Rectangle de sélection la moiter droite de l'image.   Appliquer un Contour progressif de 100 pixels a la sélection puis Effacer la pour refaire apparaitre en dégradé l'image d'origine.   aplatir l'image (dans le menu Calques ).   Tout sélectionner , Copier l'image et Copier la dans votre document contenant la mise en page du webdesign.

Etape 7 Sélectionner le contenu du calque "bandeau illustration/logo" dans la fenetre de calques (cliquer sur le nom du calque en enfoncant la touche Ctrl ).   Ajouter un masque de fusion au calque de l'image de fond dans la fenetre de calque. Seul la zone précédament sélectionnés sera visible pour ce calque.   délier le masque de fusion de l'image dans la fenetre de calque en cliquant sur le pictogramme "chaine" entre l'image et le masque. Sélectionner ensuite le rectangle de l'image juste a gauche de l'emplacement du pictogramme.   Déplacer (avec l'outil déplacement ) et retailler l'image dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré dans la zone du bandeau logo.

Etape 8 Aller, un petit effet screening sur l'image fond, ça fera pas de mal.   Créer un nouveau calque .   Avec l'outil Rectangle de sélection 1 rangée , sélectionner la 1er ligne du haut du document.   Remplir en blanc.   Dupliquer ensuite la ligne toute les 2 lignes sur toute la hauteur du bandeau, pour cela : - touches Ctrl + alt + flèche basse puis - touches fléche basse Répéter les 2 opérations jusqu'a remplissage de la zone.

Etape 9 Sélectionner la zone bandeau logo en cliquant sur le calque de bandeau dans la fenetre de calque comme a l'étape 7.   Ajouter le masque de fusion comme a l'étape 7 également.   Toujours dans la fenetre de calque, passer le calque en mode incrustation .   Et voila pour le fond de bandeau.

Etape 10 passont maintenant au détourage de l'élément de 1er plan.   Ouvrir l'image contenant l'élément de 1er plan.   Passer le calque de type "arrière-plan" en calque "standard" en double cliquant sur celui ci dans la fenetre de calque. cliquez ensuite sur le bouton OK de la boite de dialogue "nouveau calque".

Etape 11 A l'aide de l'outil Lasso polygonal , sélectionner le contour de l'élément, Inverser la sélection et Effacer la.   Effacer égallement les éventuelles zones internes ne faisant pas partie de l'élément.   Si le fond derière l'élément est relativement uni, vous pouvez égallement utiliser la technique de détourage du tutorial détourage.

Etape 12 Tout sélectionner , Copier l'image et Copier la dans votre document contenant la mise en page du webdesign.   Si l'élément n'est pas dans le bon sens comme dans l'exemple, effecter une Symétrie axe horizontal .   Déplacer (avec l'outil déplacement ) et retailler l'élément dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré.

Etape 13 Ajouter au calque le Style de calque : - Ombre portée Mode de fusion : Produit , couleur noir. Opacité : 50% Angle : 135° Distance : 5 px Grossi : 0% Taille : 5 px pour aplatir l'ombre portée afin d'en supprimer la partie du bas, créer un nouveau calque . lier le au calque de l'éléments dans la fenetre de calque puis Fusionner les calques liés .   Sélectionner avec l'outil Rectangle de sélection le rectangle de la zone de contenu blanche en dessous de la bande de navigation puis Effacer cette sélection.

Etape 14 Passont maintenant a la bande de navigation.   Sélectionner le calque contenant cette bande dans la fenetre de calque.   appliquer y les Style de calque suivant : - Ombre portée : Mode de fusion : Produit , couleur noir. Opacité : 100% Angle : 135° Distance : 0 px Grossi : 0% Taille : 3 px - Biseautage et estampage Style : Biseau interne Technique : Lisser Profondeur : 100% Direction : Haut Taille : 1 px Flou : 0 px Mode des tons clairs : Superposition en blanc, opacité : 100% Mode d'ombrage : Superposition - [Inscrustation en dégradé] Mode de fusion : Inscrustation Dégradé : noir au blanc Opacité : 50% Angle : 90° Echelle : 100%

Etape 15 créer un nouveau calque .   Avec l'outil [rectangle de sélection 1 colonne], sélectionner une colonne a droite de l'élément de 1er plan et le Remplir en noir. Déplacer la sélection d'un pixel a droite avec la touche flèche droite et Remplir cette nouvelle sélection en blanc.

Etape 16 Sélectionner la zone de la bande de navigation en cliquant sur le calque contenant cette bande dans la fenetre de calque en appuyant en même temps sur la touche Ctrl .   Inverser la sélection puis Effacer la.   passer le calque en mode incrustation, opacité 50% dans la fenetre de calque. Dupliquer et déplacer (avec l'outil déplacement ) cette élément de séparation autant de fois qu'il le faut sur toute la longeur de la bande de navigation.

Etape 17 Il ne vous restera plus qu'a ajouter entre ses séparations les titres des rubriques du site pendant l'intégration HTML du webdesign.

Etape 18 Pour finir, occupons nous du logo.   Ouvrir l'image contenant le logo de base.   Si celui ci est en noir et blanc non détouré, créer une sélection de détourage avec l'outil Baguette Magique , Tolérance : 30, Lissé coché, pixels contigus non coché, cliquer sur une des lettres du logo.   créer un nouveau calque et Remplir la sélection de la couleur de votre choix (couleur assez foncé et adapté aux couleurs du site bien entendu).   Copier la sélection.

Etape 19 Coller ensuite la sélection dans votre document principal.

Etape 20 Supprimer les éléments du logo de trop et ajouter votre texte si besoin est.   Dans l'exemple, j'ai supprimer le texte "condition zero" et je l'ai remplacer par un texte du nom de la team counter.

Etape 21 Déplacer (avec l'outil déplacement ) et retailler le logo dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré dans le bandeau du site.   Ajouter ensuite le Style de calque : - Lueur externe : Mode de fusion: Superposition Opacité : 100% Bruit : 0% Couleur : une couleur qui fait bien resortir le logo du fond et assortie bien sur (ici : jaune pale RVB :255,255,147) Technique : plus tamisée Grossi : 10% Taille : 18px   Et voila le travail !! il ne reste plus qu'a faire les découpes et l'intégration HTML.