Share
Ce que vous allez créerVous avez toujours voulu transformer une interface d'application PSD en une démonstration entièrement animée pour vos clients ou votre site? Il s'avère que vous pouvez utiliser Photoshop pour cela aussi.
Dans ce didacticiel, nous allons concevoir une application d'actualité iPhone simple, puis l'animer pour la présentation du client et l'exporter sous forme de fichier GIF. Vous apprendrez tout ce dont vous avez besoin pour passer de l'idée à la démonstration animée, le tout dans une version récente de Photoshop..
Nous avons utilisé Photoshop CC dans ce didacticiel, mais CS5 ou 6 fonctionneraient également. Vous aurez également besoin de la photo suivante pour compléter ce didacticiel. Téléchargez-les avant de commencer ou remplacez-les par une image similaire et ajustez les étapes en conséquence:
Tout d'abord, nous allons commencer à concevoir l'interface de l'application. Créer un nouveau fichier (Contrôle-N) avec la taille de la toile 640 px par 1136 px, puis clique D'accord.
Si, au contraire, vous avez déjà une interface d’application conçue, vous pouvez l’ouvrir dans Photoshop, puis passer à la Robinet section de ce tutoriel.
Cliquez sur Voir> Nouveau guide faire un nouveau guide, ce qui nous aidera à placer les éléments de l’interface graphique avec précision. Réglez-le sur Verticale avec position 15 px.
Ajoutez un autre guide vertical de chaque côté de la toile avec une distance de 15 px entre chaque guide..
Dessinez un autre guide, cette fois horizontalement à 40 px, 128 px, et 220 px.
Ajoutez une barre d'état dans la partie la plus haute de votre toile. Si vous avez besoin d'instructions détaillées à ce sujet, consultez la section barre d'état de notre précédent tutoriel. Comment concevoir une application de messagerie iOS 7 dans Photoshop.
Ensuite, créez un nouveau calque, puis sélectionnez la deuxième section, puis remplissez-la de couleur grise., # 2c3137.
Ajoutez le titre de l'application dans la partie supérieure de l'interface..
Ajoutez un logo au titre. Je viens de dessiner quelques rectangles simples pour le logo, mais si vous avez une icône d'application existante, vous pouvez simplement l'importer dans un nouveau calque..
Dessinez une icône de loupe en utilisant une combinaison de deux formes de cercle et un rectangle arrondi, en utilisant la même couleur que le logo de l'application. Placez-le sur le côté droit de l'application.
De l’autre côté, tracez quatre rectangles arrondis pour l’icône.
Créez un nouveau calque avec une section rectangle qui se place sous la barre de titre. Remplissez la section suivante avec une couleur grise, tout comme la section précédente.
Ajoutez un masque de calque sur le calque, puis ajoutez un dégradé noir à blanc jusqu'à ce que le fond soit estompé..
Ajouter un menu en utilisant le Outil de type, contenant les nouvelles catégories. Définissez le premier menu - dans ce cas, le Tout option-pour être en gras, pour indiquer que la catégorie est active. Dupliquez-le (Contrôle-j) puis définissez un autre menu, dans ce cas, sport-pour être en gras, encore une fois pour indiquer quelle catégorie est sélectionnée.
Maintenant, de la Couches panneau, réglez le sport menu Opacité à 0% pour le cacher, comme nous voulons le Tout catégorie à être audacieux en premier.
Ajoutez une fine flèche pour la navigation dans les menus, composée de rectangles arrondis.
Ajouter une autre flèche sur l'autre côté.
Remplissez le reste de l'interface avec la couleur grise. Assurez-vous de mettre ce fond sous tous les éléments de l'interface graphique.
Dessinez un rectangle gris clair pour l'arrière-plan de la section des nouvelles.
Appliquer Accident vasculaire cérébral, Intérieur Glow, et Lueur externe pour ajouter plus de contraste à la zone des nouvelles. Double-cliquez sur le calque, puis utilisez les paramètres suivants à partir des captures d'écran ci-dessous:
Dessinez un rectangle arrondi blanc sur la partie supérieure de la forme précédente. Nous allons mettre la nouvelle image ici.
Appliquer Lueur intérieure dans la forme blanche avec les paramètres suivants:
Sélectionnez une photo dans le jeu de photos Tuts + Stock que vous avez précédemment téléchargé, ou toute autre photo que vous souhaitez utiliser, et placez-la en couvrant le rectangle arrondi blanc..
Frappé Contrôle-Alt-G convertir le calque de photo sélectionné en un masque de découpage. La photo ira automatiquement à l'intérieur de la couche derrière elle. Et voici ce que vous voyez: une photo parfaitement placée au-dessus de la zone d'actualités individuelle.
Ajouter du texte pour le contenu des nouvelles. Assurez-vous d’ajouter du contraste au texte de l’actualité pour une meilleure expérience de lecture en modifiant le type de police, la couleur et la taille..
Ajoutons des icônes dans la conception de l'élément news. Dessinez deux petits rectangles arrondis sans Remplir et 1 pt trait blanc.
Double-cliquez sur le calque, puis ajoutez un style de calque Superposition de couleurs. Utilisation # 708196 pour sa couleur.
Répéter le processus précédent, mais cette fois utilise une combinaison d'un rectangle arrondi et d'un rectangle.
Ajouter une forme de petit cercle. Maintenant, nous avons une icône de tag. Sucré!
Jusqu'à présent, ceci est notre conception d'application à un grossissement de 100%.
Ajoutez d'autres articles d'actualités individuels dans l'application en dupliquant les couches d'éléments d'actualités, en les personnalisant de manière appropriée..
Ajouter une plus grande zone de nouvelles. Ceci sera montré quand une nouvelle individuelle est sélectionnée.
Placez tous les éléments d'actualités individuels et les gros articles dans des groupes de calques distincts. Vous voulez vous assurer que chaque couche est soigneusement placée dans un groupe de couches en fonction de son élément.
Par exemple, vous voulez que chaque couche qui a créé la première section d'actualités individuelle soit placée dans un groupe de couches, ainsi que les éléments pour les articles d'actualités en plein écran dans d'autres groupes. Cela vous aidera à travailler plus facilement tout en rendant l'animation.
Pour le moment, nous n'utiliserons pas cette grande section de nouvelles. Donc, réglez son opacité à 0%.
Nous devons maintenant concevoir l'indicateur de prise. Créez un nouveau groupe de couches et nommez-le robinet. Ensuite, dessinez une forme de cercle blanc. Définir sa Opacité à 50%.
Dupliquez la forme du cercle en appuyant sur Contrôle-j. Faites-le plus grand, définissez accident vasculaire cérébral à 3 pt avec une couleur blanche, et retirez le Remplir Couleur.
Ajoutez une autre forme de cercle, cette fois plus fine. Définissez sa taille de trait sur 2 pt.
Cachez tous les calques du groupe de calques tap que nous venons de créer, car vous ne voudrez pas que les taps apparaissent lors du premier chargement de l'interface utilisateur, mais les affichent uniquement lorsque l'animation est sur le point de passer à l'élément sélectionné..
Nous sommes enfin prêts à créer notre animation d'interface utilisateur. Ouvrez le Chronologie panneau et ensuite faire un nouveau cadre.
Faire un autre nouveau cadre.
Il est maintenant temps de révéler le groupe de couches de tapotement. Lorsque vous montrez une scène de défilement, masquez les deux cercles effacés et nous allons utiliser cette condition pour indiquer le geste de défilement. Il apparaîtra plutôt comme un trait continu, tandis que les cercles extérieurs délavés donnent une apparence plus ondulée avec un seul tapotement pour sélectionner un élément..
Changer la durée à 1 seconde pour la première image et 0,2 seconde pour la deuxième image.
Ajouter un autre cadre.
Activer le Robinet groupe de couches et toutes les couches de la grille de nouvelles. Utilisation Outil de déplacement pour les déplacer dans votre liste de couches.
Pour créer automatiquement une animation fluide entre les images actuelle et précédente, cliquez sur Tween de Chronologie menu du panneau.
Définissez l'interpolation sur 5 pour le cadre ajouté.
Maintenant, nous avons une animation de la grille d'actualités se déplaçant vers le haut sur chaque image.
Si vous pensez que l'animation est trop rapide, vous pouvez la ralentir en sélectionnant toutes les images et en réglant la durée sur 0,2 seconde.
Testez l'animation en cliquant sur l'icône de lecture dans le menu déroulant. Chronologie panneau. N'oubliez pas de définir l'animation sur Pour toujours; de cette façon l'animation est en boucle.
Notre animation actuelle contient la grille d'actualités se déplaçant vers le haut. Dans l'image suivante, nous devons rétablir l'état précédent afin qu'elle continue de manière transparente avec la première image. Pour ce faire, copiez le deuxième cadre, puis collez-le à la dernière position en choisissant Coller après la sélection dans la boite de dialogue.
Appliquer le Tween commande à nouveau pour faire une nouvelle animation entre la dernière et l'avant-dernière image.
Ajouter un nouveau cadre et masquer l'indicateur de prise.
Jusqu'ici, c'est l'animation que nous avons, ce qui nous donne une interface de base avec défilement.
Il est maintenant temps d’animer la sélection d’un lien dans le menu. Tout d'abord, créez un nouveau cadre. Dans ce cadre, définissez le Opacité menu de texte avec la variante en gras sélectionnée de Tout du menu mis à 0% et sportdela transparence de la variante sélectionnée définie sur 100%.
Activez le groupe Appuyez sur le calque et affichez tous ses calques. Changer la durée du cadre en 0,2 seconde.
Faire un nouveau cadre avec une durée de 0,1 seconde. Cette fois cache le cercle le plus mince.
Ajouter un autre cadre et masquer le cercle suivant.
Ajouter un nouveau cadre et masquer le groupe de calques de tapotement.
Créez un nouveau cadre, puis définissez le Opacité de chaque reportage dans la grille sans la balise sport à 0%.
Toujours dans ce cadre, faites glisser les reportages sportifs individuels vers le haut dans la grille, en remplissant les espaces vides au-dessus d'eux..
Tween entre la trame actuelle et la précédente. Pour une animation plus rapide, définissez les images ajoutées sur 3.
Définissez la durée dans la dernière image sur 2 secondes.
Pour ce robinet, c'est l'animation que nous avons.
Ensuite, nous allons sélectionner l'un des articles de presse et le révéler en plein écran. Tout d'abord, créer un nouveau cadre avec une durée 0,2 seconde et ensuite révéler toutes les couches à l'intérieur du groupe de couches Tap.
Ajouter un nouveau cadre, puis définissez sa durée sur 0,1 seconde. Masquer le trait de cercle le plus mince.
Ajouter un autre cadre puis masquer le cercle suivant.
Ajouter un autre cadre avec la durée 0,1 seconde. Masquer le groupe de calques effleurer et créer un nouveau cadre. Révéler la grande section de nouvelles que nous avons faite plus tôt dans Section 1 Étape 28 en mettant sa Opacité à 100%. Cachez la petite grille d’information en définissant son Opacité à 0%.
Ajouter une animation d'interpolation entre l'image actuelle et les précédentes.
C'est ce que nous avons pour cette animation.
De Chronologie panneau, cliquez sur Aplatir les cadres en couches.
Chaque image sera convertie en une couche plate. Si vous avez 33 images, vous aurez également 33 couches plates: couche Cadre 1 pris du contenu de l'image 1, couche Cadre 2 pris de l'image 2, et ainsi de suite.
Sélectionner tous les calques d'image dans Couches panneau.
Faites glisser les calques sur la photo iPhone que vous avez téléchargée précédemment.
Dans Chronologie panneau, sélectionnez Créer une animation de cadre puis cliquez sur Nouveau cadre bouton.
Assurez-vous que tous les calques sont toujours sélectionnés. Frappé Contrôle-t effectuer une transformation. Tenir Contrôle puis faites glisser chaque coin et placez-les sur le coin de l'écran.
Créez un nouveau cadre pour chaque calque. Mettre couche Cadre 1 dans la première image, couche Cadre 2 dans la seconde image, couche Cadre 3 en troisième image, et ainsi de suite. Vous souhaitez également faire correspondre la durée de chaque image. Assurez-vous de régler la boucle sur Pour toujours, donc l'animation continuera à boucler.
Regardez l'image ci-dessous pour un exemple. Couche Cadre 23 est révélé sur l'image 23. Couche Cadre 25 est révélé sur l'image 25, et ainsi de suite. Continuer ceci pour chaque image.
Il est temps d'exporter le résultat sous forme de fichier GIF animé. Sélectionner Enregistrer pour le Web dans le menu Fichier et sélectionnez GIF comme type de fichier. Jouez avec les paramètres disponibles pour obtenir la taille de fichier optimale. Testez le résultat de l'animation en cliquant sur le bouton de lecture. Assurez-vous de régler son Options en boucle à Pour toujours.
Et c'est tout: vous avez conçu une interface utilisateur d'application de démonstration, l'avez animée et insérez l'animation dans une image de l'iPhone pour donner à l'animation une apparence réelle.
J'espère que vous avez trouvé ce tutoriel utile. Vous pouvez modifier les étapes incluses pour utiliser n'importe quel type d'application que vous souhaitez tester et utiliser une image différente pour afficher, par exemple, une application pour tablette ou un site Web. Vous pouvez également essayer d'autres types d'interaction multi-touch dans la présentation finale, tels que l'inclinaison-défilement ou le pincement au zoom, si vous modifiez les animations.
Si vous créez vos propres animations de démonstration d'applications à l'aide de ce didacticiel, nous aimerions les voir dans les commentaires ci-dessous.!
Accentsconagua