Concevoir un thème Tumblr inspiré de la forêt dans Photoshop
Tumblr est une plate-forme de micro-blogging qui permet aux utilisateurs de publier facilement des extraits d’informations sur le Web, tels qu’un ensemble de photos ou de photos, une vidéo, une citation ou un paragraphe.
Il est souvent utilisé comme journal en ligne en raison de sa facilité d'utilisation par rapport à d'autres plates-formes de blogs telles que WordPress.
Beaucoup de thèmes Tumblr sont disponibles, gratuits et premium, mais vous êtes-vous déjà demandé comment vous alliez concevoir votre propre?
Dans ce didacticiel, vous apprendrez à créer un thème Tumblr inspiré de la forêt, en utilisant des textures de bois, des motifs subtils et des techniques modernes, un joli mélange d'éléments naturels et modernes.
Ce que nous allons concevoir
Le thème que nous concevons dans Photoshop comprend quatre zones: la barre latérale en bois, la zone de contenu principale, la barre latérale droite et l’en-tête.
Étape 1
La première étape, comme vous devriez le faire avec toutes les choses que vous concevez, est la phase de dessin. En utilisant ma tablette graphique Wacom Bamboo et une toile vierge dans Photoshop, j'ai dessiné la conception suivante, avec des éléments plus larges, juste pour que mes idées soient sur du papier (numérique).
Étape 2
Avec l'idée brute, créez un nouveau document dans Photoshop. (Gardez à l'esprit que ce n'est pas figé. C'est juste quelque chose auquel vous pouvez vous référer si vous êtes bloqué dans le design. Personnellement, j'ai tendance à expérimenter et à changer beaucoup de ce que j'avais initialement prévu.) paramètres dans Photoshop:
Étape 3
L'étape suivante consiste à placer des guides sur la toile. Cela vous aidera à garder la structure du thème soignée pendant que vous la concevez. Je souhaite que la barre latérale gauche soit de 200 pixels, la zone de contenu principale de 600 pixels et la barre latérale droite de 160 pixels, ce qui nous donne une largeur de 960 pixels.
Si vous avez utilisé les mêmes paramètres, vous pouvez placer vos guides à 200, 800 et 960 pixels horizontalement. Ce motif sera aligné à gauche, de sorte que la barre latérale en bois se trouve toujours contre le côté gauche de la fenêtre de l'utilisateur.
J'ai également placé des guides à 200 pixels sous le haut de la toile et à 200 pixels au-dessus du bas de la toile. Voici à quoi ressemble mon document:
Étape 4
Ajoutons maintenant un motif à notre arrière-plan. Allez dans Fichier → Nouveau et créez un nouveau document de 8 × 8 pixels. Tracez des lignes verticales d'une largeur de 2 pixels. Votre canevas doit maintenant être noir de 2 pixels, blanc de 2 pixels, noir de 2 pixels, blanc de 2 pixels. Allez dans Modifier → Définir le modèle. Enregistrez votre motif en tant que "Lignes verticales 2px".
Dans votre document original, accédez au calque → Nouveau calque de remplissage → Motif. Sélectionnez le motif que vous venez de créer et cliquez sur OK. Déposez l'opacité du calque jusqu'à ce qu'il ressemble à ceci:
Fusionnez le motif avec votre calque d'arrière-plan, en le pixellisant automatiquement dans le processus. Allez dans Filtre → Bruit → Ajouter du bruit. Modifiez la valeur à 5% et cliquez sur OK. Cela ajoutera une texture subtile à l'arrière-plan:
Créez un nouveau calque et remplissez-le de blanc. Placez-le sous le calque d'arrière-plan d'origine. Réduisez l'opacité de votre motif de calque texturé à environ 40%, puis fusionnez-le avec le calque d'arrière-plan en accédant au calque → Fusionner les calques.
Étape 5
Sélectionnez l'outil Rectangle et dessinez une forme de 200 pixels de large.
Nous allons trancher le bas de notre forme à l'aide de l'outil Lasso polygonal, en le faisant ressembler à un ruban. Créez une sélection sur votre forme, pixellisez le calque de forme, puis appuyez sur la touche Supprimer pour supprimer la zone sélectionnée.
Placez la forme dans la zone latérale gauche que nous avons marquée en utilisant nos guides.
Créez une sélection de la partie supérieure de la forme et sélectionnez Édition → Transformation libre. Étirez la forme de sorte qu'elle chevauche la ligne supérieure du canevas.
Étape 6
Sélectionnez l'outil Forme d'ellipse et, tout en maintenant la touche Maj enfoncée pour la maintenir ronde, tracez un cercle rempli de blanc. Placez-le en haut de la barre latérale et renommez le calque en "Portrait".
Cliquez avec le bouton droit de la souris sur le nouveau calque de forme et sélectionnez l'option "Calque rasterisé" pour la transformer d'un objet intelligent en pixels. Maintenez la touche Commande enfoncée et cliquez sur l'image d'aperçu du calque dans le panneau Calques. Cela fera une sélection de votre cercle.
Localisez une photo de vous-même (ou de votre site Web) et copiez-la. Retournez dans Photoshop et, avec la sélection du cercle toujours active, allez dans Edition → Coller dans. Cela va coller l'objet dans votre sélection de cercle.
Cela fait, vous avez automatiquement créé un masque de calque sur l'image (c.-à-d. Sur un nouveau calque, pas sur le calque existant). Allez dans Modifier → Transformation libre pour redimensionner et / ou faire pivoter l'image. Il restera un cercle; Veillez simplement à ne pas le rendre trop petit. Une fois cela fait, supprimez le calque nommé "Portrait" et renommez votre nouveau calque.
Étape 7
Sélectionnez l'outil Type et créez une zone de texte dans la zone d'en-tête. J'ai donné à mon thème un nom complètement aléatoire: "Kabooom". J'ai utilisé une police appelée Reklame Script. Vous pouvez télécharger une démo de la police ou l’acheter pour 30 $ auprès de MyFonts .
Cliquez avec le bouton droit sur votre calque de type et sélectionnez "Options de fusion". Appliquez une superposition de couleur au texte. J'ai utilisé un gris clair un peu plus sombre que le fond, avec le code hexadécimal # D6D6D6.
Appliquez une ombre interne au type, en utilisant une opacité de 10%, une distance de 2 pixels et une taille de 1 pixel. Laissez tout le reste à 0. Cela donnera l'impression que le type a été gravé en arrière-plan.
Pour compléter l'effet gravé, nous ajouterons une ombre portée au type, en utilisant la couleur blanche avec un mode de fusion normal. Donnez à l'ombre une distance de 2 pixels et une taille de 1 pixel. Ces paramètres feront apparaître l'ombre comme un surlignage au bas du type, ajoutant plus de profondeur au type et renforçant l'ombre interne.
Étape 8
Sélectionnez l’outil Type et créez une zone de texte qui remplit la largeur de la barre latérale droite, que nous avons marquée avec des repères. Mettez une variété de catégories dans la catégorie, comme ci-dessous:
Sélectionnez l’en-tête de la catégorie et changez la police en une de votre choix. J'ai utilisé Minion Pro. Expérimentez avec des sous-polices (gras, italique, etc.) et des tailles de points.
Changez la police pour les catégories ("News", "Days out", "Photography", etc.) J'ai utilisé Myriad Pro. Réduisez la taille du point du type et ajustez le début (c.-à-d. L'espace entre les lignes de texte), de sorte que la ligne supérieure soit plus basse que par défaut.
Copiez le premier titre et les liens et collez-les ci-dessous dans la même zone de texte. Changer le titre et les catégories. J'ai utilisé les rubriques "Mes projets" et "Mes amis". Bien sûr, utilisez tout ce qui concerne votre site Web.
Étape 9
Nous allons maintenant rendre le texte dans la barre latérale droite un peu plus attrayant. Sélectionnez le texte pour les sous-catégories (c.-à-d. Pas les en-têtes) et changez la couleur du noir en gris foncé. J'ai utilisé # 333333. Cliquez sur OK.
Cliquez avec le bouton droit sur le calque de type et sélectionnez "Options de fusion". Appliquez une ombre portée blanche avec un mode de fusion normal. Changez l'angle à 120 ° et la distance et la taille à 1 pixel. Laissez tout le reste réglé sur 0 pixel. Cela ajoutera un surlignage au bas du texte, comme nous l'avons fait avec l'en-tête.
Étape 10
Sélectionnez l'outil Ligne et, tout en maintenant la touche Majuscule enfoncée, tracez une ligne sous l'en-tête "Catégories".
Cliquez avec le bouton droit sur le calque de ligne et sélectionnez "Options de fusion". Appliquez une ombre portée blanche avec un mode de fusion normal. Définissez l'angle à 90 ° et la distance à 1 pixel. Définissez tout le reste sur 0 pixel.
Dupliquez le calque de ligne et placez-le sous chacun des en-têtes.
Étape 11
Si vous avez le même nombre de titres que moi, vous devriez avoir trois couches de ligne. Sélectionnez-les tous et dupliquez-les. Les trois couches de lignes étant toujours sélectionnées, déplacez-les de 10 pixels en maintenant la touche Maj enfoncée et en appuyant une fois sur la touche Bas. Réduisez l'opacité de vos nouvelles couches de lignes à 25% pour vous retrouver avec quelque chose comme ceci:
Étape 12
Prenez l'outil Forme rectangulaire et dessinez un rectangle similaire à celui ci-dessous. Faites le rectangle exactement 570 pixels de large. Cela permettra un espace de 10 pixels entre la barre latérale gauche et le bord du nouveau rectangle et un espace de 20 pixels entre la barre latérale droite et le bord du nouveau rectangle, comme illustré dans la capture d'écran annotée ci-dessous:
Étape 13
Sélectionnez l’outil Rectangle Shape et créez un rectangle gris beaucoup plus petit, comme celui ci-dessous. Placez-le en haut à droite du grand rectangle, décalé du grand rectangle de 10 pixels. Placez la forme à 30 pixels du haut du rectangle.
Étape 14
Dupliquez le calque de type dans la barre latérale droite et, à l'aide de la combinaison de touches Maj et Curseur, déplacez le calque de type dupliqué sur la zone de contenu principale. Faites de même avec les deux calques de lignes pour votre rubrique "Catégories".
Sélectionnez l'outil Type et cliquez sur votre calque de type dupliqué. Supprimez tout le texte dans la zone et changez le titre pour quelque chose de plus approprié. Je viens d'utiliser un texte factice ici: "Ici, on appelle un titre."
Étape 15
Allez dans Fichier → Placer et localisez une photo à placer dans le document en tant qu'espace réservé. Utiliser de vraies images ici est toujours préférable car elles rendent la maquette plus réelle et attrayante. J'ai utilisé un photo de ma soeur .
Allez dans Modifier → Transformation libre pour réduire la taille de la photo et la positionner au bon endroit. Faites-en un total de 20 pixels plus court à la fois en largeur et en hauteur, de manière à ce qu’il s’ajuste bien dans le rectangle noir, comme ceci:
Étape 16
Ouvrez les options de fusion pour le grand rectangle noir. Appliquez une superposition de couleur blanche et une ombre portée avec une opacité de 10% et une taille de 3 pixels.
Étape 17
Sélectionnez à nouveau l'outil Rectangle Shape et dessinez une forme longue sous la forme d'arrière-plan de la photo blanche. Assurez-vous que la largeur est la même. Remplissez-le d'un gris clair.
Ouvrez les options de fusion du nouveau rectangle gris et appliquez une ombre portée. Définissez la couleur sur blanc, avec un mode de fusion normal, l'opacité à 100% et la distance à 1 pixel. Laissez tout le reste réglé sur 0 pixel.
Appliquez également une ombre interne en utilisant la couleur noire avec une opacité de 10%. Modifiez la taille à 13 pixels et laissez tout le reste défini à 0 pixel. Ces deux styles de calques donneront l'impression que la nouvelle forme a été gravée en arrière-plan, comme notre typographie de titre:
Étape 18
En allant sur la barre latérale, téléchargez des textures de bois répétitives. J'utilise un définir à partir de GraphicRiver qui comprend trois textures de bois différentes: léger, moyen et foncé.
Une fois que vous avez installé les modèles dans Photoshop (en ouvrant chaque image et en la définissant comme un motif), sélectionnez la barre latérale dans votre document Photoshop. Aller au calque → Nouveau calque de remplissage → Motif. Sélectionnez l'une de vos textures de bois (j'ai sélectionné la version moyenne), puis cliquez sur OK. En sélectionnant d'abord la barre latérale, le modèle ne doit remplir que cette zone.
Cliquez avec le bouton droit sur le calque de motif et sélectionnez "Options de fusion". Appliquez une incrustation en dégradé, allant du noir au transparent en noir:
Changez l'opacité du dégradé en incrustation à 10% et donnez-lui un angle de 0 °. Cela ajoutera une ombre subtile à la barre latérale, la faisant paraître un peu plus réaliste et moins plate.
Appliquez également une ombre portée à la barre latérale. Réduisez l'opacité à 30% et changez l'angle à 180 °. Modifiez la distance à 1 pixel et la taille à 5 pixels, en laissant tout le reste défini à 0 pixel. Cela ajoutera une petite ombre subtile à la barre latérale.
Étape 19
Ouvrez les "Options de fusion" pour le portrait en cercle que nous avons créé vers le début de ce tutoriel. Appliquez une ombre portée blanche en utilisant les paramètres ci-dessous:
Appliquez également une ombre interne en utilisant les paramètres ci-dessous. Cela fera que le portrait du cercle aura l'air d'avoir été placé dans l'arbre plutôt que d'y être simplement assis.
Étape 20
Dupliquez le calque de titre dans le contenu principal. Repositionnez-le dans la barre latérale et remplacez le texte par «À propos de moi». De plus, repositionnez et redimensionnez les deux lignes sous le titre.
Ouvrez les "Options de fusion" pour votre nouveau calque de type et modifiez les paramètres d'ombre portée comme suit:
Ajoutez du texte à la section "À propos de moi", en utilisant la même police et la même taille que celles utilisées dans le texte de la barre latérale droite. Ouvrez les options de fusion de ce nouveau texte et cliquez sur l'onglet "Lueur externe" pour appliquer une lueur extérieure. changer l'opacité à 30%, la couleur au blanc et la taille à 18 pixels.
Ceci rendra notre texte plus lisible sur le fond en bois.
Jouez avec la taille de la police pour faciliter la numérisation du texte.
Étape 21
Après quelques essais, j'ai décidé que toute la barre latérale était bien meilleure dans les trois textures mentionnées ci-dessus. J'ai changé le motif de la barre latérale et les couleurs du texte. Utilisez les techniques que vous avez déjà apprises pour le faire.
Voici à quoi ressemble mon design jusqu'à présent:
Étape 22
Même si vous avez prévu beaucoup de choses, vous devez apporter des modifications au cours du processus de conception. En examinant la conception dans son ensemble (plutôt que de manière parcellaire), j'ai conclu que 10 pixels entre les barres latérales et la zone de contenu principale étaient loin d'être suffisants.
En utilisant la combinaison de touches Maj et Cursor, déplacez votre contenu, ce qui rend les deux intervalles de 40 pixels au lieu de 10. Cela rendra le design plus utilisable et attrayant.
Étape 23
J'ai également décidé de changer le style de l'en-tête du thème.
Modifiez la couleur (en utilisant une superposition de couleur dans la fenêtre "Options de fusion") pour sélectionner une couleur sélectionnée dans le cercle. J'ai choisi un bleu vert foncé.
J'ai également supprimé l'ombre interne et modifié les paramètres d'ombre portée, donnant l'impression que l'en-tête est placé au-dessus de l'arrière-plan plutôt que de s'y insérer.
Étape 24
En passant à la bannière de contenu principale (c.-à-d. Le rectangle que nous avons créé plus tôt dans le coin supérieur droit de la zone d'image de notre contenu principal), sélectionnez le rectangle en cliquant sur la vignette du calque tout en maintenant la touche Commande enfoncée.
Accédez au calque → Nouveau calque de remplissage → Motif et sélectionnez la même texture que celle utilisée pour la barre latérale.
Cliquez avec le bouton droit de la souris sur le calque de remplissage du motif, puis sélectionnez l'option "Rasterize layer". À l’aide des outils Dodge et Burn, ajoutez des points saillants à gauche et en haut de la forme et des ombres à droite et en bas de la forme.
Cela va ajouter de la profondeur et donner une légère sensation en trois dimensions à la forme. L'outil Graver assombrit l'image, tandis que l'outil Dodge l'éclaircit.
Sélectionnez l'outil Lasso polygonal. Sélectionnez une forme similaire à celle ci-dessous et remplissez-la d'un brun foncé, sélectionné dans votre texture.
À l'aide de l'outil Rectangle de sélection, sélectionnez les zones dont vous n'avez pas besoin dans la nouvelle forme et appuyez sur la touche Supprimer pour les supprimer. Vous devriez vous retrouver avec quelque chose de similaire à ceci:
Étape 25
Prenez notre propre jeu d'icônes exclusif appelé "réflexion". Nous utiliserons plusieurs de ces icônes dans notre conception.
Insérez les icônes dont vous avez besoin dans le document en allant dans Fichier → Place. J'ai choisi les icônes caméra, cœur, rechargement, édition et horloge, qui serviront d'icônes de photo, de style, de pointage, de notes et de temps dans le thème.
Étape 26
Sélectionnez l'icône de la caméra et redimensionnez-la. Placez-le sur la barre de type de poste que nous venons de créer. Appliquez-y une ombre interne et une ombre portée, en utilisant des paramètres similaires à ceux que nous avons utilisés tout au long de ce didacticiel.
Ajoutez une typographie à la barre de type de poste. J'ai utilisé le même script Reklame que celui utilisé dans l'en-tête et les mêmes options de fusion que nous avons utilisées pour les en-têtes de la barre latérale gauche.
Étape 27
Sélectionnez les quatre autres couches d'icônes. Cliquez avec le bouton droit de la souris et sélectionnez "Rasterize layers" pour les transformer en objets pixel en objets intelligents.
Utilisez l’outil Rectangle de sélection pour sélectionner toutes les réflexions de l’icône.
Appuyez sur la touche Supprimer de chaque icône pour supprimer sa réflexion.
Étape 28
Resélectionnez les quatre couches d'icônes. Allez dans Modifier → Transformation libre et, tout en maintenant la touche Maj enfoncée pour maintenir les icônes en proportion, réduisez leur taille et positionnez-les sur la barre située sous la zone de contenu principale créée précédemment.
Espacez les icônes uniformément en utilisant les touches du curseur.
Étape 29
Cliquez avec le bouton droit sur la couche d'icône du cœur et sélectionnez "Options de fusion" dans le menu. Modifiez la couleur en gris clair à l'aide d'une superposition de couleurs et appliquez une ombre interne à l'aide des paramètres suivants:
Maintenant, appliquez une ombre portée en utilisant ces paramètres:
Une fois les paramètres appliqués à la couche d’icône centrale, cliquez avec le bouton droit de la souris et sélectionnez «Copier les styles de calque». Sélectionnez à nouveau les quatre icônes, cliquez avec le bouton droit et sélectionnez «Coller les styles de calque». Même effet.
Étape 30
Sélectionnez l'outil Type et créez une petite zone de texte à côté de l'icône du cœur. Tapez "Like this post." Appliquez une ombre interne et une ombre portée en utilisant des paramètres similaires à ceux que nous avons utilisés tout au long de ce didacticiel.
Répétez l'étape précédente pour les icônes restantes, en utilisant les phrases suivantes: «Rebloguer ce post», «1052 notes» et «Publié le 19/03/2011». Assurez-vous de copier et coller le même style de calque sur chaque calque de type.
Vous pouvez également vouloir repositionner certaines des icônes avec le nouveau texte, en vous assurant que l’écart entre le texte et les icônes est cohérent; En raison des différentes longueurs de texte, cela peut avoir changé.
Étape 31
Dupliquez toutes les couches dans la zone de contenu principale et placez-les sous l'original. Modifiez le rectangle du type de titre, d'image et de poste. Comme mentionné, plus la maquette est réaliste, mieux c'est.
Étape 32
Dupliquez le titre et le texte dans la barre latérale et insérez des icônes. J'ai utilisé les excellentes icônes de médias sociaux connues sous le nom de Buddycons , un autre ensemble exclusif à Webdesigner Depot.
Le produit final
Après quelques retouches (j'ai enlevé la coupe déchiquetée en forme de ruban au bas de la barre latérale), je suis fini! Voici notre conception finale, prête à être codée ou envoyée à un développeur pour le faire.
Ce tutoriel a été créé exclusivement pour Webdesigner Depot par Callum Chapman , un concepteur d'interface utilisateur freelance sous le nom Circlebox Creative . Callum travaille également sur un galerie d'inspiration projet appelé Vinspires.
Voulez-vous voir un autre tutoriel sur la façon de découper et de coder cette conception dans un thème Tumblr entièrement fonctionnel?