Share
Les conceptions lisses sont une partie importante d'une interface iPad réussie. Dans ce tutoriel, nous expliquerons comment créer une belle interface graphique pour une application Audio / DJ iPad dans Photoshop. Commençons!
Créez un nouveau fichier. Définissez la largeur sur 768 et la hauteur sur 1024 et la résolution sur 132 ppp.
Créez un nouveau groupe et nommez-le Background. Open Leather Texture de Tommaso Nervegna, construisez un système de grille semblable à celui de l'exemple en divisant la toile en deux à l'horizontale et en 3 à la verticale. Redimensionnez la texture pour l’adapter à l’une des 6 formes et dupliquez-la 5 fois de plus afin que nous puissions remplir chacune d’elles..
Fusionnez les 6 calques que nous avons déjà créés et appliquez une superposition de dégradé à partir du panneau Style de calque. Centrez le dégradé juste au milieu de la toile exactement comme dans l'exemple et l'arrière-plan est terminé. Poursuivez votre lecture pour faire plus de pas.
Créez un groupe et nommez-le Platter. Maintenant, en utilisant l'outil Ellipse (U) Créez un cercle parfait (513x513 px), réduisez le niveau de remplissage à 0 et appliquez les styles de calque de l'exemple. Vous devriez obtenir un résultat similaire à celui au bas de l'exemple..
Nous allons maintenant donner un léger coup à la forme. À l'aide de l'outil Pinceau (B), définissez la taille sur 300 et la dureté, définissez la couleur de premier plan sur # 01f5f5 et créez un point comme celui de l'exemple. Définissez le mode de fusion du calque sur Superposition.
À l'aide de l'outil Ellipse (U), créez un autre cercle parfait (483x483 px), définissez le premier plan sur # 111111 et appliquez une lueur extérieure, en utilisant les paramètres de l'exemple..
Utilisez de nouveau l'outil Ellipse (U) pour créer un autre cercle parfait (481x481 px), mais réduisez celui-ci de 2 px plus petit que le précédent. Définissez la couleur de premier plan sur # 00a2ff et appliquez les styles de calque de mon exemple..
Créez un nouveau cercle à l'aide de l'outil Ellipse (U), définissez la couleur de premier plan sur # c2c2c2, réduisez-la de 10 px par rapport à la précédente (471x471 px) et appliquez un trait du panneau Styles de calque, en utilisant les paramètres de l'exemple..
Dans cette étape, nous allons créer des formes afin de donner plus de profondeur au plateau. En utilisant l'outil Plume (P), dessinez une forme similaire à celle de l'exemple. Faites-en environ 64 px de largeur et 55 de hauteur, définissez la couleur de premier plan sur # 000000, puis dupliquez-la pour créer un cercle à partir des formes et appliquez le calque dégradé à chaque forme, en modifiant légèrement l'orientation de l'angle lorsque vous passez d'une forme à une autre pour lui donner une teinte plus dynamique, nous offrant ici plus de profondeur. Regroupez toutes ces formes et utilisez l'outil Ellipse (U) pour former un cercle parfait (467x467 px) au-dessus de ce groupe. Transférez la vignette du masque vectoriel du cercle que nous avons créé vers le groupe de formes et supprimez le cercle..
À l'aide de l'outil Ellipse (U), tracez un autre cercle parfait (469x469 px), réduisez le niveau de remplissage à 0 et appliquez les styles de calque de l'exemple..
À l'aide de l'outil Plume (P), dessinez une forme identique à celle de l'exemple. Faites-le circuler (425x425 px), définissez la couleur de premier plan sur # 8d8a8a et appliquez la superposition de dégradé à l'aide des paramètres de l'exemple..
Prenez l'outil Ellipse (U) et faites un cercle parfait (405x405 px), définissez la couleur de premier plan sur # 232323 et appliquez les styles de calque de l'exemple..
Dupliquez le cercle précédent, réduisez le niveau de remplissage à 0 et appliquez les styles de calque.
À l'aide de l'outil Ellipse (U), créez un cercle parfait (160x160 px), réduisez le niveau de remplissage à 0 et appliquez un trait noir de 1 px (# 000000) à partir du panneau Style de calque. À présent, dupliquez ce calque et redimensionnez-le afin de le réduire de quelques pixels par rapport à celui qui le précède, jusqu'à obtenir un résultat similaire à celui de l'exemple..
Sélectionnez tous les calques, fusionnez-les dans un objet dynamique et définissez le niveau de remplissage sur 10%. Dupliquez encore 4 fois cet objet dynamique, placez les doublons dans les zones indiquées à partir de l'exemple d'image et définissez la couleur de remplissage à 5%..
Créez un nouveau groupe et nommez-le Panneau de configuration. À l'aide de l'outil Plume (P), dessinez des formes telles que celles de l'exemple, l'une à gauche et l'autre à droite du plateau. Faites les formes autour de 300 px et. Le premier plan n'est pas important car nous allons ajouter une texture sur la forme et utiliser uniquement la forme comme base pour notre texture en bois. Une fois que vous avez fini de dessiner les formes, appliquez les styles de calque de l'exemple..
Ouvrez et importez la texture du bois de Matthew Skiles et placez un calque en haut des formes de base gauche et droite que nous avons créées pour le panneau de configuration. Transformez les couches de texture en masques d'écrêtage et passez à l'étape suivante..
En utilisant l'outil Plume (P), dessinez 2 formes similaires aux précédentes, mais un peu plus petites. Réduisez le niveau de remplissage à 0 et appliquez les styles de calque.
Dans cette étape, nous allons créer les flèches d'indication. En utilisant l’outil Plume (P), dessinez 2 formes comme celles de l’exemple. Définissez la couleur de premier plan sur # 000000 et appliquez les styles de calque..
Ajout de texte à l'aide de l'outil Texte horizontal (T). Utilisez Tahoma> Gras comme police, définissez la taille sur 6 et écrivez sous la flèche gauche "- (support) REV" et sous la flèche droite "+ (support) FWD" et appliquez-la à un effet Ombre portée des styles de calque. panneau en utilisant les paramètres de l'exemple.
Maintenant, ajoutons du texte dans le panneau de gauche, qui deviendra notre égaliseur. A l'aide de l'outil Texte horizontal (T), définissez la taille sur 4 px, la police sur Arial> Affinez et écrivez "10hz 20hz 40hz 80hz 1khz 2khz 3 khz 4khz 5khz 6khz" et appliquez l'effet Ombre portée en conservant les paramètres de l'exemple..
À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 2 px et tracez 10 formes comme celles de l'exemple. La couleur de premier plan pour les formes est # 000000. Définissez le mode de fusion des calques sur Lumière douce et appliquez les styles de calque de l'exemple..
Maintenant nous allons les boutons EQ. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 5 px et la couleur de premier plan sur #ffffff et dessinez 10 formes comme celles de l'exemple. Faites-les autour de 30 px hauteur et 20 largeur. Appliquer les styles de calque et passer à l'étape suivante.
En utilisant l’outil de type horizontal (T), nous insérerons quelques indicateurs d’intensité. Utilisez Tahoma> Normal en tant que police, 6 px en tant que taille de police et couleur de premier plan configurée sur #ffffff, notez une série de "…" comme dans l'exemple. Définissez maintenant la police sur Gras et conservez les paramètres précédents. Notez, à l'intérieur des cercles rouges que vous voyez sur l'image d'exemple, en suivant le même ordre "-", "0", "+" et appliquez les styles de calque à tous les styles. calques de texte que nous avons fait dans cette étape.
Passons maintenant au panneau de droite. Ici, nous aurons notre commande Pitch et plusieurs autres boutons. A l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 2 px et tracez une forme similaire à celle de l'exemple, puis appliquez un style Bevel et Emboss à partir du panneau Styles de calque, en utilisant les paramètres de l'exemple..
Maintenant, en utilisant l'outil Rectangle (U), nous allons tracer des marques indicatrices des deux côtés de la forme que nous avons créée à l'étape précédente. Définissez la couleur de premier plan sur # 00ffff et dessinez une série de formes rectangulaires, comme celles de l'exemple. Assurez-vous de garder un motif à l'esprit et lorsque vous dessinez, créez un rectangle de 22 px par 2 px, puis tracez 4 formes de 18 px par 1 px et ainsi de suite jusqu'à ce que vous arriviez au bas de la forme. Une fois que vous avez terminé de dessiner les formes, sélectionnez-les toutes et fusionnez-les dans un objet dynamique, puis appliquez les styles de calque indiqués dans l'exemple. Ensuite, dupliquez le Smart Object et faites-le refléter de l'autre côté de la diapositive de hauteur..
Faisons le bouton Tempo maintenant. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 5 px et tracez une forme similaire à celle de l'image. Faites-le autour de 45 px x 55 px et réglez la couleur de premier plan sur #dbdbdb, puis appliquez les styles de calque vus dans l'exemple d'image..
A l'aide de l'outil Rectangulaire arrondi (U) avec le rayon défini sur 5 px, créez une forme similaire à celle de l'exemple. Définissez la couleur sur #dbdbdb et appliquez les styles de calque.
Prenez l'outil Rectangle (U) et dessinez 3 formes blanches #ffffff comme celles de l'exemple. Dessinez dessus 3 autres formes, de la même taille que les précédentes, sauf que toutes les 3 sont plus élevées en pixels que les blanches. Définissez les couleurs de premier plan pour ces 3 dernières formes sur # 545353 et passez à l'étape suivante..
À l’aide de l’outil Ellipse (U), tracez 2 cercles parfaits sur le côté gauche de notre application, juste en dessous du panneau de configuration de l’égaliseur. Créez des formes d'environ 89 x 89 x et définissez le niveau de remplissage sur 0. Appliquez les styles de calque présentés dans l'exemple et poursuivez la lecture à l'étape suivante..
Créez 2 cercles supplémentaires à l'aide de l'outil Ellipse (U), de quelques pixels en moins, définissez la couleur de premier plan sur # 0a0a0a et appliquez les styles de calque..
À l’aide de l’outil Ellipse (U), créez 2 petits cercles semblables aux formes présentées dans l’exemple, définissez le niveau de remplissage sur 0 et appliquez les styles de calque..
Maintenant, ajoutez du texte et des symboles. Sur le bouton de gauche, à l'aide de l'outil Texte horizontal (T), définissez la police sur Calibri> Bold, la taille de la police sur 8 px et écrivez-la au centre du bouton "/". Pour le bouton droit utilisant les mêmes paramètres, notez "CUE". Maintenant, en utilisant l'outil Rectangle (U), tracez 2 rectangles comme ceux de l'exemple, à droite du "/" et du côté gauche, en utilisant l'outil Plume (P), tracez un triangle comme celui de l'exemple. Appliquez le style de calque à tous les calques de texte et de forme créés à cette étape..
Dans cette étape, nous allons faire des boutons plus intéressants. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 10 px et tracez 7 formes carrées comme celles de l'exemple, définissez-les autour de 53 px sur 53 px. Définissez la couleur de premier plan sur # 000000, réduisez le niveau de remplissage à 10% et appliquez les styles de calque..
Nous allons maintenant créer les boutons du mode normal. A l'aide de l'outil Rectangle arrondi (U), dessinez seulement 5 formes, comme indiqué dans l'exemple, définissez la couleur de premier plan sur # 0a0a0a et appliquez les styles de calque..
À l'aide de l'outil Rectangle (U), définissez la couleur de premier plan sur #ffffff et dessinez des formes de rectangle similaires à celles de l'exemple. Maintenant, en utilisant l'outil Plume (P), conservez la couleur de premier plan #ffffff et dessinez des formes de triangle comme celles de l'exemple. Ramassez l'outil Texte horizontal (T) et notez aux mêmes endroits que dans l'exemple les mots "PLAYLIST", "POWER", "EJECT", "TRACK SEARCH", "SEARCH". Lorsque vous avez terminé, appliquez l'effet Ombre portée à tous les calques créés à cette étape..
Créez quelques formes rectangulaires semblables à celles de l'exemple utilisant l'outil Rectangle (U) et appliquez le style de calque. Attention à les faire 1 px de largeur.
Maintenant pour faire les boutons actifs. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 10 px et tracez 2 formes comme celles de l'exemple. Définissez la couleur de premier plan sur # 0a0a0a et appliquez les styles de calque..
Sélectionnez l'outil Crayon (P) et tracez 2 formes de triangle comme celles de l'exemple. Définissez la couleur de premier plan sur #ffffff et appliquez le style de calque..
Maintenant, dessinez la prise USB. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 10 px et tracez une forme au-dessus du bouton Playlist. Faites-en la même taille que la base Playlist. Définissez le niveau de remplissage sur 10 et appliquez les styles de calque..
À l'aide de l'outil Pinceau (B), définissez la taille sur 36 et la dureté sur 0, puis créez un petit point noir # 000000 comme celui de l'exemple. À l’aide de l’outil Rectangle de sélection (M), effectuez une sélection comme celle de l’exemple et supprimez-la. Maintenant, notre point deviendra une ombre. Appliquez l'effet Ombre portée au calque de points et utilisez l'outil Plume (P) pour dessiner une forme similaire à celle de l'exemple. Définissez la couleur de premier plan sur # 000000 et appliquez le calque Styles..
Sélectionnez à nouveau l'outil Pinceau (B) et définissez la taille du pinceau sur 49 px et la dureté sur 70%, puis créez un point noir # 000000 comme celui de l'exemple. À l'aide de l'outil Rectangle de sélection (M), effectuez une sélection comme celle de l'exemple et supprimez cette partie. Définissez le niveau d'opacité sur 40% et dupliquez le calque. Déplacez le calque dupliqué de 1 px vers la gauche et appuyez sur CMD / CTRL + I (inverser) et réglez l'opacité de ce dernier calque sur 10%..
Maintenant, dessinez les boutons de vitesse. À l'aide de l'outil Rectangle (U), tracez 2 lignes blanches #ffffff comme celles de l'exemple, puis passez à Ellipse Tool (U) et tracez 3 cercles comme ceux de l'exemple. Définissez le niveau de remplissage de toutes les formes sur 0 et appliquez les styles de calque..
À l'aide de l'outil Ellipse (U), tracez 3 cercles, à l'intérieur des 3 précédents, mais cette fois un peu plus petit. Cela représentera le bouton lui-même. Définissez la couleur de premier plan sur # 0a0a0a pour le bouton du milieu; il s'agira de notre bouton d'état actif et appliquerez les styles de calque de l'exemple..
Définissez la couleur de premier plan sur # 0a0a0a pour les boutons gauche et droit, ce sera l'état inactif pour les boutons et appliquez les styles de calque..
À l'aide de l'outil Ellipse (U), créez 2 petits cercles comme ceux de l'exemple, définissez le niveau de remplissage sur 0 et appliquez les styles de calque..
Maintenant, ajoutez du texte. À l'aide de l'outil Texte horizontal (T), écrivez au centre de chaque bouton, de gauche à droite, les nombres "1", "2", "3" et appliquez les styles de calque à chacun d'eux..
À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 10 px et dessinez 3 formes comme celles de l'exemple du panneau de droite. Réduisez le niveau de remplissage à 10% et appliquez les styles de calque.
Créez maintenant une autre forme à l'aide de l'outil Rectangle arrondi (U), en conservant le rayon à 10 px, mais réduisez la taille de la forme pour l'adapter à la précédente. Définissez la couleur de premier plan sur # 000000 et appliquez les styles de calque..
Dessinez deux autres formes à l'aide de l'outil Rectangle arrondi (U), avec le rayon défini sur 10 px, comme indiqué dans l'exemple, définissez la couleur de premier plan sur # 000000 et le niveau de remplissage sur 10%, puis appliquez les styles de calque..
Maintenant, pour rendre l'état actif. À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 10 px et dessinez 3 formes comme celles de l'exemple. Appliquez uniquement les styles de calque à la forme supérieure, car ce sera notre bouton d'état actif.
Maintenant, pour l'état normal, appliquez les styles de calque vus dans l'exemple aux boutons.
Ajout de texte. À l'aide de l'outil Texte horizontal (T), définissez la police sur Tahoma> Normal, la taille de la police sur 6 px et notez sous chaque bouton le texte suivant "VERROUILLAGE DU BPM", "VINIL", "RESET TEMPO" et appliquez l'effet Ombre portée. à tous les calques de texte.
À l'aide de l'outil Forme personnalisée (U), insérez la flèche 18 à partir des flèches et placez-la au milieu du dernier bouton. Allez dans Édition> Transformation> Échelle et placez un moins dans l'entrée Définir une échelle horizontale, puis appliquez l'effet Ombre portée en conservant les paramètres de l'exemple..
À l'aide de l'outil Forme personnalisée (U), insérez le signe "NON" à partir des symboles et placez-le au milieu du premier bouton. Comme pour la forme précédente, allez dans Edition> Transformation> Echelle et placez un signe moins dans l'entrée Définir une échelle horizontale, puis appliquez l'effet Ombre portée en conservant les paramètres de l'exemple..
Maintenant, créez des indicateurs actifs. À l'aide de l'outil Ellipse (U), tracez de petits cercles comme dans l'exemple. Définissez la couleur de premier plan sur # 00c52e pour le voyant du bouton d'alimentation et pour le reste, définissez-la sur # 007dc5 et appliquez les styles de calque..
À l'aide de l'outil Rectangle arrondi (U), définissez le rayon sur 4 px et tracez une forme similaire à celle de l'exemple. Définissez la couleur de premier plan sur # 000000 et appliquez l’ombre portée. Prenez l'outil Rectangle arrondi (U), conservez les mêmes paramètres et dessinez une autre forme, mais cette fois un peu plus petite. Définissez la couleur de premier plan sur # 000000 et appliquez les styles de calque..
Faisons maintenant le porte-album. A l'aide de l'outil Rectangle (U), dessinez une forme de rectangle similaire à celle de l'exemple, définissez la couleur de premier plan sur # 00fbff et appliquez les styles de calque. Maintenant, ouvrez et placez les pochettes d'album que vous aimez. Mon choix était Chase and Status, Album "More Than Alot". Transformez la couche d'art de l'album en un masque d'écrêtage. Utilisez maintenant l'outil Plume (P) pour dessiner une forme similaire à celle de l'exemple. Ajoutez un masque de calque et, à l’aide d’un pinceau de taille moyenne, appliquez une couche de couleur noire sur le masque # 000000 pour obtenir un résultat similaire à celui de l’exemple. Définissez le niveau d'opacité sur 20% et passez à l'étape suivante..
Arrivé à Digital dream Font et importez-le dans Photoshop. Sélectionnez Horizontal Type Tool (T), définissez la police sur Digital dream Fat Skew Narrow et la taille de la police sur 12 px et notez "Chase & Status", "Plus que beaucoup" en utilisant le blanc #ffffff comme couleur de premier plan. Conservez la police, mais changez la taille de 12 à 14 px et notez la taille en bas à gauche, comme indiqué dans l'exemple, les mots "Pièces - (plan B)" et à droite de notre écran "00 00 00 "2 fois et réduisez le niveau d'opacité de ce calque de texte à 10 px. Maintenant, en gardant le même paramètre, écrivez "02:13. 33" et "04:49. 02" exactement comme dans l'exemple. Appliquez l'effet Outer Glow à tous les calques de texte..
A l'aide de l'outil Plume (P), tracez une forme similaire à celle de l'exemple, ajoutez-y un masque de calque et, à l'aide d'un pinceau noir de taille moyenne, écartez-vous afin que la transition entre le blanc #ffffff et les informations situées en dessous soit plus douce. couche. Définissez le mode de fusion de ce calque sur Exclusion et le niveau de remplissage sur 7%..
En utilisant l’outil Plume (P), dessinez 2 formes comme celles de l’exemple. Définissez le niveau de remplissage sur 0, puis appliquez les styles de calque, puis convertissez chaque forme en un objet dynamique. Vous remarquerez que le Gradien a changé. Ajoutez des masques de calque aux deux objets dynamiques et éliminez la partie inférieure à l'aide d'un pinceau noir moyen # 000000.
Sélectionnez l'outil Plume (P) et dessinez 2 formes, comme celles de l'exemple. Définissez la couleur de premier plan sur # 0c0c0c et appliquez le style de calque..
À l'aide de l'outil Rectangle (U), créez une série de formes rectilignes comme celles de l'exemple. Définissez la couleur de premier plan sur #ffffff pour tous et regroupez-les par côtés. EX: "EQ du groupe de gauche". Transformez les groupes en objets intelligents et sélectionnez Edition> Transformer> Warp. Tirez les coins pour obtenir un résultat similaire à celui de l'exemple et réduisez le niveau de remplissage à 10%..
Dupliquez les Smart Obkects de notre étape précédente. Définissez le niveau de remplissage sur 100% et appliquez les styles de calque. Maintenant, à l'aide de l'outil Lasso polygonal (L), effectuez 2 sélections comme celles de l'exemple et ajoutez un masque de calque à chaque objet intelligent..
En utilisant l’outil Plume (P), dessinez 2 formes comme celles de l’exemple. Définissez la couleur de premier plan sur #ffffff, ajoutez un masque de calque et effacez le bas à l'aide d'un pinceau noir moyen # 000000, comme dans l'exemple. Réduisez le niveau de remplissage à 20% et appliquez le style de calque. Sélectionnez Outil Plume (P) et tracez #ffffff une forme blanche comme celle de l'exemple. Allez dans Filer> Flou> Flou directionnel et réglez la distance sur 40 et l'angle sur 0. Réduisez l'opacité à 30% et nous avons terminé.
Vous pouvez jouer, créer de nouveaux éléments, changer les couleurs et les formes. Expérience! Cela a toujours été la clé de l'apprentissage. J'espère que vous avez apprécié ce tutoriel. Merci d'avoir lu!
Accentsconagua