Share
Dans le tutoriel suivant, vous apprendrez à créer une barre de navigation stylisée. Vous apprendrez à utiliser le panneau Apparence pour styliser une barre de navigation et à utiliser l'outil Slice pour couper et exporter les images afin qu'elles puissent être utilisées dans le cadre d'un site Web. Commençons!
Appuyez sur Commande + N pour créer un nouveau document. Entrez 1025 dans la zone de largeur et 53 dans la zone de hauteur, puis cliquez sur le bouton Avancé. Sélectionnez RVB, Écran (72ppi) et assurez-vous que la case "Aligner les nouveaux objets sur la grille de pixels" est décochée avant de cliquer sur OK. Activer la grille (Affichage> Afficher la grille) et Aligner sur la grille (Affichage> Aligner sur la grille).
Ensuite, vous aurez besoin d'une grille toutes les 5px. Allez dans Édition> Préférences> Guides et grille, entrez 5 dans le quadrillage chaque case et 1 dans la zone Subdivisions. Vous pouvez également ouvrir le panneau Info (Fenêtre> Info) pour un aperçu en direct avec la taille et la position de vos formes. N'oubliez pas de remplacer l'unité de mesure en pixels dans Edition> Préférences> Unité> Général. Toutes ces options augmenteront considérablement votre vitesse de travail.
Choisissez l'outil Rectangle (M), créez une forme 1025 x 50 px, remplissez-le avec le dégradé linéaire présenté ci-dessous et accédez à Effet> Styliser> Coins arrondis. Entrez un rayon de 3 px, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Pour l'étape suivante, vous aurez besoin d'une grille chaque 1px. Alors, allez dans Edition> Préférences> Guides et grille et entrez 1 dans le quadrillage chaque case. Concentrez-vous sur le côté gauche de la forme créée à l'étape précédente. Choisissez l'outil Plume (P), tracez un tracé vertical de 50 px et placez-le comme indiqué dans l'image suivante. Ajoutez un trait noir de 1 point à ce chemin pour le rendre plus facile à remarquer..
Resélectionnez le chemin vertical créé à l'étape précédente et faites-le glisser 128px vers la droite. Vous pouvez le faire manuellement ou en allant dans les options Objet> Transformer> Déplacer. Entrez simplement 128 dans la case Horizontal puis appuyez sur enter.
Resélectionnez ce chemin vertical et allez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans l'image suivante, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Sélectionnez le groupe de tracés verticaux créés à l'étape précédente ainsi que le rectangle arrondi créé à la deuxième étape, ouvrez le panneau Pathfinder et cliquez sur le bouton Diviser. Accédez au panneau Calques, sélectionnez le groupe obtenu et dissociez-le (Maj + Ctrl + G). Continuez à vous concentrer sur le panneau Calques et nommez vos formes de "1" à "8" (commencez par la forme de gauche)..
Désactivez l'alignement sur la grille (Affichage> Aligner sur la grille), puis sélectionnez Edition> Préférences> Général et assurez-vous que l'incrément de clavier est défini sur 1px. Sélectionnez la forme "1" et effectuez deux copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Sélectionnez la copie du haut et déplacez-la 1px vers la gauche à l'aide de la flèche gauche de votre clavier. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Amenez la forme obtenue au premier plan (Maj + Ctrl + Support carré droit), remplissez-la de noir et changez son mode de fusion en Superposition.
Sélectionnez la forme "1" et faites deux nouvelles copies devant (Contrôle + C> Contrôle + F> Contrôle + F). Concentrez-vous sur le panneau Calques, sélectionnez la copie du bas et déplacez-la d'une pixels vers la droite à l'aide de la flèche droite de votre clavier. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Amenez la forme obtenue au premier plan (Maj + Contrôle + Support carré droit), remplissez-la de blanc et changez son mode de fusion en Superposition.
Resélectionnez les deux formes créées lors des deux dernières étapes et regroupez-les (Contrôle + G). Faites une copie de ce groupe (Contrôle + C> Contrôle + F), sélectionnez-le et cliquez sur le bouton Unir du panneau Pathfinder. Remplissez la forme obtenue avec le dégradé linéaire indiqué dans la deuxième image.
Ouvrez le panneau Transparence. Resélectionnez la forme et le groupe créés à l'étape précédente, ouvrez le menu déroulant du panneau Transparence et cliquez sur Créer un masque d'opacité. À la fin, votre groupe masqué devrait ressembler à la deuxième image..
Resélectionnez le groupe masqué créé à l'étape précédente et accédez à Objet> Transformation> Déplacer. Entrez 128 dans la case Horizontal et cliquez sur le bouton Copier. Évidemment, cela ajoutera une copie de votre groupe 128px à droite. Sélectionnez cette copie et répétez la commande Déplacer. Continuez à répéter cette technique jusqu'à ce que vous ayez sept groupes masqués.
Activer l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez quatre carrés de 3 pixels et placez-les comme indiqué dans l'image suivante. Remplissez-les également en noir et blanc, comme indiqué ci-dessous. Sélectionnez les quatre formes et faites-les simplement glisser à l'intérieur du panneau Nuancier pour les transformer en motif. Une fois que vous avez obtenu votre modèle, vous pouvez supprimer les quatre carrés du panneau Calques..
Désactivez la grille (Affichage> Afficher la grille) et l’alignement sur la grille (Affichage> Aligner sur la grille). Revenez à la forme "1". Sélectionnez-le, concentrez-vous sur le panneau Apparence et ajoutez un second remplissage à l'aide du bouton Ajouter un nouveau remplissage. Sélectionnez-le, définissez la couleur sur R = 28 G = 117 B = 188 et remplacez son mode de fusion par Color Burn..
Resélectionnez la forme "1", concentrez-vous sur le panneau Apparence et ajoutez un troisième remplissage. Sélectionnez-le, abaissez l'opacité à 15%, changez son mode de fusion en lumière douce et ajoutez le motif créé à la douzième étape..
Resélectionnez la forme "1", mettez l'accent sur le panneau Apparence, assurez-vous qu'aucun fond ni trait n'est sélectionné et allez à Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du haut, cliquez sur OK et accédez à nouveau à Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du milieu, cliquez sur OK et accédez à nouveau à Effet> Styliser> Ombre portée. Entrez les données affichées dans la fenêtre du bas et cliquez sur OK..
Vous devez maintenant copier les propriétés utilisées pour la forme "1" et les coller sur le reste des formes. Voici comment vous pouvez facilement le faire. Allez dans le panneau Calques, concentrez-vous sur le côté droit et vous remarquerez que chaque forme est accompagnée d'un petit cercle gris. Cela s'appelle une icône de cible. Maintenez la touche Alt enfoncée, cliquez sur l'icône de la cible représentant la forme "1" et faites-la glisser sur le cercle représentant la forme "2". Utilisez cette technique pour ajouter les mêmes propriétés aux six autres formes..
Sélectionnez la forme "2", concentrez-vous sur le panneau Apparence et ajoutez un quatrième remplissage. Sélectionnez-le, faites-le blanc, diminuez l'opacité à 50% et changez son mode de fusion en Lumière douce. Ce sera le mode de survol pour votre barre de navigation.
Saisissez l'outil Texte (T) et votre texte comme indiqué dans l'image suivante. Utilisez la police Calibri avec une taille de 15 points, définissez le style en gras et la couleur en R = 0 G = 86 B = 140. Assurez-vous que tout votre texte est sélectionné et allez à Effet> Styliser> Ombre portée. Entrez les données ci-dessous et cliquez sur OK.
Maintenant, coupons ce menu. Concentrez-vous sur le groupe masqué de gauche et sélectionnez l'outil Tranche (Maj + K). Tout d’abord, dessinez une tranche de 6 x 53 pixels le long de la forme "1", comme indiqué dans l’image suivante. Continuez avec l'outil Tranche (Maj + K) et tracez une seconde tranche de 6 x 53 pixels le long de la forme "2", comme indiqué ci-dessous..
Maintenant que vous avez vos premières tranches, allez dans Fichiers> Enregistrer pour le Web et les périphériques (Alt + Ctrl + Maj + S). Sélectionnez l'outil de sélection de tranche (K) et double-cliquez sur la tranche de gauche, 6 par 53 px. Entrez nav dans la case du nom puis appuyez sur OK.
Concentrez-vous sur la seconde tranche de 6 x 53 pixels. Double-cliquez dessus, entrez "nav.hoover" dans la section Nom et appuyez sur OK. Sélectionnez PNG-24 dans le menu déroulant Présélection, puis cliquez sur Enregistrer. Choisissez un emplacement pour les images que vous êtes sur le point d'enregistrer, puis cliquez sur Enregistrer. Déplacez-vous à cet endroit et vous trouverez un nouveau dossier avec un tas de nouvelles images. Faites glisser "nav.png" et "nav.hoover.png" hors du dossier, puis supprimez-le..
Revenez à votre fichier Ai, sélectionnez l'outil Tranche (Maj + K) et tracez une tranche de 2 x 53 pixels le long du groupe masqué de gauche. Accédez au panneau Calques et désactivez la visibilité de toutes les formes sauf le groupe masqué de gauche..
Accédez à nouveau à Fichiers> Enregistrer pour le Web et aux périphériques (Alt + Ctrl + Maj + S). Saisissez l'outil de sélection de tranche (K) et double-cliquez sur la nouvelle tranche créée à l'étape précédente. Nommez-le "diviseur" et cliquez sur OK. Assurez-vous que PNG-24 est toujours sélectionné dans le menu déroulant Préréglage, puis cliquez sur Enregistrer. Encore une fois, choisissez un emplacement pour les images que vous êtes sur le point d’enregistrer, puis cliquez sur OK. Déplacez-vous à cet emplacement, ouvrez le nouveau dossier, faites glisser "divider.png" en dehors du dossier, puis supprimez votre dossier. Au final, vous devriez avoir trois images simples: "nav", "nav.hoover" et "divider.png".
Enfin, vous pouvez facilement modifier les couleurs utilisées pour votre barre de navigation. Remplacez simplement la couleur utilisée pour le texte et le second remplissage avec certaines des couleurs montrées dans les images suivantes.
Maintenant que votre travail est terminé, voici à quoi cela devrait ressembler.
Accentsconagua