Tutoriel Comment mettre en ligne un kit graphique et modifier le header sous photoshop

Ce tutoriel va vous apprendre à mettre un kit graphique en ligne et à modifier le header via photoshop.

Pour réaliser ce tutoriel nous allons utiliser le Kit 10 en exemple que vous pouvez télécharger ici
Assurez-vous d'avoir un logiciel d'extraction comme winzip ou winrar (version d'essai de 30 jours).
Ouvrez le fichier .rar et décompressez le contenu de l'archive dans un dossier.
Vous devriez obtenir ceci :

Pour uploader votre kit sur votre espace web vous devrez vous y connecter via FTP, pour cela munissez-vous des identifiants fournis par votre hébergeur (IP du serveur, Login, Mot de Passe).

Pour vous y connecter vous avez besoin d'un client ftp, nous allons utiliser Filezilla qui est simple d'utilisation et gratuit.

Lorsque Filezilla est téléchargé et installé, lancez-le.

Allez dans "Fichier/gestionnaire de sites" (CTRL + S)



1) On clique sur nouveau site.
2) On nomme le projet/site web.
3) On rentre l'ip du serveur (Identifiants fournis dans le mail).
4) Dans le menu déroulant on choisi "normal" ou "demander un mot de passe" (si on ne veut pas enregistrer son mot de passe sur l'ordinateur).
5)6) On rentre son login et son mot de passe.
7) connexion.


vous voilà connecté :



1) Cette fenêtre vous permet de voir la connexion réussie, le transfert de fichier etc...
2) Sélectionnez le dossier dans lequel vous avez extrait le kit graphique.
3) Les fichiers se trouvant dans le dossier sélectionné apparaissent ici.
4) On upload les fichiers dans cette fenêtre(un clic gauche sur le fichier et on le fait glisser dans l'autre fenêtre (4)).

- Le dossier "images"
- index.html
- style.css

Pour modifier le header nous allons utiliser Photoshop (Version d'essai gratuite de 30 jours).

Téléchargez et installez la demo de photoshop, ensuite faites double clic gauche sur "header.psd" contenu dans le dossier "PSD" du kit.



Il s'ouvre dans photoshop :



1) Fond du header
2) Texte du slogan
3) Nom de domaine
4) Extention du NDD (Nom De Domaine)
5) Reflet interne

On commence par supprimer le reflet interne (numéro 5 sur la photo du dessus).


Clic droit sur le calque reflet "supprimer le calque"




      

Dans notre exemple, nous allons remplacer "Votresite" par "KitGraphiqueGratuit", pour garder le même style que le header actuel nous allons séparer le titre en deux "KitGraphique" sera en noir et "Gratuit" en bleu.

On selectionne l'outil texte (T)
Un clique gauche sur le calque "votresite" (dans la fenêtre des calques) pour le selectionner



un clic gauche entre les deux couleurs : Maintenez et faites glissser votre souris sur "Votre"





On efface et on remplace par "KitGraphique".
On répète l'opération pour le coté bleu qu'on remplace par "Gratuit".



Le résultat est un peu décalé, on va mettre un peu d'ordre.



On vérife qu'on est toujours sur le calque "Votresite" qui maintenant s'appelle "KitGraphiqueGratuit"



On prend l'outil déplacement (v), comme son nom l'indique cet outil permet de déplacer un élément sur le plan de travail.
Un clic gauche maintenu sur le texte "KitGraphiqueGratuit" (dans le plan de travail) et on fait le glisser vers la gauche jusqu'à ce qu'il soit centrer.



Dans la fenêtre des calques on selectionne le calque ".com".



On reprend l'outil déplacement, un clic maintenu sur le texte ".com" et on deplace le texte à droite du titre.



On modifie l'extention au besoin.



Pour le slogan on sélectionne le calque "lorem ipsum..."



On prend l'outil texte (T), clic droit sur le plan de travail "modifier le texte".



Le slogan est sélectionné, on appuie sur la touche effacé du clavier et on ecrit le slogan de son choix.





On centre comme pour le titre.



On termine par le reflet interne.

On crée un nouveau calque, 3 manières de le faire :
- Menu calque "calque/nouveau/calque"
- Fenêtre des calques l'icône

- raccourci "maj+ctrl+N"
auquel on donne un nom "reflet"



Ensuite tout en maintenant CTRL avec la souris on clic sur cette icône :



Le titre est séléctionné.



Menu sélection/modifier/contracter 1px



Prenez l'outil dégradé (G)

Choississez un dégradé du blanc vers blanc transparent.



Tracez une ligne du point 1 au 2.



On désélectionne (CTRL + D).



Avec l'outil elipse (m)

on trace un ovale.



Touche DELETE du clavier



On désélectionne (CTRL + D)

Modifiez l'opacité du calque "reflet" jusqu'à obtenir le résultat souhaité.



Pour terminer on enregistre le header "Fichier/enregistrer sous" (MAJ + CTRL + S) au fomat PNG dans le dossier images et on le ré-up sur le FTP.



Ce tutorial est maintenant fini.

Si vous avez apprécié ce tutoriel partagez-le sur Twitter Merci.