Bonjour, alors voilà on m'a demandé un petit tutorial, ce que je peux dire, c'est qu'il n'y à pas vraiment grand chose de compliqué, en gros c'est mettre des carrés sur une surface de travail Adobe Mais bon, commençons, celà ne vous apprendra pas à faire des graphismes intéressant mais à organiser un design...

Etape 1 : La Forme

*LE FOND :

Préalablement : Créer une image dans Adobe de la taille que vous voulez, moi je prend souvent du 1024x768 ou du 800x800
Nous allons tout d'abord commencer par choisir nos deux couleurs principales, pour la démonstration je prendrais :
Beige : #BE8B29
Marron : #7B2E00

Appliquons l'une des couleurs comme fond (ici le marron) avec le pot de peinture...
Pour rester dans les classiques, nous allons faire un kit graphique avec double colonne de menu (une de chaque coté) et une colonne de contenu... Pour ce faire nous créons un nouveau calque et nous prenons l'outil de séléction rectangulaire...

*LE TRACAGE :

C'est là que va se jouer toute l'allure du kit... Nous allons sélectionner la zone qui fera office de bannière et la colorer de notre beige grace au pot de peinture.



Maintenant avec la meme technique nous allons tracer les trois colonnes :



Voilà le plus gros du boulot est finis Quoi non vous me croyez pas ? Ce truc moche va quand même pas vous servir de kit ? Oh vous m'en demandez beaucoup là... Bon allez ok je vous fait un exemple de personalisation...

Etape 1 : La Personalisation du kit

Bah oui j'allais quand même pas vous laisser avec des rectangles beiges voyons... Allez c'est partit !

*LES CONTOURS :

Nous allons maintenant prendre une tierce couleur, ici :
Gris Foncé #504838

Créons un nouveau calque, et séléctionnons le calque sur lequel repose notre traçage, avec l'outil de séléction magique nous allons séléctionner la bannière, puis nous allons retourner sur le nouveau calque et appliquer dans la séléction la troisième couleur...

Quoi hein ? Sa va couvrir ma couleur me direz vous...

Taisez vous et suivez mes ordres.. euh conseils... :twisted:

Répétez l'opération pour chaque zone de beige, en vérifiant bien que vous ajoutez le gris foncé sur le nouveau calque et non sur le calque de traçage...

Vous devriez enfin obtenir ceci :


Ah bah oui c'est pas plus beau je sais, mais bon suivez mes conseils et tout ira bien...
Maintenant avec l'outil de séléction rectangulaire nous allons séléctioner une partie de ces rectangles gris, de manière à ne laisser qu'un bord plus ou moins large :


Vous voyez ou je veux en venir hein ? Allez on s'emballe pas maintenant il faut rendre ces contours un peu plus sympatoches pour ceci suivez mon tutorial sur les contours (http://www.internetwisdom.free.fr/contours.php)

Et vous voilà avec un kit, bon ok c'est très spartiate, mais comme chaque kit est unique je ne peux pas vous en dire plus... Par contre je répondrais à vos questions...

QUOI !!! Tu nous laisses là en plan avec une image à moitié finie ! Dis nous au moins comment transformer sa en HTML !

Etape 3 : Le Codage du kit version fainéants

Voilà, un truc très simple pas terrible mais quand c'est maîtrisé sa permet de gagner un temps fou :o On va faire que le truc qu'on à pondu se découpe tout seul...

Ayé un post de plus de deux lignes et Globe raconte des âneries...

Mais non c'est très sérieux, nous allons désormais exporter le kit vers Image Ready

Dans ce programme vous allez vous servir de l'outil tranches, représenté par une petite pointe de couteau de modélisme...

Qué couteau de modélisme mi culo :mrgreen: ?

Ok sa :

Nous allons découper la bannière, le haut de chaque menu et le haut de la colonne d'abord, puis le bas de ces colonnes, puis la zone entre le haut et le bas, ce qui devrais nous donner :


Enregistrez désormais une copie optimisée sous, celà vous fera un fichier html et ici 10 fichiers images...

Explications : Image Ready à découper les images selon les tracé des tranches et à créé un fichier html avec un tableau qui les regroupent... Il s'agira désormais de mettre chaque image au fond de sa case, de supprimer l'image de l case et de créer des tableaux de meme taille...

Bonjour a tous et mreci pour ce tuto globe !
Je le trouve trés bien fait et j'arrive mtn a faire des kits graphiques ... seulment une fois fait et découper avec image ready j'arrive pas du tout a les utiliser !!!
Pourrais tu m'expliquer vite fais comment faire ?

bien vu le gars merci beaucoup :geek:

Bonjour,

Ok, merci Globe , et après pour mettre du texte sa ne posera aucune problème ?? car en gros on écrit sur des images non ??

Tjanzi.

Non, attendez je vais vous expliquer le principe

Comme vous l'avez constaté Image Ready vous fait un fichier plein de

Code:

<tr>     <td><img src=image.gif></td>     <td><img src=image.gif></td>   </tr>

Et comme vous vous y connaissez en HTML et bien vous savez que l'on peut faire ceci :

Code:

<tr>     <td background="image.gif"></td>     <td background="image.gif"></td>   </tr>

Vous devriez avoir compris là non ?

Au cas ou je rajoute que pour conserver la mise en forme il faudra parfois que vous rajoutiez des tableaux de la meme taille que les images à la place de celle ci ce qui en prime rend la mise en page plus simple, bien sur je vous conseille un WYSWYG pour ce genre d'opération qui sans sa est une opération longue...

_________________

Ah,

Ok, j'ai compris, l'astuces du tabelau je la connassais mais je ne comprenez pas pourquoi,

Merci Globe .

Tjanzi.

Pas de problèmes et hésitez pas à demander si il vous faut plus d'infos...

Merci bcp pour en effet j'avais oublié cette commande :DD
Mais étant donné que je suis un inculte ici, je viens pas vraiment pour les sites php jy connais rien en php ... je suis tombé sur cette partie illustration par hasar et a mon plus grand bonheur , bref ...qu'est ce qu'un WYSWYG ?et ou peut on s'en procurer un si ce n'est pas une commande ou une manip..? merci de repondre a cette autre question !

[désolé, je ne sais pas te répondre, Kalo, le suivant ou google sans doute :wink:]

Citation:

Comme vous l'avez constaté Image Ready vous fait un fichier plein de Code: <tr> <td><img src=image.gif></td> <td><img src=image.gif></td> </tr> Et comme vous vous y connaissez en HTML et bien vous savez que l'on peut faire ceci : Code: <tr> <td background="image.gif"></td> <td background="image.gif"></td> </tr> Vous devriez avoir compris là non ?

Cela voudrait-il dire, Globe, qu'un tel design n'est adaptable qu'en html et pas en css ? (je n'y connais absoluement rien, c'est donc juste une question...)

Merci d'avance...

_________________

-- Utopia Universalis --

wysiwyg -> Logiciel genre adobe golive et autre

What You See Is What You Go -> ce que tu vois est ce que tu aura, en gros

Bon ben moi,j'ai un sérieu problème, je n'arrives absolument pas a mettre mes images en Background... Voilà, alors je crois que j'ai fait n'importe quoi, puis comme je ne vois plus globe sur msn.. je poste ici ...

voici mon code que j'ai trituré :

Code:

<html> <head> <title>Sans titre-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" text="#FFFFFF"> <div align="center"><br> <br> <!-- ImageReady Slices (Sans titre-1) --> <table id="Table_01" width="801" height="600" border="0" cellpadding="0" cellspacing="0">    <tr>       <td background="images/pirates_01.gif"></td>          <div align="center"><img src="header.png" width="600" height="150" alt=""></div></td>       <td>          <img src="images/spacer.gif" width="1" height="129" alt=""></td>    </tr>    <tr>       <td colspan="5">          <td background="images/pirates_02.gif"></td>       <td>          <img src="images/spacer.gif" width="1" height="7" alt=""></td>    </tr>    <tr>       <td background="images/pirates_03.gif"></td>       <td rowspan="3">          <td background="images/pirates_04.gif"></td>       <td rowspan="2">          <td background="images/pirates_05.gif"></td>       <td rowspan="3">          <td background="images/pirates_06.gif"></td>       <td>          <td background="images/pirates_07.gif"></td>       <td>          <img src="images/spacer.gif" width="1" height="428" alt=""></td>    </tr>    <tr>       <td rowspan="2">          <td background="images/pirates_08.gif"></td>       <td rowspan="2">          <td background="images/pirates_09.gif"></td>       <td>          <img src="images/spacer.gif" width="1" height="17" alt=""></td>    </tr>    <tr>       <td>          <td background="images/pirates_10.gif"></td>       <td>          <img src="images/spacer.gif" width="1" height="19" alt=""></td>    </tr> </table> <!-- End ImageReady Slices --></div><br> <br> Pirates Des Caraïbes est un jeu gratuit sans obligation d'achat. </body> </html>

Quelqu'un pourrait m'arranger ceci ? merciiiiiiiiii !

_________________

J'ai le meme pb que chabiboy !

simple html ... , il faut que vous metiez des width et height ^^

exemple:

Code:

<table border=0 cellspacing=0 cellpadding=0> <tr> <td background=tonimga.jpg width="sa largeur"> contenu </td> </tr> </table>

( height="sa largeur")
voila.

désolé, mais finalement, j'ai régler le problème à l'instant je venais m'excuser... mais vraiment merci. :dwarf: