Tutoriel vidéo Photoshop : Créer un design web

Tutoriel Photoshop

Dans ce tutoriel vidéo vous apprendrez les rudiments du design web. Pour structurer notre interface nous utiliseront une grille (960 grid system).

Ce tutoriel montre une démarche particulière, la mienne, pour créer une interface web. Ce n'est en aucun cas un standard mais plutôt une démonstration de ma façon de faire (bonne ou mauvaise) qui je l'espère vous permettra de découvrir des choses.

Tags :

Tutoriel Photoshop posté Samedi 19 Décembre 2009
 140 Commentaires
Ils l'ont utilisé
Vos commentaires
Laisser un commentaire

Technostyle (Mardi 22 Décembre 2009 à 23:02):

Super tutoriel

Mikiro (Mardi 22 Décembre 2009 à 23:10):

J'attendais un tuto de ce genre depuis longtemps merci beaucoup !

ZiPo (Mardi 22 Décembre 2009 à 23:20):

Tu lis dans mes pensées ?! En ce moment je fais que chercher un tuto de ce genre et tu le sors, l'autre fois je cherchais pour wordpress et t'as sorti un tuto dessus ^^, bref => Merci

elscorto (Mardi 22 Décembre 2009 à 23:34):

Merci pour le tuto,je ne l'ai pas encore regardé mais je vais m'en faire un plaisir.Je sais pas si tu l'as fait par rapport à ma demande,mais si c'est le cas,merci bien à toi.

OverSpeed (Mardi 22 Décembre 2009 à 23:46):

Merci beaucoup pour ce tuto

Joe (Mercredi 23 Décembre 2009 à 00:01):

Très bien le tuto ! J'ai tout regarder et j'aime beaucoup, j'ai découvert pas mal de choses très utile.
Je t'en remercie et te souhaite une bonne continuation

<em>Un tweet et non twitt.</em>

Remus (Mercredi 23 Décembre 2009 à 00:10):

Même en HQ sur Dailymotion la video n'est pas net, impossible de lire si tu n'est pas en zoom sur la zone… c'est fort dommage

Grafikart (Mercredi 23 Décembre 2009 à 00:31):

Il faut attendre la version HD dans ce cas. Là tout sera net

Remus (Mercredi 23 Décembre 2009 à 21:02):

J'était trop impatient… ça fonctionne impec maintenant

koudji (Mercredi 23 Décembre 2009 à 00:38):

J'ai essayé de télécharger le fichier Zip et je suis tombé sur une page erreur 404. Ce n'est pas bien grave, je vais commencer par regarder la vidéo. Merci pour cette vidéo.

Grafikart (Mercredi 23 Décembre 2009 à 00:52):

Merci de me le faire remarquer, c'est corrigé.

alexis (Mercredi 23 Décembre 2009 à 00:57):

super tutoriel, et sur photoshop quel est le raccourci permettant de masquer les règles ? et aussi quel est votre logiciel de capture d'écran ? merci

Harry (Mercredi 23 Décembre 2009 à 01:28):

Ctrl+R pour les règles et Camtasia pour le screencast

alexis (Mercredi 23 Décembre 2009 à 01:47):

lol ctrl + R me cache les règles mais pour les traits bleu flashi ? et pas pour le screencast mais pour le screenshot, le logiciel apparait a un moment dans le tutoriel. xD

Grafikart (Mercredi 23 Décembre 2009 à 01:59):

Ctrl+H pour les repère, l'outil de capture c'est le truc par défaut sur Vista/Seven

tginja (Mercredi 23 Décembre 2009 à 01:42):

Merci !

Antwane (Mercredi 23 Décembre 2009 à 01:58):

@alexis : Pour cacher les règles, c'est Ctrl+H, pour le logiciels de capture c'est celui integré à Windows Seven qui s'appelle tout simplement "Outil Capture"

Merci pour le tuto

MarcBook (Mercredi 23 Décembre 2009 à 10:07):

Magnifique :D Tu es super fort ! Je vais m'abonner pour avoir les vidéos en HD

Ratatouille (Mercredi 23 Décembre 2009 à 11:26):

Yep un super bon tuto.
J'ai juste une petite astuce à te donner pour dupliquer un calque (parce que ton clic sur le calque + dupliquer a failli me tuer xD)
Tu peux faire CTRL+J (ou Pomme+J) pour dupliquer un calque ou alors déplacer le calque en maintenant ALT avec la flèche noire (V)
(et pour aligner les photos et qu'elles aient le même espacement rapidement y a les option d'alignement dispo avec la flèche noire aussi ^^)

Grafikart (Mercredi 23 Décembre 2009 à 11:58):

Héhé merci pour les astuces

Krome (Mercredi 23 Décembre 2009 à 14:27):

Bravo pour ce tuto !
Ratatouille m'a devancé pour les options d'alignement
Autre info qui peut être utile concernant l'outil Kuler il est intégré à la suite Adobe depuis la CS3 il me semble et le panneau est affichable depuis le menu fenêtre->extensions->Kuler

Voilou

Rocambolesque (Mercredi 23 Décembre 2009 à 12:19):

C'est super bien expliqué ! Encore merci (:

Rocambolesque (Mercredi 23 Décembre 2009 à 12:30):

PS : Kouleur ( si c'est en allemand , oui c'est Kouleur )

versus (Mercredi 23 Décembre 2009 à 13:17):

Trop classe ! Si j'avais plus d'inspiration pour faire un design beau comme ça <3

cerise (Mercredi 23 Décembre 2009 à 13:32):

C'est toujours un plaisir de te voir travailler a travers la vidéo
Merci vraiment t'es vraiment le meilleur ;O)

leknoppix (Mercredi 23 Décembre 2009 à 13:52):

Que dire mise à part Merci et Génial? Des idées?

Sidjack (Mercredi 23 Décembre 2009 à 14:14):

Super tuto !!! Maintenant se serait super de proposer un tuto permettant de découper le design afin de l'exporter dans du code xhtml/Css car je me rappel qu'à mes débuts ce ne fut pas simple

Badbart (Mercredi 23 Décembre 2009 à 14:28):

Déjà fait le tuto pour la découpe !
http://www.grafikart.fr/tutoriels/video/creer-un-site-web-decoupage-22

fantoche (Mercredi 23 Décembre 2009 à 17:15):

Absolument

fantoche (Mercredi 23 Décembre 2009 à 17:17):

Super cour et bonnes combines, merci. Truffé d'astuces pour les débutants sur totoshop.
Pourquoi ne pas mettre les liens , des sites de grid, icones, images etc… dans ta pages des ressources ?

Joyeuses fêtes à tous

Raph (Mercredi 23 Décembre 2009 à 17:40):

Concernant les icônes c'est dans l'article qui précède celui-ci, sur le blog. Pour le site de grid c'est dans la description.

Cdt

fantoche (Jeudi 24 Décembre 2009 à 02:40):

Merci Raph

aemaethe (Mercredi 23 Décembre 2009 à 17:46):

J'utilise ce site pour savoir quels dégradés de couleurs je dois mettre sur un site
http://www.stylephreak.com/cm.php

iPnoTiCaLL (Mercredi 23 Décembre 2009 à 18:37):

Merci =)

Ravi (Mercredi 23 Décembre 2009 à 19:20):

Merci

mathias (Mercredi 23 Décembre 2009 à 19:23):

Bonjour est ce que tu dessine ton design?
J'aimerai savoir si possible comment tu procèdes avant le design sous photosop (au autre)... Merci d'avance!

Raph (Jeudi 24 Décembre 2009 à 15:36):

Je m'en veux de remonter ça, mais je suis vraiment curieux.

On vient bien sur la vidéo que tu n'inventes rien et que tu l'as déjà fait. Comment as-tu procédé ? Papier, inspiration, etc...

Cdt

Mousse (Jeudi 24 Décembre 2009 à 01:19):

Vraiment un grand bravo!

Je suis actuellement dans une école d'infographie/multimédia, tes tutoriels sont très explicatif!

Merci avec un grand M!

Antho (Jeudi 24 Décembre 2009 à 02:51):

Encore un tuto très bien expliqué !

Un grand merci pour toutes tes réalisations et ton partage

Mixta (Jeudi 24 Décembre 2009 à 04:16):

Salut justement je fessait mon templat pour Wordpresse et sa ma beaucoup aider, c'est plus claire et classe à la fois merci pour ce bon tuto.

PS: avec quelle logiciel tu fait les tuto ?

Remus (Jeudi 24 Décembre 2009 à 15:02):

C'est écrit plus haut… Camtasia pour le Screencast (source Harry)

Flomito (Jeudi 24 Décembre 2009 à 12:19):

Super tutoriel, un grand merci à toi.

dechuck (Jeudi 24 Décembre 2009 à 17:13):

Super ton tuto!
Est-ce que tu utilises sur ton site un sticky footer ou quelque chose dans le même genre. Parce j'ai eu un problème avec
mon footer pour un travail d'école.

Remus (Jeudi 24 Décembre 2009 à 17:56):

Question aux Webdesigner : L'avènement du CSS3 a apporté des nouveautés sur la mise en page, le prenez vous en compte lors de la réalisation de votre design ou attendez vous la partie intégration pour vous en soucier ?

Grafikart (Jeudi 24 Décembre 2009 à 19:45):

Actuellement tout le monde nutilise pas de navigateur prenant le css3. Par contre je tiens en compte de cette nouvelle version pour certains effet qui se dégraderons bien genre dégrade ou lueur

Badbart (Jeudi 24 Décembre 2009 à 21:21):

Le Css 3 il y vraiment pas le feu, à mon avis on peu attendre encore 8-12 bons mois.

Raph (Jeudi 24 Décembre 2009 à 22:25):

Avant d'avoir le CSS3 implanté dans 90% des navigateurs(et encore, théoriquement et au niveau de l "accessibilité", faudrait 100%), on aura Adobe Photoshop CS10 :D qui regroupera retouche d'image, vidéo et création 3D

Kagogal (Vendredi 25 Décembre 2009 à 17:46):

Pourquoi être pessimiste à ce point ? Il faut peut-être arrêter vos exemples qui riment à rien.
Tous les futurs navigateurs (Firefox 3.6, IE 9, Safari 5, Google 4, Opéra 10.5) auront la norme CSS3 d'intégrée. Prenez exemple sur la version 4.0 de Google Chrome (version bêta), elle intègre parfaitement la norme CSS3, sans aucun bug.
Vous pouvez très bien coder votre site sans prendre en compte la norme CSS2 qui marche sur quasiment tous les navigateurs (oui, Internet Explorer est à encore bien bas ...). Vous aurez bien sûr des gros bugs, des grosses louches sur les personnes tournantes encore sur les vieux systèmes, mais il faut aller de l'avant.

Badbart (Vendredi 25 Décembre 2009 à 19:02):

Je dirai pas que c'est du pessimisme, plutôt du sens pratique.
Convertir son site en css 3 c'est :
- du boulot (bah oui, les français, entre autre, sont féniant)
- des affichages diffèrent sur les navigateurs (le temps que css 3 soit bien implémenté)
- et sans doute un rendu très moche sur les anciens navigateur.

Pour au final, bah servir à presque rien vu que le site marche très bien en Css 2 sur tout les navigateurs, et que le css 3 apportera pas grand chose de positif.
A la limite s'il y avais eu un super gain en perf ça aurai value (peut être) le coup...
Le css 3 à des fonctions sympa, mais pas vraiment indispensable pour le moment, faut lui laisser le temps de grandir tranquillement.

Harry (Samedi 26 Décembre 2009 à 00:17):

Perso, j'utilise CSS3 pour des "petites" choses qui ne gêneront pas un utilisateur sans CSS3 (par exemple, j'ai mis un text-shadow comme prévu sur le design, mais pour ceux qui n'ont pas le CSS3, il y a seulement le texte...).

Rapha (Samedi 26 Décembre 2009 à 12:24):

Cela reste encore ce qu'il y a de mieux à faire. Comme pour le flash par exemple.

Kagogal (Samedi 26 Décembre 2009 à 15:03):

Personnellement, je me sers déjà de la moitié des balises CSS3, mais j'inscris toujours celle pour le CSS2. Tu peux me dire, à quoi ça sert ? Bah, simplement, quand le temps du CSS2 sera révolu, j'aurai juste à commenter les lignes inutiles, et hop.

Empty (Mercredi 30 Décembre 2009 à 09:31):

8-12 mois c'est optimiste... Tout d'abord parce que les navigateurs utilisent leur propre manière d'appeler le CSS3 pour Safari et Chrome c'est avec -webkit pour Firefox c'est avec -moz plus tard ces préfixe ne seront plus de mise lorsque ça sera standardisé sur tous les navigateurs.

Pour Kagogal évidement les navigateurs l'auront tous d'ici peut... Firefox, ensuite IE espérons ^^ Là où est le problème c'est les utilisateurs qui ne mettent pas leur navigateur à jour... Tu dis tant pis allons de l'avant, ok pour un blog ou des trucs perso... Mais pour les sites de commerces même les petits ne pourront pas se permettre de perdre des clients potentiels tout ça pour faire des trucs joli pour d'autres qui ne seront peut-être jamais clients ^^

Donc oui CSS3 pour tout ce qui est perso et il faudra attendre quelques années avant de le voir sur site e-commerce et autres sites de ventes... Parce quand on voit qu'il y a toujours des utilisateurs d'IE 6 c'est le cauchemar des codeur CSS...

Rapha (Mercredi 30 Décembre 2009 à 10:17):

Et je rajouterais une troisième solution que j'ai déjà abordé dans un com' précédent et que j'ai déjà vu en place.
D'un point de vue générale, on peut faire un site sans CSS3, des plus "basiques" mais qui marche partout ; on peut faire un petite site personnel (blog, portfolio...) en CSS3 et puis basta IE6 & Cie ; on peut faire un site basique et forcer la main aux utilisateurs d'IE6 (parce qu'entre nous, c'est le seul navigateur utilisé encore aujourd'hui qui a plus de dix ans et qui n'intègre même pas la transparence PNG -_-') comme le fait Youtube, Dailymotion, Google, etc... En indiquant le navigateur comme obsolète.

Après c'est à vous de voir, moi j'hésite entre la 1ere solution et la 3eme.

P.S. Ou on a du temps à perdre et on fait une version IE(6) et une version pour tout le monde

darkn1ko (Jeudi 24 Décembre 2009 à 18:56):

difficile d utiliser le css 3 pleinement quand 20% des gens se trimballent encore ie6 sans parler d ie7 et ie8

Kagogal (Vendredi 25 Décembre 2009 à 17:42):

Je ne suis pas tout à fait d'accord avec toi.
Je veux bien comprendre le fait que tous les navigateurs ne sont pas compatibles avec le CSS3 (comme Internet Explorer 6, 7 et 8), mais ce n'est pas une raison pour bloquer l'accès aux autres navigateurs.

Bien sûr, il risque d'y avoir une belle différence entre, mais il y a toujours moyen de rendre le site compatible pour tous les systèmes, navigateurs ... Mais, je ne vois pas pourquoi se priver d'utiliser la norme CSS3 parce que certains navigateurs ne le prennent pas.

Raph (Vendredi 25 Décembre 2009 à 20:05):

Et c'est là le hic...

Certains navigateurs peut-être, mais des gens sur des versions inférieures à IE8, y en a pas mal. Je tiens à rappeler également que la plupart des gens aujourd'hui tournent sur Windows, dont une quarantaine de % sur XP qui, il me semble, inclue la version 6 d'explorer. On souhaite quand même un site plus accessible, qui s'affiche bien partout, quitte à se débarrasser de quelques effets sympas (j'adore le CSS3 rien n'empêche, c'est un grand pas dans la mise en page etc...) et surtout d'heures de travail en plus pour arriver à :

if(browser==MSIE){
//Version en CSS2
}
else{
//Version classique
}

Et, je souhaiterais rajouter pour tout ceux qui prônent Internet Explorer 8, qui souligne l'avancement de Microsoft en terme de compatibilité, qu'ils peuvent sortir 200 versions d'IE, c'est pas pour ça que les gens se mettront à jour... Après, à voir s'il faut leur forcer la main comme le font Youtube, Dailymotion, Google & Cie en indiquant que leur navigateur est "obsolète" et qu'il ne bénéficiera plus de mises à jours.

+1 Badbart

Badbart (Vendredi 25 Décembre 2009 à 21:26):

Si Microsoft forcé les gens a mettre à jour leurs navigateur ca serait trop bien. Mais il y aurai encore c'est c***** de chez Opera et Mozilla pour coller un procès et faire chi*** pendant 6mois pour une raison a la c** , hélas !

Aleks (Vendredi 25 Décembre 2009 à 15:46):

Vraiment super, comme d'hab' .

Rapha (Vendredi 25 Décembre 2009 à 21:39):

Hmm,

Microsoft n'a jamais incorporé de mise à jour automatique dans ses navigateurs et je ne pense que c'est maintenant qu'il va commencer (oopa), enfin je ne sais pas, peut-être l'a t'il fait dans IE8.

C'est quoi cette histoire de procès ? Je sais qu'il y en a eu un parce que Microsoft fait (ferait) de la vente lié en incorporant à ses OS Internet Explorer, mais je vois pas le rapport

Cdt

Kagogal (Samedi 26 Décembre 2009 à 15:01):

Il faut attendre la version 9 je pense ... après, ils font comme ils veulent ces noobs ^^

sender (Samedi 26 Décembre 2009 à 15:03):

voilà à koi on s'attend de vous des exemples concrets. c'est le meilleur cadeau de fin d'année que nous avons eu. merci d'etre toujour à la hauteur de nos attentes. 1000 mmerci

Djawadshow (Samedi 26 Décembre 2009 à 15:47):

SVP dans le tuto vos avez mentionné le site des photos gratuit http://www.sxc.hu.
vous n'auriez pas par hasard un site du même genre qui propose des clips gratuit.
par exemple: http://allbetsareoff.com/products/crowd-control/
spécialement je cherche des "silhouette dancer"
Merci

Grafikart (Mardi 29 Décembre 2009 à 12:04):

Je ne connais pas de site qui fait ça.

ZiPo (Samedi 26 Décembre 2009 à 20:02):

Comme je l'ai vu plus haut : je suis aussi intéressé par la procédure avant la réalisation de ton design, pour tout ce qui est inspiration, brouillon etc.

Merci

mathias (Samedi 26 Décembre 2009 à 22:58):

Tres bon tuto...

ael (Dimanche 27 Décembre 2009 à 12:13):

bravo pour ce tuto graf, moi qui galérais a placer les éléments, ca m'aide bien

Otaku-mad (Dimanche 27 Décembre 2009 à 17:27):

Tutoriel très sympa
J'ai appris de nombreuses astuces qui rendent la création d'un webdesign moins laborieuse^^ (je n'ai toujours pas le réflexe d'utiliser des repères notamment^^').
Encore une fois un très bon tutoriel et un très bon site

Iguanes (Lundi 28 Décembre 2009 à 11:06):

Bas moi je dis chapeau.
C'est un super tutoriel très bien réussi.

greg (Lundi 28 Décembre 2009 à 17:35):

Que ce soit grid ou 960
Je pensai que les grilles était utiliser en css ? Eh non pas comme cela ..
j'ai pas bien compris

Sinon super tuto comme d'hab

Grafikart (Lundi 28 Décembre 2009 à 19:32):

La grille sert aussi au CSS. Mais si le design n'a pas été réalisé en suivant une grille il sera impossible à l'intégrateur d'en utiliser une. Donc utiliser une grille pour le design permet ensuite de se servir de la même grille pour le CSS.

Slown (Mercredi 30 Décembre 2009 à 11:35):

Excellent Tuto, étant intégrateur j'utilise depuis peu (un peu réticent au départ) le framework Bluebrint qui permet l'intégration d'un site à partir d'une grille de 950px mais comme dit si bien Grafikart s'est un gain de temps énorme pour l'intégrateur à condition que la charte est été réalisée à partir d'une grille sinon c'est la m....

greg (Mercredi 30 Décembre 2009 à 13:41):

Bonjour

Je te remercie pour ta réponse
Le fait d'utiliser ce type de grille évite t-il d'avoir plusieurs type de" css" pour chaque navigateurs ?
En particulier ie 6

Merci et bonne

OoimedoO (Vendredi 01 Janvier 2010 à 01:18):

Bonjour. Tous d'abord je tiens a te remercié pour ton tutorial sa ma permit d'approfonir mes connaissance sur photoshop et avoir un peu plus d'idée concernant le webdesign.

Juste un petit conseil pour la duplication d'un calque tu maintient le clic gauche et alt en meme temps tu bouge ( la flèche ) et hop tu a un deuxieme :D

Darkavatars (Samedi 02 Janvier 2010 à 22:41):

Bonsoir j'ai une question comment fait-on pour mettre une image l'une sur l'autre comme dans ton tuto le corps du site et sur l'images, l'espèce de barre ou tu note une petit description de la photo? mais maintenant je suis au niveau codage et je coince a se niveau.

pamou (Dimanche 03 Janvier 2010 à 00:32):

@ Darkavatars : avec z-index je pense ...

fantoche (Dimanche 03 Janvier 2010 à 17:10):

Je viens de terminer le tuto, TERRIBLE comme d'hab…
merki

gilles40 (Dimanche 03 Janvier 2010 à 18:07):

Salut à tous,

Voila je suis entrain d essayer le tuto et j ai un soucis avec l outil plume pour faire les courbes du design peux tu m en dire un peu plus?

merci d'avance

Gilles

JLou (Mardi 05 Janvier 2010 à 20:38):

Sympa le tuto

Mais utiliser un design fixe n'est pas vraiment la meilleure solution je trouve.
Je reconnais que sa facilite bien la vie mais rien ne vaut un design fluide. Avoir un site adapté a sa résolution est quand même plus cool, surtout pour les écrans larges.
D'ailleurs il n'y a pas des versions fluides de 960 ? Je sais que certains framework CSS le propose mais je ne suis pas sur que ce soit le cas de 960

Grafikart (Mercredi 06 Janvier 2010 à 03:04):

Le débat fixe/fluide est sans fin
Effectivement il existe des grilles fluide mais je ne me suis jamais penché sur la question.

Darkavatars (Mercredi 06 Janvier 2010 à 18:00):

Salut Grafikart :-) tu utilise quel logiciel pour faire tes vidéo ?

Harry (Mercredi 06 Janvier 2010 à 18:05):

Camtasia ('fin jcrois)

JLou (Vendredi 08 Janvier 2010 à 00:02):

J'ai trouvé ^^
http://www.designinfluences.com/fluid960gs/
Par contre j'ai pas encore testé.

d40x (Vendredi 08 Janvier 2010 à 20:07):

super tuto!
Ton site est une véritable mine d'or!

Baptiste (Samedi 09 Janvier 2010 à 16:54):

Salut Graph!
encore un super tuto qui donne envie de recommencer... c'est la 9eme version de mon site que je refais en local car tu ressors toujours un tuto utile! lol Il faut que je me fixe un jour!

Pourrais tu faire un tuto sur "la législation": genre ce qu'il faut mettre dans les mentions légales en bas de page etc... ou simplement un article sur le blog!
Peut etre aussi un tuto sur l'utilité de twitter (j'ai pas encore compris ce que c'était! ^^)

Et pendant que j'y suis, deux autres propositions:
- un tuto sur comment faire des infobules animées comme dans ton module "partage"
- comment faire des boutons flexibles en CSS: pour un bouton flexible je dois faire une div à gauche pour l'arrondit gauche, une à droite et une au milieu (pour le texte), ça alourdit le code je trouve! or en regardant l'image que tu utilises pour les modules de droite de ton site, je vois que c'est une grande image qui s'adapte à la taille du module... ça doit pouvoir s'exporter pour les boutons, et c'est bien pratique!!


Merci Jonathan
@+

eowel (Samedi 09 Janvier 2010 à 18:08):

Bonjour,
Mon outils plume ne veut plus me faire de "forme" mais me fait que des "tracés" !!! Aidez moi svp

Woa (Samedi 09 Janvier 2010 à 18:14):

Vérifie qu'il est bien sur "Calque de forme" et non "Tracée"!

Woa,

eowel (Dimanche 10 Janvier 2010 à 16:57):

Grafikart pourrait t'on avoir un tuto pour le découpage de se genre de site web plus avancé, j'essaye t'en bien que mal avec ton tuto sur le découpage du site web du template de manu, mais sans grand succès!
Merci d'avance...

Universel (Lundi 11 Janvier 2010 à 17:56):

Très bon tutoriel, comme les autres d'ailleurs...
Encore merci !

Baptiste (Lundi 11 Janvier 2010 à 19:46):

Re!
comment fais-tu pour que la plume dessine en rectiligne stp?
merci!
++

Grafikart (Lundi 11 Janvier 2010 à 21:21):

En maintenant la touche Maj appuyée

LimeCitrus (Mardi 12 Janvier 2010 à 14:40):

Encore un tout bon tuto, Merci!!!

Mathieu (Jeudi 14 Janvier 2010 à 01:04):

Merci beaucoup pour ce tuto, je trouve que tu explique super bien et ton travail est très propre, carré.

Manuuu (Jeudi 14 Janvier 2010 à 11:57):

Bonjour et merci. Mais je ne comprend pas a quoi sert exactement la grille ?

Rez (Mercredi 20 Janvier 2010 à 01:56):

Merci beaucoup pour ce tutoriel vraiment passionnant je voudrais juste savoir aprés si je voudrais programmer les bouttons blancs pour changer les images avec les effets quelles étapes devrais-je suivre?

Rusura (Jeudi 21 Janvier 2010 à 13:43):

Merci beaucoup pour ce tutoriel mais j'ai un petit soucis: à chaque fois je ne sais pas aller plus haut(ou plus bas)que la zone de travail ce qu'il fait que lorsque je doit aller en dehors pour créer des formes avec l'outil plume je ne peut pas et je ne trouve pas comment retirer cette fonction.

bemaluvi (Vendredi 22 Janvier 2010 à 22:13):

Bonjour, une question me taraude : n'ayant jamais travaillé en agence, je me demande comment on attaque un projet Web sur le plan graphique.
Après avoir mis au point la charte graphique, est-ce que systématiquement il y a de toute façon une maquette faite sous Photoshop ?
A partir du moment où il n'y a pas trop d'éléments "images" à récupérer en tant que tel, est-ce imaginable de faire sa maquette par exemple avec InDesign.

Marc

Charles (Jeudi 28 Janvier 2010 à 23:36):

Très bon tutoriel ! Personellement le design est bien mais bon l'outil plume mais du temps a utilisé pour un rendu pas super .. Personellement je créer mes blocs Header , Menu , Contenue (x nombre de blocs dépendent se que je veux) et je fini pas mon bloc de footer.. Après je commence avec l'arrière-plan par la suite le logo et je prend mes blocs préfait auparavant et je les modifies comme je le veux et j'applique quelquye brushes ou des petits détails minusieux a la fin .. De plus une taille de 1024*768 est la meilleur selon moi .. Surtout niveau codage qui sera plus facile

Cordialement, Charles

Badbart (Vendredi 29 Janvier 2010 à 00:46):

1024 c'est un peu gros quand même. Sur les netbook ça rend trop mal

Charles (Samedi 30 Janvier 2010 à 03:35):

Bah personellement je travail dans ces dimensions et c'est parfait ..

john (Lundi 01 Février 2010 à 17:56):

J'ai une question Grafikart stp : 960 est ce suffisant ? Je demande ça car la majorité des écrans utilisées à l'heure actuelle sont largement supérieures à 1024px de large .. personnellement j'ai un 1440px ( ce qui n'est pas non plus habituel). Enfin bref est qu'il est possible d'avoir des grilles toute prête ( pas envi de me casser la tête avec gimp pour le faire ) pour des designs de 1024 ou sup ? Merci bien

Chris (Lundi 01 Février 2010 à 22:32):

Beaucoup de personnes ont encore une résolution proche de 1024 (http://browsersize.googlelabs.com/). Une largeur de 960px est communément admise car cette largeur tient compte de la barre de scroll du navigateur, et comme l'explique le site 960gs, c'est un nombre qui se divise facilement, donc flexible au niveau de la grille.

pinacolada (Dimanche 07 Février 2010 à 01:58):

super tutoriel!!! merci

FredoMkb (Dimanche 07 Février 2010 à 11:50):

Très bon tuto, bravo !

Concernant l'organisation des dossiers (palette calques), je commence toujours par créer les principaux, c'est à dire, ceux du premier niveau (en-tête, menus, corps, pied, etc.), de cette façon j'ai déjà une organisation de base qui évite parfois de s'y perdre dans la multiplication des calques.

Petite astuce, lors du placement d'un guide, pour être sûr de l'avoir à un emplacement précis, le plus simple est de le déplacer en maintenant la touche shift appuyée, du coup, le guide avance par paliers correspondant aux subdivisions de la règle, plus besoin d'afficher la palette d'infos...

Encore merci pour ce très bon tuto !

Chat (Mardi 23 Février 2010 à 23:09):

Merci beaucoup pour ce tutoriel !!!

FoxJunior (Samedi 27 Février 2010 à 17:00):

Salut,
Merci pour ce tutoriel, mais je coince sur quelque chose, a la 42ieme minutes, après avoir fusionner les deux calques rouge du footer, il faut faire une manipulation, avec ctrl pour selectionner, mais après je n'entend pas pas trop ce qui est dit, et je n'arrive donc pas a mettre la forme sélectionner sur l'autre
Est ce que quelqu'un peut m'aider ?

Merci d'avances
FoxJunior

Merci d'avances

kilik2049 (Mardi 02 Mars 2010 à 23:58):

Super tuto, très bien expliqué
Par contre, une fois qu'on à fais ça, comment on le code? Parce que je me vois mal coller ça comme ça sur le site ^^ Et puis il faut que les tweets/commentaires s'actualisent ... J'vois pas trop en fait ><

Mayhem (Mercredi 03 Mars 2010 à 09:41):

Salut,

Tuto génial ! Je suis tombé dessus par hasard et je n'en suis pas déçu. Ayant un niveau très faible sous photoshop de plus (débutant), j'y ai pourtant tout compris et même appris qques astuces (je vous avais dit que j'avais un niveau très faible :p ).

J'aime aussi énormément les conseils propre au site internet, pour ne pas le surcharger ou en faire trop (chose qu'on a tendance à faire quand on débute et qu'on découvre tout ça, on aimerais caser tous les effets sur la même page :p ).

Merci bcp

KaliMoon (Jeudi 04 Mars 2010 à 11:37):

Même problème que FoxJunior ... Si quelqu'un peut nous aider !
Super tuto en tout cas ! Bravo et merci (Vu mon niveau Photoshop c'est un exploit pour moi d'arriver à faire ça)

La Clics (Vendredi 05 Mars 2010 à 09:31):


Salut,

Merci a GrafiKart qui me permettra de faire un super design pour mon site.
Ton tutoriel va beaucoup m'aider je te ferait voir le design finale.

Encore un grand merci

Vivien (Vendredi 05 Mars 2010 à 11:46):

Bonjour,

je voudrais savoir quel et la version de photoshop ?j

beau tuto je me trouve la version de photoshop et je mis colle.

Merci à bientôt

Baptiste (Vendredi 05 Mars 2010 à 11:56):

C'est la CS4! reconnaissable à ces onglets bien pratiques! elle fait bien envie cette version
@+

karmani (Mardi 09 Mars 2010 à 23:55):

Le tutoriel sur la creation d'une mise en page est plutot interessant, dommage qu'il ne s'attarde pas sur le background du site avec plus de textures par exemples.

Nicolasi2304 (Mercredi 10 Mars 2010 à 16:52):

Bonjour à tous

Excellent tuto pour ma part, felicitations
Je débute en Photoshop et je rencontre un pb lors de la réalisation des ombres portées que tu réalises au dessus et en dessous du carrousel. Lorsque je modifie l'orientation de l'ombre après avoir fait une copie de ce même effet avec ALT+clic, la modification est apportée au deux effets, c'est à dire lorsque je passe de 90° à -90° sur l'effet du calque 2, cela modifie également l'effet du calque 1…qui passe du coup à -90° aussi
Je crois que lors de la vidéo, ça le fait aussi

Nicolasi2304 (Mercredi 10 Mars 2010 à 17:37):

Je suis allé plus loin dans le tuto et forcement, l'explication que je recherchais y était… désolé pour ces 2 posts

razor (Lundi 15 Mars 2010 à 00:17):

Super ton Tuto , comme le sont tous tes Tutos dailleurs .. Juste une question , pour le decoupage on fait comment pour rendre cette PSD en HTML + CSS .. si tu pouvais faire un tuto ladessus et ce sur la meme PSD je ten seraii reconnaissant , merci d'avance =)

Badbart (Lundi 15 Mars 2010 à 13:10):

Il y a déjà un tuto sur le découpage d'un PSD :
http://www.grafikart.fr/tutoriels/creer-un-site-web-decoupage-22

sam (Mardi 16 Mars 2010 à 01:16):

super, le tuto!!!

side91 (Jeudi 08 Avril 2010 à 17:12):

Bonjour j'ai un petit problème je n'arrive pas a faire la dernière forme ( footer) du tutoriel je veux en faire une pour mon site mais je n'y arrive pas . il faut bien faire CTRL+clic gauche pour sélectionner le calque et après cliquer sur la forme mais j'y arrive pas quelqu'un peut m'aider

mokinfo (Jeudi 22 Avril 2010 à 21:54):

je trouve le tuto tres et meme hyper interressant pour un débutant ainsi que pour un pro merci pour une autre fois

d40x (Dimanche 25 Avril 2010 à 19:37):

à 28 minutes 40 quand tu cherches à estomper le trait de soulignement, tu expliques que tu groupes le calque et que tu le fusionnes pour pouvoir ensuite travailler dessus... que penses-tu de créer tout simplement un masque de fusion sur la forme comme ça pas besoin de pixeliser la forme et on peut encore la changer de couleur facilement et par ailleurs, si on trouve le résultat pas satisfaisant on peut changer à la volée, rien n'est supprimé.

Bonne journée!

robin850 (Mardi 04 Mai 2010 à 20:44):

J'adore le tutoriel .

Vraiment bien, j'ai apprit pas mal de choses, c'est cool !

Cordialement robin.

Grim (Mercredi 26 Mai 2010 à 19:06):

Ca ne sert plus à rien de le dire vu que les éloges ont déjà pas mal fusées...
... mais quand même, merci beaucoup !
Je suis en train de faire mon premier site et ce tuto m'a été d'une aide plus que précieuse !

Bonne continuation !

Eric (Vendredi 28 Mai 2010 à 18:51):

bonjour à tous

merci pour ce tutoriel qui est très bien fait. Moi je coince au niveau de l'intégration html et css.
Je suis débutant même en regardant les tutoriel complet : Créer un site web : Découpage plus Créer un site web : Intégration.
les dessin sont complètement différent, à la rigueur pour la découpe c est bon. Mais ça se complique quand il faut intégrer html et css. S'il vous plaît
ce n'est pas possible de faire un tutoriel avec le même graphique pour la découpe et l'intégration html et css.
car dans ce tutoriel le graphique est excellent. Merci

Orken (Lundi 07 Juin 2010 à 10:04):

Salut,
J'ai une question qui sort un peu du cadre de ce tuto, en fait qui vient juste apres ce tuto :D
Dans le cas d'un codage du site en cakePHP (je suis novice en cakephp) quelle est la structure à adopter en ce qui concerne le choix des elements cakePHP ? pour la vue, où mettre de "elements", ou mettre des contrôleurs normaux ? Qu'est ce qui motive le choix d'un "element" ? je suis un peu perdu.

Ce pourrais être un bon tuto le passage du graphisme à cakephp, en plusieurs volume.

SuperHarissa (Samedi 12 Juin 2010 à 12:19):

Et voila le résultat chez moi.

http://superharissa.is.free.fr/designs/blue_sun.jpg

ziko-9 (Mardi 15 Juin 2010 à 12:29):

Salut,
bon tutoriel, merci, juste une petite question, pour le découpage du header, j'ai essayé mais j'en arrive pas, comment faire ?

ziko-9 (Mercredi 16 Juin 2010 à 01:02):

reSalut,
beh j'ai eu une petite idée c'est de travailler dans mon css avec les positions relative et absolue mais je ne sais pas si c'est la bonne manière !!

Galaad (Vendredi 18 Juin 2010 à 18:24):

Sans hésiter le meilleur tuto de design web en français.
Bravo =)

Charlotte @seriesaddit (Mardi 22 Juin 2010 à 11:19):

Merci, merci et encore merci. Ce tutoriel m'a permis d'obtenir une bonne note en cours d'infographie (j'avais une prof pas top et Grafikart m'a sauvé la vie).
Un super site et du boulot de pro!

Eric (Jeudi 01 Juillet 2010 à 15:32):

Eric (Vendredi 28 Mai 2010 à 18:51):

bonjour à tous
Site en construction...

Et voila le résultat chez moi.

Eric (Jeudi 01 Juillet 2010 à 15:33):

Re http://nettoyagepc.free.fr

Cristof (Vendredi 02 Juillet 2010 à 18:32):

super Merci

DieseL (Mardi 13 Juillet 2010 à 20:18):

Bonjour, tout d'abord excellent tuto qui apprend beaucoup.

Mais j'aurais une question qui m'embête bien:

Comment bien gérer ses hover et onclick ?
Faut-t-il faire un template en + où tous les hover sont affichés puis redécouper ?

Que me conseillerai vous de faire ?

Merci pour vos réponses.

LooseChange (Jeudi 22 Juillet 2010 à 17:52):

Salut, bravo pour tes tuto mais des fois tu va trop vite et c'est franchement pénible, je suis obligé de faire pause retour arrière 500 fois et sur une vidéo d'une heure 1 mini-mètre sur la barre de chargement peut représenter 5 minutes...

shidiro (Samedi 24 Juillet 2010 à 19:17):

salut a tous j'aimerai savoir quel version de photoshop Cs est sur la video j'ai Cs3 et il ya des truc que je ne trouve pas merci

Oheme (Mercredi 28 Juillet 2010 à 13:10):

Super Tutoriel , merci beaucoup !
Il m'a permis d'affiner mes compétences (pas super), ainsi que d'apprendre à grapher différemment que en réalisant des kit sur des forums !

Merci encore !

PS : Tu peu voire mon rendu en haut Le premier des trois .

Tonio (Jeudi 05 Août 2010 à 19:40):

Super tutoriel qui va bien me servir! Merci! Quelqu'un a un lien vers un autre tuto expliquant le découpage et le passage en html/css etc? (en gros la suite pour faire un site ^^)
Merci d'avance =)

Tonio (Jeudi 05 Août 2010 à 19:43):

J'ai trouvé..Désolé pour le double post et encore merci!

Irban (Jeudi 12 Août 2010 à 12:57):

Super tutoriel qui va beaucoup m'aider ! Merci beaucoup pour votre aide.

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel