Share
Dans ce tutoriel, vous apprendrez à utiliser Illustrator pour créer une conception de formulaire Web simple. En suivant quelques techniques simples, vous obtiendrez un formulaire de registre propre et moderne en un rien de temps.!
Créez un document 570 par 370px. Commencez par activer la grille (Affichage> Grille) et l’alignement sur la grille (Affichage> Aligner sur la grille). Ensuite, vous aurez besoin d'une grille toutes les 10 px. Allez dans Edition> Préférences> Guides et grille, entrez 10 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.
Avec l'outil Rectangle (M), créez une forme de 450 x 370px et remplissez-la avec le dégradé linéaire illustré ci-dessous..
Concentrez-vous sur le dessus de la forme. Choisissez l'outil Ajouter des points d'ancrage (Plus) et ajoutez deux points d'ancrage dans les points surlignés en jaune dans la première image. Ensuite, sélectionnez l'outil de sélection directe (A), sélectionnez les points d'ancrage surlignés en rouge et faites-les glisser vers le bas. À la fin, votre forme devrait ressembler à l'image finale.
Sélectionnez à nouveau l'outil Rectangle (M), créez une forme de 330 x 90 pixels et placez-la comme indiqué dans la première image. Remplissez-le avec R = 77 G = 195 B = 255 puis envoyez-le à l'arrière (Maj + Ctrl + Support gauche).
Revenez à la forme grise. Sélectionnez-le, accédez au panneau Apparence, ouvrez le menu déroulant et cliquez sur Ajouter un nouveau remplissage. Cela va ajouter un deuxième remplissage pour votre forme. Maintenant, vous avez besoin d'un motif pour ce nouveau remplissage. Allez dans le panneau Swathes, ouvrez le menu déroulant et sélectionnez Ouvrir Swatch Library> Patterns> Basic Graphics> Basic Graphics_Textures. Resélectionnez ce nouveau remplissage, cliquez sur le motif "USGS 7 Vineyars" puis changez son mode de fusion en Multiplier et réduisez son opacité à 5%..
Continuez en ajoutant un trait blanc. Faites-le 3px large, alignez-le à l'intérieur et baisser son opacité à 50%. La forme étant toujours sélectionnée, ouvrez le menu déroulant de l’apparence. Cette fois, cliquez sur Ajouter un nouveau trait. Sélectionnez ce nouveau trait, remplacez la couleur par R = 120 G = 120 B = 120 et rendez-le large 1px.
Resélectionnez le chemin entier. Tout d’abord, allez à Effet> Styliser> Ombre portée. Entrez les données indiquées ci-dessous et cliquez sur OK. Avec la forme toujours sélectionnée, allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 7 px et cliquez sur OK. Assurez-vous que cet effet est situé au-dessus des traits dans le panneau Apparence. Vous pouvez simplement cliquer et faire glisser.
Passons à la forme bleue. Tout d'abord, ajoutez un nouveau remplissage. Sélectionnez-le et utilisez le dégradé linéaire indiqué ci-dessous. Changez son mode de fusion en superposition et réduisez son opacité à 50%. Ajouter un troisième remplissage. Faites-le noir, changez son mode de fusion en Multiplier, réduisez son opacité à 12% puis allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous puis cliquez sur OK.
Continuez avec la forme bleue. Ajouter un 3px, aligné à l'intérieur de la course (R = 225 G = 244 B = 253) et baisser son opacité à 50%. Ajoutez un deuxième trait, redimensionnez-le à 1px et changez sa couleur en R = 0 G = 112 B = 185. Resélectionnez tout le chemin et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 7px et cliquez sur OK.
Choisissez l'outil Rectangle (M) et créez une forme de 270 x 40px. Remplissez-le avec le dégradé linéaire et placez-le comme indiqué ci-dessous.
Concentrez-vous sur la forme créée à l'étape précédente. Sélectionnez le remplissage dans le panneau Apparence et accédez à Effet> Styliser> Inner Glow. Entrez les données indiquées ci-dessous et cliquez sur OK. Ajouter un trait blanc. Faites-le 3px large, aligner à l'extérieur et baisser son opacité à 50%. Ajoutez un deuxième trait, redimensionnez-le à 1px et changez sa couleur en R = 167 G = 169 B = 172. Resélectionnez tout le chemin et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 3 pixels et cliquez sur OK.
Sélectionnez la forme créée à l'étape précédente et effectuez deux copies (Contrôle + C> Contrôle + V> Contrôle + V). Placez-les comme indiqué dans l'image suivante.
Resélectionnez l'outil Rectangle (M) et créez une forme de 120 x 30 pixels. Remplissez-le avec R = 77 G = 195 B = 255 et placez-le comme indiqué dans l'image suivante. Ajoutez un second remplissage pour cette forme et utilisez le dégradé linéaire présenté dans l'image suivante. Sélectionnez ce nouveau remplissage, changez son mode de fusion en superposition et diminuez son opacité à 50%.
Ajoutez un troisième remplissage pour la forme créée à l'étape précédente. Faites-le noir, changez son mode de fusion en Multiplier, baissez son opacité à 10% puis allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous, puis cliquez sur OK. Ajoutez 1,5px, aligné sur le trait interne (R = 225 G = 244 B = 253) et diminuez son opacité à 50%. Ajoutez un deuxième trait, redimensionnez-le à 1px et changez sa couleur en R = 0 G = 112 B = 185. Resélectionnez tout le chemin et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 15 px et cliquez sur OK.
Enfin, ajoutons le texte. J'ai utilisé la police Copper Std avec une taille de 30 pt pour le "Register Form" et 20 pt pour le reste du texte. Suivez les couleurs indiquées ci-dessous, puis ajoutez l'effet discret Ombre portée pour chaque texte..
Voilà, un formulaire de registre simple et élégant. Vous pouvez utiliser les techniques que vous avez apprises dans ce tutoriel pour créer des éléments et conceptions Web supplémentaires..
Accentsconagua