Share
Dans ce tutoriel, nous allons créer une jolie petite icône de iPhone élégante pour l'application imaginaire "Bankapp" qui faisait partie d'un tutoriel de conception d'interface utilisateur récemment publié ici sur Mobiletuts.+.
Nous concevrons notre icône prête pour l'écran Retina de l'iPhone 4, ce qui nous oblige à concevoir l'icône à une résolution beaucoup plus élevée de 114x114 pixels avec 320 dpi (points par pouce). Cela fera apparaître l’icône parfaitement claire sur l’affichage de la rétine. Cette icône est généralement celle qui apparaîtra sur l'écran d'accueil d'un iPhone. Il y a cependant d'autres icônes auxquelles vous devez penser (bien que nous ne les traitions pas dans cette astuce), telles que l'icône que vous voyez dans iTunes (qui peut être beaucoup plus grande si elle est vue en couverture), et des icônes plus petites. comme ceux de votre iPhone lorsque vous effectuez une recherche.
Ouvrez Photoshop et allez dans Démarrer> Nouveau et créez votre fichier. Vous pouvez voir ma configuration ci-dessous.
Nous souhaitons évidemment conserver le même jeu de couleurs que celui utilisé dans le didacticiel de l'interface utilisateur d'origine, donc les couleurs vertes allant de # 7DA000 à # 9CCB01. Ouvrez la fenêtre Options de fusion de votre calque d'arrière-plan préexistant dans Photoshop en cliquant avec le bouton droit de la souris sur le calque et en sélectionnant Options de fusion. Appliquez un dégradé à votre calque en utilisant les codes HEX que je viens de mentionner.
Créez un nouveau calque et remplissez-le de blanc pur. Allez dans Filtre> Bruit> Ajouter du bruit et ajoutez environ 25% de bruit. Réglez le mode de fusion des calques sur Multiplier et réduisez l'opacité du calque aux alentours de la barre des 20%..
Créez un nouveau calque et appelez-le "Faits saillants". Sélectionnez une brosse douce d'environ 65px et tracez une petite zone de lignes blanches sur votre icône..
Allez dans Filtre> Flou> Flou gaussien et flouez votre forme blanche d'environ 25%.
Changez le mode de fusion des calques en Lumière douce et réduisez l'opacité à environ 20%..
Répétez le même processus, mais avec un pinceau noir au bas de votre icône.
Pour que notre icône représente notre application "Bankapp", nous allons simplement utiliser les lettres "Ba", signifiant "banque" et "app". Sélectionnez l'outil Texte et faites une sélection sur votre icône. Tapez "Ba". J'ai utilisé une belle police de caractères appelée Blue Highway.
Cliquez avec le bouton droit sur votre calque de texte et sélectionnez Options de fusion. Appliquez une ombre portée à votre texte en utilisant les paramètres de la capture d'écran suivante. Cela va appliquer une ombre nette mais subtile.
Sélectionnez l'outil Rectangle arrondi. Définissez le rayon des coins sur 20 px, puis faites glisser votre forme tout en maintenant la touche Maj enfoncée. Alignez-le au centre de votre toile et placez-le sous votre calque de texte..
Cliquez avec le bouton droit sur le calque et sélectionnez Rasteriser le calque. Cliquez à nouveau avec le bouton droit de la souris, puis sélectionnez Options de fusion. Appliquer une superposition de dégradé allant de # 475E00 à # 688500.
Appliquez une ombre intérieure (pour donner l’impression que la forme est gravée) et une ombre portée (pour donner au bas de notre forme une belle ligne blanche en pixels) en utilisant les paramètres de la capture d'écran ci-dessous..
Dupliquer le calque Cliquez avec le bouton droit de la souris et sélectionnez Effacer les styles de calque. Remplissez le calque de blanc, puis sélectionnez Filtre> Bruit> Ajouter du bruit. Ajouter environ 25%.
Définissez le mode de fusion des calques sur Multiplier et réduisez l'opacité à environ 25%..
Réduisez l'opacité de vos calques de texte à environ 90%. Cela ne fait pas une énorme différence, mais laisse simplement filtrer ce petit bruit subtil.
Sélectionnez l'outil de sélection Elleptical. Faites glisser une sélection et remplissez-la de blanc sur un nouveau calque.
Allez dans Filtre> Flou> Flou gaussien et brouillez votre forme blanche. Changez le mode de fusion en superposition. Avec ça, nous avons tous fini! Vous vous demandez peut-être pourquoi notre icône n'a pas de coins arrondis - c'est parce que l'iPhone le fait pour nous. Voici notre résultat final:
Accentsconagua