Outils pour utilisateurs

Outils du site


html:tp2

Transformer un document Photoshop en HTML

Comment transformer un document, réalisé avec Photoshop, en une page HTML

Le travail se sera exécuté avec le logiciel ImageReady.
FIXME Refaire le tuto sur les base (tranches/options/exports)

De quoi partez-vous ?

Votre point de départ sera :
initial

Vous l'avez conçu en vous basant sur une grille de composition :
initial grille
les repères de Photoshop la figurent.

Vous savez comment cela va se comporter à l'écran
initial annotations

  1. image fixe
  2. image alignée à gauche (l'image est plus grande que ce format afin de prévoir des résolutions plus grandes)
  3. positionnement du titre centré verticalement dans l'écran (faire attention qu'il ne mange pas trop sur l'image)
  4. alignement par rapport au titre (doit rester à la même hauteur) largeur de div fixe. fond de la div blanc.
  5. Bande noire sur la totalité de la hauteur d'écran
  6. image alignée en bas

Je ne doute pas du fait que vos calques sont correctement nommés et groupés.
calques initial
Sinon, il est encore temps.

Le travail

Les outils à utiliser

Pour L'exportation, on utilise les tranches d'ImageReady.

Les compositions de claques

Elles vont définir différents jeux de visibilité des calques.
En crée une nommée « document final », elle servira à replacer rapidement le document à son état initial.
initial

Les ensembles de tranches

Crée une tranche (touche : K) qui recouvre votre document et la placée dans un ensemble de tranches.
contenu_web_1er_tranche.jpg
Pensez à renommer vos éléments.
Remarque : elle vous permettra de vous souvenir des dimensions et positions initiales de votre page WEB. Vous pouvez la désactiver en enlevant sa visibilité.initial

La taille de la zone de travail

Étape facultative, cela dépend de votre mise en page.

Si votre document ne montre pas tout, agrandissez la taille de la zone de travail (menu image).
initial

Vous révélez ainsi des éléments qui seront visibles lorsqu'il est affiché en plus grande dimension dans un navigateur WEB.
elargi.jpg

La démarche

Vous devez séparer les éléments graphiques qui se chevauchent. Vous allez utiliser les compositions de calques pour les afficher individuellement et les ensembles de tranches pour les exporter séparément.

Remarque : Les textes, sans effet typographique, ne sont pas à traiter.

Déterminer la visibilité des calques

Listez des éléments que vous devez obtenir.

Dans cet exemple, cela donne :

  • Le fond :
    fond_arriere.jpeg
  • L'image du bâtiment :
    photo.jpeg
  • Le personnage :
    initial
  • Le titre :
  • La colonne noire :

Si vous ne savez pas ce qui devra être découpé. Demander de l'aide pour anticiper sur ce dont vous aurez besoin.
Exemple : on extrait une bande (1px) du motif de la colonne. Elle servira d'image de fond, un moyen simple de reconstruire le graphisme en HTML.

Regroupez-les, si vous pouvez les afficher simultanément sans qu'ils infèrent les uns avec les autres.

Dans cet exemple, on obtient :

  • Le fond :
    • le fond.
  • Les images :
    • bâtiment,
    • personnage.
  • Le graphisme de mise en pages :
    • colonne noire,
    • titre.

Pour chaque groupe de tranches, fixez la visibilité des différents calques et créez la composition de calques correspondante. N'oubliez pas de les nommer explicitement.
initial

Pour déterminer quels calques affichés, posez-vous la question de savoir si les éléments peuvent se déplacer les uns par rapport aux autres ? Exemple : le titre reste fixe sur la colonne noire et il peut chevaucher l'image du bâtiment.

Cela donne dans cet exemple :

  • Le fond :
    doc_fond.jpg initial
  • Les images :
    doc_images.jpg initial
  • Le graphisme de mise en pages :
    doc_mep.jpg initial

Créer les « tranches »

Pour chaque composition de calques, faites un groupe de tranches.

Vous obtenez :

  • Le fond :
    tranches_fond.jpg initial
  • Les images :
    tranches_images.jpg initial
  • Le graphisme de mise en pages :
    tranches_mep.jpg initial

Important, nommez vos tranches (sans espaces ni accents).

Exporter les images

Veillez à bien faire preuve de méthode en réalisant ce qui suit.
Pour chaque groupe de tranches, opérez les actions suivantes :

  • Ne laissez que ce groupe de tranches visible (masquez les autres).
  • Sélectionnez la composition de calques correspondante.
  • Ne demander que l'enregistrement des tranches utilisateur.

Voilà, vous pouvez utiliser vos images dans le code

FIXME Tuto sur le détourage des transparences (couleur de fond)

html/tp2.txt · Dernière modification: 2008/04/24 22:00 (modification externe)