Comment construire un site web dans Illustrator

Étape 1

Créez un document Illustrator d'une largeur de 960 pixels par rapport à la hauteur que vous avez choisie, en fonction du contenu et du design que vous envisagez. Un site d'une largeur de 960 pixels s'adapte à la largeur de résolution d'écran la plus courante, à savoir 1 024 pixels, lorsque la barre de défilement et les bordures de la fenêtre sont prises en compte.

Étape 2

Créez un dessin dessiné à la main de la conception visuelle de votre site Web, si ce n'est déjà fait. Cela vous donnera une référence utile à créer dans Illustrator.

Étape 3

Créez votre conception en utilisant les outils image et texte pour un en-tête élaboré. Si vous incluez du texte tel que des messages dans un blog, laissez l'espace vide dans cette zone ou créez un bord qui l'entoure pour obtenir un simple contour.

Étape 4

Ajouter des guides à votre conception afin de démarquer les différentes sections de la conception. Ceci est très important car vous utiliserez ces guides pour effectuer des coupes, qui définiront les bords des éléments de votre site Web. Les guides peuvent vous aider à aligner des objets avec précision. Cliquez sur la règle verticale ou horizontale et faites glisser la souris à l'endroit où vous souhaitez positionner le guide.

Étape 5

Vérifiez l’emplacement de vos guides pour vérifier leur exactitude et leur exactitude. Faites-les glisser davantage, si nécessaire, pour séparer chaque élément, tel que les images de navigation qui constitueront les liens sur votre site.

Étape 1

Sélectionnez "Objet" dans le menu, puis sélectionnez "Couper" et "Créer à partir des guides". Lorsque vous créez les guides, vous verrez de petites boîtes noires à l'intérieur de chaque coupe avec le numéro correspondant. Sélectionnez "Fichier" dans le menu, puis "Enregistrer pour le Web et les périphériques". Sélectionnez l'outil pour sélectionner la coupe, qui est la deuxième icône du menu des outils située à droite de l'écran, sous l'icône de la main. Sélectionnez toutes les coupes.

Étape 2

Sélectionnez les paramètres d'optimisation parmi les options répertoriées à droite de l'écran. Vous pouvez choisir des configurations prédéfinies ou créer un profil personnalisé, selon que vous souhaitez que vos images soient des fichiers JPEG, GIF ou PNG. Vous pouvez également régler la qualité des images.

Étape 3

Prévisualisez les différentes configurations en cliquant sur les onglets "2 en 1" et "4 en 1". Dans le coin inférieur de chaque aperçu, vous verrez les informations de l'optimisation, telles que la taille du fichier et la durée de rendu du navigateur. Cliquez sur le bouton "Enregistrer". Décidez si vous souhaitez enregistrer vos images et votre code et accédez à cette zone à l'aide de la touche "Où".

Étape 4

Choisissez le format de votre travail. Si vous contrôlez XXXX et ne souhaitez que les images, car vous ajouterez un code ultérieurement, sélectionnez "Uniquement les images". Si vous êtes débutant ou si vous préférez que le XXXX soit généré pour vous, choisissez l'option "XXXX et images". Si vous préférez organiser le positionnement des éléments avec des feuilles de style en cascade au lieu de tableaux, sélectionnez "Configuration par défaut" et "Exporter en tant que calques CSS" dans l'onglet "Calques".

Étape 5

Ouvrez le fichier XXXX depuis un navigateur pour voir votre travail. Éditez les fichiers avec un programme de conception Web.