Share
Ceci est le deuxième d'une série de tutoriels en deux parties sur la reconstitution d'une application iPhone avec Photoshop. Besoin de se rattraper? Lisez la première partie sur PSDTuts +! Nous allons couvrir le reste de la conception de l'interface utilisateur de l'application dans ce didacticiel, en accordant une attention particulière aux petits détails délicats, tels que la typographie, la conception des boutons et les champs de saisie de texte, qui feront ressortir la conception globale..
Nous avons terminé le didacticiel précédent en complétant la page de lancement de nos applications, ainsi que le fond principal de nos écrans et l'en-tête / la barre de navigation de chaque écran..
Une fois que vous avez ouvert votre document dans Photoshop, nous allons directement travailler sur nos icônes. Dans le tutoriel précédent, nous avons déjà défini l’arrière-plan, la zone de la barre d’outils et l’arrière-plan du texte (où nous allons placer notre texte, nos boutons et tout le reste). Nous voulons quatre icônes différentes, qui représenteront toutes la même chose dans l’application originale. Les quatre icônes sont:
Pour créer nos icônes, nous allons utiliser quelques repères de règles pour nous assurer qu'ils ont tous la même taille. Aller à Voir> Règles s'ils ne sont pas déjà sur votre écran. Faites glisser deux guides des règles et placez-les à côté de notre fond blanc.
Sélectionnez le Outil de chapiteau rectangulaire et créez une sélection de taille fixe de 100x75px. Cliquez quelque part sur votre toile et placez la sélection à côté de votre guide de gauche dans la barre d'outils..
Faites glisser un autre guide de la règle, et faites-le se terminer directement à la fin de votre sélection (il devrait se casser automatiquement).
Répétez cette étape en faisant glisser un guide vers le haut et le bas de la sélection..
Continuez à répéter cette étape jusqu'à ce que nous ayons quatre rectangles différents constitués de guides.
Ces formes seront utilisées pour placer nos icônes. La raison pour laquelle elles sont plus larges que hautes est que nous allons également placer le titre des icônes en dessous. Nous centrerons chaque icône et chaque élément de texte dans notre grille.
En utilisant la même technique que nous venons d’utiliser, ajoutez quelques guides supplémentaires afin que nous sachions où placer nos icônes et notre texte, comme indiqué ci-dessous:
Bien que cela semble déroutant, une fois que nous aurons commencé à concevoir des icônes et à insérer notre texte, les choses auront l'air beaucoup plus simples..
Maintenant que nous avons configuré nos guides, nous pouvons réellement commencer à concevoir nos icônes et notre texte. Je vais commencer par le texte. Prenez le Outil texte et sélectionnez une police propre et facile à lire. Le texte sera très petit, il doit donc être propre! Je vais utiliser Helvetica pour toutes les polices de mon corps. Remplissez les espaces que vous avez créés pour votre texte en vous assurant de placer vos zones de texte dans le dossier de la barre d’outils..
Je recommande d'aligner votre texte manuellement à l'aide des touches du curseur, car les options d'alignement intégrées (texte) de Photoshop peuvent parfois être un peu décalées et il est important que ces courts titres soient bien centrés. Une fois que vous avez placé votre texte, nous devons y ajouter quelques styles. Ouvrez la fenêtre Styles de calque (Options de mélange) et assurez-vous que l'icône d'aperçu est cochée..
Le premier style que nous allons appliquer est une simple superposition de couleurs. J'utilise la couleur # 955425, une teinte brun moyen tirée du titre de l'en-tête des applications..
Le prochain style à ajouter est un simple trait de 1 pixel utilisant la couleur # E5C39B. Assurez-vous que le trait est appliqué à l'extérieur de votre texte et non à l'intérieur.
Pour faciliter la lecture du texte et l'adapter davantage à notre style en bois, nous allons appliquer un style d'ombre interne. Définissez l’opacité de votre style sur 65%, votre distance et votre taille sur 2 px. J'ai orienté mon ombre intérieure à 45 degrés.
Après avoir appliqué les styles mais en cliquant sur le bouton OK, nous devons appliquer les mêmes styles à nos autres titres d'icônes. Pour ce faire, sélectionnez votre calque de texte "Sortir" puis accédez à Clic droit> Copier le style de calque. Sélectionnez tous les autres calques de texte en même temps en maintenant la touche Maj enfoncée, puis allez à Clic droit> Coller le style de calque appliquer le même style à vos autres titres.
Maintenant que les titres des icônes sont tous terminés, il est temps de créer de simples icônes. Pour créer nos icônes, nous allons utiliser les différentes Outils de chapiteau. La première icône que nous allons produire est l'icône de rapport, car ce sera le plus simple! Créez un nouveau calque et appelez-le "Icône de rapport".
Nous voulons que l’icône s’insère bien dans notre guide carré que nous avons créé pour elle. Sélectionnez le Outil de chapiteau rectangulaire et faites une petite sélection dans votre carré, comme on le voit ci-dessous:
Remplissez la sélection de noir, puis décalez la sélection de quelques pixels et répétez le processus. Continuez comme cela jusqu'à ce que vous ayez une belle rangée de formes noires.
Faites une nouvelle sélection, cette fois en allant horizontalement au lieu de verticalement.
Appuyez sur la touche Suppr pour supprimer les zones inutiles des lignes que nous venons de créer. Cela créera une icône qui représentera facilement une liste ou un document de type rapport. Collez le style de calque que nous venons de créer sur l'icône.
Avant de passer à une autre icône, faites glisser un nouveau guide de la règle et placez-le directement sous notre nouvelle icône, comme indiqué ci-dessous:
Pour notre icône de paramètres, nous allons créer une simple icône de clé. Créez un nouveau calque et appelez-le "Icône Paramètres". Sélectionnez le Outil Lasso Polygonal et tout en maintenant la touche Maj enfoncée, créez une demi-clé comme indiqué ci-dessous:
Remplissez la forme avec du noir, puis dupliquez le calque.
Aller à Édition> Transformer> Retourner verticalement pour retourner la forme de clé dupliquée. Aller à Édition> Transformation libre et tout en maintenant la touche Maj enfoncée, tournez votre seconde clé à moitié.
En utilisant les touches du curseur, déplacez la forme de votre clé ensemble, puis fusionnez les deux couches de clé.
Déplacez, faites pivoter et redimensionnez votre clé jusqu'à ce qu'elle soit belle, puis appliquez-lui le ou les styles de calque copiés..
En utilisant des techniques similaires, créez vos propres icônes "dépensier" et "sortant". Vous pouvez ensuite retirer vos guides en allant à Voir> Effacer les guides.
Sélectionnez individuellement chacune de vos quatre icônes et réduisez leur opacité à environ 80%. Cela permettra au grain de bois de transparaître et donnera à la barre d’outils de navigation un peu plus de profondeur..
Sélectionnez chacune de vos icônes et de leurs titres, puis dupliquez-les. Fusionnez-les tous ensemble en allant dans Couche> Fusionner vers le bas. Ouvrez les options de style de calque (options de fusion) de votre nouveau calque fusionné et supprimez-les toutes de la superposition des couleurs. Changez la couleur de la superposition en blanc et cliquez sur OK.
Placez votre nouveau calque blanc en dessous de tous vos autres calques d'icône et de titre d'icône, puis, en utilisant les touches de direction, déplacez votre calque d'un pixel. Réduisez l'opacité du calque à environ 20%. C'est un changement très subtil, mais tout ajoute à la qualité du look final des applications.
Avec les icônes de navigation terminées et époussetées, il est temps de passer à la zone de contenu principale. Comme mentionné dans la première partie du didacticiel, beaucoup d'écrans sont assez similaires (juste des titres différents), nous allons donc nous concentrer sur quelques-uns seulement:
Nous allons commencer avec l'écran Spendometer. Sélectionnez votre Outil texte et en utilisant le même caractère que vous avez utilisé pour vos titres d'icônes, tapez "Vous dépensez encore de l'argent? Combien cette fois-ci?" au sommet de votre boîte blanche. Ma taille de police était fixée à 4 points. Assurez-vous de créer cette nouvelle zone de texte dans votre dossier de calques de compteur de dépenses.
Ouvrez la fenêtre Style de calque (fenêtre Options de mélange) pour votre prochain calque de texte. Appliquez un style superposition de couleurs en utilisant la couleur # 613111 (un brun foncé). Ajoutez également une ombre portée en utilisant les paramètres standard avec une opacité de 15%..
La tâche suivante consiste à créer notre zone de saisie de texte et notre bouton. Sélectionnez le Outil de chapiteau rectangulaire et créez une taille fixe de 550x100 pixels. Cliquez sur la toile et centrez votre sélection. Créez un nouveau calque et appelez-le "Entrée d'argent". Aller à Sélectionnez> Modifier> Lisser et entrez un rayon de 5px et cliquez sur OK.
Remplissez votre sélection avec du noir. Avant de désélectionner votre forme, allez à Sélectionnez> Modifier> Contrat et contractez votre forme de 10 pixels. Créez un nouveau calque et appelez-le "Champ de saisie d'argent", remplissez votre nouvelle sélection de noir..
Sélectionnez votre couche "Entrée d'argent" et ouvrez la fenêtre Options de fusion. Appliquez une superposition de couleurs en utilisant la couleur # E4DCD5. Nous allons également ajouter une Inner Shadow très subtile, en utilisant les options ci-dessous:
Réduisez l'opacité du calque sur lequel nous venons de travailler à environ 50%. Ouvrez la fenêtre Options de fusion de votre couche appelée "Champ de saisie d'argent". Appliquez une superposition de couleur blanc pur au champ de texte et un trait de 1px en utilisant la couleur # C0B8B0.
Reproduisez les deux formes que nous venons de créer et abaissez-les. Renommez-les en "Arrière-plan épuisé" et "Bouton épuisé". Ouvrez la fenêtre Options de mélange de votre calque appelée "Bouton dépensé". Supprimez toutes les options en cours et appliquez une superposition de dégradé. Je vais utiliser les couleurs vertes allant de # 50911B à # A0D327. Une fois que vous êtes satisfait de votre incrustation en dégradé, cliquez sur le bouton OK..
Nous allons ajouter quelques touches supplémentaires à notre bouton, mais comme nous allons être très précis avec eux et faire attention à tous les petits détails, nous allons le faire manuellement. Sélectionnez le contenu de votre couche de boutons.
Créez un nouveau calque au-dessus de votre bouton et appelez-le "Bouton contour externe". Aller à Edition> Contour et appliquez un trait 1px en utilisant n'importe quelle couleur à l'extérieur de votre sélection.
Ouvrez la fenêtre Options de fusion des calques de contour et appliquez un dégradé par défaut avec des couleurs allant de # 30580F à # 86BD23..
Répétez les deux dernières étapes, mais cette fois en utilisant un trait de 1px à l'intérieur de votre sélection et en utilisant un dégradé allant de # 53941B à # E2E8D4..
Sélectionnez le Outil texte et faites glisser une zone de texte sur votre bouton. Tapez "SPEND IT" dans votre zone de texte. J'ai utilisé Helvetica Bold réglé à 8 points (taille). Alignez votre texte au centre de votre bouton.
Appliquez une superposition de dégradé à votre texte, en passant d’un gris très clair (j’ai utilisé #EBEBEB) à un blanc (#FFFFFF). Nous souhaitons également appliquer une ombre interne en utilisant les paramètres ci-dessous:
Faites une sélection de votre forme de bouton d'origine, puis créez un nouveau calque au-dessus de tous vos autres calques de bouton. Appelez-le "bruit de bouton". Remplissez votre sélection de blanc, puis allez à Filtre> Bruit> Ajouter du bruit. Ajoutez environ 25% de bruit, puis cliquez sur OK..
Changez le mode de fusion des calques en Lumière douce et baissez l'opacité du calque d'environ 50%. Cela ajoute une belle texture subtile à notre bouton. Maintenant que nous avons fait cela, nous avons tous terminé avec la conception de nos boutons! Un moyen rapide, simple et efficace de donner l'impression que le bouton a été actionné consiste à le faire pivoter de 180 degrés, de sorte que le vert plus foncé se trouve en haut et non en bas..
Dans la conception initiale de l'application, il y avait des écrans distincts pour les statistiques du compteur de dépenses (la page qui affiche combien vous avez dépensé et combien il vous reste à dépenser) et la page que nous venons de concevoir. Je pense cependant qu'il est inutile d'avoir deux écrans, alors je vais le réduire à un seul et mettre toutes ces autres informations sur le même écran que celui que nous venons de concevoir..
Les informations que nous devons afficher sous notre bouton sont les suivantes:
Après avoir augmenté la taille de mon "Dépense encore? Combien cette fois-ci?" texte, je vais passer à la "stats" sous le bouton. Faites glisser quelques guides sur votre toile, comme indiqué ci-dessous:
Prenez le Outil texte et faites glisser une zone de texte dans l'espace restant sur votre écran. Tapez votre premier titre ("Taux de dépense actuel"), puis appliquez le même style que celui utilisé pour "Dépenser encore?" texte à votre nouveau type.
Répétez l'étape deux fois encore en utilisant les autres titres stat.
Abaissez l'opacité des trois types de caractères à environ 90% pour les rendre un peu plus légers que notre autre texte. Cela ne fait pas une énorme différence mais les différencie légèrement. Dupliquez votre couche de type "Taux de dépense actuel" et déplacez-la dans la colonne de droite. Changez le texte en "XX.XX $ par jour". Augmentez un peu la taille de votre police et alignez-la au centre de la colonne avec les touches du curseur.
Répétez cette étape pour obtenir quelque chose de similaire à la capture d'écran ci-dessous:
Pour terminer ces statistiques, nous allons ajouter une belle et subtile bordure striée de 2 pixels. Créez un nouveau calque et appelez-le "Blanc de bordure de contour". Sélectionnez votre Outil de chapiteau à une rangée et faites un choix entre votre bouton "Dépenser" et le titre "Taux de dépense actuel". Remplissez la sélection avec une couleur légèrement plus sombre que l'arrière-plan - j'utilise # E1D9D3.
Dupliquez le calque et renommez-le "Stroked Border Black", puis décalez-le d'un pixel afin que la nouvelle ligne se trouve directement sous votre ancienne. Sélectionnez le contenu des calques et remplissez-le avec une couleur légèrement plus sombre que celle que nous venons d'utiliser - j'ai utilisé # A59C93.
Comme vous pouvez le voir sur la capture d'écran ci-dessus, notre bordure / séparateur est constitué de zones superposées que nous ne souhaitons pas. Sélectionnez le calque "Contour noir" et appuyez sur la touche Cmd + E combinaison pour le fusionner vers le calque de trait blanc. Renommez le calque en "Séparateur". Sélectionnez le Outil de chapiteau rectangulaire et faites une sélection sur le côté gauche de votre écran.
Frappé le Touche de suppression supprimer le séparateur inutile. Déplacez votre sélection sur le côté droit et répétez le processus.
En utilisant les touches du curseur, déplacez votre séparateur haut / bas pour s’assurer qu’il est centré entre le bas du bouton et le haut de votre texte - le mien est exactement 30 pixels sous mon bouton et 30 pixels au-dessus de mon texte. Réduisez l'opacité de votre couche de séparateurs à environ 50%. J'ai ensuite décidé de le retourner afin que la couleur plus claire sur le fond que je me sentais cela semblait mieux.
Répétez le processus plusieurs fois de plus jusqu'à ce qu'il y ait un séparateur sous chaque ligne de texte. Pour ce faire, vous pouvez rapidement dupliquer chaque calque précédent, puis le réduire au minimum. J'ai également déplacé tout le dossier de statistiques de manière à ce qu'il se trouve au centre, entre le bouton et le bas de notre fond blanc..
Ajoutez quelques touches finales, telles que le changement des couleurs de nos figurines à dépenser. J'ai aussi réaligné mes chiffres à droite.
Après avoir ajouté du texte factice à notre champ de texte monétaire, nous avons terminé la conception de nos premiers écrans! Le bouton ici est clairement ce qui attire le regard, avec son dégradé de vert audacieux et l'attention portée aux petits détails tels que les traits blancs et noirs..
Le reste de nos pages (énumérées ci-dessus) utilisera une combinaison des techniques que nous avons déjà utilisées au cours des étapes précédentes de ce tutoriel et de la première partie. Mettez les techniques que vous avez appris à utiliser pour produire vous-même le reste de la conception de l'application.
Vous trouverez ci-dessous les captures d'écran du dessin original à côté de l'interface utilisateur de l'application redessinée que vous avez appris à créer vous-même..
Donc, voilà le résultat final de ce tutoriel assez long en deux parties qui a bien tourné! Publiez des liens vers vos résultats dans la section commentaires ci-dessous - nous aimerions les voir.!
Nous recherchons activement des concepteurs pour apporter leurs compétences en conception mobile à notre communauté. Contactez-nous aujourd'hui si vous êtes intéressé par la rédaction de contenu payant.!
Accentsconagua