Share
Quelle est la première chose à faire pour votre site portefeuille? Ressortir! Aujourd'hui, Paul J Noble nous guidera dans la création de son propre site de portefeuille au design unique. Il nous montrera des astuces et des astuces dans Adobe Photoshop, ainsi que des approches astucieuses pour se démarquer du lot des autres sites du portefeuille..
Pensez à votre site de portefeuille est votre porte-parole en ligne pour les clients potentiels. Si cela est fait correctement, il devrait dire aux gens ce que vous faites, montrer votre meilleur travail et leur donner l'occasion de vous contacter. Tout cela est assez évident - alors, quelle est la différence entre un site de portefeuille ordinaire et un site vraiment remarquable?
La clé d'un site de portefeuille efficace ne consiste pas seulement à avoir de grands projets - cela laisse une impression durable sur les visiteurs. Bien sûr, cela peut signifier avoir des illustrations incroyables si vous êtes un graphiste - mais pour les concepteurs et les développeurs Web, cela signifie souvent qu'il faut repousser les limites de l'interface utilisateur / UX et du codage afin de montrer nos points forts.
Dans ce tutoriel, Paul J Noble va nous montrer comment il a utilisé des approches simples mais remarquablement novatrices de l'interface utilisateur / UX sur son propre site pour créer un site de portefeuille qui étire les attentes de l'utilisateur en utilisant de l'interactivité et des effets d'éclairage subtils..
Plongeons dedans!
Créez un nouveau document dans Photoshop au format 1400 x 900. Le dernier site au rendu HTML comportera des éléments "liquides" (c'est-à-dire évolutifs). Nous devrons donc garder à l'esprit que le dessin final ne sera pas à taille fixe..
Créer un fond solide est un moyen facile de commencer. Pour cette conception, nous allons utiliser une couleur de base
suffisamment sombre pour accentuer les images au premier plan tout en compensant le noir pur qui peut apparaître dans les images du folio. Nous allons également utiliser include un peu de bleu pour créer une couleur sombre "cool" qui s'intégrera aux éléments de l'interface.
Sélectionnez Calque> Nouveau calque de remplissage> Couleur unie et attribuez la couleur # 252a3b..
Comme nous utilisons une disposition évolutive, nous devons définir la largeur horizontale minimale. Pour la plupart des sites commerciaux, cette résolution est d’environ 1000 pixels, ce qui convient aux utilisateurs disposant d’affichages en résolution 1024x768. Cependant, pour ce site, nous viserons une largeur minimale de 1100 pixels..
Tout d'abord, assurez-vous que vos unités de guidage sont définies en pixels. Cela peut être défini en allant dans Préférences> Unités et guides.
Ensuite, allez à Affichage> Nouveau guide. Comme nous allons placer notre contenu au centre et viser une largeur minimale totale de 1100 pixels, nous devons placer les guides verticaux à 150 et 1250 pixels..
Des bandes diagonales subtiles aideront à relever le dessin en créant une séparation entre les éléments de portefeuille de premier plan et un arrière-plan texturé.
Pour ce faire, nous appliquerons un calque de remplissage de motif. Cependant, nous devons d’abord créer le motif.
Créez un nouveau document 12x12 pixels avec un arrière-plan transparent et ajoutez un nouveau calque de remplissage avec un remplissage noir (# 000000).
Ajoutez maintenant un nouveau calque (Calque> Nouveau> Calque). À l'aide de l'outil Crayon avec une taille de pinceau de 1 px, tracez trois lignes exactement comme elles apparaissent dans l'image ci-dessous..
Désactivez le calque de remplissage et définissez l'opacité du calque de lignes sur 6%. Pour enregistrer ceci en tant que notre modèle, sélectionnez Edition> Définir un modèle..
Pour revenir à notre canevas d’origine, créez un nouveau calque avec la texture en sélectionnant Calque> Nouveau calque de remplissage> Motif, puis sélectionnez le motif défini précédemment..
Maintenant que nous avons créé notre base, nous pouvons déposer des couches plates qui constituent les principaux éléments du site.
Tout d'abord, notre navigation. Comme ce site sera conçu pour ne pas avoir de défilement vertical, nous pouvons positionner la navigation de manière à s’aligner au bas de l’écran..
Créez un nouveau groupe dans la palette des calques et nommez ce groupe 'Navigation'.
Créez ensuite un nouveau calque à l'aide de l'outil Rectangle (U). Avec la fenêtre d’information ouverte, dessinez cette forme de manière à obtenir 1400x61 (toute la largeur de la fenêtre du document et 61 pixels de haut). Aligner ce calque au bas de la fenêtre du document.
Appliquez maintenant un dégradé au calque en cliquant avec le bouton droit de la souris sur le calque de forme dans la palette Calques, en sélectionnant Options de fusion, puis en cochant l'option Superposition du dégradé (sinon, sélectionnez Calque> Style de calque> Superposition du dégradé)..
Dans l'éditeur de Graident, cliquez sur le sélecteur de couleur du bas pour ouvrir le sélecteur de couleurs. Pour la couleur de gauche (bas de la forme), utilisez # 2f313a. Pour la bonne couleur (haut de forme), utilisez # 3c3f49.
Ensuite, créez un nouveau calque et mettez-le en évidence. À l'aide de l'outil Crayon avec un pinceau 1 pixel et la couleur #ffffff, tracez une ligne tout en maintenant la touche Maj enfoncée dans la partie supérieure du rectangle précédemment créé. Puis définissez l'opacité de ce calque sur 6%.
Créez un nouveau calque de texte à 20 pixels du côté gauche du document et alignez le texte afin qu'il soit centré verticalement sur le calque du rectangle de navigation..
Dans cet exemple, la police DIN Light a été appliquée à 14 pixels avec un suivi lâche de 200. Pour créer un décalage entre deux parties du type de logo, deux couleurs sont utilisées. Pour la première partie #dddddd et la deuxième partie la plus sombre # 737375.
Ensuite, ajoutez une ombre portée subtile pour créer l’apparence du texte inséré dans l’arrière-plan. Sélectionnez Calque> Style de calque> Ombre portée.
Désélectionnez 'Use Global Light', changez la direction à -45 degrés, définissez la taille sur 0px, la distance 1px et l'opacité 30%.
Pour les principaux boutons de navigation, nous utiliserons un rectangle arrondi.
Créer un nouveau groupe appelé "boutons".
Créer une nouvelle forme de rectangle arrondi de 279 x 31 et décalée de 20 px du côté droit de la fenêtre du document et centrée verticalement dans le rectangle de navigation.
Cliquez avec le bouton droit sur le calque dans la palette des calques et sélectionnez Options de fusion. Cochez l'option Incrustation de dégradé et utilisez les valeurs # 292c33 à # 43464f. Cliquez sur OK puis cochez Bevel & Emboss..
Pour Bevel & Emboss, définissez la taille sur 0px avec une direction de 122 degrés. Ensuite, réglez l'opacité des reflets et des ombres sur 10% pour créer un effet de lumière uniforme et subtil..
Ajoutez des étiquettes de texte en utilisant les mêmes paramètres de police que ceux appliqués pour le type de logo. Comme les étiquettes des boutons sont contenues dans un espace vertical plus petit, nous devrions réduire la taille à 12 px et resserrer le suivi à 100. Utilisez les mêmes couleurs que le type de logo, mais appliquez la couleur plus claire pour l'étiquette de la page active..
Pour séparer les boutons tout en conservant l'aspect légèrement éclairé de la navigation, nous devons tracer deux lignes, chacune d'une largeur de 1px. Le premier doit être noir (# 000000) et l'autre blanc (#FFFFFF). Définissez l'opacité du calque blanc sur 6% et le calque noir sur 12%. Dupliquez ces couches en maintenant la touche Maj enfoncée et en cliquant avec le bouton droit de la souris sur la sélection. Positionnez les calques en double avec un espacement constant dans la navigation.
Ces boutons ont une fonction différente du reste de la navigation, nous allons donc appliquer un style qui le suggère. Insérons ces boutons pour compléter la navigation principale.
Tout d'abord, créez un nouveau groupe appelé "social" et emboîtez ce groupe dans le groupe parent "navigation".
A présent, en utilisant l'outil Rectangle arrondi avec un rayon de 4 px et en maintenant la touche Maj enfoncée, créez une forme d'aspect carré de 25x25 px. Centrez-le verticalement dans la navigation et positionnez la forme 22 px à gauche des boutons de navigation principaux..
Cliquez avec le bouton droit sur la forme que vous venez de créer et sélectionnez Options de fusion..
Ajoutez une ombre portée. Pour cette ombre portée, nous utiliserons le blanc (#FFFFFF) et réglerons le mode de fusion sur Lighten. Définissez la distance sur 1 px, l’étalement sur 0% et la taille sur 0 px. Cela créera un effet d'allumage du bord inférieur et donc du bouton inséré.
Ensuite, tout en restant dans la fenêtre Style de calque, vérifiez l’ombre intérieure. Utilisez du noir (# 000000) avec une opacité de 39%, une distance de 1 px et une taille de 4 px.
Enfin, sélectionnez Superposition de couleurs et utilisez le numéro 353741. Cela va aplatir l'apparence de la forme et ajouter du contraste avec le fond.
Pour les icônes de médias sociaux, nous allons prendre une image existante et tracer les bords à l'aide de l'outil Plume pour créer un chemin (assurez-vous que l'option Chemins est sélectionnée dans le menu Options de l'outil)..
Après avoir créé un chemin de l'icône, utilisez l'outil de sélection de chemin et cliquez avec le bouton droit de la souris sur le chemin que vous venez de créer (assurez-vous que le chemin est sélectionné dans la palette Chemins). Sélectionnez Définir une forme personnalisée? Sauver la forme.
Nous pouvons maintenant utiliser l'icône en tant qu'objet vectoriel évolutif. A l'aide de l'outil Stylo, définissez Options sur Couches de forme (élément supérieur gauche de la barre d'options), sélectionnez Outil Forme personnalisée, puis sélectionnez l'icône que vous venez de créer. En maintenant la touche Maj enfoncée, faites glisser l'objet de manière à ce qu'il s'insère dans la mosaïque d'icônes.
Définir l'opacité de l'icône à 20%.
Répétez ces étapes pour toutes les icônes de médias sociaux restantes..
Dans cet exemple, nous allons afficher des images de folio au format 640x480 px.
Comme nous souhaitons centrer verticalement l’image présentée dans l’espace au-dessus de la navigation, nous devons ajouter quelques guides supplémentaires. Sélectionnez Affichage> Nouveau guide et ajoutez des guides horizontaux à 180px et 660px. Ceci positionnera notre image vue au milieu de l’espace vertical au-dessus de la navigation..
Nous allons également avoir besoin de texte à gauche de l'image sélectionnée. Nous allons donc ajouter des repères verticaux à 400 et 350 pixels pour créer une marge pour le texte et laisser un espace de navigation à côté de l'image. Enfin, ajoutez des guides verticaux à 1040px et 1070px pour définir le bord de l'image visualisée et la marge entre l'image adjacente.
Créez un nouveau groupe appelé "Projets". Ensuite, à l’aide de l’outil Rectangle, tracez un rectangle de 640x480px qui s’aligne en haut à gauche du guide vertical à 400px et le haut sur le guide horizontal à 180px. Cela servira d'espace réservé pour notre image principale.
Cliquez avec le bouton droit sur le calque que vous venez de créer et sélectionnez Rasterize Layer..
Maintenant, en maintenant la touche Alt enfoncée, cliquez et faites glisser le calque pour créer un doublon. Déplacez ce calque à droite du calque avec une marge de 30 pixels pour l'aligner sur le guide à 1070 pixels et en utilisant la même ligne de base..
Créez deux autres doublons et alignez-les au bas de chacun avec une marge de 30 pixels entre chaque.
Ensuite, à l'aide de l'outil Pot de peinture, remplissez chacune de ces formes avec la couleur # 252a3a.
Créez un nouveau groupe appelé "Vignette" sous le groupe "Navigation" et au-dessus du groupe "Projets".
Créez un nouveau calque et utilisez l'outil Pot de peinture pour le remplir en utilisant la couleur de premier plan # 0f1219.
À l'aide de l'outil Ellipse, tracez un contour qui se croise aux coins des principaux guides d'image..
Maintenant, pour créer un effet de vignette, nous devrons découper cette section tout en atténuant le contour de la coupe. Pour ce faire, nous utilisons Select> Modify> Feather. Diminuez la sélection de 60px, puis coupez la sélection de calque (Ctrl-x / Command-x).
Comme nous allons présenter notre travail, nous devrons placer des captures d'écran sur les espaces réservés. Retournez dans le groupe 'Projets' et collez une capture d'écran pendant que l'espace réservé principal est sélectionné. Cela insérera le calque au-dessus de l'espace réservé. Ensuite, cliquez avec le bouton droit sur le calque et sélectionnez Créer un masque d'écrêtage..
Collez trois autres captures d'écran sur les autres espaces réservés.
Réduisez l'opacité de toutes les captures d'écran, à l'exception de la capture d'écran centrée, à 20%.
Pour annoter chaque projet, nous allons utiliser trois couches de texte. Créez un nouveau groupe au-dessus du groupe 'vignette' pour héberger ces calques.
Pour le premier, le titre, nous utiliserons une police légère. Dans cet exemple, j'ai utilisé DIN Light, mais une autre police de caractères similaire peut également fonctionner correctement. À l'aide de l'outil Texte, tracez une zone de texte dans les guides situés à gauche de l'image principale et 40 pixels sous le guide supérieur. Définissez la couleur sur #FFFFFF, le suivi sur -25 pour un espacement plus étroit des lettres et utilisez une taille de police de 28px.
Nous ajouterons également une ligne pour la catégorie et la date du projet. Définissez la taille sur 14px, le suivi sur 100, forcez les majuscules et appliquez la couleur # 338966 pour accentuer cette ligne.
Ensuite, pour le corps du texte, nous utiliserons une police système telle que Lucida Grande ou Lucida Sans Unicode à 12 pixels avec une couleur de # 8C8F95 et une hauteur de trait de 18 pixels..
Pour naviguer sur notre site folio, nous autoriserons le contrôle de la souris ou du clavier. Un placement intuitif des boutons directionnels de navigation est fonction de leur fonction. Par exemple, le bouton flèche droite ira à droite de l'image principale.
Pour les boutons, nous utiliserons des formes translucides pouvant décaler l'opacité lors d'un survol ou d'un clic. Créez un nouveau groupe appelé "Boutons" qui se trouve au-dessus du groupe "Vignette"..
Ensuite, créez un nouveau document avec les dimensions 37x37px. À l’aide de l’outil Plume, dessinez une forme en chevron comme ci-dessous. Répétez le processus à l'étape 8 à l'aide de l'outil de sélection de chemin d'accès, cliquez avec le bouton droit de la souris sur la forme et sélectionnez Définir une forme personnalisée. Sauver la forme.
Pour revenir à notre canevas principal, utilisez l'outil Forme personnalisée pour insérer la forme créée précédemment..
Ensuite, sélectionnez Edition> Transformer> Retourner horizontalement. Cela pointera la flèche vers la droite. Clonez cette forme et utilisez Édition> Transformation> Rotation de 90 degrés dans le sens des aiguilles d'une montre pour créer la forme pointant vers le bas..
Positionnez chacune de ces formes au centre de leur côté directionnel respectif. Autoriser une marge de 15 pixels pour que les boutons puissent chevaucher les images adjacentes et réduire l'opacité à 12%.
Pour indiquer à l’utilisateur où il se trouve dans le portefeuille dans son ensemble, nous allons résumer la conception de la grille et utiliser des lignes de hauteur différente pour représenter des colonnes d’images et un indicateur pour établir la position de visualisation actuelle.
Créez un nouveau groupe appelé "Orientation" et placez ce groupe au-dessus du groupe "Vignette"..
A l'aide de l'outil Crayon, sélectionnez Ensemble de pinceaux carrés dans le menu déroulant. Ensuite, avec la couleur #FFFFFF et une épaisseur de 5px, tracez une ligne à aligner avec le guide de limite extrême gauche et une hauteur de 60px.
Clonez ce calque et positionnez ce 2px à droite. Répétez cette opération pour un maximum de 12 lignes.
Définissez l'opacité pour tous les calques sur 12%. Pour ce faire, définissez l'opacité du premier calque, faites un clic droit sur le calque et sélectionnez Copier le style du calque. Sélectionnez ensuite tous les calques restants et sélectionnez Coller le style de calque..
Décalez ces couches à l'aide de la commande Edition> Transformation libre pour raccourcir / augmenter chaque ligne..
Enfin, créez un nouveau calque et utilisez à nouveau le crayon pour dessiner un marqueur sur la première ligne. Ceci est notre indicateur de position.
Souvent, le contrôle du clavier offre une expérience de navigation intuitive. Cependant, nous devons permettre à l'utilisateur de savoir que le clavier peut contrôler la navigation. Pour ce faire, nous allons créer des icônes de flèche du clavier.
Créez un nouveau groupe appelé "Clavier" et placez-le au-dessus du groupe "Vignette"..
En utilisant l’outil Forme rectangulaire, dessinez un carré (maintenez la touche Maj enfoncée) 20x20px avec la couleur # 262a34. Cliquez avec le bouton droit sur le calque dans la palette Calques et sélectionnez Options de fusion. Vérifiez le trait et appliquez un trait de 1px à l'extérieur avec la couleur # 32343f.
Ensuite, à l'aide de l'outil Plume (assurez-vous que le style est défini sur Par défaut dans la barre d'options) et dessinez avec la couleur #fff une flèche avec un point légèrement carré. Ajustez si nécessaire avec l'outil Sélection directe. Définir l'opacité à 20%
Dans la palette des calques, faites défiler les deux calques que vous venez de créer. Faites un clic droit et sélectionnez Dupliquer les calques. Ensuite, à l'aide de l'option de menu Edition> Transformer, faites pivoter les calques dupliqués dans leur orientation correcte. Répétez cette étape pour créer les quatre icônes..
Bien! Maintenant, nous en avons terminé avec la partie conception du projet? ce qui signifie que tout ce que nous avons à faire est de le coder à l'aide de bases HTML / CSS, de raccourcis clavier jQuery et de quelques astuces jQuery supplémentaires. Si quelqu'un veut voir comment Paul a codé cette conception, faites-le-nous savoir dans les commentaires pour que nous puissions l'arranger.!
Accentsconagua