Share
Êtes-vous d'humeur à quelque chose de différent? Je vous guiderai dans le processus de création du design de Stuff - blog et portfolio orientés horizontalement. Assurez-vous de visiter la version en ligne de Stuff pour voir le résultat final!
Faites-le 1300 x 800 px. Tout cet espace n'est pas vraiment nécessaire, mais il est bon de sentir le caractère panoramique du design pendant que nous travaillons..
Créez un nouveau calque de remplissage en utilisant la couleur unie # bfc6cd
Convertissez un nouveau calque en "objet intelligent" (clic droit> Convertir en filtre intelligent) et appliquez le filtre> Ajouter du bruit (vous pouvez l’ajuster ultérieurement si nécessaire, grâce à la fonction de filtres intelligents). Verrouille le calque. Pour que le projet reste propre et organisé, vous pouvez supprimer le masque du calque et en faire le calque d'arrière-plan par défaut (facultatif)..
Créez une nouvelle forme de flèche en utilisant le préréglage "outil de forme". Utilisez ensuite l'outil de sélection directe pour ajuster la forme afin de lui donner une belle apparence (déplacez les points comme bon vous semble).
Sélectionnez l’outil de transformation libre, déplacez la flèche de 310 pixels vers le haut, puis saisissez et déplacez la règle horizontale pour créer un nouveau repère. Fixez-le au milieu de la flèche. A partir de maintenant, il représentera le principal axe horizontal du site..
Ajoutez 4 styles à la flèche (en double-cliquant sur le calque): ombre portée, ombre intérieure, lueur extérieure et superposition de dégradé (de #cbcbcb à #ffffff).
Ajouter un nouveau calque de texte au-dessus du calque de flèche.
Ajoutez des styles au texte: ombre interne, superposition de dégradé et contour. Pour un meilleur effet de profondeur, rendez le trait visible uniquement sur la moitié inférieure du texte en utilisant un trait "dégradé" avec les paramètres alpha de la moitié supérieure définis sur une opacité "0"..
Les ombres extérieures et intérieures donnent à la flèche un aspect plus 3D, mais pour l’améliorer encore, créons un simple effet de lumière brillante. Créez un nouveau rectangle et utilisez l'outil Convertir le point pour modifier sa forme afin de créer une légère courbure. Nous allons masquer ceci sur le calque Arrow pour créer un effet brillant.
Définissez ce calque sur 0% et ajoutez un style de superposition de dégradé avec un blanc subtil disparaissant.
Pour éviter que le calque clair aille au-delà de la flèche: ctrl + clic sur le calque flèche pour faire une sélection ajouter un masque de calque au calque clair
Pour attirer l'attention des téléspectateurs sur le logo, placez une lumière pour que la flèche sorte de l'arrière-plan. Vous pouvez utiliser une méthode primitive qui est:
Créez un rectangle blanc d'une largeur de 240 pixels (la hauteur devrait être un peu plus grande que le document).
Au-dessus de la photo, créez une nouvelle zone de texte et remplissez-la avec le titre du blog. Utilisez une police condensée telle que League Gothic (gratuite dans la League of Moveable Type). Sous la photo, créez une autre nouvelle zone de texte pour le contenu général..
Faites une sélection pour le contenu et créez un nouveau calque de masque pour le grand rectangle. Changer la densité du masque à 80%
Ajoutez des styles de lueur externe (noire) et interne (blanche) à la couche de bande pour un look plus 3D.
Ajoutez le texte méta-info au-dessus du post. J'ai utilisé 12px Georgia italic, hauteur de ligne 17px. N'oubliez pas d'utiliser des guides pour conserver les textes sur une seule ligne
Créer un texte "lire plus" sous le message
Un calque en dessous crée un nouveau rectangle qui sera un bouton de lecture..
Ajoutez des styles de dégradé et de contour. Astuce: faites le stoke à l'intérieur, pour avoir des coins parfaitement pointus du bouton
Ajoutez également un dégradé subtil au calque de texte.
Pour créer le badge, utilisez un autre rectangle, ajoutez du texte (j'ai utilisé Arial) et faites pivoter les deux calques ensemble à 45 degrés..
Ajouter un masque à la couche rectangle pour masquer les coins inutiles
… Et ajoutez 2 petits rectangles comme une illusion de l'insigne sous l'image.
Ajouter une ombre subtile au badge. Astuce: pour le mode de fusion des ombres, utilisez Normal au lieu de Multiplier par défaut. Cela prendra effet même si vous utilisez le badge comme fichier PNG transparent.
Créez un nouveau calque de texte. Au lieu de la couleur noire (qui peut paraître anormale sur des fonds clairs), utilisez du gris foncé pour obtenir un aspect plus naturel.
Conseil: pour créer des lignes horizontales au lieu d’utiliser un outil de ligne, créez un texte non anti-aliasé à l’aide du glyphe de soulignement "_". Il sera toujours précis et les espaces entre les lignes seront faciles à contrôler grâce au paramètre line-height. Utilisez la même hauteur de ligne que dans le texte du menu et créez autant de lignes que d'éléments de menu, moins une. Faire les lignes plus longues que nécessaire.
Définissez ce calque sur environ 15% et ajoutez une ombre blanche.
Ajoutez le masque à la couche de lignes et peignez avec un pinceau lisse pour obtenir des bords évanescents.
Créer un rectangle avec des coins arrondis (3px) pour une entrée de recherche.
Ajouter une ombre intérieure à la boîte et rendre le remplissage du calque à 70%
Au-dessus, ajoutez un texte de recherche et créez une forme personnalisée en tant que flèche de soumission. Ajouter une ombre intérieure à la boîte et rendre le remplissage du calque à 70%
Les images vectorielles étant recommandées à cet effet, je suggère de rechercher les logos nécessaires dans le service www.brandsoftheworld.com. Dans la plupart des cas, c'est le moyen le plus rapide. Ouvrez le logo dans Illustrator, copiez les contours et collez-les dans Photoshop en tant que formes. Vous pouvez également utiliser les icônes de contacts d'Orman Clark.
Définissez le remplissage du calque sur 0% et ajoutez des styles (ombre portée, ombre intérieure et superposition de couleurs) pour obtenir l'aspect 3D. Pour obtenir le logo à l'état actif (allégé), modifiez la couleur et l'intensité du style Superposition de couleurs..
Copier ce style et copier vers d'autres logos (clic droit sur le calque / Copier le style de calque)
Pour ajouter une zone de commentaire, créez un autre rectangle aux angles arrondis d'environ 520 pixels de large et ajoutez un style Ombre portée..
Sélectionnez la plus grande partie et ajoutez un masque à ce calque.
Dupliquez le calque et inversez son masque. Faire le remplissage du nouveau calque 25%.
Dans les paramètres de fusion, cochez l'option "Masquer les effets de masque de calque", pour éviter toute incohérence dans la ligne d'ombre des deux calques.
Créez une ligne verticale noire sur la bordure entre ces cases, remplissez-la également à 25% et ajoutez une ombre blanche de 1px dirigée vers la droite..
Ajoutez des exemples d'avatar et de textes en utilisant les couleurs précédemment utilisées.
Créez une forme de cercle et collez les styles de calque à partir de la flèche du logo. Couper la forme de la flèche du cercle en utilisant Forme personnalisée et mode de coupe.
Sous ce calque de boutons, créez un autre cercle - de taille identique ou inférieure, et collez le style de dégradé à partir du logo.. Conseil: Si un calque comporte de nombreux styles et que vous souhaitez en copier un seul, vous pouvez faire glisser le style tout en maintenant la touche Alt enfoncée et le déposer dans un autre calque..
Ajoutez de la lumière (comme ci-dessus à la flèche du logo).
Si vous souhaitez apporter de petites améliorations que personne ne remarquera, créez des lumières séparées pour les boutons et les trous en forme de flèche, puis déplacez légèrement la seconde. Et si vous avez déjà deux lumières séparées, vous pouvez facilement (sans masquage supplémentaire) rendre la lumière du bouton plus puissante pour être mieux visible sur le bouton très lumineux..
Sélectionnez tous les calques de boutons et créez-en un objet intelligent..
Dupliquer le calque, déplacer et retourner horizontalement. Maintenant, si vous éditez une flèche (double-clic sur la couche intelligente), les deux vont changer.
Tous les autres éléments peuvent être créés en copiant, collant et redimensionnant les éléments existants que nous avons conçus.
Conseil: vous trouverez la police de caractères League Gothic et d’autres polices gratuites avec des licences Web conviviales pour les concepteurs à l’adresse www.fontsquirrel.com.
OK, vous avez donc le PSD plus ou moins prêt et vous souhaitez aller plus loin. Comme Stuff nécessite une approche différente du contenu, il est très difficile de le coder correctement en raison de son caractère horizontal. Je ne connais pas beaucoup de sites horizontaux qui ont réussi à éviter les erreurs courantes (par exemple, le défilement de la souris ne fonctionne pas). S'il vous plaît laissez un commentaire si vous souhaitez connaître les meilleures façons de coder cette conception et nous verrons si nous ne pouvons pas apporter le tutoriel sur le site!
Quoi qu'il en soit, si vous voulez gagner du temps et tout avoir sur la plaque d'argent, vous pouvez télécharger le modèle HTML ou la version WordPress de Stuff pour quelques dollars. Merci!
Accentsconagua