Dans cette formation Photoshop en vidéo de 10 chapitres, nous allons voir, pas à pas, comment designer une maquette de site web moderne. Celui-ci aura la particularité d'être "one page", ce qui veut dire que tout le contenu du site est sur la même page et la navigation se fait avec un menu qui scrolle dans la page.

Sommaire de la formation :

  • Création d'un document pour le web
  • Réinitialisation & Création d'un nouveau nuancier plus adapté
  • Création du background full page ainsi qu'un pattern répété par dessus
  • Création et placements des différents répères
  • Création de la sidebar (logo, menu, copyright...)
  • Design du lecteur MP3
  • Création de la partie News pour la home page du site
  • Création de la partie About us
  • Création de la partie Contact (formulaire + google map)
  • Le mot de la fin

Les sources de ce tuto (fichier PSD, police, nuancier) sont fournis avec la formation pour que vous puissiez pas à pas refaire la maquette de ce site one page.

Bon tuto !

Jetez un oeil à ces autres tuto Photoshop CS5

Réalisez une affiche de filmRéalisez une affiche de film…
Dans ce tuto Photoshop vous allez composer une affiche de film…

Donner un aspect encré à vos imagesDonner un aspect encré à…
Dans ce tuto sous Photoshop CS5, 6 et CC vous allez apprendre…

Astuces de base : tailles de pinceau à la volée et masquesAstuces de base : tailles…
Bonjour et bienvenue à nouveau dans les astuces de Tonton Vinch…

Photomontage : portrait créatifPhotomontage : portrait créatif…
Dans ce tuto Photoshop, d'une heure vous apprendrez à créer…

Détourer une photo complexeDétourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…

Créer une maquette de site internet web 2.0Créer une maquette de site…
Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre…

Les outils de la retouche mannequinLes outils de la retouche…
Dans ce Tuto Photoshop CS5 dédié à la retouche, nous verrons…

Découper et intégrer une maquette de site internet web 2.0Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Tuto utile et super précis ! Merci

Lire les autres témoignages

 

D'autres tuto de spykrew07

Scindez vos textes en colonnes pour faciliter la lectureScindez vos textes en colonnes pour faciliter la lecture
Dans ce tuto CSS3, en vidéo, nous allons voir comment il est simple avec de nouvelles…

Découvrez l'outil texte de Photoshop en détailDécouvrez l'outil texte de Photoshop en détail
Dans ce tuto Photoshop, nous allons découvrir ensemble les fonctionnalités de l'outil…

Créer un accordéon horizontal pour vos derniers articlesCréer un accordéon horizontal pour vos derniers articles
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment créer un accordéon…

Créer, utiliser et mettre à l'échelle un motifCréer, utiliser et mettre à l'échelle un motif
Dans ce tuto Illustrator, en vidéo, nous allons voir ensemble comment créer un motif…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (23 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (42)

par mizuholuxa voté :
(a acheté ce tuto - 23 novembre 2013)

" excellent super pedagogued d sf sdfs f sdf sf sdf sf "

par nescafe33a voté :
(a acheté ce tuto - 13 juillet 2013)

" Tuto très bien expliqué. Rien à dire, tout était très clair.
Merci. "

par spykrew07
(auteur de ce tuto - 30 mai 2013)

" @yezza Je suis très content d'avoir changé ta vie lol ! Bonne continuation dans la création de site web et à bientôt pour de nouveaux tutos ;) "

par yezzaa voté :
(a acheté ce tuto - 29 mai 2013)

" Bravo spykrew ! Je suis une novice en Photoshop (à part ouvrir un fichier et recadrer une image, je n'allais pas bien loin), tu as fait un vrai miracle : moi avoir tout compris et tout fais me myself and I. Tu ne peux pas savoir combien tu as changé ma vie :) !!! "

par spykrew07
(auteur de ce tuto - 04 mai 2013)

" @Stevatox Qu'est ce que tu n'as pas compris ? Ce sont juste des icônes menant vers les réseaux sociaux facebool et twitter c'est tout... "

par Stevatoxa voté :
(a acheté ce tuto - 03 mai 2013)

" Super mais j'ai pas compris pour ce qui est des logos des réseaux sociaux... "

par spykrew07
(auteur de ce tuto - 15 novembre 2012)

" @doudoustaff Merci pour ce super retour, j'espère que tu vas te régaler avec la suite ;) "

par doudoustaffa voté :
(a acheté ce tuto - 15 novembre 2012)

" Chouette design agréable à reproduire.
Bonne pédagogie.

Formation à acheter les yeux fermés si l'on souhaite débuter dans la conception graphique d'un site web.
Pour ma part j'enchaîne sur la formation de l'intégration HTML, CSS. "

par spykrew07
(auteur de ce tuto - 25 octobre 2012)

" @steph15 Y'a pas de raison, tout est expliqué le plus simplement possible ;) "

par steph15a voté :
(a acheté ce tuto - 24 octobre 2012)

" pour l'instant tout va bien :)
pourvu que ça dure... "

par aiboriona voté :
(a acheté ce tuto - 02 octobre 2012)

" Cours assez complet qui m'a permis de me familiariser à nouveau avec Photoshop pour les maquettes graphiques de site Internet. Ce que j'avais perdu de vu depuis la fin de mes études.

Si j'ai une suggestion à faire ou un bémol à signaler ça aurait d'avoir une vidéo de 5 ou 10 min pour nous expliquer la composition d'un site, quelques alternatives et pourquoi, au lieu de mettre des guides à certains points sans comprendre.

Mais merci et bravo à l'auteur! "

par spykrew07
(auteur de ce tuto - 29 septembre 2012)

" @Greg1 la CS4 te suffira amplement pour cette formation, tu peux foncer ;) "

par Greg1
(a acheté ce tuto - 28 septembre 2012)

" bonsoir,j ai la version cs4 est ce je peux rencontrer des difficultes si je la prend?

merci "

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

" Bon tuto.
Des hésitations mais c'est tout à fait normal en phase de créa... "

par samsata voté :
(a acheté ce tuto - 21 septembre 2012)

" Tuto très clair, projet qui rend vite super bien à l'écran. Le formateur oublie parfois quelques points mais revient très vite dessus, cela sera une aide précieuse lorsque nous serons seuls face à l'écran ; cela nous permettra de percuter plus vite sur l'erreur et de savoir comment la contourner.
Très satisfaite du tuto, je me lance sur la formation intégration qui en est la suite ! "

par spykrew07
(auteur de ce tuto - 10 septembre 2012)

" @PascalX @Driamar Merci à vous ça fait vraiment plaisir, j'espère que je continuerai à vous apprendre beaucoup de choses ;) "

par PascalX
(a acheté ce tuto - 10 septembre 2012)

" Pleins de petites astuces, la façon de travailler de Spykrew07 est vraiment enrichissante en tout points de vue.
Une fois de plus bravo pour ce super tuto ! "

par Driamara voté :
(a acheté ce tuto - 08 septembre 2012)

" Pleins de petites techniques très utiles :D J'adore "

par bass33
(a acheté ce tuto - 01 septembre 2012)

" Excellent, cette formation risque être très instructive :) "

par spykrew07
(auteur de ce tuto - 31 août 2012)

" @bass33 Si tout se passe bien, la partie intégration sort lundi ;) "

par bass33
(a acheté ce tuto - 31 août 2012)

" j'attends aussi la partie intégration avec impatiente. Quand sera tu en mesure de mettre cette formation a la vente ? "

par Pumbostara voté :
(a acheté ce tuto - 26 août 2012)

" Excellent, comme d'habitude :) Une idée de la date de sortie de la partie intégration ?

Merci encore pour ton boulot ! "

par lolodena voté :
(a acheté ce tuto - 24 août 2012)

" Excellent tuto, très bien expliqué et très agréable à suivre, bravo !
J'ai hâte de suivre la partie intégration maintenant ;)
Et je suis le mouvement pour t'encourager à réaliser une formation sur php, je serais une des premières à l'acheter ! "

par TH64a voté :
(a acheté ce tuto - 23 août 2012)

" super intéressant, vivement la partie integration !!! "

par Fralalaa voté :
(a acheté ce tuto - 21 août 2012)

" La suggestion d'un tutoriel mêlant du php avec html et css est très pertinente :P je serait aussi très intéressé ! Très bonne formation, précise et complète ! "

par samellitea voté :
(a acheté ce tuto - 21 août 2012)

" L'intégration avant fin aout, ce serait parfait ;)
Pour les prochains tutos, est-ce que tu pourrai nous proposer un site entièrement sur PHP ?
Vraiment fan, toujours bien expliqués tes tutos, précis et clairs, j'apprends beaucoup - Merci Adrien ! "

par petitemarizettea voté :
(a acheté ce tuto - 20 août 2012)

" Superbe formation ! Très intéressante, même si on n'est pas débutant en photoshop ! On apprend toujours quelque chose de nouveau... J'attends avec IMPATIENCE le tutorial suivant : intégration en html5 et CSS3 ! "

par spykrew07
(auteur de ce tuto - 20 août 2012)

" @samellite Je devais le faire la semaine dernière mais j'en ai sorti un autre finalement, mais la suite de celui-ci sortira avant fin août j'espère ;) "

par samellitea voté :
(a acheté ce tuto - 20 août 2012)

" A quand l'intégration Adrien ?
:)) "

par thomasbessa voté :
(a acheté ce tuto - 17 août 2012)

" Excellent Tuto et très beau design ! Vivement l'intégration... "

par murielloua voté :
(a acheté ce tuto - 13 août 2012)

" Magnifique, j'attends avec impatience la deuxieme partie qui ira, je l'espère jusqu'à la mise en ligne!
Merci
Murielle "

par vd2012a voté :
(a acheté ce tuto - 13 août 2012)

" Premier tuto que je fais avec toi. Je crois que je vais devenir fan... lol
Je suis d'accord avec ce qui a déjà été dit ici donc je ne répète pas...
Impatiente de suivre la suite pour l'intégration !
Allez Adrien, au boulot, on t'attend ! ;-) "

par MJVHa voté :
(a acheté ce tuto - 13 août 2012)

" Très bon tutoriel, j'ai appris plein de choses sur les fonctions et le design sur photoshop. Vivement la seconde partie qui m'interesse encore plus. Une date de disponibilité pour la seconde partie ? "

par spykrew07
(auteur de ce tuto - 11 août 2012)

" @thesdumarche Oui bien sur, n'importe quelle structure HTML/CSS peut être intégrer à WordPress ;) "

par Viniwowa voté :
(a acheté ce tuto - 11 août 2012)

" Excellent tuto très agréable à suivre !
Tout est bien décomposé et expliqué, c'est parfait !
Vivement la seconde partie ! "

par thesdumarche
(a acheté ce tuto - 11 août 2012)

" Bonjour,

Premièrement, je vous félicite pour ce tuto, j'aime le timbre de voix et le débit de la formation. D'ailleurs, vous faites partis de mes formateurs préférés.

J'aimerais savoir si cette technique "one page" est intégrable à Wordpress?

Merci "

par Fralalaa voté :
(a acheté ce tuto - 11 août 2012)

" Très intéressant simple et concis, en attendant rapidement le prochain tutoriel pour l'intégration ! "

par LoFicsa voté :
(a acheté ce tuto - 10 août 2012)

" Très bon tutorial. Clair, précis, le formateur est pédagogue, en nous apprenant les bonnes bases pour la création d'une maquette.
Hâte d'avoir la suite pour l'intégration. "

par spykrew07
(auteur de ce tuto - 10 août 2012)

" @samellite Je ferai le tuto la semaine prochaine je pense ;) "

par samellitea voté :
(a acheté ce tuto - 10 août 2012)

" " Également intéressée par ce tuto, que d'ailleurs je n'ai pas hésité à acheter l'intégration sera traitée bientôt, mais quand ? ..... :-)
Merci ! " "

par spykrew07
(auteur de ce tuto - 09 août 2012)

" @Fralala Oui l'intégration sera traitée dans un autre tuto bientôt ;) Bonne formation !! "

par Fralalaa voté :
(a acheté ce tuto - 09 août 2012)

" Bonjour,
Ce tutoriel m'intéresse beaucoup, mais j'aimerai savoir si la partie intégration du site sera traitée, si un tutoriel sera dédié à ce sujet par la suite ?
merci :) "

 

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 CS5 d’une durée de 2 heures 5 minutes a été acheté 331 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 8 août 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/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.

Ce tuto video 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 !