Share
La plupart du temps, la conception Web ne concerne pas vraiment la technique de Photoshop. Il est donc toujours délicat d'écrire un tutoriel Photoshop sur le sujet. Encore aujourd'hui, je vais vous présenter un design que j'ai récemment mis au point. Nous allons passer par quelques étapes dans Photoshop et je vais essayer de vous expliquer certains des raisonnements derrière mes actions..
Vous pouvez trouver les fichiers PSD de Photoshop dans un répertoire intitulé "PSD" inclus dans le fichier ZIP que vous avez téléchargé. Vous voudrez peut-être les parcourir brièvement avant de commencer..
Tout d'abord un regard sur les dessins. J'écris un livre sur le thème WordPress intitulé Comment devenir un concepteur WordPress Rockstar. Le livre nécessitait un exemple d’exemple suivant, j’ai donc conçu celui-ci que j’appelle "Créatif"- parce que cela semble français et plutôt cool. En gros, il s'agit d'un ensemble de conceptions que nous allons intégrer dans deux thèmes WordPress - l'un est un blog classique et l'autre, un thème vous permettant d'utiliser WordPress pour créer un portefeuille..
Ce que vous voyez ci-dessous sont les quatre écrans de conception principaux que j'ai utilisés pour créer le thème. En règle générale, je crée deux écrans pour la plupart des sites Web: une page d'accueil et une page de contenu. Si un site est plus compliqué, je créerais un écran par page critique. Dans une certaine mesure, vous pouvez concevoir certaines pages lorsque vous êtes en phase de construction HTML, mais il est bon de tracer toutes les pages clés afin de vous assurer que tout a l'air correct.
Les écrans ci-dessous sont:
L'une de mes premières décisions lors de la conception d'un nouveau site consiste à choisir une palette de couleurs. Il existe de bons sites pour vous aider à choisir un bel ensemble, mais souvent, je viens avec le mien en expérimentant. Une formule simple que j’utilise parfois est de choisir un ensemble de nuances neutres et une seule couleur de surbrillance pour lever la palette. Dans ce cas, j'ai choisi une palette de couleurs beigy-grey avec un bleu clair très vif comme couleur de surbrillance.
Nous commençons le tutoriel avec un petit logo. Bien que la création de logo soit généralement un processus complexe, dans ce cas, je veux juste un petit graphique pour ancrer ma page. J'ai donc sauté tout le processus habituel et j'ai juste créé un joli petit logo / texte. Si vous êtes intéressé par la création de logo, un superbe blog sur le sujet est Logo Design Love de David Airey. Une bonne galerie de logos est bien sûr disponible sur Faveup..
Quoi qu'il en soit, j'ai choisi la police News Gothic Condensed Bold. Je pense qu’il s’agit d’une police Mac par défaut, mais je ne suis pas sûr d’installer des polices bazillion partout où je vais. J'ai utilisé un simple Style de calque (pour lequel vous pourrez voir les réglages à l’étape suivante) ce qui donne au type un aspect web2 et tendance. Il utilise un léger dégradé, une ombre subtile et une bordure de 1 px pour décoller le texte de la page..
Voici les paramètres pour le style de calque:
Ensuite, j'ai ajouté un rectangle arrondi derrière le texte. Vous pouvez créer ceci avec le Outil Rectangle Arrondi (U). Comme vous pouvez le voir dans l'image ci-dessous, j'ai également ajouté un léger dégradé à la boîte. Vous pouvez le faire en CTRL-clic le calque Box pour sélectionner ses pixels, aller à Sélectionnez> Modifier> Contrat et contracter par 1px puis dans une nouvelle couche dessinant un Gradient Radial à partir d'une version plus claire de la couleur sombre et de la décoloration en transparence.
Comme je l'ai mentionné précédemment, cette conception a un aspect un peu Web2: elle est simple et nette, elle présente des dégradés et est assez épurée. Certains créateurs restent résolument à l’écart des tendances, personnellement, cela ne me dérange pas de les utiliser tant qu’ils correspondent à mes objectifs. Dans ce cas, je voulais un look net qui ne gênait pas le contenu mais fournissait un bon emballage. Quoi qu'il en soit, tout est un peu subjectif vraiment.
Maintenant, la toile que j'utilise ici mesure environ 1100 pixels de large x 1400 pixels de haut. En réalité, tout le contenu est à moins de 1000 pixels de sorte qu'il sera visible sur un écran 1024 x 768. J'aime avoir une toile plus large pour pouvoir planifier ce qui se passe lorsque le spectateur a une résolution plus grande..
Dans cette étape, j'ai ajouté les bases de mon en-tête, à savoir une barre sombre en haut, une nuance plus foncée de la couleur d'arrière-plan en tant que barre de menu, une ligne 1px pour sceller la barre de menu et un sous-texte sous mon logo ( dans News Gothic Condensed à nouveau).
Il y a deux choses à noter:
Ici, nous ajoutons le premier bit de notre couleur de surbrillance. C'est une ligne 1px très subtile le long du sommet. Plus tard, à mesure que nous ajouterons d'autres éléments, la couleur de surbrillance réapparaîtra à différents endroits et rassemblera ces éléments pour les unifier dans un design unique et élégant. Parce que cette conception n’a pas grand-chose à part des éléments et des couleurs bien placés, il est très important que la couleur soit correcte.
La page a maintenant un aspect un peu plat. J'ai donc ajouté un calque juste au-dessus du calque d'arrière-plan. Ensuite, j'ai dessiné un dégradé radial allant de ma couleur beige / gris foncé à la transparence et défini ce calque sur Color Dodge pour éclaircir l'arrière-plan. Comme la barre de menus est en fait dessinée avec transparence, l’effet d’éclaircissement apparaît également dans la barre de menus..
Il est important de garder à l’esprit cependant que vous devez intégrer ultérieurement cette conception au format HTML. Pour cette raison, vous remarquerez que lorsque vous atteignez les bords de la zone visible 1000px, vous revenez à des couleurs monotones. Cela signifie que plus tard, je serai capable de créer une seule tranche d’image et de l’utiliser comme image de fond CSS. Ensuite, je vais avoir une autre image de fond avec la grande zone en surbrillance et ce sera une image de fond dans le corps du contenu principal.
Il est important de connaître les sites de construction pour pouvoir les concevoir de manière à éviter les complications ultérieures. Je pense que cela vient principalement de l’expérience et de l’apprentissage des décisions de conception qui peuvent rendre la vie difficile plus tard. Ici, il est beaucoup plus facile d’avoir un arrière-plan facilement reproductible en dehors de la zone visible 1000px.
Ensuite, il est temps de commencer à ajouter mon premier bloc de contenu blanc. Ici, j'ai utilisé un contour de 1px d'une version plus sombre de la couleur d'arrière-plan, puis une bordure intérieure de 1px et enfin un léger dégradé beige descendant. Ce style correspond à mon logo précédent. De plus, les contours plus sombres, suivis des contours intérieurs plus clairs, donnent un aspect très net à la page. La netteté provient du contraste - c.-à-d. Sombre à clair.
Personnellement, je pense que la netteté ou la clarté est vraiment essentielle dans la conception Web. Rien ne m'agace plus qu'un manque d'attention aux détails pour rendre les choses claires et nettes.
Maintenant, j'ajoute du contenu factice ici. Comme ce texte doit être du texte HTML, il est important de choisir vos polices avec soin. Il n’ya rien de plus déprimant que de choisir de jolies polices et de se rappeler plus tard que ce ne sont pas des polices par défaut et que, par conséquent, votre conception sera totalement différente de celle que vous avez imaginée. J'ai utilisé Helvetica pour le titre en gras et Arial pour le texte.
Dans Photoshop, il est judicieux de définir le Anti crénelage à "Tranchant" imiter l'apparence du texte dans le navigateur. Dans l'ancien temps, j'utilisais "Aucun", mais de nos jours, la plupart des PC et tous les Mac utilisent cette astuce ClearType pour rendre les polices lisses.
Encore une fois, notez que les liens de sous-texte utilisent notre bleu de surbrillance, repris sur la ligne de titre 1px que nous avons ajoutée précédemment.
Ensuite, j'ai ajouté un petit élément de design sous la forme d'une bande de message dans le coin supérieur droit de ma boîte. Dans un design simple comme celui-ci (où il s’agit principalement de lignes et de cases simples), il est agréable d’avoir un ou deux éléments qui ressortent vraiment. Dans ce cas, nous allons utiliser notre couleur de surbrillance combinée à un angle de 45 'pour créer un élément cool et élégant.
Nous dessinons donc un rectangle et ajoutons du texte par-dessus. Puis j'ai utilisé le Outil d'esquive (O) pour alléger la partie centrale et ajouter un style de calque pour donner un peu d’ombre au texte. Puis en sélectionnant les deux couches ensemble, je frappe CTRL-T transformer et tourner 45 '.
Après l'avoir placé sur ma boîte, j'ai coupé les bords comme indiqué. Maintenant, vous remarquerez que nous aurions pu le placer de manière à ce qu'il soit aligné sur la boîte, mais j'ai pensé que ce serait bien de donner l'impression que cette bande s'enroule autour de la boîte, il faut donc environ 4 pixels de la boîte..
Ensuite, j'ai sélectionné manuellement les pixels du motif que vous voyez ci-dessous, créé un calque sous le calque de la bande de message et dessiné dans une couleur bleu plus foncé. Il fait plus sombre et ressemble à l'arrière de la bande de message. Vous remarquerez que je l'ai fait pour qu'il soit plus sombre vers la droite, dans une fausse ombre..
J'ai ensuite dupliqué mon emballage, je l'ai tourné de 90 'et l'ai également placé du côté droit de la boîte, comme indiqué. Et voila, notre élément de design!
Ensuite, j'ai créé d'autres éléments. Il n'y a pas grand chose de nouveau ici. J'ai essentiellement réutilisé les mêmes éléments de conception - le même style de texte, la même bande de message, les mêmes boîtes - et les ai dessinés à l'endroit où je voudrais voir mon contenu..
Ensuite, j'ai ajouté une zone de pied de page. Ce n'est pas un pied de page très excitant, mais il utilise les mêmes couleurs que la barre du haut pour les refléter encore une fois et, dans ce cas, scelle le design..
Maintenant que je crée un thème WordPress, j'ai également décidé de créer une version de mon logo pouvant être créée avec du texte brut. Vous pouvez le voir ci-dessous et dans le composant HTML de ce tutoriel, nous allons créer ce "logo".
À ce stade, je pensais vous montrer ma palette de calques. Je ne suis pas très doué pour nommer les calques (parce que je suis paresseux) mais je crois au regroupement des calques en ensembles. Ici, le design du logo vs logo, du blog vs portefeuille et de la page interne se trouvent tous dans le même fichier PSD, mais dans des calques différents. Je peux donc les allumer et les éteindre et obtenir des arrangements différents. Ceci est utile car si je décidais soudainement de déplacer le logo de 2 pixels vers la gauche, je n’étais pas obligé d’ouvrir trois fichiers et de le déplacer de 2 pixels, sinon je risquais d’avoir des anomalies. En outre, il est juste agréable et ordonné et me fait sentir tout chaud à l'intérieur à regarder.
Je dois maintenant souligner que, dans la pratique, je n’ai pas conçu ce dessin de la manière que j’ai décrite dans le didacticiel. En fait, ma première maquette ressemblait davantage à l'image ci-dessous..
Il m'est arrivé par la suite d'éteindre la couche marron foncé et je pensais que ça avait l'air cool juste sur la couleur plus claire. C'est ce qu'on appelle un heureux accident. J'aimerais pouvoir dire que j'ai été assez intelligent pour assumer toute la gentillesse de mon travail, mais franchement, la moitié est de la pure chance.
Dans tous les cas, lorsque je suis arrivé à la fin de mon dessin, j’ai jeté un coup d’œil à cette maquette initiale et j’ai pensé que le dessin était plutôt joli avec une couleur de fond sombre. Alors pourquoi ne pas créer une version où il fait sombre, alors je peux créer une option pour changer de style, ce serait bien!
J'ai donc créé une nouvelle copie de mon fichier de dessin et changé le fond en brun foncé. Heureusement, il n’ya pas grand-chose qui doive changer, j’ai assombri le logo en noir pour le différencier, j’ai également ajusté quelques autres couleurs pour donner un sens à la conception. Ce n'est pas aussi beau que l'original, mais c'est un bel ajout à la famille.
Comme je l'ai mentionné au début de ce didacticiel, il ne s'agit pas tant de la technique de Photoshop. En réalité, la conception Web ne fait souvent appel qu’à des techniques très élémentaires de remplissage de blocs de couleur. Cette conception consiste davantage à choisir des couleurs et des nuances, des polices de caractères, puis à décider de la manière dont vous souhaitez l’agrandir. J'espère que vous avez quelque chose hors du processus.
Bien sûr, la conception d'un site dans Photoshop n'est qu'une partie d'un travail de conception de sites Web. La prochaine étape est de prendre la conception en HTML.
Accentsconagua