Tutoriel pour decoupe de charte graphique

Fermé
Gariig - 11 oct. 2009 à 06:29
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 - 12 oct. 2009 à 17:40
Bonjour,

J'ai réalisé une charte graphique pour mon site avec Photoshop.

Je cherche à le découper pour le web.

Je ne trouve pas dans google de site de tutoriels pour apprendre a faire une decoupe de charte graphique.

Connaissez vous des sources ou je peux apprendre a faire des découpes de charte graphique?

Merci de votre aide.
A voir également:

6 réponses

kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
12 oct. 2009 à 17:01
Alors, une fois que tu as recadrer l'image t'a le choix entre 3 format :
il faut jonglé entre les 3 !

le jpg pour les image avec beaucoup de couleurs différentes (genre un dégradé) mais le jpg ne gère pas la transparence.

le png pour les images ou il te faut de la transparence. Attention, IE 6 ne comprend pas ça donc il te mettra un fond jaune ou gris là ou il est censé avoir de la transparence. Personnellement, je considère qu'il y a peut de gens qui en sont encore à IE 6 et de tt façon, on ne peut plus faire sans ( à l'heure du design web 2.0 avec les dégradé et transparence) alors moi je les utilise quand même.

le gif : 256 couleur donc pour les image avec peut de différence de couleur (genre un logo). Il gère la transparence et il est compris par tt les navigateur. Mais il n'a que 256 couleur dc parfois, les limites de l'image ou il y a de la transparence et un peut dégeu. De plus, je crois qu'il est soit visible ou invisible, c'est à dire que tu ne peux pas avoir une opacité de 60% par exemple (a vérifier, je ne suis pas sûr).

Donc, voilà, tu jongle entre ces 3 format en tenant compte des avantages et inconvénients.

Avec l'outils recadrage, je fais juste enregistrer sous en vérifiant bien d'être en RVB et en 72 (ou 96) dpi.

Très bien pour le CSS (afficher l'image en background), c'est la façon dont il faut procédé.
1
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
12 oct. 2009 à 09:55
Ben, t'a pas vraiment besoin de tutoriel.
Je suis pas sur d'avoir bien compris parce que t'es pas clair du tout.
je suis graphiste et "découper une charte graphique" ne veut absolument rien dire.
Si tu veux parler de découper ta page photoshop pour créer un fichier html, 2 solution :
Soit tu utilise l'outil recadrage pour découper chaque image indépendamment et construire ton site avec des balises div.

Soit tu utilise l'outils tranche et là, tu quadrilles ta page. Tu fait enregistrer pour le web et il va automatiquement te créer un fichier image avec toutes les images et un fichier html, ta page sera créer automatiquement et le site sera construit en tableau. Après t'emballe pas, la page est construit certes, mais sans CSS, il y a très peu de chance que chaque bloc soit placer pile poil.

La meilleur méthode est la première, plus simple, plus rapide et plus stable t'auras moins de problème.
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
12 oct. 2009 à 16:21
Merci pour tes conseils.

J'utilise aussi la 1ere methode (decoupe avec l'outil recadrage) qui me semble plus simple et moins d erreur possible.

Tu conseilles de l'enregistrer pour le web aussi avec cette métode? Et en quel format ?

Au niveau du html, Sachant que dans mes <div> je les insert en background dans le CSS avec les selecteurs suivants :

backroung-image :url("images/entete.gif");
backround-repeat : no-repeat;

Ma question est donc double :

Avec l'outil recadrage, faut-il enregistrer pour le web ? et en quel format (gif,png ou jpg)?

Mercide votre aide
0
Gariig Messages postés 194 Date d'inscription samedi 5 septembre 2009 Statut Membre Dernière intervention 4 avril 2011 9
12 oct. 2009 à 17:12
Ok merci j ai bien compris la différence entre les 3 format d'image

et tu fais comment pour vérifier que t es bien en RVB et 72 ou 96 dpi sous Photoshop?

Merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
12 oct. 2009 à 17:40
pour le mode colorimétrique :

image > mode >RVB

et pour la résolution :

Image > taille de l'image.

voilà
0
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
12 oct. 2009 à 17:01
Alors, une fois que tu as recadrer l'image t'a le choix entre 3 format :
il faut jonglé entre les 3 !

le jpg pour les image avec beaucoup de couleurs différentes (genre un dégradé) mais le jpg ne gère pas la transparence.

le png pour les images ou il te faut de la transparence. Attention, IE 6 ne comprend pas ça donc il te mettra un fond jaune ou gris là ou il est censé avoir de la transparence. Personnellement, je considère qu'il y a peut de gens qui en sont encore à IE 6 et de tt façon, on ne peut plus faire sans ( à l'heure du design web 2.0 avec les dégradé et transparence) alors moi je les utilise quand même.

le gif : 256 couleur donc pour les image avec peut de différence de couleur (genre un logo). Il gère la transparence et il est compris par tt les navigateur. Mais il n'a que 256 couleur dc parfois, les limites de l'image ou il y a de la transparence et un peut dégeu. De plus, je crois qu'il est soit visible ou invisible, c'est à dire que tu ne peux pas avoir une opacité de 60% par exemple (a vérifier, je ne suis pas sûr).

Donc, voilà, tu jongle entre ces 3 format en tenant compte des avantages et inconvénients.

Avec l'outils recadrage, je fais juste enregistrer sous en vérifiant bien d'être en RVB et en 72 (ou 96) dpi.

Très bien pour le CSS (afficher l'image en background), c'est la façon dont il faut procédé.
-2