Share
Photoshop CS6 regorge de nouvelles fonctionnalités qui vous aideront à créer de meilleures conceptions d'interface. Dans ce didacticiel, nous allons utiliser les nouvelles fonctions d'édition de vecteurs et de contour de Photoshop pour créer une interface de tableau de bord d'administrateur. Nous tirerons également parti de la nouvelle fonctionnalité d’accrochage à la grille de pixels de Photoshop pour créer des graphiques Web nets et nets. Commençons!
Les ressources suivantes ont été utilisées lors de la production de ce didacticiel..
Nous allons utiliser la grille 960 avec une disposition en 12 colonnes de 960.gs comme cadre pour notre conception. Téléchargez le fichier de modèle au format zip, puis ouvrez la grille de 12 colonnes. Cliquez sur l'icône représentant un œil sur le calque du calque 12 Col pour le masquer.
Cliquez sur l'icône de cercle noir et blanc pour ajouter un nouveau calque de réglage. Sélectionnez Couleur unie et choisissez le blanc dans la boîte de dialogue suivante..
Faire une nouvelle couche. Cliquez sur Edition> Remplir et sélectionnez Utiliser: Modèle. Utilisez le motif de trait diagonal de PSDfreemium. Comme il s’agit de CS6, essayons d’utiliser sa dernière fonctionnalité. Activer les modèles de script et sélectionner Symetry Fill.
Atténuer le calque Opacité à 4%.
Nous voulons nous assurer que toutes les couches sont bien organisées. Commençons donc par les regrouper dans un ordre logique. Sélectionnez les deux calques - fond et motif - puis appuyez sur Commande / Ctrl + G pour les mettre en groupe.
Nous n'avons pas besoin du calque d'arrière-plan, alors supprimez-le en le faisant glisser sur l'icône de suppression..
Sélectionnez le groupe de couches. Appuyez sur F2 puis changez son nom. Appuyez sur Tab pour éditer automatiquement la couche suivante. Changez son nom puis répétez cela sur la couche suivante.
Activer l'outil Rectangle arrondi. Dessinez un rectangle arrondi de rayon 10 px et de largeur 2 colonnes. Placez-le en haut à droite de la toile. Dans la barre d'options, définissez Couleur de remplissage sur # f16424 et sur Contour sur Aucune..
Double-cliquez sur la forme du calque dans la boîte de dialogue Panneau de calques pour ouvrir le style de calque. Activer la superposition de motifs. Sélectionnez le motif de pixel de PSDfreemium. Réduisez son échelle et son opacité pour lui donner une apparence de texture naturelle.
Faire un nouveau calque au dessus de la forme. Activer le pinceau et peindre les ombres sur le dessus.
Alt-clic entre la base du logo et son ombre. Cela convertira le calque en masque d'écrêtage et placera l'ombre à l'intérieur du logo..
Répétez le processus plusieurs fois. Vous pouvez ajouter plus de couches si nécessaire. Peinture en surbrillance sur sa face inférieure.
Créez un nouveau calque sous le logo. Commande / Ctrl - cliquez sur la forme pour effectuer une nouvelle sélection en fonction de sa forme. Remplir la sélection avec du noir.
Appliquez le filtre Flou gaussien. Cliquez sur Filtre> Flou> Flou gaussien.
Appuyez sur Commande / Ctrl + T pour effectuer la transformation. Faites un clic droit et choisissez Warp. La boîte englobante de transformation est divisée en 3 x 3 boîtes. Faites glisser la case inférieure vers le bas. Appuyez sur Entrée pour accepter le résultat de la transformation.
Dessinez un rectangle arrondi plus petit. Dans la barre des options, définissez le remplissage sur aucun et le trait sur blanc avec une taille de 1 pt.
Ouvrez les Options de trait, puis sélectionnez un préréglage en pointillés. Cliquez sur Plus d'options pour modifier les paramètres de la ligne en pointillé..
Dans le panneau Calques, double-cliquez sur son calque pour ouvrir la boîte de dialogue Style de calque. Activer l'ombre portée, définir son angle sur 90 °, activer Utiliser la lumière globale, définir sa taille sur 0 px et la distance 1 px.
Activer l'outil Rectangle et cliquer une fois sur la toile. Dans la boîte de dialogue, définissez sa taille sur 6 x 30 px. Cliquez sur OK pour commencer à créer la forme..
Cliquez sur sa case de remplissage dans la barre d'options. Sélectionnez le dégradé et définissez sa couleur de #dfdfdf à #ffffff.
Tracez un autre chemin rectangle à l'intérieur du logo. Double-cliquez sur son calque dans le panneau Calques, puis activez Ombre portée..
Ajouter une ombre portée à la forme du calque.
Ci-dessous, le résultat à plus fort grossissement. Comme vous pouvez le constater, notre forme vectorielle est toujours nette. Il n'y a pas de demi pixel! Ceci est dû à la fonctionnalité de capture de vecteur dans Photoshop CS6. Vous pouvez désactiver cette fonctionnalité si vous le souhaitez depuis la boîte de dialogue Préférences - je ne comprends toujours pas pourquoi quelqu'un le ferait..
Ajoutez du texte à l'intérieur du logo. Nous pouvons ajouter du contraste au texte en changeant simplement une partie du caractère en gras.
Ajouter une autre ombre portée sur le texte.
Activez l'outil Rectangle, puis tracez un rectangle comme arrière-plan du contenu principal. Définissez sa largeur sur 800 px, Fill: #eeeeee et Stroke: #cccccc, Size: 1 pt..
Ajouter une lueur extérieure avec les paramètres suivants.
Ajoutez une forme de triangle et un rectangle arrondi. Définissez leur mode de tracé sur Combiner les formes.
Ajoutez du texte sur l'onglet pour ajouter son titre. Ajoute une petite icône statistique faite à partir de petits rectangles.
Dessinez un rectangle blanc comme base pour notre graphique principal. Définissez sa largeur sur 8 colonnes. Assurez-vous de régler le paramètre Stroke sur None. Ajouter une lueur extérieure de style de calque.
Appuyez sur Commande / Ctrl + J pour dupliquer la forme. Ajoutez une grande forme de rectangle sur sa partie inférieure et définissez son mode sur Soustraction avant. Ajouter une superposition de dégradé.
Dessine un rectangle arrondi. Définissez Remplissage sur blanc sans contour. Utilisez le même éclat externe et placez-le derrière la forme précédente.
Faire un nouveau calque entre ces deux formes. Faites une sélection elliptique puis remplissez-la de noir. Désélectionnez (Commande / Ctrl + D) puis adoucissez-le en ajoutant du flou gaussien..
Activer l'outil Texte. Ajouter le titre de la section.
Activer l'outil Ligne puis tracer une ligne de 1 px. Définissez sa couleur de trait sur # e4e4ee4.
Voici la différence avant et après l'ajout de la ligne.
Dessine un rectangle. Définissez son remplissage sur aucun et le contour sur #cccccc.
Sélectionnez le type de trait en pointillé dans la barre des options. Cliquez sur Plus d'options et définissez Dash and Gap sur 4 and 2.
Tracez une ligne horizontale de 1 px avec Stroke #cccccc. Sélectionnez le trait en pointillé.
Activer l’outil Sélection du chemin et sélectionner le chemin que nous venons de faire. Appuyez sur Commande / Ctrl + Alt + T pour le dupliquer et le transformer. Appuyez deux fois sur Maj + Flèche droite pour le déplacer de 20 px vers la droite. Répétez le processus de transformation et de duplication en appuyant sur Commande / Ctrl + Maj + Alt + T.
Continuez à répéter le processus jusqu'à ce que le rectangle soit rempli de colonnes.
Réduit l'opacité du calque à 30%.
Répétez les étapes précédentes mais cette fois avec des lignes horizontales.
Voici le résultat. Maintenant, nous avons une grille subtile sur le fond statistique.
Ajouter des valeurs sur les deux axes, x et y.
Activer l'outil Ligne et dessiner une ligne de 1 px sur la grille. Définissez sa couleur de trait sur # f16424.
Shift - faites glisser pour ajouter plus de ligne. Continuez à ajouter plus de lignes jusqu'à ce que nous ayons un graphique en courbes complet.
Tracez un petit cercle et placez-le à droite sur le graphique. Définissez le remplissage sur blanc et le même trait sur la couleur de remplissage de la ligne..
Double-cliquez sur le calque de forme de cercle et activez Calque Style Trait. Définir sa couleur en blanc et position à l'extérieur.
Sélectionnez le tracé du cercle à l’aide de l’outil Path Direction, puis Alt - faites-le glisser pour le dupliquer..
Suivez les mêmes étapes pour dessiner un autre graphique en courbes. Cette fois, utilisez une couleur différente et définissez ses options de trait sur pointillé..
Comme dans le graphique en courbes précédent, ajoutez des cercles sur chaque segment.
En haut du graphique, ajoutez une légende. Vous ajoutez simplement une ligne courte utilisant les mêmes propriétés que le graphique en courbes et ajoutez une courte description..
Dessine un rectangle arrondi. Définissez son remplissage sur #eeeeee et Stroke sur #cbcbcb.
Ajouter un ombrage intérieur et un dégradé de style de calque.
Dessinez une forme de rectangle au centre de la forme du rectangle arrondi. Vous pouvez utiliser n'importe quelle couleur pour son remplissage. Définissez son trait sur Aucun. Réduit son remplissage à 0%. Ajouter une superposition de dégradé de style de calque.
Tracez 1 ligne px avec la couleur #cbcbcb à ses côtés gauche et droit.
Ajouter une sélection de plage de temps. Vous pouvez voir que le texte avec un arrière-plan différent est maintenant actif..
Utilisons les styles de caractères pour définir notre personnage par défaut. Cette fonctionnalité est une version simplifiée du style de caractère dans Adobe InDesign. Si vous utilisez fréquemment InDesign, vous le reconnaîtrez instantanément..
Ouvrez le panneau Styles de caractère, puis cliquez sur une nouvelle icône. Dans la boîte de dialogue, définissez son type de police sur Arial Normal, sa taille sur 12 points et sa couleur sur # 767676. Nous allons utiliser ce style de caractère dans la majeure partie du texte. C'est pourquoi nous l'appellerons aussi comme style de caractère par défaut.
Appliquons ce style de caractère au texte. Activer l'outil Texte, sélectionner le texte puis cliquer sur le style de caractère pour l'appliquer.
Que faire si nous voulons enregistrer les propriétés d'un texte existant en tant que styles de caractère? Faisons ceci aux valeurs sur l'axe du graphique. Créez de nouveaux styles de caractères. Sélectionnez le texte et cliquez sur l'icône Redéfinir.
Double-cliquez sur le style de caractère pour modifier ses options. Changer son nom. Appliquer ce style de caractère à toutes les valeurs des deux axes.
La bonne chose à propos du style de caractère (et du style de paragraphe également) est que vous pouvez simplement le modifier pour modifier chaque texte utilisant ce style. Voici un exemple. Modifions l’axe des graphes - un style de caractère que nous avons créé précédemment pour chaque valeur des deux axes. Double-cliquez dessus et changez le type et la taille de la police..
Activer l'outil Rectangle arrondi. Tracez un rectangle arrondi et ajoutez un petit triangle sur le côté gauche. Définir son remplissage: # f1f2f2 et Stroke: None.
Double-cliquez sur le calque dans le panneau Calques et ajoutez un trait noir. Vous demandez peut-être pourquoi nous n'utilisons pas l'option Stroke directement depuis sa propriété? La réponse est dans Style de calque, trait, vous pouvez modifier l'opacité du trait. C'est quelque chose que vous ne pouvez toujours pas faire sur Photoshop CS6. Ajoutez également une superposition externe de lueur et de dégradé.
Dupliquez la forme et changez sa couleur de remplissage en # f16424. Supprimer son style de calque. Ajouter un chemin rectangle sur sa partie inférieure et définir son mode sur Soustraire la forme avant.
Ajouter un calque Style Trait et dégradé à la forme.
Tracez une ligne verticale de 1 px. Définissez sa couleur de remplissage sur le noir. Ajouter des styles de calque Réduisez les calques Opacité à 8%.
Ajouter un petit titre sur la forme. Enregistrez la propriété de caractère en tant que styles de caractère. Ajouter un style de calque Ombre portée.
Ajoutez un autre titre de l'autre côté. Utilisez les mêmes styles de caractère et la même ombre portée.
Ajouter un pourcentage à l'intérieur. C'est toujours une bonne idée de l'enregistrer en tant que styles de caractère. De cette façon, vous pouvez facilement modifier son apparence à partir du panneau Styles de caractères..
Activer l'outil polygone et définir son côté à 3 dans la barre d'options. Dessinez un petit triangle pointant vers le haut. Définir son remplissage: # c1c1c1 et Stroke: None.
Ajouter un style de calque Inner Shadow.
Ajoutez un petit cercle et une autre forme de triangle, cette fois-ci. Utilisez la même couleur et le même style de calque.
Ajouter un pourcentage. Comme d'habitude, sauvegardez son style de caractère.
Les données sont positives. Soulignons-le en activant la flèche vers le haut. Changer sa forme Remplir la couleur à # 4ff25d.
Dupliquer le numéro pour une autre donnée.
Dessinez une section similaire pour un graphique plus petit. Vous pouvez utiliser les mêmes techniques expliquées ci-dessus. Assurez-vous d'utiliser une taille de texte plus petite sur le titre.
Tracez une ligne bleue de 1 px à l'intérieur de la grille. Définir ses options de trait en pointillé.
Comme dans le graphique principal, ajoutez un cercle sur chaque point.
Activer l'outil Stylo. Dessinez une nouvelle forme couvrant la ligne qui la relie à l’axe x. Utilisez la même couleur que la ligne. Placez la forme derrière les cercles.
Ajouter un motif de pixels gratuit à partir de PSDfreemium.
Atténuer l'opacité à 50%.
Ajouter le pourcentage de son côté. Dans ce graphique plus petit, nous voulons aussi une taille de pourcentage de texte plus petite.
Ajouter un autre graphique.
Nous travaillons actuellement sur l'onglet statistique. Ajoutons un autre onglet et mettez-les à l'état inactif. Dupliquer l’arrière-plan de l’onglet statistique que nous avons créé aux étapes 25 à 27. Il sera utile de cacher ensuite l’onglet Statistique. Changez sa couleur de fond et de trait en # c1c1c1. Supprimer le petit rectangle sur son côté gauche. Déplacer le rectangle arrondi vers la droite.
Ajouter une simple icône faite d'un cercle sans fond ni contour: # 646464 avec un i à l'intérieur.
Ramenez l'onglet Statistiques. Dessine un autre onglet inactif si nécessaire.
Activer l'outil Rectangle et dessiner un rectangle derrière l'onglet principal. Définissez son remplissage sur #eeeeee et Stroke sur #cbcbcb.
Dessine un rectangle arrondi. Définissez son remplissage sur un dégradé de # d6d6d6d à # f3f3f3 et Stroke # c1c1c1. Cela va être un fond pour un menu inactif.
Dupliquez le rectangle arrondi. Changez sa couleur en dégradé de # ef6526 à fa834d et Stroke: # f16424. Celui-ci est utilisé pour le menu actif. Assurez-vous de le placer sous le petit triangle de l'onglet Statistiques.
Dupliquez le premier rectangle arrondi pour créer plus de fond pour les menus inactifs.
Ajouter du texte sur le bouton. Double-cliquez sur son calque pour ajouter une ombre portée au style de calque. Pour les menus inactifs, utilisez du texte sombre et une ombre portée claire..
Pour le menu actif, utilisez du texte blanc et foncé Ombre portée.
Dessine un rectangle arrondi. Pas besoin de s'inquiéter de son remplissage ou de son trait.
Pour son remplissage, utilisons le même dégradé que dans le menu précédent. Activez également la sélection de chemin et sélectionnez la forme. Faites un clic droit et choisissez Copier le remplissage.
Revenez à la nouvelle forme, cliquez dessus avec le bouton droit de la souris et choisissez Coller le remplissage..
Ouvrez l'option Remplir de la barre d'options et cliquez sur l'icône située sous l'aperçu du dégradé pour inverser sa direction..
Répéter le même processus pour copier le paramètre de trait.
Ajouter Inner Shadow avec les paramètres suivants.
Activer l'outil Texte et l'étiquette du bouton blanc. Ajouter un style de calque Ombre portée.
Ajoutez un petit triangle pointant vers le bas. Remplir: #eeeeee et AVC: Aucun. Ajouter la même ombre portée comme étiquette du bouton.
Ajoutez une ligne de 1 px séparant l’étiquette et la flèche. Définissez sa couleur sur # b04312, puis ajoutez une ombre portée légère avec un angle de 180 °..
Ajoutons une icône de mini-loupe sur le bouton. Commencez par dessiner un tracé circulaire de format 10 x 10 px. Définissez son trait sur blanc, avec Size: 2 pt, et Fill to None.
Ajouter une ligne à 2 points à côté du cercle avec un angle de 45 °.
Accentsconagua