Share
Ce que vous allez créerDans ce tutoriel, je vais vous montrer comment créer une présentation de blog simple et élégante dans Photoshop. Nous utiliserons une image forte au-dessus du pli (où que ce soit) avec des messages simples, suivis d'une typographie très propre et élégante.
Pour pouvoir suivre, vous aurez besoin des éléments suivants (disponibles gratuitement):
Commencez par créer un nouveau document (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous. Vous êtes libre d'utiliser une toile de toutes les dimensions que vous préférez - le Web n'est pas une largeur fixe, après tout.
Assurez-vous que la résolution est définie sur 72 pixels / pouceDéfinissons des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. Je n'utilise pas toujours une grille, mais l'établissement de certaines lignes directrices assurera la propreté et aidera à définir la largeur de notre site Web. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000 pixels comme largeur de site Web et j'ajoute quelques indications à partir des coins afin qu'il ait de l'espace pour respirer.
Remarque: Instructions utilisées pour ce didacticiel: verticales à 100px, 285px, 445px, 600px, 605px, 765px, 925px et 1100px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
Si vous vous en tenez à cette étiquette Photoshop, les choses resteront organisées et faciles à naviguer ou à modifier. Créons trois groupes de couches nommés En-tête, Contenu, Partage et Pied de page. Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône..
La zone d'en-tête joue un rôle très important dans la communication avec les utilisateurs et garantit que les visiteurs restent sur le site Web. Pour ce blog, je vais utiliser une photo d'un café de Londres accueillante. Lorsque vous choisissez une image pour votre projet, assurez-vous qu’elle envoie le bon message aux visiteurs et réponde aux besoins du client..
Créons d'abord l'arrière-plan du blog. À l'intérieur de Entête groupe dessine n’importe quelle forme de rectangle de couleur à l’aide du Outil Rectangle (U). Dans mon cas, j'ai dessiné un rectangle de taille 1200x600px et l'ai placé en haut du document..
Maintenant, téléchargez Cafe photo, faites-le glisser vers le document Photoshop et placez-le au-dessus du calque rectangle. Renommez le calque d'image en quelque chose que vous pourrez reconnaître plus tard, dans mon cas, j'ai utilisé IMG. Après cela maintenez la Alt clé et souris sur la couche de photo jusqu'à ce que vous voyiez une petite flèche pointant vers le bas, puis relâchez-la. Vous venez de créer un Masque d'écrêtage.
Maintenant frappé CMD + T et redimensionner la photo pour répondre à vos besoins.
Pointe: tenir Décalage clé pour transformer proportionnellement.
Nous devons maintenant assombrir et rendre plus neutre l’arrière-plan de notre blog afin qu’il soit lisible au-dessus. Faisons légèrement flou notre image en allant à Filtre> Flou> Flou gaussien… et mise Rayon à 3 pixels. L'utilisation d'un léger effet de flou permet d'éliminer les détails de l'image et permet aux yeux des visiteurs de se concentrer sur des éléments plus importants, dans notre cas, le message du blog.
Créons un nouveau calque au-dessus de l'image placée et faisons-en un Masque d'écrêtage comme indiqué à l'étape précédente. Puis remplissez-le avec une nuance noire et réduisez l'opacité à 50% pour que notre image s'assombrisse tout en restant visible..
Il est temps d'ajouter un logo pour notre blog. Créer un nouveau groupe dans le Entête groupe et nommez-le Logo. Pour ce tutoriel, je vais utiliser un logo simple, basé sur une typographie. Choisissez le Outil de type horizontal (T), Bentham 30px taille de la police et écrivez le titre de votre blog. Notez que l'espacement des lettres est plus grand que d'habitude, ce qui crée une apparence plus élégante et facilite la lecture des majuscules..
Pour mettre plus d'emphase, faisons une bordure autour. Choisissez un Outil Rectangle (U) et dessinez un rectangle légèrement plus grand que le texte.
Maintenant, cliquez avec le bouton droit de la souris sur le calque et sélectionnez Options de fusion… appliquer les options de trait suivantes.
Enfin définir la couche rectangle Remplir à 0% et vous avez un joli trait 1px autour de votre logo fictif.
C'est le moment où nous ajoutons un message de blog qui résume le propos de ce blog. Choisissez le Type horizontal (T), 60px Taille Bentham police et rédigez un court message pour vos lecteurs. Assurez-vous que la hauteur de ligne est suffisamment grande pour que le texte ait suffisamment d'espace pour respirer et soit équilibré.
Pour l'esperluette que j'ai utilisée Baskerville (italique) comme il est plus orné. Pour le message secondaire que j'ai utilisé PT Serif (italique) police définie sur 20px en taille. Assurez-vous de placer votre message à la verticale au centre de l'image d'en-tête, de sorte qu'il soit équilibré et poli..
Minimiser le Entête groupe en cliquant sur la petite flèche à côté du titre du groupe et en ouvrant le groupe Contenu afin que toutes les couches soient organisées et faciles à parcourir.
Commençons à créer notre article de blog. Choisissez le Outil de type horizontal (T) et, en utilisant une couleur foncée et une police assez grande, écrivez le titre de votre message. Essayez d'éviter d'utiliser le noir absolu et choisissez une couleur plus subtile, telle que le gris foncé, afin qu'elle n'ait pas l'air trop dure. Pour ce tutoriel, j'utilise du gris foncé # 444444 42px Taille Bentham police en majuscule. Placez votre titre au centre du document et laissez un espace suffisant en haut pour attirer l’attention des lecteurs sur le titre..
Réduire la taille de la police à environ 14px et entrez la date de publication du blog, l'auteur, la catégorie, les balises, l'emplacement ou ce que vous souhaitez, afin que vos lecteurs aient un aperçu de la publication. Dans mon cas, j'ai mis la date et le lieu de l'entrée en majuscule pour rester fidèle au titre..
Un blog sans contenu réel ne vaut rien, peu importe la qualité de son design. En utilisant le Outil de type horizontal (T) maintenez le bouton de la souris enfoncé et créez un conteneur entre la deuxième et la dernière lignes directrices. La largeur du conteneur entre ces directives doit être 640px et la hauteur dépendra de la longueur de votre post.
Réglez la couleur de fond sur quelque chose de plus léger et agréable à l’œil. Dans mon cas, j'utilise un gris plus clair # 6f6f6f 18px PT Serif avec une hauteur de ligne définie sur 34px. La hauteur de la ligne doit souvent être autour 1,5 - 1,9 en fonction du style de la police. Vous pouvez facilement calculer la hauteur de ligne en multipliant par 1,9 la taille de la police que vous utilisez. Par exemple, dans mon cas, j'utilise 18px taille de la police, donc: 18 * 1,8 = 34,2.
En tant que concepteur, vous devez toujours penser à concevoir un environnement dynamique. Vous devez donc inclure des styles pour les hyperliens ou les états de survol pour les boutons. Croyez-moi, les développeurs vous en remercieront. Choisissez une couleur subtile qui se démarquera dans votre copie principale, mettez en surbrillance l'une des phrases qui créeront un lien vers un autre endroit et changez sa couleur. Dans mon cas, j'utilise du rouge pâle # e3514e.
Nous en avons terminé avec la copie principale de l'article de blog et nous allons maintenant créer des boutons de partage afin que les lecteurs puissent partager du contenu avec le réseau de leur choix.
Minimiser le Contenu groupe et ouvrir Partage groupe où nous placerons nos boutons. Choisissez un Outil Rectangle (U) et tracez un rectangle se trouvant entre les deuxième et dernière lignes directrices comme copie principale. Dans mon cas c'est 640x54px. Puis faites un clic droit, sélectionnez Options de fusion… et appliquer les options suivantes.
couleur utilisée # 838383Enfin, réduire le calque Remplir option de 0% et vous aurez un conteneur de contour pour vos réseaux de médias sociaux.
Choisissez le Outil Ligne (U) et définissez la largeur sur 1px, après cela, tracez trois lignes verticales qui diviseront notre conteneur en quatre parties égales. Les lignes directrices aideront à les positionner. Assurez-vous que les lignes sont de la même couleur que le contour du conteneur..
Pointe: tenir Décalage clé pour assurer que les lignes fonctionnent parfaitement droite.
Pointe: Cliquez sur CMD +; masquer / afficher les directives.
Enfin, choisissez le Outil de type horizontal (T) et écrivez une copie en faisant savoir aux gens que c'est pour le partage. Dans mon cas j'utilise simple PARTAGER:, après quoi j'ai écrit les noms des réseaux sociaux disponibles pour le partage.
Placez les noms à l'intérieur du conteneur et centrez-les au milieu des blocs séparés.
Génial! Le partage social est terminé, il suffit de créer un état survolé par la souris pour le bouton. Il suffit de choisir le Outil Rectangle (U) et, en utilisant la même couleur que celle utilisée pour le lien, tracez un rectangle sous l'un des noms de réseaux sociaux couvrant l'espace divisé..
Il est enfin temps d'envelopper le design de notre blog en mettant un simple pied de page avec une information de copyright.
Minimiser le Partage groupe et ouvrir le Bas de page groupe. Après cela, tracez un simple rectangle en bas qui traverse horizontalement le document et laissez suffisamment d’espace en haut. J'ai utilisé du gris # 555555 et autour 110px espace blanc au-dessus de la forme.
Enfin, choisissez le Outil de type horizontal (T) et notez une copie de copyright simple. Dans mon cas j'ai utilisé PT Serif 14px blanc #FFFFFF. Placez votre copie au milieu du rectangle et alignez-la verticalement.
Et nous en avons fini avec la mise en page. Toutes nos félicitations!Dans ce tutoriel, nous avons exploré le processus de création d’une mise en page de blog très simple et élégante. Il possède un en-tête d'image fort au-dessus du pli et utilise une approche d'abord typographique du contenu du blog..
Découvrez la création et le thème d'un blog propulsé par Evernote avec Postach.io, où nous verrons comment construire cette présentation de blog pour le navigateur, en l'intégrant à une plate-forme de blogging pour vous donner une idée!
Si vous avez des questions ou des idées, veuillez nous le faire savoir dans la zone des commentaires.!
Accentsconagua