Dans ce tuto Photoshop vous allez pourvoir apprendre et comprendre le fonctionnement d'un graphiste sur Photoshop pour créer votre propre maquette de site internet.
Cette vidéo est adaptée aux novices tout comme aux passionnés de web design à petit budget (ce tuto est compatible CS2, CS3, CS4, CS5)
Résultat final obtenu grâce à ce tuto :
Vous allez pouvoir au fil des chapitres mettre en place une maquette de site internet design et dans l'air du temps : le Web 2.0
Techniques abordées dans ce tuto Photoshop
- Optimisation et rangement de la palette des calques (gestion des dossiers,...)
- Apprendre à faire un dégradé
- Utilisation d'un Framework (960 GS template)
- Redimensionnement d'image et d'objet
- Création d'un logo et boutons Web 2.0
- Gestion des polices (Gestion interligne, Paragraphe,...)
- Gestion de l'espace (alignement, repères, règles,...)
- Gestion des options de fusion
- Gestion styles de calques
Jetez un oeil à ces autres tuto Photoshop CS5
Détourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…
Effet de reflet simplement
Dans ce tuto Photoshop CS5, vous allez apprendre simplement…
Introduction au plugin Fractalius…
Dans ce mini tuto Photoshop CS5, je vais vous présenter le…
Reproduire le logo de tuto.com…
Dans ce tuto Photoshop CS5 nous apprendrons à reproduire le…
Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…
Image typo : remplir une image…
Dans ce tuto Photoshop CS5 vous allez apprendre à réaliser…
Détourer une photo complexe…
Dans ce tuto Photoshop CS5, je vous propose de détourer un…
Digital Painting et pinceau…
Cette tuto Photoshop CS5 vous apprendra à transformer une photo…
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 22 minutes est proposée dans une résolution plus grande que l’extrait suivant :
bpdesign
a vendu plus de 300 tutos, contributeur.
Utilisateur adobe photoshop depuis plus de 10 ans, je suis très sensible au webdesign et à la publicité. Aujourd'hui auto-entrepreneur dans la création de site internet pour les PME, professionnels et particuliers, je vous propose mes connaissances en la matière. Je vous souhaite une très bonne visite et n'hésitez pas à me contacter.
Tuto du même auteur
Créer une maquette de slideshow
Dans ce tuto Photoshop CS5, vous allez pouvoir créer votre propre maquette Photoshop d'un slideshow…
Créer une icône Web 2.0
Dans ce tuto Photoshop vous allez apprendre à réaliser une icône Web 2.0 glossy et raffinée. Vous…
Image typo : remplir une image avec du texte
Dans ce tuto Photoshop CS5 vous allez apprendre à réaliser un effet typographique, en remplissant…
Réaliser un scrolling animé
Dans ce tuto Flash Catalyst CS5, nous allons réaliser un scrolling animé à partir d'un PSD Photoshop…
Notes attribuées par les utilisateurs
Les avis / Questions des utilisateurs
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 22 minutes a été acheté plus de 200 fois et a reçu une note moyenne de 4/5.
Ce tuto a été publié par bpdesign, contributeur, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto qui se présente sous la forme d’une vidéo,
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.
Choisissez parmi 10957 tuto classés dans nos 138 logiciels ou parmi nos thématiques. 
(a acheté le tuto)
" Bonjour, jai vraiment beaucoup aimé ce tuto, très bien expliqué je trouve même pour les débutants dont je fais parti, j'ai vraiment hate le tuto sur la partie html pour pouvoir passer à l'étape supérieure pour la création du site, merci beaucoup.
ps: ce serait cool de mettre avec les tutos les fichiers sources, merci à+
ps2: il aurait fallut changer le logo weecast..... "
(auteur de ce tuto)
" Bonjour sibuno, heureux de savoir que vous avez apprécié mon tutoirel, pour le fichier psd je le joindrais dès que possible au tutoriel (vendredi).
Quand au logo Weecast effectivement j'aurai pu le changer mais il était trop tard j'avais déjà enregistré plus de 50 minutes de tuto avec...
Merci "
(a acheté le tuto)
" la suite se fera avec catalyst? "
(auteur de ce tuto)
" Bonjour, je ne connais pas assez bien Flash Catalyst pour vous aider. Nous allons réalisé le site en utilisant le framework 960 GS.
Je pense qu'il est toujours bon pour commencer de savoir coder au moins en html / css, connaître les bases, non? "
(a acheté le tuto)
" bien sur!!!!
c'était juste une question car Artkabis a fait un tuto sur ce soft et les fichiers photoshop, donc au contraire je suis ravi que ce ne soit pas avec catalyst, merci d'avance.
ps: merci pour les fichiers sources, super!!!!!!! "
(a acheté le tuto)
" Super pour un premier tuto c'est absoument ce que je cherche, vivement la suite est encore merci a bientot "
(a acheté le tuto)
" Encore bravo pour ce tuto qui est très bien expliqué. Vraiment hate de voir la suite html css pour enfin savoir comment découper une maquette photoshop. Merci beaucoup. "
(auteur de ce tuto)
" Merci pour tous ces messages d'encouragements! La suite arrivera d'ici 2 à 3 semaines maxi sauf imprévu ;) "
(a acheté le tuto)
" Bonsoir,
Le tuto m'a l'air superbe mais cependant je n'arrive pas à le visionner via le player...
Suis-je le seul ?
En vous remerciant d'avance et en vous souhaitant une bonne soirée. "
(auteur de ce tuto)
" C'est bizarre oui, je n'ai pas eu de commentaire de ce genre jusqu'à présent, contacter peut être le service de tuto.com? Je ne peux intervenir pour ça en tout cas ;) "
(a acheté le tuto)
" Bravo pour ce tutoriel très clair, j'attends avec impatience la suite (que je croyais intégrée dans celui-ci puisque le titre parlé d'intégration). La page finale étant difficilement discernable, j'ai tapé un peu partout là où se trouvent les étoiles d'évaluation, et du coup ça donnait, je pense, seulement trois étoiles au lieu des cinq que j'aurais voulu donner...désolé!!! "
(a acheté le tuto)
" Bonjour,
Excellent tuto, bravo.
Comme tous ici j'ai vraiment hate de visionner votre prochain tuto sur l'intégration html/css de cette maquette, une date ?
Karine "
(auteur de ce tuto)
" Bonsoir, j'essaie de faire au plus vite en jonglant avec mon travail ainsi que mon auto-entreprise et ma vie privée (encore heureux ^^).
J'aimerai vous en faire profiter ce weekend voir d'ici 2 semaines maximum ;) "
(a acheté le tuto)
" Génial, merci !
k "
(a acheté le tuto)
" merci "
(auteur de ce tuto)
" Après une lutte acharnée avec mon Mac, screenflow et autre la Partie 2/2 arrive ce soir chez tuto.com ;) "
(a acheté le tuto)
" merci encore pour ce magnifique tuto super bien expliquez !!!! ;)
je n ai pas trouvé la partie 2 ( decoupe / codage etc..) est-elle disponible ?
"
(auteur de ce tuto)
" Non elle le sera dansla semaine, quelque problème de taille concernant la vidéo retarde son envoie...mais ce soir tout est réglé et surement disponible demain... "
(a acheté le tuto)
" ok merci a toi pour cette reponse rapide,
en tout cas je recommande ce tuto super complet et vu le prix on ne peut passer a coté ;) "
(auteur de ce tuto)
" je vous rappelle à tous que la partie 2/2 est disponible à cette adresse:
http://fr.tuto.com/photoshop_dreamweaver/decouper-et-integrer-une-maquette-de-site-internet-web-2-0-photoshop-dreamweaver,13160.html "
(a acheté le tuto)
" Ce tuto est exceptionnel de simplicité et de qualité. Il s'adapte très bien aux débutants comme moi. Il m'a permis de mieux utiliser ma version US de Photoshop CS5.
Une fois fini, je me lancerai dans le second volet consacré à la mise sous html.
Merci beaucoup. "
(auteur de ce tuto)
" C'est avec plaisir que je vous lie et je vous en remercie moi aussi "
(a acheté le tuto)
" Bon tuto pour un premier comme tu le dis à la fin de ta vidéo. Juste une seule chose si je peux me permettre, c'est la taille graphique de ta vidéo par moment je ne vois pas ce que tu écris ainsi que ton curseur. Sinon bien expliquer je conseille cette vidéo, moi même designer.
Cordialement,
Bruno "
(auteur de ce tuto)
" Merci, oui le problème que j'esquiverai pour les prochains tutos est que je bosse sur un iMac de 27" pouces ce qui diminue la vision des détails...Maintenant je procède à un zoom et de toute manière si un doute persiste chez un utilisateur je l'invite à me contacter comme l'on fait quelques uns via mon mail, mon site, ou le forum ;)
Merci pour votre contribution à mon égard! "
(a acheté le tuto)
" Bonjour,
est ce adaptable pour CS4 ?
Car je vois que c'est pour CS5 mais tout le monde ne l'a pas.
Alors si j'achète ce tuto puis je le refaire avec CS4?
Merci beaucoup
Albin "
(auteur de ce tuto)
" Oui bien sur, je le précise dans la description du tuto. Adaptable CS2, CS3, CS4 "
(a acheté le tuto)
" J'ai un petit souci en faisant le logo. Je trouve que les 3 carrés sont pixelisé. Y a t-il quelque chose à faire.
Merci. "
(auteur de ce tuto)
" Alors 2 façons de faire:
- Soit vous faîtes un carré de taille 3 à 4 fois supérieur et que vous diminuez à la taille souhaitée (impossible de pixeliser en réduisant un objet)
- Soit vous avez Illustrator à votre disposition et vous faîtes les mêmes manipulations sous ce logiciel. Une fois terminé il ne vous restes plus qu'à faire glisser vos calques dans photoshop directement.
"
(a acheté le tuto)
" Merci de votre réponse "
(a acheté le tuto)
" Merci beaucoup pour ce tuto ! Je viens tout juste de l' acquérir et je vais le réaliser de ce pas !!!
Merci bpdesign ! "