Accueil > Tutoriels pour les webdesigners > Photoshop > En faisant du webdesign > Créer une interface graphique clean et design avec Photoshop

Créer une interface graphique clean et design avec Photoshop

samedi 8 octobre 2011, par Wonka

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 :

Cet article a été transféré vers notre site cousin grafpedia.fr, cliquez ici pour lire l’article complet.

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?