wassim Il y a 2 mois Répondre
y aurait-il un tutoriel pour le découpage de ce design s'il vous plait ?
136 commentaires
Ajouter un commentaire
Malcolm Il y a 3 mois Répondre
Bonjour,
y aurait-il un tutoriel pour le découpage de ce design s'il vous plait ?
dood Il y a 4 mois Répondre
A qd l'intégration de ce design ?
Tessy Il y a 4 mois 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 4 mois 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 4 mois 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 5 mois Répondre
Félicitations !
Partager un savoir faire c'est top !
id
Colibri des iles Il y a 6 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 6 mois - Répondre
Pardon j'avais oublié de signer. :-)
Nuts Il y a 7 mois Répondre
Super tuto !
Merci beaucoup j'ai appris pleins d'astuces !
jazie Il y a 7 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 6 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 9 mois Répondre
Super tuto, mais maintenant 960 grid, bloque les calques de façon à ne pas pouvoir les utiliser.
enfer14 Il y a 9 mois Répondre
Et aussi j'oublié tu as dans l'onglet calque presque tout en bas aplatir le calque
enfer14 Il y a 9 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 10 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 11 mois Répondre
Merci beaucoup
fishhareng Il y a 12 mois Répondre
Super tuto !
Un grand merci !
dokill91 Il y a 1 an 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 1 an Répondre
Même question : comment faire pour le mettre en HTML ?
adrienferreira Il y a 1 an Répondre
Juste serai-ce possible un tuto sur le découpage de ce layout ?
obgraphix Il y a 1 an Répondre
Bonjour, Super Tuto. Mais je me demandais comment tu fais pour le mettre en html?
oujdamp Il y a 1 an Répondre
très très bon tuto je te félicite
Flopan Il y a 1 an 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 2 ans 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 2 ans 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 2 ans Répondre
t'est trop fort man !!! J'adore ta façon de jouer avec les nuances...
Olivsounet Il y a 2 ans 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 2 ans 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 2 ans 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 2 ans 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 2 ans 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 2 ans - 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 2 ans Répondre
Une vrai régalade ce tuto !!
Merci à vous ;-)
muchtard Il y a 2 ans 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 2 ans Répondre
Super tutoriel qui va beaucoup m'aider ! Merci beaucoup pour votre aide.
Tonio Il y a 2 ans Répondre
J'ai trouvé..Désolé pour le double post et encore merci!
Tonio Il y a 2 ans 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
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
Laisser un commentaire
sigri44 Il y a 2 mois Répondre
Yeah parfait. Mais je vois l'âge du tutoriel. Un jour une intégration avec le CSS, comme promis dans la vidéo ? Car bon un design c'est mignon, mais si on ne peut pas l'utiliser.. :P
$igri_44