Share
Ce que vous allez créerDans ce didacticiel, nous expliquerons pas à pas le processus de création d’un thème simple de journal de photos Tumblr dans Photoshop. Je commencerai totalement à partir de zéro et vous guiderai tout au long du processus de configuration du document, en utilisant quelques outils de base et en terminant la conception en un rien de temps. Le but de ce tutoriel est de montrer comment certaines des décisions de conception sont prises et comment la conception finale prend vie..
Afin de suivre, vous aurez besoin de certains actifs (disponibles gratuitement):
Commencez par créer un nouveau document Photoshop (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..
Dé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 prédéfinie, mais l'établissement de certaines consignes garantira 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 tutoriel: vertical à 100px, 600px, 720px et 1100px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
L'en-tête ou la zone «au-dessus du pli» (où que ce soit ces jours-ci) joue un rôle très important pour interagir avec les utilisateurs et garantir que les visiteurs restent sur le site Web. Pour le journal de ce voyageur, je vais utiliser une belle photo de paysage de plage pour définir l'ambiance aventureuse et envoyer inconsciemment un message aux visiteurs pour leur dire qu'il s'agit d'un site Web sur les voyages..
Créons d’abord un groupe appelé "En-tête" pour en-tête en cliquant sur Couche> Nouveau> Groupe… ou en appuyant sur la petite icône au bas du panneau des calques.
Pour commencer, plaçons la navigation en haut de notre journal afin que les gens puissent s'y retrouver facilement. Sélectionnez le Outil de type horizontal (T), choisir PT Sans Police de caractère 13px taille, couleur gris foncé # 323232 et entrez le nom de votre journal photo. C’est un endroit approprié pour notre logo, alors jetez-en un si vous en avez un. J'utilise un nom fictif pour ce journal photo «Boarding Gate». Pour le rendre plus attrayant, élargissez le suivi (l’espacement entre les lettres) à 200.
Assurez-vous de laisser de la place pour le titre ci-dessus, je l'ai déplacé par 25px.
Accentsconagua
# 666666. Placez-le dans le coin en haut à droite juste avant la dernière ligne directrice verticale.
À l’intérieur du groupe «En-tête», tracez un rectangle (utilisez une autre couleur que le blanc pour le rendre visible) à l’aide des touches Outil Rectangle (U). Dans mon cas, j'ai dessiné un rectangle de taille 1200x640px et l'ai placé en haut du document en laissant un espace de 25px au-dessous de la barre de navigation supérieure..
Téléchargez maintenant cette photo de plage (ou toute autre photo de votre choix), faites-la glisser vers le document Photoshop et placez-la au-dessus du calque rectangle. Renommez le calque d'image en quelque chose que vous reconnaîtrez 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. Enfin réduire la couche IMG Opacité à 75% pour rendre le texte que nous allons mettre en haut sera plus lisible.
Maintenant frappé CMD + T et redimensionner la photo pour répondre à vos besoins.
Pointe: tenir Décalage clé pour transformer proportionnellement.
Faisons un message d'introduction pour expliquer aux utilisateurs ce dont il s'agit. Veillez à utiliser un texte de grande taille pour attirer l’attention des visiteurs. Dans mon cas c'est pareil PT Sans Police de caractère, 52px Taille. Pour un message secondaire, utilisez une police plus petite, j'ai utilisé PT Serif 28px Taille. Remarquez l'espace entre les lignes, laissez toujours suffisamment d'espace pour que la copie soit lisible.
Enfin, nous avons besoin d’un bouton d’appel à l’action pour dire aux gens quoi faire. Choisissez le Outil Rectangle (U) et dessine un blanc #FFFFFF forme de rectangle. Après cela, placez un texte à l'intérieur du rectangle blanc disant quelque chose comme «Parcourir les photos». Assurez-vous de laisser un peu d’espace au-dessus du bouton pour lui donner un aspect solide et indépendant.
Comme vous le savez peut-être déjà, Tumblr propose de nombreux types de publications. Ci-dessous, une capture d'écran de l'interface du tableau de bord Tumblr montrant les types de publication possibles que vous pouvez créer..
Au cours des prochaines étapes, je vous guiderai dans le processus de création de différents types de publication, à savoir:
Je vous laisse compléter le reste en tant que mission.
Commençons par la saisie de texte en premier. Nous allons créer une unité puis la reproduire pour les autres types de publication. Toutes les publications seront basées sur la même structure et partageront des caractéristiques similaires (date de publication, balises, options de partage).
Créez un nouveau groupe appelé «Unité de texte». Après cela, changez la couleur de fond en brun clair # f8f7f6, choisir le Outil Rectangle (U) et tracez un rectangle entre le premier et le dernier repère vertical. Dans mon exemple, le rectangle est 1000x284px.
Prenez le Outil de type horizontal (T) et en utilisant PT Sans (gras) 32px entrez un titre. Assurez-vous de donner à votre titre un espace pour le rendre propre et équilibré. Dans mon cas, je l'ai poussé 50px du haut et à gauche.
Utiliser le même outil PT Serif police, réduisez la taille de la police à 15px et changez la couleur en gris clair # 444444. Après cela, entrez le contenu de votre message. Assurez-vous d’augmenter la hauteur de la ligne pour la rendre plus lisible et plus attrayante. Dans ce cas, j'ai réglé la hauteur de ligne à 26px.
Enfin, nous devons afficher la date de publication à côté, avec des balises et des options de partage. En utilisant le même outil de type, entrez des balises, chacune précédée d’un hashtag #, et placez-le en dessous du contenu. Après cela change la couleur en gris clair # 666666 donc, il est visuellement plus léger et donne l’impression d’être moins important, ce qui permet d’accorder plus d’attention au contenu principal.
Maintenant, rendez-vous sur Iconfinder et téléchargez les icônes de partage, de retweet et de cœur.
Enfin, créez un nouveau groupe appelé «Icônes» et placez les icônes à l’intérieur du groupe. Appliquez de l’espace sur les côtés et réduisez le nombre de Opacité à 30% de sorte que les icônes correspondent à la date et à la couleur des balises.
Ceci fait, dupliquez le groupe «Unité de texte» et renommez-le en «Unité photo». Déplacez-le 60px au-dessous du premier bloc, supprimez le calque de contenu et déplacez le titre de l'article vers le bas pour l'aligner sur la date et les balises de l'article. Changer le titre de l'article, la date et les balises. Sélectionnez le calque d'arrière-plan de l'unité, puis appuyez sur CMD + T et redimensionner pour avoir 50px d'espace au-dessus et en dessous.
Dupliquez le calque d'arrière-plan de l'unité et redimensionnez-le à l'aide de CMD + T. Dans mon cas, j'ai redimensionné à 1000x510px.
Déplacez-le au-dessus du titre et dirigez-vous sur Skitterphoto pour choisir une photo que vous souhaitez utiliser pour le post de photo, en la plaçant au-dessus du rectangle. Maintenez Alt et placez la souris sur la vignette du calque jusqu'à ce qu'une petite flèche pointant vers le bas apparaisse. Relâchez ensuite la souris pour créer un Masque d'écrêtage.
Celui-ci est facile. Dupliquer CMD + J le groupe «Unité photo» et renommez-le en «Unité vidéo». Déplacez-le 60px en dessous de la photo et changez l'image, le titre, la date et les tags. Après cela, nous devons indiquer qu'il s'agit d'une publication vidéo en plaçant une icône YouTube dessus..
Téléchargez l'icône YouTube depuis Iconfinder et placez-la au centre de l'image vidéo de publication..
Encore une fois dupliquer (CMD + J) le groupe «Unité de texte» et déplacez-le en dessous de la vidéo. Supprimez les couches de titre et de contenu en laissant la date, les balises et les icônes de partage.
Après cela, prenez la Outil de type horizontal (T), choisir PT Serif (italique) Police de caractère, définir la taille à 35px et assurez-vous que la couleur est gris foncé # 323232.
Enfin, collez votre citation préférée et ajustez l’arrière-plan tout en vous rappelant de laisser des espaces uniformes de 50 pixels sur les côtés..
À présent, dupliquez le groupe "Unité photo" et placez-le sous le message de citation afin que notre maquette ressemble davantage à un véritable blog Tumblr..
Te voilà. Je vous ai montré comment créer des types de publication de texte, de photo, de vidéo et de citation et il est maintenant temps de créer le reste des types de publication pour le lien, le chat et l'audio. La cohérence est essentielle. Essayez de réutiliser les éléments déjà créés et utilisez les mêmes polices, couleurs et espacements pour que votre conception soit équilibrée et perçue comme un tout..
Nous sommes sur le point de terminer ce thème Tumblr simple. Ajoutons maintenant un bouton "charger plus" (quelque chose de commun aux thèmes Tumblr) et une déclaration de copyright..
Réduisez tous les groupes et créez-en un nouveau appelé «Pied de page». Après cela, ouvrez le groupe "En-tête" et recherchez les calques de bouton "Parcourir les photos", la forme de rectangle et le calque de texte. Maintenez la CMD touche et sélectionnez ces deux couches, puis appuyez sur CMD + J pour les dupliquer et les faire glisser vers votre groupe "Pied de page".
Une fois cela fait, double-cliquez sur le calque de forme rectangle et changez sa couleur pour celle utilisée pour le fond “Photo” afin de conserver la cohérence..
Enfin, entrez les informations de copyright. Par souci de cohérence, utilisez la même police que celle utilisée pour la copie de photo. Dans ce cas c'est PT Serif 15px couleur gris # 444444. Remarquez l’espacement, dans l’ensemble de la disposition, nous avons beaucoup d’espace blanc qui donne ce sentiment de propreté et d’organisation. J'ai utilisé 60px pour les espaces entre les entrées de photo, le bouton "Charger plus" et la ligne de copyright.
L’alignement est centré pour que les éléments soient cohérents avec les boutons de messagerie et d’appel à l’action (CTA).
C'est tout! Nous en avons terminé avec la conception du thème. Passez en revue vos couches de document, supprimez celles qui ne sont pas nécessaires et remettez-les à votre développeur, ou mieux, codez-les vous-même. Dans un prochain tutoriel, nous allons coder cette conception dans un thème Tumblr entièrement fonctionnel, alors restez à l'écoute.!
