Share
Cette série de didacticiels présentera toutes les étapes nécessaires à la refonte d’une application iPhone avec Photoshop. Vous apprendrez de nombreuses considérations uniques et modèles de conception utilisés lors de la création d'interfaces d'applications exceptionnelles. Ce tutoriel est présenté en deux parties en collaboration avec Mobiletuts +, où vous pourrez trouver un nombre croissant de tutoriels liés à la conception mobile dans le futur. Lisez la deuxième partie de cette série et téléchargez l'interface PSD sur Mobiletuts+.
Bienvenue dans la première partie de notre série de didacticiels sur la refonte de l'application iPhone Spendometer! L'application est une excellente petite application qui vous permet de respecter un budget. Comme indiqué sur le site Web d’Apple, voici ce que fait le Spendometer:
Si vous essayez de respecter un budget, c'est une bonne idée de garder une trace de tout ce que vous dépensez, mais il est difficile de tout écrire dans un cahier. Moneybasics Spendometer est une application qui rend la budgétisation quotidienne simple et pratique. Le compteur de dépenses vous permet de définir vous-même un budget, de consigner vos dépenses et de consulter vos rapports de dépenses pour voir où et combien de votre argent a été dépensé jusqu'à présent dans une semaine ou un mois donné, le tout en déplacement. Il dispose également d'une fonctionnalité qui vous permet de suivre vos dépenses lors d'une sortie nocturne..
Chaque fois que vous achetez quelque chose, entrez-le simplement dans le Spendometer de votre téléphone et il gardera une trace pour vous. Vous pouvez définir vos propres limites de dépenses et choisir le mode de déclaration de vos dépenses - hebdomadaire ou mensuel.
Le compteur de dépenses Moneybasics vous fournira l’outil indispensable pour vous permettre de maîtriser vos finances.
C’est vraiment une jolie petite application qui remplit bien son objectif, mais soyons honnêtes, cela pourrait se faire avec un peu de minutie du point de vue de la conception. Ci-dessous, vous pouvez voir l’icône des applications et plusieurs captures d’écran de l’application. Les captures d'écran ont été prises avec un iPhone 4 - comme vous pouvez le constater, certaines zones sont pixélisées, ce qui signifie qu'elles n'ont pas encore mis à jour leur application avec des graphiques haute résolution..
Il est conseillé d’en savoir un peu plus sur la conception pour l’iPhone avant de passer à ce tutoriel. Idéalement, vous devriez lire les directives d'interface humaine pour iPhone du site Web officiel des développeurs d'Apple..
Comme pour toutes les conceptions principales, la première chose à faire est d’avoir une idée approximative de ce à quoi vous voulez que votre conception ressemble. Le meilleur moyen de le faire est bien sûr de dessiner. Pour les grosses applications, de nombreux concepteurs d'interface utilisateur dessinent des pages et des pages d'idées, d'annotations et de brainstormings. Comme nous disposons déjà d'une structure pour l'application que nous sommes en train de redéfinir, nous pouvons avancer rapidement..
Vous trouverez ci-dessous quelques esquisses que j’ai rassemblées - elles sont très rugueuses, et j’ai juste des idées générales en fil de fer que j’ai en tête ce à quoi je veux que le design ressemble. Les couleurs et les styles peuvent attendre que nous arrivions à cette étape plus tard!
L'image que j'ai dans la tête est une interface très simple à utiliser, élégante, moderne et texturée. Quelque chose qui fera que les gens vont "wow". Je veux aussi que ce soit très minimal - l'application est très simple, et donc le design le sera aussi. Il n'y a pas besoin d'encombrement inutile.
N'oubliez pas que vous n'avez pas besoin de suivre ce didacticiel, mot pour mot, essayez différentes choses et mettez votre propre créativité derrière les techniques utilisées. Nous aimerions voir vos résultats, alors partagez vos progrès dans l'espace commentaires.
Encore une chose avant de commencer: j’écris ce tutoriel pendant la conception, pas après avoir terminé la conception. Je pense qu'il est important de montrer le processus de création derrière un design. La plupart des didacticiels sont écrits une fois les dessins terminés. Par conséquent, vous ne voyez pas les erreurs du concepteur, ni le nombre de tentatives qu'il a fallu pour réussir quelque chose. Tous les concepteurs le font, comme n'importe quel autre travail: les gens font des erreurs, en tirent des leçons et ne font qu'améliorer des choses. Donc, si vous voyez que vous revenez sur vous-même en lisant ce tutoriel, c'est parce que j'ai décidé que quelque chose devait changer! Commençons!
La première étape consiste à configurer votre document. Nous allons concevoir le nouvel écran Retina haute définition de l'iPhone 4, ce qui signifie une résolution bien supérieure à celle que nous avions précédemment utilisée avec l'iPhone 3GS..
Ouvrez Photoshop et accédez à Fichier> Nouveau… . Nommez votre nouveau document avec un nom approprié, tel que "Refonte du compteur de dépenses". Entrez vos propres dimensions (il n'y a pas de préréglage dans Photoshop pour le nouvel écran) pour l'écran Retina de l'iPhone 4, nous utiliserons 640x960 pixels, avec une résolution de 326ppi (pixels par pouce), qui est la nouvelle norme. Vous pouvez voir mes paramètres ci-dessous.
Notre prochaine étape consiste à placer des formes factices pour la barre d’état (la barre avec les informations et l’heure du téléphone activées), la barre de navigation (la barre située sous la barre d’état) et la barre d’outils (la barre au bas de l’écran)..
Pour ce faire, la meilleure solution consiste simplement à insérer une capture d'écran préexistante d'une application en allant sur Fichier> Place.
Vous pouvez maintenant utiliser le Outil de chapiteau rectangulaire pour sélectionner vos différentes zones de la conception et les remplacer par des formes solides. Je vais juste utiliser le noir pour l'instant. Remplissez-les sur de nouveaux calques et renommez-les en quelque chose de approprié, tel que "Barre de navigation" et "Barre d'outils". Nous allons créer des formes de base et leur ajouter plus tard de la couleur et des détails. Vous pouvez également supprimer la majorité de la capture d'écran que nous avons collée - le seul élément que je conserve est la barre d'état, comme indiqué ci-dessous..
Nous avons maintenant une toile vierge pour iPhone prête à être conçue. La prochaine chose que nous voulons faire est de créer de nouveaux dossiers dans notre fenêtre Calques. Nous avons besoin de plusieurs dossiers pour plusieurs écrans différents:
L’application elle-même a en réalité un peu plus d’écrans que cela, mais j’estime qu’un grand nombre d’entre eux ne sont pas nécessaires. Nous allons donc réduire ce nombre de manière spectaculaire en adaptant davantage de contenu sur le même écran. Nous manquerons également quelques écrans qui reproduiront à peu près d’autres écrans - la seule différence étant les titres.!
Créez un nouveau dossier de calques dans la fenêtre Calques pour chacun des écrans énumérés ci-dessus. Vous pouvez le faire en cliquant sur la petite icône de dossier dans la fenêtre des calques. Nous n'avons pas encore besoin de placer quoi que ce soit dans ces dossiers.
Je souhaite associer un design élégant et moderne à un soupçon de texture. La texture de choix sera en bois, cette texture pour être précis (vaut bien le 2-4 $). Une fois que vous avez téléchargé des textures, placez-les dans votre document en allant à Fichier> Lieu… . Réduisez la taille de votre texture pour qu'elle s'intègre parfaitement dans la conception de votre interface utilisateur et fusionnez-la avec votre calque d'arrière-plan.
Nous voulons éclaircir un peu notre texture car nous ne voulons pas qu'elle soit aussi audacieuse. Créez un nouveau calque directement au-dessus de l’arrière-plan de votre texture en bois et remplissez-le de blanc à l’aide des touches Outil Pot De Peinture. Réduisez l'opacité du calque à 35% pour ajouter un fond blanc à votre arrière-plan, puis fusionnez-le en appuyant sur la touche Cmd + E (Ctrl + E) combinaison pour appliquer le lavage à notre fond.
Nous allons également utiliser une texture de bois pour notre barre de navigation et notre barre d’outils. Dans le même pack de GraphicRiver, sélectionnez l'une des autres textures et placez-la dans votre document. Redimensionnez-le et placez-le sur votre barre de navigation.
Lorsque vous êtes satisfait d’une certaine position, cliquez sur la vignette des couches de la barre de navigation tout en maintenant la touche enfoncée. Clé de commande pour sélectionner le contenu de vos couches. Cliquez à nouveau sur votre nouveau calque de texture du bois et allez à Édition> Copier copier votre sélection. Supprimer le calque de texture, puis coller votre sélection sur un nouveau calque.
Il est maintenant temps d'ajouter du style à notre barre de navigation. Cliquez avec le bouton droit sur votre nouveau calque de barre de navigation et sélectionnez Options de fusion pour ouvrir la fenêtre Style de calque. Nous voulons ajouter quelques styles simples à notre barre de navigation qui augmenteront considérablement l'apparence de notre barre..
Tout d'abord, ajoutons une ombre portée. J'ai utilisé un angle de 90 degrés avec une opacité de 25% - toutes les autres options sont définies par défaut.
Pour donner un peu plus de profondeur à notre barre de navigation, nous allons appliquer les styles Bevel et Emboss. Ce style a une très mauvaise réputation en raison de son utilisation abusive, mais c’est vraiment un outil formidable et très puissant qui vous fait gagner beaucoup de temps. Appliquez un biseau intérieur lisse sur votre couche, en utilisant une profondeur de 100%, une taille de 196px et un niveau de ramollissement de 16px. Réduire l'opacité des modes de surbrillance à 20% et l'opacité des modes d'ombre à 55%.
En appliquant ces deux styles simples, il nous reste quelque chose d'assez élégant!
Faites un zoom droit sur votre barre de navigation, car il est temps d'ajouter un joli trait de 1px au bas de l'écran pour attirer davantage l'attention sur les niveaux de détail. Créez un nouveau calque au-dessus de votre barre de navigation, puis créez une sélection longue de 1 px de largeur à l'aide de la touche Outil de chapiteau à une rangée. Remplissez votre sélection de blanc.
Définissez le mode de fusion des calques sur Superposition et réduisez l'opacité à 70% pour obtenir le résultat suivant..
Pour l’instant, c’est fait notre barre de navigation. Nous y reviendrons plus tard pour produire nos styles de typographie d’en-têtes..
J'ai décidé qu'une autre barre d'outils en bois au bas de l'application serait trop "lourde en bois". Nous allons donc assombrir un peu le fond et placer nos icônes de navigation à la place..
Sélectionnez le contenu des calques de la barre d’outils, puis sélectionnez le Outil pour effacer. Sélectionnez une gomme à effacer à 100px et, tout en maintenant la touche Maj enfoncée, effacez la partie supérieure de votre barre d’outils noire. En maintenant la touche Maj enfoncée, vous pourrez effacer le contenu en ligne droite plutôt que de contrôler totalement ce que vous pouvez effacer..
Changez le mode de fusion des calques de la barre d’outils en superposition et réduisez l’opacité à 60%. Cela lui donnera un aspect légèrement brûlé nous donnant un joli fond prêt à placer nos icônes (une fois que nous les concevons). Le moment est venu de placer les couches de la barre de navigation et de la barre d’outils dans leurs propres dossiers de couches..
Nous sommes donc prêts à passer à autre chose. Nous allons maintenant concevoir notre écran de lancement, qui sera l’écran le plus simple de l’application car il n’inclura aucune navigation ni barre d’outils. Masquez les dossiers de couche de la barre de navigation et de la barre d’outils et créez un nouveau calque (transparent) dans votre dossier d’écran de lancement et appelez-le "ombre"..
Remplissez votre nouveau calque avec une couleur unie sombre (j'utilise le n ° 333333) à l'aide du Outil Pot De Peinture. Sélectionnez le contenu de votre couche de barre d'état, puis cliquez sur votre nouvelle couche d'écran de lancement et appuyez sur la touche Suppr pour supprimer une petite zone de la couche grise afin d'afficher la barre d'état..
Dupliquez votre calque pour en avoir deux de même forme. Sur la nouvelle couche, allez à Édition> Transformer> Transformation libre pour faire apparaître la boîte de transformation sur votre nouvelle forme / calque. Tout en maintenant les touches Alt et Maj enfoncées, réduisez votre sélection. Si vous maintenez la touche Maj enfoncée, la forme reste proportionnelle, tandis que si vous maintenez la touche Alt enfoncée, elle sera redimensionnée de manière égale sur les bords. Faites une sélection de votre nouvelle forme redimensionnée.
Supprimez votre nouvelle forme (tout en conservant la sélection en direct), puis supprimez la sélection de votre calque d'origine. Vous devriez vous retrouver avec quelque chose qui ressemble à la capture d'écran suivante.
Aller à Filtre> Flou> Flou Gaussien et utilisez un rayon d'environ 50 pixels pour donner à votre ombre un effet lisse et maculé.
En utilisant la même technique que nous avons utilisée précédemment, effectuez une sélection de la barre d'état et supprimez toutes les ombres qui se chevauchent de notre couche d'ombres..
Dupliquer notre couche d'ombre une fois de plus. Changez le mode de fusion des calques d'ombre inférieurs en superposition et son pourcentage d'opacité sur 100%, puis modifiez le mode de fusion des calques d'ombre supérieur sur normal et son pourcentage d'opacité sur 25%..
La prochaine étape consiste à produire notre logo typographique. Nous allons faire croire que le type a été gravé dans le bois en utilisant une poignée de styles et de techniques de calque. Saisissez votre outil de texte et mettez en forme du texte. Utilisez les paramètres de type pour bien aligner votre texte.
Jouez avec différentes polices de caractères jusqu'à ce que vous sentiez que ça a l'air bien. J'ai décidé d'utiliser une combinaison de pochoir et d'Helvetica.
Il est maintenant temps de donner l'impression que notre typographie a été gravée dans notre arrière-plan. Nous allons faire en sorte que beaucoup de notre typographie ressemble à ceci tout au long de la conception de l'application, en particulier les icônes et les titres dans la barre de navigation..
Ce type d'effet nécessite beaucoup de styles de calque. La première chose à faire cependant est de changer la couleur de notre type. En utilisant le Outil Pipette sélectionnez une couleur sombre à l'arrière-plan, puis appliquez cette couleur à votre typographie.
Réduisez l'opacité de vos calques de texte à 50%, puis ouvrez les options de fusion de vos calques de texte. Le premier style que nous allons appliquer est une ombre interne, utilisant les paramètres suivants:
Le prochain style que nous allons appliquer est une ombre portée très subtile, utilisant les paramètres suivants:
Enfin, nous allons ajouter un trait à notre texte, en utilisant les paramètres suivants (la couleur que j'ai utilisée est # E6D0B3).
Changer le mode de fusion des calques typographiques en gravure linéaire.
Nous allons rendre notre ombre intérieure un peu plus forte / plus audacieuse. Dupliquez votre calque de texte et changez le mode de fusion en saturation - cela le rendra presque transparent, mais permettra à tous les styles de calque de continuer à apparaître. Ouvrez la fenêtre des styles de calque et supprimez complètement les styles d'ombre portée et de contour. Cliquez sur l'onglet Ombre intérieure et modifiez les paramètres pour qu'ils ressemblent à ce que vous pouvez voir ci-dessous..
Répétez exactement la même étape, cette fois en utilisant les paramètres suivants:
Comme vous pouvez le constater, nous avons appliqué plusieurs autres ombres à notre typographie, sans effet sur la couleur réelle, simplement en modifiant le mode de fusion en mode de saturation. La première ombre supplémentaire ajoutait une ombre douce autour de chacun des bords de manière égale, tandis que la deuxième ombre supplémentaire appliquait une ombre forte et nette à la partie supérieure de notre type..
Notre écran de lancement a une très belle apparence, et il sera encore plus beau une fois réduit sur cet affichage rétine haute résolution!
Notre prochaine étape est bien sûr notre écran Spendometer, qui est le premier à être affiché après avoir vu l’écran de lancement. À l'aide des effets que nous venons d'utiliser à l'étape précédente, configurez votre typographie et appliquez quelques styles de calque sympas à l'en-tête de votre Spendometer dans la barre de navigation. C'est idéal ici pour faire des doublons de votre barre de navigation. un pour chaque écran. J'ai défini le calque de texte sur une opacité de 90% pour laisser passer un peu de la texture et ai utilisé les styles de calque suivants. Il n'est pas nécessaire de créer des ombres supplémentaires pour ce type, car il est beaucoup plus petit..
J'ai décidé que la barre de navigation en haut du dessin est un peu trop sombre, que ce soit ou que la typographie soit trop claire. Pour résoudre ce problème, je vais éclaircir un peu la barre de navigation. Le moyen le plus simple de le faire est de sélectionner le calque de la barre de navigation, puis de cliquer sur Image> Réglages> Luminosité / Contraste. Augmentez votre luminosité à 60 et votre contraste à 10.
Réduisez l'opacité de notre trait d'un pixel sous notre barre de navigation pour mieux l'adapter à la nouvelle barre de navigation plus claire. Je l'ai abaissé à 40%.
Pour que la texture du texte de notre en-tête de navigation apparaisse un peu plus claire, je modifie la couleur de notre type en un choix beaucoup plus clair, puis je règle le mode de fusion des calques pour qu'il se multiplie. très différemment selon la couleur de votre forme de base.
Dupliquez votre calque de texte et réduisez son opacité à 40%. Cela rend notre caractère un peu plus sombre, le ramenant à ce qu'il était avant, tout en nous permettant d'afficher plus de texture sans réduire l'opacité.
Vous pouvez maintenant copier et coller votre dossier de calque d'onglet de navigation dans chacun de vos différents dossiers d'écran et les éditer pour qu'ils ressemblent au titre de chaque écran, comme indiqué ci-dessous:
C’est l’en-tête des titres qui a été fait pour le moment - nous pourrions les revoir ultérieurement Comme vous vous en êtes peut-être rendu compte, la conception pour les appareils mobiles a beaucoup à voir avec essais et erreurs.
Notre prochaine étape consiste à créer un fond blanc prêt à y placer davantage d’éléments. Cela signifie que nous allons couvrir une grande partie de notre arrière-plan en bois, mais en général, voir des éléments sur un arrière-plan blanc et non texturé est généralement une expérience beaucoup plus agréable pour les yeux..
Sélectionnez le Outil de chapiteau rectangulaire et choisissez une taille fixe de 600x700px. Cliquez n'importe où sur votre toile et centrez votre sélection à l'aide des touches fléchées. Il doit être facile à organiser car il y a exactement 20 pixels entre les côtés et la sélection de chaque côté (à gauche, au dessus et à droite).
Créez un nouveau calque dans votre dossier du compteur de dépenses et appelez-le comme "Fond blanc". Aller à Sélectionnez> Modifier> Lisser et lissez vos formes en utilisant un rayon de 5 pixels. Remplissez-le de blanc.
Sélectionnez le Outil de chapiteau elliptique et faites glisser une sélection égale. Positionnez-le sur le bas comme indiqué ci-dessous et appuyez sur la touche Suppr pour supprimer une petite sélection de notre fond blanc..
Ouvrez la fenêtre des styles de calque. Nous allons appliquer un certain nombre d’effets à notre fond blanc. Tout d'abord, nous allons ajouter un trait. J'ai utilisé les paramètres ci-dessous, avec la couleur # 6C4C24:
Ensuite, nous allons appliquer une ombre interne pour ajouter un peu plus de profondeur à notre arrière-plan. Les paramètres que j'ai utilisés peuvent être vus ci-dessous:
Le dernier style de calque que nous allons appliquer est une ombre portée. Utilisez les paramètres ci-dessous pour que l'arrière-plan blanc se démarque un peu plus de l'arrière-plan de l'application:
Réduisez l'opacité de l'ensemble du calque de fond blanc à environ 75% pour permettre à un tout petit morceau de ce grain de bois de transparaître. Notre résultat final (ci-dessous) nous donne une jolie toile blanche sur laquelle nous pouvons placer les éléments de nos applications, ce qui le rend facile à lire et agréable à regarder..
Nous allons ajouter un trait noir à faible opacité de 1 pixel au bas du calque de contenu principal. Dupliquez votre calque d'arrière-plan blanc et supprimez tous les styles de calque. Remplissez la forme avec du noir et déplacez-la d'un pixel en utilisant les touches du curseur. Placez-le sous votre calque d'arrière-plan blanc d'origine. Faites une sélection de votre calque d'arrière-plan blanc d'origine, puis cliquez sur votre nouveau calque dupliqué et appuyez sur la touche Suppr. Réduisez l'opacité à environ 40%. Vous devriez vous retrouver avec quelque chose de semblable à ceci:
C'est la fin de la première partie du tutoriel. Il est recommandé d'exporter votre fichier de temps en temps sous forme d'image jpeg haute résolution et de le visualiser sur l'écran de votre iPhone pour vous assurer qu'il est beau. Voici à quoi ressemble mon écran de lancement (nous allons tester les autres écrans dans le prochain tutoriel!):
La deuxième partie de ce didacticiel est disponible sur Mobiletuts + et couvre le reste de la conception de l'application. Hop on over pour finir la création de l'interface!
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