Share
Dans le tutoriel d'aujourd'hui, je vais vous montrer comment créer une interface utilisateur pour un jeu-questionnaire sur un téléphone intelligent dans Adobe Illustrator CS6. Je vais créer une interface utilisateur semblable à un tableau pour la maison publique et créer un motif en bois avec l'outil de modélisation pour ajouter un cadre en bois. Ce tutoriel est la première partie d’un croisement Tuts +, où vous pouvez découvrir comment construire le jeu sur Mobiletuts.+.
Avant de commencer à créer l'interface utilisateur, j'avais besoin de connaître les éléments requis du concepteur de jeu pour créer ce qu'il cherchait. J'étais sur un délai serré alors j'ai utilisé des communications précédentes et des images de concept pour aider.
La première image de concept a été créée par le concepteur du jeu, qui a déclaré vouloir une image d’arrière-plan, des boutons, une zone pour une bannière / un en-tête, une zone pour une question et des variantes de l’apparence du texte lorsque vous répondez correctement à une question..
Un autre concepteur qui avait précédemment convenu d'un thème de tableau noir pour le quiz m'avait donné une maquette, qui a été approuvée par le concepteur du jeu..
Donc assez de bavardages, passons à autre chose, nous avons un délai à respecter! N'ayant pas reçu de dimensions spécifiques pour l'interface utilisateur, j'ai opté pour un nouveau document, RVB de 600 x 800 pixels, aligné sur la grille de pixels. En tant que vecteur, il sera facile de modifier les dimensions ultérieurement lorsque le client me le fera savoir. Jusque-là, travaillons sur notre conception et retirons le gros du travail.
Avec les informations qui nous ont été données, dessinons une maquette avec une série de formes de trait noir et de remplissage blanc créées avec l’outil Rectangle (M). Je sais que je veux un cadre en bois, un fond, une zone pour l'image d'en-tête et des questions. Il est également possible que le concepteur souhaite une fenêtre contextuelle et une icône de lancement. J'ai décidé d'aller dans un tableau à craie de style maison publique au lieu d'un tableau d'école. La différence est que la version de maison publique sera un peu plus granuleuse et plus traditionnelle.
Je vais commencer par les éléments les plus statiques, dont les chances ne seront pas altérées pendant le match. Les zones telles que le texte et les boutons seront modifiées, mais le cadre, l'en-tête et l'arrière-plan ne le seront pas. Je vais donc commencer par le cadre en bois. Dessinez un long rectangle (M) avec un remplissage brun moyen, puis sélectionnez Objet> Motif> Créer pour ouvrir la boîte de dialogue Options de motif. Je n'ai pas modifié la largeur et la hauteur du motif car je vais dessiner directement au-dessus de la zone déjà définie.
Nous visons un motif en bois à l'aspect organique avec des épaisseurs variées dans le grain. L'un de mes outils préférés pour cela est l'outil Pinceau Blob (Maj + B) avec une tablette graphique. Commencez par dessiner un nœud dans le bois en faisant un tourbillon, puis étendez-le sur la zone du motif. Cette extrémité chevauchante apparaîtra au bas de la zone de votre motif..
Utilisez cette extrémité pour ensuite courber autour de votre noeud original. J'ai ensuite modifié le type de mosaïque en brique par colonne pour que le nœud soit décalé l'un par rapport à l'autre..
Avec une méthode similaire consistant à superposer le grain au-delà de la limite du motif, tracez d'autres lignes de la même couleur. Ajouter une ligne qui se superpose au côté de la bordure du motif afin de la lier horizontalement aux autres tuiles.
Une fois que vous êtes heureux, ajoutez une couleur plus claire pour plus de détails. Lorsque vous avez terminé votre motif, cliquez sur Terminé pour le sauvegarder automatiquement dans votre panneau Nuancier..
Dessinez un rectangle de 600 x 800 (M) sur la planche d’art. Si vous avez activé les guides intelligents (Ctrl + U), vous constaterez qu'il est plus facile de tout créer dans le didacticiel lorsque les éléments s'emboîtent efficacement. Comme nous ne voulons pas aller au-delà de la planche graphique, attribuez au rectangle un poids de trait de 45 pts réglé sur Aligner le trait à l'intérieur..
Une fois sélectionné, accédez à Objet> Développer pour convertir le trait en une forme remplie..
À l’aide de l’outil Segment de ligne (\), tracez des lignes diagonales aux angles du cadre à 45 degrés. Sélectionnez Tout (Ctrl + A) des composants et utilisez Pathfinder> Diviser pour diviser la forme en quatre..
Appliquez votre modèle en bois sur le cadre. Quand je l'ai appliqué, il était trop gros pour saisir tous les détails. Pour rectifier cela, j'ai réduit uniquement l'échelle du motif en allant dans Objet> Transformer> Échelle et en ne cochant que Transformer Pattern. Cela diminuera l'échelle du motif, pas l'objet.
Je vais maintenant travailler dans le panneau Apparence pour donner une bordure subtile aux formes du cadre. En utilisant les couleurs sombres et claires du motif en bois, j'ai ajouté deux remplissages en dessous du motif en bois. Le premier est l'obscurité, le second est le plus clair et il s'agit de Offset Path de -2pt. J'ai ensuite défini le motif de remplissage sur un chemin de décalage de -4pt.
Si j’ai fait cela, c’est que si vous appliquiez un trait aux formes telles quelles, les coins de la forme peuvent produire des points dans le trait qui font saillie hors de la zone du cadre. Si vous vous en souvenez bien, je souhaite que tout soit contenu dans la planche de travail. Ainsi, plutôt que de jouer avec les mitres et d'ajuster les angles des angles, j'ai choisi de créer un "faux" trait en utilisant des chemins décalés. C'est un bon conseil si vous travaillez avec des angles difficiles qui ne se jouent pas correctement ou si vous souhaitez appliquer un "faux" dégradé à un trait sans Adobe Illustrator CS6..
Je parie que vous pensiez que j'allais laisser les parties supérieure et inférieure du cadre avec la même orientation de motif, n'est-ce pas? Bien que vous puissiez redimensionner le motif sans modifier la forme, vous pouvez également faire pivoter un motif sans faire pivoter la forme. Sélectionnez les formes dont vous souhaitez modifier le remplissage et accédez à Objet> Transformation> Rotation. Je suis entré dans un angle de 90 degrés, puis je n'ai coché que Transform Patterns.
Retour dans le panneau Apparence, sélectionnez vos cadres latéraux et Duplicate Item sur le motif de remplissage. Ceci maintiendra les valeurs du chemin de décalage. Puis remplissez avec un dégradé linéaire transparent brun. Faites la même chose pour le haut et le bas du cadre et modifiez simplement l'angle du dégradé à 90 degrés.
Dans le panneau Styles graphiques, lorsque les formes de cadre supérieure et inférieure sont sélectionnées, ajoutez le nouveau style graphique. Appliquez ensuite ceci à la forme qui sera utilisée pour l'en-tête / la bannière de l'interface utilisateur. Modifiez le dégradé puis créez un dégradé radial..
Je vais créer l’arrière-plan du tableau avec le panneau Apparence et une version 100% vectorielle d’une lueur intérieure. Vous pouvez savoir comment faire cela en consultant le tutoriel vidéo suivant.
Dans le panneau Pinceaux, cliquez sur le menu déroulant et sélectionnez Ouvrir la bibliothèque de pinceaux> Artistique> Artistic_ChalkCharcoalPencil et utilisez le pinceau Craie pour dessiner des traits blancs sur le tableau, définis sur l’écran Mode fusion, Opacité 5%. Une fois cela fait, regroupez-les ensemble (Ctrl + G).
Dupliquez l'arrière-plan du tableau et utilisez-le avec le groupe Traits de craie pour créer un masque d'écrêtage (Ctrl + 7)..
Je vais utiliser une police Freeware pour la question et les réponses sur le tableau. Utilisez l'outil Texte (T) pour ajouter votre texte. J'ai utilisé "Film Cryptic" en taille de police 48 pts.
J'ai ajouté d'autres éléments tels qu'un cadre autour des réponses, une coche et une ligne en travers d'une réponse à l'aide du pinceau fusain - crayon. Pour la case du bas, j'ai réglé l'opacité à 30%.
Maintenant, ajoutez une ombre portée subtile sous le panneau d’en-tête / bannière. Utilisez l'outil Segment de ligne (\) pour tracer une ligne horizontale au bas du tableau, puis dupliquez-le. Réglez le trait inférieur sur Stroke Weight 18 et l'opacité 0% et le haut sur 1pt, 100%. Les deux traits doivent utiliser Profil: Largeur Profil 1 et avoir une couleur de trait noir..
Sélectionnez les deux traits et créez un mélange (Ctrl + Alt + B). Ensuite, allez à Objet> Fusion> Options de fusion et modifiez l'espacement en Pas spécifiés et la valeur à 10. Cliquez une fois sur OK. Puis changez le mode de fusion du mélange en Multiplier et déplacez-le en place..
Dupliquez-le et placez-le sous le haut du panneau d'en-tête / bannière.
Je vais ajouter quelques petits rivets sur les côtés du panneau qui se connectent au cadre. Ceci utilise à nouveau le panneau Apparence avec les paramètres ci-dessous dans un cercle pair à l'aide de l'outil Ellipse (L).
Ajoutez un retrait dans le rivet en traçant une ligne diagonale sur le boulon et en le définissant sur Multiplier le mode de fusion. Regroupez le rivet et indentez (Ctrl + G), puis dupliquez-le trois fois et déplacez-le. Pour vous assurer que tout est parallèle et aligné, utilisez le panneau Aligner..
Notre concepteur de jeu est entré en contact! Oh non, nous avons les mauvaises dimensions pour notre jeu et le rapport n'est pas le même. Les dimensions qui nous ont été données sont 480 x 800 pixels. Ce n'est pas grave, car nous travaillons en mode vectoriel et il est facile à corriger. La première chose à faire est de changer la taille de notre Artboard en fonction de la nouvelle dimension, puis de dessiner un rectangle guide avec l'outil Rectangle (M) de 480 x 800.
Dupliquez les côtés du cadre et créez-en un tracé composé (Ctrl + 8). Utilisez ensuite cette forme pour Pathfinder> Diviser à partir des cadres supérieur et inférieur et supprimez les formes en excès..
Déplacez vos éléments latéraux en place, permettant aux guides intelligents (Ctrl + U) de vous aider.
Pour le panneau d'en-tête, ajoutez les attributs du panneau Apparence au panneau Styles graphiques, puis appliquez-les à une nouvelle forme. L'arrière-plan du tableau peut être redimensionné à l'aide de l'outil Free Transform Tool (E), mais n'oubliez pas de modifier également le groupe Masque de découpage avec les traits de craie po. J'ai réduit la taille de la police en conséquence pour compenser la nouvelle largeur. Ce changement de dimension m'a pris 5 minutes, y compris une double vérification de l'aperçu pour m'assurer que les dimensions sont correctes..
Continuons avec l'en-tête / bannière. Je vais jouer sur le style de la maison publique et ajouter une plaque de laiton à la conception. Tracez un rectangle (M) dont les angles rejoignent le centre des rivets. Ensuite, tracez un cercle pair (L) sur l’un des centres des rivets et dupliquez / placez-les pour les autres rivets. Utilisez Pathfinder> Minus Front pour créer la forme de votre plaque de laiton..
Appliquez le style graphique pour les boulons à la plaque puis ajoutez un nouveau remplissage et utilisez un dégradé linéaire avec une variété de gris. Peu importe l'endroit où vous placez les curseurs pour ce dégradé, tant que vous affichez du contraste. des reflets et de l'ombre dans le dégradé.
J'ai ensuite modifié les attributs pour ajouter un ton de laiton / doré.
Les couleurs des rivets ne me convenaient pas, alors je suis allé de l'avant et j'ai modifié les couleurs des rivets en utilisant les mêmes couleurs que la plaque de laiton. Maintenant ils correspondent mieux.
Enfin, je vais ajouter le texte d'en-tête / bannière. Le concepteur du jeu souhaite que le titre "Jeu Android" apparaisse dans le titre de la bannière. Je vais donc ajouter un effet gravé rapide au texte ... et c'est si facile à faire. Tout d’abord, ajoutez votre texte, j’ai utilisé "Graveurs MT" et je l’ai réglé sur Multiplier le mode de fusion. Donnez-lui la même couleur de laiton que celle que vous avez utilisée dans l'assiette. Dupliquez le texte et en utilisant les touches de direction du clavier, déplacez le texte deux endroits vers le bas et deux endroits à droite. Puis changez le mode de fusion en écran.
Vous venez de créer votre interface utilisateur de tableau de style tableau noir pour un jeu sur téléphone intelligent! Nous passons maintenant à Mobiletuts + pour la deuxième partie de ce didacticiel sur la création du jeu. Vous pourrez télécharger les graphiques nécessaires pour créer le jeu vous-même là-bas. S'amuser!
Accentsconagua