Share
Dans le didacticiel suivant, vous apprendrez à créer une interface de jeu de blocs dans Adobe Illustrator CS5. Les graphiques de jeu vectoriels permettent des illustrations polyvalentes. Le flux de travail présenté dans ce didacticiel vous apprendra à créer des graphiques de jeu dans Illustrator. Ces techniques peuvent être appliquées à plusieurs projets de conception d'interface et de conception de jeux. Il est temps d'intervenir, d'apprendre à créer ces formes et de leur donner une profondeur graphique colorée..
Appuyez sur Commande + N pour créer un nouveau document. Entrez 660 dans la zone de largeur et 600 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. Activez maintenant la grille (Affichage> Grille) et l’alignement sur la grille (Affichage> Aligner sur la grille).
Ensuite, vous aurez besoin d'une grille toutes les 5px. Allez dans Edition> Préférences> Guides> 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) et créez une forme de 350 x 490px. Le composant logiciel enfichable à la grille facilitera votre travail. Remplissez-le avec R = 50, G = 50, B = 50. Maintenant, supprimez la couleur du trait et allez à Effet> Styliser> Coins arrondis. Entrez un rayon de 5 px, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactivez la grille (Affichage> Afficher la grille) et l’alignement sur la grille (Affichage> Aligner sur la grille). Allez dans Edition> Préférences> Général et assurez-vous que l'incrément de clavier est défini sur 1px. Resélectionnez la forme créée à l'étape précédente et allez à Objet> Chemin> Chemin décalé. Entrez un décalage de -3px et cliquez sur OK.
Sélectionnez la forme obtenue et effectuez une copie devant (Commande + C> Commande + F). Sélectionnez cette copie et cliquez une fois sur la flèche vers le bas. Resélectionnez les deux formes créées à cette étape et cliquez sur le bouton Moins avant dans le panneau Pathfinder (Fenêtre> Pathfinder). Remplir la forme résultante avec R = 109, G = 110, B = 113.
Là encore, sélectionnez la forme créée à la deuxième étape et sélectionnez Objet> Chemin> Décalage du chemin. Entrez un décalage de -3px et cliquez sur OK. Sélectionnez la forme obtenue et effectuez une copie devant (Commande + C> Commande + F).
Sélectionnez cette copie et cliquez une fois sur la flèche vers le haut. Resélectionnez les deux formes créées à cette étape et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 109, G = 110, B = 113.
Resélectionnez la forme créée à la deuxième étape, accédez au panneau Calques, double-cliquez dessus et nommez-le "Principal". Assurez-vous que cette forme est toujours sélectionnée, accédez au panneau Apparence (Fenêtre> Apparence) et cliquez sur le bouton Ajouter un nouveau remplissage. C'est le petit carré blanc au bas du panneau Apparence.
Évidemment, cela ajoutera un nouveau remplissage à votre forme. Sélectionnez-le dans le panneau Apparence et utilisez le dégradé linéaire présenté ci-dessous. Le zéro jaune de l'image du dégradé représente le pourcentage d'opacité.
Sélectionnez de nouveau "Principal", ajoutez un troisième remplissage et sélectionnez-le dans le panneau Apparence. Faites-le noir, faites-le glisser au bas du panneau Apparence, baissez son opacité à 15%, puis allez à Effet> Chemin> Décalage du chemin. Entrez un décalage de 1 px, cliquez sur OK et allez à Effet> Déformer et transformer> Transformer. Entrez les données ci-dessous et cliquez sur OK.
Resélectionnez "Principal" et concentrez-vous sur le panneau Apparence. Définissez la couleur du trait sur R = 167, G = 169, B = 172. Faites-le 4 pt large et alignez-le à l'intérieur.
Resélectionnez "Principal" et concentrez-vous sur le panneau Apparence. Sélectionnez le trait ajouté à l'étape précédente et cliquez sur Dupliquer l'élément sélectionné. C'est la petite icône de fichier au bas du panneau Apparence. Évidemment, cela va ajouter une copie du trait. Sélectionnez ce nouveau trait, définissez sa couleur sur R = 35 G = 31 B = 32 et diminuez la taille à 3 points..
Sélectionnez de nouveau "Principal", concentrez-vous sur le panneau Apparence et ajoutez deux nouveaux éléments. Sélectionnez le premier, définissez sa couleur sur R = 128 G = 130 B = 133 et la taille sur 1,5 pt. Sélectionnez l'autre nouveau trait, noircissez-le, alignez-le sur l'extérieur et définissez la taille sur 1 pt..
Resélectionnez "Principal" et concentrez-vous 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 ci-dessous et cliquez sur OK.
Réactivez la grille (Affichage> Afficher la grille) et Aligner sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Rectangle (M), créez une forme de 20 x 20 pixels et remplissez-le avec R = 88, G = 89, B = 91. Sélectionnez cette case et allez à Objet> Chemin> Chemin décalé. Entrez un décalage -1px et cliquez sur OK.
Sélectionnez la forme obtenue et accédez à nouveau à Objet> Chemin> Chemin décalé. Entrez un décalage de -3px et cliquez sur OK. Sélectionnez la forme obtenue avec la forme précédemment créée et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Remplir la forme résultante avec R = 65, G = 64, B = 66.
Choisissez l'outil Plume (P) et tracez un chemin horizontal simple, comme indiqué dans la première image. Le composant logiciel enfichable à la grille devrait faciliter votre travail. Sélectionnez ce nouveau chemin, ainsi que la forme plus sombre créée à l'étape précédente, puis cliquez sur le bouton Diviser du panneau Pathfinder..
Cela créera un groupe avec quatre formes simples. Examinez le panneau Calques et concentrez-vous sur ce groupe. Tout d'abord, sélectionnez les deux triangles et supprimez-les. Ensuite, dissociez les deux formes restantes (Maj + Commande + G). Enfin, remplissez la forme supérieure gauche avec R = 109, G = 110, B = 113. Assurez-vous que l'autre forme est toujours remplie avec R = 65, G = 64, B = 66.
Resélectionnez le carré gris créé à la onzième étape, faites une copie devant (Commande + C> Commande + F) et amenez-la au premier plan (Maj + Commande + touche Bracket Droite). Remplissez cette nouvelle forme de noir, réduisez son opacité à 7%, changez le mode de fusion en Multiplier et allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous et cliquez sur OK.
Resélectionnez la forme créée à l'étape précédente et effectuez une copie devant (Command + C> Command + F). Choisissez l'outil Ellipse (L), créez une forme de 40 x 20 pixels et placez-le comme indiqué dans la deuxième image. Sélectionnez ce cercle pressé, ainsi que la nouvelle copie, puis cliquez sur le bouton Intersection du panneau Pathfinder. Remplissez la forme résultante avec du blanc et réduisez son opacité à 25%.
Resélectionnez le carré gris créé à la onzième étape et concentrez-vous sur le panneau Apparence. Ajouter un trait noir de 2 points et l’aligner sur l’intérieur. Sélectionnez toutes les formes créées lors des quatre dernières étapes et regroupez-les (Commande + G)..
Sélectionnez le groupe créé à l'étape précédente et placez-le comme indiqué dans l'image suivante. Encore une fois, l’alignement sur la grille facilitera votre travail.
Resélectionnez le groupe déplacé à l'étape précédente, baissez son opacité à 15% et accédez à Effet> Déformer et transformer> Transformer. Entrez les données affichées dans la fenêtre de gauche, cliquez sur OK, puis sélectionnez à nouveau Effet> Transformer et transformer> Transformer. Entrez les données affichées dans la fenêtre de droite et cliquez sur OK.
Choisissez l'outil Rectangle (M), créez une forme de 20 x 20 pixels et remplissez-le avec R = 0, G = 165, B = 224. Sélectionnez ce carré bleu et allez à Objet> Chemin> Chemin décalé. Entrez un décalage de -4px et cliquez sur OK. Sélectionnez la forme obtenue, effectuez une copie devant (Commande + C> Commande + F) et désactivez l'option Aligner sur la grille (Affichage> Aligner sur la grille)..
Sélectionnez cette copie et appuyez une fois sur la flèche vers le haut et sur la flèche droite. Resélectionnez cette copie, ainsi que la forme d'origine, puis cliquez sur le bouton Moins avant du panneau Pathfinder. Remplissez la forme obtenue avec du blanc, réduisez son opacité de 25% et saisissez l'outil Supprimer le point d'ancrage (-)..
Assurez-vous que cette mince forme blanche est toujours sélectionnée et cliquez sur les deux points d'ancrage (indiqués par des flèches dans la quatrième image affichée). Finalement, votre forme devrait ressembler à la cinquième image montrée.
Resélectionnez le carré bleu et allez à Objet> Chemin> Chemin décalé. Entrez un décalage -1px et cliquez sur OK. Sélectionnez la forme obtenue et accédez à nouveau à Objet> Chemin> Chemin décalé. Entrez un décalage de -3px et cliquez sur OK. Sélectionnez les deux formes créées jusqu'à présent et cliquez sur le bouton Moins avant dans le panneau Pathfinder. Remplir la forme résultante avec R = 28, G = 117, B = 188.
Réactivez l'alignement sur la grille (Affichage> Aligner sur la grille). Choisissez l'outil Plume (P) et tracez un chemin horizontal, comme indiqué dans la première image. Sélectionnez-le, ainsi que la forme créée à l'étape précédente, puis cliquez sur le bouton Diviser du panneau Pathfinder..
Examinez le panneau Calques et concentrez-vous sur le groupe obtenu. Tout d’abord, supprimez les formes en triangle, puis dissociez les deux formes restantes (Maj + Commande + G). Enfin, remplissez la forme supérieure gauche avec R = 0, G = 224, B = 255.
Resélectionnez le carré bleu, ajoutez un trait noir de 2 points et alignez-le à l'intérieur. Sélectionnez toutes les formes créées lors des trois dernières étapes et regroupez-les (Commande + G). Déplacer vers le panneau Calques, double-cliquez sur ce nouveau groupe et nommez-le "BlueBlock".
Sélectionnez le "BlueBlock", faites six copies et alignez-les dans une colonne simple (comme le montre l'image suivante). Concentrez-vous sur ces copies de groupe et remplacez les couleurs existantes par celles illustrées ci-dessous. Lorsque vous avez terminé, accédez au panneau Calques et renommez ces nouveaux groupes en fonction de la couleur du bloc dans son ensemble..
Maintenant que vous avez tous les blocs dont vous avez besoin, créons les morceaux de blocs réels. Commencez avec les blocs bleus et continuez avec le reste. Toujours regrouper les blocs qui constituent une pièce de bloc. Cela facilitera votre travail dans les étapes ultérieures.
Ajoutez certaines de ces pièces de bloc comme indiqué ci-dessous.
Choisissez l'outil Rectangle (M), créez une forme de 100 x 20 pixels et placez-le comme indiqué dans l'image suivante. Maintenant remplissez-le avec R = 65, G = 64, B = 66. Supprimez la couleur du trait et sélectionnez Effet> Styliser> Coins arrondis. Entrez un rayon de 10 pixels, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactivez l'alignement sur la grille (Affichage> Aligner sur la grille). Sélectionnez la forme créée à l'étape précédente, renvoyez-la à l'arrière (touche Maj + Commande + Gauche du support) et effectuez deux copies devant (Commande + C> Commande + F> Commande + F). Sélectionnez la copie du haut et appuyez une fois sur la flèche vers le haut et sur la flèche gauche. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme obtenue avec du noir.
Resélectionnez la forme grise créée à l'étape 25 et effectuez deux nouvelles copies devant. Encore une fois, sélectionnez la copie du haut et cette fois cliquez sur la flèche haut et la flèche gauche deux fois. Resélectionnez les deux copies et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 147, G = 149, B = 152.
Resélectionnez le rectangle arrondi créé à l'étape 25 et concentrez-vous sur le panneau Apparence. Ajoutez un nouveau remplissage et utilisez le dégradé linéaire indiqué dans la première image. Ajoutez un troisième remplissage pour cette forme, faites-la noircir, diminuez son opacité à 10%, changez le mode de fusion en Multiplier et allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous et cliquez sur OK.
Continuez dans le panneau Apparence et ajoutez le premier trait. Faites-le 2pt large, définissez sa couleur à R = 209 G = 211 B = 212, et l'aligner à l'intérieur. Ajoutez un second trait pour ce chemin, agrandissez-le de 1 pt et définissez la couleur sur R = 147, G = 14, B = 152. Assurez-vous qu'il est aligné à l'intérieur.
Resélectionnez le rectangle arrondi édité à l'étape précédente et effectuez une copie devant. Sélectionnez cette copie et appuyez sur la touche D de votre clavier. Cela va ajouter les propriétés par défaut pour votre forme (remplissage blanc et un trait noir, 1 pt). Supprimer la couleur du trait.
Sélectionnez maintenant cette forme blanche, ainsi que le rectangle arrondi d'origine, puis accédez au panneau Transparence. Ouvrez le menu déroulant et cliquez sur Créer un masque d'opacité..
Réactivez l'alignement sur la grille. Sélectionnez toutes les formes créées lors des cinq dernières étapes et regroupez-les. Faites deux copies de ce groupe et placez-les comme indiqué dans l'image suivante.
Concentrez-vous sur le groupe supérieur créé à l'étape précédente et sélectionnez l'outil Rectangle (M). Créez une forme de 90 x 80 px et placez-la comme indiqué dans l'image suivante. Remplissez-le avec R = 65 G = 64 B = 66, supprimez la couleur du trait et appliquez Effet> Styliser> Coins arrondis. Entrez un rayon de 10 pixels, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactiver l'alignement sur la grille. Sélectionnez la forme créée à l'étape précédente et accédez à Objet> Chemin> Décalage du chemin. Entrez un décalage de -2 pixels et cliquez sur OK. Sélectionnez la forme obtenue et faites-en une copie devant. Sélectionnez cette copie et cliquez une fois sur la flèche vers le haut. Resélectionnez les deux formes créées à cette étape et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 209, G = 211, B = 212.
Resélectionnez le rectangle arrondi créé à l'étape 31 et concentrez-vous sur le panneau Apparence. Ajoutez un nouveau remplissage et utilisez le dégradé linéaire indiqué ci-dessous. Ajoutez un troisième remplissage pour cette forme, faites-la noircir, diminuez son opacité à 10%, changez le mode de fusion en Multiplier et allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous et cliquez sur OK.
Continuez dans le panneau Apparence et ajoutez le premier trait. Faites-le 2pt large, définissez sa couleur à R = 147 G = 149 B = 152, et l'aligner à l'intérieur. Ajoutez un second trait pour ce chemin, faites-le grand large, réglez la couleur sur R = 0 G = 0 B = 0 et assurez-vous qu'il est aligné à l'intérieur.
Resélectionnez le rectangle arrondi édité à l'étape précédente et effectuez une copie devant. Sélectionnez cette copie et appuyez sur la touche D de votre clavier. Encore une fois, supprimez la couleur du trait et utilisez la forme blanche restante pour masquer le rectangle arrondi d'origine..
Sélectionnez toutes les formes créées lors des quatre dernières étapes et regroupez-les. Envoyer ce nouveau groupe à l'arrière.
Réactivez l'alignement sur la grille. Saisissez le groupe de blocs violet, faites-en une copie et placez-le comme indiqué dans l'image suivante. Sélectionnez-le et accédez à Effet> Styliser> Ombre portée. Entrez les données ci-dessous et cliquez sur OK.
Choisissez l'outil Rectangle (M), créez une forme de 90 x 50 pixels et placez-le comme indiqué dans l'image suivante. Remplissez-le avec R = 65 G = 64 B = 66, supprimez la couleur du trait et sélectionnez Effet> Styliser> Coins arrondis. Entrez un rayon de 10 pixels, cliquez sur OK et sélectionnez Objet> Développer l'apparence..
Désactiver l'alignement sur la grille. Sélectionnez la forme créée à l'étape précédente et accédez à Objet> Chemin> Décalage du chemin. Entrez un décalage de -2 pixels et cliquez sur OK. Sélectionnez la forme obtenue et faites-en une copie devant. Sélectionnez cette copie et cliquez une fois sur la flèche vers le haut. Resélectionnez les deux formes créées à cette étape et cliquez sur le bouton Moins avant du panneau Pathfinder. Remplir la forme résultante avec R = 209, G = 211, B = 212.
Resélectionnez le rectangle arrondi créé à l'étape 31 et concentrez-vous sur le panneau Apparence. Ajoutez un nouveau remplissage et utilisez le dégradé linéaire indiqué ci-dessous. Ajoutez un troisième remplissage pour cette forme, faites-la noircir, diminuez son opacité à 10%, changez le mode de fusion en Multiplier et appliquez Effet> Artistique> Grain de film. Entrez les données ci-dessous et cliquez sur OK.
Continuez dans le panneau Apparence et ajoutez le premier trait. Faites-le 2pt large, définissez sa couleur à R = 147 G = 149 B = 152, et l'aligner à l'intérieur. Ajoutez un second trait pour ce chemin, faites-le grand large, réglez la couleur sur R = 0 G = 0 B = 0 et assurez-vous qu'il est aligné à l'intérieur.
Resélectionnez le rectangle arrondi édité à l'étape précédente et effectuez une copie devant. Sélectionnez cette copie et appuyez sur la touche D de votre clavier. Encore une fois, supprimez la couleur du trait et utilisez la forme blanche restante pour masquer le rectangle arrondi d'origine..
Sélectionnez toutes les formes créées lors des quatre dernières étapes et regroupez-les. Maintenant, envoyez ce nouveau groupe à l'arrière.
Réactivez l'alignement sur la grille et dupliquez le groupe créé à l'étape précédente. Sélectionnez cette copie de groupe et déplacez-la comme indiqué sur la deuxième image. Une fois de plus, l'alignement sur la grille facilitera votre travail.
Désactiver l'alignement sur la grille. Choisissez l'outil Texte (T) et ajoutez du texte et des chiffres blancs. Utilisez la police Courier New et mettez-la en gras. Pour le texte, définissez la taille à 13 et le nombre à 20pt. Sélectionnez à la fois le texte et les chiffres et accédez à Effet> Styliser> Ombre portée. Entrez les données indiquées ci-dessous et cliquez sur OK. Enfin, regroupez tous.
Sélectionnez toutes les formes créées lors des dix-neuf dernières étapes et regroupez-les. Envoyez ce nouveau groupe à l'arrière et allez à Effet> Styliser> Ombre portée. Entrez les données ci-dessous et cliquez sur OK.
Enfin, ajoutons un arrière-plan simple. Choisissez l'outil Rectangle (M), créez une forme de la taille de votre planche graphique et envoyez-la à l'envers. Remplissez-le de blanc, puis ajoutez un second remplissage et utilisez le dégradé radial indiqué ci-dessous..
Resélectionnez la forme créée à l'étape précédente et ajoutez un troisième remplissage. Sélectionnez-le dans le panneau Apparence, diminuez son opacité à 10% et définissez le mode de fusion sur Multiplier..
Ensuite, vous aurez besoin d'un motif intégré pour ce nouveau remplissage. Accédez au panneau Bandes (Fenêtre> Échantillons), ouvrez le menu déroulant, puis sélectionnez Ouvrir une bibliothèque de nuances> Motifs> Graphiques de base> Textures graphiques de base..
Une nouvelle fenêtre avec un tas de beaux modèles devrait s'ouvrir. Recherchez le motif "USGS 19 Inondation des terres". Resélectionnez ce troisième remplissage, ajoutez le motif et allez à Effet> Artistique> Grain de film. Entrez les données ci-dessous, cliquez sur OK et vous avez terminé.
Maintenant, votre travail est finalisé. Voici à quoi cela devrait ressembler.
Accentsconagua