Comment créer un modèle de page Web depuis Scratch - Factures

Adobe Photoshop est l'outil standard des agences digitales et des services internes pour créer des graphiques de sites Web. Bien que Fireworks soit optimisé et spécialement conçu pour produire des fichiers source de graphisme Web, il n'a tout simplement pas survécu, probablement à cause de l'énorme effort de reconversion que cela impliquerait pour que des départements entiers fassent le changement. Pour configurer un nouveau modèle de maquette Web:

1. Lancez Photoshop.

2. Choisissez Fichier → Nouveau.

   Dans la boîte de dialogue qui apparaît, entrez une dimension de 1 200 pixels de large sur 1 000 pixels. La résolution devrait être réglée à 72 ppp ( pixels par pouce, en fait). Le mode de couleur devrait être la couleur RVB. La couleur de fond peut être blanche. Cliquez sur OK.

3. Dans le menu Photoshop, sélectionnez Préférences → Général.

   Sur la gauche, sélectionnez l'option Units & Rulers. Ensuite, dans la zone de la fenêtre principale, pour les règles, sélectionnez "pixels" dans le menu déroulant. Cliquez sur OK.

   Vous utiliserez des guides. Pour ce faire, vous devez d'abord activer les règles à partir du menu Affichage, comme indiqué à l'étape 4.

4. Sélectionnez Affichage → Règles dans le menu.

   Une fois que vous avez vu les règles, cliquez sur la règle de gauche, faites glisser un guide vertical et déposez-le à la marque de 100 pixels.

   

5. Réinitialise le marqueur 0, 0.

   Dans le coin supérieur gauche de votre document, à l'intersection des deux règles se trouve un petit carré en pointillés. Cliquez sur ce carré et faites glisser votre guide à la marque de 100 pixels, mais veillez à rester en haut de la page. Qu'est-ce que vous essayez de faire est de garder 0 en haut de votre page (où il est maintenant), mais placez votre repère actuel de 100 pixels à 0 à la place. Si vous le faites correctement, vous verrez la mise à jour de numérotation dans votre règle supérieure.

6. Définissez le second repère de guidage.

   Cliquez à nouveau sur la règle de gauche et faites glisser un autre guide. Faites glisser ce nouveau guide sur la page et déposez-le sur la marque de 1 000 pixels. Si vous avez correctement effectué les étapes 1 à 6, vous devriez avoir une marge de 100 pixels de chaque côté de vos deux guides. Enregistrez le document.

7. Transformez l'arrière-plan en calque.

   Dans le panneau Calques, vous ne devriez avoir qu'un calque appelé "Arrière-plan" en italique. Double-cliquez dessus pour le transformer en un calque transparent et déplacé dans les calques que vous allez créer. Dans la fenêtre qui apparaît, laissez le nom comme couche 0 pour le moment et cliquez sur OK.

8. Créer quatre ensembles de calques.

   En bas du panneau Calques, vous verrez une icône de dossier. Cliquez quatre fois dessus pour créer quatre ensembles de couches distincts (dossiers pouvant contenir des calques).Ils sont un excellent moyen de vous aider à rester organisé. Voici les étapes:

   1. Double-cliquez sur le texte du groupe 1 du groupe de calques le plus en bas et renommez-le en arrière-plan en majuscules.

      Utilisez tous les majuscules pour les noms de dossier et les minuscules pour les noms de calque afin de les distinguer.

   2. Cliquez et faites glisser le calque Layer 0 dans l'ensemble de calques BACKGROUND.

   3. Double-cliquez sur le texte du groupe 2 et renommez-le FOOTER.

   4. Renommez les deux autres jeux de couches CONTENT et NAVIGATION.

   Ces ensembles de calques ne sont que votre point de départ, et il se peut que vous ayez besoin de moins ou de plus au fur et à mesure. Enregistrez votre modèle

   

Vous avez maintenant une toile vierge prête pour vos inspirations créatives. Lorsque vous créez de nouveaux calques pour travailler sur différentes parties de votre composition, nommez-les immédiatement et assurez-vous qu'ils sont glissés dans l'ensemble de calques approprié. Non seulement cela vous aidera à rester organisé, mais tout autre concepteur qui choisira votre maquette pour apporter des modifications - ainsi que le développeur qui doit l'utiliser pour créer la version HTML - sera plus à même de comprendre ce qui se passe.