Share
Ce didacticiel est parfait pour les débutants et les utilisateurs intermédiaires d'Adobe Illustrator. Nous verrons comment mettre en page un site Web et le préparer pour une utilisation sur le Web. De plus, nous utiliserons les éléments de site Web Freebie récemment publiés pour simuler le design..
Commencer un Nouveau document d'une largeur de 960px et une hauteur de votre choix. J'ai choisi cette largeur car ce site Web va probablement générer du trafic Internet pour des moniteurs moyens à grands. Une largeur de 960 pixels est une taille sûre qui favorisera la majorité des visiteurs. Enfin, définissez votre Mode de couleur à RVB.
La bordure noire indique la taille du document (appelée Artboard) que nous avons créée. J'aime placer une capture d'écran vierge d'une fenêtre de navigateur sur son propre calque pendant la conception, pour avoir une bonne idée de ce à quoi mon site ressemblera lorsqu'il sera terminé..
Cette prochaine étape est très importante. Assurez-vous de savoir à quel zoom vous visualisez le document. En fin de compte, votre site Web sera vu à 100%. N'hésitez pas à effectuer des zooms avant et arrière lorsque vous travaillez sur votre mise en page, mais assurez-vous que tous les éléments de texte et de conception sont lisibles à 100%. Utilisez le menu déroulant mis en surbrillance ci-dessous (ou tapez simplement le pourcentage souhaité) pour définir le zoom sur.
Note: Parfois, Adobe Illustrator est difficile à vérifier et n'affiche pas les chiffres au fur et à mesure que vous les tapez dans la zone de zoom mise en surbrillance ci-dessous. Par exemple, si vous tapez 58%, il arrive que les chiffres ne changent pas en cours de frappe. Si tel est le cas, appuyez simplement sur Retour après avoir entré vos valeurs, et votre document sera redimensionné au nombre que vous avez entré..
L’artboard peut être basculé entre visible et invisible en allant sur Voir> Masquer Artboard. Le problème, c’est que cela prend un peu plus de temps que de montrer et de cacher des guides (Commande + touche point-virgule) Je trouve donc préférable d'utiliser des guides et de masquer l'Artboard. Au cours de la mise en page d'un site Web entier, il vous sera beaucoup plus facile d'appuyer sur une touche de raccourci rapide plutôt que d'aller en haut de l'écran et de sélectionner chaque fois une liste..
Vous trouverez peut-être facile d’établir un équilibre et une belle hiérarchie en dessinant d’abord de simples zones grises sur votre page. Les rectangles minces représentent les endroits où je prévois utiliser du texte, tandis que les grandes zones grises seront des images..
Une fois que vous avez une idée générale de la disposition, vous pouvez ajouter des guides et supprimer les zones grises..
En utilisant uniquement les guides comme référence, ajoutez d'autres éléments tels que la navigation, le texte et resserrez l'orientation du logo, des images et des icônes. Il est utile d’activer et de désactiver vos guides (Commande + touche point-virgule), pendant que vous peaufinez la mise en page. Si les guides que vous avez dessinés ne fonctionnent pas aussi bien que vous le pensiez, ajustez-les à votre guise..
Remarque: lorsque vous activez et désactivez les guides, ils se verrouillent automatiquement. Vous ne pouvez pas déplacer les guides verrouillés. Pour déverrouiller rapidement les guides, appuyez sur Commande + Option + Point-virgule.
Continuez à finaliser votre en-tête avec des images, des icônes et des graphiques.
Ci-dessous, j'ai décidé d'ajouter une couleur bleu clair pour améliorer l'en-tête..
Ajoutez du style à votre texte, en vous assurant de choisir les liens et les en-têtes. Je trouve qu'il est beaucoup plus facile et rapide d'accomplir autant d'éléments de conception dans Illustrator pour pouvoir me concentrer sur la programmation et le codage du site Web le moment venu..
Il existe différentes manières de préparer une conception pour une utilisation dans un éditeur WYSIWYG (Ce que vous voyez est ce que vous obtenez), comme Adobe Dreamweaver. La première méthode utilise des tranches. Les tranches peuvent être faites en utilisant des guides ou une sélection. Pour utiliser des repères afin de faire des tranches, faites d’abord glisser les repères sur votre page autour de chaque objet nécessitant son propre lien. Par exemple, une icône qui, lorsque vous cliquez dessus, accède à une page spécifique. Ci-dessous, j'ai quatre icônes, chaque icône mènera le visiteur vers une page Web ou une zone différente du site..
J'ai dessiné des guides entre chaque icône et juste en dehors de la zone bleue. Il est généralement plus propre si vous tracez vos repères à environ 1 ou 2 pixels en dehors de la zone à découper. Cela garantit qu'aucune de vos œuvres d'art ne sera coupée.
Note: Ne dessinez pas de guides sur l'ensemble de votre mise en page à la fois. Au lieu de cela, faites les sections une à la fois. Par exemple, commencez par la zone d'en-tête. Effacer tous vos guides en allant à Affichage> Guides> Effacer les guides. Enregistrez vos tranches pour le Web (voir une étape ultérieure) et répétez cette procédure pour les autres zones de la présentation..
Une fois que vous avez dessiné vos guides, l’étape suivante consiste à en faire des tranches. Pour faire des tranches de vos guides aller à Objet> Tranche> Créer à partir de guides. Il peut arriver qu'Illustrator ne crée pas de tranches la première fois. J'ai constaté que je devais parfois répéter cette étape trois ou quatre fois avant qu'Illustrator ne produise réellement des tranches. En dessous, les cases numérotées en noir indiquent que les tranches ont été faites.
Pour enregistrer vos tranches pour les utiliser sur un site Web, allez à Fichier> Enregistrer pour le Web et les périphériques… Utilisez le Outil de sélection de tranche (K) mis en surbrillance dans le coin supérieur gauche pour sélectionner les tranches spécifiques que vous souhaitez enregistrer. Sélectionnez plusieurs tranches à la fois en maintenant la touche Maj enfoncée. Ajustez les paramètres à droite pour répondre à vos besoins. Les images JPEG fonctionnent mieux pour les éléments de plusieurs couleurs, tandis que le format de fichier GIF convient bien aux éléments de grandes zones de couleur et peu de couleurs en général, mais le format de fichier PNG convient également aux graphiques transparents anciens navigateurs IE). Vous voudrez peut-être tester la qualité par rapport au type de fichier et ajuster la Qualité économiser la bande passante. Une fois que vous êtes prêt, cliquez sur sauvegarder.
Décidez où vous souhaitez enregistrer les images. J'ai choisi le bureau. Sous format, sélectionnez Images uniquement, puis cliquez sur Enregistrer..
Sur votre bureau, vous aurez maintenant un dossier appelé Images. Dans ce dossier se trouveront les tranches (images) spécifiques que vous avez sélectionnées. Ces images sont idéales en résolution et en taille de fichier pour une utilisation sur le Web..
Effacer vos guides en allant à Affichage> Guides> Effacer les guides. Dessinez maintenant de nouveaux guides autour de la zone suivante à découper. L'état de survol (lorsque la souris est au-dessus de la navigation) sera rouge, tandis que l'état désactivé sera gris. Vous devrez faire les deux versions de la navigation. Pour y parvenir efficacement, commencez par rendre toute votre navigation rouge, puis allez à Fichier> Enregistrer pour le Web et les périphériques…
Sélectionnez les tranches spécifiques que vous souhaitez enregistrer. Puisque ma navigation n’est ni composée d’images ni de couleurs, j’ai décidé que le meilleur type de fichier pour la navigation serait le GIF, puis cliquez sur sauvegarder. Notez également que si votre utilisateur utilise une police Web, vous pouvez décider d’utiliser du texte HTML au lieu d’images..
Vous pouvez attribuer un nouveau nom à vos images à ce stade. Cependant, ils sont automatiquement nommés pour vous, donc ce n'est pas obligatoire.
Si vous avez enregistré vos images au même emplacement qu'auparavant, vous remarquerez que le dossier Images de votre bureau inclut désormais les images supplémentaires que vous venez d'enregistrer..
Gardez à l'esprit qu'il ne s'agit que d'un flux de travail possible. Vous pouvez également placer des états activé et désactivé quelque part dans votre document, créer toutes vos tranches et les exporter ensemble..
L’autre méthode de création de tranches consiste à sélectionner un objet, puis à passer à Objet> Tranche> Créer à partir de la sélection. La création de tranches à l'aide de guides ou d'une sélection convient également. Utilisez un flux de travail que vous trouvez confortable et optimal pour le projet particulier sur lequel vous travaillez..
À l'occasion, vous n'aurez pas besoin d'inclure le texte contenu dans une tranche. Par exemple, le pied de page contient du texte tapé dans l'éditeur WYSIWYG. Si c'est le cas, supprimez simplement le texte avant ou après la création des tranches, mais avant d'enregistrer les tranches pour le Web..
Vous remarquerez ci-dessous que j'ai supprimé le texte une fois les découpes effectuées.
Observez le site final. Comme vous pouvez le constater, la création d’un site Web dans Adobe Illustrator est simple et efficace. Vous pouvez rapidement expérimenter avec la conception et donner à cette phase du processus de conception Web toute l’attention et la pensée dont elle a besoin. Vous pouvez voir l'image finale ci-dessous ou voir une version plus grande ici.
Accentsconagua