Share
L'un des aspects les plus importants du jeu vidéo est la manière dont les informations sont présentées. La façon dont les graphiques sont présentés fait une différence majeure dans la façon dont les joueurs percevront le jeu pendant le jeu. Dans le tutoriel d'aujourd'hui, nous allons montrer comment concevoir une fenêtre d'interface de jeu vidéo. Au cours du processus, nous montrerons comment dessiner manuellement certains aspects, appliquer des styles de calque, des textures et même incorporer Adobe Illustrator. Commençons!
Les ressources suivantes ont été utilisées lors de la production de ce didacticiel..
Créez un nouveau fichier de taille 1152 px x 864 px. Notre première étape consiste à créer un arrière-plan pour notre interface. Ce processus consiste simplement à expérimenter avec une texture. Fondamentalement, je viens de jeter quelques textures que j'ai trouvées et d'expérimenter avec son mode de fusion. Mon premier essai est un papier textures.
Ajouter une textures de papier à nouveau, cette fois changer son mode de fusion avec multiplier.
Ajouter le calque de réglage Teinte / Saturation pour l'assombrir.
Ajoutez des textures de livre vintage avec le mode de fusion Multiplier et Opacité 48%.
Ajouter de vieilles textures de papier. Cette fois, utilisez le mode superposition avec superposition d'opacité 58%.
Ajouter un calque de réglage noir et blanc.
Créer un nouveau calque. Appuyez sur D pour définir la couleur d’avant-plan et d’arrière-plan sur noir et blanc. Cliquez sur Filtre> Rendu> Nuages..
Définissez son mode de fusion sur Multiplier et réduisez son opacité à 8%.
Créer un nouveau calque. Remplissez-le de dégradé radial blanc à noir.
Définissez son mode de fusion sur Écran avec opacité 67%.
Ajouter un calque de réglage Teinte / Saturation. Sélectionnez Coloriser pour lui donner une couleur.
Enfin, ajoutez une belle texture métallique rayée. Réglez son mode de fusion sur Multiplier et réduisez son opacité à 20%.
Ouvrez Adobe Illustrator. Dessine un rectangle jaune.
Au-dessus du rectangle, dessinez un rectangle noir plus petit. Sélectionnez les meilleurs points avec l'outil de sélection directe et déplacez-les.
Sélectionnez la forme et maintenez la touche Alt enfoncée pour faire le double emploi..
Appuyez sur Commande / Ctrl + D pour répéter le processus de duplication.
Sélectionnez toutes les formes. Appuyez sur Commande / Ctrl + C. Collez-le dans Photoshop, Commande / Ctrl + V. Sélectionnez la boîte de dialogue Objet intelligent dans Coller.
Double-cliquez sur le calque pour ouvrir la boîte de dialogue Style de calque. Ajouter une superposition de motifs, charger du papier de couleur et sélectionner un motif sale.
Ajouter une forme de rectangle en haut et en bas de la bande.
Ajouter les styles de calque suivants.
Nous allons commencer par créer la base de la fenêtre. Créez un rectangle avec Color: # # 313029, Opacité: 100% et Remplissage: 50%. Ajouter le style de calque suivant.
Le style de calque que nous venons d'ajouter est trop plat. Nous allons utiliser une technique simple pour le réparer. Dans la boîte de dialogue Style de calque, activez les effets Masque de calque Masque.
Ajouter un masque de calque. Commande / Ctrl-clic sur le chemin pour créer la sélection. Inversez la sélection en appuyant sur Commande / Ctrl + Maj + I. Ajoutez un dégradé sombre et doux en haut et peignez le noir sur la ligne industrielle pour masquer l'ombre..
Vous pouvez voir la différence avant et après la modification de l'ombre dans l'image ci-dessous.
Dessine un autre rectangle. Cette fois plus petit que le précédent.
Ajoutez des textures de rouille dessus. Utilisez un masque de calque pour masquer les zones inutiles. Réglez son mode de fusion sur Multiplier et réduisez son opacité à 10%.
Créer un nouveau rectangle couvrant toute la forme. Ajouter un petit rectangle à l'intérieur de la forme, réglez-le sur Soustraire.
Dupliquer la forme précédente. Redimensionner le chemin interne.
Ajouter les styles de calque suivants.
Il y a trop d'ombre sur la partie supérieure de la fenêtre. Dans la boîte de dialogue Style de calque, activez les effets Masque de calque Masque.
Commande / Ctrl-clic sur le chemin. Inverser la sélection (Commande / Ctrl + Maj + I) et peindre les ombres en haut de la fenêtre en gris.
Ci-dessous, vous pouvez voir la différence avant et après que l'ombre soit partiellement masquée..
Dessinez un rectangle couvrant toute l'interface de la fenêtre. Définissez son remplissage sur 0% et ajoutez les styles de calque suivants.
Notre dernière étape consiste simplement à mettre en évidence subtilement l'interface de la fenêtre.
Tracez un cercle noir et placez-le dans un coin. Ajouter une ombre portée.
Utilisez un pinceau doux pour peindre un peu de blanc sur le trou.
Voici le résultat en vue à 100%.
Placez tous les calques créant le trou dans un groupe de calques. Dupliquer le groupe et le mettre à chaque coin.
Dans Illustrator, créez la moitié de la forme du titre de Windows..
Cliquez avec le bouton droit sur la forme et sélectionnez Transformer> Refléter. Sélectionnez Axe: Vertical et cliquez sur Copier..
Déplacer la forme dupliquée.
Sélectionnez des points qui se chevauchent. Faites un clic droit et choisissez Rejoindre.
Collez le tracé sur Photoshop en tant que calque de forme.
Surlignez et ombrez la forme. Vous pouvez voir les progrès que j'ai faits ci-dessous. J'utilise une brosse très douce (dureté: 0%, opacité: 5-10%) et environ 10 couches.
Ajoutez un titre de jeu et ajoutez les styles de calques suivants. La police utilisée ici est Celtique Garamond II.
Dessinez un rectangle arrondi sur le côté gauche de l'interface. Utilisez la couleur: # 605847. Ajoutez des dégradés subtils du gris au blanc.
Dupliquez la forme précédente et redimensionnez-la. Voir l'image ci-dessous pour référence.
Dessine un autre rectangle. Cette fois, utilisez une couleur plus claire. Ajouter une superposition de dégradé. Dupliquer et le placer sur la partie inférieure du grand rectangle.
Tracez une ligne de 1 px pour sa surbrillance et son ombre. Nous allons convertir cette forme en une forme 3D. Au final, vous verrez que ce petit détail de 1 px est nécessaire pour obtenir un résultat réaliste..
Dessinez une forme ci-dessous pour ajouter une perspective 3D à la forme. Ajouter le calque dégradé suivant.
Dessine une ombre sous la forme.
Dessinez la forme ci-dessous et complétez l'ombre. Ajouter un dégradé sur la forme.
Voici le résultat en vue à 100%.
Sélectionnez tous les calques et placez-les sur un groupe de calques. Dupliquez le groupe, retournez-le horizontalement et placez-le du côté opposé.
Dessinez la forme comme on le voit ci-dessous. Mettez en surbrillance les tons clairs et les ombres. N'oubliez pas d'ajouter une ombre douce de la forme dans la fenêtre de l'interface..
Ci-dessous vous pouvez voir le résultat à 100%. Dupliquer la forme deux fois.
Créez un nouveau calque sous la forme et peignez un pixel noir à l'aide d'un petit pinceau doux.
Dupliquer toute la forme. Retournez-le horizontalement et déplacez-le de l'autre côté de l'interface..
Ajoutez des textures de rouille couvrant toute l'interface. Commande / Ctrl-clic sur le bord de l'interface et le titre de la fenêtre pour créer une sélection en fonction de leur forme. Ajouter un nouveau masque de calque. Peignez la forme du titre en noir avec un pinceau à faible opacité, car nous ne voulons pas y voir trop de rouille. Ci-dessous, vous pouvez voir le masque que j'ai créé.
Réduire son opacité à 15%.
Créez un cadre dans l'interface de fenêtre. Cela est composé de deux chemins dont le chemin interne est défini sur Soustraire. Ajouter les styles de calque suivants.
Coller l'image PNG d'un véhicule à l'intérieur du cadre.
Derrière le cadre, ajoutez un nouveau calque et remplissez-le d'un dégradé de gris à blanc.
Peindre des ombres sous le véhicule.
Ajoutez un autre cadre sous l'aperçu du véhicule. Utiliser une technique similaire dans les étapes précédentes.
Ajouter des informations sur le cadre.
Dessine un autre cadre, cette fois plus grand.
Dessinez un rectangle simple à l'intérieur du cadre. Ajouter le style de calque suivant.
Ajouter du texte sur le rectangle.
Dupliquez le rectangle pour une autre donnée. Supprimer le style de calque Outer Glow et réduire son opacité à 30% par rapport au niveau inactif.
Dupliquer toute la forme pour créer un autre jeu de données.
Revenir à Illustrator, créer cette forme.
Collez la forme dans Photoshop en tant que calque de forme. Ajouter les styles de calque suivants.
Appliquez une peinture de surbrillance et d'ombre manuellement à l'aide d'un pinceau doux, de dureté 0% et d'opacité 5-10%.
Dupliquez la forme et retournez-la horizontalement.
Dessinez un rectangle bleu clair et placez-le derrière les formes. Ajouter les styles de calque suivants.
Dessinez quelques points saillants à l'intérieur de la forme. Ajouter le titre du bouton. Peindre une lueur légère sur le bouton.
Dupliquer le bouton et changer son titre.
Accentsconagua