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
La retouche de paysages avec…
Suite à un séjour en Israël, je vais vous montrer comment…
Initiation à l'étalonnage…
Ce tuto Photoshop va vous permettre de découvrir toutes les…
Créer la maquette graphique…
Formation dédiée à la création d'un site vitrine sur Photoshop.…
Photoshop CS6 - Les fonctions…
Photoshop est le logiciel professionnel incontournable pour…
Fusionner un personnage complexe…
Dans ce tuto Fusionner un personnage complexe dans une photo…
Créer votre site Internet…
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre,…
La retouche de photos de voyage…
Ce tuto Lightroom 4 et Photoshop est dédié à la retouche…
Photoshop : Maîtriser l'art…
Dans cette formation sur Photoshop CS6, je vais vous enseigner…
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 :
team8.fr
, Formateur
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
![]()
JE VIENS D'ACQUERIR ET VISUALISER LE TUTO DE " EFFACER DEPLACER DUPLIQUER ...... C'EST VRAIMENT UNE QUALITE DE VIDEO SON ET SUJET BIEN EXPLIQUES. MERCI
![]()
De très beaux tutos, j'aime particulièrement celui sur la transformation en zombie :) Bonne continuation. Continuez comme ça !
![]()
Des tutos toujours clairs et bien détaillés. Agréables à suivre et à écouter. Un bonheur pour apprendre !!! Et équipe toujours disponible en cas de besoins. SAV super bien assuré. Note 10/10. JC
![]()
je trouve vos formations toujours aussi intéressantes et j'attends avec impatience la troisième partie d'intégration du site avec wordpress. Merci
![]()
Merci beaucoup pour ces tutoriels intéressants et pertinents. Ces formations m'aident à progresser et à échanger avec d'autres amateurs. Merci encore !
Lire les autres témoignages
D'autres tuto de team8.fr
Configurer 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 !
Nous allons à travers ce tuto Wordpress en vidéo, apprendre à créer un site Internet…
Cré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 Photoshop
Dans ce tuto Photoshop, nous allons apprendre à créer une scène catastrophe sur Photoshop…
Notes attribuées par les utilisateurs (17 votes)
Les avis / Questions des utilisateurs (39)
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é 413 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 15 septembre 2012 par team8.fr, contributeur, 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.

















(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. "
(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 :) "
(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. "
(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 "
(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é.) "
(a acheté ce tuto - 25 décembre 2012)
" génial ! simple et efficace! Continuez comme cela! "
(a acheté ce tuto - 22 novembre 2012)
" Au top ! "
(a acheté ce tuto - 28 octobre 2012)
" super formation !
Simple, claire et efficace !
:-)) "
(a acheté ce tuto - 25 octobre 2012)
" Sympa ce premier chapitre, mais le son est vraiment dégeu :( "
(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 "
(a acheté ce tuto - 28 septembre 2012)
" excellent excellent excellant "
(auteur de ce tuto - 28 septembre 2012)
" Salut nestor29 merci d'avoir pris le temps de commenter, c'est sympa :-) au plaisir "
(a acheté ce tuto - 27 septembre 2012)
" C'est clair et simple. Merci pour ce partage des connaissances. "
(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. "
(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
"
(auteur de ce tuto - 24 septembre 2012)
" Merci Jasse29 pour l'info, je ne m'en étais pas rendu compte. "
(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. "
(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 :) "
(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 :). "
(a acheté ce tuto - 23 septembre 2012)
" Simple, rapide, efficace, j'adore !
Vivement la suite... "
(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 !!! "
(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 :) "
(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 ? "
(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) !
"
(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 :) "
(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. "
(n'a pas acheté ce tuto - 19 septembre 2012)
" D'accord merci je prendrai quand même votre tuto ;) "
(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 ! "
(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 :) "
(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 :) "
(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. "
(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. "
(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 "
(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) "
(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
"
(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? "
(n'a pas acheté ce tuto - 18 septembre 2012)
" Bonjour,
Possible avec CS4 ? (hé oui, on est pauvres :o))
Merci
"
(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.
"
(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
"