Share
Photoshop CS6 est une application d'édition vectorielle beaucoup plus puissante que ses prédécesseurs. Dans ce didacticiel, nous allons vous montrer comment utiliser ces nouvelles fonctionnalités pour créer une interface d'application pour lecteur de musique iPhone dans la résolution d'origine de l'iPhone, ainsi que pour la rétine sans avoir à répéter le même processus pour les deux conceptions. Commençons!
Les ressources suivantes ont été utilisées lors de la production de ce didacticiel..
Créez un nouveau fichier. Définissez la largeur sur 320px et la hauteur sur 480px.
Dans cette étape, nous allons créer le fond. Il existe un nouveau moyen plus simple de créer des formes vectorielles dans Photoshop CS6 et nous allons utiliser cette méthode tout au long du didacticiel..
Créez un nouveau groupe et nommez-le "Arrière-plan". Sélectionnez l'outil Rectangle (R) et dans la barre des options, définissez le mode de l'outil sur Forme, puis cliquez sur le bouton situé juste à côté pour choisir le type de remplissage de la forme. Dans la liste des types de remplissage, sélectionnez le bouton Dégradé. Définissez toutes les valeurs de la même manière que les valeurs mises en surbrillance dans l'image ci-dessous. Utilisez les couleurs # 3F4042 et # 303133 pour le dégradé.
Cliquez n'importe où sur la toile. Lorsque la fenêtre Créer un rectangle apparaît, cliquez simplement sur OK et assurez-vous que les dimensions sont définies sur 700x700px. Nommez le calque nouvellement créé "Arrière-plan".
Appuyez sur Cmd / Ctrl + A pour sélectionner la totalité de la toile, sélectionnez l'outil Déplacement (V), puis dans la barre des options, cliquez sur les boutons Aligner les centres horizontaux et Aligner les bords inférieurs..
Double-cliquez sur la vignette du calque "Fond" et assurez-vous que la case à cocher Dither est cochée. De cette façon, vous obtiendrez un dégradé lisse sans bande.
Ouvrez statusbar.psd dans Photoshop et importez le groupe Barre d'état dans votre PSD de travail. Utilisez la méthode mentionnée ci-dessus pour aligner le groupe "Barre d'état" - Appuyez sur Cmd / Ctrl + A pour sélectionner la totalité de la toile et, tout en utilisant l'outil Déplacement (V), cliquez sur les boutons Aligner les centres horizontaux et Aligner les bords supérieurs..
Créez un nouveau groupe sous le groupe "Barre d'état" et nommez-le "Barre de navigation". Sélectionnez l'outil Rectangle arrondi (U) et définissez les propriétés comme indiqué sur l'image ci-dessous. Utilisez # 5F8F1D et # 99B83D pour le dégradé. Cliquez n'importe où sur la toile et cliquez sur OK lorsque la fenêtre Créer un rectangle arrondi apparaît. Nommez le calque nouvellement créé "Nav Bg."
Alignez le calque horizontalement au centre et verticalement juste en dessous de la barre d'état, comme illustré ci-dessous..
Sélectionnez l'outil Rectangle (U) et dessinez une forme de rectangle similaire à celle illustrée ci-dessous, mais assurez-vous que cette forme recouvre uniquement la partie inférieure du calque "Nav Bg". J'ai utilisé l'option Aucune couleur pour le type de remplissage de forme.
À l'aide de l'outil de sélection de chemin (A), sélectionnez la forme nouvellement créée. Appuyez sur Cmd / Ctrl + C pour copier la forme dans le Presse-papiers. Sélectionnez maintenant le calque "Nav Bg" dans le panneau Calques et appuyez sur Cmd / Ctrl + V. La forme est maintenant collée sur le calque "Nav Bg".
Avec l'outil de sélection de chemin d'accès (A) toujours activé, cliquez sur le bouton Opérations de chemin d'accès dans la barre des options, puis sélectionnez Soustraire la forme avant..
Maintenant, cliquez à nouveau sur le bouton Opérations sur les chemins, puis sélectionnez Fusionner les composants de forme..
À l'aide de l'outil de sélection directe (A), sélectionnez les deux points inférieurs et déplacez-les jusqu'à ce que la forme atteigne 43px..
Appliquez le style de calque suivant au calque "Nav Bg":
A l'aide de l'outil Rectangle arrondi (U), tracez une forme avec les propriétés indiquées ci-dessous. Utilisez Couleur unie pour le type de remplissage de forme. Nommez le calque nouvellement créé "Paramètres Bg."
Appliquez le style de couche suivant:
Déplacez "Settings Bg" pour l'aligner verticalement au centre de "Nav Bg" et horizontalement à 6 pixels du bord droit du canevas..
Ouvrez icons.psd et déplacez le calque "Paramètres" sur votre PSD. Alignez l’icône horizontalement et verticalement au centre de "Paramètres Bg".
Appliquez le style de couche suivant:
A l'aide de l'outil Rectangle arrondi (U), tracez une forme avec les propriétés indiquées ci-dessous. Utilisez Couleur unie pour le type de remplissage de forme. Nommez le calque nouvellement créé "Back Bg."
À l'aide de l'outil Ajouter un point d'ancrage, ajoutez un point d'ancrage sur le côté gauche du rectangle et 14 pixels sous le bord supérieur..
À l'aide de l'outil Convertir un point, cliquez sur le même point d'ancrage..
Maintenant, sélectionnez l'outil de sélection directe (A) et déplacez le point 10px vers la gauche.
Avec l'outil de sélection directe (A) toujours activé, sélectionnez les deux points d'ancrage mis en surbrillance sur l'image ci-dessous et déplacez-les 1px vers la gauche. Puis sélectionnez l'outil Convertir le point et cliquez sur chacun des deux points d'ancrage..
Aligne la forme verticalement au centre de "Nav Bg" et horizontalement à 6 pixels du bord gauche de la toile.
Maintenant que le dessin de la forme est terminé, nous pouvons lui ajouter un style. Faites un clic droit sur le calque "Paramètres Bg" et sélectionnez Copier le style du calque, puis faites un clic droit sur le calque "Back Bg" et sélectionnez Coller le style du calque..
Ajoutez du texte au bouton en utilisant les paramètres de l'image ci-dessous. J'ai utilisé la police Helvetica Neue. Alignez le texte au centre de la forme et copiez le style de calque à partir du calque "Paramètres".
Ajoutez un titre en utilisant les paramètres de l'image ci-dessous et alignez-le au centre de la barre de navigation..
Créez un nouveau groupe sous le groupe "Barre de navigation" et nommez-le "Position". Sélectionnez l'outil Rectangle (U) et définissez les propriétés comme indiqué sur l'image ci-dessous, puis cliquez quelque part sur le canevas. Utilisez # 2E2F30 et # 494A4C pour le dégradé. Nommez le calque "Position Bg."
Placez la forme sous la barre de navigation, mais assurez-vous qu'il y a un écart d'un pixel entre eux. Aligner la forme horizontalement au centre de la toile.
Appliquez le style de calque suivant à la forme:
Sélectionnez l'outil Rectangle arrondi (U) et définissez les propriétés comme indiqué sur l'image ci-dessous, puis cliquez quelque part sur le fond. Définissez le rayon sur une valeur plus élevée. J'ai utilisé 50px.
Nommez le calque "Position vide" et alignez-le horizontalement et verticalement sur le centre du calque "Position Bg".
Appliquez le style de couche suivant:
Sélectionnez l'outil Rectangle arrondi (U) et définissez les propriétés comme indiqué sur l'image ci-dessous, puis cliquez quelque part sur le fond. Utilisez # 85AD2A, # A0D028 et # B6D028 pour le dégradé. Encore une fois, définissez le rayon sur une valeur plus élevée. Nommez ce calque "Position Full".
Alignez la forme comme indiqué sur l'image ci-dessous, mais assurez-vous qu'il y a un espace de deux pixels sur tous les côtés entre la forme et le calque "Position vide".
Appliquez le style de calque suivant à la forme:
Sélectionnez l'outil Ellipse (U) et définissez les propriétés comme indiqué sur l'image ci-dessous, puis cliquez quelque part sur le fond. Utilisez # 444547 et # 5C5E61 pour le dégradé. Nommez cette couche "Handle".
Alignez cette forme pour qu'elle recouvre le bord droit du calque "Position complète".
Appliquez le style de couche suivant:
Sélectionnez à nouveau l'outil Ellipse (U) et définissez les propriétés comme indiqué sur l'image ci-dessous, puis cliquez quelque part sur le fond. Utilisez # 636669 et # 38393B pour le dégradé. Nommez cette couche "Handle Circle".
Alignez la forme au centre du calque "Poignée".
Ajouter du texte pour le moment. Utilisez Helvetica Neue, Bold. La taille est 10pt et la couleur # B2B2B2. Aligner le texte comme indiqué sur l'image ci-dessous.
Créez un nouveau groupe et nommez-le "Contrôles de lecture". À l'aide de l'outil Ellipse (U), tracez un cercle de dimensions 50x50px. Ne faites pas attention aux autres paramètres. Nommez le nouveau calque "Play Bg."
Développez le groupe "Position", cliquez avec le bouton droit de la souris sur le calque "Poignée" et sélectionnez Copier les attributs de forme dans le menu..
Retournez au groupe "Contrôles de lecture", cliquez avec le bouton droit de la souris sur le calque "Jouer Bg" et sélectionnez "Coller les attributs de forme" dans le menu. Ceci est une nouvelle fonctionnalité de Photoshop CS6. Ainsi, au lieu de définir tous les attributs du type de remplissage de forme, tels que les couleurs de dégradé, les angles, etc., nous les copions à partir du calque "Handle", car nous utilisons les mêmes valeurs pour le calque nouvellement créé..
Alignez le calque horizontalement sur le centre du canevas et verticalement 20 pixels au-dessous de "Position Bg".
Appliquez le style de couche suivant:
Cliquez avec le bouton droit sur le calque "Play Bg" et sélectionnez Dupliquer le calque. Nommez le nouveau calque "Fast Backward Bg."
À l'aide de l'outil de sélection de chemin d'accès (A), cliquez sur le calque "Bg" et réglez les dimensions dans la barre des options sur 34x34px..
Aligne le calque verticalement au centre de "Play Bg" et horizontalement de 8 pixels à gauche.
Dupliquez "Bg rapide en arrière" et nommez le nouveau calque "Bg rapide". Aligner le calque comme le précédent, mais cette fois sur le côté droit.
Créez une nouvelle forme de cercle avec les paramètres de l'image ci-dessous. Utilisez # 46484A et # 2C2D2E pour le dégradé. Assurez-vous que le calque nouvellement créé est en dessous de tous les autres calques du groupe "Contrôles de lecture".
Nommez le calque "Playback Bg" et alignez-le horizontalement et verticalement au centre de "Play Bg".
Dupliquez "Playback Bg" et réduisez la taille à 48x48px, en utilisant la méthode que nous avons utilisée à l'étape 12. Alignez le calque au centre de "Fast Backward Bg."
Maintenant, dupliquez à nouveau le calque et alignez-le au centre de "Fast Forward Bg".
Importez les calques "Fast Backward", "Play" et "Fast Forward" à partir de icons.psd. Alignez les icônes comme indiqué sur l'image ci-dessous.
Sélectionnez les trois couches d'icônes en maintenant Cmd / Ctrl sur le clavier et en cliquant sur chaque couche en conséquence. Définir l'opacité à 85%.
Importez les calques "Speaker" et "Repeat" à partir de icons.psd. Alignez les icônes comme indiqué ci-dessous.
Les icônes importées sont remplies de couleur unie, mais nous allons leur appliquer un dégradé. À l'aide de l'outil de sélection de chemin (A), sélectionnez le calque "Haut-parleur" et définissez les paramètres à partir de l'image ci-dessous. Utilisez les couleurs # 6B6C70 et # 797B80 pour le dégradé.
Copiez les attributs de l'icône du haut-parleur avec l'option Copier les attributs de forme et collez-les dans l'icône de répétition..
Appliquez le style de couche suivant au haut-parleur et répétez les icônes:
Dans cette étape, nous allons placer les couvertures d'album dans notre conception. Après l'importation, nous allons les convertir en objets intelligents et réduire leur taille de 50%. Nous le faisons parce que dans la dernière étape du tutoriel, le fichier sera redimensionné à la résolution de la rétine. Ainsi, nous ne perdrons pas la qualité des images raster après le redimensionnement de la rétine..
Ouvrez albumcover-02.jpg et importez l'image sur votre PSD.
Convertissez le calque en objet intelligent en accédant à Couche> Objets dynamiques> Convertir en objet intelligent. Appuyez sur les touches Cmd / Ctrl + T du clavier pour transformer le calque. Réduire la taille à 50%. Nommez ce calque "Centre des couvertures d'albums".
Alignez le calque horizontalement sur le centre du canevas et 20px verticalement sous le calque "Play Bg".
A l'aide de l'outil Rectangle arrondi (U), tracez une forme avec les paramètres indiqués ci-dessous. Définissez la taille sur 180x180px. Utilisez Aucune couleur pour le type de remplissage de forme et définissez le rayon sur 3px..
Aligner la forme exactement sur l'image de couverture de l'album.
Appliquez maintenant la forme à l'image de couverture de l'album en faisant glisser le curseur de la souris de la vignette du calque rectangle arrondi vers la vignette du calque "Centre de la couverture de l'album" tout en maintenant les touches Cmd / Ctrl + Alt de votre clavier. Une fois la copie terminée, supprimez le calque avec le rectangle arrondi, car nous n'en avons plus besoin..
Ouvrez albumcover-01.jpg et importez l'image sur votre PSD, convertissez-la en objet intelligent et redimensionnez à 50%. Alignez le capot verticalement au centre du calque "Centre de la couverture de l'album" et horizontalement à 40 pixels à gauche. Nommez le calque "Couverture de l'album à gauche".
A l'aide de l'outil Rectangle arrondi (U), tracez une forme avec les paramètres indiqués ci-dessous. Cette fois, définissez la taille sur 160x160px. Utilisez Aucune couleur pour le type de remplissage de forme et définissez le rayon sur 3px..
Copiez le rectangle arrondi dans le calque "Couverture de l'album à gauche" en utilisant la même méthode pour la couverture centrale. Une fois que vous avez terminé, supprimez le calque avec le rectangle arrondi..
Ouvrez albumcover-03.jpg et importez-le sur votre PSD. Répétez la même procédure que pour le capot gauche, mais cette fois-ci, alignez l'image sur le côté droit, comme indiqué ci-dessous..
Appliquez le style de calque suivant sur la couverture centrale:
Copiez le style de calque à partir de la couverture centrale et collez-le dans les deux autres couvertures. Sélectionnez maintenant les calques de couverture gauche et droit et définissez le remplissage à 50%..
Insérer un texte pour le titre de la chanson en cours de lecture. Placez-le quelques pixels sous la couverture centrale.
Insérer une autre ligne de texte pour l'auteur de la chanson en cours de lecture. Aligner les deux lignes au centre.
À l'aide de l'outil Rectangle (U), dessinez une forme avec les paramètres indiqués ci-dessous. Utilisez # 292A2B et # 38393B pour le dégradé.
Aligner la forme sur le coin inférieur gauche de la toile.
À l'aide de l'outil Ajouter des points d'ancrage, ajoutez deux points d'ancrage et définissez les distances comme indiqué sur l'image..
Sélectionnez les deux points d'ancrage mis en surbrillance sur l'image et déplacez-les de 6 pixels vers le haut..
À l'aide de l'outil de sélection directe (A), faites glisser les lignes directrices pour les rapprocher de celles qui sont prévisualisées ci-dessous..
Dans cette étape, nous terminerons l’arrière-plan de la barre d’onglet en dupliquant et en reflétant le chemin que nous avons créé à l’étape précédente..
Dupliquez le calque et retournez-le horizontalement en allant dans Edition> Chemin de transformation> Retourner horizontalement.
Déplacez le calque dupliqué exactement dans le coin inférieur droit du canevas. Une remarque importante: assurez-vous qu'il n'y a pas de vide entre les deux formes.
Sélectionnez maintenant les deux calques comme indiqué sur l'image, cliquez avec le bouton droit de la souris et sélectionnez Fusionner les formes..
Cela devrait être la forme résultante. Comme vous pouvez le voir, une ligne verticale se trouve au milieu de la forme. Cela signifie que nous avons deux formes dans une couche qui ne sont pas complètement fusionnées.
A l'aide de l'outil Sélection de tracé (A), cliquez sur le calque de forme, cliquez sur le bouton Opérations de tracé dans la barre des options et sélectionnez Fusionner les composants de forme. Vous avez maintenant les deux formes complètement fusionnées. Nommez cette couche "Tab Bar Bg".
Si nous sélectionnons la sélection directe (A), nous remarquerons que certains points d'ancrage inutiles ont été créés lors de la fusion des formes. Toujours essayer de garder vos chemins propres de points inutiles.
Pour supprimer ces points d'ancrage, sélectionnez l'outil Supprimer les points d'ancrage et cliquez sur les deux points d'ancrage respectifs..
Appliquez le style de couche suivant à "Tab Bar Bg":
Dans cette étape, nous allons créer des guides qui nous aideront à aligner plus facilement les icônes de la barre d'onglets..
À l’aide de l’outil Rectangle de sélection (M), faites une sélection de 60 pixels de large en partant du côté gauche du canevas..
Maintenant, faites glisser un guide de la règle de gauche et placez-le sur le bord droit de la sélection. Assurez-vous que l'option d'accrochage aux guides est activée. Vous pouvez le trouver en allant dans Affichage> Accrocher à> Guides.
Répétez la procédure précédente pour placer les autres guides. Définissez les distances comme indiqué sur l'image ci-dessous.
Faites glisser deux guides horizontaux à partir de la règle supérieure et définissez les distances comme indiqué sur l'image..
Faites glisser le calque "Accueil" du fichier icons.psd.
À l'aide de l'outil Rectangle de sélection (M), effectuez une sélection qui s'aligne sur les guides comme ceux ci-dessous..
À l'aide de l'outil Déplacement (V), cliquez sur les boutons Aligner les centres verticaux et Aligner les centres horizontaux dans la barre des options..
Tapez le texte "Accueil" avec les paramètres suivants:
Alignez le texte verticalement près du guide inférieur et horizontalement au centre de l'icône.
Répétez l'étape 21 pour les autres icônes et le texte (Favoris, Listes de lecture et Recherche). Utilisez l'image ci-dessous pour référence.
À l'aide de l'outil Rectangle (U), tracez une forme avec les paramètres de l'image ci-dessous. Utilisez # 5F8F1D et # 99B83D pour le dégradé.
Alignez la forme de sorte que son bord supérieur touche le guide horizontal supérieur et horizontalement au centre de la barre d’onglet. Nommez le calque "Now Playing Bg."
Appliquez le style de couche suivant:
Faites glisser le calque "En cours de lecture" depuis le fichier icons.psd et changez la couleur de remplissage du calque en # 000000..
Appliquez le style de couche suivant:
Aligne l’icône horizontalement au centre de "Now Playing Bg" et à la verticale de quelques pixels sous son bord supérieur..
Tapez le texte "Now Playing" avec les paramètres suivants:
Alignez à nouveau le texte horizontalement au centre du bouton et à la verticale de quelques pixels sous l'icône. Copiez le style de calque à partir de l'icône En lecture..
Nous avons terminé avec la création de tous les éléments de la conception. Mais il nous reste une dernière étape, qui consiste à redimensionner le fichier en rétine.
L'adaptation à la résolution de la rétine est très facile et ne prend qu'une étape. Allez à Image> Taille de l'image et définissez les valeurs comme indiqué ci-dessous. Assurez-vous que tou
Accentsconagua