32
Créer une interface graphique clean et design avec Photoshop
Avec ce tutorial Photoshop vous apprendrez une technique pour créer l’interface graphique de votre site Internet. de A à Z vous aurez tous les détails pour apprendre à créer une superbe template. A vous de jouer.
Ce tutoriel Photoshop vous dévoile la façon de monter un Template, de la création du document à sa publication en HTML. Il sera utile pour toute personne désirant créer son site Internet ou pour les webdesigners ayant besoin d’inspiration. En effet, en plus d’expliquer comment réaliser ce Template, je vous explique comment la coder. Et comme si cela ne suffisait pas, j’ajoute à la fin de ce tutoriel l’ensemble des fichiers sources .psd mais également la Template codée HTML5 / CSS3. Alors, profitez de ce nouveau tutoriel Photoshop, seulement sur grafpedia.com !
Fiche technique du tutoriel Photoshop :
- Logiciel utilisé : Photoshop CS5
- Temps : Environ 3 heures
- Niveau : Intermédiaire
- Fichier à télécharger : Fichier Photoshop .psd
- Visuel final : voici la Template que vous allez créer grâce à ce tutoriel.
ETAPE 1 Création du fichier
La première étape de ce tutoriel concerne évidemment la création de votre document Photoshop. Ouvrez votre logiciel Photoshop puis allez dans le menu Fichier> Nouveau. Une nouvelle fenêtre apparaît : entrez le nom de votre fichier, la largeur 1200 pixels, et la hauteur 1500 pixels. Enfin appuyez sur le bouton OK.
ETAPE 2 Création d’un repère
Afin de faciliter la création d’un Template sur Photoshop je vous invite à utiliser le plus souvent possible les repères. Ils aident à créer et positionner les différents éléments sur la page. Créez un premier repère horizontal à 450 pixels du haut de votre image (pour créer un repère utilisez simplement les règles, pour les afficher appuyez sur Ctrl/Cmd + R).
ETAPE 3 Création du header
Maintenant créez un nouveau calque (menu Calque> Nouveau> Calque) puis nommez- le top. Enfin utilisez l’outil Sélection pour créer une sélection du haut de votre document (en suivant le repère créé précédemment). Remplissez de noir cette sélection (en utilisant le pot de peinture).
ETAPE 4 Ajouter un style de calque
Allez maintenant dans le menu Calque> Style de calque> Incrustation de dégradé. Configurer le dégradé en suivant cette image.
Et voici le résultat :
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
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 18 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.
-
9 octobre 2011 16:25, par PureLab
Merci pour ce superbe tuto. Une date approximative pour celui concernant le découpage et le codage.. ??? Je dois avouer que c’est la partie qui m’intéresse le plus... Merci encore et bonne continuation.
Répondre -
13 octobre 2011 09:10, par christine0505
Bonjour je suis sur le tutoriel « Creer une interface graphique » Lorsque je cree mon bouton search je ne comprends pas cet ajout de masque de fusion d autant plus que j ai differentes possibilites : faire tout disparaitre et apparaitre ... Rien ne se passe avec le degrade Je vous remercie
Répondre -
14 octobre 2011 22:54, par lauval
On ne peut pas télécharger les fichiers sources dommage. Pouvez vous y remédier Merci
Répondre -
18 octobre 2011 15:06, par Alex
Excellent tuto ! bravo ! j’attends la 2nd partie avec impatience
Répondre
-
11 novembre 2011 18:10, par Artistik
Merci pour ce tutoriel ! Il est clair par contre, il y a des étapes ou tu vas trop vite
J’avais une petite question au passage : comment je fais pour, une fois mon template créé, assigner des commandes aux différents éléments du thème ? Egalement, comment je fais pour l’utiliser sur wordpress ?
Merci pour votre réponse
Artistik
Répondre -
16 novembre 2011 09:26, par Vulcro
J’attends avec impatience la sortie du cours pour la découpe et le passage en HTML 5 !
Répondre -
22 novembre 2011 18:05, par Jailbreaking
Trop bien fait :D J’en apprend vraiment beaucoup ici, merci à vous tous !
Répondre -
9 décembre 2011 00:42, par BBG
Salut,
Je viens de tomber sur ton site et tes tuto sont geniaux !!!! je m’y suis pas encore mise mais des que je creerai quelque chose je te le posterai.
BRAVO pour ton site !!! et MERCI pour les neophytes comme moi
PS : t’as fait une faute dans « questions et commentaires » c’est « complément d’information » et pas complètement !!! lol
Répondre -
22 décembre 2011 10:39, par azerty43
J’attend avec impatience et je me réjoui du tuto sur la découpe et le codage en HTML5 et CSS3 je n’ai jamais su le faire et ça va m’apporter énormément de chose
Répondre -
31 décembre 2011 17:50, par fxsystem
Bon tutoriel , même si il provient de chez Grafpedia le lire en français c’est plus agréable
, j’avais déjà réalisé pas mal de template mais les méthode utiliser dans se tutoriel rende la réalisation plus simple , le seul bémols c’est le faite que je n’est toujours pas trouver de tutoriel qui expliquais comment les découper 
Cordialement.
Répondre-
10 février 15:07, par Wonka
En fait non il ne proviens pas de grafpedia puisqu’il a été publié sur wks en premier. Mais étant donné que grafpedia est mon second site on vas dire que c’est pas grave
Répondre
Merci pour votre commentaire en tout cas !
-
-
11 janvier 01:09, par Ipario
Bonjour ! J’aurais besoin de plus de précision par rapport à l’étape 6 ! Je ne comprend pas cette étape « Modifiez la couleur d’avant plan par le noir et créez grâce à l’outil Rectangle (U) la forme en suivant les repères. » et je ne vois pas comment créer « Shape 1 » Merci
Répondre
