|
Adobe Illustrator est un programme de conception qui crée des graphiques vectoriels pour une grande variété d'usages y compris l'impression , le mouvement et web. Les graphiques vectoriels utilisent des formules mathématiques pour présenter des images , par opposition à d'autres formats tels que GIF , qui utilisent un ensemble de points . Bien que n'étant pas spécifiquement conçu comme un programme de conception de sites Web , Illustrator ne dispose des outils avancés d'exporter les graphiques créés dans le programme pour l'utilisation du site et génère aussi le code nécessaire pour l'affichage dans un navigateur. Choses que vous devez
Web design logiciel de retouche
Afficher plus Instructions
création d'une présentation
1 créer un document Illustrator est de 960 pixels de large avec une hauteur de votre choix en fonction du contenu et de la conception que vous avez à l'esprit . Un site 960 px de large est conforme à l'écran largeur de résolution la plus populaire de 1024 px fois la barre de défilement et les bords de fenêtre sont pris en compte.
2 Créer un croquis dessinés à la main de la présentation visuelle de base votre site si vous ne l'avez pas déjà fait. Cela vous donnera une référence pratique pour créer dans Illustrator .
3 Créer votre mise en page en utilisant l'image et des outils de texte pour une tête stylisée. Si votre conception comprend un espace pour le texte tel que les messages blog , laissez l'espace dans cette zone vierge ou créer une bordure autour de la délimitation facile.
4 Ajouter guides à votre conception de délimiter les différentes sections de la mise en page . Ceci est très important parce que vous allez utiliser ces guides pour faire des tranches , qui définissent les frontières des éléments sur 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 voulez le guide doit être placé.
5 Double- vérifier le placement de vos guides pour la précision et l'exactitude. Dessinez plus si nécessaire pour séparer chaque élément , comme des images de navigation qui seront des liens sur votre site.
Génération de code
6 Sélectionnez "Objet" dans le menu , puis sélectionnez " Slice " et choisissez " Créer des Guides . " Quand les tranches sont créées , vous verrez petites boîtes noires à l'intérieur de chaque tranche avec un nombre correspondant . Sélectionnez "Fichier " dans le menu et choisissez "Enregistrer pour le Web et les périphériques . " Sélectionnez l' outil Sélection de tranche , qui est la deuxième icône dans le menu outil à droite de l'écran sous la forme d'une main . Sélectionnez toutes les tranches .
7 Sélectionnez les paramètres d'optimisation des options sur le côté droit de l'écran . Vous pouvez choisir des paramètres prédéfinis ou créer un profil personnalisé en fonction de si vous voulez que vos images soient JPEG, GIF ou PNG . Vous pouvez également ajuster la qualité des images .
8 Aperçu différents paramètres en cliquant sur les onglets " 2 -up " et "4 -up " . Dans le coin inférieur de chaque prévisualisation, vous pouvez afficher les informations d'optimisation tels que la taille du fichier et le temps de rendu du navigateur. Cliquez sur le bouton "Enregistrer" . Décidez où vous voulez que vos images et le code soient sauvés et de naviguer dans cette zone en utilisant le " Où: " bouton
9 Choisissez le format de votre travail. . Si vous êtes compétent en HTML et voulez seulement les images parce que vous allez ajouter du code pour eux plus tard , choisir " Images seulement. " Si vous êtes un débutant ou préfèrent avoir le code HTML généré pour vous , choisissez l'option "HTML et images " . Si vous préférez pour le positionnement des éléments qui seront organisées avec Cascading Style Sheets au lieu de tables , sélectionnez le bouton " Paramètres par défaut " et choisissez "Exporter comme calques CSS " dans l'onglet " Calques " .
10 < p> Ouvrez le fichier HTML à partir d'un navigateur pour visualiser votre travail . Modifier les fichiers avec un programme de conception de sites Web .
|
