Conception d'un site fan étape par étape

Ce post a été conçu et préparé depuis très longtemps. À l'origine, il devait être publié comme une suite d'une série d'articles intitulée "Création d'un fan-site" (un et deux). Que fait alors cet article sur le blog de Fable 3 ? La réponse est simple : dans le domaine du design, sans un exemple concret, on ne peut rien expliquer. Il n'existe pas de design sphérique dans le vide. Par conséquent, lorsque nous avons décidé il y a quelque temps de relancer l'un de nos fan-sites consacré à la série de jeux Fable, j'ai décidé que c'était l'exemple parfait avec lequel je pourrais "partager des astuces".

En réalité, je n'avais pas pour objectif de dévoiler le grand secret de l'univers ou d'apprendre à créer un design unique pour votre fan-site avec un seul article. Le sujet du design est vaste et multiple, il est peu probable qu'un seul designer puisse l'explorer entièrement à travers un seul travail... Je tiens également à préciser tout de suite que ce n'est pas un tutoriel sur Photoshop. Il en existe beaucoup sans moi, Google est là pour vous aider. En tant qu'auteur, je suppose que vous êtes déjà familier avec les bases de Photoshop, donc ne vous attendez pas à des instructions étape par étape comme "cliquez ici", "allez là". Ce n'est pas un cours sur Photoshop, c'est un masterclass sur la création de design. Je vais vous parler de ma manière de travailler, partager quelques astuces et secrets, qui ne sont pas vraiment des secrets, mais qui sont souvent oubliés. Commençons :)

Préparation du chevalet et de la toile

Dans notre cas, le chevalet sera, comme vous l'avez probablement deviné, Photoshop CS4, et la toile notre nouveau fichier vierge. En plus de "photomontages", il existe d'autres programmes, comme Gimp. Certains parviennent à travailler avec Corel Draw. Quoi qu'il en soit, l'humanité n'a pas encore inventé de programme pour le web design meilleur que Photoshop. C'est l'outil principal du web designer. Corel Draw ou Adobe Illustrator peuvent être utilisés pour créer des éléments individuels de votre design, mais "assembler" le design est le plus pratique dans Photoshop.

Avec "le chevalet" c'est clair, passons à la toile. Il est important de se rappeler des résolutions d'écran. Il y a environ cinq ans, la résolution 1024x768 était omniprésente, tandis que 1280x960 commençait à s'imposer. Il y a quelques années, 1680x1050 et 1600x1200 étaient considérées comme des résolutions élevées. Aujourd'hui, les écrans avec une résolution Full HD par défaut deviennent de plus en plus la norme, c'est-à-dire que nous devrions considérer 1920x1080 comme la qualité de résolution maximale. Cependant, 1024x768 ne semble pas encore prêt à prendre sa retraite, ce qui signifie que c'est notre limite inférieure. En réalité, la largeur est principalement déterminante, car notre site sera long, tout comme 90 % des sites sur le réseau.

Auparavant, il était à la mode de créer des sites "étirables". C'est-à-dire que les éléments de design se composaient d'éléments répétitifs, ce qui permettait au site de s'étirer en largeur en fonction de la résolution de l'utilisateur. Mais avec l'arrivée du Full HD, cette méthode d'adaptation du site à la résolution de l'utilisateur est devenue peu esthétique. L'œil humain est construit de telle manière que l'information à une distance de bras est bien perçue avec une largeur approximativement égale à une feuille A4. Tout ce qui est plus large n'est déjà plus dans le champ de vision. Par conséquent, la partie de contenu a récemment tendance à être étroite, tandis que l'espace restant à gauche et à droite est rempli de décoration de fond. Ainsi, les moutons sont satisfaits et les loups restent entiers :) Donc, la partie de contenu sera de 1000 pixels (n'oubliez pas qu'il y a une barre de défilement à droite du navigateur qui "prend" ces 24 pixels de 1024). En conséquence, notre zone pour "les champs" avec de belles arrière-plans sera (1920-1000)/2=460 pixels à gauche et à droite. Pour ne pas sortir accidentellement de cette zone, j'utilise des guides. En mode règles allumées, je fais simplement glisser le curseur et "fournis" les guides aux endroits nécessaires. Je peux aussi marquer directement le centre de notre toile. J'ai également noté environ la hauteur l'emplacement que je réserve pour l'en-tête du site, il va bouger à l'avenir, mais j'ai fait une "marque" pour moi. Voilà, le travail préliminaire est terminé. Passons à la préparation :)

Préparation préliminaire terminée

Trouvons l'inspiration

Cette étape est la plus simple et la plus complexe en même temps. Vous devez rassembler le matériel à partir duquel nous allons façonner notre design. Si vous êtes un artiste professionnel, vous pouvez bien sûr dessiner tous les arts et éléments d'interface nécessaires vous-même ou le confier à votre équipe... D'autre part, dans ce cas, que faites-vous, Artemy Tatyanych Andreyevich, dans cet article ? :) Cet article est destiné aux débutants. Nous aurons besoin d'arts thématiques et d'éléments pour notre interface ou au moins de ce à partir duquel nous pourrons créer ces éléments. Il est probable qu'à la première tentative vous ne recueilliez pas tout ce qu'il vous faut pour votre travail, donc il faudra revenir à la recherche d'arts et d'inspiration plusieurs fois. Je commence habituellement mes recherches sur le site officiel, puis je passe aux grands fan-sites, s'il en existe. Après cela, je passe à la recherche d'images sur Google et Yandex. Et je précise que j'utilise les deux moteurs de recherche, car les résultats varient énormément. L'endroit où l'un échoue, l'autre trouvera des tonnes de matériel. C'est bien s'il y a beaucoup d'arts, s'il y a de grandes captures d'écran de l'interface de jeu, si le développeur publie de nombreux fonds d'écran... mais la plupart du temps, il vous manquera quelque chose.

En conséquence de mes recherches, j'ai trouvé pas mal d'arts sur Fable et pas seulement, sur différentes parties du jeu. Mais pour la troisième partie, de beaux arts sont quasi inexistants. Mais ramassez tout : fonds d'écran, concepts, captures d'écran... On ne sait jamais ce qui pourrait être utile. Je ne vais pas vous ennuyer avec une collection complète du matériel trouvé. Dans le spoiler, vous trouverez les éléments qui ont fini par fonder le design.

Ce cadre a finalement été décomposé en une multitude d'éléments d'interface séparés


Le premier art normal trouvé pour la troisième partie

Ceci est le deuxième art. Tout, rien de plus dans le style requis n'a été trouvé

Cet art a été immédiatement utilisé comme fond. Il n'est pas parfait, mais je n'ai pas trouvé mieux.

L'art de la deuxième partie a été utile déjà à la fin du travail

Comment se passer d'un logo ?

Commençons le travail

Voici enfin le moment de commencer à travailler. Je vais vous donner une petite astuce, je sauvegarde régulièrement les résultats de mon travail sous un nouveau nom en respectant l'historique des versions. Par défaut, le premier résultat est la version 0_1, puis viennent 0_2, 0_3, etc. La version 1_0 arrive lorsque vous pensez avoir fait tout ce que vous vouliez et que vous pouvez commencer à montrer le travail aux relecteurs/amis/clients. Il est très probable que le design nécessite des modifications. Alors apparaîtront les versions 1_1, 1_2, etc. C'est pratique pour suivre votre propre progression, et aussi pour avoir la possibilité de revenir à des idées d'une version plus ancienne ou d'en extraire un élément que vous avez supprimé ou modifié jusqu'à ce qu'il soit méconnaissable dans la version actuelle.

Et un autre conseil, dans Photoshop, tous vos éléments sont stockés sur des calques distincts. Ne vous fatiguez pas à leur donner des noms significatifs et à regrouper les calques d'un certain élément à l'aide de la fonction ctrl+b. Lorsque votre fichier accumule plus de 100 calques, il devient extrêmement difficile de s'y retrouver sans étiquettes et groupes.

Mais assez de palabres, regardons le premier résultat. Bien que ce ne soit même pas le premier, c'est presque nul :

À ce stade, la zone de contenu est à peu près esquissée, les arts sont placés de manière approximative là où ils pourraient être. Partout, vous pouvez déjà voir des éléments visibles et invisibles qui devront ultérieurement s'intégrer dans le design. Ou pas. Continuons. À cette étape, d'ailleurs, deux travaux techniques importants ont été réalisés. Notre personnage a été soigneusement découpé de l'arrière-plan, et le cadre a été décomposé en petites parties.

Pour le découpage, j'utilise plus souvent des masques de calque plutôt qu'une gomme. Je peins en noir les zones à cacher, et je laisse visibles les parties blanches. Les demi-teintes de gris représentent les zones de transparence. Grâce à cela, si j'efface quelque chose de superflu, il sera facile de le remettre à sa place. J'ai enregistré le personnage découpé en résolution maximale séparément pour ne pas le perdre.

Le cadre a été décomposé en parties en découpant de petits morceaux et en les transformant en textures. Les coins sont le coin supérieur gauche réfléchi encore trois fois. Cela m'a permis d'obtenir une symétrie.

Initialement, le design était prévu pour être sombre, dans un style proche de nos deux premiers arts principaux. Grâce aux pinceaux doux et à divers modes de fusion, j'ai réussi à transformer une image de fond assez claire en une toile assez sombre. La partie de contenu était destinée à apparaître comme un parchemin plié en trois, qui devait être encadré par le cadre doré que vous connaissez. La couronne, en tant qu'élément clé, continuait d'être présente dans le design. J'ai commencé à chercher lentement une police pour le menu.

Les polices en cyrillique qui sont jolies sont assez rares. En effet, en règle générale, elles n'existent tout simplement pas. C'est-à-dire qu'il y a des lettres anglaises, mais pas de lettres russes. Soit pour la version russe, elles demandent pas mal d'argent, soit la version russe est réalisée de manière maladroite et moche par des artisans locaux. Ou alors tout va bien, mais la police est illisible :) La police sur l'image s'appelle bonzai. Si quelqu'un en a besoin, contactez-moi. Je suis prêt à partager. Passons à la suite.

Après quelques efforts, quelque chose de sensé a commencé à se dessiner peu à peu. La première version du menu principal a été réalisée (elle changera ensuite, mais le brouillon nous sera encore utile). Les observateurs attentifs peuvent remarquer que la partie gauche et la partie droite de ce menu sont notre couronne combinée avec un enroulement du cadre. N'ayez pas peur de combiner différents éléments d'interface. Ensemble, ils donnent souvent un résultat inattendu mais agréable. De plus, le concept de la partie principale du contenu a changé. J'ai tenté de représenter quelque chose comme une cape royale, mais le résultat ne me plaisait pas du tout. Il a donc fallu prendre une décision volontaire, changer le concept.

Ce n'est pas encore une nouvelle itération, c'est en fait juste un essai de plume : à quoi cela ressemblera-t-il dans une version claire et sans "cape" ? - Clairement mieux, mais il faut penser davantage. Au fait, les éléments en haut à gauche sont des "lettres" de la police fleur. C'est un excellent outil pour créer des éléments d'interface. Une multitude de courbes et de fleurs dans un seul flacon.

Et voici quelque chose de nouveau. J'ai expérimenté avec la position de notre héros dans l'en-tête du site, mais le plus important n'est pas cela. J'ai abandonné le menu horizontal et essayé de créer un menu vertical. Et pourquoi pas, c'est plutôt correct. Et notre menu central a été déplacé dans le pied de page.

Encore une itération intermédiaire où j'ai comparé le menu horizontal et vertical, en réfléchissant à l'idée de rendre les blocs latéraux extensibles par clic.

Voilà le moment où vous apprécierez les versions précédentes sauvegardées. Le design est allé dans une direction complètement incorrecte. Le rouleau sur toute la largeur du contenu avec le cadre au milieu et des cadres réduits pour les blocs latéraux a l’air affreux. J'ai donc renoncé à ce variant, je suis revenu un pas en arrière et j'ai pris une autre direction.

Et voici le moment de vérité ! En revenant en arrière, en jouant avec nos éléments, j'ai obtenu un modèle qui est déjà assez proche du résultat final. Tous les éléments principaux sont regroupés et à leur place : le menu principal, les blocs latéraux, le contenu, l'en-tête et le pied de page. Si vous regardez de près, vous remarquerez que certaines choses de l'itération précédente ratée m'ont tout de même été utiles. Le balisage de texte a été pris au hasard sur un site dédié à Dragon Age, juste pour avoir une idée de l'emplacement du texte. La police principale utilisée est Palatino Linotype. C'est une belle police standard, ce qui est très important. Dans ce cas, votre site s'affichera sans problème pour tous les utilisateurs de Windows. Il existe bien sûr un moyen d'utiliser des polices personnalisées que le site chargera en cache chez l'utilisateur, mais cela entraîne un trafic supplémentaire et des problèmes d'affichage des polices dans différents navigateurs. Je ne recommande pas de trop s'y impliquer. Sur Internet, il existe un excellent tableau des polices standards de Windows. Je m'en sers et je vous le recommande. Et pour l'en-tête, on peut et même doit utiliser des polices décoratives. Pour le titre du site, je suis tombé sur une police géniale qui s'appelle Algerius Caps. Ressentez la différence avec ce qu'il y avait avant !

Une étape très intéressante, qui démontre clairement qu'il est toujours possible d'améliorer quelque chose, même dans un design proche de la finalisation. Tout d'abord, j'ai finalement abandonné le menu inférieur et l'ai transformé en pied de page. Vous vous rappelez, j'ai dit que le menu horizontal nous serait encore utile ? - Cela s'est avéré utile. Le modèle a été épuré de tous les éléments inutiles pour ne pas encombrer notre design. Mais ce qui est le plus important, c'est que la couronne dans le design a finalement trouvé sa place. Abandonne l'épée ! Nous prenons l'un de nos arts et découpons la main avec l'épée et la couronne. Le travail d'encadrement du logo qui pendait au-dessus du gant était tout simplement minutieux. C'est le cas où un grossissement supérieur à 1000 % est parfois essentiel. Et j'ai aussi commencé à travailler sur la correction des couleurs de notre arrière-plan. Il était trop jaune-vert. Je l'ai atténué. Pour cela, j'utilise généralement une couche supplémentaire remplie de la couleur requise avec un mode de fusion "soft light" (lumière douce), mais selon les besoins, il peut être intéressant d'essayer d'autres types de fusion. Dans ce cas, la gamme a été corrigée à l'aide d'une couche bleue.

J'ai continué à peaufiner le design. J'ai corrigé la position de l'art en arrière-plan, j'ai de nouveau ajusté sa palette de couleurs. J'ai éliminé presque tous les déchets restants après le nettoyage précédent, je n'ai qu'un seul enroulement à peine manqué. Mais j'ai aussi remarqué que le nom du site se détachait mal sur le fond. J'ai donc corrigé le style et l'ai rendu contrastant par rapport au fond, tout en utilisant les couleurs principales du site.

Ligne d'arrivée

Parama ! Voici la version 1_0. Ce n'est pas en réalité la version finale, mais à ce stade, j'ai décidé de montrer le modèle à mes amis et d'écouter leurs critiques. Il n’y a déjà plus de déchets ici, l'arrière-plan a été à nouveau calibré. Mais ce qui est aussi important, c'est qu'un petit menu avec une recherche et des boutons de réseaux sociaux a été ajouté. À l’origine, seul le RSS fonctionnera, mais bientôt, Twitter, une chaîne YouTube et une page Facebook seront lancés.

Première remarque importante - notre héros semble clairement seul dans l'en-tête du site. Il a besoin de compagnie. Malheureusement, aucun art féminin beau pour la troisième partie n'a été trouvé, mais une gitane de l'art de la deuxième partie est venue à la rescousse. Ça tombe bien. Le site n’est pas seulement sur la troisième partie. En échange de la fille, notre héros a dû se séparer de son pistolet, il était clairement de trop.

Mais ce n'est pas tout, une nouvelle série de remarques est arrivée. Le site était d'un or si criard, et le cadre doré du bloc de contenu central occupait trop de place. Eh bien, j'ai atténué la teinte à l'aide d'effets de calque et réduit le cadre. Les chaînes qui alourdissaient le design et compliquaient le codage ont également été retirées. Le moment de vérité est arrivé. Version finale :

www.Fable-game.ru

Postface

En fait, il nous restait encore la mise en page, qui a aussi apporté quelques petites modifications. Par exemple, le placement de l'arrière-plan et des personnages par rapport à lui. Il y a eu d'autres corrections de styles, la recherche de bugs et de défauts. Mais c'est une question de technique. La partie la plus difficile est derrière nous. Quand vous atteignez cette étape, vous pouvez vous détendre, vous féliciter et ajouter votre nouveau travail à votre portfolio. Ensuite, il s'agira d'alimenter et de compléter le site avec du matériel, de réfléchir à la structure optimale... mais c'est une toute autre histoire :)

J'espère sincèrement que mon "récit illustré" vous a plu et, surtout, qu'il vous aidera à créer vos propres designs beaux, uniques et étonnants pour vos sites. J'attends vos questions, suggestions ou remarques dans les commentaires.

*L'auteur du design et du texte, c'est moi, Ksandr\_Warfire

Le matériau a été préparé spécialement pour GAMER.ru