Comment construire un modèle de page Web à partir de zéro

L'outil standard à travers les agences numériques et services internes pour la construction de site web graphiques est Adobe Photoshop. Bien que Fireworks est optimisé et le but-construits pour produire des fichiers de sources web-graphique, il n'a tout simplement pas pris, probablement à cause de l'effort recyclage massif cela impliquerait de faire des départements entiers font l'interrupteur. Pour mettre en place un nouveau modèle web-échantillon:

1. Lancez Photoshop.

2. Choisissez Fichier-Nouveau.

   Dans la boîte de dialogue qui apparaît, saisissez une dimension de toile de 1200 pixels de large par 1000 pixels de haut. Résolution devrait être fixé à 72 dpi (pixels par pouce, en fait). Le mode de couleur doit être couleurs RVB. La couleur de fond peut être blanc. Cliquez sur OK.

3. Dans le menu de Photoshop, sélectionnez Préférences général.

   Sur la gauche, sélectionnez les unités Option Règles. Puis, dans la zone de la fenêtre principale, pour les dirigeants, sélectionnez “ n ° 148 pixels; dans le menu déroulant. Cliquez sur OK.

   Vous serez en utilisant des guides. Pour ce faire, vous devez d'abord tourner sur les règles dans le menu Affichage, comme indiqué dans l'étape 4.

4. Sélectionnez Afficher-Règles dans le menu.

   
   
   
   
   

   Après avoir vu les règles, cliquez sur la règle de gauche et faites glisser un guide vertical et déposez-le à la marque 100-pixel.

   

5. Réinitialiser le marqueur 0,0.

   Dans le coin très haut à gauche de votre document, à l'intersection des deux règles est un petit carré en pointillés en elle. Cliquez sur ce carré et faites glisser pour votre guide à la marque 100-pixel, mais attention à 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 mis votre guide 100-pixel marque actuelle à 0 à la place. Si vous le faites correctement, vous verrez la mise à jour de numérotation dans votre top règle.

6. Réglez le deuxième marqueur de guidage.

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

7. Tournez le fond en une couche.

   Dans le panneau Calques, vous devriez avoir une seule couche appelée “ arrière-plan ” en italique. Double-cliquez dessus pour le transformer en une couche qui est capable de transparence, et d'être déplacé dans la couche ensembles que vous allez créer. Dans la fenêtre qui apparaît, laissez le nom en tant que couche 0 pour l'instant et cliquez sur OK.

8. Créer quatre groupes de calques.

   Au bas du panneau Calques vous verrez une icône de dossier. Cliquez quatre fois pour créer quatre distincte groupes de calques (dossiers qui peuvent contenir des couches). Ils sont une excellente façon de vous aider à rester organisé. Voici les étapes:

1. Double-cliquez sur le texte du Groupe 1 de l'ensemble de calque inférieur et renommez-le en arrière-plan dans tous les bouchons.

   Utilisez tous les bouchons pour les noms de dossiers et minuscules pour les noms de couche pour aider à distinguer entre eux.

2. Cliquez et faites glisser la couche couche 0 dans l'ensemble de la couche CONTEXTE.

3. Double-cliquez sur le texte du Groupe 2 et renommez-le pied de page.

4. Renommez les deux autres ensembles couche contenu et la navigation.

Ces groupes de calques sont juste votre point de départ, et vous devrez peut moins ou plus que vous allez. Enregistrez votre modèle.

Vous avez maintenant une toile vierge prêt pour vos inspirations créatives. Lorsque vous créez de nouvelles couches de travailler sur différentes parties de votre maquette, nommez-les tout de suite et assurez-vous qu'ils sont entraînés dans l'ensemble de la couche appropriée. Non seulement cette aide vous restez plus organisé, tout autre designer qui capte votre échantillon de faire des changements - ainsi que le développeur qui doit l'utiliser pour construire la version HTML de lui - sera mieux en mesure de lui donner un sens.