Dans la création d'un site web, l'étape de rendu du design de la page est très importante, qui sera par la suite composée et publiée sur le réseau. Dans cet article, vous apprendrez à utiliser Adobe Photoshop pour dessiner une mise en page compétente pour un site Web, sur la base de laquelle vous pourrez ultérieurement créer des mises en page plus complexes.
Il est nécessaire
Programme Adobe Photoshop
Instructions
Étape 1
Créez un nouveau fichier dans Photoshop (Ctrl + N) avec les dimensions 1040x1400, où 1400 est la hauteur. Activez l'affichage des règles (Ctrl + R) et définissez les pixels comme unités de mesure dans les paramètres de la règle.
Étape 2
Commencez à étirer les guides afin qu'ils s'adaptent aux bordures des zones de mise en page. Étirez les bordures latérales de manière à laisser 40 pixels sur les bords. Les bordures supérieure et inférieure doivent également laisser 40 pixels de chaque côté des bordures de l'arrière-plan.
Étape 3
Sélectionnez ensuite un guide situé à 200 pixels du haut de l'arrière-plan pour l'en-tête supérieur.
Étape 4
Pour former les barres latérales à gauche et à droite de la mise en page, définissez les repères à 240 pixels de la bordure d'arrière-plan vers la gauche et 800 vers la droite.
Étape 5
5px vers l'intérieur à partir des barres latérales gauche et droite et dessinez deux autres guides verticaux. Faites ensuite glisser deux autres guides 245 px vers la gauche et 795 px vers la droite.
Étape 6
Mesurez maintenant à partir de la bordure de l'en-tête 30px et dessinez un guide horizontal pour le menu horizontal.
Étape 7
Sélectionnez la zone étroite du menu horizontal que vous venez de marquer avec une sélection rectangulaire à l'aide de la touche M. Sélectionnez l'outil de remplissage et remplissez la zone avec une couleur gris clair neutre.
Étape 8
Sélectionnez l'outil de remplissage et remplissez la zone avec une couleur gris clair neutre. Cliquez sur le menu "Sélectionner-Modifier-Compresser", spécifiez une option de 1 pixel et cliquez sur "OK". Remplissez la zone avec une nuance de gris plus clair - vous aurez un cadre de menu.
Étape 9
Créez un nouveau calque et sélectionnez une image appropriée pour l'icône ou le logo du site, puis ouvrez-le.
Étape 10
Insérez une image sur un nouveau calque dans l'en-tête, en la plaçant sur le bord gauche. À droite de l'image, écrivez le titre du texte du site en utilisant n'importe quelle police.
Étape 11
Concevez les blocs de votre site Web dans le même schéma de couleurs que l'en-tête nouvellement créé. Sélectionnez la zone de la barre latérale gauche et effectuez les mêmes opérations de remplissage bicolore qu'avec le bloc de menu.
Étape 12
Faites de même avec le bloc de contenu central. Copiez le calque de la barre latérale gauche et placez-le comme barre latérale droite.
Étape 13
Ajoutez du texte à votre mise en page - choisissez une police neutre et remplissez les titres de menu, les exemples de nouvelles, les photos, les balises et les liens.
Étape 14
Terminez la mise en page en créant un "pied de page" ou un pied de page - notez-y vos droits d'auteur et vos contacts.
