Tutoriel: Comment concevoir une interface utilisateur Chatroom IPhone
Dans ce tutoriel, nous allons concevoir une interface utilisateur iPhone pour une application mobile basée sur un forum ou une conversation.
L'application comprend une poignée d'éléments d'interface tactile quotidiens, tels que des boutons, des champs de saisie et des gestes tactiles.
Nous allons couvrir divers outils Photoshop, styles de calques et bien sûr aborder toutes les contraintes de conception; aussi bien rendre le design pixel-perfect et assez beau pour être digne d'une place sur un écran d'iPhone.
La conception a été réalisée à l'aide de Photoshop CS5.5, mais toutes les versions récentes de Photoshop fonctionneront à merveille.
Configuration requise pour l'écran d'application
Nous allons simplement créer un écran dans ce tutoriel. L'écran va être l'écran principal de discussion pour une application basée sur le chat, un peu comme une salle de discussion publique, mais sur votre téléphone. Les exigences de cet écran sont les suivantes:
- Un en-tête - c'est le salon de discussion dans lequel vous vous trouvez actuellement.
- Un bouton back / close / topics - pour revenir à l'écran précédent.
- Un bouton people - cela montre qui est actuellement dans le chat.
- Une liste de messages - les messages doivent avoir un avatar et un horodatage.
- Une façon de voir les profils des utilisateurs et de signaler les messages.
- Un champ de texte pour écrire vos messages.
- Un bouton d'envoi pour poster vos messages.
Planification, croquis et filage
Comme pour tout projet d'interface utilisateur, la planification, l'esquisse et le fil de fer de votre interface sont essentiels. Il élimine souvent toutes les idées idiotes (même si elles ne semblent pas idiotes dans votre tête!) Avant de rassembler les concepts numériques et les maquettes. Ce qui pourrait sembler être une solution brillante pour résoudre un problème dans votre tête ne pourrait finalement pas fonctionner du tout dans la pratique réelle, ce qui explique pourquoi la gestion par câblage avant de lancer un projet est une étape si importante.
Prenez un stylo et votre tampon préféré et commencez à dessiner.
Comme vous pouvez le voir sur l'image ci-dessus, j'ai passé quelques minutes à rassembler trois concepts différents. Habituellement, ce processus prend des jours ou parfois des semaines, mais comme nous ne concevons qu'un seul écran et que le but de l'application est simple, dessiner ces derniers ne devrait pas être long! Ils sont pour la plupart très similaires, mais chacun a ses différences uniques, que je résumerai ci-dessous.
Esquisse A
Inspirée de l'interface utilisateur Twitter d'origine pour iPhone, cette interface utilisateur permet aux utilisateurs de glisser un message pour afficher plus d'options, telles que "Afficher le profil" et "Signaler un utilisateur". J'ai joué avec l'idée d'avoir un bouton de réglage dans la barre de navigation dans cet écran, mais j'ai décidé de suivre ma règle habituelle de "Less Is More" - il est peu probable que l'utilisateur accède aux paramètres chaque fois qu'il utilise l'application ici.
Esquisse B
Ce concept est un peu plus compact, avec les boutons "View Profile" et "Report User" comme icônes statiques à droite des messages. J'ai joué avec l'idée de ne pas avoir de bouton "Envoyer" ici, et d'utiliser plutôt le bouton Envoyer sur le clavier iOS. Je me suis opposé à cela car la plupart des applications (y compris les applications standard iOS telles que les messages) ont le bouton d'envoi du clavier ainsi que le bouton d'envoi supplémentaire à côté du champ de saisie de texte. J'aime garder mes interfaces cohérentes avec les autres sur l'App Store.
Esquisse C
Sketch C est l'esquisse que j'ai décidé d'aller de l'avant - au lieu d'un bouton de retour, nous avons un bouton de fermeture. Je pense que cela rend plus évident une fois que vous cliquez sur Fermer, vous ne ferez plus partie de cette conversation (contrairement aux applications de messagerie, où vous revenez et pouvez revenir pour voir tous ces messages précédents). Le bouton Personnes affiche une liste des utilisateurs actuellement présents dans la salle de discussion et j'ai repris l'idée de voir la diapositive afficher davantage d'éléments (comme l'application Twitter) pour permettre à l'utilisateur de consulter le profil de l'utilisateur ou de le signaler.
Avec ceci fait, il est temps de passer à mettre quelque chose ensemble dans Photoshop!
Étape 1: barre d'état et de navigation
Avant de procéder à cette étape, nous devons créer notre document. La taille d'écran standard de l'iPhone (à la résolution Retina) est de 640 pixels de large et 960 pixels de hauteur avec une résolution de 326ppi. J'ai tendance à toujours commencer par un fond blanc dans mes créations.
La première étape consiste à placer la barre d'état iOS par défaut. La barre d'état est la barre en haut de votre iPhone qui vous indique des informations importantes telles que votre signal, votre opérateur, l'heure et l'autonomie de la batterie. Il y a trois options ici: une barre noire, une barre noire peu transparente ou la barre d'argent.
Si vous voulez que la conception de votre application ressemble à la vraie affaire, vous pouvez saisir la barre d'état du kit PSD de l'interface graphique Retina pour iPhone. trouvé ici . Téléchargez et ouvrez simplement le fichier PSD, puis faites glisser la barre souhaitée sur votre document PSD. Placez-le en haut de votre toile.
La barre de navigation est à côté de notre liste de tâches. La barre de navigation standard est haute de 86px et couvre toute la largeur de votre iPhone (640px). Encore une fois, vous pouvez faire glisser cet élément depuis le kit PSD mentionné ci-dessus, ou vous pouvez le créer manuellement (mon option préférée car il n'y a pas de styles attachés). Sélectionnez l'outil Forme de rectangle et placez un rectangle de 640 x 86px sur votre toile.
Étape 2: Boutons de la barre de navigation
En référence à nos wireframes, nous avons deux boutons sur notre barre de navigation. Sélectionnez l'outil Forme de rectangle arrondi (n'oubliez pas de toujours utiliser des outils de forme pour les formes dans la conception d'interface utilisateur, cela simplifie grandement la mise à l'échelle de notre document pour des résolutions inférieures!). J'ai utilisé des dimensions 100 x 50px avec un rayon de coin de 6px.
Placez cette forme sur vos côtés gauche et droit de votre barre de navigation et placez-les correctement.
Étape 3: Sélection du style
Il est temps de choisir notre style de design. Cette application permettra aux gens de discuter et de rencontrer de nouvelles personnes, et de permettre aux gens de s'amuser à le faire. Pour cette raison, je pense qu’il est important d’avoir une palette de couleurs et une typographie amusantes et originales pour faire passer ce message.
Sélectionnez l'outil Type et choisissez une police correspondant à l'image que vous avez dans votre tête. J'ai choisi le pétillant Arial arrondi MT gras . Tapez le nom de votre sujet (j'ai choisi "Design d'interface utilisateur") et alignez-le au centre de votre barre de navigation.
Poursuivant avec le thème amusant que nous avons sélectionné pour l'application, il est temps de choisir des couleurs. Je utilise personnellement Amoureux de la couleur pour aider à inspirer mes choix de couleurs lorsque je conçois. Dans ce cas particulier, j'ai cherché "fun" et en quelques secondes, on m'a présenté de nombreuses options différentes et des palettes inspirantes à utiliser comme base pour mon design.
J'ai fini par en choisir un appelé Salle de jeux . Il est important de réfléchir aux couleurs dont vous aurez besoin lors de la sélection d'une palette. Je trouve que choisir quelque chose de léger, quelque chose de sombre et quelque chose de brillant est toujours un bon point de départ. Il est important d'avoir un bon contraste dans votre conception.
Étape 4: style de barre de navigation
Nous allons maintenant revenir sur notre barre de navigation et lui donner la couleur qu’elle mérite. Sélectionnez la couche de la barre de navigation (j'espère que vous avez organisé vos calques!), Cliquez avec le bouton droit de la souris et sélectionnez Options de fusion. Ceci est la maison des outils Photoshop les plus puissants lorsqu'il s'agit de créer des conceptions d'interface parfaites en pixels. De là, vous pouvez ajouter des ombres, des dégradés, des motifs et des traits, avec la possibilité de copier et coller ces styles sur d'autres calques.
Tout d'abord, nous allons ajouter un dégradé à notre barre, alors cliquez sur Incrustation dégradée. J'ai sélectionné la couleur turquoise comme celle que je souhaite utiliser pour ma barre de navigation. Il est lumineux et emballe un puissant coup de poing, et rendra notre conception facile à retenir. Appliquez un gradient d'angle de 90 degrés allant de la lumière (en haut) à l'obscurité (en bas).
Cliquez maintenant sur le panneau Stroke. Modifiez la taille de votre trait à 2 au lieu de la valeur par défaut 3. Une astuce consiste à toujours essayer d'éviter les nombres impairs dans la conception de l'interface utilisateur, en particulier sur les appareils mobiles. Cela ne fera que rendre plus de travail à la fois pour le concepteur et pour le développeur quand il s’agira de redimensionner le travail (vous ne pouvez pas avoir trois demi-pixels, car un demi-pixel n’existe pas!).
Modifiez le type de remplissage de votre trait en dégradé et assurez-vous que le trait apparaîtra à l'extérieur de votre forme. Sélectionnez une couleur turquoise foncée pour le bas de votre trait et le noir pour le haut. Étant donné que le trait se trouve à l'extérieur de notre barre de navigation, la partie noire du trait n'apparaîtra pas en haut de la barre d'état et, par conséquent, tout ce que l'utilisateur pourra voir, c'est le trait en bas.
Sélectionnez le panneau Ombre intérieure et appliquez une ombre blanche d'opacité de 15% sur votre barre. Cela apparaîtra en haut de votre barre, et lui donnera un beau point culminant, le faisant apparaître plus 3D. J'ai donné à mon ombre une distance de 2px et une taille de 3px.
Il est maintenant temps de faire éclater notre barre de navigation. En utilisant des motifs, nous pouvons ajouter beaucoup de profondeur à notre conception. J'utilise un quadrillage blanc sur ma barre de navigation. Si vous souhaitez utiliser ce modèle, vous pouvez en télécharger une collection gratuitement sur Pixels Premium .
Étape 5: Observation par typographie
Pour donner de la profondeur à notre typographie, ouvrez le panneau d'options de fusion et appliquez une ombre portée. Modifiez l'angle à -90 (assurez-vous que l'option Utiliser un style global n'est pas cochée ici, sinon toutes les ombres de votre conception deviendront -90) et utilisez la même couleur que celle utilisée pour le bas de votre barre de navigation. Donnez à l'ombre une distance de 2px et déposez la taille à 0px. Cela donne une ombre portée nette au-dessus de votre texte le rendant instantanément plus intéressant.
Étape 6: style de bouton de la barre de navigation
Nous allons maintenant appliquer des styles impressionnants à nos boutons de barre de navigation. Nous voulons que ces boutons soient bien liés à notre barre de navigation, mais ils doivent en même temps se démarquer suffisamment pour que l'utilisateur reconnaisse instantanément qu'il s'agit de boutons. Pour ce faire, nous allons utiliser plus de styles de calques pour leur donner un effet 3D, époustouflant.
Ouvrez le panneau d'options de fusion et cliquez sur Incrustation en dégradé. Donnez à votre bouton un dégradé clair (en haut) à sombre (en bas) en utilisant les couleurs de votre barre de navigation. La couleur claire a été sélectionnée dans la barre de navigation et la couleur sombre a été sélectionnée à partir du trait inférieur de ma barre de navigation.
Sélectionnez le panneau de trait et changez la taille de votre trait en 2px, avec une position extérieure. Modifiez le type de remplissage en dégradé et l'angle à 90 degrés. Changez les couleurs de dégradé de la lumière (en haut) à l’obscurité (en bas), en basant les couleurs sur les couleurs déjà utilisées pour votre barre de navigation et vos boutons. Immédiatement, vous pouvez voir que ce trait donne à votre bouton un aspect 3D, comme s'il sortait de la barre de navigation au lieu d'être assis dessus.
Pour embellir un peu plus le bouton et le rendre encore plus attrayant, nous allons ajouter une lueur intérieure au bouton. Cliquez sur le panneau de lueur interne et changez le mode de fusion en écran. Déposez l'opacité à 20% et assurez-vous que le bruit est réglé sur 0%. Modifiez la lueur jaune par défaut en blanc et assurez-vous que la taille est toujours définie sur la valeur par défaut 5px. Cela devrait donner à votre bouton une belle lueur intérieure, ce qui rend le bouton vraiment tactile!
Nous allons maintenant ajouter une ombre intérieure pour rendre notre bouton légèrement plus réaliste. Changez l'opacité à 15% et sélectionnez le noir comme couleur. Laissez la distance à 2px et la taille à 4px. Changez maintenant l'angle à -90 degrés (en vous assurant que l'option Utiliser une lumière globale n'est pas sélectionnée). Cela donne une légère ombre au bas de votre bouton, cachant une partie de la lueur intérieure inférieure que nous venons d'appliquer. Dans la vraie vie, cette zone serait ombrée, il était donc important de cacher la lueur intérieure ici.
Pour finir le style de notre bouton, nous allons ajouter une ombre portée. Sélectionnez le panneau Ombre portée et changez la couleur en blanc avec une opacité de 25%. Cette ombre va agir comme un point culminant au-dessous de notre coup, donc changez la distance à 4px (2px pour couvrir la zone de coup, et 2px qui sera vu sous le coup).
Étape 7: Étiquettes de boutons
Un bouton sans son étiquette est inutile, alors maintenant nous allons passer un peu de temps pour terminer nos boutons. Tout d'abord, cliquez avec le bouton droit sur votre bouton stylé et sélectionnez l'option Copier le style de calque. Maintenant, cliquez avec le bouton droit sur votre bouton non stylisé et sélectionnez l'option Coller le style de calque.
Nous allons continuer à travailler sur notre bouton droit en premier. Ce bouton sera intitulé "Personnes" et nous souhaitons utiliser une icône de 2 personnes ou plus. Par souci de ce tutoriel, je vais utiliser des icônes créées par le studio de création Yummygum; vous pouvez trouver le pack que j'ai utilisé à IconSweets.com - Je vais utiliser des icônes de ce pack tout au long du tutoriel.
En utilisant la même police que celle utilisée pour le titre de la barre de navigation, tapez l'étiquette de ses boutons. Redimensionnez-le et placez-le sur votre bouton, puis placez votre icône de choix (ou créez le vôtre) dans votre document. Placez ces deux calques de manière égale sur votre bouton. J'ai espacé mes calques de sorte qu'il y a 15 pixels de chaque côté et le bouton, et 10 pixels entre l'icône et le texte. Collez le style de calque du texte du sujet de votre barre de navigation sur l'étiquette de votre icône et de votre bouton. Si vous devez redimensionner la longueur de votre bouton, utilisez l'outil Sélection directe pour sélectionner les 4 points d'ancrage à droite, puis faites-les glisser. Vous pouvez maintenir la touche Maj enfoncée pour garder cette modification en ligne droite.
Répétez cette procédure avec le bouton situé à gauche de votre barre de navigation, cette fois en utilisant une icône en forme de croix et le mot "Fermer". Pour ajouter un peu plus de style à mes boutons, j'ai réduit l'opacité des deux formes d'arrière-plan à 95%, ce qui permet de faire ressortir un peu le motif de grille situé en dessous.
Étape 8: barre de champ de texte
Il est maintenant temps de faire attention au reste de notre écran. Prenez l'outil Rectangle Shape et en utilisant les mêmes dimensions de notre barre de navigation (640 x 86px), placez une forme sur votre toile. Placez-le en bas de l'écran.
Étape 9: L'arrière-plan
Nous allons maintenant travailler sur le fond de notre conception. Ouvrez le panneau d'options de fusion de votre calque d'arrière-plan et choisissez un modèle pour le remplir. J'ai utilisé un motif sombre avec des lignes verticales Motifs subtils - Vous pouvez télécharger le jeu complet de motifs ici que je recommande fortement.
Si vous souhaitez ajouter certaines de vos propres couleurs au motif que vous avez choisi, vous pouvez le faire en utilisant le style de superposition de couleurs. J'ai appliqué un brun (de ma palette de couleurs que j'ai choisie plus tôt) à 35%. Cette opacité est suffisamment faible pour que votre texture / motif apparaisse, mais assez haut pour teinter la couleur ou votre arrière-plan.
Maintenant que nous avons un fond sombre, vous verrez à quel point notre barre de navigation répond à notre image de fond. Vous pouvez facilement résoudre ce problème en appliquant un style d'ombre à votre barre de navigation, ce qui le fera apparaître comme s'il était au-dessus de votre arrière-plan.
Rouvrez le panneau des options de fusion pour votre barre de navigation et sélectionnez le panneau Ombre portée. Assurez-vous que le noir est sélectionné et changez l'opacité à 25%. Augmentez la distance à 6px et la taille à 10px, puis cliquez sur OK. Vous devrez peut-être essayer ces options car les résultats varieront en fonction de la couleur et du type de texture / motif que vous avez sélectionné pour votre arrière-plan.
Étape 10: Messages
Maintenant que la barre de navigation et la barre de navigation supérieure sont terminées, nous allons nous concentrer sur l’élaboration du contenu principal de l’application. Sélectionnez l'outil Forme rectangulaire et placez un rectangle sur votre toile. La largeur que j'ai utilisée était de 600px, permettant à 20px de montrer de chaque côté de la forme. J'ai utilisé une version beaucoup plus claire de la couleur jaune / crème de la palette de couleurs que j'ai choisie plus tôt.
Sélectionnez l'outil Forme de rectangle arrondi et modifiez les dimensions à 80 x 80px et le rayon à 6px. Placez la forme (qui doit être utilisée comme forme d'avatar) sur votre toile et positionnez-la correctement. Pour que mon design reste cohérent, j'ai permis à 20px de s'asseoir entre les bords de la forme d'arrière-plan de mon message et la forme de mon avatar.
À l’aide de l’outil texte, écrivez votre nom et un message; J'ai utilisé Arial Rounded MT Bold pour mon nom et Arial normal pour mon message texte-format de votre texte afin qu'il s'intègre parfaitement dans votre boîte d'arrière-plan de message.
Nous allons maintenant ajouter du style à notre message en utilisant uniquement la couleur; J'ai changé la couleur de mon nom pour une turquoise foncée (très proche du noir) et une turquoise délavée inspirée de ma barre de navigation.
J'ai ensuite inséré une photo de moi en allant dans Fichier> Place. Une fois inséré, j'ai redimensionné l'image et l'ai placée au-dessus de ma boîte d'avatar noire créée précédemment. Pour économiser l'image et vous permettre de déplacer ou de redimensionner votre avatar ultérieurement, cliquez dessus avec le bouton droit de la souris et sélectionnez l'option Créer un masque de détourage. Cela reliera votre image d'avatar à votre boîte noire d'avatar et montrera seulement ce qui est sur la boîte noire. Vous trouverez en utilisant l'outil Déplacement que vous pouvez toujours déplacer et redimensionner cette image.
En utilisant une autre icône IconSweets, j'ai créé un joli petit horodatage. J'ai dû réduire la taille de mon icône - vous pouvez le faire en allant dans Modifier> Transformer> Transformation libre et en modifiant les dimensions (en pixels ou en pourcentage). J'ai utilisé 70% à la fois en largeur et en hauteur pour conserver les proportions. J'ai ajouté du texte, et le tour est joué. Veillez à sélectionner une couleur facile à lire, mais qui ne demande pas d’attention.
Étape 11: Messages en double
Dupliquez vos boîtes de message les unes sous les autres, en laissant un espace de 2 pixels entre chaque boîte de fond. Vous pouvez le faire en cliquant et en faisant glisser vos calques sur l’icône Nouveau calque, ou vous pouvez aussi appuyer simultanément sur Cmd + Maj + Bas pour dupliquer et décaler les calques.
Modifiez tout le contenu de vos boîtes de message, comme s'il s'agissait d'une vraie conversation. Si vous devez redimensionner vos boîtes d'arrière-plan, utilisez l'outil Sélection directe et redimensionnez-les à l'aide des points d'ancrage. Cela garde tous les bords bien nets.
Étape 12: Style de message
Cela étant fait, nous pouvons maintenant nous concentrer sur la création de nos boîtes de message. Ouvrez le panneau d'options de fusion et sélectionnez le panneau Ombre portée. Changez le mode de fusion en normal et sélectionnez le blanc comme couleur. Augmentez l'opacité à 80% au lieu du standard de 75% et donnez à l'ombre une distance de 2px. Cela masquera l'écart de 2px que nous avons laissé entre chacun des arrière-plans de la boîte de message.
Copiez et collez le style de calque ci-dessus sur tous les calques d'arrière-plan de votre boîte de message. Vous devriez vous retrouver avec quelque chose comme ci-dessus.
Étape 13: Ajout de coins arrondis
Pour rendre notre design plus intéressant, et pour ajouter plus de profondeur, nous allons ajouter des coins arrondis au bas de nos messages et faire en sorte qu’il s’agisse de papier empilé sur plus de papier.
Sélectionnez l'outil Rectangle arrondi et donnez-lui un rayon de 10px. Modifier la largeur à 600px (ou quelle que soit la largeur que vous avez utilisé pour vos arrière-plans de boîte de message) et une hauteur qui ne dépasse pas la hauteur de l'arrière-plan de votre boîte de message inférieure. J'ai utilisé une couleur vive ici pour qu'elle soit facilement visible.
À l'aide de l'outil de sélection directe, sélectionnez le contenu de votre calque de forme vectorielle (la boîte arrondie que nous venons de dessiner) et sélectionnez Édition> Copier. Cliquez sur le calque de forme vectorielle de l'arrière-plan de votre boîte de message inférieure et allez à Edition> Coller. Cela va coller le contenu du calque de forme sur votre autre calque de forme. Vous pouvez maintenant supprimer la forme que nous avons dessinée à l'étape précédente. Vous devriez toujours voir la forme visible.
Ouvrez les options de fusion de l'arrière-plan de la boîte de message inférieure et appliquez une ombre portée. Changez la couleur en noir, l'opacité à 25%, la distance à 1px et la taille à 3px. Cela créera une ombre portée subtile.
Dupliquez ce calque et déplacez-le de 5px. Repositionnez le calque de sorte qu'il se trouve sous votre original. Vous devriez vous retrouver avec quelque chose de similaire à ci-dessous. Comme vous pouvez le constater, il s’agit d’un moyen simple de créer un aspect de papier qui se chevauche.
Répétez cette étape pour avoir trois feuilles de papier au lieu de deux. Vous voudrez peut-être donner à votre morceau de papier inférieur une ombre portée légèrement plus visible.
Étape 14: Ombre de la barre de navigation
Vous avez probablement remarqué que, lors de la conception de nos boîtes de message, nous avons caché la plupart des ombres portées que notre barre de navigation avait intégrées à notre arrière-plan. Pour remplacer cela, vous pouvez soit positionner vos messages sous la barre de navigation (l'option facile mais irréaliste) ou compléter l'étape suivante.
Sélectionnez l'outil Rectangle de sélection et tracez une ligne étroite en haut de vos messages, comme ci-dessus. Remplissez-le de noir sur un nouveau calque.
Allez à Filtre> Flou> Flou gaussien et appliquez le flou. Cela agira maintenant comme une ombre, il suffit de découper les bits du flou qui chevauchent les bords de l'arrière-plan de votre boîte de message.
Étape 15: Boutons de profil et de rapport
En revenant à nos wireframes, nous avions décidé de permettre aux utilisateurs de glisser un message vers la gauche pour révéler d'autres boutons. Dans ce cas, ces boutons permettent à l'utilisateur d'afficher le profil des affiches de message ou de signaler l'affiche du message.
Sélectionnez les couches qui composent l’un de vos messages (je choisis le message Homer Simpsons) et en utilisant la touche Majuscule et les touches fléchées, déplacez votre message 10px à la fois vers la gauche. À l’aide de l’outil texte, écrivez vos étiquettes, puis sélectionnez des icônes correspondant à ces étiquettes. J'ai choisi une personne pour le profil et une cible pour le rapport (comme si vous les abattez - j'ai trouvé cela assez amusant!).
Pour donner plus de profondeur à cette zone, j'ai ajouté une ombre portée noire aux icônes et au texte.
Étape 16: Barre de champ de texte
La barre de champ de texte est l'un des éléments les plus importants de cet écran. Les utilisateurs doivent pouvoir entrer leurs messages facilement et sans confusion (c'est pourquoi j'ai supprimé le bouton d'envoi caché dans les concepts esquissés initiaux).
Pour commencer, localisez votre calque d'arrière-plan et copiez les styles de calque. Collez ces styles de calque sur le calque de champ de texte que nous avons créé précédemment. Ouvrez les options de fusion pour ce calque et sélectionnez le panneau de traits. Appliquez un trait 2px à l'extérieur de votre forme en utilisant du noir comme couleur. Comme le trait est à l'extérieur et que la forme touche trois bords de votre toile, seul le trait au-dessus de la forme apparaît.
Sélectionnez maintenant l'onglet Ombre interne et changez le mode de fusion en normal, la couleur en blanc, l'opacité à 10% et la distance à 2 pixels. Assurez-vous que l'angle est défini par défaut (90 degrés) et cliquez sur OK. Cela nous donne une belle mise en évidence en dessous de notre trait noir. Avec ces deux lignes simples 2px appliquées, notre barre de champs de texte semble déjà bien séparée du reste de l'arrière-plan, même si elle a le même arrière-plan!
Sélectionnez l'outil Rectangle arrondi. Donnez à votre outil un rayon élevé, j'ai utilisé 50px; cela lui donnera des extrémités très rondes (circulaires). Placez une forme sur votre barre, j'ai utilisé 460x54px comme mes dimensions. Assurez-vous que le côté gauche de la forme de votre champ de texte est à 20px du côté gauche de votre canevas pour que l’espace de conception reste cohérent.
Remplissez la forme avec une couleur sombre (j'ai utilisé un brun sélectionné à partir d'un pixel sombre en arrière-plan), puis ouvrez le panneau des styles de calque. Appliquez une ombre portée blanche 2px à votre champ de texte avec une opacité de 10%.
Cliquez sur le panneau d'ombre interne et appliquez une ombre interne à la forme de votre champ de texte. Cela lui donnera beaucoup plus de profondeur et donnera l'impression qu'il est coupé dans le fond des barres. Utilisez le noir avec un mode de mélange de multiplication et une opacité de 25%. J'ai utilisé 5px comme distance et 10px comme ma taille, bien que vous souhaitiez expérimenter ici.
À l’aide de l’outil texte et de la fonction Arial Rounded MT Bold, saisissez "Écrire un commentaire ..." et placez-le dans la zone de texte. Ouvrez les options de fusion de votre nouveau calque de texte et appliquez une ombre portée noire avec une opacité de 75%, une distance de 2 pixels et une taille de 3 pixels.
Étape 17: bouton de champ de texte
Resélectionnez l'outil Forme de rectangle arrondi et, en utilisant les mêmes paramètres de rayon et de hauteur que ceux précédemment utilisés, placez une forme sur l'arrière-plan de la barre de texte. Redimensionnez la longueur de votre bouton de sorte qu'il se trouve 10px de votre champ de texte et 20px du bord droit du canevas.
Cliquez avec le bouton droit sur votre nouveau calque de forme de bouton et sélectionnez les options de fusion. Sélectionnez le panneau d'incrustation en dégradé et appliquez un dégradé de clair (haut) à sombre (bas). J'ai utilisé la magnifique couleur jaune qui était dans la palette de couleurs que j'ai sélectionnée précédemment.
Pour que notre conception reste cohérente, je vais appliquer un trait à notre bouton qui donne l'impression qu'il sort de l'arrière-plan, un peu comme nous l'avons fait avec les boutons de la barre de navigation. Cette fois-ci, j'ai utilisé du noir uni au lieu d'un dégradé car l'arrière-plan est beaucoup plus sombre et ne contient pas de dégradé. J'ai utilisé un trait 2px à l'intérieur de ma forme avec une opacité de 100%.
Sélectionnez l'outil texte et tapez "Envoyer" sur votre bouton. Ouvrez les options de fusion pour votre nouveau calque de texte et appliquez une ombre portée brune à votre texte avec une distance de 1px et une taille de 3px.
Et avec ça fini, on est tous finis! Nous aimerions voir vos résultats, alors n'hésitez pas à les poster dans la section commentaires ci-dessous. Si vous voulez voir la conception en pleine résolution, vous pouvez voir que ici .