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

dood Il y a 5 jours Répondre

A qd l'intégration de ce design ?

Tessy Il y a 15 jours Répondre

Bonjour, je viens de regarder votre tutoriel qui est vraiment génial !
Je suis actuellement en dernier année d'imagerie médicale , je réalise en fin d'année un travaille de fin d'étude portant sur l'intégration des étudiants dans un service de radiologie pour ce faire je suis entrain d'instaurer un concept pour tablette numérique... Novice dans la matière j'aurais besoin de conseil pour voir s'il est possible d'intégrer ceci à la tablette ou alors passer par une application tel android ...
Merci d'avance de la réponse
Bien à vous

Tricepha Il y a 17 jours Répondre

Désolé pour les fautes de frappe.
Félicitation pour une travail plutôt bien réussi. J'ai de souci pour la découpe de la maquette, notamment au niveau du carrousel, juste le carrousel au niveau des ombres portées et comment intégrer les images?
Merci de votre aide.

Tricepha Il y a 17 jours Répondre

Félicitation pour une travail plutôt bien réussi. J'ai de souci pour la découpe de la maquette, notamment au niveau de la carrousel, juste la carrousel au niveau des ombres portées et comment intégrer les images?
Merci de votre aide.

ideeaugram Il y a 2 mois Répondre

Félicitations !
Partager un savoir faire c'est top !
id

Colibri des iles Il y a 3 mois Répondre

Bonsoir,

Je ne vais pas être très originale, je vous remercie pour ce tutoriel, très clair, où je vais pouvoir faire mes premiers dans le design.
Jeune diplômé dans l'ergonomie de poste de travail je porte un intérêt pour les IHM, d'où mon apprentissage dans le développement et le design.
Je suis tellement novice, que je ne connais pas quelle version de Photoshop vous avez utilisé, j'ai téléchargé une version d'évaluation light de Photoshop, mais je n'ai pas le même interface. Je vais attendre la fin de mon téléchargement du logiciel Photoshop creative suite 5.5 Design, en espérant que c'est le bon.

Merci encore, merci.

Colibri des iles Il y a 3 mois - Répondre

Pardon j'avais oublié de signer. :-)

Nuts Il y a 3 mois Répondre

Super tuto !
Merci beaucoup j'ai appris pleins d'astuces !

jazie Il y a 4 mois Répondre

Merci pour ce tuto formidable, j'ai appris plein d'astuces grâce à lui !
une question quel est le site cité pour les photo dans le tutoriel. Je n'arrive pas à remettre la main sur la minute précisant l'adresse .. merciii
keep smile

Colibri des iles Il y a 3 mois - Répondre

pour les images
http://www.sxc.hu/

pour les icônes
http://www.iconfinder.com/
http://wefunction.com/2008/07/function-free-icon-set/

Guidraw Il y a 6 mois Répondre

Super tuto, mais maintenant 960 grid, bloque les calques de façon à ne pas pouvoir les utiliser.

enfer14 Il y a 6 mois Répondre

Et aussi j'oublié tu as dans l'onglet calque presque tout en bas aplatir le calque

enfer14 Il y a 6 mois Répondre

Au faite petite astuce que j'ai découvert y'a pas longtemps tu va dans fichier/scripts tu as un script aplatir tout les effet de calques ou un autres aplatir tout les masque voila j'espère ça t'aidera à l'avenir

kalirelco Il y a 6 mois Répondre

j ai un gros problème je n est pas réussie a faire se tuto avec cs5 es-que vous pouvez m'aider s'il vous plait je voudrait des tuto a faire avec css5 me répondre via mon adresse e-mail: kalirelco@hotmail.fr

web2.ma Il y a 7 mois Répondre

Merci beaucoup

fishhareng Il y a 8 mois Répondre

Super tuto !
Un grand merci !

dokill91 Il y a 9 mois Répondre

Bonjour, quelqu'un connait un hébergeur gratuit, (il n'y a pas de php) et qu'il m'aide à me servir de l'hébergeur qu'il me conseille car je n'arrive pas à me servir de cela.

leptifilou Il y a 10 mois Répondre

Même question : comment faire pour le mettre en HTML ?

adrienferreira Il y a 10 mois Répondre

Juste serai-ce possible un tuto sur le découpage de ce layout ?

obgraphix Il y a 10 mois Répondre

Bonjour, Super Tuto. Mais je me demandais comment tu fais pour le mettre en html?

oujdamp Il y a 11 mois Répondre

très très bon tuto je te félicite

Flopan Il y a 11 mois Répondre

Merci, mais comment ça se code des liens sur un header :x

titi Il y a 1 an Répondre

Hello

quelqu'un aurait il un tuto (français de preference) expliquant le decoupage et l'intégration d'un site avec les grids 360.
car franchement je n'y comprend rien!
merci

Oyabi Il y a 1 an Répondre

Salut il serait bon de mettre tout les sites utiles et que tu utilises dans la vidéo dans ton intro( nuancier, ressources, etc.)
Cordialement.

x Ap0cALyPsE zZ Il y a 1 an Répondre

Super tuto et a par sa pourquoi écris tu sur ton design quand tu est sur Photoshop? C'est vraiment nécessaire ou peux en faire un et rien marquer dessus depuis Photoshop et marquer que une fois que l'on code?

loutch Il y a 1 an Répondre

t'est trop fort man !!! J'adore ta façon de jouer avec les nuances...

Olivsounet Il y a 1 an Répondre

Superbe tuto sa faisait hyper longtemp que je chercher un tuto de ce genre ! au passage tu aurais un tuto pour la suite ? ( le mettre en ligne et le gerrer avec dreamweaver ) merci a votre réponse .

milbou Il y a 1 an Répondre

Super tuto je commence mais pas évident du tout... Pourrait tu poster une vidéo sur la découpe du design ensuite pour pouvoir la mettre comme page internet si tu vois ce que je veux dire ? ^^

fazeGFX Il y a 1 an Répondre

Merci Hamlet pour ton aide. Je suis actuellement en stage pour une entreprise d'informatique. Je dois creer un site d'échange de fichier. Pour ne pas citer de nom, dans le style de : http://dl.free.fr . Je pense que cette fonction Hover peut être toujours utile pour rendre un peu "attractif" le site.
Merci en Hamlet

Chris Il y a 1 an Répondre

bjr
je débute en Photoshop et je n'arrive pas a mettre en place l'image la a partir de 14min42 je suis perdu kl k'un pourrais bien m'aidé a mettre en place l'image ds l'entête svp

fazeGFX Il y a 1 an Répondre

Bonjour et merci de ton super tutorial qui m'a fait découvrir pleins de nouvelles choses.
J'ai juste une question, surement bête mais bon, je l'a pose quand même.
Dans la video, tu dis "en gros" :
"Nous allons faire un rectangle autour de "BLOG", pour que plus tard, lorsque l'on passera la souris sur BLOG, le rectangle deviendra rouge ?"
Comment on fait sa?
C'est du flash ? css ? php ? Je suis un novice dans le monde du web.

Merci d'avance

hamlet Il y a 1 an - Répondre

Cet effet sera produit par la fonction :hover en CSS et qui te permettra avec une image "double" de basculer de l'une à l'autre...
C'est expliqué dans le tuto sur le découpage d'un site en html/css.

En gros, tu as deux boutons de 30 px de haut (un normal, l'autre avec un effet de survol). Tu fais une image de 60px de haut (image.jpg), tu incorpores les deux boutons dedans, l'un en haut et l'autre en bas (comme tu veux).
Au moment de coder, tu créeras un block dans ta page html avec une id="bouton", dans ton CSS, tu diras :
#bouton {
height:30px; //la hauteur d'un bouton et pas de "image.jpg"
background:url(image.jpg) top left; //Bouton normal => vue des 30 pixels du haut de l'image
}
#bouton:hover { //survol du bouton par la souris
background:url(image.jpg) bottom left; //Vue des 30 pixels du bas de l'image
}

Voilà, j'espère avoir été clair

Fatburner Il y a 1 an Répondre

Une vrai régalade ce tuto !!

Merci à vous ;-)

muchtard Il y a 1 an Répondre

LooseChange t'es bien gentil avec tes reproches mais à mon avis, pour reprendre tes mots, "c'est franchement pénible" pour Grafikart qui se casse la tête pour nous offrir ses tutoriels gratuitement, de se prendre des critiques comme ca dans la tête.. Surtout quand elles veulent rien dire comme les tiennes. Parce que trouve moi un seul tuto ou tu ne dois pas revenir en arriere pour comprendre une manip et ou tu ne galeres pas avec la barre de lecture, et là on pourra en rediscuter, c'est pas croyable des types comme lui sans déconner !
Enfin bref, PUR tuto Grafikart, tu vois je suis en train de me former a flash d'une part, et au XHTML/CSS d'autre part, et j'avais besoin d'une initiation a Photoshop.
Alors tout simplement MERCI.
PS : Un merci aussi c'est gratuit LooseChange...

Irban Il y a 1 an Répondre

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

Tonio Il y a 1 an Répondre

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

Tonio Il y a 1 an Répondre

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 =)

Oheme Il y a 2 ans Répondre

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 .

shidiro Il y a 2 ans Répondre

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

LooseChange Il y a 2 ans Répondre

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...

DieseL Il y a 2 ans Répondre

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.

Cristof Il y a 2 ans Répondre

super Merci

Eric Il y a 2 ans Répondre

Re http://nettoyagepc.free.fr

Eric Il y a 2 ans Répondre

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

bonjour à tous
Site en construction...

Et voila le résultat chez moi.

Charlotte @seriesaddit Il y a 2 ans Répondre

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!

Galaad Il y a 2 ans Répondre

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

ziko-9 Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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 !!

SuperHarissa Il y a 2 ans Répondre

Et voila le résultat chez moi.

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

Orken Il y a 2 ans Répondre

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.

Eric Il y a 2 ans Répondre

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

Grim Il y a 2 ans Répondre

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 !

robin850 Il y a 2 ans Répondre

J'adore le tutoriel .

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

Cordialement robin.

d40x Il y a 2 ans Répondre

à 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!

mokinfo Il y a 2 ans Répondre

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

side91 Il y a 2 ans Répondre

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

sam Il y a 2 ans Répondre

super, le tuto!!!

razor Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

Nicolasi2304 Il y a 2 ans Répondre

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

Nicolasi2304 Il y a 2 ans Répondre

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

karmani Il y a 2 ans Répondre

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.

Baptiste Il y a 2 ans Répondre

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

Vivien Il y a 2 ans Répondre

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

La Clics Il y a 2 ans Répondre

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

KaliMoon Il y a 2 ans Répondre

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)

Mayhem Il y a 2 ans Répondre

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

kilik2049 Il y a 2 ans Répondre

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 ><

FoxJunior Il y a 2 ans Répondre

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

Chat Il y a 2 ans Répondre

Merci beaucoup pour ce tutoriel !!!

FredoMkb Il y a 2 ans Répondre

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 !

pinacolada Il y a 2 ans Répondre

super tutoriel!!! merci

john Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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.

Charles Il y a 2 ans Répondre

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

Charles Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

bemaluvi Il y a 2 ans Répondre

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

Rusura Il y a 2 ans Répondre

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.

Rez Il y a 2 ans Répondre

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?

Manuuu Il y a 2 ans Répondre

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

Mathieu Il y a 2 ans Répondre

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

LimeCitrus Il y a 2 ans Répondre

Encore un tout bon tuto, Merci!!!

Baptiste Il y a 2 ans Répondre

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

Grafikart Il y a 2 ans - Répondre

En maintenant la touche Maj appuyée

Universel Il y a 2 ans Répondre

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

eowel Il y a 2 ans Répondre

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...

Woa Il y a 2 ans Répondre

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

Woa,

eowel Il y a 2 ans Répondre

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

Baptiste Il y a 2 ans Répondre

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
@+

d40x Il y a 2 ans Répondre

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

JLou Il y a 2 ans Répondre

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

Darkavatars Il y a 2 ans Répondre

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

Harry Il y a 2 ans - Répondre

Camtasia ('fin jcrois)

JLou Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

gilles40 Il y a 2 ans Répondre

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

fantoche Il y a 2 ans Répondre

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

pamou Il y a 2 ans Répondre

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

Darkavatars Il y a 2 ans Répondre

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.

OoimedoO Il y a 2 ans Répondre

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

greg Il y a 2 ans Répondre

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

Slown Il y a 2 ans Répondre

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 Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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.

Iguanes Il y a 2 ans Répondre

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

Otaku-mad Il y a 2 ans Répondre

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

ael Il y a 2 ans Répondre

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

mathias Il y a 2 ans Répondre

Tres bon tuto...

ZiPo Il y a 2 ans Répondre

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

Djawadshow Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

Je ne connais pas de site qui fait ça.

sender Il y a 2 ans Répondre

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

Rapha Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

Aleks Il y a 2 ans Répondre

Vraiment super, comme d'hab' .

darkn1ko Il y a 2 ans Répondre

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

Kagogal Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans - Répondre

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 !

Remus Il y a 2 ans Répondre

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 Il y a 2 ans

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 Il y a 2 ans

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

Raph Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans

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

Kagogal Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans - Répondre

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

dechuck Il y a 2 ans Répondre

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.

Flomito Il y a 2 ans Répondre

Super tutoriel, un grand merci à toi.

Mixta Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

Antho Il y a 2 ans Répondre

Encore un tuto très bien expliqué !

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

Mousse Il y a 2 ans Répondre

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!

mathias Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

Ravi Il y a 2 ans Répondre

Merci

iPnoTiCaLL Il y a 2 ans Répondre

Merci =)

aemaethe Il y a 2 ans Répondre

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

Sidjack Il y a 2 ans Répondre

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 Il y a 2 ans

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

fantoche Il y a 2 ans

Absolument

fantoche Il y a 2 ans

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 Il y a 2 ans

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 Il y a 2 ans - Répondre

Merci Raph

leknoppix Il y a 2 ans Répondre

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

cerise Il y a 2 ans Répondre

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

versus Il y a 2 ans Répondre

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

Rocambolesque Il y a 2 ans Répondre

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

Rocambolesque Il y a 2 ans Répondre

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

Ratatouille Il y a 2 ans Répondre

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 Il y a 2 ans

Héhé merci pour les astuces

Krome Il y a 2 ans - Répondre

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

MarcBook Il y a 2 ans Répondre

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

Antwane Il y a 2 ans Répondre

@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

tginja Il y a 2 ans Répondre

Merci !

alexis Il y a 2 ans Répondre

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 Il y a 2 ans

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

alexis Il y a 2 ans

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 Il y a 2 ans - Répondre

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

koudji Il y a 2 ans Répondre

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 Il y a 2 ans - Répondre

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

Remus Il y a 2 ans Répondre

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 Il y a 2 ans

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

Remus Il y a 2 ans - Répondre

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

Joe Il y a 2 ans Répondre

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>

OverSpeed Il y a 2 ans Répondre

Merci beaucoup pour ce tuto

elscorto Il y a 2 ans Répondre

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.

ZiPo Il y a 2 ans Répondre

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

Mikiro Il y a 2 ans Répondre

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

Technostyle Il y a 2 ans Répondre

Super tutoriel

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

Capture d'écran 3D

Utiliser les motifs