Conseils pour travailler avec Illustrator. Voici une idée folle : concevez votre prochain projet Web dans Illustrator. Si vous êtes un concepteur Web principal, vous ne répondrez probablement pas très bien à cette suggestion. Illustrator ne peut tout simplement pas faire tout ce que Photoshop peut faire, n'est-ce pas ?
Pas tout à fait.
Bien que Photoshop est devenu l'outil de facto conception de sites Web, Illustrator est plus que capable de répondre à vos besoins. Grâce à ses outils de mise en page, il s’agit souvent d’un programme meilleur et plus adapté à la conception Web.
Étant donné que la plupart des professionnels de la conception Web ne veulent pas se promener dans Illustrator à la recherche de preuves, j'ai compilé une liste de fonctionnalités liées au Web que vous devez connaître pour commencer à expérimenter la conception Web dans Illustrator.
Essayez-en quelques-uns et je vous garantis que vous commencerez à utiliser Illustrator comme outil standard dans votre flux de travail de conception Web.
1. Tout d’abord : définissez toutes les unités sur Pixels. Conseils pour travailler avec Illustrator
Par défaut, Illustrator utilise la métrique unités pour les tailles d'objet et de points pour le texte. Ce sont d'excellents paramètres pour la plupart des situations de conception, mais pour création de sites web vous voudrez probablement voir des pixels partout. Donc, avant de commencer à travailler sur autre chose, assurez-vous que vos unités sont correctement configurées.
Pour définir les unités en pixels :
- Ouvrir dans le menu Edition
- Sélectionnez les unités de mesure dans le sous-menu des paramètres.
- Définissez toutes les options sur "pixels"
2. Créez des documents à l'aide d'un profil de document Web.
Lorsque vous souhaitez commencer à travailler sur une nouvelle conception, faites facilement défiler la fenêtre Nouveau document et ignorez certains détails importants, comme indiquer à Illustrator que vous envisagez de travailler sur une conception Web afin de ne pas utiliser de couleurs CMJN. et les bords flous de l'objet. N'oubliez pas de sélectionner le paramètre de profil Internet dans la fenêtre Nouveau document et tout ira bien.
3. Activez l'alignement de la grille de pixels pour les objets. Conseils pour travailler avec Illustrator
Cette fonctionnalité vous sauve la vie si vous avez déjà eu des problèmes avec les bords de forme flous dans Photoshop.
L'alignement de la grille de pixels ajustera les segments horizontaux et verticaux droits d'un objet pour s'adapter parfaitement à la grille de pixels, tout en gardant les segments courbes et inclinés lisses. Le résultat est des formes nettes et parfaites au pixel près, ce que vous recherchez absolument dans la conception Web.
Le bouton du haut permet l'alignement de la grille de pixels, ce qui donne toujours des bords nets.
Pour activer l'alignement de la grille de pixels au niveau de l'objet :
- Sélectionner un objet
- Ouvrez le panneau Transformer (Fenêtre> Transformer).
- Cochez la case "Aligner sur la grille de pixels" en bas du panneau (si vous ne la voyez pas, double-cliquez sur le panneau pour afficher les options)
Note. L'alignement de la grille de pixels est activé par défaut pour tous les nouveaux objets créés à l'aide du profil de document Web. Toutefois, si vous collez des objets provenant d'autres fichiers Illustrator, vous devrez ajuster manuellement l'alignement des pixels pour ceux-ci. Conseils pour travailler avec Illustrator
4. Activez l'aperçu des pixels.
La fonctionnalité Pixel-Preview permettra à Illustrator de se comporter comme Photoshop lors de la mise à l'échelle de votre image au-dessus de 100 % : au lieu d'obtenir des vecteurs parfaits à chaque fois, vous verrez réellement les pixels comme si vous travailliez avec une image raster.
L'activation de l'aperçu en pixels vous donnera l'impression d'être dans Photoshop.
Pensez à quel point c'est cool : vous avez toute la puissance des graphiques vectoriels à portée de main et vous pouvez voir à quoi ressemble le résultat au niveau des pixels.
Sympa, n'est-ce pas ?
Activer ou désactiver l'aperçu des pixels
- Ouvrir le menu d'affichage
- Sélectionnez Affichage Pixel.
5. Utilisez les fenêtres d'illustration. Conseils pour travailler avec Illustrator
Imaginez que deux caméras vidéo soient pointées vers votre projet.
Une caméra a un niveau de zoom normal, affichant 100 % de votre travail. L'autre caméra a un niveau de zoom de 400 % et vise une icône spécifique sur laquelle vous travailliez.
Comme un chirurgien, vous utilisez la caméra zoom pour apporter de minuscules modifications au niveau des pixels à l'icône, en jetant occasionnellement un coup d'œil à la caméra zoom 100 % pour voir à quoi elle ressemble réellement à sa taille réelle.
Les fenêtres de couverture sont idéales lorsque vous devez travailler avec de petits éléments comme des icônes : vous n'avez pas besoin de zoomer et dézoomer constamment pour vérifier à quoi tout ressemble.
Ce sont des fenêtres d'illustration - elles vous permettent de visualiser votre conception simultanément avec différents niveaux de zoom, paramètres de couleur et autres variations. Ceci est très utile pour la conception Web, en particulier lorsque vous travaillez avec des détails au niveau des pixels.
Pour utiliser les fenêtres d'illustration :
- Ouvrez le menu Fenêtre, puis sélectionnez Nouvelle fenêtre. Illustrator créera un nouvel onglet avec le même document en vue.
- Accédez à nouveau au menu Fenêtre, choisissez Organiser > Déplacer tout vers la fenêtre. Cela vous permettra de changer taille et emplacement des fenêtres les uns à côté des autres comme bon vous semble.
- Expérimentez avec différents niveaux de zoom dans Windows et commencez à apporter quelques modifications pour voir comment cela fonctionne. Conseils pour travailler avec Illustrator
6. Utilisez des symboles pour créer rapidement des boutons, des icônes et bien plus encore.
Combien de fois avez-vous créé le même (ou presque le même) bouton, icône ou widget dans Photoshop ? Si vous aimez la conception de sites Web, vous le faites probablement tous les jours.
Illustrator peut vous aider à gagner du temps et à éviter ce travail répétitif avec les symboles.
Essentiellement, les symboles sont un ensemble infini de symboles prêts à l'emploi. éléments de design, qui peut être ajouté à l’œuvre par simple glisser-déposer, puis modifié si nécessaire. C'est idéal pour les boutons, les icônes et autres objets standard qui n'ont pas besoin d'être créés à partir de zéro.
Mais il y a une autre raison pour laquelle les symboles sont puissants : c'est ce qu'on appelle l'instanciation.
Les symboles sont non seulement pratiques, mais ils facilitent également la mise à jour des éléments de conception répétitifs.
Essentiellement, chaque fois que vous apportez des modifications au symbole d'origine, ces modifications sont immédiatement reflétées dans toutes les instances du symbole trouvées dans votre illustration. Avez-vous besoin de boutons plus grands sur votre site Web ? Changez simplement le symbole. Voulez-vous que les champs de votre formulaire soient différents sur chaque page ? Changez simplement le symbole. Vous avez eu l'idée.
Conseil : Si vous ne souhaitez pas que cela se produise avec une instance spécifique du symbole as, cliquez avec le bouton droit sur l'objet dans votre illustration et sélectionnez Rompre la référence du symbole. Cela l'exclurea des mises à jour automatiques.
Voici une bonne vidéo expliquant comment utiliser et manipuler les symboles :
Utilisation de symboles dans Adobe Illustrator de Adobe TV .
Pour utiliser un symbole existant :
- Ouvrez le panneau Symboles dans le menu Fenêtre.
- Faites glisser le symbole sélectionné sur votre travail
Créez un nouveau symbole :
- Créer une image de symbole
- Ouvrez le panneau Symboles dans le menu Fenêtre.
- Faites glisser une illustration sur le panneau
- Cliquez sur OK dans la boîte de dialogue pour confirmer.
Pour modifier un symbole :
- Ouvrez le panneau Symboles dans le menu Fenêtre.
- Double-cliquez sur un symbole pour passer en mode édition.
- Une fois terminé, double-cliquez n'importe où en dehors de l'image du symbole pour quitter le mode d'édition.
7. Développez facilement les objets avec une mise à l'échelle à 9 segments. Conseils pour travailler avec Illustrator
Il s'agit d'une fonctionnalité de symbologie avancée qui vous permet de définir quelles parties d'un objet sont étirées lors de la mise à l'échelle et lesquelles restent inchangées.
À gauche : un exemple de bouton étiré avec et sans le paramètre de zoom à 9 segments. À droite : le paramètre de mise à l'échelle à 9 segments implique le déplacement de 4 guides qui indiquent à Illustrator quelles parties de l'objet sont protégées et lesquelles peuvent être mises à l'échelle.
Un exemple pratique est un bouton avec des coins arrondis : si vous souhaitez l'allonger, vous ne pouvez pas simplement l'étirer horizontalement car cela déformerait l'objet entier. Au lieu de cela, vous devrez déplacer manuellement les points de forme. Avec une mise à l'échelle à 9 segments, l'étirement fonctionne comme prévu. Conseils pour travailler avec Illustrator
Pour vraiment comprendre comment cela fonctionne, écoutez cet excellent didacticiel vidéo d'Adobe TV pour vous familiariser rapidement :
Utilisation de la mise à l'échelle à 9 segments avec des symboles de Adobe TV .
8. Des coins arrondis partout !
Vous pouvez créer un rectangle arrondi dans Photoshop, mais Illustrator vous permet d'appliquer un effet de coin arrondi non destructif à presque n'importe quel objet. Qu'est-ce que l'effet non destructif ? Cela signifie que vous pouvez l'activer, le désactiver ou modifier ses paramètres sans affecter l'objet d'origine sous-jacent.
Vous pouvez appliquer l'effet de coins arrondis à presque n'importe quel type d'objet et l'ajuster selon vos besoins. Conseils pour travailler avec Illustrator
Pour appliquer l'effet de coin arrondi :
- Créez un rectangle ou tout autre objet avec des coins pointus
- Dans le menu Effets, choisissez Styliser > Coins arrondis.
- Entrez un rayon de coin et cliquez sur Aperçu pour voir à quoi il ressemble.
- Cliquez sur OK pour appliquer l'effet.
Pour modifier l'effet des coins arrondis :
- Sélectionnez un objet aux coins arrondis
- Ouvrez le panneau Apparence dans le menu Fenêtre.
- Recherchez l'effet Coins arrondis et double-cliquez dessus pour modifier ses paramètres, ou cliquez sur l'icône en forme d'œil pour l'activer ou le désactiver.
9. Création d'un remplissage rapide avec un motif raster. Conseils pour travailler avec Illustrator
Les motifs d'arrière-plan subtils sont un grand succès dans la conception Web, mais de nombreux concepteurs pensent qu'ils ne sont pas faciles à appliquer dans Illustrator.
Je dois admettre que ce n'est pas intuitif, mais la solution est simple.
Pour créer un motif bitmap :
- Placez une photo du motif sur votre pièce
- Cliquez sur "Insérer" sur le ruban supérieur (important : cela ne fonctionnera pas sans cela !)
- Faites glisser un motif vers la palette Nuancier
- Appliquez un échantillon à n'importe quel objet pour le remplir d'un motif
10. Placement automatique du texte autour des images et des objets.
Photoshop est connu pour ses capacités d'édition de texte très basiques. Si vous souhaitez enrouler du texte autour d'une image, vous devez créer deux ou trois blocs de texte différents et simuler l'effet. Conseils pour travailler avec Illustrator
Heureusement, Illustrator a ce qu'il vous faut.
Pour enrouler du texte autour d'une image :
- Sélectionnez l'image ou l'objet autour duquel vous souhaitez envelopper le texte
- Ouvrez le menu Objet, choisissez Habillage du texte > Nouveau.
- Pour définir la distance d'habillage, ouvrez à nouveau le menu Text Wrap et sélectionnez Text Wrap Options.
- Déplacez l'image sur le texte pour voir l'effet d'habillage
11. Créez des effets visuels riches avec les paramètres d'apparence des objets. Conseils pour travailler avec Illustrator
Dans Illustrator, le panneau Apparence d'un objet fonctionne un peu comme les effets de calque dans Photoshop : vous pouvez ajouter plusieurs remplissages et traits à un objet, puis jouer avec leurs modes de transfert, leur opacité et leurs effets pour obtenir des résultats intéressants.
Ce texte n'est qu'un objet vectoriel unique, stylisé à l'aide du panneau Apparence et effets.
Le terrain de jeu est assez vaste - des ombres portées, du flou et de la lueur à la texture, à la distorsion et à la 3D. De cette façon, vous pouvez recréer la plupart des effets de Photoshop tout en travaillant avec des graphiques vectoriels.
Le panneau Apparence est puissant et amusant. Je vous encourage à l'essayer immédiatement ou à regarder le didacticiel ci-dessous pour comprendre son fonctionnement :
Maîtriser le panneau d'apparence de Adobe TV .
Êtes-vous prêt à commencer à expérimenter avec Illustrator ?
La création de sites Web et d'interfaces utilisateur à l'aide de Photoshop est désormais devenue la norme et la plupart des concepteurs sont satisfaits de cette solution. Conseils pour travailler avec Illustrator
Mais ce n’est pas parce que Photoshop est devenu si répandu qu’Illustrator n’a rien à offrir, bien au contraire. Avec des outils tels que l’alignement de la grille de pixels, l’habillage du texte et l’apparence des objets, cela constitue un argument solide.
Combiné avec du puissant outils de mise en page et les graphiques vectoriels, le découpage et l'exportation d'images, Illustrator est définitivement un choix évident pour les concepteurs de sites Web qui souhaitent développer rapidement des sites Web.
Laisser un commentaire