Dans ce tuto Photoshop nous allons apprendre à réaliser une maquette graphique de site Web sur Photoshop, et décliner le design des différents templates du site. Durant cette formation Webdesign, je vais vous proposer quelques ateliers créatifs, comme la création d’un motif personnalisé qui va se répéter sur l’ensemble de nos pages ; nous verrons également comment animer notre logo directement sur Photoshop afin de créer un petit gif animé.

Au programme de ce tuto Webdesign Photoshop :

  • Création du motif personnalisé
  • Préparation de la charte : nous délimiterons certaines zones du site, comme le menu, le contenu, pied de page, les marges etc.
  • Création de la maquette : création graphique de la maquette de la page d’accueil
  • Création des autres templates de pages : déclinaison des autres pages du site
  • Création d'un GIF animé : création d’un logo animé directement sous Photoshop

Les fichiers sources vous sont fournis avec le tutoriel. Cette formation a été enregistrée avec Photoshop CS6, mais peut être suivi à partir de la version CS4 du logiciel.

Et pour la suite...

La seconde partie de ce tuto dédiée à l'intégration de la maquette est disponible !

Jetez un oeil à ces autres tuto Photoshop CS6

Photoshop: l'outil de comparaison sur grisPhotoshop: l'outil de comparaison…
Bonjour et bienvenu sur cette nouvelle formation Photoshop CS6.…

EXPERT : plaquer un visuel sur une surface avec ses reliefsEXPERT : plaquer un visuel…
Je vais vous dévoiler dans ce tuto une astuce d'expert peu…

Débutez en photo gastronomiqueDébutez en photo gastronomique…
Réalisez des photos gastronomiques comme un pro ! Cette formation…

Astuce pro : analyser, corriger la dominante couleur d'une imageAstuce pro : analyser, corriger…
Je vais vous expliquer dans ce tuto comment analyser et surtout…

Fusionner un personnage complexe dans une photoFusionner un personnage complexe…
Dans ce tuto Fusionner un personnage complexe dans une photo…

Créer votre site Internet / Portfolio de A à ZCréer votre site Internet…
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre,…

Photoshop : Maîtriser l'art du détouragePhotoshop : Maîtriser l'art…
Dans cette formation sur Photoshop CS6, je vais vous enseigner…

La retouche de photos de voyageLa retouche de photos de voyage…
Ce tuto Lightroom 4 et Photoshop est dédié à la retouche…

Cette formation contient 5 leçons en vidéo pour une durée totale de 1h36.
Voici le programme complet abordé au cours de cette formation :

  • Création de motif00:12:12 
  • Préparation Charte graphique00:06:15 
  • Création de la maquette00:35:22 
  • Création GIF00:05:09 
  • Création des autres pages00:37:32 

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Photoshop CS6 de 1 heure 36 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

team8.fr , formateur certifié

Bonjour, Damien Graphiste Illustrateur / Directeur artistique - Agence Team8.fr Je suis spécialisé dans la création visuelle d'images numériques, ainsi que dans la conception graphique de sites Internet / HTML / CSS. N'hésitez pas à me poser vos questions concernant les tutos !

Toutes les formations de Team8.fr


Témoignage des clients de team8.fr

De bon tutos qui m'ont permis de progresser

Ce formateur est compétent et compréhensible !

Merci pour la formation

Très bon formateur, très professionnel. Je recommande les yeux fermés !

excellent formateur proposant des tutos vraiment très intéressants! j'ai déjà suivi plusieurs de ses tutos et je pense continuer, j’apprends beaucoup avec ce formateur

Lire les autres témoignages

 

D'autres tuto de team8.fr

Configurer Google Analytics et vos sitemaps dans WordpressConfigurer Google Analytics et vos sitemaps dans Wordpress
Cette formation en vidéo vous expliquera comment installer Google Analytics sur notre…

Créer votre site Web dans Wordpress sans programmation !Créer votre site Web dans Wordpress sans programmation !
Nous allons à travers ce tuto Wordpress en vidéo, apprendre à créer un site Internet…

Créer votre site Internet / Portfolio de A à ZCréer votre site Internet / Portfolio de A à Z
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre, ensemble, pas à…

Créer une scène catastrophe sur PhotoshopCréer une scène catastrophe sur Photoshop
Dans ce tuto Photoshop, nous allons apprendre à créer une scène catastrophe sur Photoshop…

voir tous les tuto de team8.fr

Notes attribuées par les utilisateurs (26 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (50)

par thegeniusa voté :
(a acheté ce tuto - 19 mars 2014)

" Bon tuto , à la portée des débutants ,certes répétitif et un brin austère mais c'est le thème qui veut ça .
Une formation complète cependant pour qui veut créer ou apprendre à faire une maquette de site web ( ou simplement à titre d'enseignement voir comment cela se fabrique ). "

par team8.fr
(auteur de ce tuto - 07 février 2014)

" Hello, vous pouvez taper dans google **** social icon **** il en existe énormément :) "

par baast59a voté :
(a acheté ce tuto - 05 février 2014)

" Superbe tuto, très belle maquette !

J'ai une petite question ..

Ou trouvé des icons YouTube , Dailymotion du meme type que ceux sur le tuto?

Je vous remercie. "

par team8.fr
(auteur de ce tuto - 30 novembre 2013)

" Merci pour tous ces retours positifs !
La suite est disponible ici :
http://fr.tuto.com/dreamweaver/montage-html-css-dune-maquette-graphique-sur-dreamweaver-dreamweaver-html-css,36037.html

La Team8 "

par neige713a voté :
(a acheté ce tuto - 29 novembre 2013)

" Merci infiniment pour ce tutoriel qui est très bien expliqué et clair comme tous les tutoriels de Team8 d'ailleurs. Par contre où est la deuxième partie ? "

par rome0wa voté :
(a acheté ce tuto - 08 novembre 2013)

" Très bon tuto, clair, precis, et très instructif !
Merci "

par jp79a voté :
(a acheté ce tuto - 22 septembre 2013)

" tres bonne video, claire et concise. on attend de voir la suite "

par launicoa voté :
(a acheté ce tuto - 15 août 2013)

" asssez clair mais seul petit défaut le son est un peu métalique, "

par illuminaa voté :
(a acheté ce tuto - 08 août 2013)

" TRÈS BIEN EXPLIQUÉ, COMPRÉHENSIBLE, CLAIR ET SIMPLE. "

par Darknessea voté :
(a acheté ce tuto - 07 août 2013)

" Super tuto !

Juste un probème de son qui ne vien que de la gauche. "

par multitachea voté :
(a acheté ce tuto - 07 août 2013)

" Tuto simple, facile a suivre, avec quelques astuces pratique. Le résusltat rend bien,. "

par Kazmodana voté :
(a acheté ce tuto - 30 avril 2013)

" Salut j'aime bien la formation elle est simple et efficace néanmoins j'aurais aimé une explication un peu approfondie sur les différents formats ainsi que la mesure disons exactes du découpage 20 px, 10 px !!
Bonne continuation Team8. "

par Laur3l
(a acheté ce tuto - 24 février 2013)

" Très bon tuto bien expliqué néanmoins une explication peut être plus approfondi sur l'importance des formats serait intéressante ( grille taille motif etc) en effet dans une situation seul on se demande souvent de la taille des documents et des maquettes à réaliser en fonction de notre besoin. De plus je n'entend le son de la vidéo (après téléchargement ou sur mon pc) que d'une oreille, alors que le casque fonctionne normalement, je ne sais si je suis le seul. Dans tout les cas je recommande fortement ce tutoriel et j'ai hâte de suivre le prochain :) "

par pmediaga voté :
(a acheté ce tuto - 27 janvier 2013)

" Très intéressant. La création de motif reste un incontournable dans le webdesign pour moi. Merci. "

par sanchana voté :
(a acheté ce tuto - 26 janvier 2013)

" Cette video de première présentation est vraiment excellente. Bien expliqué, clairement. Ca nous donne envie de continuer a faire du photoshop.
note : 5/5 "

par pierluca voté :
(a acheté ce tuto - 04 janvier 2013)

" Très bien! C'est la première fois que la confection d'une grille m'est ausis bien présentés. Avant ça je pensais qu'une grille devait obligatoirement être constituée d'un grand nombre de fines colonnes de largeur fixe dans lesquels on devaient placer le contenu. Maintenant, je constate qu'on peut se faire sa propre grille en fonction de ses besoins. C'est génial! (Notez que je savais que je pouvais placer moi même les guides... Mon cerveau était juste un peu coincé.) "

par neptune535a voté :
(a acheté ce tuto - 25 décembre 2012)

" génial ! simple et efficace! Continuez comme cela! "

par YannFructuosoa voté :
(a acheté ce tuto - 22 novembre 2012)

" Au top ! "

par keum69a voté :
(a acheté ce tuto - 28 octobre 2012)

" super formation !
Simple, claire et efficace !
:-)) "

par tricepada voté :
(a acheté ce tuto - 25 octobre 2012)

" Sympa ce premier chapitre, mais le son est vraiment dégeu :( "

par Kennaha voté :
(a acheté ce tuto - 16 octobre 2012)

" Vraiment Pro, trés bien expliqué, j'ai pu faire directement a ma manière grace aux explications "

par swifika voté :
(a acheté ce tuto - 28 septembre 2012)

" excellent excellent excellant "

par team8.fr
(auteur de ce tuto - 28 septembre 2012)

" Salut nestor29 merci d'avoir pris le temps de commenter, c'est sympa :-) au plaisir "

par nestor29a voté :
(a acheté ce tuto - 27 septembre 2012)

" C'est clair et simple. Merci pour ce partage des connaissances. "

par team8.fr
(auteur de ce tuto - 26 septembre 2012)

" Salut gratos, je me suis aligné avec la promo -50% sur les crédits / 2 jours :)
Merci en tout cas pour ton retour, c'est sympa. "

par gratos
(a acheté ce tuto - 25 septembre 2012)

" déjà en promo... j’achète trop vite moi ;-)
dis moi si le 3ème sera vite en promo ou si je saute dessus dès sa sortie...
très instructif les 2 premiers volet de la trilogie :p
"

par team8.fr
(auteur de ce tuto - 24 septembre 2012)

" Merci Jasse29 pour l'info, je ne m'en étais pas rendu compte. "

par Jasse29a voté :
(a acheté ce tuto - 24 septembre 2012)

" Comme d'habitude avec team8, la qualité de la formation est au rendez-vous : de nombreuses astuces et techniques pour produire une maquette graphique d'un site web prête pour être mise en code.

P.S : petit bémol pour le son, qui est en mono et c'est moins agréable quand on suit le tutoriel avec un casque sur les oreilles. "

par team8.fr
(auteur de ce tuto - 23 septembre 2012)

" Bardyl > bonjour, les 2 premières parties sont liées du fait que l'on se sert des cotes et éléments de la 1 ère partie dans la formation html / css. Cependant la 3 partie sera facultative et sera destinée aux personnes voulant aller plus loin dans la programmation web

Isaytoo / jubei > merci :) "

par bardyl
(n'a pas acheté ce tuto - 23 septembre 2012)

" Bonjour,

Petite question : est ce que les trois parties de ce tutoriel seront indépendantes ? Je m'explique : par exemple, si seule la deuxième partie ou la troisième nous intéresse, il sera « obligatoire » d'avoir suivi la/les précédentes pour pouvoir continuer ?

Merci d'avance :). "

par isaytooa voté :
(a acheté ce tuto - 23 septembre 2012)

" Simple, rapide, efficace, j'adore !
Vivement la suite... "

par jubeia voté :
(a acheté ce tuto - 22 septembre 2012)

" Bravo !
Le tuto est très bien réalisé, la pédagogie est au rendez-vous, on ne s'ennuie pas un seul instant.
Bravo !!! "

par team8.fr
(auteur de ce tuto - 20 septembre 2012)

" Bonjour Guitariffer, oui cette partie concerne la création d'une maquette graphique sur Photoshop. Nous sommes actuellement sur la seconde partie qui verra le jour d'ici peu (milieu de semaine prochaine).

kaliman > merci, c'est très encourageant :) "

par Guitariffer
(n'a pas acheté ce tuto - 20 septembre 2012)

" Si j'ai bien compris ce tuto en question ne comprend que la partie "création graphique" c'est cela ? "

par kalimana voté :
(a acheté ce tuto - 20 septembre 2012)

" Bonjour, super tuto très instructif, j'en avais déjà suivi un sur wordpress, et la qualité est encore là.
Le ton du formateur Damien est vraiment dynamique et sympa, ça respire la bonne humeur.

C’est de plus une mine de petites infos, de trucs et astuces de pro pour faciliter et accélérer le travail, je me suis rendu compte que je perdais du temps sur pleins de petites choses.

La team8.fr compte un nouveau fan (j'ai suivi aussi les tutos sur le site et le consulte régulièrement).
Bravo et continuez ainsi, j'ai hâte de voir les suites (de ce tuto et du thème wordpress) !
"

par team8.fr
(auteur de ce tuto - 19 septembre 2012)

" matthieu76 > Bonjour, je vous conseille une autre formation que celle ci pour une première création web. Vous retrouverez ici une formation plus adaptée aux débutants :

http://fr.tuto.com/photoshop/creer-votre-site-internet-portfolio-de-a-a-z-photoshop-dreamweaver,32717.html

Pour suivre cette formation vous aurez besoin de Photoshop afin de réaliser la maquette graphique du site. Enfin, nous monterons en HTML / CSS le site avec Dreamweaver. Si vous n'avez ce dernier, il est tout à fait possible coder avec un éditeur HTML gratuit (du style Notepad++).

Vous pouvez me contacter sur damien@team8.fr pour plus d'infos !
A bientôt

salomon1997 > ok merci :)

spykrew07 > ur welcome :) "

par matthieu76
(a acheté ce tuto - 19 septembre 2012)

" Bonjour,
J'aimerai réaliser pour mon asso un site internet.
J'aimerai pouvoir le réaliser au maximun par mes soins.
Mais je ne connais rien à la création de site et je me perds entre les logiciels et les méthodes pour y arriver. Hors, les tutos que vous avez réalisé me paraisse vraiment intéressant. Mais le(s)quel(s) choisir, par quoi commencer, quel logiciel faut-il avoir (payant, gratuit)...Bref pouvez-vous m'aider à clarifier mes besoins, m'expliquer l'utilité des différents programmes et me donner les différentes solutions (je les supose nombreuses). Et enfin, me conseiller sur le choix du (des) tuto(s) a acheter.
Merci d'avance. "

par salomon1997
(n'a pas acheté ce tuto - 19 septembre 2012)

" D'accord merci je prendrai quand même votre tuto ;) "

par spykrew07
(n'a pas acheté ce tuto - 19 septembre 2012)

" @team8.fr Merci d'avoir renvoyer un membre vers ma formation wordpress, c'est très sympa de ta part ! "

par team8.fr
(auteur de ce tuto - 19 septembre 2012)

" Salut salomon1997 !
Merci de nous suivre et d'attendre cette formation qui verra le jour bientôt (octobre / novembre) ! Cependant, en ce moment, nous sommes occupé avec la formation web complète.

Si vous êtes pressé, je vous conseille la formation de spykrew07 qui à l'air très intéressante :
http://fr.tuto.com/wordpress/creer-un-site-web-wordpress-l-integration-wordpress,25827.html

A bientôt :) "

par salomon1997
(n'a pas acheté ce tuto - 18 septembre 2012)

" Coucou c'est encore moi juste pour vous dire que j'attend avec Plus qu'impatience le tuto créé votre thème wordpress. Je suis assez presser parce que mon site doit s'ouvrir début octobre et je nage complètement pour le theme. Merci et a très vite :) "

par bmerea voté :
(a acheté ce tuto - 18 septembre 2012)

" Claire simplie et précis, rapidité juste ce qu'il faut pour pouvoir suivre sans être à la bourre quand on est débutant. "

par gratos
(a acheté ce tuto - 18 septembre 2012)

" Merci pour l'info... en attendant impatiemment la suite, je vais étudier la 1ere partie alors ;o)
Et Merci pour la Super Rapidité de réponse. "

par team8.fr
(auteur de ce tuto - 18 septembre 2012)

" Bonjour gratos, oui c'est bien la première partie PS.
Nous sommes actuellement sur la partie intégration / css. Cette dernière sera disponible fin de semaine / début de semaine prochaine.
A bientôt "

par gratos
(a acheté ce tuto - 18 septembre 2012)

" Bête question... il s'agit de la formation complete ou juste la partie Ps ? si ce n'est que la 1ere partie (ce que je comprendrais vu le prix mais pas par la descrition..) quand sortez vous le reste? je suis plutot intéressé de l'intégration dans DW et les CSS.. Merci d'avance pour votre réponse et bonne continuation.
Olivier
(Gratos) "

par team8.fr
(auteur de ce tuto - 18 septembre 2012)

" Bonjour à vous deux,

mgaltero > oui possible depuis cs4 ! ^^

M@nu > je n'ai plus vraiment en tête les options cs2, apriori cela ne devrait pas poser de problème, vérifiez que vous avez bien la possibilité de créer un motif personnalisé (édition > utiliser comme motif). Pour l'animation du logo il faudra cliquer sur fenêtre > animation (au lieu de montage). Pour le reste pas de problème :)

Au plaisir
"

par M@nu
(n'a pas acheté ce tuto - 18 septembre 2012)

" Même question, de quelle version de photoshop est on dépendant?
Chez nous, on tourne encore en CS2, c'est bloquant? "

par mgaltero
(n'a pas acheté ce tuto - 18 septembre 2012)

" Bonjour,
Possible avec CS4 ? (hé oui, on est pauvres :o))
Merci
"

par team8.fr
(auteur de ce tuto - 16 septembre 2012)

" Bonjour Kaliman,
Cette formation est plus poussée que celle de la création d'un portfolio de A à Z.

- Plus poussée graphiquement avec 2 ateliers créatifs qui nous permettrons de créer un motif ainsi qu'un logo animé.

- Plus poussée dans l'intégration et le montage HTML / CSS avec un import de police personnalisée (CSS3) ainsi qu'une gallery jquery différente (2ème partie de la formation).

- La dernière partie sera consacrée à la création d'une console d'administration qui nous permettra de mettre à jour notre site (texte / images / actualités) directement via le backoffice. Nous aborderons certaines notions de PHP + Apprentissage MYSQL.

Pour résumer l'ensemble des formations conviendront aux personnes voulant aller plus loin dans la création d'un site Web !

En espérant vous avoir éclairer.
Au plaisir :)

PS : si vous débutez je vous conseille fortement la formation que vous avez cité ci-dessus.

"

par kalimana voté :
(a acheté ce tuto - 16 septembre 2012)

" Bonjour, pourriez vous me dire la différence entre cette formation et celle que l'on trouve ici:
http://fr.tuto.com/photoshop/creer-votre-site-internet-portfolio-de-a-a-z-photoshop-dreamweaver,32717.html

Merci d'avance

"

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Photoshop CS6 d’une durée de 1 heure 36 minutes a été acheté 691 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 15 septembre 2012 par team8.fr, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Photoshop webdesign.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !