Share
Ce tutoriel vous montrera comment créer un menu semi-transparent inspiré de Vista, utilisant des dégradés, des ombres et des flous pour produire un effet moderne époustouflant..
Ouvrez une nouvelle zone de travail qui est 600x335px. Commencez par afficher les règles (Affichage> Règles), puis créez deux guides similaires à l'image ci-dessous. Créez un à 285px et l'autre à 310px.
Créez un rectangle (U) qui remplit la zone réglée inférieure et nommez le calque "barre inférieure". Ouvrez le menu Effets pour le calque. Accédez à la propriété Incrustation de dégradé et appliquez un dégradé entre # 000000 et # 0c0c0c à 90 degrés..
Créez maintenant un autre rectangle dans la zone de règles supérieure et nommez le calque "barre supérieure". Encore une fois, ouvrez le menu des effets et appliquez un calque dégradé compris entre # 35393d et # 787b7d à 90 degrés. Sélectionnez les deux rectangles créés jusqu'à présent et changez l'opacité à 90%. Quand un arrière-plan est ajouté plus tard, cela produit un effet intéressant, car cela permet à l'arrière-plan de se voir légèrement.
L'étape suivante consiste à ajouter une surbrillance au menu à l'aide de l'outil Ligne (U). Sélectionnez l'outil Ligne et réglez le poids sur 2px. Tracez une ligne sur la barre et changez la couleur en # 9fa2a4. Renommez cette couche pour "réduire la surbrillance". Maintenant, tracez une autre ligne directement au-dessus de la précédente, changez la couleur en # 484b4d et changez le nom en "surbrillance supérieure". Regroupez ces couches avec des couches de barres dans un groupe appelé "barre". Cette étape complète la base du menu.
Maintenant que la barre de menus est terminée, nous pouvons créer un ensemble de séparateurs pour séparer le texte. Sélectionnez l'outil Ligne à nouveau et laissez le poids à 2px. Tracez une ligne verticale à partir de la marque de la règle centrale qui s’arrête quelques pixels avant la surbrillance. Cela n'a pas besoin d'être exact et peut facilement être ajusté plus tard. Ouvrez le menu Effets et appliquez une superposition de dégradé à 90 degrés entre les numéros 676a6d et 4d6672. Nommez cette couche "diviseur supérieur".
Tracez une autre ligne verticale à partir de la règle centrale en descendant et en vous arrêtant à la même distance du bord que ci-dessus. Cette section n'a pas de dégradé, changez donc la couleur en # 43474b. Renommez cette couche en "diviseur inférieur". Groupez les deux sections du diviseur et nommez le groupe "diviseur".
Sélectionnez l'outil Texte (T) et changez la couleur en blanc (#FFFFFF). La police que j'ai choisi d'utiliser pour le menu s'appelle Segoe UI, car c'est la police utilisée dans l'interface utilisateur de Vista. Cependant, tout le monde n’a pas cette police, donc Arial le remplacera. Définissez la taille sur 11 pt et tapez vos liens en les espaçant de manière égale. Regroupez-les et nommez le groupe "liens".
Maintenant, copiez vos séparateurs et placez-les entre les liens. Vous devriez vous retrouver avec quelque chose semblable à ceci.
Maintenant que la barre de menus est pratiquement terminée, vous pouvez ajouter un arrière-plan de votre choix. Le fond que j'ai choisi est une photo d'herbe. Quelque chose de coloré ou scénique fera.
Copiez votre arrière-plan dans le menu et renommez le calque Arrière-plan. Assurez-vous que ce calque est à l'arrière dans votre palette de calques. Notez que la transparence dans le menu permet à l’arrière-plan de s’afficher sans surcharger.
Cette étape créera le rectangle arrondi flou qui se trouve derrière le texte. Cet effet est assez courant sous Vista et constitue une bonne technique. Il prend la mise au point de l'arrière-plan et le place sur le texte, mais montre toujours la belle scène derrière.
Tout d'abord, dupliquez le fond. Cette couche n'est pas permanente, mais nous en couperons une sélection. Puis, à l’aide de l’outil Rectangle arrondi (U), dessinez une forme qui commence au-delà du bord gauche du canevas. Cela signifie que la forme n'a que deux bords arrondis.
Rasterisez le calque puis, à l'aide de l'outil Baguette magique (W), sélectionnez le rectangle et supprimez la couleur tout en conservant le contour. Sélectionnez maintenant la copie d’arrière-plan et coupez-la dans ce calque. Supprimez le calque de copie d'arrière-plan et ajoutez un autre nouveau calque appelé "flou".
Collez la forme dans le calque "flou" puis appliquez un flou gaussien de 5 pixels (Filtre> Flou> Flou gaussien). Appliquez ensuite une ombre portée comme indiqué ci-dessous.
Maintenant, ajoutez votre texte à l'intérieur du flou. En utilisant le même caractère que les liens (Segoe UI), tapez votre nom et votre slogan. Sélectionnez du texte, mettez-le en gras et gardez un aspect normal, appliquez une ombre portée et un dégradé. Cela produit un texte d'aspect moderne et saisissant.
Cette étape est facultative car elle produira la lueur accentuée bleue qui deviendra notre effet de survol. Dessinez une grande ellipse (U) qui remplit la zone située entre les séparateurs. Changez la couleur de l'ellipse en # 5c94c5 et appliquez un flou gaussien de 10 pixels. La forme est maintenant devenue une couche raster et vous pouvez nettoyer le flou excessif à l'aide de l'outil Rectangle de sélection (M)..
Ce menu produit un effet saisissant lorsqu'il est associé à un arrière-plan panoramique lumineux. Il utilise la transparence à bon escient ainsi que les dégradés modernes. L'utilisation de rehauts est un atout majeur pour donner aux images un aspect moderne et avant-gardiste. Ce menu serait assez facile à découper et à transformer en un menu Web très fonctionnel avec des états de survol.
Accentsconagua