Share
Ce que vous allez créerAujourd'hui, je vais vous montrer à quel point il est facile de créer votre propre illustration «Site Web en construction» à l'aide d'Adobe Illustrator. Espérons que ce tutoriel rapide vous incitera à créer quelque chose d'unique que vous pourrez ensuite utiliser sur le Web. Alors prenez une tasse de café et ouvrez Illustrator pour pouvoir commencer.
Ce type d’illustration ayant pour but d’apporter du caractère à votre site Web en cours de développement, vous devez prendre en compte quelques points clés pouvant affecter le produit final..
Pour ce faire, vous devrez répondre à deux questions relativement faciles:
Numéro un: quelle largeur aura votre conteneur de contenu principal?
C’est vraiment très important, car vous voudrez que votre illustration s’insère parfaitement dans un certain espace (fenêtre), surtout si vous ne faites que la conception et non la partie codante..
Ce faisant, vous aurez une idée de base de la taille (largeur et hauteur) de votre illustration, ce que vous devez identifier par vous-même ou avec l'aide de votre ami codeur..
Maintenant que ce soit un 960 px conteneur large, ou quelque chose de plus grand (1024 px), vous devez toujours prendre une seconde et décider quels autres éléments visuels vous allez utiliser, ce qui nous amène à la deuxième question.
La façon dont vous centrez vos informations est vraiment importante, car vous souhaiterez que l'utilisateur se concentre sur une partie spécifique de la page. Qu'il s'agisse d'un groupe de liens sociaux ou d'un formulaire d'abonnement, vous voudrez que l'illustration soit au centre de la scène, là où tout se passe, car l'idée même est de rendre quelque chose d'utile et attrayant en même temps..
Dans mon cas, j’ai décidé qu’en utilisant un 960 x 480 px la taille devrait me couvrir, puisque la composition serait théoriquement utilisée sur un fond blanc et occuperait la place centrale.
Bien sûr, si vous faites l’illustration d’un projet réel, vous pouvez toujours agrandir, en fonction de la manière dont votre contenu sera affiché, mais pour le moment j’espère que le Largeur 960 px sera un match parfait pour la plupart d'entre vous à lire cette.
Selon le dictionnaire des entreprises en ligne, une marque peut être définie comme un "design, signe, symbole, mots ou une combinaison de ceux-ci, utilisés pour créer une image qui identifie un produit et le différencie de ses concurrents".
Dans le marché actuel, il est très important de distinguer votre entreprise en créant une image facilement reconnaissable à l'aide de quelques déclencheurs visuels simples..
Le but de ce tutoriel est de créer quelque chose d’attrayant qui puisse être utilisé dès que vous avez fini de créer le produit final..
Je vous encourage à personnaliser le design en “personnalisant” l'illustration, pour en obtenir une version unique..
Comment, vous pourriez demander?
Eh bien, voici quelques points de départ.
La couleur est facilement l’un des outils les plus utiles lorsqu’il s’agit de créer des marques, puisqu’une bonne valeur peut facilement vous différencier de vos concurrents, tant que vous le rendez intéressant..
Je suis allé avec un joli jaune pour les accents et le point principal, mais cela ne signifie pas que vous devez vous y tenir.
Une fois que vous avez déterminé votre palette de couleurs, vous pouvez montrer votre marque ou votre entreprise en abordant un thème qui décrit son activité principale. C’est là que vous pouvez être créatif et réfléchir aux éléments visuels que vous souhaitez communiquer..
Par exemple, si vous construisez un site Web qui va traiter avec l'analyse des données, vous pouvez créer quelque chose qui utilise des graphiques et des indicateurs de pourcentage, afin de donner à vos téléspectateurs un avant-goût de ce qu'est votre entreprise..
Ou, si vous avez affaire à un produit numérique, disons un logiciel, vous pouvez créer une fenêtre abstraite avec quelques fonctions du programme, ce qui leur donnerait un indice sur la nature de votre produit..
Dans ce tutoriel en particulier, j’ai décidé d’utiliser quelque chose d’un peu plus générique, car j’ai pensé que vous pourriez utiliser ma version comme point de départ et en tirer parti..
Cela étant dit, cessons de perdre un temps précieux et faisons preuve de créativité.
Ouvrez Illustrator et créez un Nouveau document (Fichier> Nouveau ou Contrôle-N) en utilisant les paramètres suivants:
Et de la Avancée languette:
Conseil rapide: Comme vous l'avez peut-être déjà deviné, nous allons créer l'illustration à l'aide d'un flux de travail parfaitement pixelisé. Je vous recommande donc vivement de lire mon tutoriel sur la création d'illustrations parfaitement pixelisées, ce qui vous aidera beaucoup..
Avant de commencer à construire quoi que ce soit, je vous recommande fortement d'identifier et de séparer les sections principales de l'illustration sur leur propre calque, car il sera plus facile de les cibler et de les modifier ultérieurement si vous avez besoin de.
En regardant notre composition, nous utilisons six couches, en leur donnant des noms facilement reconnaissables, ce qui facilitera le processus d'identification d'un élément spécifique de l'ensemble..
Une fois que vous avez superposé votre document, nous pouvons maintenant commencer à travailler sur l'illustration proprement dite, et nous le ferons en créant la ligne de fond et l'arrière-plan..
Positionnez-vous sur la couche de ligne de sol et utilisez les Arrondi Outil Rectangle créer trois formes de largeur différentes avec une épaisseur de 6 px et un Rayon de coin 3 px. Coloriez-les en utilisant un gris rougeâtre foncé (# 3f3838) puis assurez-vous de les positionner sur 8 px l'un de l'autre.
Puis regroupez-les à l'aide du Contrôle-G raccourci clavier, et centrez-les sur le Artboard en utilisant le Aligner le panneaude Centre d'alignement horizontal option, en veillant à laisser un espace de 46 px entre eux et le Artboardla face inférieure.
Positionnez-vous sur le calque d’arrière-plan et utilisez le Outil Ellipse (L), créer un 536 x 536 px forme que nous allons colorier en utilisant #efefef puis masquer partiellement afin de masquer la section inférieure qui passe sous la ligne de sol.
Ensuite, ajoutez un autre plus petit 46 x 46 px cercle vers le coin supérieur droit et coloriez-le en utilisant la même valeur (#efefef).
Conseil rapide: Si vous souhaitez utiliser une couleur différente pour l'arrière-plan, vous pouvez facilement le faire, mais lorsque vous exportez le fichier, essayez de le supprimer, car un fichier PNG transparent pourrait être un meilleur ajustement, en particulier lorsque la largeur du contenu est supérieure à l'illustration elle-même.
Commencez à travailler sur le MacBook en créant un 426 x 24 px base avec un fond rond, que nous allons colorier en utilisant # e2e2e2 et ensuite donner un 6 px contour (#aaaaaa) en utilisant le Chemin de décalage outil.
Conseil rapide: Vous pouvez apprendre à créer des contours en jetant un œil à ma comparaison détaillée entre les chemins de décalage et les traits utilisés comme méthodes de création d'icônes de ligne..
Une fois que vous avez les formes principales pour la base (1), commencez à lui ajouter des détails, tels que la partie supérieure plus claire (Largeur: 426 px; La taille: 16px; Couleur: # e2e2e2) (3), le 426 x 6 px ligne de séparation épaisse (# 3f3838) (2), les points saillants subtils (Couleur: blanc; Mode de mélange: Recouvrir; Opacité: 80%) (4), et la zone du pavé tactile (5) afin de lui donner l'aspect d'un ordinateur portable et non d'une assiette.
Commencez à travailler sur la partie supérieure du MacBook en créant le couvercle et l'affichage réel.
Tout d'abord créer un 364 x 220 px rectangle avec un Rayon de coin 18 px appliqué aux coins en haut à gauche et à droite. Colore la forme en utilisant # 756c6c puis donnez-lui un 6 px contour (# 3f3838) (2).
Ensuite, créez un autre 184 x 328 px rectangle, coloriez-le avec la couleur de votre marque (qui dans notre cas est # edd87e), donne le même 6 px contour (# 3f3838) puis positionnez les deux vers le centre du couvercle en laissant un espace de seulement 6 px entre eux et la base du MacBook (3).
Ajoutez quelques reflets et une ombre pour donner à la pièce un peu plus de polissage (4).
Une fois que vous avez créé le MacBook, vous pouvez commencer à travailler sur le thème de votre site Web. Prenez donc votre temps, soyez créatif et déterminez exactement ce que vous voulez montrer à vos visiteurs..
Dans notre cas, il s’agit d’une simple présentation de site Web, avec un menu de navigation supérieur, un espace réservé pour les images, un bouton d’appel à l’action et quelques éléments amusants tels que l’échelle et la zone non peinte blanche..
Lorsque vous avez terminé, n'oubliez pas de regrouper tous les éléments du MacBook à l'aide du Contrôle-G raccourci clavier, puis verrouillez son calque pour pouvoir passer à la section suivante de l'illustration..
Commencez à travailler sur la grue et voyez si vous pouvez ajouter la couleur ou les couleurs de la marque à certaines des pièces qui le composent, afin de créer des couleurs d'accent pour vous aider à réaliser le thème..
Dans notre cas, nous avons utilisé notre jaune ensoleillé (# edd87e) pour la cabine de manœuvre et le petit ascenseur latéral.
Continuez à travailler sur votre thème en ajoutant des éléments qui seraient pertinents pour votre site Web ou remplissez simplement l'espace vide de sorte que l'illustration ne finisse pas par paraître déséquilibrée..
J'ai décidé de garder les choses simples en ajoutant une petite benne à ordures vers le côté droit du MacBook, ce qui pourrait constituer une métaphore des éléments recyclés lors de la construction du site..
Terminez l'illustration en ajoutant la dernière pièce du puzzle, qui est dans notre cas la petite «image factice» maintenue par le bras de la grue..
Voilà donc un guide simple et convivial sur la construction d’une illustration intéressante "Site Web en construction", qui peut aider votre marque personnelle ou votre marque d’entreprise à se démarquer du reste.
Merci pour votre temps et votre attention, et assurez-vous de nous montrer ce que vous avez créé après avoir lu cet article.
Comme je sais que c’est un tutoriel rapide, et que je n’ai pas eu le temps de vous expliquer tout le processus de création derrière l’illustration, je vais vous donner le fichier source modifiable, afin que vous puissiez le bricoler comme bon vous semble. désirs. Voir le lien de téléchargement dans la barre latérale droite.
Accentsconagua