Apprenez à créer une maquette de votre application avec Comp CC et examinez les mises en page dans les plans de travail de Photoshop. Prévisualisez ensuite votre application sur vos terminaux iOS avant de fournir les ressources à votre développeur d'applications mobiles.
Pour suivre ce tutoriel, vous devez disposer de Photoshop CC 2015.
Copie des fichiers d'exemple dans vos Bibliothèques Creative Cloud (facultatif)
Pour recréer cette maquette d'application, utilisez les ressources de la bibliothèque Adventure Guide Mobile App. Cliquez sur Enregistrer dans Creative Cloud pour copier la bibliothèque dans votre compte afin d’avoir directement accès aux ressources dans Comp CC et Photoshop.
Remarque : vous devez vous connecter à votre compte Creative Cloud pour enregistrer la bibliothèque.
Recherche d'idées de mise en page dans Comp CC
Ouvrez Comp CC, appuyez sur le signe + pour créer un projet, puis sélectionnez le format le mieux adapté à ce dernier. Pour ce tutoriel, choisissez le format iPhone 6.
Dessinez un rectangle pour créer une barre de navigation et un pied de page. Tracez une croix pour indiquer l'emplacement des images. Tracez un rectangle suivi d'un point pour créer une zone de titre. Tracez quelques traits suivis d'un point pour créer du texte sur plusieurs lignes. Les formes que vous dessinez sont automatiquement converties en objets.
Conseil : appuyez sur l'icône d'engrenage dans la partie supérieure de l'écran pour obtenir de l'aide sur les gestes adéquats.
Perfectionnement des compositions à l'aide des ressources
Appuyez sur la barre de navigation, puis sur l'icône Couleur au bas de l'écran. Faites votre choix parmi les couleurs du sélecteur ou celles de la bibliothèque Adventure Guide Mobile App. Appuyez ensuite à l'extérieur de la zone. Ajoutez également une couleur au pied de page.
Appuyez sur l'espace réservé à l'image, puis sur l'icône Graphiques au bas de l'écran. Appuyez sur Mes bibliothèques et sélectionnez la bibliothèque Adventure Guide Mobile App. Appuyez sur la photo _riders pour l'insérer dans l'espace réservé. Appuyez deux fois sur la photo et redimensionnez-la, au besoin, avec deux doigts.
Ajout de texte et d'icônes
Appuyez sur l'icône Graphiques en haut de l'écran, puis sélectionnez la bibliothèque Adventure Guide Mobile App. Appuyez sur l'icône représentant une tente blanche pour l'insérer dans votre mise en page. Faites glisser une poignée pour la redimensionner, puis placez-la à l'endroit souhaité. Ajoutez les icônes restantes.
Appuyez sur l'icône Texte en haut de l'écran, puis sur Titre pour ajouter du texte dans l'espace réservé. Appuyez à l'extérieur du menu, puis placez le titre dans la barre de navigation supérieure et modifiez sa couleur. Appuyez sur l'icône Texte au bas de l'écran et réglez les attributs tels que la police, la taille, l'alignement et l'espacement.
Vous pouvez ensuite poursuivre votre travail dans Photoshop sur votre poste de travail. Appuyez sur l'icône Envoyer dans la partie supérieure de l'écran et choisissez l'option Envoyer vers Photoshop CC.
Création d'écrans pour votre application ou site web
Utilisez la mise en page Comp comme modèle pour créer les écrans de votre application ou site web mobile. Si Photoshop est ouvert, la composition s'ouvre en tant que document Photoshop modifiable.
Pour créer et examiner des projets de plusieurs tailles dans un seul et même document Photoshop, utilisez une nouvelle fonctionnalité de Photoshop CC 2015 : les plans de travail.
Finalisez la composition, puis sélectionnez tous les calques dans la palette Calques. Sélectionnez Plan de travail à partir des calques dans les options du panneau Calques. Nommez le plan de travail Biking.
Création d'une maquette des écrans de votre application à l'aide de plans de travail
Dupliquez votre plan de travail en sélectionnant Dupliquer le plan de travail dans les options du panneau Calques, et nommez-le Camping. Faites glisser le deuxième plan à l'endroit souhaité dans la zone de travail. Modifiez-le pour créer un plan de travail pour l'écran Camping de l'application. Répétez l'opération pour créer des plans de travail affichant les différents états de chaque écran de l'application.
Conseil : les plans de travail permettent de dupliquer facilement des écrans afin de réutiliser leur contenu et de vérifier le flux utilisateur dans l'application. N'hésitez pas à télécharger le fichier PSD pour consulter les plans de travail finalisés de ce tutoriel.
Prévisualisation de l'application sur le terminal mobile
Utilisez Adobe Preview CC, application compagnon de Photoshop, pour prévisualiser votre application ou site web mobile en temps réel sur votre iPhone ou iPad. Lancez Preview CC sur votre terminal mobile, puis connectez ce dernier à Internet en USB ou en Wi-Fi. Cliquez sur l'icône Aperçu sur le périphérique pour ouvrir le panneau et attendez que la connexion de votre terminal soit établie.
Preview CC détecte les plans de travail et les affiche conformément aux dimensions de chaque terminal. L'aperçu étant dynamique, toutes les modifications apportées à l'application dans Photoshop apparaissent automatiquement sur votre terminal. Pour passer d'un plan de travail à l'autre dans Preview CC, effleurez l'écran de droite à gauche ou de gauche à droite.
Exportation du projet en vue de sa production
Lorsque vous êtes satisfait de votre application, choisissez Fichier > Exportation > Exporter sous, puis sélectionnez PNG afin d'exporter tous les plans de travail pour votre développeur.
Conseil : exportez facilement un plan de travail au format PNG, JPEG, SVG ou GIF. Dans le panneau Calques, sélectionnez un plan de travail. Cliquez avec le bouton droit et sélectionnez Exportation rapide au format PNG ou, si vous souhaitez utiliser d'autres paramètres d'exportation, Exporter sous.
