Share
Les coups de pinceau à l'aquarelle sont non seulement devenus une tendance populaire dans la conception Web moderne, mais les couches de transparence avancées (ou ce que j'appelle la translucidité). Le nouveau design Envato a reçu beaucoup de félicitations pour avoir utilisé cet effet, et ce tutoriel vous montrera comment créer un effet similaire tout en le combinant avec d'autres tendances Web populaires..
Regardez l'image que nous allons créer.
Mettons en place notre document. J'ai tendance à créer mes sites avec une largeur fixe de 960px et une hauteur variable. Pour ce tutoriel, j'ai choisi une hauteur de 800 pixels pour nous assurer que nous avons suffisamment de place pour toutes les sections de contenu que nous souhaitons inclure. La création du document original au format souhaité par le site facilite la création des guides..
Ensuite, nous allons configurer nos guides. Faites glisser les repères des règles du document vers les quatre bords de votre document..
Nous devons maintenant allouer de l'espace pour l'arrière-plan que nous allons créer. Accédez à Image> Taille du canevas et développez le document à 1 100 pixels sur 1 000 pixels. Cela devrait nous donner beaucoup d'espace pour remplir notre contexte unique.
Remplissez le calque inférieur de blanc (Maj + F5). Renommez cette couche en "arrière-plan". Votre document devrait maintenant ressembler à l'image ci-dessous.
Cliquez avec le bouton droit sur le calque "arrière-plan", puis choisissez Options de fusion. Nous allons ajouter une superposition de dégradé à notre calque "arrière-plan". J'ai choisi un dégradé de trois couleurs avec du blues et du bronze, mais vous pouvez choisir n'importe quelle couleur. L'avantage d'utiliser les options de fusion pour l'arrière-plan est qu'à tout moment, vous pouvez facilement changer les couleurs et ajuster le dégradé à votre goût..
Votre document devrait maintenant ressembler à ceci:
Vous voudrez peut-être ignorer cette étape, mais j'estime que le dégradé est un peu trop brillant pour ce motif. Nous allons ajouter un peu de bruit pour atténuer un peu.
Créer un nouveau calque. Renommez cette couche "bruit". Ensuite, remplissez le calque avec du blanc (Edition> Remplir). Une fois le calque rempli de blanc, nous devons ajouter du bruit en appliquant Filtre> Bruit> Ajouter du bruit. Définissez le montant sur 400%, avec une distribution uniforme et non monochromatique. Toutes les couleurs du bruit nous donneront beaucoup plus de profondeur dans notre fond.
Définissez le calque "bruit" sur Multiplier et définissez l'opacité sur 5%. Cela devrait nous donner juste assez grain atténuer le dégradé.
Tout d’abord, vous devrez télécharger des pinceaux, si vous ne les avez pas déjà. Voici quelques-uns que j'ai utilisés dans le passé: "Coup de pinceau".
Créez un nouveau calque, au-dessus de vos calques "d'arrière-plan" et "de bruit". Renommez ce calque en "brush1" (nous allons créer plusieurs calques comme celui-ci). Définissez ce calque sur Multiplier. Choisissez une couleur chaude au premier plan (pour compenser les tons froids) dans notre arrière-plan dégradé bleu. J'ai choisi un brun chaud: # 996726. Sélectionnez le pinceau que vous souhaitez dessiner et placez-le en haut à gauche du document, en veillant à ce que le trait soit en dehors des limites de vos repères (nous voulons que l'arrière-plan soit étendu à l'extérieur).
Ajustez l'opacité du calque à 50% (pour que le grain soit visible). Répétez les deux étapes précédentes pour plusieurs brosses selon vos goûts. Votre fond devrait maintenant ressembler à l'image ci-dessous.
Félicitations, votre arrière-plan personnalisé et unique est complet. Puisque vous avez placé les pinceaux de manière aléatoire, cela vous différenciera de ceux qui ont acheté un fond de stock similaire..
Nous devons d’abord saisir l’outil Rectangle arrondi et définir le rayon sur 20px. Au-dessus de tous vos calques d’arrière-plan (pinceaux + bruit + dégradé), faites glisser un rectangle arrondi dans les repères d’origine que nous avons définis. Votre rectangle devrait être 960px par 800px. Renommez ce calque "conteneur" et cliquez avec le bouton droit de la souris sur le calque, puis sélectionnez Rasteriser le calque (nous apporterons quelques modifications à ce calque plus tard..
Pour que la couche "conteneur" ait l'air opaque, il faut faire quelques choses:
Une fois que vous avez défini tous les styles de calque, votre calque "conteneur" devrait ressembler à ceci:
Pour nous assurer de conserver un remplissage cohérent sur le calque "conteneur" (en supposant que nous ne voulons pas compter nos pixels à chaque fois que nous plaçons un élément), ajoutons des repères à 40 pixels dans notre boîte de repères d'origine..
Comme vous l'avez vu dans l'aperçu final, nous voulons que la navigation ressemble à ce qu'elle est creux ou coupé de la couche "conteneur". Pour ce faire, nous allons simplement supprimer une partie du calque "conteneur" et laisser les styles de calque faire leur magie.
Pour créer la sélection pour la découpe, nous allons créer une nouvelle forme rectangulaire dans l'espace que nous souhaitons pour la découpe de navigation. Utilisez un rayon de 10 px ici (qui correspond à la moitié du rayon du calque "conteneur"), afin de garantir un espacement constant du coin, là où il est arrondi..
Si nécessaire, déplacez la forme en haut à droite de vos lignes de guidage de rembourrage intérieures. Une fois le calque en place, cliquez sur le calque de la palette du calque tout en maintenant la touche Commande enfoncée pour la sélectionner. Choisissez le calque "conteneur" et appuyez sur Supprimer. Vous pouvez maintenant masquer votre rectangle arrondi 10px pour la navigation et votre calque "conteneur" affichera maintenant une découpe, comme indiqué ci-dessous..
Remarquez à quel point les coins arrondis sont lisses. Si nous venions de sélectionner une zone carrée et d’arrondir la sélection, les angles de découpe auraient été très saccadés. En outre, la façon dont les styles de calque sont automatiquement appliqués au calque n'est pas agréable, et tous les biseaux et ombres que nous avons ajoutés sont superbes.
Maintenant nous avons besoin de texte. J'ai choisi Rockwell comme police (elle est fournie en standard avec MS Office, mais peut également être achetée). Espacer uniformément les éléments de navigation dans la découpe, comme indiqué.
Nous voulons donner au texte une gravé dans la pierre effet, et pour ce faire, nous ajoutons une ombre portée au texte (nous pourrions également ajouter une ombre intérieure, mais le texte paraît plus fin qu’il ne l’est réellement). Voici les paramètres d'ombre portée que j'utilise généralement.
Pour obtenir l'effet souhaité, nous allons créer un nouveau calque juste en dessous du texte que nous avons ajouté pour la navigation. Renommez cette couche "nav actif". Remplissez cette sélection avec n'importe quelle couleur (peu importe).
Ensuite, nous devrons ajouter des styles de calque au calque "nav actif". Je les ai fournies ci-dessous (vous aurez besoin d'une ombre portée, d'une superposition de dégradé, d'un trait et d'un éclat intérieur).
Dupliquez votre calque "nav actif" (Commande + J) et aplatissez tous les styles de calque. Renommez cette couche "nav actif aplati". Nous allons appliquer certaines cultures à ce calque et nous ne voulons plus que les styles de calque.
Utilisez votre outil de sélection pour supprimer le trait et la lueur intérieure du haut et du bas du calque "actif nav aplati"..
Nous devons maintenant ajouter des ombres pour que le calque "nav actif" ait l’air de se lier au travers du calque "conteneur". Nous allons créer ces ombres à l'aide de l'outil Ellipse.
Créez une ellipse noire de 20 pixels de plus que la largeur du calque "actif nav aplati" et d'environ 5 pixels de haut. Centrez votre ellipse sur le bord supérieur du calque "actif nav aplati". Cliquez avec le bouton droit sur le calque et sélectionnez Rasteriser le calque. Renommez cette couche en "ombre active supérieure".
Nous devons flouter un peu l’ellipse, aller dans Filtre> Flou> Flou gaussien et appliquer avec un rayon de 2px. Maintenant que l'ellipse ressemble plus à une ombre, nous allons supprimer les 50% supérieurs de l'ombre..
Ajustez l'opacité du calque "ombre active supérieure" à 75%. L'ombre supérieure est terminée. Pour créer l'ombre du bas, dupliquez le calque (Commande + J), appliquez Édition> Transformation> Retourner verticalement et déplacez l'ombre au bas du "calque aplati de navigation actif".
Avant d’arriver au logo, finissons un peu notre en-tête. Nous allons d’abord ajouter quelques guides supplémentaires. Tracez un guide horizontal 40px au-dessous du bas de la découpe de navigation, comme indiqué..
Nous allons créer notre ligne de séparation, ce qui donnera l'impression que la couche "conteneur" a une gravure ou est pliée à cet endroit. Pour créer cet effet, tracez une ligne horizontale d'une hauteur de 1 px sur un nouveau calque de la largeur du calque "conteneur". Remplissez votre ligne horizontale avec un vert foncé (j'ai choisi le mien de l'arrière-plan). Renommez cette couche "ligne de séparation".
Pour obtenir la sensation de gravure, dupliquez le calque "séparant la ligne" et remplissez ce calque de blanc. Déplacez ce calque 1px vers le bas pour que le haut de celui-ci touche le calque "séparant la ligne" d'origine.
Nous devons maintenant ajouter notre logo. Je ne suis pas un grand créateur de logo, alors j'ai simplement choisi une police de caractères (Gill Sans) et écrit un gros texte dans le coin supérieur gauche. Tout comme nous avons fait la découpe pour la navigation, faites une sélection du texte du logo puis supprimez-le du calque "conteneur". Une fois encore, les styles de calque s’adapteront à la nouvelle forme et s’y actualiseront..
L'astérisque a été créé en utilisant exactement la même technique que l'élément de navigation actif, afin de donner l'impression qu'il dépasse du calque "conteneur"..
Encore une fois, nous allons utiliser la même technique de découpe que celle utilisée pour la section de navigation..
Créez un rectangle arrondi avec un rayon de 10px. Assurez-vous de laisser un espacement de 40 pixels sur tous les côtés (nous avons créé les guides plus tôt pour vous aider)..
Tout en maintenant la touche Commande enfoncée, cliquez sur le calque du rectangle arrondi pour le sélectionner, puis sélectionnez le calque "conteneur" et appuyez sur Supprimer. Vous pouvez supprimer le rectangle arrondi car nous ne l'utilisons plus.
Nous devons ensuite créer les flèches de chaque côté afin que vous puissiez avoir plusieurs éléments de portefeuille sur la page d'accueil et les parcourir en une sorte de diaporama. Pour ce faire, créez un cercle de diamètre 40px avec l'outil Forme. Déplacer le cercle en place sur le côté gauche en le centrant sur le bord de la découpe.
Dupliquez le cercle de l'autre côté, puis centrez-le de nouveau sur l'autre bord de la découpe (horizontalement et verticalement).
Puisque nous ne travaillons pas avec des masques vectoriels ici (et que notre remplissage est réglé à 0% sur le calque "conteneur"), nous devons ajuster cela momentanément pour nous assurer que nous pouvons ajouter du contenu au calque "conteneur"..
Définissons donc le remplissage du calque "conteneur" sur 100%. Fusionner maintenant (Commande + E) les deux cercles que nous avons créés pour les flèches dans le calque "conteneur". Une fois que vous avez fusionné, vous pouvez redéfinir le remplissage du calque "conteneur" sur 0%. Voici l'effet désiré:
Remarquez comment les deux cercles font maintenant partie du calque "conteneur".
Ensuite, nous devrons ajouter des flèches. Vous pouvez facilement les créer à l'aide de crochets, mais j'ai choisi de créer mon propre.
Créez un rectangle arrondi avec un rayon de bordure de 3 pixels, une largeur de 20 pixels et une hauteur de 6 pixels; et placez-le juste au dessus de l'endroit où vous voulez la flèche. Transformez et faites pivoter (Commande + T) le rectangle arrondi de 45 degrés dans le sens inverse des aiguilles d'une montre pour l'incliner. Voici comment nous allons faire le point à la flèche.
Dupliquez le rectangle arrondi (Commande + J) et Édition> Transformation> Retourner verticalement. Déplacez le calque en place, de sorte que les coins gauche soient alignés pour former un support. Dans la palette des calques, sélectionnez les deux rectangles arrondis et fusionnez les calques ensemble (Commande + E). Renommez le calque "flèche gauche". Voici à quoi devrait ressembler votre flèche:
Nous devons ajouter quelques styles de calque à la flèche pour l'adapter au reste de la conception, comme suit:
Dupliquez le calque "flèche gauche" (Commande + J), puis Edition> Transformation> Retourner horizontalement. Renommez ce calque "flèche droite" et déplacez-le vers la droite de la découpe..
Une dernière chose que nous devons ajouter pour notre domaine des éléments de portefeuille en vedette est une ombre pour lui donner une certaine profondeur. Ajouter un dégradé transparent au noir au bas de la découpe, comme indiqué.
Pour éliminer tout gradient en dehors de la découpe, appuyez sur Commande + Cliquez sur le calque "Conteneur", puis sur Supprimer. Nous placerons nos captures d'écran en dessous de cette couche pour donner l'illusion de profondeur.
Prenez une capture d'écran de votre site préféré (j'ai utilisé l'un de mes portefeuilles, ryanscherf.net). Renommez cette couche "capture d'écran".
Ajoutez un trait et une ombre interne au calque "capture d'écran" en utilisant vos styles de calque:
Dupliquez le calque "capture d'écran" et aplatissez tous les styles de calque (fusionnez le calque "copie de capture d'écran" avec un nouveau calque vide). Faites pivoter le calque «Copie d'écran» de 45 degrés dans le sens inverse des aiguilles d'une montre, comme vous l'avez fait pour les flèches à l'étape 9.
Placez la capture d'écran en bas à gauche de la découpe du portefeuille, en veillant à ce que le haut de la capture d'écran reste bien en dehors de la découpe (nous allons lui donner de la profondeur) et donnez l'impression qu'elle est dissimulée derrière la couche "conteneur". Rognez tout excès de la "copie d'écran" à partir du bas, comme indiqué.
Maintenant que notre capture d'écran est en place, ajoutons une courte description à droite. Ici, rien d’extraordinaire mais nous essayons toujours de nous en tenir à notre thème de la profondeur et des couches.
Créez du texte avec une couleur presque blanche (ou bleu / vert très clair). Utilisez la même ombre portée gravure technique de la navigation (Angle à -60 degrés, Distance de 1px et Taille de 1px).
Créez un carré opaque derrière le texte. J'ai utilisé un calque tout noir à 30% d'opacité. L'effet devrait ressembler à ceci:
Nous avons besoin de points de navigation comme les vues iPhone. Nous allons créer un point actif, qui utilisera exactement les mêmes styles de calque que le calque "nav actif" (j'espère que vous ne l'avez pas supprimé), et un point inactif qui utilise les styles de calque du calque "flèche de gauche"..
Remarque: la réutilisation des styles de calque est importante non seulement pour éviter de recréer des styles similaires, mais également pour le maintien de la cohérence de votre conception..
Créez un cercle à l'aide de l'outil Forme, avec un diamètre de 20px (j'aime mes gros points de navigation, car je trouve parfois qu'ils sont trop difficiles à cliquer et à naviguer). Cliquez avec le bouton droit sur le calque "nav actif" et sélectionnez Copier le style du calque. Sélectionnez le cercle dans votre palette Calques, cliquez avec le bouton droit de la souris et sélectionnez Coller le style de calque..
Répétez ces étapes pour autant de points inactifs que vous le souhaitez, en veillant à utiliser le style de calque du calque "flèche de gauche"..
Nous devons faire savoir à nos visiteurs exactement ce que nous présentons ici. Nous allons créer un ruban en utilisant exactement la même technique que celle utilisée pour le calque "nav actif", décrite ci-dessus à l'étape 7..
La seule différence est que j'ai ajouté une opacité un peu plus élevée pour l'ombre portée afin de lui donner une apparence bien supérieure à tout le reste..
Pour terminer cette section, nous souhaitons dupliquer (Commande + J) notre couche "ligne de séparation" créée à l'étape 8 et la déplacer 40 fois sous la découpe des éléments du portefeuille. C'est tout!
Nous allons d’abord créer plus de guides pour nous assurer que nous avons trois colonnes égales. Ne soyez pas effrayés, mais nous devrons faire quelques calculs ici:
960px large site - 80px de remplissage interne = 880px de l'espace disponible pour nos colonnes. Nous voudrons également ajouter un rembourrage de 40 pixels entre les colonnes; nous avons donc en principe 800 pixels pour nos 3 colonnes..
800px divisé par 3 équivaut à 266px par colonne (j'ai choisi les colonnes suivantes: 267px, 266px, 267px de gauche à droite pour maintenir l'équilibre). Alors, dessinez les guides à ces intervalles, en vous assurant que vous tenez compte du rembourrage de 40 pixels de chaque côté de la colonne centrale.
Créez un nouveau groupe dans la palette de votre couche nommée "Dernières nouvelles du blog". C’est là que nous garderons toutes les couches relatives à cette section.
Créez du texte pour le titre. Encore une fois, j’ai utilisé la police Rockwell avec les mêmes styles de calque pour gravure comme je l'ai utilisé sur la navigation. Au cas où vous auriez oublié, cela est décrit à l'étape 6..
Sélectionnez une forme personnalisée pour ancrer chaque côté du texte. J'ai choisi une forme personnalisée Photoshop standard, mais vous pouvez ajouter des milliers de formes personnalisées à votre bibliothèque..
Nous devons ajouter des styles de calque aux formes pour leur donner un aspect un peu plus 3D:
Le produit final devrait ressembler à l'image suivante.
Nous avons besoin de texte ci-dessous pour nos articles de blog. Assurez-vous que la couleur de votre texte est une nuance claire du bleu / vert de l’arrière-plan. Nous pouvons utiliser autant de nuances différentes de ce bleu / vert que nous le souhaitons, et cela fera sûrement ressortir notre texte.
Pour que le texte ressemble gravée encore une fois, nous allons essayer une version légèrement différente de la technique précédente. Avant d’ajouter une ombre portée noire en haut à gauche du texte, cependant, comme nous utilisons un texte un peu plus clair, nous allons ajouter notre ombre portée en bas à droite, en utilisant le blanc. Vous pouvez voir l'effet ci-dessous:
J'ai utilisé la forme personnalisée et ronde pour les puces et réutilisé le style de calque des formes personnalisées que nous avons ajoutées dans l'en-tête de cette section..
Cette section devrait être assez facile. Dupliquez le groupe "Dernières nouvelles du blog" et renommez le doublon en "Mises à jour Twitter".
Ajustez le texte pour qu'il soit plus représentatif d'une mise à jour Twitter (liens, mentions, horodatage, etc.). Déplacez ce groupe dans la colonne centrale - et vous avez terminé!
Dupliquez le groupe "Twitter Updates" et renommez-le en "Newsletter". Déplacer ce groupe dans la colonne la plus à droite.
Ajustez le contenu pour qu'il ressemble davantage à un paragraphe descriptif et supprimez toutes les puces (les paragraphes d'introduction n'ont généralement pas besoin de puces).
Pour créer le formulaire de courrier électronique, nous allons créer un rectangle arrondi avec un rayon de bordure de 10 pixels et une hauteur de 40 pixels. La largeur doit être de 266 pixels (ou tout ce que vous avez choisi comme largeur de la colonne de droite). Renommez ce calque en "formulaire de saisie" et définissez les styles de calque comme suit:
Enfin, nous avons besoin d’un bouton pour soumettre le formulaire. Nous allons utiliser nos styles de calque à partir du calque "nav actif" pour le bouton, car nous souhaitons conserver cette apparence cohérente pour tous nos éléments..
Créez un autre rectangle arrondi, hauteur de 40 pixels, largeur de 140 pixels et rayon de bordure de 20 pixels. Renommez ce calque en "bouton".
Copiez le style de calque du calque "nav actif" et collez-le sur le calque "bouton".
Dupliquez le texte de la navigation (Commande + J) et modifiez-le en disant "S'abonner". Déplace le texte à centrer dans le bouton. Le résultat devrait ressembler à l'image ci-dessous.
Les clients le demanderont toujours et vous devriez toujours l'ajouter. En dehors et en dessous de votre couche "conteneur", ajoutez des informations de copyright. En utilisant le gravure technique à nouveau pour lui donner une certaine profondeur.
J'espère que cela aidera tout le monde à explorer de nouvelles limites avec leurs propres conceptions. Comme vous l'avez vu, de nombreuses techniques décrites ici sont simples mais élégantes. et devrait être facile à mettre en œuvre dans vos propres conceptions.
Accentsconagua