Share
Dans ce didacticiel, vous allez créer un site Web écologique de style organique avec Adobe Illustrator. Ce didacticiel explique comment créer des illustrations vectorielles illustratives et l’appliquer aux présentations de conception Web. Commençons!
Il y a quelques temps, j'ai écrit un didacticiel intitulé Utiliser Adobe Illustrator pour créer une mise en page de site Web propre, qui a suscité beaucoup d'intérêt et suscité une vive opposition. Ce tutoriel était destiné aux personnes débutant dans Illustrator. Il a finalement fait la une de Digg..
Pour bien commencer les choses, laissez-moi prendre un moment pour souligner l'évidence… cette conception de site Web peut également être créée dans Photoshop! Cependant, l'objectif de ce didacticiel avancé est d'expliquer comment utiliser Adobe Illustrator pour concevoir un site Web. Permettez-moi également de distinguer le design du codage frontal. Bien que je vais vous montrer comment concevoir le site Web dans Illustrator, vous pouvez aller plus loin (avec l'utilisation de normes XTHML / CSS) pour rendre la fonction de conception.
Sans plus tarder, voici comment créer un site Web écologique dans Adobe Illustrator..
Vous pouvez trouver les fichiers source dans le répertoire intitulé «source» qui figurait dans les fichiers que vous avez téléchargés. Vous voudrez peut-être les parcourir brièvement avant de commencer..
Créez un nouveau document avec une largeur de 1160px et une hauteur de votre choix. Définissez le mode couleur sur RVB. Vous pouvez laisser les effets raster à une vitesse maximale de 300 ppi, car notre conception n’utilise pas beaucoup les effets raster..
Je préfère travailler avec un navigateur en arrière-plan pour avoir une meilleure idée de ce à quoi ressemblera le dessin final une fois terminé..
Les proportions des écrans du navigateur ne sont pas les mêmes que celles du document 1160px. Il vous suffit donc d'utiliser l'outil Sélection directe (A), de cliquer et de faire glisser la souris sur la zone surlignée en rouge. Puis, en utilisant à nouveau l'outil de sélection directe (sans rien désélectionner), cliquez sur l'un des points sélectionnés et faites-le glisser vers la ligne noire à droite, qui correspond à la taille de votre document..
Un site Web d’une largeur inférieure ou égale à 960 px fonctionnera bien pour la majorité des visiteurs d’un site Web. Notre document est configuré sur une largeur de 1160px pour compenser le fait que les personnes ayant un moniteur plus grand puissent ouvrir davantage la fenêtre du navigateur. L'espace entre les guides verticaux bleus mesure 960 pixels et représente la zone dans laquelle votre contenu principal doit rester entre les deux. Tout ce qui est en dehors de ces guides peut être hors de vue pour certains visiteurs.
Cette étape est essentielle pour créer un site lisible. Assurez-vous de savoir à quoi ressemble le site Web avec un zoom de 100%. Vous n'avez pas à travailler à un zoom de 100%, mais vous devez savoir à quoi ressemble le site Web lorsqu'il est affiché à sa taille réelle (100%). Pour changer le zoom, vous pouvez cliquer dans le coin inférieur gauche de la fenêtre de votre document..
La première étape consiste à créer les collines. Dessinez une ellipse à l'aide de l'outil Ellipse (L).
Dupliquer l'ellipse et les superposer.
Fusionnez les deux formes dans Pathfinder à l’aide de l’option Soustraire de la zone de forme. Dupliquez la forme, réduisez-la un peu et déplacez-la vers la droite et vers le bas, comme indiqué ci-dessous.
Sélectionnez les deux formes et sélectionnez Objet> Fusion> Options de fusion. Sélectionnez Étapes spécifiées dans le menu déroulant, entrez une valeur et cliquez sur OK..
Allez à Objet> Mélanger> Faire. Vous pouvez ajuster le fondu si vous n'êtes pas satisfait du résultat en allant dans Objet> Fondu> Options de fondu…
Allez à Objet> Distorsion d'enveloppe> Faire avec Warp… Sélectionnez Arc dans le menu déroulant et modifiez les curseurs pour créer un arc agréable. Cliquez sur OK lorsque vous avez terminé.
Afin de manipuler davantage les formes, nous devons les développer en allant dans Objet> Développer. Cliquez sur OK.
Maintenant que votre forme est élargie, vous pouvez la faire ressembler davantage à une colline. En utilisant l'outil Plume (P), dessinez une autre forme qui suit le contour des bandes..
Commencez par utiliser Pathfinder pour éliminer les zones supplémentaires des collines. Superposez les deux formes l'une sur l'autre et donnez-leur un dégradé luxuriant.
Placez la colline de manière à chevaucher légèrement le guide bleu. Cela suggérera que les collines continuent plus à gauche lorsque le site Web est visionné à une taille de navigateur moyenne..
Faire d'autres collines en utilisant la même technique. Expérimentez avec l'ajustement de l'espacement et de la taille des formes et de l'arc pour créer un peu de variété.
Dessinez une forme d'arc simple qui deviendra une route sur les collines. Donnez-lui aussi un subtil dégradé de gris.
Ci-dessous, j'ai modifié la bascule horizontale des collines pour donner une petite variation à la pièce. Notez également que les collines à gauche et à droite s'étendent juste après le guide bleu..
Ensuite, nous allons créer le ciel. En fin de compte, ceci est configuré pour que, lorsque codé avec XHTML / CSS, le ciel se répète indéfiniment à gauche et à droite, quelle que soit la taille de l'écran du navigateur..
Créez un dégradé de couleur claire et placez-le derrière les collines.
Je trouve parfois plus efficace de peaufiner un dégradé en allant dans Édition> Couleurs> Recolorier l’illustration… Vous pouvez maintenant sélectionner chaque couleur (cercle du haut) et déplacer le curseur pour obtenir la couleur que vous recherchez. (cercle du bas). Les modifications que vous apportez sont visibles en temps réel avant d'appuyer sur OK. Assurez-vous donc que la boîte de dialogue Couleurs vivantes ne couvre pas l'objet à recolorer..
Ensuite, nous ajouterons de petits détails aux collines et aux routes. J'ai décidé de faire des voitures en blocs. Décomposées dans leur forme la plus simple, les voitures sont très faciles à créer. Commencez par dessiner la forme de base que votre voiture prendra. Utilisez cette forme comme guide.
En fonction du look recherché, il se peut que vous ne deviez pas tout rendre parfaitement symétrique. Les voitures que je crée sont un peu fantaisistes, donc les formes ont une qualité arbitraire. Ensuite, dessinez dans le toit.
Dessinez les capots, pare-brise et pare-chocs.
Dessine le côté de la voiture.
Dessinez les fenêtres et quelques ellipses pour les roues. C'est tout!
Dupliquez la voiture et changez la couleur pour la mélanger. Le fait que la voiture soit voûtée lui permet également de s'intégrer parfaitement à la route voûtée..
En utilisant l'outil Plume, dessinez une forme d'oiseau de base. Dupliquer et retourner la même forme pour créer rapidement un volume d'oiseaux.
Nous allons créer les nuages dans le ciel en dessinant d'abord un rectangle à l'aide de l'outil Rectangle (M)..
À l'aide de l'outil de déformation (Maj + R), déformez le rectangle jusqu'à ce qu'il ressemble davantage à un nuage. Il sera peut-être plus facile de déformer davantage le rectangle si vous ajustez la taille de la zone de déformation. Pour ce faire, double-cliquez sur l'outil ou maintenez la touche Option + Maj enfoncée, puis cliquez et faites glisser pour modifier la taille..
Une fois que vous avez fini de définir la forme générale du nuage, vous remarquerez peut-être que le fait de déformer un objet tend à lui donner une abondance de points supplémentaires. Ces points supplémentaires rendent la forme plus complexe que nécessaire. Simplifiez le nombre de points de la forme en accédant à Objet> Chemin> Simplifier. Ajustez votre précision de courbe jusqu'à ce que la forme devienne plus lisse.
À l'aide de l'outil de sélection directe, vous pouvez ajuster les points et les nœuds pour refléter plus précisément toute forme que vous essayez de créer..
Utilisez l'outil Crayon (N) pour dessiner une forme de montagne aléatoire. En raison de la nature continue du dessin avec l'outil Crayon, il est parfois plus difficile de fermer le tracé lorsque vous avez fini de dessiner la forme. Pour fermer facilement un chemin, maintenez la touche Option enfoncée avant de terminer..
Les objets plus éloignés du spectateur n'ont pas besoin d'autant de détails. Construire des bâtiments en fusionnant de simples rectangles à l’aide de Pathfinder.
Arc le bâtiment en allant dans Objet> Distorsion d'enveloppe> Fabriquer avec Warp… Sélectionnez Arc dans le menu déroulant et entrez les valeurs qui vous conviennent.
Voici à quoi devrait ressembler votre oeuvre d'art maintenant. Comme vous pouvez le constater, plus les objets s’éloignent, plus ils deviennent légers. Utilisez ces connaissances lors de la création de votre mise en page. Cela aide vraiment à donner au design une qualité naturelle.
À l’aide de Star Tool, tracez un triangle. Pour ajuster le nombre de points d’une étoile, utilisez les flèches haut et bas pendant que vous dessinez la forme. Pendant que vous dessinez la forme, une fois qu’elle a 3 points, maintenez la touche Maj enfoncée pour que la base du triangle soit parfaitement horizontale..
Dessinez une ellipse et fusionnez-la avec le bord inférieur du triangle.
Donne à la forme un dégradé vert.
Utilisez des petits triangles à l’intérieur de l’arbre principal pour lui donner un peu plus de détails. Utilisez un rectangle pour la base de l'arbre.
Dupliquer et faire varier la taille des arbres pour créer une forêt.
Ajustez l'opacité d'une ellipse pour créer une ombre stylisée pour chaque arbre.
Encore une fois, en utilisant l'outil Crayon, dessinez une forme organique pour créer un rocher..
Désélectionnez la forme principale de la roche et dessinez d’autres formes anormales qui deviendront de la mousse et des ombres. Utilisez le Pathfinder pour diviser les formes et éliminer les restes inutiles.
C'est ce que vous devriez être laissé avec.
Placez les roches au hasard dans le dessin et donnez-leur une ombre comme vous l'avez fait pour les arbres.
Créer une forme de feuille à l'aide de l'outil Plume.
Donner à la feuille des variations de couleur ajoutera à son réalisme. En utilisant l’outil Crayon (N), dessinez une forme qui ressemble au mien ci-dessous. Utilisez la palette Pathfinder et divisez la feuille en sections. Supprimer les formes restantes qui ne font pas partie de la feuille.
Sélectionnez chaque section de la feuille et modifiez-la subtilement pour simuler la lumière frappant chaque partie de la feuille..
Dessine une ellipse très étroite qui deviendra la tige de la feuille.
Utilisez l'outil de déformation pour façonner l'ellipse en une apparence plus naturelle..
Donnez aux feuilles et aux tiges un changement de couleur pour rompre la monotonie des feuilles. Allez dans Edition> Couleurs> Ajuster la balance des couleurs… puis déplacez les curseurs à votre guise.
Placez les feuilles dans une grappe dans le coin de la conception.
Ajoutez le titre des sites à la section supérieure. Si votre titre doit être écrit avec une police standard comme Helvetica, cette étape est pratiquement terminée. Si votre titre n'utilise pas de police système, n'hésitez pas à l'améliorer avec des effets comme une ombre portée ou un bord biseauté, par exemple..
Voici à quoi ressemble l'en-tête complet du site. Observez comment le contenu principal est conservé entre les guides bleus de 960 pixels de large.
Créez la section de contenu principal du site. J'ai décidé de créer un thème respectueux de la Terre afin que le bleu soit un choix approprié pour cette conception..
En utilisant l'outil Crayon, créez une grande forme de glaçon.
Donnez à la forme de glaçon une lueur intérieure pour lui ajouter de la profondeur en allant dans Effet> Styliser> Inner Glow… Dessinez des formes similaires de glaçons plus petites et placez-les sous la forme la plus grande. Vous n'avez pas à donner à ces autres formes des lueurs intérieures.
Utilisez l'outil Crayon pour créer des petites roches pour ajouter de l'intérêt à la cascade.
Nous utiliserons une brosse à dispersion pour former une masse de bulles. Dessinez une ellipse et faites-la glisser dans la palette Formes. Sélectionnez New Scatter Brush et appuyez sur OK. Si votre palette de styles n'est pas visible, sélectionnez Fenêtre> Formes..
Définissez la taille, l’espacement et le nuage sur aléatoire et réglez les curseurs. Il est important d’ajuster les triangles noir et gris pour que vos formes soient suffisamment aléatoires..
Lorsque l'outil Plume est sélectionné, cliquez sur le pinceau à dispersion que vous venez de créer et tracez une ligne. Modifiez l'épaisseur de la ligne pour faire varier la taille des cercles ou double-cliquez sur la brosse à dispersion pour obtenir plus d'options..
Pour éditer davantage les cercles, développez simplement la ligne en allant dans Objet> Développer l’apparence.
Utilisez l'outil Plume pour dessiner des formes de poisson.
Placez le rocher que vous avez dessiné plus tôt au bas de la page pour créer un pied de page.
Utilisez le pinceau à dispersion que vous avez utilisé pour les bulles pour créer une texture pour le pied de page. Pour que la texture reste confinée dans la zone rectangulaire du pied de page, tracez simplement un rectangle sur la forme de la bulle, sélectionnez les bulles et le rectangle, puis appuyez sur Commande + 7 pour créer un masque. Ou bien, utilisez les zones de forme Intersection de Pathfinder pour éliminer les bulles extérieures au rectangle..
Ma navigation peut facilement être reproduite en utilisant CSS. Gardez cela à l'esprit lorsque vous créez le vôtre également. Tout texte utilisant une police qui n'est pas une police système devra être une image. Il est maintenant d'usage et préférable d'utiliser CSS autant que possible et non les images.
Créer des éléments pouvant améliorer la mise en page à l'aide de formes simples.
J'ai décidé que je voulais que l'image soit insérée dans le texte. Pour ce faire, sélectionnez l'élément qui sera inséré et accédez à Objet> Renvoi à la ligne> Texte. Retournez à Objet> Habillage du texte> Options d'habillage du texte pour ajuster l'espace entre les éléments et le texte..
Créez les champs de saisie de formulaire à l’aide d’un rectangle, en arrondissant les angles, en lui donnant un trait extérieur et enfin un remplissage dégradé subtil. Tous ces effets sont facilement modifiables en double-cliquant sur chaque effet dans la palette Apparence..
Créez un bouton en dessinant à nouveau un rectangle, en lui donnant un léger dégradé et une ombre portée..
Ajoutez d'autres éléments pour compléter votre conception.
Voici à quoi ressemble le design final. Notez que toutes les informations critiques sont conservées dans les guides bleus. Le pied de page sera également répété en utilisant CSS.
Vous venez d'apprendre à créer un site Web écologique dans Adobe Illustrator. Les conceptions de sites Web de style vecteur peuvent différencier un site en lui donnant un aspect unique. Commencez avec votre propre design et voyez ce que vous pouvez créer! L'image finale est ci-dessous ou vous pouvez voir une version plus grande ici.
Accentsconagua