Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créer un didacticiel Mise en page Web professionnel Photoshop

Étape 1. Mockup

Avant de commencer la conception, nous devons planifier les besoins, les regards et la fonctionnalité. Ensuite, nous devons adapter ces idées dans une mise en page pour les exécuter visuellement. Et les cadres de Mockups fil sont très utiles pour créer des présentations avec beaucoup de flexibilité. Il est une meilleure pratique et fortement encouragée dans l'industrie.







Je mets le en dessous d'un ensemble en utilisant des tons gris seulement. De cette façon, nous éliminons la couleur de la scène à ce moment. Alors que nous pouvons nous concentrer sur la mise en page dans son ensemble et éviter de bousiller avec des couleurs. Cela donne beaucoup de liberté de modifier rapidement et réorganiser les choses. Un mockup peut être aussi détaillée que vous le souhaitez. A cet effet, je vais avec celui ci-dessous. Il suffit de définir brièvement la mise en page et ce qui se passe où.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 2. Mettre en place la toile

Nous avons donc une impression bleu pour notre mise en page. Mettons en fait la conception ensemble! Nous allons créer une mise en page 960 pixels de large. Créez un nouveau document à 1200 x 1500.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ceci est une mise en page 960 pixels de large, nous avons donc besoin de définir la zone de travail en ajoutant des lignes directrices. Appuyez sur Ctrl + A pour sélectionner le document entier.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Aller à Sélectionnez> Transformer la sélection. Réduction de la taille de la sélection vers le bas à 960 pixels de large. Telle est la zone de travail de la mise en page.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter des lignes de guidage à la sélection.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Nous devons créer un peu de rembourrage entre la frontière et le contenu que nous allons ajouter plus tard! Avec la sélection active choisissez à nouveau Transformer la sélection. Redimensionner la sélection à 920 pixels de large. Cela signifie que 20 pixels de remplissage de chaque côté un montant total de 40 pixels de remplissage.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter à la sélection des guides.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 3. Créez l'en-tête

Créons l'en-tête de la mise en page! Faites une sélection est de 465 pixels de hauteur.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Remplir la sélection avec une valeur de gris d'abord et utiliser plus tard, les styles de calque pour ajouter des couleurs et des dégradés. Suivez ce tout au long de la conception afin de maintenir une hiérarchie visuelle.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter dégradé à l'en-tête. Double-cliquez sur la vignette du calque. Sélectionnez Gradient Overlay. Créez le gradient ci-dessous 2 couleurs. Utilisez les paramètres.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ça devrait ressembler à ça.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Suivant besoin d'ajouter un point fort à l'en-tête. Créez un nouveau calque en appuyant sur Ctrl + Alt + Maj + N. Choisir une brosse douce avec un diamètre de 600px. Choisissez # 19535a pour la couleur de la brosse. Il suffit de cliquer une fois sur le centre de l'en-tête.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Faire une sélection à partir de la partie supérieure qui est une hauteur de 110 pixels.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appuyez sur la touche Supprimer pour supprimer la partie sélectionnée. Cela ressemble à ci-dessous.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Réduction de la taille verticalement en appuyant sur Ctrl + T.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Nous devons nous assurer que le point de surbrillance est centrée dans l'en-tête. Sélectionnez les couches, en-tête et mettez en surbrillance, puis appuyez sur « V » pour passer à déplacer l'outil. Sur le panneau Options sélectionnez le bouton Aligner les centres horizontal.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créez un nouveau calque, tracer une ligne en surbrillance un pixel à l'aide de l'outil Crayon avec la couleur # 01bfd2.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Masquer les bords à l'aide d'un masque en douceur de gradient. Choisissez l'outil dégradé, créez le gradient ci-dessous dans le panneau Options.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer le gradient ci-dessus.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 4. Créer Motif Texture

Maintenant, créez un modèle simple de vérificateur et d'appliquer à l'en-tête. Enlever l'outil Crayon, définir la taille de la brosse à 2 pixels et ajouter deux points qui se touchent les coins des autres. Éteignez l'arrière-plan et sélectionnez les points. Choisissez Edition> Définir modèle.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créez un nouveau calque et le placer sous la couche de surbrillance. Sélectionnez la zone que nous voulons appliquer le modèle. Appuyez sur Maj + F5 pour charger la boîte de dialogue de remplissage. Choisissez le modèle qui vient d'être créé. Et OK.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

La sélection est rempli avec le motif. Regarde de plus près.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Mélanger le modèle en douceur dans l'en-tête. Ajouter un masque de calque à la couche de motif. Choisissez une brosse douce et de la peinture avec une grande brosse douce. Choisissez #ffffff pour la couleur de la brosse. Réduire la Opacité brosse à environ 60% et de la peinture. Si vous trouvez qu'il est trop fort puis réglez l'opacité de la couche individuellement.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 5. Ajout du Logotype

L'arrière-plan est à peu près terminée. Maintenant, ajoutez le type de logo. Avant d'ajouter le type ajouter un point fort qui reste derrière le logo. Choisissez une brosse douce avec # 19535a. Ajouter un endroit.







Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter le type. Le visage de la police j'est « Bebas ». Téléchargez gratuitement.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer des effets subtils sur le logo.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 6. Navigation

Ajouter les liens de navigation.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Double-cliquez sur la vignette du calque, sélectionnez Gradient Overlay. Utilisez ces paramètres.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 7. Curseur de contenu

Faire sélection est de 580 x 295 pixels.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Remplir la sélection avec un ton gris.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Apportez à l'image que vous souhaitez utiliser. Accrochez-le à la couche de base que nous avons créé ci-dessus.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Définissez la couleur de la brosse # 000000 et ajoutez place.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer un flou gaussien pour adoucir les bords.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Sélectionnez la moitié inférieure de l'ombre et le supprimer.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Repositionner l'ombre juste au-dessus du curseur.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Je reculai verticalement. Ensuite, il align centré sur le curseur. Sélectionnez les deux couches et sur le panneau Options cliquez sur le bouton Aligner les centres horizontal.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Dupliquer l'ombre et faites-le pivoter verticalement. Placez-le sur le bord inférieur du curseur.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Baisser les boutons Opacité à 50%

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ouvrez les formes automatiques du panneau Options et sélectionnez cette flèche. Ajoutez aux boutons.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter une bande. Remplir avec # 000000.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Baisser le Opacité à 50%.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ici, nous pouvons ajouter une description sur le projet.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 8. Ajouter quelques lignes Bienvenue

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 9. Pour terminer l'en-tête

Nous avons presque terminé l'en-tête. Ajoutons un effet d'ombre subtile aux achever le travail! Créer une ombre, comme nous avons créé plus tôt en utilisant l'outil pinceau.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Laissez écart 1px entre l'en-tête et l'ombre.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 10. Appliquer le dégradé à l'arrière-plan

Créer un gradient gris clair à blanc.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créez un nouveau calque en dessous de l'en-tête et appliquer le dégradé.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 11. Ajouter Curseur contrôle de rotation

Créer des contrôles de rotation.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer Ombre interne à une commande pour indiquer l'élément actif courant dans le curseur.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 12. Créer Diviseur contenu

Sélectionnez l'outil Crayon et tracer une ligne de pixels. Choisir gris clair (#aaaaaa).

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Masquer les bords avec douceur masque de gradient.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 13. Ajout du contenu principal

Il est temps d'entrer dans la partie contenu. Ceci est une mise en page 3 colonnes. Nous devons créer 3 colonnes égales avec un certain rembourrage entre eux. Je fait un calcul simple et divisé l'espace disponible dans 3 boîtes de largeur égale à 25 pixels de remplissage entre eux.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter des lignes de guidage aux boîtes. Retirez ensuite les cases. Et ce sont les colonnes.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajouter des services proposés. Laissez tomber les icônes du jeu d'icônes de fonction. Maintenir la distance entre les objets uniformément.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer Gradient Overlay et des maladies sur le bouton.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Dupliquer le bouton.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Nous allons ajouter quelques éléments de travail récents. Je dessinais trois boîtes de support d'image et appliqué 3 temps de pixel.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Coupez les images pour les boîtes.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

J'ai créé l'ombre comme nous l'avons fait plus tôt et l'a placé sous les cases.

Ajouter une description du projet.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créons le Twitter. Laissez tomber dans l'icône d'oiseau Twitter.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Ajout d'une annonce Twitter.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Créer un bouton pour plus de Tweets.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer ces styles.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Étape 14. Création et pied de page de finition

Faites une sélection pour le pied de page et le remplir avec une valeur de gris.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Appliquer couleur de superposition.

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Aperçu des résultats finaux

Comment faire pour créer une mise en page Web professionnel dans Photoshop - Tutoriels Photoshop

Header image fournie par DepositPhoto







Articles Liés