Effets d’interface utilisateur iOS7 dans Photoshop et After Effects

Avec l’annonce d’iOS7, Apple a dévoilé une toute nouvelle interface utilisateur pour son système d’exploitation mobile. Avec la conception super plate et les polices fines, Apple a déclaré que la conception serait adaptable aux applications en rendant certains des éléments de base de l’interface utilisateur transparents, par conséquent, certaines des couleurs du contenu de vos applications saigneraient et définiraient comment les composants de base iOS7 influenceraient l’aspect général. Un autre détail important de l’interface utilisateur était qu’avec la transparence, un effet de flou était appliqué, similaire à Windows Vista et à leur conception Aero. Dans cet esprit, j’ai décidé de voir comment créer et partager un flux de travail super simple pour obtenir cet effet en utilisant Photoshop et After Effects.

Donc, pour ce tutoriel, je vais vous montrer comment obtenir l’effet de flou d’iOS7 en utilisant Photoshop et After Effects. L’avantage de ce flux de travail est qu’il montre clairement comment les applications Adobe fonctionnent ensemble de manière transparente.

Étape 1

La première chose que j’ai faite a été de télécharger le PSD iPhone iOS7 de teehanlax (http://www.teehanlax.com/tools/ios7/) pour utiliser l’interface utilisateur iOS7 de base.

Étape 2

Ici j’ai créé un nouveau document sous Photoshop aux dimensions de l’iPhone 5, 640×1136 pixels. Ensuite, en utilisant l’interface utilisateur de base d’iOS7, j’ai commencé à concevoir l’écran de mon application. Dans ce cas, j’ai conçu ce qui serait l’écran d’accueil de l’application Abduzeedo.

Étape 3

Si vous faites défiler vers le haut, vous pouvez voir que l’iOS7 a un tas de zones transparentes, une sorte de Windows Vista. Pour ma conception, je me suis juste assuré que la barre d’action avait une certaine transparence. L’effet de flou sera ajouté dans After Effects.

Une fois votre conception terminée, enregistrez le fichier PSD afin que nous puissions l’importer dans After Effects.

Étape 4

Il est temps d’ouvrir After Effects. Dans After Effects, faites glisser le fichier PSD vers le panneau Projet. Une fois que vous faites cela, vous serez invité avec la boîte de dialogue. Pour le type d’importation, utilisez Composition – Conserver les tailles de calque. Pour les options de calque, utilisez des styles de calque modifiables.

Étape 5

Voici ce que vous aurez dans After Effects. Remarqué que lors de l’importation d’un fichier PSD, vous obtiendrez déjà une composition avec le nom du fichier et un dossier avec tous les calques et objets. Double-cliquez sur la composition pour ouvrir l’écran d’accueil que nous avons créé dans Photoshop. Vous aurez alors tous les calques que vous avez dans Photoshop. J’ai supprimé l’arrière-plan et les autres calques inutiles. Une autre chose importante à faire est de changer la couleur d’arrière-plan de la composition du noir par défaut au blanc.

Étape 6

Maintenant, créer l’effet de flou dans After Effects est assez simple. Allez dans Calque> Nouveau> Calque de réglage. Positionnez ce calque de réglage sous la barre de navigation. Le calque de réglage appliquera l’effet de flou à tous les calques situés en dessous dans la chronologie. Pour le moment, nous n’avons que le calque, appliquons donc un peu de flou.

Étape 7

Avec le calque de réglage 1 sélectionné, accédez à Effet> Flou et netteté> Flou gaussien. Je ne sais pas exactement combien de flou Apple applique dans iOS7, mais pour cette petite démo, j’en ai utilisé 20 pour le flou. Notez que l’ensemble du calque Groupe 1 est flou et que la barre d’action ne l’est pas. Notre objectif est de rendre le flou visible uniquement lorsque l’écran passe sous la barre de navigation. Pour ce faire, nous appliquerons un masque au calque de réglage.

Étape 8

Avec le calque de réglage 1 sélectionné, cliquez sur l’outil Rectangle Q, puis créez un rectangle sur la zone que vous souhaitez afficher. Dans ce cas, de la barre de navigation vers le bas de la page. Agrandissez également la largeur et sortez de l’écran, cela rendra le flou plus uniforme lors du passage sous la barre de navigation.

Étape 9

Essayez de déplacer le calque Groupe 1 (l’écran d’accueil) de haut en bas pour voir le flou appliqué sous la barre de navigation. Vous pouvez augmenter le flou du calque de réglage 1 ou vous pouvez rendre la barre de navigation plus transparente.

Conclusion

L’ensemble du processus est assez simple et direct. Vous pouvez utiliser ce didacticiel comme base pour un fichier de modèle, puis le réutiliser pour de futurs projets. Vous pouvez également améliorer cela ou proposer votre propre processus dont j’aimerais entendre parler. Une chose à garder à l’esprit est qu’à notre époque, il est extrêmement important de commencer à aller au-delà des simulations statiques. After Effects est un outil incroyable pour ce type de travail et il semble être une transition en douceur pour les concepteurs d’interface utilisateur utilisant Photoshop.

https://www.youtube.com/watch?v=Xd7fE5SXGL8

Télécharger le fichier After Effects

Cliquez ici pour télécharger le fichier After Effects utilisé pour ce tutoriel