Hello à tous voilà je vais me montrer très clair, je suis un débutant un graphisme sous photoshop mais je donnerai n'importe quoi pour apprendre, en ce moment j'ai envi d'essayer de réaliser des Design (kit graphique) sous photoshop mais par où commencer voilà une bien bonne question, quels outils utiliser. Je me suis renseigner sur internet mais on ne trouve que des tutoriaux pour faire des effets et non sur des réalisations de kit. Pourvez-vous m'eclairer sur les outils à utiliser, par quoi commencer, et s'il y a des choses précides à savoir
Merci de vos réponses qui me serront fructueuses j'en suis persuader !

salut eric en effet quand on debute ce n est pas evident , moi j' ai appris avec ce petit tuto exellent pour debutant à cette adresse http://rbox.free.fr/kit/vieuxkit/
a la fin j 'ai eu un peu de mal avec le css et html et c'est la que j'ai decouvert le site du zero pour terminer mon apprentissage
ensuite les tutos que tu trouve sur le net pour les effet te seront tres utile pour apprendre a ameliorer tes kits voila bonne continuation

J'avais déjà vu ce site. Et je trouve qu'il n'est vraiment pas terrible :S . Le mieux c'est de creer un nouveau document blanc assez grand (800*600) et d'essayer un peu tout les outils !

Quand tu penses pouvoir réaliser un bon truc, tu creer ton design et tu le découpe. Le codage est vraiment facile

Si tu veux me parler : wiinnie_11@hotmail.fr

il est pas terrible mais pour apprendre c'est tres bien je trouve si tu veus apprendre a utiliser les outils et savoir comment decouper un design etc par moment tu risque peut etre de caller si tu n as jamais utiliser toshop ,mais n hesite pas a demander on t aidera

il est plus que pas terrible, il est completement mauvais, je sais de quoi je parle je suis l'auteur du tutoriel en question, j'ai fait ce tutoriel il y à très très longtemps quand je débutais dans le xhtml et les css donc il contient des erreurs plus grosse qu'une locomotive des années 50, c'est pas du tout évolutif, tout est figé mal pensé bref c'est de la daube (j'ai quand même le droit de dire du mal de mon propre tuto non mais !) la feuille de style est immonde et le xhtml n'est pas bon, bref je conseil plutôt de suivre les cours du "Site du zéro" bien mieux expliqué, quand à ce vieux tutoriel je l'ai retirer de mon site il n'est present que sur le ftp mais comme personne ne m'écoute le lien circule sur le net et j'ai une 20aine de visiteurs par jour pour ce tuto uniquement, franchement j'en ai honte de ce tuto si si même si il à aider quelques personne à débuter sur photoshop il est vraiment pas bon

en fait je devrai le refaire avec mes connaissance actuel c'est à dire conforme w3c accessible AAA avec un vrai design suivant une charte graphique mais je n'ai ni le temps ni l'envie on trouve de tres bon tuto sur le net

Lol bon et bien c'est vrai qu il plus que basique mais j avais quand meme appris a utiliser les bases de photoshop , qui m ont bien servi c'est vrai que j 'ai du le lire au moins 20 fois en me triturant le cerveau et harceler rorschach sur son forum mais j étais arrivé a mes fins
je parle que de photoshop , car pour le css je n avais rien compris heuresement ya le SDZ

Bonjour,

J'ai fais mon kit graphique, mais je ne sais pas comment le découper. Je ne sais pas me servir d'image ready donc bon. Si quelqu'un a un lien ou peux m'expliquer, je le remercie entièrement ::)

le découpage c'est vraiment un truc siple, tu n'as même pas besoin de sortir image ready pour cela, en fait ça consiste juste à recader des portion de ton image pour les utiliser ensuite en fond de div, de titre de listes, de paragraphe, etc.

il faut donc que tu ouvre ton document dans photoshop ou The Gimp puis tu l'enregistre sous un autre nom pour garder l'original en lieu sûr, tu applati ton image pour ne pas avoir de problème avec les options de calques lors de la découpe, puis tu place des guides sur ton image pour délimiter les zones qui correspondent à tes div, si tu le fait bien tu devrai avoir un peux l'impression que tes zones xhtml sont redessiné sur ton image avec les lignes de guide, puis tu duplique ton document autant de fois que tu as de zone à découper et tu utilise l'outil recadrer et tes guides pour garder qu'une portion de chaque duplicata de ton document, au final tu dois avoir plusieurs morceau de ta maquette de site et il ne te reste plus qu'à les utiliser dans ta css pour reformer ta page

chaque découpe est unique puisque cela va dépendre à la fois du look du futur site mais aussi de la façon dont le xhtml sera conçu donc faire un tutoriel général sur la deoupe de maquette n'est pas aisé, on en trouve quelque un sur le net mais à chauqe fois le tuto correpond à un type de site très précis

mais montre ce que tu as réalisé pour le moment et je te donne des conseils.

Merci beaucoup pour ce minituto Rorschach ! C'est ce que je pensais bien ! Le problème, c'est que je ne sais pas comment découper le menu

--> http://adherents.free.fr/web/design.png

Et comment le coder ! En CSS je sais, mais alors je désespère parce que bon, je ne sais pas du tout comment le découper, ou, comment coder, comme il faut et tout...

Le menu actuel est vraiment beaucoup plus facil, mais surtout beaucoup plus moche
---> http://mallo-online.new.fr

Merci d'avance

c'est simple
je prend le premier bloc de menu par exemple, pour un menu on utilise une liste, il te faudra aussi un titre et tu groupe le tout dans un div pour que ce soit propre et facile à gérer donc tu obtiens un code xhtml de ce genre :


ensuite tu prend ton image de menu et tu la découpe en 3 parties

une qui va contenir le haut du menu donc le titre et que tu placera en fond de la balise h2 donc dans le style #titremenu1

une autre partie qui va contenir le bas du menu c'est à dire la bordure basse de ton bloc menu et tu placera cette image en fond de la balise ul en spécifiant que l'image doit s'afficher en bas donc en utilisant background-position et quelle ne doit pas ce repeter en utilisant backrgound-repeat

puis il te reste le fond du menu réduit à une simple ligne d'un pixel de haut que tu place en fond de la balise div donc dans le style .blocmenu

tu retire les puces de la liste et tu joue avec les marges et paddings pour bien positionner les liens, tu donne les dimensions de son image au titre et tu cache la balise span qui est dans le h2 avec un style comme :


avec cette méthode tu peux dupliquer tes blocs menu en changeant juste le id du h2 et tu obtiens quelque chose de valide et accessible

en bref tu découpe en 3 images (haut de menu, milieu de menu et bas de menu) que tu place en fond des trois éléments (h2, #blocmenu, ul)

Wha sympa merci je vais tester
C'est super sympa
Petite question : acceskey et tabindex, c'est quoi ?

les accesskey sont des raccourcis pour les internaute mal voyant ou non voyant, ainsi que pour ceux qui navigue au clavier par nescessité (handicape moteur) les tabindex c'est pour spécifier l'ordre dans lequel les liens sont selectionné lorsque l'on utilise la touche tabulation, regarde la fiche sur les conseil de navigation du site acces pour tous ici : http://www.acces-pour-tous.net/...aides_nav

pour les accesskey il y à des règles sur leur choix il y à de bonne discussion sur le sujet sur le forum de webmaster hub pour les tabindex ils sont plus ou moins utile suivant comment ta page est conçu

Merci de toutes vos réponses nombreuses je vous en remerci je me met directe à l'apprentissage ! :-) Que Dieu vous gardes (non non je ne suis pas croyant ^^)

Voilà après une petite heure de travail ce que j'ai réussi a faire pourriez-vous donner votre avis afin de l'améliorer si possible !

Moi je trouve qu'il n'y a rien à améliorer il est génial !

@ Roscharche : Bas enfait, sous dreamweaver c'était facil