Concevoir une mise en page de blog épurée et élégante dans Photoshop CS6

Dans ce tutoriel, je vais vous montrer le processus de faire un blog de design simple et propre en utilisant le dernier Photoshop. Nous allons utiliser le nouveau Styles de personnage et Styles de paragraphe pour nous aider à rationaliser le processus.

Pour suivre ce tutoriel, vous aurez besoin des ressources suivantes:

Sans police gratuite de Bernd Montag.
Motif répétable de 26 pixels de PSDfreemium.
Icônes gratuites de réseaux sociaux de Daniele Selvitella.

Démo

Préparer la toile

Étape 1

Dans cette conception, nous allons utiliser 960 gs comme cadre. Téléchargez le modèle à partir de sa page principale et dans le fichier zip, recherchez le fichier Photoshop. Ouvrez le fichier '12 Column Grid 'dans Photoshop.

Cliquez sur l'icône en forme d'œil du calque 12 Cols pour le masquer. on ne va pas en avoir besoin pour l'instant.

Étape 2

La taille actuelle de la toile est trop petite. Cliquez sur Image> Taille de la toile (ou Ctrl + Alt + C). Ajoutez une taille plus grande et assurez-vous de définir son point d'ancrage au centre.

Étape 3

Appuyez sur Ctrl + R pour révéler la règle. Cliquez sur Voir> Nouveau Guide pour faire un nouveau guide qui nous aidera à concevoir avec précision. Sélectionner Verticale et à la position: 185 px faire un guide vertical 185 px de la toile en haut à gauche.

Étape 4

Dessine un autre guide vertical à la position 150 px, 1095 px et 1130 px.

Ci-dessous, notre dernier guide dans la toile.

Préparation du thème de couleur

Étape 5

Pour cette conception, nous allons utiliser une belle combinaison de couleurs de Colorlouver. Cliquez sur le lien Aperçu pour ouvrir la combinaison de couleurs au format jpeg..

Enregistrez la combinaison de couleurs et placez-la dans le fichier Photoshop. En plaçant l'image directement à l'intérieur de la toile, nous pouvons échantillonner sa couleur plus rapidement et plus facilement.

Préparer le fond

Étape 6

Sélectionner Contexte couche et cliquez sur l'icône de verrouillage en haut du panneau Calques pour le déverrouiller. Double-cliquez sur la vignette pour changer sa couleur.

Cliquez sur la deuxième couleur, # 948371, pour le sélectionner.

Étape 7

Dessinez une forme rectangulaire sur le dessus de la toile. Ce sera le deuxième fond.

Étape 8

Gardez la forme sélectionnée. dans le Barre d'option, ouvrir Remplir Couleur case puis cliquez sur le icône de roue de couleur. Lorsque la boîte de dialogue Sélecteur de couleurs est ouverte, cliquez sur la première couleur pour la sélectionner. Pour son Accident vasculaire cérébral choix de couleur Aucun.

Étape 9

Créez un nouveau calque, puis sélectionnez la zone de travail supérieure à l’aide de l’outil rectangle de sélection. Activer le outil gradient et le remplir avec radial pente du blanc au noir. Assurez-vous que le dégradé est centré sur la toile.

Changer son Mélange mode à Écran et réduire ses Opacité à 37%.

Étape 10

Créez un nouveau calque et nommez-le 'ombre'.

Tracez une sélection rectangulaire au bas de l'arrière-plan secondaire, comme illustré. Cliquez sur Edit: Remplir. Ensemble Utilisation à Noir. Cliquez sur D'accord remplir la sélection avec du noir.

Étape 11

Adoucissez-le à l'aide du flou gaussien. Cliquez sur Filtre> Flou> Flou Gaussien.

Étape 12

Maintenez Alt, puis placez le curseur entre ombre et fond supérieur couche. Sans relâcher la touche Alt, cliquez pour convertir le calque en masque d'écrêtage. En le convertissant en masque d'écrêtage, l'ombre passe maintenant dans l'arrière-plan supérieur..

Étape 13

Faire tomber l'ombre Opacité à 50% pour le rendre subtil. Ci-dessous, vous pouvez voir le résultat avec un grossissement de 100%..

Étape 14

C'est toujours une bonne idée de mettre ces couches dans un groupe. Pour faire ça, sélectionner tous les calques puis cliquez sur Ctrl + G.

Entête

Étape 15

Dessinez un rectangle sur la toile supérieure, comme illustré.

Étape 16

dans le Barre d'option, ensemble Accident vasculaire cérébral couleur à # af9f8e.

Étape 17

Pour son Remplir couleur, sélectionnez gradient linéaire de # d0c4b9 à # a89c91.

Ci-dessous, le résultat en vue 100%.

Nom du site

Étape 18

Ajoutez le nom du site sur le côté gauche du dessin. Observez le placement comme indiqué ci-dessous. Double-cliquez sur le texte et ajoutez Ombre portée. Pour sa police, utilisez Sansation.

Utiliser les styles de caractères

Étape 23

Sauvegardons le paramètre de caractère en tant que style de caractère. Cette fonctionnalité est une version simplifiée des styles de caractère dans InDesign. Pour l'enregistrer, activez le texte puis cliquez sur l'icône "Nouveau style de caractère"..

Double-cliquez sur le nouveau style de caractère et utilisez le paramètre suivant..

Étape 24

Sélectionnez l'autre menu, puis cliquez sur le style de caractère pour l'appliquer. Si vous trouvez un signe plus à côté du style de caractère, cela signifie que le caractère a un paramètre différent. Pour remplacer les paramètres, cliquez sur l'icône en forme de flèche circulaire..

Étape 25

Répétez l'étape précédente pour créer un nouveau style de caractère pour le menu actif.

Étape 26

Alors, quel est l'intérêt d'utiliser des styles de caractère? Les styles de personnage nous aident à centraliser le paramétrage du personnage. Nous pouvons simplement éditer le style de caractère pour éditer chaque texte en utilisant ce style. Voir un exemple ci-dessous. Si nous modifions le type de police dans Style de caractère Menu supérieur - Normal Corbel, tout le menu normal est automatiquement changé en Corbel.

Étape 27

Créez un nouveau calque et placez-le sous la barre de menus. Ctrl-cliquez sur la barre de menus pour effectuer une nouvelle sélection en fonction de sa forme. Le remplir avec noir.

Étape 28

Supprimez la sélection à l'aide de Ctrl + D. Adoucissez-la en ajoutant Flou gaussien, Filtre> Flou> Flou Gaussien.

Curseur

Étape 29

Dessinez une forme rectangulaire avec la largeur de 10 colonnes (voir ci-dessous).

Pour son La couleur de remplissage sélectionner # dfd1c2. Pour son Accident vasculaire cérébral sélectionner # c8baac avec la taille 10 pt. Cliquez sur la petite flèche déroulante à côté de l'aperçu de la ligne et assurez-vous Aligner à l'intérieur est sélectionné.

Étape 30

Collez une image sur le cadre. Le convertir en Masque d'écrêtage en appuyant sur Ctrl + Alt + G. L'image ira automatiquement à l'intérieur du cadre du curseur. Si nécessaire, vous pouvez déplacer et redimensionner la photo sans affecter son cadre.

Étape 31

Dessinez une autre forme rectangulaire derrière le curseur avec la même couleur. Assurez-vous de le fixer au guide le plus à l'extérieur. Ajouter Style de calque> Superposition de motifs en utilisant le motif de pixel de PSDfreemium. Atténuer ses Opacité faire sa subtile.

Étape 32

Dessinez une forme rectangulaire au-dessus de la forme avec Remplir: # b3aca5 et pas de course. Hit Ctrl + T puis faites-le pivoter de 45 °. Convertir la forme du calque en Masque d'écrêtage.

Étape 33

Dupliquez la forme et redimensionnez-la. Changer son Remplir à une couleur plus sombre. Convertir la forme du calque en Masque d'écrêtage.

Étape 34

Répétez la même étape pour dessiner une autre flèche de l'autre côté.

Étape 35

Ctrl-clic sur le cadre de la diapositive pour effectuer une nouvelle sélection. Créez un nouveau calque et convertissez-le en Masque d'écrêtage. Remplissez la sélection avec noir.

Étape 36

Désélectionnez (Ctrl + D) puis adoucir en utilisant Flou gaussien.

Vous pouvez réduire l'opacité de l'ombre si nécessaire.

Étape 37

Tracez un rectangle arrondi sur le coin du curseur avec Remplir # c8baac.

Étape 38

Tracez un cercle à l'intérieur de la forme. Définir sa Accident vasculaire cérébral à noir avec taille 1 pt et enlever le remplissage.

Étape 39

Sélectionnez le cercle chemin utilisant Sélection du chemin outil. Maj + Alt-glisser le chemin pour le dupliquer.

Répétez cette opération pour dessiner plus de cercles.

Étape 40

Sélectionnez l'un des chemins de cercle. Appuyez sur Ctrl + Maj + J pour le couper en un nouveau calque.

Étape 41

dans le Barre d'option, enlever ses Accident vasculaire cérébral et changer sa Remplir à un radial gradient de # e38989 à # bb5c5c. Ajouter Style de calque> Lueur externe et Ombre portée.

Étape 42

Dessinez une sélection elliptique sous le curseur. Créez un nouveau calque et remplissez-le avec noir.

Étape 43

Désélectionnez (Ctrl + D). Ramollir en utilisant Flou gaussien.

Fond inférieur

Étape 44

Dessinez une autre forme rectangulaire pour le fond en bas. Utilisez le même Remplir et Accident vasculaire cérébral couleur comme la forme du curseur.

Comme toujours, soyez très prudent avec son placement. Nous voulons qu'il couvre tous les guides sur la toile.

Ajouter Style de calque> Superposition de motifs.

Voici le résultat avec un grossissement de 100%.

Étape 45

Sélectionnez sa zone supérieure à l'aide de l'outil Rectangle de sélection.

Étape 46

Créez un nouveau calque, placez-le derrière la forme. Remplissez la sélection avec noir. Appuyez sur Ctrl + T, faites un clic droit et sélectionnez La perspective.

Faites glisser ses coins supérieurs vers l'extérieur.

Faites un nouveau clic droit et choisissez Échelle. Faites glisser la poignée supérieure vers le bas.

Faites un clic droit et choisissez Chaîne. Faites glisser le segment gauche et droit vers l'intérieur.

Ramollir en utilisant Flou gaussien.

Atténuer le Opacité à 20%.

Étape 47

Dessinez un rectangle blanc à l’arrière-plan. Cela va être un fond pour le contenu principal du site.

Ajoutez un espace de 10 px à gauche, à droite et en haut de l’arrière-plan. L'espacement devrait être facile car nous avons préparé le guide dans les premières étapes. Ajouter Style de calque> Lueur externe.

Étape 48

Ajouter un nouveau guide, 25 px du dessus de la forme.

Section titre

Étape 49

Ajouter un nouveau style de caractère pour le titre de la section de page et sa description.

Ajoutez le titre de la section et sa description à l'aide de l'outil Texte. Appliquez les styles que nous avons créés précédemment. Assurez-vous d’ajouter un espace de 25 px à partir du haut de son arrière-plan à l’aide du guide créé précédemment..

Étape 50

Tracez une ligne de 5 px sous la description du site avec Remplir: # 938270 et AVC: aucun.

Message de blog

Étape 51

Créer un autre style de caractère pour le titre de l'article.

Étape 52

Ajouter un titre et appliquer le style de caractère précédent.

Étape 53

Dessinez un rectangle sous le titre de 4 colonnes de largeur. Ensemble blanc pour son Remplir et #bebebe pour son Accident vasculaire cérébral. Ajouter Style de calque> Contour.

Étape 54

Collez une image sur la forme. Convertissez-le en masque d'écrêtage (Ctrl + Alt + G).

Étape 55

Tracez un rectangle arrondi avec Remplir: # 8e8380 et AVC: aucun. Le convertir en Masque d'écrêtage.

Étape 56

Créer de nouveaux styles de caractères pour les métadonnées du blog.

Étape 57

Ajoutez du texte de métadonnées au-dessus de la forme et appliquez le style de caractère créé précédemment.

Étape 58

Activer Type outil et cliquez-glissez pour créer une zone de texte. Définissez sa largeur à 4 colonnes. Cliquez sur Type> Coller Lorem Ipsum pour le remplir avec Lorem Ipsum généré automatiquement à partir de Photoshop.

Étape 59

Créez un nouveau style de paragraphe pour le contenu du caractère. Cliquez sur la nouvelle icône du panneau Styles de paragraphe..

Double-cliquez sur le style de paragraphe et utilisez le paramètre suivant..

Étape 60

Appliquez ce style au contenu du message. Vous pouvez également expérimenter avec ses paramètres de retrait et d’espacement..

Pour la conception Web, désactivez la césure.

Étape 61

Tracez un rectangle arrondi avec Remplir: # 8e8380 et AVC: aucun. Ajouter Style de calque> Superposition de motifs. Par souci de cohérence, utilisez le même motif que dans le curseur.

Étape 62

Ajouter une étiquette de bouton. Je vous suggère de l'enregistrer en tant que style de caractère. De cette façon, nous pouvons l'utiliser facilement pour d'autres boutons.

Étape 63

Le bouton précédent est en condition normale. Reproduisons-le et changeons sa couleur en # f76b6a. Définissez également le type d'étiquette en gras..

Étape 64

Placez le message dans un groupe, puis appuyez sur Ctrl + J pour le dupliquer. Alt-glisser pour dupliquer le groupe.

Répétez la même étape pour créer plus de messages. N'oubliez pas de changer l'image et le titre de chaque message.

Étape 65

Dupliquer Lire la suite bouton et changer son étiquette en numéro. Nous allons l'utiliser pour la navigation de page. N'oubliez pas de définir l'un des boutons en position de survol.

Étape 66: Pied de page

Commençons à travailler sur le pied de page. Ajouter un titre de widget et sa description.

Étape 67

Ajoutez un lien et tracez une ligne de 1 px en dessous. Ensemble Remplir: aucun et AVC: # 8e8380.

Étape 68

Cliquez sur Plus d'options bouton et sélectionnez ligne pointillée.

Étape 69

Ajouter plus de liens dans le widget.

Étape 70

Dupliquer le widget.

Étape 71

Nous devons également ajouter la condition de vol stationnaire. Définir l'un des liens en gras.

Sous ce lien actif, ajoutez une ligne de 5 px. Définissez sa couleur sur # f76b6a. Pour des raisons de cohérence, l’apparence de ce lien est similaire au menu actif de la barre de menus..

Étape 72

Ajoutez un autre rectangle dans la zone inférieure. Définir sa Remplir à # 3d3123.

Information de pied de page

Étape 73

Ajouter des informations de pied de page à l'aide de Type outil. Lui donner un noir Ombre portée ajouter du contraste à son fond.

Réseau social

Étape 74

Ajoutez quelques icônes de réseaux sociaux de Daniele Selvitella. Ajouter Style de calque> Lueur externe.

Étape 75

Atténuer l’icône normale à 50%. En vol stationnaire, gardons simplement sa Opacité à 100%.

Étape 76

Saisissez une icône de curseur à main libre et placez le curseur de main le plus petit au-dessus du lien actif ou survolé.

Résultat final

Ceci est notre résultat final. Vous pouvez constater que la dernière version de Photoshop propose des fonctionnalités intéressantes pour la conception d’une mise en page Web. Les styles de caractères et de paragraphes constituent une amélioration significative pour tous les concepteurs Web..

Démo
Source de téléchargement