Share
Tout d’abord, merci à Dan Wiersema (mon ami et directeur de la création chez Guifx) d’être le cerveau derrière ce tutoriel. Concept et fil de fer ont été développés par lui. Il m'a également aidé à aplanir les plis en termes d'évaluation de mon travail du début à la fin..
Dans ce didacticiel, nous allons créer une interface de menu principal pour un jeu iPhone fictif. Nous allons configurer Photoshop pour afficher avec précision la taille d’écran cible, définir une structure en fil de fer pour le projet, créer un arrière-plan, créer un logo, créer une texture rock pour la barre latérale et une texture en bois pour la boîte de jeux et les boutons enregistrés. . Nous ajouterons également la création de verdure pour les détails et la bonne mesure. Ça va être long, alors la patience est une vertu. En outre, le café aide!
Regardez l'image que nous allons créer.
Rendez-vous sur pxcalc.com et suivez les instructions. Cela vous permettra de visualiser le design dans sa taille finale - la taille réelle de l'écran de l'iPhone - sur votre ordinateur.
Créez un nouveau document avec une largeur de 480 pixels et une hauteur de 320 pixels, avec une résolution de 164,83 pixels / pouce. Définir le mode couleur sur RVB 8 bits.
Je vous recommande de créer une structure filaire pour votre projet, comme celle de l'image ci-dessous. La meilleure façon de le faire est de cliquer avec le bouton droit de la souris sur votre outil de zoom et de choisir la taille d'impression. Si vous avez suivi l'étape 1, vous verrez maintenant votre document à la taille exacte que l'utilisateur final utilisera sur son iPhone. Cela vous aide à déterminer la taille des boutons afin de fonctionner suffisamment sur un appareil à écran tactile.. Remarque: essayez de cliquer physiquement sur l'écran et n'oubliez pas de prendre en compte les gros doigts.
Utilisez l'outil Rectangle et faites glisser les repères de placement approximatifs pour les divers éléments. Gardez la couleur des formes blanche et ajoutez un trait intérieur noir de 1px. C'est aussi une bonne idée de simuler le concept au crayon et au papier. Même si vous n'êtes pas un bon artiste à main levée (je ne le suis pas, mais je le fais quand même), des croquis de serviettes vous aident à garder vos yeux sur le prix.!
Créez un nouveau calque et nommez-le "Arrière-plan". Définissez votre couleur de premier plan sur # 5e1114 et votre arrière-plan sur # 140306. Sélectionnez l'outil Dégradé et, avec les paramètres illustrés ci-dessous, faites glisser de haut en bas, comme l'indique la flèche..
Appliquez les styles de calque suivants au calque "Arrière-plan".
Réinitialisez vos couleurs de premier plan et d’arrière-plan en noir et en cliquant sur la touche D de votre clavier. Créez un nouveau calque et nommez-le "bg_clouds". Maintenant, allez dans Filtre> Render> Clouds. Définissez le mode de fusion de cette couche sur Superposition. Tamponnez-le dans des zones aléatoires avec la gomme, réglez-le sur une opacité de 30 à 50% avec un pinceau doux pour créer des reflets intéressants. Essayez de faire correspondre mon résultat ci-dessous.
Téléchargez cette image à partir de sxc.hu (Merci, Javier González). Appelez la couche "château", redimensionnez-la et placez-la approximativement en haut au centre de la scène. Définissez le mode de fusion du calque sur Multiplier et l’opacité sur 60%. Utilisez l'outil Gomme pour effacer les arêtes dures. Ci-dessous, mon résultat après cette étape.
Ok, jusqu'ici tout va bien. Commençons par créer notre logo. Saisissez votre outil de stylo et créez le contour de la tête d'un dragon. Pour ce faire, vous pouvez tracer une image de dragon au hasard ou créer la vôtre. Celui-ci se retrouvera toutefois avec des effets de calque très résistants, alors essayez de garder la forme assez simple.
Il existe une grande variété de formes libres et de dingbats que vous pouvez utiliser à la place, si vous ne voulez pas perdre de temps à tracer ou à imaginer une tête de dragon. Quand on veut, on peut.
Dupliquez votre forme 2 fois (calque> calque dupliqué…), de sorte que vous ayez 3 calques tête de dragon. Nommez celui du bas "dragon_1", celui du milieu "dragon_2" et celui du haut "dragon_3".
Il est temps de faire briller notre dragon. Cette technique est fortement basée sur le tutoriel d'Elliot AKA TrueLovePrevails sur la façon de reproduire le style du logo de Warcraft. Un grand merci lui va donc de développer cette technique fantastique et de me laisser l'utiliser. Cliquez ici pour visiter le didacticiel original.)
Appliquez les styles de calque suivants à chaque calque, en commençant par le calque "dragon_1"
Appliquez maintenant les styles de calques suivants à "dragon_2" et définissez l'opacité de remplissage de ce calque sur 0%.
Et encore une fois sur "dragon_3" et définissez l'opacité de remplissage de ce calque sur 0%.
Bon, le dragon a l'air bien - vérifiez! Ensuite, le texte.
Rendez-vous sur Fontcraft.com et téléchargez ou achetez Scurlock. Scurlock est une police de démonstration gratuite. Assurez-vous donc de lire les conditions d'utilisation et achetez une licence si vous souhaitez utiliser cette police à des fins commerciales..
Sélectionnez votre outil typographique et définissez la taille sur 60 pt. Tapez le texte "Dragon". Cliquez avec le bouton droit sur le calque et sélectionnez Convertir en forme. La raison en est que nous voulons supprimer le soulignement du "o". Pour ce faire, nous utilisons l'outil de sélection directe. Activez le masque vectoriel en cliquant sur la vignette et sélectionnez tous les nœuds du soulignement, puis appuyez sur la touche Suppr du clavier. Si vous ne pouvez pas les obtenir tous en une fois, maintenez la touche Maj enfoncée pour ajouter des éléments à la sélection..
Ensuite, prenez l'outil de sélection de chemin et cliquez sur le "o". Allez dans Édition> Transformation libre et faites glisser le nœud central inférieur vers le bas de manière à ce que le "o" semble correspondre au reste du texte. Maintenant, dupliquez le calque deux fois, comme nous l’avons fait avec le dragonhead. Nommez les couches à partir du bas "dragontext_1", "dragontext_2" et dragontext_3 "respectivement.
Cachons la couche "château" pour le moment, car elle n’a que peu d’importance pour la mise en page et cause surtout un peu de distraction lors de la conception..
Cliquez avec le bouton droit sur le calque "dragon_1" et sélectionnez "Copier le style du calque". Maintenant, cliquez avec le bouton droit sur le calque "dragontext_1" et sélectionnez Coller le style du calque. Cliquez avec le bouton droit sur le calque "dragon_2" et sélectionnez Copier le style du calque. Maintenant, faites un clic droit sur le calque "dragontext_2" et sélectionnez Coller le style du calque. Changer l'opacité du mode ombre sous biseau et embosser à 43%.
Sélectionnez "dragontext_3" et définissez l'opacité de remplissage à 0%. Puis appliquez les styles montrés dans l'image ci-dessous. Lorsque vous avez terminé, répétez les étapes 9 et 10 pour le texte "Tempête" (en nommant les couches stormtext_ #) et placez le texte à peu près comme indiqué ci-dessous..
Cliquez sur la vignette du masque vectoriel du calque "dragontext_2" avec la commande pour charger la sélection. Vous verrez les fourmis en marche apparaître autour de votre texte. Assurez-vous que "dragontext_2" est votre calque actif, car cela nous permettra de placer le calque de réglage que nous sommes sur le point de créer, juste au-dessus de "dragontext_2".
Cliquez maintenant sur le bouton Créer un nouveau calque de remplissage ou de réglage situé sous la palette des calques. Dans la liste, sélectionnez Balance des couleurs et appliquez les paramètres ci-dessous. Ensuite, cliquez sur Commande + D pour désélectionner. Faites de même pour le calque "swordtext_2".
Les détails parlent d’eux-mêmes, alors ajoutons un peu plus de texte pour plus d’effet. Tapez "Scroll of the Wicked" en utilisant à nouveau la police Scurlock, à une taille de 18,5 points. Pour le texte "Scroll" et "Wicked", définissez la taille du texte sur 14,5 points. Pour "du" texte, utilisez # C9C9C9 comme couleur de texte et appliquez les styles de calque suivants.
J'espère que vous êtes toujours avec moi. Passons à la barre latérale.
A l’aide de votre outil Plume, créez une forme semblable à un bloc, semblable à celle de l’image ci-dessous. Soyez créatif ici. Il n'y a pas de bon ou de mauvais à faire ce genre de choses, il suffit donc de fusionner une forme sans trop se préoccuper des détails. Dupliquez cette couche et appelez celle du haut "sidebar_base". Nommez celui du bas "sidebar_perspective". Appliquez maintenant les styles de calque suivants au calque "sidebar_base".
Déplacez le calque "sidebar_perspective" 6px à gauche, cliquez dessus avec le bouton droit de la souris et sélectionnez Rasterize Layer..
Définissez l'outil de gravure à l'aide des paramètres ci-dessous, puis peignez le bord de la perspective en gardant à l'esprit la source de lumière de l'esquisse du concept, là où la lumière risque le moins de l'atteindre. Avec l'outil Dodge, peignez les zones opposées. En ce qui concerne les textures de pierre, je trouve qu'il est efficace de tamponner plutôt que de caresser, car cela crée l'illusion d'une surface rugueuse. Enfin, donnez au calque une ombre portée.
Téléchargez cet ensemble de pinceaux de Lee Richardson. Créez un nouveau calque au-dessus de "sidebar_base" et nommez-le "sidebar_texture_1". Cliquez maintenant sur le calque "sidebar_base" pour charger la sélection de forme. Sans relâcher la commande, appuyez sur Maj pour ajouter à la sélection, puis cliquez sur le calque "sidebar_perspective". Suivant Saisissez votre outil Pinceau et sélectionnez le deuxième pinceau du jeu que vous venez de télécharger. Avec votre couleur de premier plan définie sur le noir, cliquez une fois dans la sélection et appuyez sur Command + D sur votre clavier. Définir l'opacité de ce calque sur 50%.
Définissez la couleur de votre avant-plan sur # 160A02 et créez un autre calque. Nommez-le - vous l'avez deviné - "sidebar_texture_2". Répétez le processus à partir de l'étape 15, en utilisant cette fois le quatrième pinceau de l'ensemble. Il est plus petit, vous aurez donc besoin de deux clics pour couvrir toute la surface. Avec cette couche sélectionnée, sélectionnez Filtre> Flou> Flou gaussien. Définissez-le sur un rayon de 1,5, puis cliquez sur OK. Vous devriez avoir quelque chose comme l'image ci-dessous.
Ajoutons quelques imperfections à la surface de la roche. Créez un nouveau calque et nommez-le "fissures". Sélectionnez l'outil Pinceau et variez le rayon principal entre 2px et 5px, la dureté de 60% à 80% et maintenez l'opacité du pinceau à 55%. Essayez de ne pas vous inquiéter de l'obtenir droite. Le style de calque fera le gros du travail, et la forme la plus étrange peut s'avérer géniale. Lorsque vous êtes satisfait des fissures, appliquez le style de calque suivant et devenez encore plus heureux..
Créez encore un autre calque, celui-ci au-dessus du calque "fissures", et appelez-le "edge_bumps". Sélectionnez l'outil Crayon avec un diamètre principal de 1px et tracez quelques imperfections de couleur noire le long de la ligne en surbrillance ci-dessous. définir l'opacité du calque sur 76%, puis appliquer le style de calque suivant au calque.
Créez un nouveau calque au-dessus du calque "edge_bumps". Commande-cliquez sur la couche "sidebar_perspective". Prenez n'importe quel pinceau à éclaboussures par défaut de Photoshop et tamponnez ça et là sur le bord, tout en maintenant l'opacité du pinceau à 55%. Copiez le style de calque du calque "edge_bumps" et collez-le sur ce calque. Définir l'opacité des calques sur 55%.
Passons à la création du bois. Créez une forme comme celle ci-dessous pour notre grand plateau de jeux en bois. Définissez la couleur de la forme sur # 463118. Appelez la couche "saved_games_base" et appliquez-lui les styles suivants.
A l’aide de votre outil Plume, essayez de reproduire la forme présentée ci-dessous et placez-la sous le calque "saved_games_base". Les bords importants sont surlignés en rouge. Nommez-la "saved_games_perspective" et définissez la couleur de cette forme sur # 14100D. Appliquez également une ombre portée comme indiqué..
Téléchargez la première texture de cette texture définie par cgtextures.com. Déposez-le sur votre scène et redimensionnez-le / faites-le pivoter jusqu'à obtenir l'apparence souhaitée. Placez-le au-dessus et sur la couche "Saved_games_base" et renommez-le "wood_texture_1". Tout en maintenant la touche Commande enfoncée, cliquez sur "Saved_games_base", puis sur Commande + Maj et en cliquant sur "Saved_games_perspective" pour l'ajouter à la sélection. Sélectionnez "wood_texture_1" et cliquez sur le bouton Ajouter un masque de calque, situé sous la palette des calques. Définissez le mode de fusion des calques sur Lumière douce..
Dupliquez ce calque une fois, nommez-le "wood_texture_2", définissez le mode de fusion sur Superposition et Opacité sur 15%..
Répétez les étapes 20 à 22 pour les boutons. Essayez de faire varier un peu le dégradé et d’utiliser reflété au lieu de radial. Pour garder une trace de vos calques, vous pouvez ajouter les calques de boutons à un groupe. Essayez de faire correspondre les résultats indiqués ci-dessous.
Allumons un peu les choses. Sélectionnez la couche supérieure du document, puis cliquez sur Créer un nouveau calque de remplissage ou de réglage, comme nous l'avons fait à l'étape 11 pour le texte. Cette fois, sélectionnez des niveaux dans la liste et faites glisser le nœud central vers 1,39, ce qui se trouve légèrement à gauche..
Tout en maintenant la touche Commande enfoncée, cliquez sur la couche "stormtext_1", puis appuyez sur Commande-Maj, puis cliquez sur les couches "dragontext_1" et "dragon_1". Sélectionnez la vignette du calque Niveaux et sélectionnez Edition> Remplir, puis remplissez la sélection de noir. Maintenant, le texte et dragonhead ne seront pas affectés par la couche de niveaux.
Ensuite, nous allons ajouter un calque de réglage de la luminosité / du contraste, en utilisant exactement la même méthode que nous avons utilisée pour les niveaux, en veillant notamment à ce que le "Dragon Storm" TEXTE SEULEMENT ce temps n'est pas affecté par cette couche en la masquant. Réglez la luminosité sur 25 et le contraste sur 35.
Avec votre outil Rectangle, au-dessus du calque "wood_texture_2", créez une forme carrée comme dans les images ci-dessous. Nommez cette couche "inset_rim", dupliquez à présent cette couche et appelez celle du haut "inset_base".
Appliquez les styles suivants, en commençant par "inset_rim" et en utilisant une opacité de remplissage de 0%.
Pour "inset_base", utilisez les mêmes paramètres et une opacité de remplissage de 60%.
Dupliquez deux fois "inset_rim" et "inset_base" et placez-les comme indiqué dans le bas des images ci-dessous..
Téléchargez "Livingstone" de PrimaFont sur dafont.com. Tapez tout le texte que vous voyez ci-dessous, en utilisant #ECDECB comme couleur de texte. La taille n’est pas très importante, essayez simplement d’apparenter grossièrement ce qui est montré ci-dessous. Puis appliquez le style suivant à tous ces calques de texte.
Définissez la couleur de votre premier plan sur # 636363 et créez un nouveau calque sous les boutons. En utilisant votre outil de pinceau réglé sur une dureté de 85% avec un diamètre principal de 1px, peignez un O forme, comme dans l'image ci-dessous. Voir la sélection des fourmis en marche. Dupliquez-le et placez les copies comme indiqué.
Suivez l’étape ci-dessus pour toutes les zones de l’image ci-dessous comportant des chaînes et appliquez le style suivant à tous les calques. Il y aura plusieurs couches, utilisez donc des groupes pour les suivre..
Rendons à nouveau la couche "château". Puisque nous entrons dans la phase de détail de ce projet, il est bon d’avoir une vision claire du résultat final..
Maintenant, en utilisant votre outil de stylo à nouveau, avec le noir défini sur votre couleur de premier plan, créez une forme comme celle qui se trouve dans la zone de jeux sauvegardés ci-dessous. Faites-le principalement carré, mais coupez les coins pour lui donner une forme plus intéressante. Appelez cette couche "tablette". Appliquez les styles de calque suivants:
En utilisant à nouveau la police Livingstone, tapez le texte que vous voyez dans la tablette de pierre des jeux sauvegardés ci-dessous et appliquez les styles de calque suivants. Lorsque vous avez terminé, dupliquez la tablette entière et placez-la dans la deuxième case, comme indiqué dans l'image ci-dessous..
Définissez la couleur de votre avant-plan sur # 2E343A et, avec votre outil Stylo, créez une petite forme de diamant (environ 10 pixels par 10 pixels). Cela va être la base de nos rivets. Nommez le calque "rivet_inset" et dupliquez-le deux fois. Nommez la couche de rivet du milieu "rivet_base" et celle du haut "rivet_style". Ajoutez les styles suivants, respectivement, en commençant par "rivet_inset".
Maintenant, appliquez les styles de calque suivants au calque "rivet_base".
Maintenant, appliquez les styles de calque suivants au calque "rivet_style".
Maintenant, dupliquez le rivet en entier trois fois et placez-en un dans chaque coin de la boîte de jeu sauvegardée, comme dans l'image ci-dessous..
Créez 4 petits cercles (environ 4 pixels sur 4 pixels) à la base de la boîte de jeux sauvegardés, en utilisant l'outil ellipse et # CCB55A comme couleur de premier plan. Ce sont les indicateurs de page que l’on trouve souvent dans les applications iPhone. Aux trois premiers, appliquez ces styles.
Changez la couleur du quatrième cercle en # FFA200 en double-cliquant sur la vignette de la couleur de la forme. Puis appliquez le style suivant.
Il est temps de plonger dans la dernière étape et probablement la plus difficile. Cela pourrait en fait être un tout autre tutoriel en soi, mais je vais essayer de le garder basique. Je vais essayer d'expliquer cela au mieux de mes capacités en utilisant des images, mais ça va être un apprentissage en faisant de l'expérience pour quiconque découvre cette technique.
Vous pouvez également ajouter un masque flou à la feuille si vous souhaitez des détails plus précis. Les paramètres seraient les suivants: montant 50%, rayon 0.5px et seuil de 0.
Ajoutez de la verdure, ici et là pour la rendre plus intéressante. Vous pouvez aller encore plus loin que moi et en ajouter également sur la boîte de jeux sauvegardés. Merci beaucoup d'avoir suivi ce tutoriel et j'espère que vous avez appris de nouvelles techniques. Ci-dessous le résultat final.
Accentsconagua