Tutoriel vidéo xHTML-CSS : Créer un site web : Découpage

Dans ce tutoriel vidéo vous apprendrez découper une maquette (dans ce cas là un PSD) en vu de l'utiliser ensuite pour réaliser le codage du site. Au programme : Recadrage, Transformations diverses et enregistrement Web.

Tags : PhotoshopCs3DécoupageAdobeRèglesMaquetteTemplate

Tutoriel xHTML-CSS posté Mercredi 04 Juin 2008
 143 Commentaires

 

Partager
Ils l'ont utilisé

 

Publicité

 

Vos commentaires

julien (Vendredi 08 Août 2008 à 14:20):

Félicitations pour ce super tuto je suis d'ailleurs étonné que tu n'ai pas plus de remerciement car tes tutoriaux sont d'excellente qualité bien au dessus de la plupart de ceux que l'ont peut trouver et en plus tout ca avec beaucoup de modestie.
Un énorme BRAVO

Grafikart (Vendredi 08 Août 2008 à 19:37):

Dans le prochain tutoriels vous voulez que je commence directement le codage ou que je commence par expliquer les bases de l'HTML et du CSS ?

raph (Vendredi 08 Août 2008 à 19:37):

Par le commencement,

Il est possible d'avoirs un tutoriel sur la création d'une page php

Grafikart (Vendredi 08 Août 2008 à 19:37):

La création d'une page php suppose de bonne connaissance en HTML et en Algorithme donc ce n'est pas pour tout de suite car c'est assez complexe à expliquer...

Pouti (Vendredi 08 Août 2008 à 19:37):

Salut Raton Laveur déjà merci pour tous ce que tu fais tu fait de belle chose enfin de magnifique tuto je les comprends direct en plus de sa vidéo non c'est le site qui propose des vidéo gratuit chapo j'espère que le blog aura long vie.

Moi j'aimerais que tu commence par le codage l'explication, enfin je veut dire après avoir fait le design mettre en place le css. Car c'est dans sa que je bloque a l'heure actuel vivement le prochaine tuto Merrrrrrrrci.

julg7 (Vendredi 08 Août 2008 à 19:37):

Beau travail ! Vivement le prochain

Sylv1 (Vendredi 08 Août 2008 à 19:38):

Tu peut expliquer le XHTML et le CSS en utilisant des exemples de codage Super ton premier tuto vidéo. Vivement les prochains.

julbut (Vendredi 08 Août 2008 à 19:38):

C'est ce que je cherche depuis longtemps ... après le découpage comment mettre les éléments sur une page web !!
C'est génial le travail que tu as fait !
Commence par le commencement je pense enfin ... tu vois c'est toi le chef ;-)

Merci encore ... allez j'y retourne moi !

Pers0nne (Vendredi 08 Août 2008 à 19:39):

Hey !

Franchement, top le tuto. Comme les autres d'avant
Vivement les prochains.

Bonne continuation.
Bye.

Guillaume (Vendredi 08 Août 2008 à 19:39):

J'ai hâte de voir la suite car c'est le codage qui m'intéresse plutôt que le découpage photoshop. Mais bravo quand même pour cette très bonne vidéo.

Et puis au fait, comment fais tu Mr Raton Laveur pour afficher les titre des articles en fonction des catégories ( une enceinte pour la section musique, ton logo pour tes messages perso....). C'est quelque chose que je souhaite faire depuis longtemps mais j'ai jamais réussi. Merci !

Zfnix (Vendredi 08 Août 2008 à 19:39):

Bonsoir,

Félicitation pour ce site et merci pour ces tuto très intéressant et clairement expliqués.

Bonne continuation..

Grafikart (Vendredi 08 Août 2008 à 19:39):

@Guillaume : J'ai du rajouter un classe et une fonction à Dotclear. Je t'invite à me contacter par mail pour que je t'envois la méthode.

LeLoup (Vendredi 08 Août 2008 à 19:40):

Je vais faire mon rabat-joie, mais bon, il faut bien hein, sinon c'est pas rigolo. Il y a donc quelques petits soucis avec ce template:

- Il n'est pas valide XHTML 1.0 Strict
http://validator.w3.org/check?uri=http%3A%2F%2Fmanu36back.free.fr%2Ffolio%2Findex.html&charset=(detect+automatically)&doctype=Inline&group=0

- La mise en page foire complètement avec IE6

Grafikart (Vendredi 08 Août 2008 à 19:40):

Héhé, Manu a remodifié le code par la suite mais celui que je vais donner aux utilisateur est entièrement valide au W3C strict.
Pour IE6 j'ai abandonné depuis longtemps.. Si on doit se préoccuper des navigateur "fantomes" on ne s'en sort pas (même si IE6 a encore pas mal d'utilisateur)...

yanoo (Vendredi 08 Août 2008 à 19:46):

tres bien fait tes tutos,chapeau tres belle realisation.Mais dans celui la sur les decoupes avec photoshop pourquoi ne pas utiliser l'outil tranche qui est fait pour ca?
Bonne continuation.

Grafikart (Vendredi 08 Août 2008 à 19:46):

L'outil tranche ne permet pas de découper les images comme je le souhaite (peut être que je ne sais pas bien l'utiliser) avec des images de différents types avec certaines images nécessitant des transparences.

issaid (Vendredi 08 Août 2008 à 19:46):

Bonjour,
je vous remercie beaucoup pour votre tuto, c'est bien expliquè (y);
aufait, je voulais demander comment proceder a la decoupe des rectangle avec un contour progressif, j'en ai trop sur une seule maquette, et aussi comment faire avec un background transparent, ca veut dire que le background de la page ne se cache pas, et reste visible avec une transparence
Merci
j'espere que je suis pas entrain de trop vous deborder
Cordialement Issam ^_^

Tom (Vendredi 08 Août 2008 à 19:47):

Hello M'sieu Raton, pour un calque avec une forme dessus tu peu pixelliser avec un clic droit sur le calque mais les options de fusion ne serons pas aplati.

Merci pour ces tuto c'est très instructif même pour les non débutant !! :D

A bientot, Tom.

Alea (Mercredi 13 Août 2008 à 06:06):

Oui, je suis du même avis que Julien cela fait peut-être peu de temps que je connais ton site mais tes tutoriaux sont U.L.T.R.A claire C'est le 3eme que je suis et jusque là je comprend tous vraiment Bravo !

Yo@n (Mercredi 13 Août 2008 à 12:08):

Vraiment bravo pour la qualité de ce tuto, je vais recommander ton site aux personnes débutantes qui veulent tout apprendre depuis le début. Bonne continuation à toi.

tempo (Samedi 16 Août 2008 à 01:35):

Un grand merci pour tous vos tutos.

C'est super clair !

Bravo et merci encore.

J'attends les prochains avec impatience.

biohazard01 (Samedi 23 Août 2008 à 11:29):

Merci beaucoup pour ce tuto, trés claire et bien expliqué. j'espere que tu continueras.

itsystem (Lundi 25 Août 2008 à 17:43):

Merci beaucoup pour ce tuto.
C'est clair et précis.
Bravo pour ce partage de savoir

Tenshu (Dimanche 31 Août 2008 à 23:51):

Merci enormement pour ce tuto très très bien fait !

moulla (Dimanche 07 Septembre 2008 à 18:38):

ce tuto est absolument génial merci

nocif (Vendredi 12 Septembre 2008 à 01:06):

Comment dire ...
Ce tuto devrait etre partout car pour une personne qui cherche a decoupe un template il n y a rien de mieu.
j'ai passer des heures à lire des tutos mais en 1h passée ici j ai compris tout ce que j avais lu auparavant car sans la video je comprenais a moitier.

merci pour ce tuto qui est tres tres clair et qui explique vraiment tout.
bonne continuation

liline (Vendredi 12 Septembre 2008 à 23:21):

Bravo et merci pour ton coup de pouce... tu m'enlèves une énorme épine du pied ^_^, de plus tu est très pédagogue; c'est captivant ce petit accent chant lol. bonne continuation.

Low' (Samedi 20 Septembre 2008 à 19:14):

Merci beaucoup pour ce tuto, il est vraiment bien réalisé ! Moi qui n'y comprenais rien j'ai réussi à créer tout ce que je voulais ! Merci beaucoup !!

Xavier (Jeudi 02 Octobre 2008 à 19:52):

Un grand bravo pour ce tutoriel très bien fait.

Babou (Jeudi 02 Octobre 2008 à 20:10):

Super tuto !! Ca marche aussi avec paint n'est-ce pas ?

Shin (Dimanche 05 Octobre 2008 à 14:22):

Superbe.

De nombreux "trucs" a utiliser sans modération pour gagner de la place sur nos templates. Bien sur ca va être difficile d'apprendre la créativité par tuto mais bon on fera avec ce qu'on arrivera a creer xD.

Viiite je m'en vais dévorer le tuto de placement des éléments en codage xHTML/CSS =))

Leo (Dimanche 19 Octobre 2008 à 15:55):

Première visite sur ce site et une seule chose à dire ... GENIAL Un grand merci Pour ce tuto complet et très bien expliqué CTRL+D sans hésiter je file regarder les autres merci

luuna (Dimanche 19 Octobre 2008 à 22:31):

Je laisse un commentaire pour te remercier de ce tutoriel.
Je suis webmaster en herbe disons, je sais bien me debrouiller pour tout ce qui est php/html/css et javascript dernierement, mais le design n'est pas mon point fort. Ce que je travaille actuellement et je veux faire des designs web. Et grace a ton tuto j'ai une bonne vision de comment decouper mes elements que je cree.
De plus les elements d'optimisation que tu cites et explique sont vraiment interessant.
Une remarque plutot que d'utiliser une image de hauteur 1pixel pour le fond il aurait ete preferable de ne pas utiliser d'image mais simplement prendre le code couleur du fond et apres en css definir le fond de cette couleur non ?

Grafikart (Lundi 20 Octobre 2008 à 00:27):

@luuna: Merci,
Pour ce que tu demande ça dépend des cas. Quand je sélectionne l'image de 1 px c'est pour l'effet d'ombre qui entoure le design donc je voulais avoir le blanc du contenu ET l'ombre sur les coté. Sinon, effectivement si tu as une couleur unie il faut mettre le code couleur (ce que je fais pour le fond du body).

Ben (Mardi 21 Octobre 2008 à 19:06):

Merci à toi pour ton tuto !

A ton avis est-il possible de faire du boulot correct avec juste le version 5.5 de totoshop ?

++

Grafikart (Mardi 21 Octobre 2008 à 20:26):

@Ben: Normalement oui

kiwi2 (Mardi 21 Octobre 2008 à 23:23):

Salut,
superbe le tuto !
simple question : comment fais-tu pour garder sur ton site le menu tout en haut avec BLOG / PORTFOLIO / RESSOURCES ... tout en navigant sur les pages ?

Grafikart (Mardi 21 Octobre 2008 à 23:31):

C'est une div en position fixed.

kiwi2 (Mardi 21 Octobre 2008 à 23:34):

Rapide et efficace...
je te souhaite une bonne continuation

Matthieu (Dimanche 26 Octobre 2008 à 19:40):

Salut !

Merci pour ce tutoriel ! j'ai longtemps cherché à savoir comment créer son propre design, maintenant je sais

( Et bing ! un lecteur de plus ^^ )

Deco2noel (Samedi 15 Novembre 2008 à 18:18):

Merci !

Grâce à toi, j'ai refais le design de mon site : http://www.deco2noel.com/

Belette (Lundi 17 Novembre 2008 à 16:35):

Merci beaucoup ! c'est vraiment super bien expliqué, ça permet aux personnes pas très à l'aise avec le design de s'en sortir

mustw (Mardi 18 Novembre 2008 à 17:50):

Superbe tutoriel ! Un grand merci à l'auteur.
Merci encore.
Mustw

Dorian (Jeudi 20 Novembre 2008 à 10:53):

Excellente démonstration, ça démystifie la manipulations des outils, super pour un néophyte.

Bibil (Lundi 24 Novembre 2008 à 22:29):

bravo pour ce tuto ^^
j'ai hâte de voir la suite !
pour la fusion des calques, je ne sais pas si j'ai bien vu ta technique, mais ma technique a moi c'est de créer un nouveau calque vide et de le fusionner avec celui qu'on veut aplatir ! pas mal de pro autour de moi font pareil lol
voili voila bonne continuation et encore bravo :-)

serdar67 (Jeudi 27 Novembre 2008 à 17:11):

merci pour ce super tuto je vais pouvoir progresser ^^

night wolf (Dimanche 30 Novembre 2008 à 17:51):

Merci

SFW (Lundi 01 Décembre 2008 à 01:49):

Heum désolé mais j'ai un petit problème de découpe ...
Je n'arrive pas a utiliser la méthode du "copier" puis "nouveau claque"! Y orait t'il un paramètre particulier a remplir au moment de la création d'un nouvelle page ?

Claude (Lundi 01 Décembre 2008 à 09:42):

Je viens d’effectuer la mise à jour avec le nouveau lien sur mon blog.
Merci pour ce tutoriel.
http://www.itsystem.fr/blog/creer-un-site-web-en-xhtml-et-en-css/

SFW (Lundi 01 Décembre 2008 à 18:57):

....:s Up please ! je suis vachement embété...

Grafikart (Lundi 01 Décembre 2008 à 19:42):

Détaille plus ton problème ou envois moi un mail.

SFW (Mardi 02 Décembre 2008 à 00:00):

OK !
Alors mon problème se situe au niveau du debut de la vidéo...au moment de selectionner le header bleu/transparent.
Tu retire le retire le texte et apres tu fusionne le groupe. Ensuite tu dit " je selectionne tout, je fais copier, et je crée un nouveau document".Cette manip' est répétée plusieurs fois au cour s de la vidéo or je je suit les instructions et lorsque je "selectionne tout" et que je crée un nouveau document : j'ai un document vierge.. je ne sait pas d'où vient mon problème ! mais c'est assez frustrant :S
Merci d'avance pour l'aide

Grafikart (Mardi 02 Décembre 2008 à 00:49):

1: tu fais bien un copié ?
2: tu es bien sur un calque de pixel et non pas sur une forme ?
3: Tu as qu'un seul calque sélectionné ? Sinon il faut que tu les fusionne avant.

SFW (Mardi 02 Décembre 2008 à 22:49):

j'ai tout verifier...:s
Je fusionne le groupe,je selectionne tout en faiesant "pomme + clic sur le claque " ( je suis sous mac mais le controle est juste remplacé par la touche " pomme") et quand je fait un nouveau calque : vide !
N'y a pas un chemin a faire avec les menus pour " tout selectionner" ? y aque la que j'ai pu me tromper

SFW (Mardi 02 Décembre 2008 à 22:59):

Argh ! c'est bon j'ai trouver en fouillant dans les paramètre de mon nouveau calque ! Merci de l'aide
PS: La video est génial...pour l'enregistrement du tuto : c'est quel logiciel ?

serdar67 (Lundi 22 Décembre 2008 à 18:00):

tu pourrais faire un tuto sur le codage d'un site

Angelus (Mardi 23 Décembre 2008 à 00:44):

bonjours et beau travail pour ce tuto, mais j'ai une question qui me turlupine un peu : Comment ce fait il qu'il y est tout le contenue du site alors qu'il y a que quelque image de l'interface qui sont découpé ?
Car moi personnellement j'ai l'habitude de découpé avec l'outil tranche, et de toujours découpé l'interface entièrement, c'est à dire toute les images sauf le fond! Et j'avoue que je ne sais pas trop comment découpé mon interface avec cette méthode, j'ai pas tout compris :-/

Grafikart (Mardi 23 Décembre 2008 à 11:29):

En fait le but d'un design web et qu'il soit le plus léger possible avec des images très petites. De plu les designs doivent être extensible en hauteur et parfois aussi en largeur donc on ne peut pas se permettre de découper sous forme de bloc avec l'outil tranche. Normalement si tu regarde ce tutoriel et l'autre tutoriel sur le codage tu devrait arriver à comprendre comment tout cela fonctionne.

xunder (Mardi 23 Décembre 2008 à 13:56):

Bonjour , j'ai plein de problèmes sur Internet explorer 6 l'affichage n'est plus le même y a-t-il une méthode pour corriger ça ? et merci infiniment pour ces tutoriaux

Dan 48 (Mardi 23 Décembre 2008 à 14:05):

Bonjour merci pour ce tuto,j'ai 63ans et je débute...je vais essayer de tout assimiler avant de continuer et passer au codage, j'avais fait un détour par le site du zero (un bon site pour découvrir le xhtml et le css), alors avec ces bases j'espère pouvoir suivre la 2eme partie, c'est super d'avoir des profs comme vous et gratos!!! un truc aussi que j'aimerais savoir faire ... des tutos vidéo comme le tien en vue de faire de la "formation " dans mon club photo , alors si tu as une adresse de tuto pour faire des tutos je suis preneur et avec quel programme faire ces vidéos? encore merci de nous faire partager ton savoir et je te souhaite de bonnes fêtes et une bonne année

Dan48 (Mardi 23 Décembre 2008 à 19:27):

Je viens de suivre la partie 2(vite fait) (j'ai du pain sur la planche pour tout saisir...) j'ai récupéré et imprimé le code css mais j'aurais bien aimé avoir le code xhtml de ce tuto pour faire le lien plus facilement (car je comprends vite mais il faut m'expliquer longtemps)en tout cas c'est un superbe travail je vais me passer ces vidéos en boucle... il faudra bien que sa rentre!!!encore merci!!!tu est génial!

fred (Vendredi 26 Décembre 2008 à 21:36):

j’ai réussi à créer ma boutique avec ce site, gratuitement en contrepartie je gère tout de a à z via le panel administratif.

http://www.boutique-en-ligne-31.com/boutique-gratuite.html

Mon site bijoux
http://www.bijouxline.com

plus de 700 produits je mets moi même les photos les prix et argumentaires.

narwak (Mardi 30 Décembre 2008 à 19:24):

super tuto

je rajoute juste un truc, au lieu de fusionner avec un calque vide pour la découpe, as tu essayé de "copier avec fusion".

;)

Xenio (Dimanche 04 Janvier 2009 à 17:23):

Yosh !
Merci encore pour ce tuto qui est propre, soigné et clair !! ^^
Je voulais savoir comment tu fais pour faire copier> nouveau> coller et obtenir une image cadrée auto ?? Je pige pas la, je crois que moi je me gourre avec la selection de claque et tout !!

Sayonara !

goosy (Jeudi 08 Janvier 2009 à 00:06):

Super ce tuto ! J'ai appris quelques truc utiles qui me feront gagner du temps.
Merci et vive internet !

Teddy974 (Lundi 12 Janvier 2009 à 07:03):

Très bon tuto, moi qui démarre de zéro dans la création de site web, je cherchai justement ce genre d'exemple trés pratique pour l'apprentissage.
Merci beaucoup de faire partager tes connaissances à tous le monde.

sex toys (Jeudi 15 Janvier 2009 à 18:16):

Bonjour,

Je recherchais des tutoriaux très explicites, je n'aurais pas pu trouvé mieux qu'une vidéo !
Un grand merci pour ce tutoriel en vidéo !

Cordialement

manu (Jeudi 15 Janvier 2009 à 18:17):

Super tutotoriel merci beaucoup !

Je vais essayer de l'adapter à gimp huhu ;-)

Mino (Lundi 19 Janvier 2009 à 20:24):

Comme tout le monde, je tenez a te dire Merci!!!!!!!!!!!!!!!!!

Val (Mercredi 21 Janvier 2009 à 17:15):

Mille mercis pour tes tutos "génialissimes" que je découvre seulement !
Un travail vraiment super et à la portée de tous !
MERRRCIIII ! ;-)

Par contre, j'ai, de mon côté, une question qui persiste et malgré mes recherches, je ne vois pas comment faire. J'ai dû passer à côté :-(

Plus haut tu dis :

"De plu les designs doivent être extensible en hauteur et parfois aussi en largeur donc on ne peut pas se permettre de découper sous forme de bloc avec l'outil tranche"

Pour ce qui est de la hauteur, no pb, je comprends bien le but du découpage tel que tu le préconises.
Par contre, et c'est la mon pb, pour ce qui est de la largeur, j'ai un petit soucis :

Si je pars sur un thème destiné au 800x600 ou même au 1024x768, les images dont je me sers pour le thème vont être dégueu si je vois mon site sur du 1600x1200 !!! parce qu'agrandies à l'arrache ;-)
Et inversement, si je pars sur une haute réso, y'a de toute façon perte de qualité des images.

Je suppose qu'il doit existé une solution simple pour remédier à cela.
Outre le fait de passer le body à 100% en W et en H, comment faire pour ne pas perdre en qualité d'image ???

Telle est ma question ;-)

Tu aurais ça en rayon ?

Encore merci bcp pour tes tutos existants.

@ +++
Val

Grafikart (Mercredi 21 Janvier 2009 à 18:42):

@Val: Dès la conception il faut que tu sache si la largeur de ton site sera fixe ou pas. Dans le cas d'une largeur fixe tu prévois un fond qui se répète et tu centre le contenu (technique du tutoriel).

Par contre pour un site extensible en largeur c'est une autre histoire. Tu ne dois travailler qu'avec des images qui se répètent en largeur et plus avec des blocs. DeviantArt est un bon exemple (beaucoup d'aplats et des image se répétant sur l'axe des x)

Pour ton cas si tu pars sur un site 800x600 ben si la personne a un écrand plus grand il verra le fond se répété mais le contenu de ton site sera cantonné à une largeur de 800. Un peu comme celui du tutoriel si tu as un écran de 1680px de large il vera plus de fond mais le contenu ne se centrera pas. (agrandissement sans perte de qualité est impossible )

mpassionate (Vendredi 12 Mars 2010 à 00:11):

Bonjour Grafikar,
J'ai un gros problème J'hésite entre deux formas pour faire le template du site web. C'est quelle formas du document que je pourrais prendre entre 800px de largeurs, 600px de hauteurs, ou 1600px largeurs à 1200px; de hauteurs, J'aimerais savoir qu'elle serais le meilleur forma pour que le site web soi d'une bonne largeurs sur n'importe qu'elle formas d'écrans.

Baptiste (Vendredi 12 Mars 2010 à 12:13):

bin pour la hauteur tu t'en fiche, c'est extensible un site web!
Et pour la largeur... Bin prends la grille 960gs !
@+

Wr4d (Lundi 02 Février 2009 à 22:32):

Vraiment un bon tuto clair bien expliquer bravo a toi =) puis sa va me permettre de réveiller mes connaissance en Xhtml&css puis de progresser sous PShop Merci pour tes tuto

Hqx (Vendredi 13 Février 2009 à 23:26):

Bonjour,

Excellent tutorial, mais, il est possible d'avoir le même design pour essayer de le faire soi-même ?

Jbbbbb (Mardi 17 Février 2009 à 18:49):

tres bon tuto au moin la on saura comment faire parce que avec le siteduzero jcompren rien

Blop (Lundi 02 Mars 2009 à 16:20):

Merci pour ce tutoriel. Très bien expliqué.

Willmdmdmdmd (Lundi 09 Mars 2009 à 17:30):

Merci c'est très instructif!!!

floflo (Samedi 21 Mars 2009 à 21:37):

salut encore moi je floode ici:
juste un truc qui me fait douter ;j choisis de faire un site fixe mettons 600*800 si quelqu'un a un ecran plus grand (comme moi) ca sera pas centré?
sinon pour info j'air regardé le tutoriel mais jm'en rappelle plus quelle est la hauteur et largeur du template ("bloc")?

Chrys (Mercredi 25 Mars 2009 à 09:19):

Hello !

Merci à toi pour cet excellent tutoriel =)

Otaku-mad (Jeudi 09 Avril 2009 à 14:42):

Merci pour le tutoriel^^
J'ai adoré le commentaire du début "ou Paint, ça arrive" :D

themaster (Mercredi 15 Avril 2009 à 17:58):

Merci infiniment pour ce excellent tutorial, bien expliquer clair, simple
Vous the best voila vos tutoriaux m’aider beaucoup durant mon projet de fin d’étude,
Grâce a toi tous est clair devant mes yeux c’est meilleur que mon professeur
Merci encore
Etudiant tunisie

ToutiWeb (Mardi 21 Avril 2009 à 11:02):

superbe tutoriel pas trop long ni trop court superbement bien filmé et expliqué pour les débutants comme pour les pros à en croire les nombreux messages...
MERCI je vais pouvoir mieux comprendre comment alléger mes prochaines pages !
je cherchais ce genre de tutoriel pour faire de nouvelles rubriques ... MERCI et plein de bonnes choses à vous.

pitlion (Mardi 28 Avril 2009 à 09:45):

Un grand merci ! Simple, clair, efficace. Bravo et bonne continuation

ToonMolo (Mercredi 06 Mai 2009 à 16:12):

Je prends du plaisir tout en apprenant. J'adore (et tu me sauves la vie car j'ai un site web à réaliser pour mon stage )

quetionman (Jeudi 07 Mai 2009 à 23:51):

que fau til élécharger pour /xhtml-css apar not pad plus plus

Grafikart (Vendredi 08 Mai 2009 à 00:31):

@quetionman : Un correcteur d'orthographe... Rien d'autre, Notepad++ suffit

Le gentihomme qui vous veux du bien. (Lundi 11 Mai 2009 à 06:25):

Un grand bravo a vos tuto, clair et propre.

Merci pour ça.
Cordialement,
*******.

cerise (Lundi 11 Mai 2009 à 21:18):

Franchement impeccable

Sam (Mardi 12 Mai 2009 à 09:55):

Salut,

Ce tuto est super à regarder.

Mais à mettre en œuvre, ceci est une autre histoire. En effet, vous êtes trop rapide, je suis obligé de faire des retours et d'appuyer constamment sur pause pour bien comprendre le processus de mise en application de certains détails.

Je débute totalement dans ce domaine...

Sinon à part ça c'est généreux de votre par de proposer vos services.

??????? (Dimanche 24 Mai 2009 à 00:43):

superbe tutoriel pas trop long ni trop court superbement bien filmé et expliqué pour les débutants comme pour les pros à en croire les nombreux messages...
MERCI je vais pouvoir mieux comprendre comment alléger mes prochaines pages !
je cherchais ce genre de tutoriel pour faire de nouvelles rubriques ... MERCI et plein de bonnes choses à vous.

Phiip (Jeudi 28 Mai 2009 à 19:04):

chouette tutoriel, la méthode est claire et sympa !
(bon, je connaissais photoshop avant, mais quand même.

Allez, je passe au second !

Laaul (Lundi 01 Juin 2009 à 16:57):

Salut et un gros merci pour ce tuto (ainsi que le codage)

bonne continuation !

Belly (Mercredi 10 Juin 2009 à 12:04):

Super tuto :D Merciiii

nadras (Mercredi 10 Juin 2009 à 15:07):

MERCI ! MERCI !! ET ENCORE MERCI !!!!
...Un chouillat trop rapide mais voilà un tuto qui m'a fait faire un gros bond en avant :-)

Jerem (Jeudi 09 Juillet 2009 à 21:48):

Pour aplatir un calque : clique droit sur le calque : convertir en objet dynamique ( ce qui est bien c'est que ca marche aussi sur plusieur calque ).

abdelhak (Mercredi 29 Juillet 2009 à 16:50):

Merci beaucoup ! c'est vraiment super bien expliqué, ça permet aux personnes pas très à l'aise avec le design
mais j'ai une petite question: comment on peux prendre les muser pour applique dans le style css???
par ex (width:282px;/ height:27px;/ margin:10px 0 0 0;/ padding:10px 0 0 10px;)

mickael (Dimanche 02 Août 2009 à 13:30):

SAlut

Merci beaucoup pour le tuto, moi qui veut apprendre le graphisme et le codage, je suis ravi

Ton tuto est super sympa, clair, bien sur a chaque partie il faut faire une pause, et faire par etape et ensuite, recommencer si sa marche pas mais c le but d'un tuto

Aussi dés que j'ai un moment, je m'attelle au codage css

Encore merci et longue vie a graphikart

planete.game57 (Samedi 08 Août 2009 à 19:20):

Salut jojo

C'est bien, j'ai adoré!

Moi qui suis pas un fan du design, je viens de réapprendre Photoshop !

A bientôt

ingeniwi (Mardi 11 Août 2009 à 14:54):

Bonjour, merci pour ce superbe tuto.
J'ai un peu de mal pour voir comment procéder pour le mien.
Pourriez vous me donner un coup de main s'il vous plait ?

bow9 (Mercredi 12 Août 2009 à 02:28):

Merci...
bôw travail !!!
à moi de jouer now !!!!

val (Mercredi 12 Août 2009 à 03:11):

fantastique très bon professeur, tout est très clair, bravo et que dire.
encore :-)

val (Mercredi 12 Août 2009 à 03:20):

surtout pour ma part le 2emm tuto

dddundun (Mercredi 26 Août 2009 à 20:51):

Grakikart il faidrais que tu fasse un tutoriel sur comment faire un disgne.



ça serait top


Merci à toi.

bbshetan (Jeudi 27 Août 2009 à 16:29):

Félicitation pour ce tuto. J'ai découvert encore des astuces pour toshop pourtant jsuis pas novice....Merci beaucoup

thidenthi (Lundi 31 Août 2009 à 15:19):

super tutoriel
merci

j'ai une question : Par rapport au design complet du site que l'on veut créer (le template ) qu'elle doivent être les dimensions , prenons exemple sur le tutos , quels sont les dimensions du template ?

Merci :D

IkzzPress (Lundi 31 Août 2009 à 17:26):

Pour te répondre cela dépend surtout si ton design est fixe ou extensible, du public visé etc...
Quand tu créer un nouveau projet dans Photoshop tu as les preset Web avec les différentes dimensions possibles. Ensuite il y a les sites qui s'ajustent à la résolution du visiteur pour cela il faut coder en % et non pas en pixels.

thidenthi (Lundi 31 Août 2009 à 18:41):

merci IkzzPress , je pense réalisé un site comme celui de ce tuto

Aziat (Dimanche 06 Septembre 2009 à 13:39):

Bonjour, dejà Super Tutorial =D Et j'ai une question, Qu'elle est la taille en Pixel de ton Template ? Merci d'avance, Continue comme sa

etiphie (Samedi 19 Septembre 2009 à 03:43):

Merci pour cette source d'information! Très bien détaillé!
Un grand bravo pour ce tuto!

MsieuxK (Samedi 03 Octobre 2009 à 21:43):

Bonjour, tres simpa ce tuto en tout cas, j'adore.
Tres bon prof. J'aimerai integrer une intro sur un site web comment peut on s"y prendre. Peut etre faire un tuto si tu a le temps.
Merci et bon courage

Mourad (Samedi 10 Octobre 2009 à 20:47):

jai rarement vu un tuto aussi bien fait que celui là, j'ai commencer le HTML en DUT la semaine derniere mais je naurai que 32h pour faire mon site, jai matter en boucles les 2 videos qui se suivent mais jai 2 questions:
- Ou trouver des decors comme celui de manu36 et surtout est-ce que c'est legal de creer un site avec ?? ( est-ce que c est ce quon appel les templates??)
- Ma 2ie question, est-ce que t'as creer d autres tuto que celui là ou celui qui suit avec le code (dailleurs merci encore grace a toi jai appris beaucoup sur les css, 10x plus kavec les livres interminables)

Grafikart (Dimanche 11 Octobre 2009 à 02:41):

Merci
- Pour le fond il utilise des brushs que tu peux trouver sur deviantArt par exemple. Après sur le coté légal il faut voir les conditions d'utilisations.
- Je t'invite à naviguer sur le site pour découvrir les autres tutoriels. (Un autre dans le même style sortira bientôt)

John (Vendredi 16 Octobre 2009 à 15:48):

Super Tuto, j'ai adoré moi qui débute dans le domaine, tu viens de me donner un sacré coup de main !!! Merci mille fois par contre j'aurais bien voulu télécharger les fichiers, mais je ne trouve pas le lien suis je fou ou aveugle tout simplement ?

J'aimerais devenir membre du site, comment cela se déroule ?

Alex (Samedi 17 Octobre 2009 à 21:55):

Bonjour je veux savoir comment visualiser ce tuto? Apparemment j'ai un problème;
de l'aide SVP

kiev (Samedi 17 Octobre 2009 à 22:49):

Bonjour, super le tuto, je débute dans la découpe et codage, je voudrais savoir la façon de découper un "contenu" mais avec un dégradé, il faut faire la même façon présentée dans la vidéo? selectionner une grande partie du contenu plutôt qun pixel de selection ? Eviter les degrader dans les " contenus" ? si tu pourrais m'aider merci

laqueency (Lundi 19 Octobre 2009 à 16:26):

slt j'aimerais savoir comment faire pour créer un site web ce que je veux en fait c'est faire un portfolio j'aimerais bien ton aide stp

merci

tibo80 (Lundi 19 Octobre 2009 à 18:35):

merci beaucoup pour ce bon tuto

feedunord (Mercredi 21 Octobre 2009 à 11:10):

super vidéo!!!!!!! aussi je voudrai savoir ou se trouve toutes les sources de ce tuto?merci énormément!!!!

jln_sk8 (Jeudi 29 Octobre 2009 à 17:04):

Super tuto mon gars! Surtout comparé a ce que l'on trouve habituellement!

Windows 7 (Dimanche 08 Novembre 2009 à 11:48):

Super Bien fait ! :D

lexis (Jeudi 26 Novembre 2009 à 09:04):

Merci beaucoup pour ce tutoriel, très bien expliqué et j'en avais bien besoin...
En plus avec une voix qui n'est pas chiante à écouter, c'est mieux pour un tuto d'une heure !! Encore merci et très bonne continuation.

bentenx (Vendredi 04 Décembre 2009 à 19:45):

y'a plus possibilité de télécharger la tamplate?

Grafikart (Vendredi 04 Décembre 2009 à 20:21):

Non trop d'abus.

Loulou (Samedi 05 Décembre 2009 à 11:10):

Hey super tutos... Mais je voudroit faire une image sur photshop avec saisie de texte j'ai regarder l'autre tutos sur le moteur de rechercher avec ph cs4 mais ce n'est pas expliquez...

9-THUG (Lundi 07 Décembre 2009 à 03:57):

Bonjour,

C'est possible de me dire la taille du template que je dois créer, car j'en ai fais un, mais quand je l'ouvre avec firefox, le template ne prends pas toute la page.
merci

fallon (Mercredi 09 Décembre 2009 à 16:46):

Je débute et "dévore" tes tutoriels qui sont de très grande qualité, car simples et bien expliqués. Bravo et merci !

MBN86 (Vendredi 11 Décembre 2009 à 01:16):

Veryyyyyyyyyyyyyyyy Goooooooooooooooooooooooooooooooood

raph (Lundi 14 Décembre 2009 à 11:22):

Bonjour ou je peux trouver le tutoriel pour le codage en xhtml et css.
Super tuto
Merci

Badbart (Lundi 14 Décembre 2009 à 12:01):

Dans la partie xhtml/css du site peut être ?
"Créer un site web : Intégration" <- le nom du tuto

iguanes (Dimanche 20 Décembre 2009 à 20:17):

Trop cool !

aucaun (Jeudi 24 Décembre 2009 à 15:22):

excuse moi mais je ne trouve pas les éléments fournis en bas du tuto
comme je né pas photo shop ou pourrais je télécharger ton magnifique travaille

http://www.grafikart.fr/tutoriels/video/creer-un-site-web-decoupage-22

Badbart (Jeudi 24 Décembre 2009 à 15:59):

Déjà répondu. Il a enlever les sources car trop d'abus.

Grafikart (Jeudi 24 Décembre 2009 à 16:05):

Si tu souhaite avoir les sources envois moi un mail car je les ai retirées à cause d'abus.

Leb007 (Dimanche 03 Janvier 2010 à 10:51):

Bonjour, Bonne année

Trop cool, c'est vraiment gentil, je débute dans css, tes tutos sont super, je vais les faire tous, mais
j'aimerais aussi, avoir les sources, histoire de comparer mes résultats; merci d'avance; et encore merci pour ce super travail.

hno (Vendredi 08 Janvier 2010 à 23:12):

please h wont the picture for this desine because i want laern more of that
sorry i dont speak en or fr lang\
you are best taetcher

hno (Vendredi 08 Janvier 2010 à 23:18):

please i want the picture for this design because i want learn more of that
sorry i dont speak english or frans language
you are best teacher

digitaldraft (Lundi 11 Janvier 2010 à 15:34):

Merci, c'est vraiment le meilleur tuto que j'ai vu à ce sujet. Je l'ai suivi pour faire mon site et je voulais te remercier pour la clarté de tes explications.

bluemanx (Dimanche 31 Janvier 2010 à 00:57):

Merci bcp pour ce bon tuto pratique, mais j'ai un p'tit souçis autour des boutons de menu, je sais pas comment utiliser la technique cité dans le tutorial, en bref l'astuce de faire apparaître la deuxième image au survol.Merci bien.

Ethanol (Mardi 23 Février 2010 à 06:05):

Encore une fois, j'ai eu plaisir à suivre deux de tes tutoriels. Tu es même très drôle car tu sembles les faire en direct LIVE, donc quand ça merde ... ben tu dis merde !LOL. Pour les différents liens icones merci! J'en cherche depuis un bout et je ne pensais pas que des packs tout fait pouvait alimenter un site. Petite astuce dans mon usage Photoshop, je cliques droit sur le calques et je sélectionne (rasterize) qui est pixélisé dans la version française de photoshop.
J'ai beaucoup aimé tes mac moods icones sur ton windows ... Mais va falloir que tu passes sérieusement au mac si ce n'est pas déjà fait !LOL Encore un gros merci et lâches pas comme on dit ici au Québec, tu es vraiment bon!

mpassionate (Dimanche 07 Mars 2010 à 02:42):

Bonsoir à tous!
Je veux crée mon propre site web avec un désigne originale fait par moi-même. Je vais utiliser le logiciel photoshop cs4 pour faite le modèle graphique du mon site web, mais le problèmes j'aimerais que quelqu'un puisse me dire ces quoi les bonnes dimensions que ça prend pour en faire un modèles "template". J'aimerais avoir les dimensions comme dans le tutorial s.v.p.

Merci beaucoup en avance de votre aide.

Baptiste (Dimanche 07 Mars 2010 à 18:45):

bin au début, il explique le système 960 grid system, qui définit la largeur, et la taille des différentes colonnes... voilà!
@+

mpassionate (Dimanche 07 Mars 2010 à 18:51):

Merci de ton aide!

 

Ajouter un commentaire
Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel