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 :

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

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

Il y a aucune image pour le moment, soyez le premier à ajouter une image à ce tuto Photoshop.

Vous avez terminé ce tuto ? Partager votre création graphique.

Télécharger les fichiers Photoshop

Insrivez vous à la newsletter pour débloquer le lien de téléchargement des fichiers Photoshop. Si vous êtes déjà inscris, cliquez ici.

Votre email servira uniquement à la newsletter de wks (un envoi max / semaine). Elle ne sera jamais vendu ni loué. Vous pouvez vous désabonner à tout moment. En savoir plus

Il y a 23 commentaires publiés sur cet article
  • Votre pseudonyme

    C’est cool, très pro !

    Répondre
  • 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
  • Albino

    Joli tout plein ! :)

    Répondre
  • 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
  • lauval

    On ne peut pas télécharger les fichiers sources dommage. Pouvez vous y remédier Merci

    Répondre
  • Alex

    Excellent tuto ! bravo ! j’attends la 2nd partie avec impatience :)

    Répondre
  • weekendpascher

    Merci pour le tuto, sympa ^^

    Répondre
  • 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
  • Vulcro

    J’attends avec impatience la sortie du cours pour la découpe et le passage en HTML 5 !

    Répondre
  • Jailbreaking

    Trop bien fait :D J’en apprend vraiment beaucoup ici, merci à vous tous !

    Répondre
  • cleminho

    A quand le prochain tuto sur l’intégration HTML ?

    Répondre
  • 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
  • mireille luca

    Salut, vraiment genial ce tuto ! j’ai appris un tas de trucs avec..

     
     
    Mon blog dedié a un chat sans inscription pour tchatcher en ligne.

    Répondre
  • 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
  • yoyo

    Cool ce tuto ! la suite, la suite ! merci ! :)

    Répondre
  • 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
    • 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 ;) Merci pour votre commentaire en tout cas !

      Répondre
  • 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
  • micky

    du très bon boulot encore merci pour la connaissance que vous m’avez apporter

    Répondre
  • création site web

    Merci pour le tuto, j’aime bien

    Répondre
  • application android

    merci pour le topic sa ma bien aider

    Répondre
  • Votre pseudonymedanyb12

    merci pour touske vous faites pour nous. la vie semmble être plus facile coe ça.vos tutos sont très détailler il faut vraiment être plusque nul pour ne pas être satisfait .merci à vs

    Répondre
  • Votre pseudonymeBodyinc

    Super, merci

    Répondre
Ajouter un nouveau commentaire

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 60

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 72

Fatal error: Call to undefined function: spip_unlink() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 96