Share
Dans ce tutoriel, nous allons parcourir une extension gratuite de Photoshop appelée Velositey. Velositey (actuellement à la version 2) fournit des modèles de disposition courants pour construire des prototypes de conception de sites Web dans Photoshop..
“Passez plus de temps à perfectionner les détails et le style et moins de temps pour tout ce qui est ennuyeux.” - Velositey
Avant que nous ayons notre Velositey entre les mains, examinons d’abord certains schémas de présentation courants dans de nombreux sites Web de nos jours..
Si nous examinons trois des thèmes WordPress les plus populaires dans ThemeForest (Avada, Enfold et Salient), vous remarquerez qu'ils partagent certaines caractéristiques communes..
Premièrement, sur de grands écrans, ils ont une barre de navigation avec l’image de logo définie à gauche et la navigation à droite. En dessous de la barre de navigation, nous rencontrons généralement une image de héros accompagnée de quelques boutons affichés dans un diaporama animé. Après les zones d’entête en grève, nous trouvons souvent des colonnes ou une sorte d’agencement basé sur une grille..
Étant donné que ce type de disposition est si courant dans la nature, vous pouvez souvent vous retrouver à construire quelque chose de similaire. Prototyper maintes et maintes fois des mises en page familières peut donc devenir une tâche répétitive.
Dans ce didacticiel, nous allons parcourir les fonctionnalités de Velositey et apprendre à les utiliser pour automatiser des tâches courantes, accélérant ainsi le déroulement de notre travail de prototypage. De plus, nous allons apprendre à utiliser les fonctionnalités natives de Photoshop pour personnaliser et ajouter des éléments supplémentaires à notre prototype..
Sans plus tarder, commençons!
La configuration minimale requise pour exécuter Velositey est Adobe Photoshop CC 2014 / CS6. Assurez-vous également que Adobe Extensions Manager est installé. Avec les personnes présentes, téléchargez Velositey (vous devrez payer avec un message Tweet ou Facebook) et installez-le via Adobe Extension Manager.
Lancez Photoshop et accédez à Fenêtre> Extension> Velositey révéler le panneau Velositey.
Panneau VelositeyPour commencer, nous allons créer une mise en page nue.
Tout d’abord, nous devons créer un nouveau document vierge via le [+] Nouveau modèle bouton dans le panneau Vélositey.
Ce document nouvellement généré sera livré avec une ligne de guidage couvrant une largeur de 1170px avec une gouttière de 30px. Cet arrangement est pratique si vous envisagez d’utiliser Bootstrap comme base de votre grille de site Web..
Une des premières choses que vous verrez sous le [+] Nouveau modèle button est une série d’onglets, dont le premier concerne les en-têtes. Je vais opter pour le 10ème motif en-tête. Cliquez dessus, Velositey générera instantanément l'en-tête et le mettra dans le document..
Option d'en-tête dans le panneau VelositeyDans notre cas, cela nous donne un en-tête avec le logo à gauche et la navigation à droite. Dans la version native de Photoshop Couche panneau, vous trouverez également que les couches sont correctement structurées et nommées dans le Entête groupe.
La mise en page nue de l'en-tête et sa structure de couche dans le Couches panneau.Remarque: si vous optez plus tard pour une autre option d'en-tête, Velositey remplacera le premier exemple.
Malgré les inconvénients, beaucoup de gens veulent toujours un curseur sur leur site web. L'ajout d'une zone de curseur est aussi simple que la zone d'en-tête. Velositey fournit un ensemble de modèles de curseurs prêts à être ajoutés avec le clic d'un bouton.
Les options du modèle de disposition du curseur.Ici, j'ai opté pour le dernier modèle de curseur qui nous donne un curseur contenant un en-tête, un contenu factice et deux boutons.
La zone Slider, avec les couches correspondantes .Comme vous pouvez le voir ci-dessus, vous trouverez un nouveau groupe, Curseur, ajouté dans le Couche panneau où résident toutes les couches de curseur.
L'ajout de la zone de contenu est également simple. Accédez au troisième onglet du panneau Velositey et vous trouverez quelques options de contenu..
Modèles de mise en page de contenuJ'ai opté pour le troisième style, nous donnant le contenu présenté en trois colonnes, chaque colonne comprenant un en-tête, un espace réservé pour l'image et un contenu factice..
La zone de contenu avec ses calquesUNE Module, dans ce cas, est un bloc de contenu indépendant. Il nous appartient de définir le contenu et l’utilisation qui en est faite. Contrairement aux zones En-tête, Curseur et Contenu, nous pouvons ajouter plusieurs modules dans un même document. Ici, j'ai ajouté le deuxième modèle de module:
Modèles de moduleLe second type de module nous donne un espace réservé pour l’image (qui couvre toute la grille du document), un en-tête et quelques lignes de texte factice..
Le module ajouté avec les calquesLa dernière section de notre site Web sera prévisible le pied de page. Pour les pieds de page, Velositey nous offre à nouveau un certain nombre de modèles prédéfinis:
Le premier modèle de pied de page nous donne la disposition de pied de page suivante:
À ce stade, nous avons terminé l’ajout de toutes les sections de site Web nécessaires, de l’en-tête au pied de page, en quelques clics seulement. Pour organiser correctement chaque section, vous pouvez ajouter des espaces verticaux entre eux, comme suit:
Maintenant que la structure de base est en place, il est temps de la personnaliser. Nous devons modifier quelques éléments pour rendre le prototype présentable..
La règle de base en matière de personnalisation de documents Photoshop consiste à laisser les calques intacts dans la mesure du possible. Chaque couche doit être personnalisée sans détruire sa forme ou ses propriétés initiales. Cela nous amène à utiliser certaines fonctionnalités de Photoshop telles que:
De plus, je préfère utiliser le minimum de couches possible.
Dans notre cas, Objets intelligents sont utiles pour inclure l'image du logo.
Pour commencer, sélectionnez le calque nommé logo dans le Entête groupe (actuellement une couche de forme rectangulaire). Ensuite, faites un clic droit et sélectionnez le Convertir en objet intelligent option.
le logo la couche est maintenant un Objet intelligent.
Pour placer notre logo dans cette couche, cliquez avec le bouton droit de la souris sur logo couche et sélectionnez le Modifier le contenu option.
Cela nous mènera à un nouveau document dans la fenêtre de Photoshop. Dans cet onglet, définissez le calque Shape rectangulaire invisible, puis faites glisser l’image du logo dans l’onglet, en alignant le logo sur la gauche. Lorsque vous enregistrez le fichier, les modifications doivent être reflétées dans index.psd.
Le logo est placé à travers un objet intelligentMaintenant, nous allons convertir le logo couche, qui est maintenant un Objet intelligent, dans une Objet intelligent lié. Cela stocke efficacement notre logo en tant que fichier externe. Pour ce faire, cliquez avec le bouton droit sur le calque, puis sélectionnez le Convertir en lien… option.
Photoshop vous invitera à enregistrer le Objet intelligent fichier, .psb. Sauver la Objet intelligent du logo dans une organisation typique, comme vous le feriez pour organiser les images du site Web. Dans ce cas, je l'enregistrerais dans un dossier nommé /images.
“Conservez les photos / icônes de stock dans un dossier proche du PSD, pas dans un dossier de bureau nommé“ Divers ”- Etiquette Photoshop
Dans la mesure où nous travaillons actuellement avec les objets intelligents, réutilisons le logo dans notre pied de page. Dirigez-vous vers le Bas de page grouper et trouver le logo couche. Cliquez avec le bouton droit sur le calque et sélectionnez Remplacer le contenu… .
Accédez au dossier où vous avez enregistré le .psb fichier du logo, sélectionnez le fichier et cliquez sur le bouton Endroit bouton. Vous devriez maintenant avoir le logo dans le pied de page.
Répétez ces étapes pour placer des images dans les autres sections. Contenu, curseur et module. Une fois que cela est fait, vous devriez avoir un résultat similaire au mien ci-dessous:
L'ajout d'un effet de calque sera probablement familier à ceux d'entre vous qui utilisent Photoshop depuis longtemps. Les effets de calque appliqueront un ou plusieurs effets tels que couleur, dégradé, ombre, etc. au-dessus d'un calque. Dans notre cas, nous allons l’utiliser pour définir une nouvelle couleur pour le logo et ajouter un dégradé..
Commençant par sélectionner le logo couche dans le Entête groupe. Puis sélectionnez le fx icône dans le Couche panneau, où résident les options d’effet. Sélectionner Superposition de couleurs… , et mettre la couleur en blanc.
Répétez cette étape pour personnaliser chaque couleur de lien de navigation, la couleur de l'icône dans la section de contenu et la couleur du bouton dans le curseur. De plus, ajoutez un effet de dégradé à l’image du curseur pour augmenter le contraste entre l’en-tête et le curseur, rendant ainsi le logo et la navigation plus lisibles..
Couches d'ajustement nous permettent de personnaliser le ton d'une couche (comme la luminosité et le contraste) de manière non destructive. Dans notre cas, nous pouvons utiliser un calque de réglage pour transformer les icônes de module en noir et blanc..
Tout d'abord, sélectionnez le récipient couche dans le Module groupe. Faites un clic droit et sélectionnez le Modifier le contenu… option. Ensuite, cliquez sur Nouvelle couche d'ajustement et sélectionnez le Noir et blanc… option. Et le tour est joué!
La dernière chose à faire est de reformuler les en-têtes et le texte dans les espaces réservés de contenu. Ceci fait, voici notre prototype fini:
Bien fait, nous avons réussi à construire un prototype de conception pour une page Web. Nous avons utilisé Velositey, ce qui nous a permis de générer rapidement la mise en page nue. De plus, nous avons personnalisé les calques avec des couleurs, des dégradés et des ajustements de manière non destructive, en préservant leur forme initiale et en permettant des modifications ultérieures..
Avez-vous d'autres conseils et astuces pour utiliser Velositey? Faites le nous savoir dans les commentaires!
Accentsconagua