7 conseils Photoshop pour la conception de sites Web propres et modernes
Un design web propre, élégant et beau est souvent une question de perspective personnelle. Je regarde des centaines de sites Web chaque semaine, et plusieurs d'entre eux se distinguent, mais tous ne sont pas nécessairement efficaces.
Trop souvent, les concepteurs font trop souvent appel à un concept, produisant un design final qui n’est rien d’autre que du texte et une grille. Bien que ces designs minimes aient un attrait esthétique, en particulier lorsqu'ils sont associés à une excellente typographie, ils risquent de ne pas être signalés.
Les opinions personnelles mises à part, il y a certaines caractéristiques d'un design qui lui permettent d'être fièrement étiqueté comme propre ou moderne et d'améliorer sa convivialité et sa similarité à un niveau universel. La simplicité n'est pas une tendance de conception, mais plutôt un attribut de bon design.
Photoshop nous offre un ensemble d'outils polyvalents pour créer de la profondeur et de l'intérêt, et nous invite à intégrer des détails subtils là où nous laisserions un espace vide. Vous n'avez besoin que de quelques outils pour infuser les qualités du design moderne dans une mise en page. En les maîtrisant, vous pouvez créer des conceptions propres qui expriment les fonctionnalités de manière claire et efficace.
1. espace
L'espace blanc permet de séparer visuellement les éléments de conception sans utiliser de boîtes, de lignes ou de graphiques supplémentaires et constitue peut-être l'aspect le plus important du design moderne. Il est essentiel à la présentation du contenu et à la lisibilité. Utilisé correctement, l'espace blanc donne à votre mise en page son aspect propre et élégant.
Des guides et des grilles sont disponibles dans Photoshop pour vous aider à positionner les éléments avec précision. La grille recouvre l'intégralité de votre document alors que les guides peuvent être définis manuellement. Utilisez les directives plus tôt pour définir les bordures, les marges et le remplissage invisibles utilisés pour définir votre espace blanc.
Créez un guide en appuyant sur Ctrl + R (Win) ou Cmd + R (Mac) pour activer la règle, puis cliquez sur la règle du haut ou de la gauche pour faire glisser un repère vers la position souhaitée. Voici quelques raccourcis supplémentaires pour vous aider à gérer les guides pendant que vous travaillez:
- Pour déplacer un repère: Ctrl (Win) ou Cmd (Mac) et cliquez sur le guide
- Afficher / Masquer les guides: Appuyez sur Ctrl +; (Win) ou Cmd +; (Mac)
- Afficher / Masquer la grille: Appuyez sur Ctrl + '(Win) ou Cmd +' (Mac)
Activez vos guides intelligents sous Affichage> Afficher> Guides intelligents . Les repères intelligents apparaissent automatiquement lorsque vous dessinez une forme, alignez du texte ou créez une sélection ou une diapositive et vous évitez de définir des directives pour ces éléments à l'avance.
L'alignement des objets à l'aide de guides et de grilles facilite la digestion de votre dessin et donnera au résultat global un aspect plus soigné.
2. profondeur
La profondeur créée avec la lumière et les ombres rend vos éléments plus nets et réels. Les effets d'ombre peuvent être appliqués à n'importe quel objet, sélection ou calque de texte, mais l'astuce consiste à choisir une couleur correspondant à l'arrière-plan et à renoncer au noir par défaut.
Toutes les ombres ne doivent pas être sombres. Combinez l'effet Inner Shadow (Ombre intérieure) avec une ombre portée blanche ou de couleur claire pour créer une impression en creux ou «typographique» avec des champs de texte ou de formulaire.
3. détail
L'outil Dégradé et les effets de calque dégradé jouent tous deux un rôle important dans un design épuré et moderne. Les dégradés sont présents dans tous les aspects du style moderne, des ombres et des reflets aux arrière-plans et aux boutons.
Pour accéder à l'outil dégradé, appuyez sur Maj + G. Pour créer un dégradé, cliquez sur le canevas, faites-le glisser et relâchez-le. Cet outil est le mieux utilisé pour les grandes zones telles que les arrière-plans, les lumières ou les ombres radiales. Lorsque vous travaillez avec des éléments individuels tels que des sections, des boutons ou des icônes, l'effet de calque de dégradé est un moyen plus efficace d'établir des styles de surface ou des textures. Cet outil est accessible en double-cliquant sur le calque d'élément et en sélectionnant la case à cocher "Gradient Overlay".
Utilisez cet effet pour donner une dimension subtile à vos boutons et à vos barres de navigation ou pour imiter le style et la texture du papier ou des métaux.
4. Définition
En sur-définissant les bords et les bordures, vous vous assurez que vos éléments ont un contraste approprié.
L'effet de calque de contour mettra en évidence des éléments tels que du texte ou des boutons, pour lesquels vous avez besoin d'un contour pondéré de manière égale sur tous les côtés. Utiliser cet effet libérera les ombres intérieures et les ombres portées pour étendre vos options.
Il est tentant d'utiliser l'outil Plume pour dessiner des lignes droites et des règles horizontales, mais si vous souhaitez appliquer des dégradés ou des ombres à la ligne, il est plus simple d'utiliser l'outil de sélection simple rangée derrière l'outil Rectangle de sélection. . Utilisez l'outil Ligne unique sur un nouveau calque et une ombre portée blanche ou de couleur claire pour créer des lignes de surbrillance le long des bordures de section ou des séparateurs où vous ne pouvez pas appliquer un effet à l'élément lui-même.
5. Intérêt
Propre et moderne n'a pas besoin d'égaler, blanc ou minimal. Une utilisation intelligente de la texture et du motif fera ressortir votre design tout en communiquant le style et la marque. Utilisez des techniques subtiles telles que l'ajout de bruit (Filtre> Ajouter du bruit) ou l'effet de calque de superposition de texture sur les zones d'arrière-plan ou les éléments d'interface pour les différencier. Plus un élément apparaît réel et clair, plus il est attrayant pour le spectateur.
6. Perspective
La perspective est la technique la plus sous-utilisée dans la conception Web moderne simplement parce que les tendances en cours se concentrent systématiquement sur la symétrie et les grilles. En appliquant la perspective aux images et aux éléments de votre conception, vous pouvez introduire la profondeur, la dimension, le modernisme et l’intérêt dans votre conception en une seule étape.
La perspective peut être donnée à n'importe quelle forme ou image en choisissant l'option "Chemin de transformation gratuit" dans le menu contextuel et en cliquant sur le bouton "Warp" situé dans la barre d'options de l'outil.
L'illusion de la perspective peut également être produite en créant des formes ou des cadres asymétriques et en utilisant des dégradés et des ombres de manière appropriée pour séparer les objets.
7. lisibilité
Un type fort est très apprécié dans la communauté du design et un composant encore plus puissant du design propre. Il peut remplacer les images et les graphiques qui, autrement, pourraient compliquer une conception et transmettre l’essence totale des techniques ci-dessus de manière simple et directe.
Pour ajouter des textures au texte, convertissez d'abord votre calque de texte en objet dynamique en cliquant avec le bouton droit de la souris et en choisissant «Convertir en objet dynamique». Vous êtes limité aux effets de calque par défaut. même en concevant pour l'écran. La conversion en objets dynamiques vous permet d'appliquer des filtres et d'autres techniques au texte tout en préservant vos capacités d'édition au cas où vous auriez besoin de modifier le texte.
N'oubliez pas que vous disposez d'options de suivi et de crénage lors de la configuration des éléments de texte. Même si votre texte est destiné à être reproduit en CSS, vous devriez expérimenter dès le début l’espacement des lignes et des lettres pour mieux voir comment votre contenu apparaîtra dans l’espace que vous lui avez donné. N'oubliez pas non plus d'utiliser le texte "Crisp" ou "Sharp" pour conserver la définition et la clarté.
La façon dont vous présentez votre contenu dans un design épuré est plus importante que tout autre style simplement parce qu’il ya moins de choses à faire visuellement pour distraire le spectateur. En utilisant les astuces ci-dessus pour espacer correctement le texte et les objets, ajouter une définition et un intérêt et définir le contenu en dehors de l'interface, votre conception atteindra une efficacité optimale.
Que pensez-vous de ces conseils et avez-vous d'autres personnes que vous utilisez régulièrement? S'il vous plaît partager ci-dessous ...