Share
Il s’agit du deuxième d’une série de travaux dirigés en deux parties sur la conception d’une application bancaire pour iPhone. Dans cette partie de la série, nous concevrons la disposition / le contenu principal de chacune de ces pages: le menu / la page d'accueil, la page de relevé et les écrans d'ajout de compte. Vous avez manqué la première partie? Se mettre au courant en le lisant ici.
Après l’avoir laissé, sélectionnez l’outil Rectangle de sélection. Dans la barre d’outils, sélectionnez Taille fixe dans le menu déroulant Style et utilisez les paramètres 50 x 50 pixels. Cliquez quelque part sur votre toile pour créer une sélection de 50 x 50 pixels. Faites glisser votre sélection jusqu'au bord de votre toile, faites glisser un guide de votre règle (Affichage> Règle) et accrochez-le contre votre sélection. Répétez le processus jusqu'à ce que vous ayez deux guides de chaque côté de votre toile.
Placez un guide au centre de votre toile - vous devriez pouvoir le prendre automatiquement.
Maintenant, faites glisser les guides et placez-les au centre des deux que nous avons déjà créés, comme ci-dessous:
Nous avons maintenant une grille très simple prête à placer notre icône / boutons une fois que nous les avons conçus. Sélectionnez l'outil Rectangle de sélection et le menu style, sélectionnez une taille normale plutôt qu'une taille fixe. Faites glisser un carré (maintenez la touche Maj enfoncée pour le maintenir au carré) entre nos guides de gauche. Remplissez-le de noir.
Répétez le processus deux fois plus, en veillant à remplir chaque forme sur un nouveau calque.
Dupliquez les trois calques et placez-les à 50 pixels sous vos formes précédentes.
À l'aide de l'outil Rectangle de sélection, créez un bloc noir uni en bas de l'écran de menu et renommez le calque "ad".
La structure principale de notre écran d'accueil étant terminée, il est temps d'ajouter tous ces petits détails qui donnent vie à la conception. Cmd + Clic (Ctrl + Clic sur Windows) sur la vignette du premier calque d'icônes pour le resélectionner. Aller à Sélectionnez> Modifier> Lisser et entrez 4 pixels, puis cliquez sur OK. Cliquez avec le bouton droit de la souris et sélectionnez Sélectionner l'inverse dans le menu..
Appuyez sur la touche Suppr de votre clavier pour supprimer les coins de votre sélection. Allez dans Affichage> Effacer les guides pour supprimer tous vos guides..
Ouvrez la fenêtre des styles de calque pour votre première icône. Appliquez une ombre portée, une superposition de couleurs et un trait. Tous les paramètres sont visibles dans les captures d'écran ci-dessous:
Dupliquez votre calque et allez dans Edition> Transformation> Echelle. Tout en maintenant les touches Maj et Alt enfoncées, réduisez un peu votre silhouette.
Ouvrez la fenêtre des styles de calque pour votre nouveau calque, appliquez les paramètres suivants à nos effets existants et supprimez complètement l'ombre portée…
Dupliquez une nouvelle fois le calque et supprimez complètement les styles de calque en cliquant avec le bouton droit de la souris sur le calque et en sélectionnant Effacer le style de calque dans le menu. Aller à Filtre> Bruit> Ajouter du bruit. J'ai ajouté 10% de bruit et ensuite réduit l'opacité des couches à 5%.
Répétez tout le processus pour toutes vos icônes.
Il est temps de commencer à créer les icônes que nous placerons ensuite au-dessus de nos boutons. Créez un nouveau calque et sélectionnez l'outil Rectangle de sélection. La première icône que nous allons concevoir est une pile de pièces qui représentera «l’équilibre». Créez un petit rectangle avec l'outil de sélection puis remplissez-le de noir.
Décalez votre sélection de quelques crans, puis à droite - remplissez cette sélection de noir sur le même calque. Continuez à répéter l'étape jusqu'à ce que vous obteniez quelque chose qui ressemble à ci-dessous.
Ouvrez la fenêtre des styles de calque pour votre nouveau calque de pièces. Ajoutez une superposition de dégradés dorés assez subtile à vos pièces.
Maintenant, ajoutez une ombre portée et une ombre interne à votre forme, vous pouvez voir les paramètres que j'ai utilisés dans les captures d'écran ci-dessous.
En utilisant des techniques que nous avons utilisées tout au long des deux parties de ce didacticiel, complétez toutes les autres icônes. Je vais créer les icônes suivantes: Relevé papier (pour les relevés), Enveloppe (pour les notifications), Téléphone mobile (pour les recharges téléphoniques), Carte de crédit (pour les relevés de carte de crédit) et Silhouette (pour ajouter un compte)..
Après avoir terminé mes icônes, j'ai décidé que l'ombre portée sous nos formes blanches principales devait s'assombrir un peu. Ouvrez la fenêtre de style de calque et augmentez l'opacité de l'ombre à 15%. J'ai également augmenté la taille de l'ombre de 2px à 5px.
Faites la même chose pour toutes vos autres formes de boutons.
Au lieu d'utiliser le rectangle du bas pour une publicité, je pense que ce serait un atout majeur d'avoir un simple graphique à la place, ce qui donnerait aux utilisateurs un aperçu rapide du fait que leur solde de compte soit à la hausse (ou à la baisse). En utilisant la même technique que nous avons utilisée précédemment, faites glisser certains guides de la règle.
Saisissez l'outil de sélection par elliptique et faites glisser un petit cercle tout en maintenant la touche Maj enfoncée pour conserver le tour i16t. Remplissez-le de noir sur un nouveau calque.
Dupliquez le calque et placez un point sur le prochain guide vertical. Répétez cette étape jusqu'à obtenir quelque chose qui ressemble à ceci:
Aller à Voir> Effacer les guides enlever les guides sur notre toile. Ouvrez l'option de styles de calque pour votre premier blob et appliquez les styles suivants:
Copiez les styles de calque en cliquant avec le bouton droit de la souris sur votre calque et en sélectionnant Copier le style de calque. Sélectionnez tous vos autres calques de cercle, cliquez avec le bouton droit de la souris et sélectionnez Style de collage du calque. Cela devrait ajouter automatiquement les styles que vous venez de créer à tous vos autres calques..
Saisissez l'outil Ligne et faites glisser une ligne d'un point à l'autre. Faites cela sous vos calques de points.
Ceci fait, notre écran de navigation l'est aussi! Placez toutes vos couches récentes dans un dossier appelé "Écran de navigation" pour que tout soit bien rangé!
Faites glisser les calques vers le bord de vos icônes sur votre écran de navigation, puis masquez tout le dossier. Créez un nouveau dossier et appelez-le "Écran de relevé".
Sélectionnez l'outil Ligne, puis dans la barre d'outils, cliquez sur le menu déroulant et assurez-vous que les pointes de flèche (fin) sont sélectionnées..
Faites glisser une très petite flèche, comme ci-dessous:
Cliquez avec le bouton droit sur le calque des flèches, sélectionnez rasteriser, puis renommez le calque en "flèche verte". Ouvrez la fenêtre d'options de calque pour votre flèche, puis appliquez une ombre portée, une ombre interne, une superposition de dégradé et un contour. Tous les paramètres peuvent être vus ci-dessous:
Comme vous l'avez probablement deviné, cette flèche sera l'icône que nous utiliserons pour les transactions entrantes (argent versé sur le compte de l'utilisateur). Dupliquez le calque et déplacez-le vers le bas de quelques espaces à l’aide des touches Maj et Curseur. Aller à Édition> Transformer> Rotation et tout en maintenant la touche Maj enfoncée, tournez la flèche de sorte qu'elle pointe vers la gauche.
Modifiez le nom des calques en flèche rouge, puis ouvrez la fenêtre de style des calques et appliquez-lui un dégradé rouge..
Continuez à dupliquer les deux flèches et placez-les l'une en dessous de l'autre dans un ordre aléatoire.
Sélectionnez l'outil Rectangle de sélection d'une rangée et effectuez une sélection sous votre première flèche, remplissez-le de noir sur un nouveau calque appelé "séparateur".
Dupliquez le calque, puis déplacez-le d’un pixel vers le bas en appuyant sur le bouton bas de vos touches de curseur. Recolorer le trait en blanc.
Fusionnez les deux calques en les sélectionnant tous les deux, cliquez avec le bouton droit de la souris et en sélectionnant Fusionner les calques dans le menu. Modifiez l'opacité du calque sur 15%, puis coupez l'extrémité des lignes jusqu'aux repères à l'aide de l'outil Rectangle de sélection et de la touche Suppr..
Dupliquez le calque et placez-le entre vos deux prochaines flèches. Continuez à répéter l'étape jusqu'à ce que vous ayez une ligne entre toutes les flèches. Aller à Voir> Effacer les guides.
Saisissez l'outil Texte et faites glisser une zone de texte entre vos deux lignes de séparation supérieures en vous assurant qu'elle est centrale. Tapez quelque chose. J'ai utilisé le texte "107,62 USD du nom de la société le 04/06/2010." J'ai utilisé Helvetica pour cela, réglé à 4 pt.
Assurez-vous que certaines parties de votre texte ressortent mieux en utilisant des sous-polices différentes, telles que gras et italique.
Dupliquez le calque de texte et déplacez-le vers la transaction suivante. Répétez cette étape jusqu'à ce que vous ayez rempli toutes les lacunes..
Pour rendre votre maquette plus réaliste, parcourez vos calques de texte et modifiez le montant, le nom de la société et les dates..
En utilisant les techniques que vous avez déjà utilisées dans les deux parties du didacticiel, ouvrez et complétez l'écran Ajouter un compte. Vous trouverez ci-dessous plusieurs captures d'écran prises tout au long de la conception de l'écran final du didacticiel..
Écran d'accueil / de navigation:
Écran de relevé:
Écran Ajouter un compte:
Accentsconagua