Share
Dans ce tutoriel, nous allons concevoir l'interface utilisateur d'une application financière pour iPhone dans Photoshop. Nous allons utiliser un tas de techniques modernes pour vraiment faire ressortir ce design! Le tutoriel sera divisé en deux parties, alors assurez-vous de vous abonner via RSS ou par e-mail pour consulter le reste du tutoriel.!
Quelle que soit la conception choisie, vous devriez commencer par un croquis, même s'il est très grossier. Nous allons concevoir une interface adaptée à une application financière, telle qu'une banque, où vous pourrez consulter votre solde, vos relevés, etc. Nous allons simplement créer quelques écrans de l'application tout au long des deux parties. série de tutoriels: la page d'accueil, la page de relevé et la page d'ajout de compte. Ces trois pages comprendront des icônes / navigation, une liste et des champs de texte. Si vous souhaitez créer plus de pages après le tutoriel, elles seront essentiellement composées des mêmes éléments que ceux que nous allons apprendre à créer..
Vous trouverez ci-dessous une esquisse numérisée dans l'interface utilisateur que j'ai créée pour baser la conception de notre application sur:
Nous allons concevoir l'application aux dernières dimensions de l'iPhone 4, qui mesurent 640 x 960 pixels avec une résolution de 326 ppp. Ouvrez Photoshop et allez à Fichier> Nouveau. Créez le nouveau document en utilisant ces paramètres:
Rendez-vous sur Teehan + Lax pour télécharger le pack PSD (Retina Display) pour iPhone 4. Ce pack nous permettra de récupérer des éléments pour notre application, même si nous n'en utiliserons pas beaucoup car la plupart de nos conceptions sont hautement personnalisées..
Ouvrez le fichier que vous venez de télécharger dans Photoshop. Dans le panneau Calques, recherchez le dossier intitulé "barre supérieure (application)". Sélectionnez ce dossier et faites-le glisser dans votre PSD de conception d'application..
Retournez dans notre fichier PSD des éléments de l'interface graphique et faites glisser le curseur sur le calque "Bar (Gris - Bleu)":
Enfin, faites glisser sur le dossier "bas de la barre". Nous allons fortement les modifier. Si vous lisez ce didacticiel, vous savez probablement déjà jouer avec des formes simples. Vous devriez donc pouvoir créer quelque chose de similaire à ceux-ci de toute façon. La première chose à faire est de supprimer les deux boutons "retour" et "éditer" de notre barre supérieure, car nous n'en aurons pas besoin. Supprimez les dossiers "bouton Précédent" et "bouton bleu" du dossier "Bar (Gris - Bleu)"..
Nous allons commencer à jouer avec nos couleurs maintenant et baser le reste de l'application sur les couleurs que nous décidons d'utiliser dans les barres que nous avons déjà. Ouvrez la fenêtre des styles de calque du calque intitulé "background" dans le dossier "Bar (Blue - Grey)"..
Je vais utiliser un jeu de couleurs vert et argent pour la conception de mes applications. Dans la fenêtre Styles de calque, ouvrez la section Incrustation de dégradé, puis ouvrez la fenêtre de l'éditeur de dégradé, comme indiqué ci-dessous:
Changez les couleurs en une couleur de votre choix. J'utilise deux couleurs dans mon dégradé, allant de sombre (# 719100) à clair (# A1CF00).
La couche suivante, intitulée "Ombre foncée du bas", est beaucoup trop perceptible pour le look subtil que je vais rechercher dans mon dessin. Réduisez l'opacité à environ 50%. Faites la même chose pour la couche suivante intitulée "top surbrillance".
Nous allons maintenant ajouter du bruit à notre barre supérieure. Sélectionnez les 4 couches dans notre dossier "Bar top", puis faites un clic droit et sélectionnez "Rasteriser les couches".
Créez un nouveau calque et appelez-le "bruit de la barre supérieure", placez-le au-dessus du calque "arrière-plan", comme indiqué ci-dessous:
Maintenez la touche Cmd enfoncée (ou la touche Ctrl sous Windows) et cliquez sur la vignette située dans le panneau des calques à côté de votre calque "d'arrière-plan". Cela devrait faire une sélection de votre forme. Cliquez sur votre calque "top bar noise", puis remplissez la forme avec du blanc.
Aller à Filtre> Bruit> Ajouter du bruit, et utilisez les paramètres suivants:
Après avoir appuyé sur le bouton OK, changez le mode de fusion des calques en "Superposition" et baissez l'opacité à 25%. Cela aide à ajouter un peu de détail à la conception de nos applications. Nous allons utiliser un bruit subtil comme texture tout au long du didacticiel, alors n'oubliez pas de vous rappeler comment nous l'avons fait.!
Nous allons maintenant changer la couleur de notre barre d'état (la barre tout en haut qui affiche le signal du téléphone, etc.). En utilisant la même technique que celle utilisée précédemment pour modifier la couleur de la barre supérieure, modifiez votre barre d'état en un dégradé vert foncé.
Parcourez vos différents calques et modifiez tous les objets de la barre d'état en blanc (tels que la batterie, l'heure, etc.). C'est très facile à faire, il vous suffit simplement de supprimer tous les dégradés et de les remplacer par une superposition de couleurs dans la fenêtre de style de calque..
Zoomez sur la barre du haut et sélectionnez l'outil Rectangle de sélection. Faites un petit choix de largeur dans le haut de votre barre supérieure, en vous assurant qu'il mesure seulement 2 pixels de haut..
Créez un nouveau calque dans votre dossier "barre supérieure" en vous assurant qu'il est placé au-dessus de tous les autres calques. Appelez-le "coup de pinceau" et, enfin, remplissez votre sélection de blanc, réduisant ainsi l'opacité du nouveau calque à 45%..
Il est temps de changer le texte qui se lit actuellement "Label". Sélectionnez l'outil Texte et cliquez sur le texte pour nous permettre de le modifier. Tapez quelque chose qui correspond à votre idée d'application, dans mon cas c'est "Bankapp".
Jouez avec les polices et les tailles - je vais utiliser une police de caractères appelée "Blue Highway" réglée à 10 pt.
Ouvrez la fenêtre des styles de calque pour votre texte et supprimez entièrement les paramètres Ombre portée. Cliquez sur OK.
Dupliquez votre calque de texte et changez la couleur de votre texte d'origine en vert foncé. Déplacez l'ancien texte de 2 pixels vers le bas, puis de 2 pixels vers la droite. Abaisser l'opacité à 25%.
Nous allons maintenant travailler sur la barre inférieure. Je vais faire le mien en argent. En regardant en arrière sur l'esquisse, la barre sera séparée en deux boutons. En utilisant le même processus que nous avons utilisé précédemment, changez votre barre bleue inférieure en une barre argentée. J'ai utilisé un très très petit soupçon de vert dans mes couleurs pour lui donner ce petit punch supplémentaire. Les couleurs que j'ai utilisées sont # B9BFB7 et # E8EDE6.
En utilisant la même technique que celle utilisée précédemment, ajoutez du bruit à la barre inférieure..
Remplissez votre arrière-plan principal avec un gris clair (j'ai utilisé le # F9F9F9). Aller à Filtre> Bruit> Ajouter du bruit et ajouter du bruit à votre fond.
Sélectionnez l'outil de sélection rectangulaire et faites deux petites sélections au-dessus de votre barre inférieure et sous votre barre supérieure. Remplissez-les de noir sur un nouveau calque directement au-dessus du calque d'arrière-plan principal.
Aller à Filtre> Flou> Flou Gaussien et brouillez vos nouvelles formes d'environ 15 pixels.
Changer l'opacité des calques à 15%. Ces nouvelles formes floues agiront comme des ombres sous nos barres, comme indiqué ci-dessous:
Il est temps de ranger nos couches - il s'agit d'un élément essentiel non seulement de la conception d'une interface utilisateur mobile, mais également de toute conception. Un panneau de couche en désordre mène à un cerveau en désordre, et vous vous frayerez des pieds quand vous ne pourrez pas trouver la couche dont vous avez besoin! Organisez vos couches de manière structurée et qui fonctionne pour vous. le mien peut être vu ci-dessous:
Avant de terminer ce tutoriel, nous allons créer les icônes pour notre barre inférieure. Créez un nouveau calque et sélectionnez l'outil Rectangle de sélection. Faites glisser une petite sélection tout en maintenant la touche Maj enfoncée pour la maintenir droite. Remplissez-le de noir.
Déplacez votre sélection vers la droite à l’aide des touches du curseur, puis remplissez de noir. Répétez le processus jusqu'à ce que vous obteniez quelque chose qui ressemble à ceci…
Zoom arrière. Si vos règles ne sont pas encore visibles, activez-les en allant à Voir> Règles. À partir des règles, faites glisser les repères dans votre document afin de savoir où se trouve le centre (largeur) de l'écran principal, ainsi que la barre inférieure..
Utilisez les guides pour aligner votre icône de menu / accueil - vous devrez peut-être redimensionner votre icône pour l’adapter parfaitement à la barre du bas; vous pouvez le faire en allant à Édition> Transformer> Échelle.
Ouvrez la fenêtre des styles de calque pour l'icône. Appliquez un calque dégradé, une ombre portée, une ombre interne et un trait. Tout ce qui peut être vu ci-dessous:
Créez une icône pour représenter l'écran des paramètres et réappliquez les mêmes effets.
Saisissez l'outil de sélection rectangulaire et faites une sélection verticale juste 1px large, comme on le voit ci-dessous.
Créez un nouveau calque et remplissez la sélection de noir. Dupliquez le calque et déplacez-le d'un pixel vers la droite à l'aide des touches de curseur. Remplissez cette ligne avec du blanc.
Modifiez le mode de fusion des deux calques en superposition et alignez vos lignes au centre de votre barre de navigation..
Voilà pour la première partie de ce tutoriel! Nous avons créé la structure principale et le schéma de couleurs de la conception de nos applications. Dans le prochain tutoriel, nous allons créer le contenu de la maison, ajouter des écrans de compte et ajouter des comptes, et nous allons nous attacher à tous les petits éléments de conception qui feront que le design s’agrège bien..
Accentsconagua