| Apprendre
! Si vous êtes ici c'est que vous avez envie d'apprendre comment fonctionne Adobe Photoshop. Instrument extremement puissant, il permet de réaliser d'incroyables effets graphiques tout en maitrisant la création via un système de calques très efficace. A vos tablettes graphiques ;) |
 |
|
Les
pages sur Gimp n'auraient sans doute pas vu le jour sans lours
qui a consciencieusement travaillé pour produire des tutoriels
de qualité et facilement abordables. Vous n'avez plus d'excuses ! Lancer-vous sur l'éditeur graphique gratuit mais néanmoins puissant qu'est The Gimp L'ékipe Kloobik.com |
|
 |
 |
PREMIERE PARTIE | ||
Voici
comment réaliser une interface pour le web. Voici
donc ce à quoi nous voulons arriver. |
|||
 |
|||
 |
|||
| Je
ne vais pas m'étendre sur la construction de l'image de départ.
En fait, il s'agit de créer le design completement sous photoshop,
puis de le découper pour enfin le mettre en page. A vous de
jouer pour cette partie là : tous les tutos du monde ne remplaceraient
pas votre imagination ... Donc, commencez par créer une image de ce que vous souhaitez comme design, incluant les boutons, barre de menu, footer etc ..... Pensez bien à ne pas réaliser un design trop large, l'important étant qu'il soit vu par toutes les résolutions à partir de 800*600 (les 640*480 sont désormais presque disparus). Pour cela, travaillez sur une image de 780 pixels de large au maximum (surtout si vous prévoyez un fond de page graphique: il sera dans ce cas légerement visible en 800*600) Une fois que votre image est faite, aplatissez les calques de manière à pouvoir exporter au format jpeg. Cette étape n'est pas obligatoire puisque vous pouvez exporter pour le web (ALT+F+W) depuis un .psd. |
|||
 |
|||
 |
|||
> fichier > enregistrer pour le web La palette "enregistrer pour le web" permet de définir le taux de compression de l'image, donc son poids final. Or, afin d'avoir une page optimale niveau graphique, il est ici nécessaire d'exporter en jpeg maximum et en qualité 100. |
|||
 |
|||
| Il
sera possible, après la découpe d'optimiser les images,
voir de supprimer celles qui ne servent à rien (le fond gris
de la page par exemple qui sera en fait transformé en un fond
de couleurs identique). > une fois vos paramètres définis, validez. > enregistrez l'image là où vous le souhaitez en la nommant index Nota : pour la bonne gestion du projet, organisez vos dossiers comme suit sur votre disque dur : |
|||
 |
|||
| Cette
organisation permet de ne pas se mélanger les pinceaux lors
de la mise en ligne, les fichiers natifs étant séparés
des fichiers du site..... C'est toujours dommage de laisser trainer
des psd sur le net ... Les fichiers html sont à mettre dans le root du projet en question (site truk pour cet exemple) |
|||
 |
|||
 |
|||
| Passons
maintenant à la découpe. Image ready est simple à utiliser mais beaucoup moins fonctionnel que Fireworks (c'est un avis personnel). La version demo de fireworks permet de tester le découpage en "tranche". Ouvrez fireworks et importez le fichier |
|||
 |
|||
|
Par défaut, l'image s'affiche en bitmap avec des calques prédéfinis.
Ne modifiez aucun paramètre. Observez la palette d'outil et sélectionnez l'outil découpe (K) |
|||
 |
|||
| Cet outil découpe (K) va nous servir tout au long de la découpe. | |||
 |
|||
| Sans
relacher la souris, délimitez la zone que vous souhaitez découper.
Aidez vous des repères de règle au besoin. Une fois
le point de découpe final atteint, lachez le bouton de la souris. Nota : les découpe sont ensuite redimensionnables, si besoin est. |
|||
|
|||
| Une fois la premiere découpe réalisée, une zone verte apparait, délimitant la "parcelle". | |||
 |
|||
| Observez
la palette des calques : par défaut, FW a attribué à
cette première découpe le nom "découpe". Modifiez le afin de vous y retrouver lorsque vous monterez vos pages (double-cliquez sur le calque) |
|||
|
|||
 |
|||
| Continuez
vos découpes. N'hésitez pas à zoomer pour vérifier que les tranches sont bien bord à bord.... Au final, vous devriez obtenir ceci : |
|||
 |
|||
 |
|||
| Enregistrez
votre image avec les tranches (CTRL+Maj+S) dans le dossier projet
ouaibe > sitetruk Le cas échéant, cela vous permettra de revenir et modifier vos tranches si vous en avez besoin ... |
|||
 |
|||
 |
|||
| Ce
fichier étant enregistré, exportons notre découpe
au format HTML, puisque nous voulons construire une page web a partir
de cette image. Pour cela, allez dans Fichier > Exporter La boite de dialogue suivante s'ouvre : |
|||
 |
|||
| Votre
image s'appelant index.png, par défaut le fichier html s'appelle
index, ce qui tombe plutot bien puisque c'est l'index du site ....
Choisissez ensuite les paramètres comme indiqués ci-dessus. Pour le dossier image, cochez la case "Placer les images dans des sous-dossiers" puis cliquez sur "parcourir" pour affecter le dossier "images" (que vous avez crée tout à l'heure en organisant votre projet ..) Validez. |
|||
 |
|||
| Fin
de la première étape. Voyons voir la suite dans un éditeur web ..... |
|||
 |
|||
© kloobik.com
- 2003/2004 |