Share
Ce tutoriel vous guidera à travers le processus et les idées derrière la conception d'un site web professionnel avec une touche funky dans Photoshop. Le tutoriel se lit comme un roman "Choisis ta propre aventure" dans l’espoir qu’il encouragera la créativité et l’unicité de ton design avec un peu de conseils et d’instructions en cours de route. Temps de l'aventure!
Une chose que vous remarquerez au cours de ce didacticiel est la facilité avec laquelle ce site Web pourrait être transformé en un blog sur le design, une page d'accueil pour une société de logiciels ou une communauté open source. Tous les modules des barres latérale droite et gauche peuvent être échangés et déplacés facilement et le contenu est conçu pour être flexible..
Tout au long de ce didacticiel, vous verrez une grande importance accordée aux principes de conception et aux méthodes utiles de Photoshop pour améliorer votre flux de travail et la conception de sites Web. Bien que ce site ait son propre style, l'objectif principal de ce didacticiel n'est pas de reproduire exactement ce style. Nous espérons plutôt que vous obtiendrez une meilleure perspective de la conception Web dans Photoshop pouvant améliorer votre approche et accélérer votre production..
Regardez l'image que nous allons créer.
Si ce n'est pas déjà fait, passez à 960.gs et familiarisez-vous avec le système de grille 960 et pourquoi il sera si utile pour ce tutoriel. Pendant que vous y êtes, assurez-vous de télécharger le modèle.
Une fois le fichier téléchargé, décompressez-le et ouvrez «960_grid_12_col.psd», qui se trouve sous 960_download> Modèles> Photoshop. Lorsque vous ouvrez le fichier, la rapidité avec laquelle cela vous permettra de créer et de gérer une structure dans vos conceptions Web sera évidente. Prenez note des lignes de guidage, elles vous permettront de créer des objets parfaitement alignés avec la grille..
Si vous suivez les repères jusqu'à la règle, vous pouvez clairement voir les dimensions exactes en pixels de la grille - avec des colonnes de 60 pixels de large et 10 pixels de chaque côté (créant ainsi 20 pixels de chaque colonne). Si vous ne voyez pas la règle ou souhaitez vous en débarrasser, vous pouvez la basculer avec Command + R.
Les guides sont presque accablants; Une fois que vous avez commencé à concevoir, ils vous gêneront vraiment. Vous pouvez les basculer en cliquant sur Affichage> Extras ou simplement en utilisant le raccourci Commande + H.
Vous aurez besoin de plus d'espace sur votre toile pour ce tutoriel. Développez le canevas (Commande + Alt + C) à 1400 pixels par 1340 pixels. Vous pouvez tout supprimer sauf la couche d’arrière-plan. Double-cliquez sur votre calque d'arrière-plan et appuyez sur OK pour le déverrouiller. Renommez-le "BG".
Enregistrer (Command + S) ce fichier sous le nom "my_web_tut01.psd" dans son propre dossier nommé "mon Web tut". Après chaque étape de ce didacticiel, vous devez appuyer sur Command + S et, toutes les deux étapes, sur Command + Maj + S et nouvelle copie "my_web_tut02.psd", "" mon_web_tut03.psd ", etc… L'enregistrement semble une évidence pour beaucoup de concepteurs, mais j'ai constaté que cela n'empêchait pas beaucoup de professionnels de perdre leur temps.
OK, vous avez préparé le canevas. Vous devez maintenant dessiner dans l’arrière-plan et dans la partie supérieure. Faites glisser la règle du haut pour créer un nouveau guide; ramenez-le à 120px. Ce sera la limite inférieure de l'espace d'en-tête. Abaissez deux autres guides à 130px et 140px. Maintenant, il y a la même largeur d'espace entre l'en-tête et le contenu que nous avons entre les colonnes. Cela commence à ressembler à une bonne grille!
Utilisez l'outil Rectangle (U) pour dessiner un rectangle noir dans la zone d'en-tête. Cela suppose que vous avez le noir défini par défaut comme couleur de premier plan. Sinon, vous pouvez simplement appuyer sur D pour le réinitialiser. Commencez votre rectangle à l’extérieur de la toile le long du guide et terminez-le également de l’autre côté. L’extension de cet élément présente l’avantage de ne pas voir l’effet appliqué au périmètre que vous souhaitez appliquer au bord inférieur de votre rectangle, tel qu’un trait, une lueur intérieure, etc. Nommez votre rectangle "BG en-tête. "
Il est temps de commencer à bloquer votre grille. Cette conception est composée de trois colonnes de contenu - la barre latérale gauche s'étend sur trois colonnes, le contenu central / principal sur sept colonnes et la barre latérale droite sur deux colonnes..
Bien que cela fonctionne très bien pour l’en-tête de mettre des lignes directrices, le reste de la conception sera un processus plus fluide, de sorte que vous ne dessinez pas de guides horizontaux entre chaque section. Ne désespérez pas! Vous pourrez toujours obtenir un espacement parfait des pixels en appuyant sur Maj + touches fléchées pendant que l'outil Déplacement (V) est sélectionné. Chaque fois que vous faites cela, le calque sélectionné se déplacera de 10 pixels.
Vous allez créer des coins arrondis pour cette conception. Les coins arrondis font en sorte que votre contenu soit très visiblement sectionné. Retournez à l'image finale. remarquez-vous comment, dans le module "Flux Twitter", il y a beaucoup de cases dans une case avec des coins arrondis? Maintenant, considérez si les angles étaient tous tranchants - le "Twitter Feed" ne ressemblerait pas autant à un seul module.
Vous devez également prendre en compte le fait que les couleurs, les dégradés et les polices contribuent à en faire une entité définie, mais les coins arrondis sont également utiles. De plus, sachez que, du fait que les angles arrondis conviennent à cette conception, des milliers de sites magnifiques n'utilisent pas les angles arrondis. Jetez un coup d’œil à Psdtuts + - tous les coins sont tranchants; Cependant, d'autres stratégies telles que le contraste et les traits sont utilisées pour maintenir la mise en page claire. Des lectures complémentaires peuvent être trouvées ici et ici
Assez parlé de design! Sélectionnez l'outil Coins arrondis et définissez le rayon de l'angle sur 8px. Tracez un cadre en haut des colonnes de gauche et de droite. donnez-vous de l'espace pour ajouter du contenu plus tard.
Tout d’abord, créez une zone de texte dans la zone de contenu centrale / principale et complétez-la avec une ligne accrocheuse comme dans l’image finale. Utilisez la police Rockwell ou une autre dalle-serif à 40 pts avec 48 pts d’avant (Hauteur de ligne). Rockwell peut être téléchargé ici.
Ensuite, ajoutez un texte factice ci-dessous et définissez Verdana à 12 pt avec 20 pt. Ajoutez également quelques sous-en-têtes qui sont Verdana Bold à 17 pts avec 30 pts.
Maintenant que vous avez les détails, parlons de typographie. Une règle générale que vous retrouverez dans l'ensemble de la communauté des concepteurs de sites Web est qu'un site Web ne doit utiliser que deux polices. Dans cette présentation, j'ai choisi d'utiliser les polices Rockwell et Verdana. Verdana est une police Web sécurisée, tandis que Rockwell ne l’est pas. Pour cette raison, toutes les instances de Rockwell devront être des images lorsque cette conception sera convertie en XHTML / CSS..
Cela signifie deux choses pour vous. Premièrement, pour limiter le temps de chargement, vous devez envisager une utilisation minimale des polices non sécurisées pour le Web. L'image finale contient moins de dix occurrences de Rockwell, la majorité d'entre elles se superposent à un élément graphique tel qu'un bouton qui sera déjà une image lors du codage. Deuxièmement, vous pouvez ajouter des effets tels que des ombres portées et des dégradés au texte. Ces deux raisons se combinent à l'inclusion de Rockwell, qui convient le mieux aux éléments traditionnellement plus décorés d'un dessin, tels que les en-têtes, les titres et les boutons..
Il existe une dernière considération qui peut ou non s’appliquer à votre conception et qui tient compte de tout travail futur d’optimisation de moteur de recherche (SEO). Tous les textes basés sur des images - toutes les instances de Rockwell pour cette conception Web - ne sont pas explorés et analysés par les robots Google. Cela signifie que vous devrez concevoir de manière à ce qu'il y ait beaucoup de polices Web sécurisées où les mots clés peuvent être récupérés par Google..
Le point suivant sur la typographie, et la conception Web en général, est consistance, consistance, consistance! Si vous utilisez Rockwell pour un bouton, utilisez-le pour tous les boutons! Si vous faites des liens en rose, rendez tous les liens en rose! Être cohérent permettra à votre conception de paraître nette et cohérente.
Enfin, un mot sur la convivialité et la typographie. Votre copie a besoin d'espace pour respirer, donnez-lui une hauteur de ligne décente et vous remarquerez un monde de différences. Le site ilovetypography.com suggère que la hauteur de votre ligne soit au moins égale à 140% de la taille de votre police. En outre, vous devez savoir qu'une zone de texte d'une largeur supérieure à 600 px est une contrainte pour les yeux, mais si vous voulez agrandir, il serait judicieux d'augmenter proportionnellement la hauteur de la ligne. Il y a toujours plus à apprendre sur la typographie - voici un bon début.
Le noir et blanc est ennuyeux, il est temps de colorer! Les couleurs de cette conception ont été inspirées par le thème Hash One Wordpress
Je pourrais vous montrer comment créer un nuancier personnalisé à charger avec les couleurs de votre site, mais je ne l'utilise pas moi-même. Au lieu de cela, à l'aide de l'outil Rectangle, vous pouvez simplement dessiner une grille de grands carrés dans les marges de votre toile et les remplir avec les couleurs que vous utiliserez. Je trouve cette méthode plus rapide et plus accessible.
Les couleurs choisies offrent un bon contraste pour donner de la profondeur au site. N'hésitez pas à utiliser la combinaison de votre choix, mais tenez compte du contraste, de la lisibilité et des harmonies lors du choix de vos couleurs. Si vous rencontrez des problèmes avec vos couleurs, essayez d’utiliser le Color Scheme Designer..
Les couleurs de ce tutoriel sont (de gauche à droite, de haut en bas):
Ajoutez tous ces rectangles à un dossier et nommez-le "ÉCHECS". L'utilisation de toutes les majuscules pour les noms de dossier facilite la recherche de couches de dossiers lorsque celles-ci commencent à être confuses. Ce serait également le bon moment pour commencer vos dossiers "EN-TÊTE", "BARRE LATÉRALE GAUCHE", "CONTENU PRINCIPAL" et "BARRE LATÉRALE DROITE". Une autre bonne pratique à prendre est de colorer vos calques pour améliorer votre flux de travail. Il vous suffit de cliquer avec le bouton droit sur l'icône en forme d'œil à côté de chaque couche pour sélectionner une couleur..
Les dégradés peuvent vraiment améliorer votre conception. Cependant, si vous ne faites pas attention, les dégradés peuvent vraiment désactiver votre conception. Voici ma suggestion: devenez fou avec vos dégradés, rendez-les simplement très subtils.
Double-cliquez sur le calque "Header BG" et sélectionnez l'option Gradient Overlay. Cliquez sur le dégradé qui s'ouvre pour ouvrir l'éditeur de dégradé. Supprimez tous les échantillons sauf les deux premiers - avant-plan vers arrière-plan et avant-plan vers transparent. Créez maintenant un dégradé du gris le plus foncé au gris du milieu et appuyez sur nouveau pour l'ajouter aux préréglages. Répétez cette opération jusqu'à ce que vous ayez huit nouveaux gradients: quatre points noirs à médiums et quatre niveaux médiums à foncés. Cliquez sur Enregistrer pour les enregistrer dans un nouveau dossier appelé "Actifs". Ensuite, placez-le dans le dossier racine de ce projet. Maintenant, chaque fois que vous revenez à ce projet ou vous aurez tous les gradients là.
Pour votre calque "Headers BG", utilisez le dégradé moyen à clair des nuances gris foncé..
Pour votre dégradé sur le calque "BG", vous souhaiterez créer un dégradé un peu plus complexe. Il y aura en fait deux gradients dans le dégradé "BG". Quand viendra le temps de coder, ce seront des fichiers d’image séparés, mais pour nous, il nous suffit de créer un dégradé complexe..
Remarquez comment il y a une petite partie du dégradé qui sera de la même couleur? Ce sera la couleur de fond de votre fichier HTML et permettra à la page Web de se développer, mais le dégradé en haut reste en haut et le dégradé en bas reste en bas.
Photoshop est un programme extraordinaire, mais si je découvre que vous créez des logos dans Photoshop, je vais vous en informer. Les logos doivent être créés dans un programme vectoriel - pour ce tutoriel, nous utiliserons Illustrator.
Ouvrez un nouveau fichier dans Illustrator et créez votre logo (Remarque: dans les projets réels, vous ne devriez jamais commencer la conception de votre site Web avant d'avoir un logo). Bien que le logo dans cet exemple utilise Rockwell, le fait d’avoir une troisième police pour votre logo n’est pas un problème. Enregistrez votre logo dans le dossier "Assets" où vous avez placé le fichier dégradé..
Une fois que vous avez ce logo, nous devons le ramener dans Photoshop pour le styler. Il vous suffit de placer Illustrator et Photoshop l'un à côté de l'autre et de faire glisser les éléments de votre logo vers Photoshop. Étant donné que chaque pièce aura un style unique, les faire glisser individuellement plutôt que dans son ensemble vous aidera à commencer à styler..
Pour aligner les différentes pièces, créez une version du logo complet, diminuez le niveau de transparence et utilisez-le comme guide de correspondance. Supprimez-le lorsque vous avez terminé. Tout en maintenant la touche Maj enfoncée, cliquez sur toutes les couches du logo et appuyez sur Commande + G pour les regrouper dans un nouveau dossier. Renommez ce dossier "LOGO" et placez-le dans le dossier "HEADERS"..
Chaque pièce se transformera automatiquement en objet intelligent. Cela signifie qu'ils continueront à agir comme un objet vectoriel, comme dans Illustrator. Vous pouvez utiliser l'outil de transformation (Command + T) librement sans perte de qualité..
Une fois que vous avez dimensionné et placé votre logo, vous devrez le personnaliser. Utilisez les dégradés que vous avez créés précédemment pour donner une certaine profondeur au logo - mélangez les couleurs, mais conservez la couleur plus foncée des dégradés en bas pour les deux mots..
Ajoutez ensuite une ombre portée à l'une des pièces. Réglez le mode de fusion sur Multiplier sur 100%. Assurez-vous que l'option Utiliser Global Light est sélectionnée et définissez-la sur 120 degrés, avec une distance de 1 px, un écart de 0% et une taille de 1 px. En activant Global Light, vous définissez tous les effets avec des ombres au même degré - rappelez-vous la cohérence, la cohérence, la cohérence!
J'ai lu beaucoup de choses sur la manière de copier et coller le style d'un calque. Bien que ce soit une bonne méthode pour les calques très éloignés les uns des autres, voici quelques moyens rapides de déplacer et de dupliquer des effets. Tout comme lorsque vous souhaitez multiplier un calque sur le canevas et dans la palette des calques en maintenant la touche Alt enfoncée et en faisant glisser une nouvelle copie de ce calque, vous pouvez dupliquer des effets avec la même méthode..
Alt-glisser sur le fx symbole dans le calque source du nouveau calque et vous remplacerez le nouveau calque par tous les effets du premier calque. Si vous souhaitez uniquement dupliquer l’ombre portée, au lieu de la fx symbole, puis maintenez la touche Alt enfoncée et faites glisser l’effet individuel vers un nouveau calque. Vous ne pourrez remplacer que cet effet ou l’ajouter si le nouveau calque ne l’a pas activé. Utilisez cette méthode pour vous assurer que toutes les couches du logo ont la même ombre portée.
Sélectionnez le calque "Header BG". Ouvrez les effets et ajoutez une bordure noire de 1 px avec la position définie sur Inside. Ensuite, donnez-lui une lueur extérieure qui a le mode de fusion: Multiplier, Opacité à 40%, Couleur du noir et Taille de 9px.
Retournez dans Illustrator et créez des formes intéressantes et créatives qui serviront de fond clair pour la zone d'en-tête. Coloriez les formes en blanc, faites-les glisser vers Photoshop, définissez leur mode de fusion sur Écran et leur opacité dans des proportions allant de 2 à 10%. Jetez un autre regard sur l'image finale, vous remarquerez qu'il y a beaucoup de cercles et de traits de cercles utilisés, ceux-ci ont tous été créés dans Photoshop. Illustrator est plus rapide pour les formes plus complexes, mais pour les cercles, vous gagnerez du temps en les créant simplement dans Photoshop..
Nous allons maintenant créer un cercle avec uniquement le trait blanc dans Photoshop. Créez un cercle noir avec l'outil Ellipse, puis ouvrez les effets de ce calque et donnez-lui un trait blanc. Fermez les effets et réglez ensuite le mode de fusion sur Écran. Vous verrez tout sauf le trait blanc qui disparaîtra. Le principal avantage de cette option est la possibilité de modifier la largeur du trait en ouvrant simplement les effets et en le modifiant..
Passez du temps à vous amuser avec cela, à expérimenter avec différentes opacités et compositions - créez des formes originales qui peuvent vous aider à personnaliser ce design. Ne vous inquiétez pas si certaines de vos formes sont visibles sous l'en-tête, nous nous en occuperons à l'étape suivante..
Sélectionnez toutes les formes et mettez-les dans un dossier au-dessus du calque "Header BG". Tout en maintenant la touche Commande enfoncée, cliquez sur le masque vectoriel (la zone grise) de "Header BG" pour afficher l'intégralité de l'en-tête sélectionné sur la grille. Maintenant, sélectionnez le dossier que vous venez de créer et cliquez sur le petit bouton en bas de la fenêtre des calques intitulé "Ajouter un masque de calque"
Le masquage est quelque chose que je ne vois vraiment pas assez dans ma pratique professionnelle, il est très utile et rapide, et le meilleur, c'est qu'il s'agit d'une méthode non destructive. Considérez que vous auriez pu simplement aplatir les formes en un seul calque et supprimer la zone qui ressortait. Mais vous vouliez ensuite changer une partie de la composition ou le trait sur l’un des cercles - le masquage permet de revenir en arrière et d’apporter des modifications plus rapidement.
Sous l'en-tête, vous remarquerez des graphiques ressemblant à des collines ondulées. En utilisant les couleurs de votre nuance et en jouant avec la transparence, vous pouvez obtenir ce look. Finalement, ceux-ci devront être peaufinés pour créer des carreaux horizontaux.
Examinons une seconde ces éléments et le reste des éléments non fonctionnels de la conception. Il y a une quantité décente de graphismes quelque peu aléatoires. Quelle est la contribution de ceux-ci à la conception? Premièrement, les graphiques comme celui-ci sont un excellent moyen de diriger la sensation et l'ambiance d'un site Web, un excellent moyen d'aider une marque à se propager.
Bien que je ne possède pas l'expertise nécessaire pour expliquer la stratégie de marque, je vais essayer de vous donner un bref aperçu afin que vous puissiez tout mettre en perspective. Une marque, c’est tout ce qui touche une entreprise qu’un consommateur ressent: émotions, souvenirs, sons, couleurs, expériences, etc. Marty Neumeier, dans son livre The Brand Gap, explique très clairement que "Une marque n’est pas ce que vous dites. ce qu'ils disent c'est. " Alors, qu'est-ce que tout cela a à voir avec les graphiques? Bien que vous ne puissiez pas construire une marque, vous pouvez l'aider à se développer dans l'esprit du client en fournissant en permanence des images qui évoquent l'essence de votre entreprise..
OK, jetez un coup d'œil à l'image finale, que vous dit-elle à propos de cette société? Mon objectif était de faire en sorte que les couleurs et les formes traduisent un sentiment d'amusement et d'amusement, mais la structure et la disposition stricte de la grille donnent un sens de professionnalisme et de sérieux. Est-ce la marque exacte que chaque entreprise vise à construire? Certainement pas, chaque entreprise doit être unique et chaque site Web dégage une aura différenciée..
Cachez tout sauf la couche "BG". Le fond de cette conception est encadré par un grand rectangle arrondi. Cela ajoute un peu plus de structure et de profondeur à votre conception. Etant donné que vous ne donnerez pas au contenu principal son propre bloc comme les barres latérales, il s'agit d'une bonne approche pour éliminer les graphiques d'arrière-plan et améliorer la lisibilité. Le rectangle arrondi blanc a un rayon de 8 px, le même que celui des cases - un autre détail de cohérence. Vous trouverez plus de détails sur les effets dans l'image ci-dessous.
En utilisant la même méthode qu'avec l'en-tête, importez quelques formes d'Illustrator et déplacez-les pour créer de petits graphiques. Au fur et à mesure que vous continuez à concevoir, vous vous retrouverez probablement en train de bouger avec eux pour trouver une composition qui fonctionne bien. Mélangez vos nuances de couleurs sombres et de transparence.
Vous remarquerez peut-être que l'icône du logo est beaucoup utilisée, une sorte de rappel subliminal. À l'université, un professeur de cinéma m'a appris qu'une image, une couleur, etc. devaient être répétées au moins trois fois dans un film pour qu'un utilisateur s'en souvienne et en tire un sens. J'essaie d'utiliser ce principe avec mon dessin: le logo a été répété de nombreuses fois (avec goût et dans des limites raisonnables) dans l'espoir que l'utilisateur se familiarisera avec l'entreprise et se souviendra de l'icône..
La navigation de cette conception est fortement influencée par mon site actuel préféré - aviary.com.
Le petit graphique de la maison et le mot Accueil sont un peu plus brillants et il y a un fond gris plus clair derrière - cela est pour améliorer la convivialité. Pensez comme l'utilisateur! Dites-leur facilement sur quelle page ils se trouvent. Les onglets, les couleurs, les soulignements, les surbrillances et les graphiques supplémentaires sont des moyens courants de le faire. Pensez à ces options et soyez créatif avec votre approche.
Pour les liens et les boutons, un état de survol constitue une amélioration considérable pour votre facilité d'utilisation. Revenez à l'image finale et examinez certains des liens. Une conception bien pensée tiendra compte de leur apparence et de leur fonctionnement. Si vous ne codez pas vos propres sites, utilisez une petite image d'un curseur de lien pour indiquer aux programmeurs ce qui se passe. Les fonctions cachées telles qu'un menu déroulant (illustré ci-dessous) doivent être prises en compte et entièrement conçues. Attendre de trouver votre beau design est associé à un menu déroulant hideux qui vous rendra fou. Si vous êtes le concepteur, c'est à vous de considérer toutes ces choses.
L’image de curseur de lien peut être trouvée sous forme de fichier PNG avec quelques ressources de conception gratuites ici.
Avez-vous remarqué que NOUVEAU! badge? Je viens de briser une de mes premières règles! Eh bien, nous allons faire une petite exception pour les polices de pixels! Les polices pixel n'ont pas d'anti-aliasing, ce qui les rend très nettes. Cette précision peut souvent être disgracieuse pour une police de taille normale, mais les polices de pixels fonctionnent à merveille dans les petites tailles. Regardez comment Verdana et Georgia sont illisibles à 8 points par rapport aux polices de pixels, une grande différence, oui?
Les polices pixel sont populaires dans Flash, elles se chargent plus rapidement et gardent cette netteté, mais elles fonctionnent aussi bien dans la conception Web! OK, alors maintenant que vous connaissez les joies des polices de pixels, veillez à les utiliser avec parcimonie. Pour des applications comme celle-ci, petite NOUVEAU! badge cela fonctionne très bien, mais dans la plupart des cas, vous ne devriez pas les utiliser pour de nombreuses autres applications - personne ne veut lire plus que quelques mots dans une police de pixels. La police utilisée dans cet exemple s'appelle Uni 5063 et peut être téléchargée gratuitement à partir de Miniml.
Maintenant, examinez les coins arrondis du menu déroulant. Le fond blanc est en fait constitué de trois rectangles à coins arrondis. Le troisième a été retourné avec l’outil de sélection directe pour créer un coin intérieur arrondi.
Tournez les barres latérales en blanc et créez des guides donnant à chacune de vos barres latérales un remplissage de dix pixels. Ajoutez tout le texte factice que vous allez utiliser et dupliquez les barres latérales si nécessaire. Pour les étendre ou les réduire verticalement, utilisez l’Outil de sélection directe pour sélectionner les quatre points d’ancrage inférieurs et déplacez-les vers le haut ou le bas avec le clavier. La prochaine étape est d’affiner le style de tout le texte.
Tout le texte a été organisé dans une hiérarchie d'importance et de centre d'intérêt, ce qui est signalé par le style de ce texte. La taille de police la plus grande et la couleur la plus sombre (lire: contraste le plus élevé) sont réservées au titre du contenu principal. Le sous-titre est plus gros et plus foncé que le corps principal et le corps principal est plus grand que le contenu de la barre latérale, etc. Sachez que toutes les couleurs sont tirées des échantillons - consistance, consistance, consistance!
Maintenant que vous avez organisé toutes les zones de la barre latérale et que le texte est correctement coloré, vous pouvez commencer à les styler. Donner à chacun entrée dégradé d’arrière-plan très clair et utilisez l’outil Ligne pour tracer une ligne horizontale en haut du dégradé. Ceux-ci sépareront visuellement chaque entrée. Donne une légère ombre au cadre de la barre latérale.
Pour l’arrière-plan de la zone de titre des sections de la barre latérale, tracez un rectangle sous les autres styles / formes et ajoutez une superposition de dégradé de roses et un trait de 1px contenant un dégradé de rose à blanc réfléchi horizontalement. Ensuite, donnez au calque d'arrière-plan un masque de calque ayant la forme du cadre de la barre latérale..
Répétez ces étapes pour toutes les zones de la barre latérale de votre conception. Si vous souhaitez créer la boîte d’inscription à la newsletter, laissez de la place pour elle et nous la couvrirons dans les prochaines étapes..
Pour créer ce petit graphique au bas de chaque zone de la barre latérale, cela sera beaucoup plus rapide si vous travaillez un peu plus avec Illustrator. Illustrator est souvent configuré pour être en mode couleur CMYK; Cependant, étant donné que vous concevez pour l'écran, le mode couleur devra être changé en RVB. Basculez sur Illustrator et sélectionnez Fichier> Mode de couleur du document> Couleur RVB. Ensuite, vous devrez dessiner votre graphique de pied de page souhaité.
Revenez maintenant à Photoshop, sélectionnez les trois échantillons du milieu gris foncé, rose et cyan - faites-les glisser vers Illustrator. Utilisez l'outil Pipette (I) d'Illustrator pour colorier le graphique à votre guise. Faites glisser le graphique dans Photoshop, redimensionnez-le et placez-le en conséquence. Vous pouvez aussi ajouter des effets, comme pour une ombre portée légère et une superposition de dégradé subtile (noir sur blanc, avec un mode de fusion multiplié et une opacité de 10%).
L’avantage de cette procédure est d’avoir un objet intelligent déjà coloré. Si vous deviez faire glisser cela dans Photoshop et tenter de colorer les éléments individuels, le processus serait plus long et nécessiterait de pixelliser l'objet dynamique et de créer plusieurs calques..
Je ne vais pas devenir trop fou dans les idées derrière les graphismes et la stratégie de marque comme avant, mais je voudrais aborder quelques graphismes de premier plan sur le site. L'image finale contient un certain nombre de graphiques similaires à celui de l'étape 18, mais ils sont un peu plus complexes. Une fois que vous avez dessiné les formes de votre graphique, ouvrez les effets et ajoutez une superposition de dégradé..
Vous pouvez voir comment les couleurs sont arrangées dans le dégradé pour donner l’apparence d’une division nette entre les nuances plus claires et les nuances plus sombres. N'oubliez pas qu'il existe plusieurs moyens d'y parvenir, notamment en utilisant des rectangles blancs et des masques de calque..
Ces graphiques sont parfaits pour inclure et personnaliser des icônes. Comme le point d'interrogation dans la section du corps principal Le saviez-vous… n'importe quelle icône ou symbole pourrait y être placé. Les exemples ci-dessous utilisent des icônes du pack gratuit Simplicio et de nombreux autres packs d'icônes gratuits sont disponibles à Icon Pot.
Étonnamment, l’un des aspects les plus difficiles de la conception Web est la création de boutons personnalisés. Ces boutons suivent ce que l’on a surnommé "Web 2.0 Design" par la communauté des concepteurs de sites Web..
Tout d’abord, examinons certains des boutons de l’image finale. Pour des raisons de cohérence, le texte de chaque bouton est en gras Rockwell, à l'exception du bouton de connexion en raison de sa petite taille. Rockwell ne fonctionne pas bien avec de si petites t
Accentsconagua