Share
Ce tutoriel a pour but de présenter de nombreux outils Adobe Illustrator qui sont essentiels à la boîte à outils de tout concepteur. Ils aideraient les concepteurs Web débutants et intermédiaires à acquérir la confiance nécessaire pour utiliser Illustrator for Web Design. Nous allons commencer par configurer le document pour le Web et expliquer comment utiliser Artboards pour définir plusieurs tailles d'écran. Nous allons apprendre à créer une grille de base (inspirée de la grille de base de Teehan + Lax à l'aide des outils intégrés d'Illustrator). Nous allons également apprendre à utiliser les symboles, les outils d'alignement, ainsi que les styles de caractères et de graphismes pour créer facilement une conception cohérente. Cela nous aidera non seulement à encadrer les fils, mais aussi à expérimenter l'apparence de la conception bien plus facilement que Photoshop ne le permettrait..
Ah… Adobe Illustrator. Cependant, une partie négligée de la boîte à outils d'un concepteur Web se trouve être l'un des outils de conception Web les plus puissants disponibles. Non seulement il est beaucoup plus stable que Photoshop, mais il nous permet également de créer des mises en page précises et cohérentes avec précision et facilité. Si vous n'avez pas encore expérimenté Illustrator en tant qu'outil d'encadrement en fil de fer, ni intégré celui-ci dans votre processus de conception de sites Web, il vous manque. Ne vous inquiétez pas, le jour peut encore être sauvé.
J'ai essayé d'être aussi complet et approfondi que possible afin de séduire les utilisateurs débutants et intermédiaires, cependant, une fois les détails détaillés présentés, ils ne seront peut-être pas répétés et le lecteur sera invité à les compléter. Apprenez à configurer Artboards et les grilles pour trois tailles d'écran distinctes. Cependant, le design lui-même correspond à la taille de l'écran..
Avec ça, commençons. Mais avant cela, téléchargez League Gothic, Goudy Bookletter, Autruche Sans et Chunk Typefaces dans The League of Movable Type.
Nous allons commencer par créer un document de 1280 x 800 pixels avec 3 planches, respectivement une pour l’écran, la tablette et le mobile. J'ai décidé de les disposer horizontalement et à une distance de 400 pixels afin que l'autre document ne nous empêche pas de travailler. Les détails les plus importants concernent les unités (paramétrées en pixels), le mode couleur (paramétré en RVB) et le mode de prévisualisation (paramétré en pixels). Tout cela peut être évident pour vous, sauf pour le mode de prévisualisation.
Illustrator étant un programme vectoriel, tout graphique créé peut être agrandi infiniment et conserver sa précision. Bien que particulièrement avantageux pour maintenir la compatibilité de la rétine et rester sans perte, cela peut altérer notre goût plus raffiné, poussant au pixel, que nous avons tous grandi à aimer. Définir le mode de prévisualisation sur pixel nous permettrait d’agrandir et de voir nos œuvres en pixels. Vous pouvez basculer entre Pixel et Aperçu en utilisant le raccourci Ctrl + Alt + Y.
Cela fait, nous allons aller dans Edition> Unités> Préférences et définir toutes les unités en pixels, si elles ne l’avaient pas déjà été.
Comme vous le verrez, vous avez 3 tableaux d’art assis devant vous. Ouvrez le panneau Artboards (Fenêtre>! Rtboards) et ajustez les paramètres pour les Artboards comme vous le souhaitez. Dans notre cas, je vais utiliser la taille 1280 x 800 px pour le plan de travail Screen et le renommer ainsi. Pour les tablettes graphique et mobile, je choisirai les paramètres prédéfinis intégrés pour iPad et iPhone. De plus, réglez la planche graphique Mobile sur le mode portrait et continuez.
Nous allons maintenant créer la grille. Créez un rectangle bleu (quelle que soit sa couleur) avec les tailles suivantes. La largeur est censée être la taille de la grille, tandis que la longueur est arbitraire et facilement ajustable. Comme je connaissais d'avance la longueur du document que je créerais, j'ai fini par créer la grille pour la planche "Ecran" à 4920 px.
Une fois les rectangles créés, sélectionnez-en un dans la feuille de travail 'Screen' et allez à Objet> Tracé> Diviser en grille. Ceci fournit un outil puissant pour créer des grilles. J'ai choisi 12 colonnes et une gouttière de 24 px pour une taille totale de 960 (la largeur de la colonne est calculée automatiquement). Cela divise le rectangle en 12 grilles et nous devons d'abord les regrouper afin de les déplacer comme un seul objet. Pour créer les guides, nous allons dupliquer la grille que nous venons de créer et appuyer sur Ctrl + 5 ou Afficher> Guides> Créer des guides pour créer les guides. Répétez ces étapes pour la tablette et les planches mobiles avec les paramètres répertoriés ci-dessous. Une dernière étape pour la grille est de régler l'opacité à 40%.
Pour la ligne de base, nous allons tracer une ligne d'épaisseur de trait de 1 px sur la longueur des trois planches et utiliser l'effet Transformer pour effectuer des copies à des intervalles fixes. Cela nous donne l’avantage de pouvoir réajuster la ligne de base, voire même l’étendre, simplement en réajustant le nombre de copies ou l’intervalle entre celles-ci. Pour cette grille de base, nous nous en tiendrons à la grille de base de 6 pixels de Teehan + Lax. Réglez l'opacité à 20%.
Et voilà! Notre grille de base est créée. Tout ce qui reste à faire est de verrouiller la couche et nous sommes prêts à partir. Créez un nouveau calque et nommez-le en-tête. Nous organiserons une section différente pour chaque couche au fur et à mesure que les sections apparaissent.
Pour l'en-tête, nous allons avoir trois éléments. Le premier est le logo, le second est la navigation et le troisième est le traitement typographique. Le logo est créé en traçant un rectangle de 140 x 168px avec un début en 15 points avec un rayon de sortie de 48px et un rayon intérieur de 42px. Vous pouvez créer manuellement l'étoile et ajuster le nombre de points en maintenant le bouton de la souris enfoncé et en appuyant sur les touches fléchées haut et bas. Le rayon intérieur peut être ajusté en appuyant sur les touches Ctrl et en faisant glisser la souris avec le bouton toujours enfoncé. Utilisez "League Gothic" à 48px pour le texte du logo.
La navigation est un rectangle de 795px par 48px. Le ruban est créé en ajoutant un point d'ancrage au milieu du bord droit et en faisant glisser le point d'ancrage comme indiqué. Les éléments de navigation sont créés individuellement à l’aide d’une police "Goudy Bookletter" de 16 px. Les liens inactifs reçoivent un style de caractère distinct qui, à ce stade, est une couleur plus claire. Pour répartir équitablement les éléments de navigation, accédez à l'outil d'alignement. Si l'option Distribuer l'espacement n'est pas disponible, cliquez sur la liste déroulante du panneau et affichez les options. Alignez les objets sur un objet clé. Dans ce cas, vous sélectionnerez Accueil et distribuerez l’espacement de 36 pixels..
Le traitement typographique comporte deux éléments avec des rubans. Le premier ruban que nous allons créer en traçant trois rectangles. Pour les deux rectangles de taille égale à l'arrière, ajoutez des points d'ancrage au milieu et faites-les glisser vers l'arrière pour créer un ruban, comme nous l'avons fait précédemment pour la navigation. Sélectionnez les deux formes et réunissez-les à l'aide du panneau Pathfinder et créez-en un tracé composé (Ctrl + 8). Ensuite, sélectionnez le rectangle au milieu et Offset Path par 4 pixels.
Sélectionnez le chemin de décalage et les rubans à l'arrière et soustrayez les chemins. Ajoutez les formes obtenues pour obtenir le résultat souhaité. Utilisez "Autruche Sans" pour ajouter un "Bonjour" à 72px Bold et nous en avons terminé avec ce ruban particulier..
Le deuxième ruban est créé en utilisant la même méthode. Créez un ruban. Puis dupliquez-le et mettez-le en miroir en utilisant l'effet de transformation.
Décalage du chemin et soustrayez le chemin résultant du ruban situé derrière. Utilisez "Autruche Sans" à 40px Bold.
Maintenant que nos rubans sont fabriqués, nous allons procéder au traitement de type. C'est la partie où je tiens moins les mains et espère plus ou moins que les éléments visuels sont assez faciles à suivre. Le texte lui-même est facile à créer sans explication. Les traits varient selon les épaisseurs 1px, 3px et 6px. Les traits circulaires sont obtenus en créant des lignes pointillées de taille 0px avec un intervalle de 12px et un bord arrondi. L’effet étoile répété est créé en créant une seule étoile et en utilisant des copies à effet de transformation toutes les 18 pixels..
Dans la nouvelle couche appelée "À propos de", nous allons créer la section suivante. Verrouille la section précédente créée maintenant. Tout d'abord, nous allons créer l'en-tête et son arrière-plan. Nous allons utiliser le même ruban que dans le logo, la seule différence étant la taille. Créez deux rectangles avec les paramètres suivants. Unissez-les et créez un chemin composé (Ctrl + 8).
Nous allons également convertir cela en un symbole afin de pouvoir le réutiliser pour d'autres sections. Enregistrez la forme que nous venons de créer et enregistrez-la en tant que symbole graphique. Le titre utilise le caractère "Chunkfive" à 21px. Nous enregistrerons cela sous un style de caractère appelé H2 - En-tête de section.
Pour la section à propos, j'ai décidé d'avoir beaucoup de texte et deux images flottantes. Illustrator peut simuler un tel effet. Commencez par créer les deux paragraphes. Le premier paragraphe aura une emphase et sera sauvegardé en tant que style de caractère (accent) alors que le paragraphe mériterait que son propre style de caractère soit réutilisé dans le dessin..
Créez un rectangle de 304 x 247px au-dessus du texte que nous venons de créer. Sélectionnez Objet> Retour à la ligne> Créer pour créer une image flottante. Nous allons ajuster la marge à 24 px en allant dans les options d'habillage de texte via Objet> Habillage de texte> Options d'habillage de texte.
Répétez ces étapes pour une autre image et placez-la comme indiqué..
Comme nous avons déjà créé le symbole, nous allons simplement le faire glisser dans cette nouvelle section (Calque: Portefeuille), taper le texte et appliquer le style de caractère H2 - En-tête de section. Pour l’élément de portefeuille, faites glisser un rectangle et créez le texte comme indiqué..
Une fois l’élément de portefeuille créé, nous en ferons un symbole pour le réutiliser. Créez un symbole graphique d'élément de portefeuille, faites glisser deux de ses occurrences et répartissez-les uniformément de 64 pixels..
Nous ne faisons que répéter les mêmes choses. La citation de bloc est flottante en utilisant Text Wrap.
Les règles horizontales sont créées dans Effet> Transformer et déformer> Transformer à un intervalle de 30 pixels avec le nombre de copies correspondant..
Saisissez les icônes sociales de la jonction de la conception graphique pour les boutons de médias sociaux.
Pour le pied de page, nous allons copier le logo de l'en-tête et le coller ici. Nous ajouterons également le menu du site et la notice de copyright.
Notre structure en fil de fer devrait maintenant ressembler à ceci. Vous pouvez cliquer dessus pour avoir un aperçu plus grand.
Et maintenant la partie amusante. Nous allons commencer à travailler sur l'apparence, en commençant par l'arrière-plan. Créez un nouveau calque au-dessus des repères et sous tous les autres calques. Tracez un rectangle pour recouvrir l’ensemble de la planche d’art à l’aide de RVB (247, 94, 80). Pour les textures, nous allons créer deux calques de remplissage distincts, tous deux de couleur RVB (0,0,0). Utilisez Texturizer sous Effet> Texture> Texturizer pour appliquer un effet de grain et un papier avec une opacité de 5%, la superposition en mode Fusion et la superposition à 10% respectivement. Verrouillez ce calque d'arrière-plan pour ne pas le déplacer accidentellement (Illustrator émet un tonnerre important sur l'ordinateur, sinon à la suite d'un mouvement accidentel).
Créez un nouveau groupe de nuances dans le panneau de nuances et ajoutez des couleurs avec les paramètres suivants: RVB (247,94,80); RVB (233,200,97); RVB (232 223 156); RVB (145, 192, 158); RVB (125, 119, 105). Illustrator comporte un panneau de guides de couleurs qui donne des options de couleur telles que Teintes / Nuances, Chaud / Froid et Vif / Muted
Appliquez une rugosité relative à l'en-tête à une taille relative de 0,05% et définissez un détail de 100. Réglez le calque de remplissage sur RVB (63,60,53). Sous ce remplissage, créez un autre remplissage RVB (247, 94, 80) et appliquez-lui un effet de transformation (Effet> Déformer et transformer> Transformer) avec les paramètres suivants..
Pour le dernier calque de remplissage, nous allons d’abord créer un motif. Effectuez un zoom avant à 6 400% et créez un rectangle blanc de 4 x 4. Créez des carrés de 1 x 1 px sur la diagonale. Avec un motif de pixels créé, il vous suffit de le sélectionner entièrement et de le faire glisser vers le panneau Nuancier. Vous pourrez maintenant l'utiliser. Créez un nouveau calque de remplissage, appliquez le motif que vous venez de créer et définissez l'opacité sur 40% et le mode de fusion sur Multiplier. Appliquez également l’effet Transform à 4px Horizontal et 6px Vertical. Enfin, enregistrez ceci en tant que style graphique dans le panneau graphique..
Utilisez le style graphique que nous venons de créer et appliquez-le à la navigation et aux rubans du texte principal. Pour le logo, accédez à Effet> Styliser> Coins ronds et définissez le rayon sur 5 px. Définissez un contour RVB coloré de contour 1px (63,60,53), puis appliquez un effet de transformation qui réduit le contour à 93% pour un total de 3 copies. Créez ensuite le calque de remplissage de couleur RVB (237, 211, 129) avec une ombre portée de 2 pixels (décalage X et Y) définie sur 8% en mode de gravure sur couleur..
Pour cet effet, définissez le calque de remplissage sur RVB (233,200,97). Créez un calque de remplissage en dessous de celui-ci en RVB (55, 52, 46). Appliquez une transformation horizontale et verticale de 1 px à ce calque et créez trois copies (ce qui crée un effet de texte en 3D similaire au déplacement de la totalité du texte après la duplication dans Photoshop). Nous allons utiliser une version 2 x 2 px du motif créé précédemment. Créez et faites glisser ce motif dans le panneau Nuancier et appliquez-le au nouveau calque de remplissage ci-dessous. Réglez-le sur une opacité de 50% et transformez-le de 6 pixels horizontalement et verticalement. Enregistrer ceci en tant que style graphique.
Pour le texte foncé normal, nous avons appliqué un effet Roughen d’une taille relative de 2% et avec un détail de 7. Les différents traits sont créés à l’aide du motif créé au début ou en utilisant un rugueux d’une taille relative de 0,1% et un jeu de détails. à 100. Voici à quoi ressemble notre traitement typographique.
Pour les traits, j’ai utilisé des combinaisons et des variations de motifs précédemment utilisées avec l’effet Roughen.
C’est maintenant une simple question de réapplication des styles que nous avons créés précédemment. C’est mieux de le comprendre visuellement, c’est pourquoi je vous suggère de regarder les images. Sélectionnez le texte et vous verrez le style de caractère approprié apparaître. C’est là que notre effort initial porte ses fruits. Modifiez le texte que vous avez sélectionné et accédez aux options du panneau, puis sélectionnez Redéfinir le style de caractère. Cela s'appliquera à tous les styles de caractère utilisés dans le document.
Le dernier style d’apparence que nous allons créer est l’image fictive. Réglez le trait sur 4px à l'intérieur avec la couleur blanche. Appliquez une ombre portée de 2 px (décalage X et Y) et définissez le mode de fusion et l'opacité sur Multiplier sur 35%.
Continuez à travailler. Vous devrez double-cliquer sur le symbole pour pouvoir le modifier. Appliquez les styles de caractère et d’apparence que nous avons appris à réutiliser à l'infini. Une fois satisfait du résultat, appuyez sur Echap pour quitter le mode d'isolation et vous verrez l'effet s'appliquer aux autres éléments du portefeuille. (Une autre méthode aurait été de rompre le lien avec le symbole, de modifier le style en fonction du contenu de votre cœur et de redéfinir le symbole par la suite.)
La patience, la persévérance, le travail acharné et la répétition donnent une image plus claire.
Et voici le résultat final. J'espère que vous avez trouvé le didacticiel utile et que vous êtes en pleine effervescence. Vous pouvez essayer de travailler sur les versions Tablet et Mobile, ainsi que d’ajouter dans Illustration et, peut-être, plus de profondeur et d’expérimentation avec la mise en page et la coloration. J'ai également ajouté des icônes de médias sociaux dans la barre de navigation. J'aimerais voir ce que vous faites comme résultat, alors partagez.
Accentsconagua