Share
Dans le tutoriel d'aujourd'hui, nous allons vous expliquer comment créer votre propre kit d'interface utilisateur simple à partir de zéro. Nous allons créer les blocs de construction de base que vous pouvez utiliser dans presque tous les projets Web, notamment les champs de texte, les champs de focus, les champs de sélection, les barres de défilement, les chargeurs, les cases à cocher et les boutons radio. Prendre plaisir!
Créer un kit d'interface utilisateur simple est un excellent moyen d'accélérer vos compétences en conception lorsque vous travaillez sur un grand projet. Si vous avez beaucoup de pages à reproduire, disposer d'un arsenal d'éléments prêts à l'emploi spécialement conçus pour ce projet vous permettra de les préparer plus rapidement. Aujourd'hui, nous avons une vidéo et un tutoriel écrit - suivez l'un ou les deux!
Pour ceux d'entre vous qui veulent un peu plus de conseils que la vidéo, je propose également un didacticiel complet, étape par étape. Plongeons dedans!
La création des champs de texte est la partie la plus simple de tout le processus, mais comme ces éléments seront probablement utilisés le plus souvent, il est important de bien faire les choses la première fois. Dans notre cas, j'ai dessiné de simples rectangles arrondis de 300px x 30px avec un rayon de 2px. Adaptez votre propre à vos besoins. Les grands champs juteux et très arrondis peuvent aussi être amusants! Les champs de bords durs sont pour la foule plus sérieuse.
Quoi qu'il en soit, créez-en un parfait: ajoutez un trait correspondant à votre marque (# bdd9a7 pour la démonstration) et dupliquez le calque deux fois (Ctrl + J), en le déplaçant vers le bas à chaque fois..
Ces trois couches constitueront la base de notre kit d'interface utilisateur. Chaque fois que nous aurons besoin de créer un nouveau champ ou bouton, il y a de bonnes chances que nous voulions commencer ici pour pouvoir dupliquer la même hauteur et le même espacement..
Ensuite, ajoutez du texte sur chaque couche. Utilisez les polices de votre choix, mais il est préférable de les conserver sur des polices Web sécurisées? en particulier avec les champs de formulaire où le remplacement de police n'est pas votre meilleure option. J'ai utilisé Helvetica # 407a16, 12 pt - mais vous pouvez utiliser Arial, Georgia, Times, etc..
Ajoutons maintenant une lueur extérieure simple à notre "champ de mise au point". Cela aidera les gens à l'identifier lorsqu'ils l'utilisent. Notre lueur est assez subtile, mais vous pouvez la rendre aussi brillante que vous le souhaitez. Notez que j'ai également ajouté une ombre intérieure TRÈS subtile - c'est totalement facultatif, mais cela vous montre comment ajouter des effets subtils pour rendre le champ actif..
Ensuite, dupliquons le rectangle arrondi que nous allons utiliser pour le "menu déroulant" et masquons-le à l'aide de l'outil Rectangle de sélection et en appliquant un masque de calque. Cela crée le "bouton" pour le menu. Tout ce que nous avons à faire est d’ajouter un subtil dégradé pour qu’il ressemble davantage à un bouton - # d9edca à # f0f9e9.
Cette étape est très importante car, pour la quasi-totalité des futurs éléments de stock (boutons, cases à cocher, etc.), nous allons copier ce style de calque et le coller sur des formes vierges. Prenez une minute pour que votre vôtre soit parfait avant de poursuivre, car cela donnera le ton à l'ensemble de votre kit d'interface utilisateur..
Comme je viens de le dire, nous allons créer nos boutons en utilisant le même rectangle arrondi de base que précédemment, et en copiant / collant le style de calque dans le menu déroulant. Le texte que nous utilisons doit être une variante en gras de la police utilisée dans les champs de texte. Il suffit d'ajouter une simple ombre portée "légère" (Ombre portée, 75%, Blanc, Écran, Distance 1px, Taille 0) pour compléter la zone de compression. texte.
Pour créer la version enfoncée du bouton, inversez simplement le dégradé en sélectionnant "Inverser" dans le menu Dégradé..
La flèche vers le bas est créée à l'aide du bouton "Forme personnalisée" et en sélectionnant la flèche vers le bas dans la bibliothèque d'éléments stockés dans Photoshop. Vous pouvez également créer votre propre si vous voulez? la forme est totalement à vous.
Créez simplement votre flèche, réglez la couleur de remplissage sur votre "couleur de marque" (la nôtre est le # 68b232) et appliquez une simple ombre intérieure (12% d’opacité, Distance 2, Taille 3) pour la rendre un peu encastrée. Bien sûr, vous pouvez modifier ces paramètres. La version bleue de la vidéo vous montrera une autre variante..
Enfin, vous pouvez ajouter un effet d'éclairage optionnel à l'aide d'un simple pinceau de 120 pixels (Opacité 0%) sur un calque vierge. Placez délicatement la "tache de pinceau" sur le dessus du bouton - puis masquez simplement le maculage au-dessus du bouton (faites une sélection de la forme du bouton et appliquez la nouvelle sélection en tant que masque de calque sur l'effet brossé). Définissez le mode de fusion sur Lumière douce ou dure pour compléter l’effet..
Vous devrez peut-être bricoler un peu cette dernière étape en fonction des couleurs que vous utilisez. Les étapes seront toujours les mêmes si:
Cette étape suivante est très simple: il suffit de créer des rectangles arrondis de 12 pixels (les carrés pour être exact). Pourquoi 12px? Parce que c'est la taille de point générique pour la plupart des textes sur Internet. Vous pouvez aller plus gros ou plus petit selon votre taille de police.
Rappelez-vous, nous copions / collons les styles de calque à partir de ce bouton du menu déroulant? cela rend les choses rapides et uniformes.
Le même processus s'applique aux boutons radio, sauf que cette fois, nous créons des cercles 12px au lieu de rectangles.
Le "D-Pad" est créé simplement en dupliquant et en tournant la flèche du menu déroulant de 90 degrés plusieurs fois. Ces flèches directionnelles sont idéales lorsque vous devez créer un menu en accordéon, un curseur jQuery, etc..
Une simple barre de chargement comme celle-ci est un excellent moyen d'étendre la polyvalence de votre kit d'interface utilisateur. Vous ne l'utiliserez peut-être pas tout le temps, mais cela vous fera gagner beaucoup de temps dans les rares cas où vous en avez besoin pronto! La barre de chargement est composée de quelques marches.
Le style de couche de base de l’arrière-plan est le suivant:
Vous pouvez créer la base du champ actif de différentes manières, mais voici comment le vert a été construit..
Ensuite, nous ajouterons les lignes diagonales qui seront masquées sur la barre de chargement:
L'effet d'éclairage est un bonus si vous le voulez. Je l'ai créé à l'aide d'un pinceau de 120 pixels (dureté à 0%), puis j'ai créé un nouveau calque et cliqué une fois sur la souris pour créer un seul blot sur la page. Ensuite, j'ai défini le style de calque sur Lumière douce et le masque sur le bouton. Vous pouvez effectuer cette dernière étape de plusieurs manières - dans l'exemple, je fais simplement une sélection dans le champ actif (maintenez la touche Ctrl enfoncée et cliquez sur la forme), puis appliquez cette forme en tant que masque de calque..
D'accord, nous sommes sur la dernière ligne droite maintenant! La barre de défilement est assez simple à créer, mais permettez-moi de faire quelques indications:
Voici les clichés:
Une étape souvent oubliée pour la création d'un kit d'interface utilisateur de base consiste à ajouter une marque de base et une autre documentation dans votre fichier. Bien sûr, vous pourriez ajouter ce genre de choses dans un document texte qui accompagne votre fichier? mais alors les gens devraient l'ouvrir. Ainsi, toutes les informations de base (nom du client, concepteur, version, type de fichier, etc.) sont toutes affichées dans le fichier, ce qui évite toute confusion..
Enfin, vous pouvez personnaliser cela au contenu de votre coeur? utilisez vos propres couleurs, polices, styles de calque, etc. Ajoutez de nouveaux éléments tels que des balises, des menus déroulants ouverts, etc. La limite à laquelle vous pouvez porter ceci est totalement à vous, alors allez-y et amusez-vous avec elle!
Accentsconagua