Share
Dans ce didacticiel, nous allons créer une conception Web haut de gamme utilisant une police fine et nette, de superbes images d’arrière-plan et une utilisation intelligente de l’espace et de la mise en page. Vous pouvez facilement utiliser cette technique pour créer vos propres dessins uniques..
Ensuite, lorsque vous aurez terminé la lecture de ce didacticiel, vous pourrez accéder à notre site soeur, NETTUTS, et suivre la construction du projet au format HTML propre et simple. OK faisons du rock'n'roll!
C'est un design assez élégant, qui conviendrait probablement à un site de type portfolio de concepteur, mais qui pourrait en réalité être modifié pour toutes sortes d'usages. Elle repose sur une typographie élégante, une mise en page structurée et un arrière-plan visuellement intéressant..
Le vrai pouvoir de cette conception est de vous montrer ce qui peut être accompli en restant simple. À la fin de cette partie du didacticiel Photoshop, je vais vous montrer comment échanger facilement des arrière-plans et des polices et expliquer Pourquoi cette conception fonctionne bien.
C'est une structure simple: menu horizontal, panneau d'en-tête principal et zone de contenu. Bien qu'il s'agisse d'une conception de page d'accueil, vous pouvez imaginer qu'une page intérieure aurait simplement un panneau de titre différent et une nouvelle zone de contenu. Par souci de simplicité, nous ne ferons que la conception de la page d'accueil.
Tout d'abord, créez un nouveau document. Le mien est 1100px large x 1100px haut. C’est pour que je puisse créer un site Web d’une largeur de 1024 pixels, tout en gardant un espace pour décider de ce qui va se passer en dehors de la zone visible, afin qu’elle se dégrade bien, même sur des écrans plus grands..
Notre première tâche consiste maintenant à créer un joli fond abstrait. Pour ce faire, nous allons dessiner un dégradé linéaire en utilisant ces deux couleurs: # 1b204c à # 472373.
Nous souhaitons maintenant un arrière-plan visuellement intéressant, suffisamment abstrait pour ne pas détourner l'attention du texte. Heureusement, il existe une superbe image d'aquarelle disponible gratuitement via Arsenal de GoMedia, cliquez sur la section billet de faveur et vous trouverez deux aquarelles; celui que nous voulons est le verdâtre.
Maintenant, bien que ce soit très agréable tel quel, il fait beaucoup plus frais si on appuie sur CTRL + I et qu'on l'inverse pour que ce soit aussi joli rose / violet sur noir.
Maintenant, copiez l'aquarelle sur notre toile principale et appuyez sur Ctrl + T pour la transformer en une taille raisonnable. Notre objectif ici est de le rendre fondu au noir sur la droite (afin de pouvoir créer notre code HTML plus facilement ultérieurement). De plus, nous ne le voulons pas trop verticalement non plus, il est donc préférable d'effacer un peu l'excès. Pour ce faire, prenez un pinceau et peignez en noir pour enlever les parties inférieures..
Notez qu'il est préférable d'obtenir un pinceau avec une texture, il n'est donc pas évident d'effacer des parties. Si vous faites défiler votre liste de pinceaux, un pinceau fourni avec Photoshop ressemble à celui présenté. Ce n'est pas une mauvaise brosse à utiliser. Bien sûr, vous pouvez avoir des pinceaux encore plus agréables et vous pouvez les utiliser.
Lorsque vous avez terminé, remplissez les zones à droite et en bas en noir afin que toute la toile soit recouverte par ce calque..
Baissez maintenant l'opacité du calque d'aquarelle à environ 70% et réglez son mode de fusion sur Superposition. De cette façon, une partie de la coloration passe pour créer un look plus agréable.
Maintenant, dans un nouveau calque au-dessus du calque d'aquarelle et en tirant vers le haut, créez un dégradé linéaire allant du noir au transparent afin que votre toile passe ensuite au noir en fondu..
Ensuite, dans deux nouvelles couches, tracez deux dégradés radiaux du blanc au transparent, l’un plus grand que l’autre. Réglez-les sur Superposition et Opacités 40% et 100% pour les plus grandes et les plus petites respectivement.
En gros, vous devriez mettre en valeur notre image pour lui donner un peu plus de texture..
Alors voici le fond fini. C'est sombre, abstrait et assez élégant avec la coloration. Bien sûr, le rose n’est généralement pas votre choix de couleur. Si tel est le cas, vous pouvez ajouter un calque de réglage de la couleur et l’utiliser pour ajuster la couleur. J'aime un peu le rose / violet, alors je vais courir avec!
Maintenant, nous créons un nouveau calque et ajoutons un "logo". Je n'ai pas vraiment de but avec ce design, alors j'ai décidé de simplement insérer du texte et de prétendre que c'est mon logo. Parce que ce tutoriel est à moitié Psdtuts + puis à moitié NETTUTS, j'ai écrit un joli petit "psd vs net".
Les polices que j'utilise ici sont Egyptian505 BT Bold et Egyptian505 LT BT Light (la version plus légère de la police est celle que j'ai utilisée pour le 'vs').
Pour que le bit 'vs' se soulève un peu, vous pouvez utiliser le contrôle de ligne de base dans la Palette de caractères (montré dans la deuxième image ci-dessous)..
Enfin, j'ai également ajouté un petit style de calque au texte avec une faible superposition de dégradé comme indiqué et une lueur interne de 1 pixel avec blanc.
À ce stade, j’ai allumé mes règles (Ctrl + R) et dessiné quelques guides. J'ai divisé ma page en trois colonnes avec des lignes à 50px, 320px, 610px, 900px. Au moins, ce sont les chiffres que j'aurais dû utiliser. En regardant ma capture d'écran, je viens de me rendre compte que ma troisième ligne est éteinte…!
Quoi qu'il en soit, le fait est que je définisse l'espace dans lequel je placerai tous les éléments, et si je devais créer plusieurs pages, je pourrais utiliser cette grille de différentes manières. En l’état, seule la page d’accueil étant conçue, je vais simplement utiliser ces trois colonnes une fois, un peu plus tard..
OK, alors maintenant nous dessinons dans notre première boîte noire. Avec vos règles et vos guides encore en place, créez un nouveau calque et tracez un rectangle de sélection (M) allant d’un côté à l’autre. Remplissez-le de noir, puis définissez ce calque sur une opacité de 80%, cliquez dessus avec le bouton droit de la souris et choisissez Options de fusion. Cliquez ensuite sur Trait et ajoutez un trait blanc de 1 px sur l'extérieur et réglez sur Superposition. Cela nous donnera une bordure vraiment cool qui rendra la boîte beaucoup plus nette.
À présent, dupliquez le calque de la boîte et, en utilisant Ctrl + T, transformez la boîte afin qu’elle ait la même largeur mais beaucoup plus courte (comme indiqué ci-dessous). Ce sera notre boîte de navigation.
Changez l'opacité à 40% et le remplissage à 50%. Cela rendra notre boîte beaucoup plus claire et donnera plus de profondeur aux deux boîtes, ce qui en fera paraître l’une plus importante et plus imposante que l’autre..
Ce type de contraste entre les deux boîtes est un excellent moyen de définir une priorité visuelle entre les éléments. Lorsque l'utilisateur vient sur la page, nous souhaitons qu'il voit d'abord notre gros message, puis la barre de navigation. En le faisant disparaître, nous disons à l'utilisateur que le moins important doit être regardé en deuxième.
OK, maintenant nous ajoutons du texte. Encore une fois, j'ai utilisé Egyptian Light ici pour la copie de gros titre (ce qui sera une image dans le code HTML final) et Arial pour les éléments de menu (qui seront des liens de texte HTML)..
Maintenant, un mot sur la typographie. Cette conception repose largement sur le fait que nous avons utilisé une police de caractères simple et propre. Avoir le texte beau et large le fait paraître très gras, mais en même temps, parce que c'est une police de caractères très mince, il en ressort élégant..
Si vous recherchez un look haut de gamme, il est difficile de faire mieux que les caractères minces et classiques. Quand j'ai découvert Helvetica Ultralight, je me souviens que je suis devenu fou en concevant tous ces modèles qui semblaient vraiment minimes et haut de gamme..
De plus, cette police, en particulier égyptienne, possède un empattement de dalle très net, combiné à une sorte de squarishness qui la fait paraître plutôt cool (je pense).
Il y a beaucoup d'autres polices géniales que vous pouvez utiliser. En règle générale, vous voulez quelque chose de plus classique. Autrement dit, à moins que vous ne sachiez ce que vous faites, vous voudriez rester à l’écart des polices à la recherche bizarre, par exemple. quelque chose qui a l'air très futuriste. En fait, c'est une bonne règle générale, sauf si vous êtes très confiant, il vaut mieux choisir des polices plus ordinaires..
Un autre type de caractère qui fonctionnerait très bien ici est quelque chose qui ressemble un peu à la technologie, comme cette police utilisée par Chris Garrett Media. Je ne sais pas de quelle police il s'agit ni comment ce type de police est appelé, mais c'est plutôt chouette. Peut-être qu'un gentil typophile pourrait nous éclairer dans les commentaires :-)
Quoi qu’il en soit, après avoir consulté le site de Chris Garrett Media, j’ai décidé que ce serait plutôt cool d’ajouter un dégradé à mon style et de lui donner un aspect brillant. Comme vous pouvez le voir ci-dessous, nous ajoutons ici une superposition de dégradé allant du noir au blanc, s'estompant un peu et en mode superposition.
Nous pouvons maintenant dessiner une grande boîte noire supplémentaire pour la zone de contenu. En fait, vous pouvez simplement dupliquer le calque précédent et le transformer à nouveau.
Et cela nous amène au point indiqué dans l'image ci-dessous. Avoir l'air plutôt cool!!
Nous ajoutons maintenant un peu de contenu factice dans la zone de contenu. Ici, j'ai à nouveau utilisé Arial pour la plus grande partie du texte, mais pour les titres plutôt que d'utiliser égyptien, je suis parti avec Georgia. Georgia n’est pas tout à fait aussi élégante, mais c’est une police standard, ce qui signifie que je peux créer ces en-têtes au format HTML normal au lieu de me fier à des images (ou Flash)..
En fait, avec la sortie de Windows Vista, il existe également une autre police semi-standard appelée Cambria, qui fonctionnerait bien. Mais Cambria a quelques problèmes de rendu étranges dans Firefox sur Mac sous certaines tailles, nous allons donc rester avec la bonne vieille Géorgie pour le moment.
Enfin, j'ai créé un nouveau calque en bas, rempli d'une couleur violette foncée, ajouté une bordure de 1px en haut, et le tour est joué, nous avons un pied de page..
En réunissant tous les éléments, le site est prêt à être construit.
Maintenant, l’un des avantages de cette conception est que nous pouvons facilement échanger l’arrière-plan et que la conception reste impressionnante. Voici que je l'ai échangé contre une image de iStockPhoto appelée Passion, avec un jeu de couleurs similaire. C'est un rendu de la lumière en 3D très cool et, comme dans notre arrière-plan actuel, il est aussi abstrait que beau.
Ici, j'ai utilisé une autre image abstraite d'iStockPhoto appelée Blue Energy. Comme la couleur a changé, j'ai également modifié et modifié les couleurs à quelques endroits - notamment le texte - et ajouté une grande lueur à la copie principale..
Maintenant, il est peu probable que vous ayez jamais besoin de cette conception exacte, maintenant que j'ai écrit tout un tutoriel à ce sujet. Alors parlons un peu de Pourquoi cela fonctionne bien, car cela vous aidera à utiliser les principes pour créer votre propre look unique.
Plusieurs éléments sont réunis pour créer un design qui fonctionne ici:
Bien sûr, il y a beaucoup plus de choses dont nous pourrions parler comme la couleur et la priorité, mais je pense que les éléments principaux de la conception que vous devriez regarder ici sont la typographie en conjonction avec l'arrière-plan. Pour finir, voici une petite image qui dit tout :-)
Maintenant assez de ce truc Photoshop nambi-pambi, allons faire du HTML / CSS! Suivez ensuite la deuxième partie de ce didacticiel, où nous avons intégré notre conception dans un site Web opérationnel, à l’adresse NETTUTS-Web Development Tutorials.!
Accentsconagua