Share
Ce que vous allez créerDans ce tutoriel, vous allez apprendre à créer un fond d'écran ultra-long pour le défilement d'un site Web! De plus, dans un tutoriel de suivi, vous aurez l'occasion de le voir en action et de découvrir comment le faire fonctionner! Pour cette partie du didacticiel, nous utiliserons Adobe Illustrator, ses formes et fonctions de base, pour créer une composition fantastique avec divers éléments, liés au même sujet..
À la fin de cette leçon, vous pourrez utiliser vos nouvelles techniques non seulement pour créer un arrière-plan de site Web, mais également pour tout autre type de composition ou d'illustration de style plat, tels que des arrière-plans transparents pour des jeux, des paysages urbains à plat, et plein d'autres. Parcourez le marché Envato pour trouver une inspiration sans faille et préparez-vous à suivre ce processus passionnant!
Commençons à faire notre première planète! Prendre le Outil Ellipse (L) et maintenir Décalage faire un cercle magenta foncé 365 x 365 px Taille.
Basculer vers le Outil Rectangle (M) et faire une bande rose de 450 x 30 px Taille.
Gardez la bande sélectionnée, appuyez sur Entrer ouvrir le Bouge toi fenêtre d'options. Met le Horizontal valeur à 0 px et Verticale valeur à 30 px.
presse Contrôle-D plusieurs fois pour répéter notre dernière action et couvrir tout le cercle avec des rayures.
Maintenant, sélectionnez des bandes alternatives (je les ai marquées avec une couleur sombre dans la capture d'écran ci-dessous pour les clarifier) et raccourcissez les bandes sélectionnées.
Maintenant, sélectionnez toutes les bandes et Unir eux dans le Éclaireur pour les fusionner en une seule forme. Avant de faire cela, vous pouvez faire varier la longueur de certaines bandes en les rendant plus courtes ou plus longues. Cependant, vous pouvez aussi le faire après Unissant les rayures, mais dans ce cas, vous devrez utiliser le Outil de sélection directe (A), sélectionner les paires de points d'ancrage et les déplacer à gauche ou à droite.
Lorsque vous êtes satisfait de la position des rayures, sélectionnez tout avec les Outil de sélection directe (A) et utiliser le Coins vivants fonction pour rendre les coins complètement arrondis en faisant glisser les minuscules marqueurs de cercle situés à côté de chaque coin.
Cette fonctionnalité est disponible uniquement dans Adobe Illustrator CC, mais si vous utilisez des versions antérieures du programme, essayez de jouer avec Effet> Styliser> Coins ronds pour obtenir un effet similaire.
Copie notre forme et Coller à l'arrière (Control-C> Control-B). Déplacez un peu la nouvelle forme vers la gauche en appuyant sur Décalage et le Flèche gauche touche quelques fois. Changez la longueur de certaines rayures à l'aide du bouton Outil de sélection directe (A) pour rendre la copie un peu différente. Rendre la nouvelle forme un peu plus sombre que la copie supérieure.
Voyons maintenant comment nous pouvons adapter les formes. Copier (Control-C> Control-F) le cercle du bas et Apporter il à l'avant (Shift-Control-]). Tout sélectionner,clique le bouton droit de la souris et Faire masque d'écrêtage.
Génial! Maintenant, nous avons tout caché dans le cercle du haut! Et nous pouvons toujours éditer le contenu de la Masque d'écrêtage par double clic l'objet à entrer Mode d'isolation. Par exemple, vous pouvez ajouter une autre forme à l'intérieur de la planète, la rendant un peu plus sombre..
Créons une autre planète de plus petite taille. Faire un 130 x 130 px cercle turquoise. Prendre le Outil de segment de ligne (\) et maintenir Décalage faire une courte bande horizontale. Vous pouvez éditer le Accident vasculaire cérébral paramètres à partir du panneau de commande situé en haut ou du Accident vasculaire cérébral panneau (Fenêtre> Course). Faire le Accident vasculaire cérébral couleur un peu plus claire que la couleur de la planète. Met le Poids à 2 pt et le Profil à Profil de largeur 1, faire les bouts du trait pointu.
Ajouter plus de rayures, en variant leur longueur. Dupliquer le cercle et Apporter il à l'avant (Shift-Control-]). Tout sélectionner et Faire masque d'écrêtage cacher les traits dans le cercle.
Créez une lune simple en faisant un 80 x 80 px cercle et continuez d’utiliser le Outil Ellipse (L) couvrir la lune avec des ovales rose foncé, représentant des cratères.
Créons notre dernière planète en la rendant un peu plus détaillée. Commencez par faire un 220 x 220 px cercle orange.
Utilisez le Outil Rectangle (M) faire une bande orange clair sur le cercle. Tenir Alt-Shift et faites-le glisser vers le bas, faites une copie et fixez-la directement à la première bande. Rendre la nouvelle bande un peu plus légère.
Continuez à ajouter des rayures de la même manière et faites varier les couleurs. Vous pouvez également laisser quelques lacunes pour rendre visible la couleur de la planète. Ce que vous pouvez aussi essayer, c’est de vous armer du Outil Pipette (I), en portant Décalage et en choisissant les couleurs directement depuis ma capture d'écran. Adobe Illustrator vous permet de choisir les couleurs de n’importe quelle partie de votre écran, même en dehors de la fenêtre du programme..
Utilisez le Masque d'écrêtage masquer les rayures à l'intérieur du cercle.
Ajoutons maintenant un anneau à notre planète rayée, semblable aux anneaux de Saturne. Utilisez le Outil Ellipse (L) faire deux ellipses écrasées au-dessus de la planète. Je fais le haut ovale noir pour le rendre visible.
Sélectionnez les ovales avec la planète et cliquez à nouveau sur la planète pour en faire un Objet clé (vous remarquerez une sélection plus épaisse autour de l'objet). Dirigez-vous vers le Aligner panneau et cliquez Centre d'alignement horizontal pour que les objets soient parfaitement centrés.
Sélectionnez les deux formes et utilisez le Minus Front fonction de Éclaireur découper le haut ovale en faisant un trou.
À présent dupliquer la base de cercle de cercle et Apporter il à l'avant (Shift-Control-]), et alors Renvoyer (Contrôle- [) à une position, plaçant le cercle juste sous l'anneau de notre planète.
Sélectionnez à la fois le cercle et la bague et prenez la Outil de création de forme (Maj-M). Tenir Alt et cliquez sur la partie de l'anneau qui chevauche le cercle afin de le supprimer. Comme vous pouvez le constater, nous avons maintenant un espace vide et deux morceaux du cercle dont nous n'avons plus besoin.
Supprimer les morceaux inutiles et ici nous l'avons! Notre planète semblable à Saturne est prête!
Faisons quelques types de nuages pour différentes couches d’atmosphère.
Utilisez le Outil Ellipse (L) faire un 100 x 100 px cercle bleu clair. Ajouter un deuxième cercle de 55 x 55 px sur la droite. Enfin, attachez quelques cercles supplémentaires sur la gauche, en faisant varier les tailles et en gonflant le nuage..
Sélectionnez tous les cercles et prenez la Outil Gomme (Maj-E). Tenir Alt et faites glisser la sélection sur le bas du nuage pour l'effacer.
finalement, Unir tous les cercles du Éclaireur et mettre le Opacité de la forme à 50% dans le Transparence panneau.
Nous allons maintenant créer un élément environnemental simple qui représentera une montagne ou un sommet stylisé. Utilisez le Outil Rectangle (M) faire un 95 x 410 px bande verticale.
Remplissons-le avec un dégradé linéaire allant du bleu foncé au bleu et au bleu clair. Met le Opacité du curseur bleu clair à 0% dans le Pente panneau, le rendant transparent. Utilisez le Outil de dégradé (G) placer le dégradé verticalement.
Sélectionnez le haut du rectangle avec le bouton Outil de sélection directe (A) et utiliser le Coins vivants fonction pour le rendre complètement arrondi.
Maintenant, nous allons faire un autre type de nuage.
Faire un 220 x 25 px rectangle turquoise. Ajoutez un petit rectangle sur le dessus, en le fixant bien au premier. Ajoutez ensuite un troisième rectangle par-dessus le second, en le faisant grand. Unir toutes les rayures dans le Éclaireur.
Rendre tous les coins complètement arrondis, en utilisant la Coins vivants fonctionnalité.
Ajoutez quelques nuages en plus, en modifiant leurs formes. Dirigez-vous vers le Transparence panneau et définir le Opacité de vos nuages à 50%.
Tout d’abord, définissons la taille de notre Artboard sur 800 x 4400 px, en utilisant le Outil de planche graphique (Shift-O). Vous pouvez sélectionner cet instrument et définir la taille dans le panneau de configuration situé en haut..
Utilisez le Outil Rectangle (M) faire une forme de la même taille (800 x 4400 px) et Aligner il au tableau.
Remplissons-le avec un dégradé linéaire vertical en organisant les couleurs comme indiqué dans la capture d'écran ci-dessous: passage du violet foncé au bleu et au lilas en bas.
Commençons par ajouter nos objets à partir du haut. Placez les planètes sur la partie sombre de la toile en combinant les éléments les uns avec les autres. Puis commencez à ajouter les nuages, en variant leurs tailles et leurs positions.
Descendez et utilisez le sommet stylisé que nous avons créé pour former un groupe de sommets. Faites plusieurs copies et placez-les l'une à côté de l'autre et l'une en face de l'autre, en augmentant les unes et les autres. Les parties inférieures des sommets se marient bien avec l'arrière-plan, car nous les avons rendues semi-transparentes..
Ajoutons encore quelques formes pour l’atmosphère. Créez deux grands ovales, en utilisant le Outil Ellipse (L), et faites-les se chevaucher, comme illustré dans la capture d'écran ci-dessous. Sélectionnez les deux formes et utilisez le Minus Front fonction de Éclaireur pour couper les formes, de sorte qu'il ne reste que la forme en croissant.
Met le Opacité de la forme à 50% et rendre la couleur un peu plus claire, si nécessaire, pour rendre la forme semi-transparente et aérienne. Ajouter un deuxième croissant sur le dessus, en changeant légèrement sa couleur.
La partie inférieure de notre fond reste vide, remplissons-la donc de nouveaux éléments, créant ainsi une forêt épaisse et le sol.
Utilisez le Outil Ellipse (L) faire un groupe de cercles, en variant leurs tailles et en les faisant se chevaucher. Unir tous les cercles du Éclaireur et remplissez la forme fusionnée avec un dégradé linéaire vertical allant du lilas en bas au bleu en haut.
Maintenant, nous allons façonner le tronc d'arbre. Utilisez le Outil Rectangle (M) faire un 75 x 1180 px forme verticale étroite pour le tronc. Remplissez la forme avec une couleur violet foncé pour créer un contraste au-dessus du fond clair. Prendre le Outil de sélection directe (A) et sélectionnez le point d'ancrage en haut à gauche. presse Entrer ouvrir le Bouge toi fenêtre Options et définissez le Horizontal valeur à 20 px, Verticale valeur à 0 px. Cliquez sur D'accord, déplaçant ainsi le point 20 px à droite. Répétez la même chose pour le bon point d'ancrage, en le déplaçant dans la direction opposée.
Ajoutons également quelques branches simples à notre arbre. Armez-vous du Outil d'arc (vous pouvez le trouver dans le même menu déroulant que le Outil de segment de ligne (\)). Faire une ligne courbe et définir le Accident vasculaire cérébral colore à la même teinte violet foncé que celle du tronc (utilisez le Outil Pipette (I) et maintenir Décalage choisir la couleur). Dirigez-vous vers le Accident vasculaire cérébral panneau et définir le Poids valeur à 20 pt et Casquette et Coin en position médiane, en arrondissant les pointes des branches.
Dupliquez notre tronc d’arbre et modifiez la position des branches pour rendre la composition polyvalente. Placez les troncs sous la cime de l’arbuste en appuyant sur Contrôle-[.
Ajoutons une dimension à nos arbres. Créez un autre groupe de cercles, en les remplissant de couleur violette (un peu plus claire que les troncs). Unir les cercles dans le Éclaireur panneau et appuyez sur Contrôle-[ quelques fois à Envoyer la forme En arrière, sous les coffres.
Créez plus de copies des troncs d’arbres et rendez-les plus légers. Placez les copies sous les troncs les plus sombres, créant un effet aérien et ajoutant de la profondeur à notre forêt..
Ajoutez des buissons pourpres au bas des troncs, en les formant à partir des cercles de la même manière que nous l’avons fait avec les cimes des arbres..
Ajoutons maintenant un motif pour former la partie inférieure de notre composition. Utilisez le Outil Rectangle (M) faire une forme de 800 px largeur (la même largeur que nous avons pour notre Artboard). Sinon, vous pouvez simplement dupliquer le rectangle d'arrière-plan, le déplacer par-dessus et le réduire, réduisant ainsi sa hauteur. Remplissez-le avec la même couleur lilas que les troncs d'arrière-plan, pour que les formes se fondent visuellement.
Maintenant, prenez le Outil de courbure (Shift- ') et plions un peu le bord supérieur du sol en faisant glisser sa moitié gauche vers le bas. Faire une vague lisse en tirant la moitié opposée du bord supérieur vers le haut.
Ajoutez une autre couche de terre en la remplissant de la même teinte de violette que celle utilisée pour les troncs du milieu, en faisant se fondre les formes. Pliez la forme en utilisant le Outil de courbure (Shift- ').
Terminez avec le sol en ajoutant la couche la plus sombre sur le dessus, en la pliant, et en utilisant le Outil Ellipse (L) pour chatouiller de minuscules ovales sur le sol, ce qui le rend un peu plus texturé.
Maintenant que tous les objets sont placés et disposés, voyons comment nous pouvons cacher les morceaux qui se croisent sur les bords de l'Artboard..
Dupliquer (Control-C> Control-F) le long rectangle de fond et Apporter il à l'avant (Shift-Control-]). Maintenant, sélectionnez tout, cliquez sur le bouton bouton droit de la souris, et Faire masque d'écrêtage. Voila! Maintenant, tous les objets sont cachés dans un grand Masque d'écrêtage.
Pour rendre votre flux de travail plus rapide, plus simple et plus pratique, vous pouvez également regrouper nos objets en plusieurs groupes (un groupe de planètes, un groupe de nuages, des pics, des arbres, etc.) et utiliser des outils distincts. Masques d'écrêtage pour chaque groupe.
Vous pouvez continuer à ajouter des éléments à l'intérieur du masque afin de rendre l'arrière-plan plus détaillé et complexe. Par exemple, j'ai ajouté des étoiles, ajoutant de la profondeur au haut de l'arrière-plan.
Maintenant que notre arrière-plan est prêt, créons plusieurs objets qui parcourront l'arrière-plan lorsque nous le ferons défiler. Ce sont les éléments clés que nous allons déplacer un à un du fond de l’arrière-plan..
Nous allons commencer par faire une soucoupe volante. Utilisez le Outil Ellipse (L) faire un 200 x 200 px cercle turquoise. Faire un ovale horizontal magenta et Envoyer il En arrière en appuyant Contrôle-[.
Utilisez le Outil de segment de ligne (\) et maintenir Décalage faire une bande horizontale à travers le cercle. Sélectionnez le cercle et la ligne et utilisez les touches Diviser fonction de Éclaireur diviser le cercle. Sélectionnez la moitié inférieure et Envoyer à l'arrière (Shift-Control- [), sous la soucoupe.
Utilisez le Outil de courbure (Shift- ') plier le bord inférieur du cercle supérieur en le rendant légèrement incurvé.
Ajoutons maintenant une dimension à notre ovni et décorons-le avec des détails supplémentaires. Copie l'ovale magenta et Coller à l'arrière (Control-C> Control-B). Rendre la copie inférieure un peu plus sombre et faites glisser sa face inférieure vers le bas à l’aide des touches Outil de sélection (V), rendre la forme un peu plus grande.
Dupliquer (Control-C> Control-B) la moitié inférieure du cercle turquoise et rétrécissez un peu la copie supérieure en faisant glisser son bord inférieur vers le haut. Remplissez la copie inférieure avec la couleur jaune, en faisant une légère nuance.
Utilisez le Outil Ellipse (L) faire un groupe d'ampoules jaunes le long du bord de la soucoupe.
Terminons avec notre OVNI en ajoutant un reflet brillant à sa surface de verre. Copie la moitié supérieure du cercle turquoise et Coller deux fois devant (Contrôle-C> Contrôle-F> Contrôle-F). Déplacez un peu la copie supérieure vers la droite en utilisant le bouton Flèche droite touche sur ton clavier.
Sélectionnez la copie du haut et celle du dessous, puis cliquez sur Minus Front dans le Éclaireur panneau pour couper les formes, ne laissant qu'une bande étroite en forme de croissant sur le bord gauche de l'OVNI. Remplissez la forme créée avec la couleur turquoise clair, formant un point culminant. Vous pouvez ajouter un cercle plus petit de la même couleur, donnant à l'OVNI un aspect complet..
Faisons maintenant un personnage de fantaisie caché à l'intérieur de l'OVNI - un extraterrestre. Tout d’abord, nous lui ferons croire qu’il descend de son bateau dans l’atmosphère..
Prendre le Outil Ellipse (L) et faire un 50 x 50 px cercle bleu clair. Faire un ovale bleu foncé pour les yeux. Garder l'oeil sélectionné, double-cliquez la Outil de réflexion (O) et retournez la forme sur le Axe vertical. Cliquez sur Copie ajouter un deuxième oeil.
Faire un plus grand cercle magenta de 75 x 75 px la taille et placez-le juste sous la tête de l'étranger.
Utilisez le Outil Rectangle (M) faire une forme turquoise de 100 x 330 px taille, en le plaçant sous la tête de l'étranger. Sélectionnez les points d’ancrage inférieurs de la forme avec le bouton Outil de sélection directe (A) et utiliser le Coins vivants fonction pour rendre le bas de la forme complètement arrondi.
Ajoutez deux fines rayures verticales au-dessus de la forme turquoise et utilisez le Minus Front fonction de Éclaireur découper les formes.
Utilisez le Outil de sélection directe (A) pour sélectionner les points d’ancrage supérieurs des bandes et faites-les glisser vers le haut ou le bas, en faisant varier la hauteur des formes. Utilisez le Coins vivants fonction pour rendre les coins arrondis. Maintenant, les formes ressemblent à une comète ou une météorite en chute.
Garder les formes sélectionnées, allez à Objet> Chemin> Chemin décalé et mettre le Décalage valeur à 5 px, créant ainsi une forme plus grande.
Rendre la forme intérieure un peu plus légère en ajoutant de la dimension.
Utilisez le Outil de sélection directe (A) pour varier la hauteur des bandes sombres et claires.
Maintenant, décrivons notre extraterrestre dans toute sa longueur après qu’il atterrit sur le sol. Nous utiliserons la tête et y ajouterons des éléments. Utilisez le Outil Rectangle (M) faire un 6,5 x 85 px forme bleu clair sur la tête. Ajouter un petit 15 x 15 px cercle en haut.
Maintenant, nous allons façonner le corps à partir d'un 70 x 140 px rectangle bleu clair. Ajoutez deux fines bandes verticales au-dessus du rectangle et utilisez le Minus Front fonction de Éclaireur les découper en formant deux longs bras minces.
Utilisez le Outil de sélection directe (A) pour déplacer les points d'ancrage inférieurs des bras vers le haut, les rendant plus courts que le corps.
Ajoutez un autre rectangle sur le corps et découpez-le en utilisant Minus Front façonner les jambes de notre créature.
Utilisez le Outil de sélection directe (A) et le Coins vivants fonction pour rendre tous les coins carrés complètement ou partiellement arrondis.
Finissons notre alien en sélectionnant son corps et en utilisant Objet> Chemin> Chemin décalé avec Décalage de 5 px valeur de faire une plus grande forme autour du corps. Remplissez-le avec la même couleur rose-magenta que le cercle autour de la tête.
Terminez avec l’arrière-plan en plaçant les éléments principaux au centre de l’arrière-plan, en commençant par l’OVNI en haut et en terminant avec l’extraterrestre au sol. Et c'est tout!
Bon travail! Nous avons atteint la fin de notre tutoriel et terminé le processus passionnant de création d'éléments et de combinaison de ces éléments, créant une composition équilibrée! Nous avons appris à transformer des formes géométriques de base et à utiliser diverses fonctions d'Adobe Illustrator pour rendre notre flux de travail rapide et pratique.!
Nous pouvons utiliser ces techniques pour nos projets futurs, en créant des arrière-plans plats sans soudure, des compositions détaillées et des paysages plats, des paysages, des paysages urbains et bien plus encore..
Maintenant que nous avons une version statique de notre arrière-plan prête, nous pouvons apprendre à le faire fonctionner et à bouger! Restez à l'écoute et ne le manquez pas!
Accentsconagua