Comment assembler et mettre en page correctement un site Web dans Illustrator

Cela vaut la peine de créer une image visuelle de l’apparence que vous souhaitez que votre site Web ait. Mettez en page votre site Web avant de le créer, cela peut vous donner une idée de ce à quoi ressembleront les éléments et de ce dont vous avez besoin. C’est un processus simple que vous pouvez effectuer à partir d’Illustrator.

Comment créer un site Web dans Illustrator

Toute version d’Illustrator peut être utile, car nous n’utiliserons que les outils de base de l’application. Avant de commencer, gardez à l’esprit que tous les éléments d’un site Web doivent être en un seul clic et moins c’est toujours plus.

Configurer le document

• Ouvrez l’application Illustrator.
• Créez un nouveau document , utilisez la commande de raccourci Ctrl + N.
• Entrez le nom du fichier.
• Entrez les dimensions de la feuille. Ces mesures correspondent à une image sur un grand écran.
  
  • Largeur 1024 px .
  • Hauteur 1479 px . Cette valeur peut varier en fonction des éléments que vous devez ajouter à votre site Web.
  • Choisissez l’ orientation portrait .
• Comme il s’agit d’un design axé sur un résultat numérique, choisissez le mode couleur RVB.

Organiser les zones du site

À ce stade, vous devez être clair sur les éléments que vous souhaitez ajouter à votre page Web. Ajoutez des rectangles colorés pour diviser les zones d’une page, telles que l’en-tête, le corps et le pied de page.

• Une fois terminé, verrouille le calque pour ne pas déplacer ces éléments.
• Créez un nouveau calque pour placer les éléments Web.

Dans chaque zone, faites une subdivision pour chaque contenu. Par exemple, une boîte pour marquer l’endroit où une image va ou des rectangles pour marquer l’emplacement d’un texte.

• Verrouillez ce nouveau calque et créez-en un autre pour le contenu comme les boutons, les images et le texte.

Ajouter des directives

Utilisez les directives comme référence pour que chaque élément du Web soit correctement positionné. Les images, le texte, le logo et les boutons doivent être bien structurés.

• Cliquez simplement sur la règle sur le plan de travail et faites glisser le curseur vers un point de la feuille.
• Vous pouvez désactiver les guides à tout moment en appuyant sur les touches Ctrl + point-virgule .

Insérer des éléments Web

Ajoutez maintenant tous les éléments de votre site Web. Ajoutez le logo à l’en-tête avec le titre ou une bannière. Les images et les graphiques sont importants pour lui donner une vraie finition, ainsi que les icônes des médias sociaux .

Ajoutez le texte de la page en tenant compte du style de la police que vous allez utiliser, ainsi que des boutons. Au fur et à mesure que vous progressez, vous pouvez voir plus clairement les éléments dont vous avez besoin et dont vous pouvez vous passer.

Ajouter des couleurs

Enfin, déverrouillez les deux couches précédentes et supprimez les blocs gris dans chaque zone du site Web . À chaque zone comme l’en-tête, le corps et le pied de page, attribuez la couleur qu’ils auront.

Vous devez également attribuer une couleur aux autres éléments tels que des figures ou des textes au sein du site. Lorsque tout est prêt, enregistrez le document avec l’option Fichier / Enregistrer pour le Web, pour l’enregistrer dans un format léger.

Raisons de la mise en page d’un site Web

Dans le développement professionnel de tout site Web, le processus d’analyse est essentiel pour la réussite du projet. L’idée est de pouvoir interpréter graphiquement l’apparence d’un site et économiser de nombreuses heures de programmation.

En concevant un site, vous pouvez comprendre son fonctionnement et si l’approche initiale répond aux exigences pour être une solution viable. Montrer une image graphique du site au client avant de commencer permet de gagner beaucoup de temps lors de la refonte.

La conception initiale vous donne une idée du comportement de la page et de la mise en page du contenu. Plus cette image initiale est affichée, plus elle est facile à interpréter.