Share
Avez-vous déjà essayé d'expliquer le comportement de vos conceptions d'interface à vos clients? Souvent, les mots ne suffisent pas pour montrer ce que le designer a en tête lorsqu’il livre une pièce à son client. Dans les applications mobiles, avec des défilement horizontaux et verticaux combinés et des effets d'animation ou de transition, ce problème est encore plus important. Ce tutoriel vous montrera comment concevoir l'interface d'une application mobile à partir de zéro dans Photoshop et, surtout, vous montrera comment présenter une animation décrivant le comportement de l'application à soumettre au client final. Es-tu prêt? Commençons!
Les ressources suivantes ont été utilisées lors de la production de ce didacticiel..
Ce tutoriel a pour objectif de vous aider à présenter un échantillon plus dynamique de vos conceptions d'interface, en montrant le comportement de l'application lors de sa mise en œuvre..
Il y a plusieurs avantages à créer une version animée avant de l'implémenter dans un langage de programmation, en voici quelques uns:
Dans cet esprit, avançons avec le tutoriel d'aujourd'hui.
Nous concevrons d’abord une application iPad News Reader à partir de zéro avec Photoshop, puis nous animerons le comportement du défilement dans les flux de nouvelles à la fois verticalement et horizontalement, puis nous ouvrirons un article dans une fenêtre contextuelle. Ai-je mentionné que nous n'utiliserons Photoshop que pour l'ensemble du processus??
Comme il ne s’agit pas d’un didacticiel de base, je suppose que vous avez une connaissance de base des outils et processus de Photoshop, tels que la création de masques de découpage, de masques vectoriels et de calque et, plus important encore, d’objets dynamiques. Si vous voulez vraiment parcourir ce tutoriel et que vous êtes encore débutant, je vous suggère de lire quelques articles décrivant d'abord ces sujets..
Maintenant, commençons!
Chaque superbe création commence par une toile vierge. Cette fois-ci, nous allons créer un document RVB de 1400 x 1100 pixels à 72 ppp..
Puisque nous créons un design pour une application iPad, nous devrons dessiner un carré pour délimiter la zone de travail de l'écran de l'iPad (1024 x 768 px). Vous pouvez facilement le faire en créant un rectangle et en utilisant les commandes de transformation de l'outil de déplacement (V), cliquez sur n'importe quel coin puis sur le panneau des options en haut, écrivez les dimensions souhaitées sur les valeurs W et H. Puis appuyez sur Commande / Ctrl + A pour tout sélectionner et toujours avec l'outil de déplacement sélectionné, alignez la boîte au centre absolu en cliquant sur les options d'alignement..
Ensuite, lorsque la boîte est située au centre absolu, dessinez quatre guides autour de la boîte. Il s’agit de notre zone de travail et de la partie visible de notre application. A partir de maintenant et jusqu'à la fin de ce tutoriel, l'espace entre ces guides sera la "zone d'application".
Maintenant, ouvrez et insérez le modèle iPad à partir des ressources, faites-le pivoter pour le placer en mode Paysage et redimensionnez-le pour faire correspondre la zone active (écran) avec nos guides. Convertissez-le en objet intelligent et nommez-le "iPad". Double-cliquez ensuite sur l'objet miniature dans le panneau Calques. Une nouvelle fenêtre apparaît avec un ensemble modifiable de calques correspondant à l'objet intelligent "iPad". Supprimez la zone grise où se trouvera l'interface. Enregistrez le fichier .PSB, toutes les modifications seront automatiquement mises à jour sur le document principal.
Ajoutons maintenant quelques arrière-plans, d’abord un arrière-plan blanc rectangulaire derrière l’objet intelligent "iPad". Cet arrière-plan doit être placé entre les guides de gauche et de droite de la zone d'application. Vous pouvez appeler le calque "Arrière-plan" et le placer dans un dossier nommé "App" car il y a l'endroit où nous placerons le design complet de l'application. Ensuite, un grand fond dégradé pour l'ensemble du document (# 121212 - # 434343).
Tracez un rectangle vectoriel entre la bordure supérieure de la zone de l’application jusqu’à 80 px au sein d’un nouveau groupe nommé "En-tête". Appliquez les styles de calque suivants: une superposition de dégradé (# 00345C - # 146592), un trait blanc (#FFFFFF) 1px, une ombre portée de 10px et une ombre intérieure bleu clair (# 0180C7).
Les appareils mobiles ont maintenant de très beaux écrans, ce serait dommage si nous n’ajoutons pas quelques petits détails à l’en-tête pour le rendre plus beau. Premièrement, ajoutez une ellipse bleue (# 1C79B4) sur le côté gauche de l'en-tête, appliquez-lui un flou gaussien (elle pixellisera la forme), utilisez n'importe quel rayon, j'essaie avec 15px. Ensuite, Commande / Ctrl + Cliquez sur le masque vectoriel du rectangle d’en-tête, Commande / Ctrl + Maj + I pour inverser la sélection et appuyez sur la touche Suppr pour supprimer toute la brillance bleue supplémentaire. Si vous le souhaitez, vous pouvez ajouter plusieurs cercles en utilisant différentes nuances de bleu et d'opacités différentes, les placer sur un groupe nommé "Bulles" et le placer à droite de l'en-tête. Ensuite, vous pouvez le rasteriser et répéter le processus de lueur bleue à gauche ou le convertir en objet dynamique et appliquer un masque vectoriel pour masquer le dépassement..
Je vais ignorer le processus de création d'un logo élaboré pour notre application. Je l'appelle simplement "News Reader" en utilisant la belle police "Walkway Black" des ressources. J'ajoute une ombre portée subtile et une superposition de dégradé avec superposition réelle en mode de fusion. Placez le logo sur le côté gauche de l'en-tête et dans un groupe nommé "Logo" dans le dossier "En-tête"..
Dessinez une ellipse noire étroite, puis appliquez-lui un flou gaussien de rayon 5px. Ensuite, à l'aide de l'outil Rectangle de sélection, sélectionnez la moitié de l'ellipse floue et supprimez-la. Ensuite, ajoutez une ligne de 1px d'épaisseur à gauche de l'ombre, ajoutez enfin un masque de calque et remplissez-le avec un dégradé noir - blanc réfléchi. Tout mettre dans le dossier "Logo".
Ajoutez un dossier nommé "Rechercher le contenu" à l’aide de l’outil Rectangle arrondi, ajoutez un rectangle blanc (rayon de bordure 50px). Ajoutez les styles indiqués sur les images ci-dessous (une ombre intérieure et un trait en dégradé) pour lui donner un effet typographique subtil. Ajoutez ensuite une icône de loupe grise (#ABABAB) et un texte de recherche, en utilisant également gris, "Helvetica Neue" comme police et taille: 16 pts.
Ajoutez un nouveau rectangle arrondi pour le bouton de recherche (rayon 5px) à la droite de la zone de recherche. Ajoutez ensuite le texte du bouton "Recherche avancée" avec la police "Helvetica Neue 75 bold" et le premier plan blanc.
Ajoutez ensuite au bouton un dégradé brillant, comme illustré ci-dessous, et un trait de dégradé. Ajoutez ensuite un style biseauté et estampé comme illustré sur l'image ci-dessous. Placez le champ de recherche et le bouton dans un nouveau groupe nommé "Recherche".
Ajoutons la barre de menu inférieure. Dessinez au bas de la zone des applications un rectangle noir (hauteur 50px). Ensuite, appliquez une superposition de dégradé brillante comme le montre l'image ci-dessous..
Au-dessus de l'en-tête, une barre doit contenir les informations standard sur l'iPad (Signal, horloge et batterie). Même lorsque cette zone n'est pas trop grande, cela peut entraîner une réduction considérable de notre domaine d'application, il est donc sage de l'ajouter. Dans le dossier "En-tête" quelques pixels ci-dessous, puis double-cliquez sur l'objet intelligent "iPad" et ajoutez une bande noire ou la barre supérieure de l'actif iPad. Enregistrez l'objet intelligent et placez le dossier "En-tête" à sa place..
Une belle touche pour toute application est un fond propre et beau. Pour cela, créez un dossier nommé "App Background". Dessinez un rectangle gris (# 797979) exactement à l’intérieur des limites de la zone de l’application. Ensuite, allez à Filtre> Rendu> Nuages et convertissez certains nuages en noir et blanc dans un nouveau calque au-dessus de l’arrière-plan gris. Ensuite, allez dans Filtre> Rendu> Fibres? et augmentez sa force et sa vibration comme vous le souhaitez. Ensuite, sélectionnez Filtre> Flou> Flou directionnel et définissez l’angle sur 90 degrés et la distance sur 999. Enfin, supprimez toutes les fibres extérieures à la zone de l’application et réglez son opacité sur 25%..
Pour terminer, ajoutez un cercle gris au-dessus des fibres (Opacité 30% ou moins). Et appliquez un flou gaussien autour de 45 - 50px Radius. Ensuite, supprimez la lueur en dehors de la zone d'application. Si vous ne souhaitez pas supprimer ou recadrer ces calques, vous pouvez convertir le calque gris "Arrière-plan" en un masque d'écrêtage en cliquant entre les miniatures des calques dans le panneau Calques et en maintenant le clic Option / Alt enfoncé..
Maintenant que le fond de notre application est terminé, il est temps d'aller de l'avant avec le contenu..
Étant donné que cette application aura plusieurs flux de nouvelles, nous les ajouterons dans différentes lignes. Chaque ligne contiendra un ensemble des dernières nouvelles de certains sites Web ou flux RSS. Nous allons commencer à ajouter une seule ligne, puis à la dupliquer autant de fois que nécessaire..
Gardez vos couches organisées, créez un groupe nommé "Flux" et placez-le entre les dossiers "Barre inférieure" et "Arrière-plan de l'application". L'ordre des dossiers est très important pour que l'animation finale fonctionne correctement.
Dessinez un rectangle blanc (hauteur 200px) et placez-le au-dessus de la zone de l'application, à côté de "l'en-tête". Pour l’ombre de la boîte, tracez un rectangle noir derrière le blanc, nommez-le "Ombre" et appliquez-lui un flou gaussien de 4 pixels. Puis, à l’aide des outils de déformation des commandes de transformation gratuites, déformez le rectangle noir comme indiqué dans le jeu d’écrans ci-dessous. Enfin, changez l'opacité "Ombre" à 50%.
Ajoutons un onglet où nous mettrons le nom du fil d'actualité. Tracez un rectangle arrondi avec un rayon d’angle de 5 pixels (#FFFFFF) et utilisez l’outil de sélection directe (A) pour déplacer les points inférieurs droit du rectangle de quelques pixels à droite. Appliquez ensuite une ombre portée subtile, comme illustré dans la capture d'écran ci-dessous. Placez le calque derrière le calque "Bg White".
Puisque notre arrière-plan a toujours l'air un peu moche, augmentons sa sensation profonde en ajoutant une superposition de dégradé subtile au calque "BG White" (#BEBEBE - #FFFFFF). Une belle touche consiste à ajouter un trait blanc de 1 px sur le calque d'arrière-plan pour créer un bel espace entre la boîte et son ombre.
Dupliquez le calque "Tab", placez la copie derrière l'original. Modifiez son avant-plan en bleu (# 014373) et son contour en (# 016CB4), répétez le processus, mais définissez une variante plus foncée du bleu (# 011A2E et # 0B4B79 pour le contour)..
Ajoutez le titre du fil d'actualités à l'aide de "Helvetica Neue 75 bold" en utilisant cette couleur au premier plan: # 034170. Vous pouvez ajouter un Favicon après le titre si vous voulez.
Ajoutez plus d'icônes sur les onglets, "Actualiser" et "Configurer" (j'utilise le jeu d'icônes mentionné sur les éléments). Appliquer une superposition de dégradé et une ombre portée avec les valeurs indiquées sur la capture d'écran ci-dessous.
Maintenant, ajoutez un onglet pour le bouton "Fermer".
Nous avons maintenant tous les calques d'arrière-plan créés (à l'intérieur d'un dossier nommé "Flux d'arrière-plan"), ainsi que le titre et l'icône à l'extérieur. Créez maintenant un rectangle vectoriel rectangulaire au-dessus du "Fond d’alimentation" nommé "Masque". Ce sera un masque futur pour masquer la visibilité de l'ensemble des News que ce flux aura. Mais ne vous inquiétez pas pour le moment, changez simplement le mode de fusion pour le multiplier..
Chaque ligne de notre application contient plusieurs articles, ajoutons-en un (j'utilise plusieurs articles de tuts + network comme exemples). Placez une image rectangulaire entre le calque "Masque" et les calques "Titre" - voir la capture d'écran ci-dessous. Répétez le processus décrit à l'étape 8 pour créer un diviseur d'ombre et réglez l'opacité sur 50%..
Ajoutons un titre à notre article, une ligne de métadonnées et un court paragraphe de texte. Voir la capture d'écran suivante pour voir la typographie et les couleurs suggérées. Enfin, placez toutes les couches liées à un article dans un dossier nommé "Article"..
Ajoutez d'autres articles jusqu'à ce que vous remplissiez la ligne entière. Lorsque vous manquez d'espace disque, sélectionnez tous les dossiers d'article que vous venez de créer (Commande / Ctrl + Maj sur les miniatures de dossier du panneau Calques) et faites-les glisser vers la gauche si nécessaire pour ajouter un autre article à droite. Ajoutez autant d'articles que vous le souhaitez, puis ramenez tous les articles à leur position d'origine (le premier article étant aligné à l'arrière-plan du flux)..
Placez tous les articles dans un nouveau groupe nommé "Articles". Assurez-vous que le dossier peut être déplacé vers la gauche et vers la droite, comme indiqué dans l'image ci-dessous. Convertissez ensuite le dossier en un objet intelligent. Ensuite, convertissez le calque "Masque" en un masque de découpage (Option / Alt, cliquez entre l'objet dynamique "Articles" et le calque "Masque"). Maintenant, essayez de faire glisser l'objet "Articles" vers la gauche et vers la droite, le calque "Masque" doit masquer les articles en dehors de la zone Masque. À ce stade, ce flux de nouvelles contient toutes les couches nécessaires pour animer son comportement..
Maintenant, ajoutez plusieurs rangées de flux de nouvelles et mettez chaque ligne dans un dossier portant son nom respectif: "Feed1", "Feed2", etc. Ajoutez ensuite tous les flux dans un nouveau dossier appelé simplement "Flux". Vous pouvez dupliquer l'arrière-plan et créer différents articles à l'intérieur de chacun, mais NE dupliquez PAS l'objet intelligent "Articles" du premier flux, créez-en un à partir de rien. Assurez-vous que l'ensemble du dossier "Feeds" est facilement déplaçable de haut en bas et inversement. Vous pouvez même ajouter quelques flux contenant uniquement du texte..
Faites glisser tous les "Flux" du bas vers le haut et laissez visibles uniquement les deux derniers.
Dans le dossier "Barre inférieure" (étape 11), ajoutez les icônes de navigation suivantes: "Accueil", "Actualiser", "Paramètres", "Flux" à partir des ressources. Ajoutez chaque nom d’icône sous son icône à l’aide de «Helvetica Neue 75 Bold» (# 818181). Appliquez ensuite à l’icône les styles de calques illustrés à l’écran ci-dessous. Enfin, créez un nouveau style pour une icône sélectionné / actif.
Ajoutez une boîte transparente derrière celle-ci et changez la couleur de premier plan du nom en blanc. Vous devriez obtenir quelque chose comme le bas de la capture d'écran ci-dessous?
Dans le dossier "Flux", ajoutez un bouton (rayon arrondi 5px) copiez et collez le style de calque des icônes de la barre inférieure si vous souhaitez gagner du temps. Ajoutez ensuite le mot "Ajouter du fil" avec "Helvetica Neue 75 Bold" (# 828282) et alignez-le au centre du bouton..
Jusqu'à présent, la structure de vos calques doit contenir un objet intelligent "iPad", le "En-tête", la "Barre inférieure", le dossier "Flux" et le "Fond de l'application"..
Maintenant, ajoutez un nouveau jeu de couches dans un dossier nommé "Feed" entre le dossier "Bottom Bar" et le dossier "Feeds". Ce dossier contiendra un article, créera un fond blanc et ajoutera du contenu (titre, vignette et un court paragraphe de texte). Dessinez un grand rectangle noir juste à l'intérieur des limites de la zone d'application et réglez son opacité à 75%. Puis centrez Alignez la zone blanche. Peu importe si le contenu que vous avez ajouté dépasse la zone d'application, nous allons animer un effet de défilement pour ce contenu. Allons de l'avant.
Commencez par organiser vos calques, nommez le fond noir "BG" et disposez-le en bas. Puis placez tous les calques de texte, les vignettes et les images dans un dossier nommé "Nouveau" ou "Article".
À l'aide de l'outil Ellipse, tracez un cercle blanc dans le coin supérieur droit de la zone d'alimentation et appliquez-y une ombre portée subtile. Ensuite, collez (ou dessinez) un joli "X" comme bouton de fermeture, placez tous ces calques dans un dossier nommé "Fermer".
Sélectionnez le dossier "Nouveau" et convertissez-le en objet intelligent, puis créez un autre rectangle au-dessus du fond blanc et nommez-le "Masque" (il apparaît en noir sur la capture d'écran) et utilisez-le comme masque de détourage pour le "Nouveau "Objet intelligent. Puis, à l'aide de l'outil Déplacement (V), faites glisser l'objet de haut en bas et inversement pour vous assurer que tout a l'air d'aller bien. Enfin, placez l’article dans sa position initiale (aligné à gauche et en haut).
Avant d’aller de l’avant, il est important d’organiser toutes les couches et de créer correctement les objets intelligents. La structure de la couche doit être la suivante, de haut en bas: l'objet intelligent "iPad", puis les dossiers "En-tête", "Barre inférieure", "Flux", "Flux" et "Contexte de l'application", et enfin le calque général "BG"..
Ensuite, il est important que vous ayez créé l'objet dynamique "Articles" à partir de la première ligne de flux (étape 26), car un objet dynamique contient un scénario complet et vous pouvez imbriquer des transitions animées à plusieurs niveaux (je sais que cela semble déroutant, mais logique en quelques étapes).
Vous aurez besoin d'un processeur et d'une carte graphique corrects pour restituer l'animation. La patience est donc un ingrédient essentiel..
Rappelez-vous: nous animerons le comportement de l'application, vous devez toujours garder à l'esprit le processus de consultation des flux d'actualités, de défilement des articles et enfin d'ouvrir un article pour le lire..
Allez dans Fenêtre> Animation. Ce panneau contient une timeline dans laquelle vous pouvez insérer des images clés pour animer les transitions entre les styles de post-application, d'opacité et de calque. Dans ce tutoriel, nous animerons Position et Opacité. Ce domaine n’est pas très différent des autres programmes de montage vidéo comme After Effects ou Premiere. Si vous débutez, c’est un excellent point de départ..
Commençons la partie amusante de ce tutoriel!
Nous allons commencer à cacher un dossier qui ne devrait pas être chargé depuis le début. Le flux contextuel doit rester masqué jusqu'à ce qu'une action le rende visible. Pour cela, dans le panneau Animation, recherchez le dossier "Flux" et cliquez sur le petit triangle situé à côté pour développer les options d'animation. Déplacez ensuite le curseur triangulaire sur la timeline et placez-le au tout début de l'animation. Cliquez sur la petite icône Stop Watch à côté de l'option Opacity dans le dossier "Feed" pour créer une image clé. Une fois l'image clé créée, vous pouvez appliquer toutes les modifications des propriétés souhaitées. Dans ce cas particulier, nous allons réduire l'opacité du dossier "Flux" à 0%. Et voilà, ce dossier restera caché jusqu'à ce que nous le rendions visible à nouveau.
Parcourez vos dossiers dans le panneau d'animation et trouvez l'objet intelligent "Articles" de la ligne "Flux 1" et développez ses options. - Faites glisser le gestionnaire sur la timeline un peu à droite, à côté de 1s (une seconde), puis cliquez sur l'icône Arrêter le chronomètre pour créer la première image clé. Assurez-vous à ce stade que la position de l'objet est alignée à gauche avec l'arrière-plan de la ligne de source. - Faites glisser le gestionnaire à côté des 4 sur la timeline et cliquez sur le petit carré jaune situé à gauche de l'option Position (entre les flèches suivante / précédente) pour créer une nouvelle image clé. Maintenant, à l'aide de l'outil de déplacement, faites glisser l'objet dynamique "Articles" vers la gauche, de manière à ce que l'objet soit aligné à droite sur l'arrière-plan de la ligne de flux. - Déplacez le gestionnaire vers le 5 sur la timeline et insérez une nouvelle image clé (rappelez-vous, cliquez sur le petit carré jaune) et maintenez simplement sa position (ne déplacez rien). - Enfin, placez le gestionnaire à côté des 7 sur la timeline, créez une nouvelle image clé et, à l'aide de l'outil de déplacement, remettez l'objet "Articles" dans sa position d'origine, aligné à gauche sur l'arrière-plan du fil.
Si vous le souhaitez, vous pouvez prévisualiser cette petite partie du processus d’animation en sélectionnant Fichier> Exporter> Aperçu vidéo. Il y a deux gestionnaires sur les zones gauche et droite de la timeline que vous pouvez faire glisser pour réduire l'espace de travail, ce qui accélère le processus de rendu..
À partir du bon sens, allons de l'avant. Nous allons maintenant animer l’ensemble du dossier "Feeds". Étant donné que nous ne pouvons pas animer directement la position d'un dossier, nous devrons le convertir en objet intelligent, mais qu'adviendra-t-il de la belle animation que nous venons de faire avec les articles? Une fois que vous convertissez l'intégralité du dossier en un objet dynamique, tout son scénario et toutes ses images clés restent identiques. Le scénario est de toute façon unique. S'il y a un effet de transition sur la troisième seconde d'animation en objet dynamique, il restera visible dans tous ses fichiers et calendriers parent. Vous pouvez le tester en exportant l'animation avec le Smart Object au lieu du dossier et vous ne verrez aucune différence..
Pour le masquer correctement (pour éviter de voir un certain nombre d’articles se déplacer derrière l’iPad), créez une copie du calque "BG", placez-le sur l’objet "Flux" et appliquez un masque de vecteur. 1024x768px).
Sélectionnez l'objet intelligent "Flux" et ouvrez le panneau Animation. Déplacez le gestionnaire de la timeline à côté des 7, créez une image clé de position et assurez-vous que les flux sont alignés en haut. Ensuite, déplacez le gestionnaire à côté des 11 et créez une image clé de position, puis déplacez tout l'objet jusqu'à ce que le bas soit aligné. Ensuite, sur les lignes 14 sur la timeline, créez une autre image clé de position, mais ne déplacez pas l'objet, laissez-le simplement aligné en bas, cela créera une Tenir effet. Enfin, déplacez le gestionnaire de la timeline à côté des 15 et créez une image clé, faites glisser l'objet jusqu'à ce qu'il soit à nouveau aligné en haut..
Prévisualiser la précédente étape de l'animation devrait ressembler à ceci:
Nous devons d’abord rendre la fenêtre contextuelle à nouveau. Souvenez-vous que nous la cachons à l’étape 35. Sélectionnez le dossier "Flux" et, dans le volet Animation, déplacez le gestionnaire de la timeline à côté des années 20 et créez une image clé. Déplacez ensuite le gestionnaire sur les 22 et créez une autre image clé, puis modifiez l'opacité du dossier sur 100%. Ensuite, créez une autre image clé après les années 30 et conservez l'opacité à 100%. Enfin, créez une image clé à côté des 31 et redéfinissez l'opacité de l'ensemble du dossier sur 0%.
Est-il temps d'animer le contenu de notre article pop-up. À l'étape 33, nous avons créé un objet intelligent dans le dossier "Flux". Sélectionnez-le et assurez-vous qu'il est correctement masqué avec le calque "Masque" derrière celui-ci. Sur le panneau d'animation. Sur les 24 secondes de la chronologie, créez une image-clé de position pour le nouvel objet dynamique ou "Article", afin de vous assurer que l'article est aligné en haut. Ensuite, à côté des 25, créez une image clé de position et faites glisser l'objet intelligent jusqu'à ce que l'article soit aligné en bas. Ensuite, sur les 26, créez une image clé sans modifier la position de l'objet. Enfin, à côté des 28, créez une image clé en faisant glisser l'objet vers sa position alignée supérieure..
À ce stade, vous savez comment faire glisser, masquer et déplacer des calques et leur apparence lors de l'exportation de l'animation. Tout le comportement de l'application est animé, vous pouvez donc vous arrêter ici. mais si vous le souhaitez, vous pouvez ajouter des aides visuelles pour aider votre client / client à mieux comprendre vos idées..
Accentsconagua