Share
Maintenant que nous avons introduit Photoshop et quelques-uns des outils les plus essentiels, passons aux quatre premiers tutoriels de cette série pour créer un arrière-plan agréable pour une application mobile. La conception des arrière-plans d'applications diffère de la conception des arrière-plans de bureau d'au moins une façon fondamentale: vous devez éliminer tout encombrement inutile et ne fournir à l'utilisateur que ce qui est absolument nécessaire. Continuez à lire pour en savoir plus!
Je commence avec une seule image que nous allons transformer en arrière-plan attrayant pour être utilisé comme page d'accueil / écran de destination d'une application mobile. La page d'accueil est probablement la page la plus importante d'un site. Le plus souvent, il s’agit de la première page que votre utilisateur verra, et s’il n’est pas attrayant ou facile à utiliser, il ira chercher quelque chose qui est.
Nous allons utiliser tous les outils que j'ai décrits dans les trois précédents tutoriels. Si vous ne les avez pas encore vérifiées, je vous encourage à les lire maintenant..
Voici le fichier avec lequel je commence:
Ici, nous allons choisir un paramètre prédéfini Photoshop pour la taille du document. Photoshop a les tailles de fichiers les plus courantes intégrées, nous n'avons donc pas à nous soucier de la personnalisation. En fonction du périphérique pour lequel vous développez, c’est ici que vous déterminez la taille de votre toile.
Encore une fois, cela varie en fonction du périphérique pour lequel vous développez, mais dans ce cas, je vais utiliser un préréglage..
Avec le nouveau document ouvert, nous allons intégrer le graphique de la ville. Si je n'ai pas encore suffisamment maîtrisé ce point, permettez-moi de le faire encore une fois: il existe mille façons de faire cela (et la plupart des autres tâches) dans Photoshop. Personnellement, j'aime bien glisser-déposer l'image ou, plus facilement, la placer directement dans le fichier.
Lorsque vous placez l'image, vous avez la possibilité de la redimensionner si vous le souhaitez. Je ne vais pas cette fois, alors:
Bien et dandy, mais jusqu'ici rien de spécial, non? Ajoutons de la couleur.
Nous allons remplir le fond avec une couleur orange unie.
et choisissez un orange clair. Je vais utiliser # fa871b.
REMARQUE: vous pouvez également utiliser l'outil de remplissage (G) de la barre d'outils..
Maintenant, nous commençons à aller quelque part. Ajoutons un dégradé pour lui donner de la profondeur. L’effet recherché est un coucher de soleil, nous allons donc utiliser un jaune et un orange.
Pour rendre les choses plus faciles à voir, désactivons la visibilité du calque d'arrière-plan.
ouvrir la palette. 
REMARQUE: Plus vous déplacez le curseur vers le haut, plus votre dégradé sera grand..
Vous devriez avoir quelque chose qui ressemble à ceci:
Ça commence à bien paraître.
Nous nous sommes maintenant débarrassés des deux gradients situés sous le graphique de la ville et nous avons créé une jolie ligne d'horizon. Ajoutons du texte.
et, avec le sélecteur de couleur, cliquez sur le calque d'arrière-plan pour sélectionner # f5a23a (la couleur que nous avions précédemment). Avec la couleur d'arrière-plan sélectionnée, ajoutez un peu plus de rouge pour rendre le texte plus foncé que l'arrière-plan. J'ai utilisé # da5a00. 
Ça n'a pas l'air minable, mais ça pourrait être mieux. C'est le détail qui fait un bon fond.
Cela va dupliquer le calque et le placer directement sur le premier calque de texte.
REMARQUE: Double-cliquez sur le calque, pas sur le titre du calque. Si vous double-cliquez sur le titre du calque, tout ce que vous allez faire est de modifier le titre du calque..
Nous allons utiliser une couleur plus claire que notre police initiale.
La superposition est terminée, mais nous souhaitons que la surbrillance apparaisse derrière le texte rouge plus foncé..
Ugh, maintenant notre couche de texte en surbrillance n'est pas visible! Compensons la surbrillance de quelques pixels seulement.
Cela aurait dû créer un joli petit accent subtil sur le texte, un peu de profondeur et quelques jolis détails.
Et voila. Nous avons maintenant un arrière-plan visuel intéressant pour notre page d'accueil, qui incitera les utilisateurs à revenir et à rester plus longtemps. Avec un peu de HTML et CSS, vous pouvez ajouter un peu de navigation et de style.
Qu'est-ce que c'est? Vous voulez obtenir le plein effet de l'apparence sur votre iPhone ou iPad? Il existe de nombreuses bonnes ressources gratuites qui offrent des modèles Photoshop uniquement à cet effet. Heureusement, je vais partager mon petit secret avec vous.
La semaine prochaine, nous aborderons un peu la théorie des couleurs afin que vous ne soyez pas "ce type" qui met la police rouge sur un fond bleu.
Accentsconagua