Notions de base d'Adobe Illustrator pour la conception Web : commencer avec les bases (I)

1. Débuter avec Illustrator: Hé, tout le monde. Voici Ryan Clark. Bienvenue dans le premier projet de la classe Adobe Illustrator for Web Design. Ce premier projet devrait être très simple. Nous allons juste passer à travers et nous allons créer un nouveau document, éditer ce document, regarder notre plan de travail, juste prendre nos repères dans Illustrator et voir quelques outils qui nous aideront avec notre flux de travail, quelques choses que vous pouvez simplement ignorer puisque nous n' utilisons pas vraiment davantage les fonctionnalités centrées d'Illustrator, et commencez simplement et soyez à l'aise. Alors, commençons vraiment. La première chose que nous allons faire est de créer un nouveau document. Donc, pour créer un nouveau document, vous allez essentiellement aller dans le menu Fichier et sélectionner Nouveau. Alternativement, vous pouvez simplement utiliser la commande N pour ouvrir cela. Il s'agit du nouveau panneau de document. C' est là que vous allez configurer votre plan de travail et tout configurer pour votre site Web. Vous pouvez choisir parmi un certain nombre de préréglages. Certains d'entre eux sont déjà définis pour le web. 1280 par 800 est le plus proche de ce que nous voulons atteindre, pas vraiment l'esprit que 80. Donc, d'habitude, je vais juste avec 1 200, parce que c'est un peu plus facile de mettre en place des guides, ce que nous allons voir plus tard. Vous voulez vous assurer que vos unités sont réglées sur des pixels au lieu de pouces ou picas ou sur l'une des unités de mesure les plus axées sur la conception d'impression. En ce qui concerne les paramètres avancés, vous voulez vous assurer que vous êtes en RVB. Tout ce que nous devons faire est RVB parce qu'il va être visualisé à travers un écran. Effets raster, genre de même idée. Comme nous n'allons pas imprimer tout cela dans la vraie vie, il n'a pas besoin d'être une qualité d'impression totale à 300 PPI. Ainsi, vous pouvez changer cela à l'écran, puis jusqu'au mode d'aperçu, définissez cela sur pixel, de sorte que toutes nos formes que nous créons dans les projets ultérieurs soient super nettes et alignées. Je t'expliquerai ça quand on y arrivera. Mais allons de l'avant et donnons simplement un nom à ce nouveau document. On va commencer. Donc, le document apparaîtra. Vous pouvez voir fondamentalement sur le côté gauche ici, vous avez une barre d'outils vraiment basique. C' est là que se trouvent la plupart des outils. Au sommet de ce domaine, vous avez essentiellement un ensemble contextuel d'options. Ces options changeront en fonction de l'outil que vous avez sélectionné. Donc, si vous avez juste l'outil de sélection directe sur comme je l'ai fait en ce moment, vous allez obtenir un ensemble d'options. Si vous dites créer un type et que vous avez choisi un type, alors vous aurez la liste déroulante des caractères, déroulante des paragraphes, d'autres choses comme ça. Cela est utile lorsque vous travaillez réellement avec des éléments individuels sur votre page. Ici, nous avons une série de palettes. Vous verrez que pour ce qui est de la façon dont l'utilisation de ces granulés, vous cliquez simplement sur eux pour les ouvrir. Vous pouvez les cliquer à nouveau pour les fermer. S' il y en a des que vous utilisez plus souvent ou que vous n'utilisez jamais, vous pouvez les déplacer, les retirer, puis vous en débarrasser. Il est en fait incroyablement facile de personnaliser fondamentalement ces barres latérales pour obtenir juste les outils dont vous avez vraiment besoin là-dedans. Donc, c'est la configuration générale. C' est l'application elle-même. C' est assez simple. D'accord. Donc, maintenant que nous avons connu notre chemin, nous allons aller de l'avant et ajouter quelques guides à notre document. Cela va essentiellement nous donner une mise en page vraiment simple ou une grille avec laquelle nous pouvons organiser les éléments de notre site Web. Cela sera un peu plus pratique lorsque nous commencerons à utiliser certains des outils d'alignement dans des projets ultérieurs. Mais pour l'instant, nous allons commencer avec une base de données vraiment solide. Donc, nous allons utiliser la règle pour commencer par. Vous pouvez utiliser une règle en appuyant sur la commande R ou en allant jusqu' à Afficher, Règles, Afficher les règles. Ça va allumer la règle. Cela vous permet de savoir exactement quel pixel ou quelle taille est votre plan de travail et vous permet de vraiment entrer dans le minutieux de l'endroit où vos éléments sont placés. Donc, nous allons aller de l'avant et zoomer un peu. Puisque notre document est configuré pour être de 1 200 pixels de large, nous savons que notre ligne centrale sera juste ici à 600. Je veux que la conception de mon site Web soit d'environ 800 pixels de large. C' est juste vraiment arbitraire, mais juste une règle empirique très simple dont je m'éloigne. Cela signifie que nous allons devoir engager 200 pixels de chacun des côtés. Donc, je vais aller de l'avant et mettre l'un de ceux-ci ici à 200, puis ici à 1000. Donc, maintenant, si nous zoomons, vous pouvez voir que nous avons juste une ligne centrale très simple. Nous avons notre marge de gauche, et nous avons toute notre marge droite. C' est vraiment tout ce que vous devez faire en ce qui concerne les guides. Il y a beaucoup de systèmes de grille différents qui existent. Il y a une tonne qui a été écrit à ce sujet. Je vais poster une partie de ça dans le projet supplémentaire pour que vous puissiez voir ça et vous lier à quelques articles. Tu peux devenir aussi compliqué que tu veux vraiment l'être. Pour quelque chose d'aussi simple que juste un site d'une page vraiment rapide, tout ce dont vous avez vraiment besoin est une ligne centrale vraiment solide et alors vous êtes marge est définie là-bas. Donc, maintenant que nous avons tout mis en place, nous pouvons aller de l'avant et nous pouvons faire une dernière chose qui est de modifier rapidement notre plan de travail. Donc, disons que vous travaillez sur un projet et que vous réalisez que votre plan de travail est en fait trop petit. Celui que nous avons créé est quatre par trois. Donc, il va être limité en fonction de la durée de notre site, surtout s'il s'agit d'un site d'une page, comme les sites d'atterrissage d'une page typiques qui durent toujours et jamais. Donc, si vous avez besoin d'ajouter plus d'espace à votre plan de travail, vous pouvez essentiellement descendre ici à l'outil Plan de travail ou Maj+O. Allez-y et cliquez dessus et il vous placera dans ce mode de plan de travail. Dans ce mode Plan de travail, vous verrez ici la largeur et la hauteur de votre plan de travail. C' est vraiment facile à changer. Donc, disons que nous voulons qu'il soit en fait 2.000 pixels, vous allez choisir 2.000 pixels et tout d'un coup, vous avez maintenant 2.000 pixels de haut. Dites, une chose à noter à propos de cet outil est que cette icône ici est essentiellement de déterminer d'où viennent tous vos pixels. Donc, si nous voulons que les pixels soient ajoutés au bas du plan de travail, alors nous devons le mettre ici pour que le point de référence soit le haut. Cela va essentiellement verrouiller tout vers le haut et ajouter du contenu en dessous. Même chose avec le bas, si nous travaillons avec le pied de page ou quelque chose comme ça et que nous voulons ajouter de l'espace au-dessus, alors nous ferons référence à cela vers le bas, et quand nous ajoutons nos pixels, ils seraient au-dessus de tous les éléments qui figuraient déjà sur notre plan de travail. C' est vraiment ça pour le premier projet. Maintenant que nous avons un plan de travail, nous avons un document de travail, nous allons aller de l'avant et, dans le prochain projet commencez à travailler avec des formes dans Illustrator. Merci. 2. Créer et modifier des formes: Hey tout le monde, c'est encore Ryan Carter, et nous allons commencer notre projet sur les formes. Les formes sont vraiment au cœur de l'illustrateur et vous permettent créer vos éléments de conception Web avec une grande facilité, de les gérer, de les regrouper et de les aligner incroyablement simplement. Je pense que vraiment à sa base est la plus grande raison d'utiliser Illustrator pour la conception web est juste à quel point il est facile de traiter tous ces éléments. Donc, ce que nous allons faire est essentiellement commencer à apprendre comment créer des formes, puis comment modifier ces formes, puis comment les déplacer, mettre à échelle, faire pivoter, toutes sortes de choses que vous pouvez faire pour faire sorte de tous les différents petits morceaux et morceaux de votre conception de site web. Donc, commençons essentiellement par le, commençons par l'outil Rectangle. Vous remarquerez qu'ici nous avons l'outil Rectangle. Si vous maintenez la touche enfoncée, vous pouvez sélectionner tous ces types de formes à créer. Vous pouvez créer des formes de deux manières différentes. Vous pouvez soit cliquer et faire glisser pour créer une forme, soit double-cliquer, ce qui vous donnera une zone de saisie dans laquelle vous pouvez taper des dimensions spécifiques, si vous savez exactement quelle taille la forme doit être. Vous remarquerez que si vous cliquez et faites glisser pour créer une forme que vous pouvez créer n'importe quelle sorte de proportion, c'est totalement fluide, vous pouvez créer n'importe quelle forme que vous voulez. Si vous maintenez la touche Maj enfoncée, ce qui se passe est que les côtés restent en parfaite proportion les uns des autres, ce qui permet de créer des carrés parfaits, des cercles parfaits, tout où les côtés sont tous alignés. Vous pouvez modifier des formes de l'une des deux manières suivantes. Vous pouvez soit utiliser le cadre de sélection fourni par l'illustrateur pour modifier, faire glisser, déplacer, former, déplacer sur les côtés, cliquer et faire glisser, modifier comme ça, ou modifier des éléments individuels d'une forme à l'aide de l'outil de sélection directe. L' outil de sélection directe est ce type ici, c'est le petit curseur blanc. Donc, alors que l'outil de sélection a saisi toute cette forme dans son ensemble, cet outil va sélectionner des points ou des lignes uniques. Cela va donc vous permettre de faire glisser des éléments individuels de cette forme autour, et c'est ainsi que vous allez créer des formes complexes. Allons de l'avant et supprimons ces formes, puis nous allons passer à les éditer un peu plus. Donc, en plus de modifier et de créer des formes, vous pouvez également les éditer à l'aide de quelques outils intégrés, et je vais vous montrer quelques uns de ceux que j'utilise le plus souvent. Donc, le premier est l'outil de rotation, et l'outil de rotation est juste ici, vous pouvez également appuyer sur R pour le sélectionner. Ce que ça va vous permettre de faire, c'est de faire tourner une forme, et d'être un peu étourdi en le faisant. La chose cool à ce sujet est que si vous maintenez le décalage, alors il va verrouiller cela dans 45 degrés comme des points de rotation de sorte que vous savez que si vous avez un carré parfait et que vous voulez que ce soit un diamant parfait, alors vous savez que vous allez juste vouloir faire pivoter de 45 degrés. C' est très pratique pour faire des petits points sur des choses, petits nubbins, des petites flèches, des triangles, tout ça. Pour créer un triangle comme ça, il suffit de faire pivoter un carré, de supprimer l'un des points, puis vous pouvez utiliser votre outil de stylet pour entrer ici et les relier, puis vous avez un triangle. Nous allons donc aller de l'avant et supprimer ce genre de passage à l'échelle. Ainsi, la mise à l'échelle est l'un des autres outils utiles pour éditer des formes. C' est juste ici, l'outil d'échelle, j'arrive généralement à juste en utilisant le raccourci S. Donc ce que cela va faire est de nous permettre d'augmenter ou de diminuer la taille de cette forme par grandeur de l'échelle, et de maintenir le décalage enfoncé comme les autres outils, va verrouiller les proportions et nous permettre de nous assurer que même si elle est de plus en plus grande, nous ne perdons pas son genre original de proportions de shaper. Là, outil super utile. Donc, cela va nous aider à rendre les choses plus grandes ou plus petites quand nous bricolons vraiment avec des designs, peu comme rendre le logo plus grand, c'est comme ça que nous allons le faire. Mais on ne veut jamais faire ça, je veux le rendre plus petit. Donc, ce sont essentiellement les principaux moyens que nous allons modifier les formes, nous allons déplacer les choses. L' une des autres choses qui est vraiment utile dans Illustrator est l'idée de copier des formes. Donc, continuons et supprimons ceci, puis nous allons travailler sur le déplacement des choses et la copie et le collage. Donc, parfois votre élément n'est pas au bon endroit. Évidemment, vous devez le placer. Vous pouvez soit faire glisser des choses à l'aide de l'outil Sélectionner comme je le déplace en ce moment, soit si vous le souhaitez, vous pouvez maintenir l'outil Maj enfoncé pendant que vous faites glisser, et cela ne fera que déplacer votre forme autour d'un horizontal ou vertical ou un axe diagonal, et cela est vraiment utile pour déplacer les choses quand nous pourrions avoir besoin d'aller juste un peu sur le côté ou juste un peu vers le bas. Nous ne voulons pas perdre où nous sommes alignés verticalement ou horizontalement, mais nous avons juste besoin de finesse quelque chose en place, super utile. Un autre outil vraiment utile est juste d'utiliser les flèches, qui peuvent déplacer les choses tout autour et puis aussi maintenir la touche Maj enfoncée tout en déplaçant les flèches, va déplacer les choses 10 pixels à la fois, ce qui est agréable à juste une sorte de pousser les choses quand vous regardez quelque chose aussi loin que la façon de le positionner. En plus de déplacer des choses, nous allons aussi, vous savez de temps en temps, nous allons vouloir copier des formes ou répéter formes encore et encore pour des éléments qui sont vraiment similaires. Donc, la façon la plus simple de le faire est de modifier en utilisant copier-coller. Donc, les touches de raccourci sont juste Commande C, Commande V, qui va copier un élément et le placer ailleurs sur le tableau d'art, généralement assez proche. Nous pouvons également copier quelque chose et le placer directement au même endroit, sorte au-dessus de l'autre élément en utilisant la commande F, qui est également très pratique de temps en temps. L' un des autres raccourcis super utiles est la possibilité de glisser et de copier en même temps. Donc, comme vous pouvez le voir, j'ai ce joli petit cercle, et je vous ai montré avant que vous pouvez maintenir le décalage et le déplacer, et ça va le déplacer sur cette ligne de base. Eh bien, si je maintiens la touche Maj enfoncée et appuyez aussi sur la touche d'option, vous pouvez voir que le curseur change pour le curseur de copie, et ce que cela va faire est de copier cet élément ici ou ici, et en faire une copie parfaite dans le nouvel endroit où je lui ai dit d'aller. C' est le moyen le plus rapide absolu de copier des éléments et je l'utilise tout le temps. Maintenant, l'inconvénient de copier des éléments comme celui-ci est qu'ils ne sont pas toujours espacés uniformément, et c'est un problème, parce que nous voulons que les choses soient uniformément espacées et super belles. Heureusement, Illustrator a résolu ce problème pour nous avec l'un de mes panneaux préférés dans tout cela, et c' est le panneau Aligner. Donc, nous allons descendre ici pour Aligner, vous pouvez déjà l'avoir dans votre panneau d'outils. Ce que cela fait, c'est qu'il prend plusieurs formes et les aligne de certaines manières. Vous pouvez jouer avec ce genre de peu juste pour voir comment ils fonctionnent. Je vais vous montrer quelques-unes des plus utiles. Habituellement, beaucoup de fois ce qui se passe est que nous avons plusieurs éléments et nous allons avoir besoin de les verrouiller ou de sorte que tous les alignent à gauche sur la même ligne, et c'est à cela juste ici. Il va les aligner horizontalement tous vers la gauche, ce qui va les déplacer. Maintenant, un meilleur exemple est d'utiliser des formes qui ont toutes la même taille. Laissez-moi y aller et en faire quelques-uns. Génial. Donc, maintenant vous pouvez voir. On a ces formes, elles sont un peu décalées. Si nous voulions dire, « Prenez tous ces éléments et centrez-les tous ensemble sur une ligne centrale, alors nous pourrions utiliser ce centre d'alignement horizontal. » Même chose avec les aligner vers la droite et aussi les aligner vers la gauche. Maintenant, un outil encore plus frais qui se trouve dans ce panneau est la distribution. Donc, ce que c'est parfait pour quelque chose où j'ai trois éléments et je veux qu'ils aient un espacement parfait entre les deux, l'un l'autre. Donc, vous pouvez voir que j'ai trois cercles. Celui-ci a un peu d'espace, celui-ci a beaucoup d'espace. En ce qui concerne mon design, je veux qu'ils soient égaux, je veux qu'ils soient parfaits. Donc, ce que je vais faire, c'est que je vais prendre les trois et je vais utiliser les objets de distribution. Ce que cela va faire, c'est qu'il va distribuer ces objets à intervalles parfaits afin qu'ils soient tous exactement le même espacement. J' utilise ça une tonne absolue. Il est parfait pour quand vous avez un design qui a dit, quatre témoignages ou pour les icônes dont vous avez besoin pour aligner ceux d'une manière où ils ont tous l'air uniformément espacés. C' est l'outil pour le faire et c'est super utile. Donc, c'est fondamentalement tout pour créer, éditer, aligner des formes. Ce que nous allons faire maintenant, c'est passer à un peu plus complexes traitant des formes composées et des groupes. Donc, créer des formes simples et les aligner est assez facile. Là où nous entrons dans des situations un peu plus complexes, c'est quand nous avons beaucoup de formes, beaucoup de graphiques, beaucoup d'éléments dont nous avons besoin pour tous interagir les uns avec les autres de certaines façons. Alors, allons de l'avant et créer quelques scénarios et vous montrer comment faire face à beaucoup de formes qui sont ensemble. Donc, l'une des premières choses que vous remarquerez est que lorsque je crée une nouvelle forme elle se trouve toujours au-dessus de la forme que j'ai créée en premier. Maintenant, c'est utile si vous voulez toujours que cette forme soit sur le dessus, mais parfois je ne le fais pas. Ainsi, Illustrator a essentiellement un petit outil rapide qui vous permet positionner un élément par rapport à tous les autres éléments qui l'entourent. Tout cela est géré avec le menu arrangé. Donc, dans le menu arrangé, nous avons amené à l'avant, ramener, envoyer à l'arrière, envoyer à l'arrière. Ce que ceux-ci font fondamentalement, c'est cela vous permet de changer où un élément se trouve aussi loin que la profondeur par rapport à tous les éléments qui l'entourent. Il y a aussi des clés courtes pour que vous puissiez l'envoyer tout le chemin vers l'arrière, l' envoyer jusqu'à l'avant, vous pouvez le déplacer vers le bas juste une. C' est vraiment facile. C'est ainsi que vous serez en mesure de pousser des éléments devant et derrière d'autres éléments qui l'entourent. Donc, disons que j'ai créé cette belle forme mais que je voulais tout bouger ensemble. La façon la plus simple de garder tous ces éléments ensemble est de créer fondamentalement un groupe. Donc, ce que vous pouvez faire est d'aller ici pour objecter et vous pouvez utiliser l'outil Groupe, ou aussi simplement la commande G. Donc , ce que cela va faire est, il va prendre tous ces éléments, il va les combiner en un seul groupe de sorte que lorsque je sélectionne l'un d'eux, je vais tous les sélectionner. Quand je bougerai l'un d'eux, je les bougerai tous. C' est vraiment, vraiment utile lorsque vous avez des groupes d'éléments vraiment complexes que vous avez créés ou des icônes, et à l'intérieur des conteneurs et que vous voulez tout déplacer sans déplacer les éléments individuels de quelque chose. En plus de regrouper des éléments ensemble, nous pouvons également combiner des éléments dans des formes complexes. Donc, disons que je voulais créer une bulle de conversation. Je peux le faire en utilisant un rectangle et un carré parfait. Donc, je vais prendre la place parfaite. Je vais faire tourner ça sur le côté. Je vais déplacer ça ici. Dites que je l'avais placé sauvagement et que je voulais qu'il soit parfaitement centré, je pouvais vraiment le faire simplement avec l'outil d'alignement que nous avons montré auparavant. Attrapez-les et rangez-les ensemble. Si je veux que ce soit un peu plus petit, je vais le déplacer là-haut. Évidemment, cette forme globale est juste, mais nous avons un problème si c'est deux formes. Donc, pour changer cela, nous pouvons essentiellement passer au Pathfinder et utiliser le panneau Modes de forme. Modes de forme est très utile lorsque vous voulez créer des formes complexes avec des choses. Le Pathfinder est ici. Vous ne les utiliserez probablement pas une tonne, mais vous utiliserez certainement cet outil Unite tout le temps. Donc, cliquer sur Unite prend fondamentalement ces deux formes et il les combine dans une forme complexe que je peux ensuite déplacer, et au lieu d'être trop totalement combiné et faire la bulle de conversation que je voulais faire. Donc, c'est comme un simple passage rapide, ce qui est de la façon de créer des formes plus complexes, comment gérer beaucoup de formes qui sont ensemble. Alors, vous pourriez vous dire : « Brian, comment ça se passe ensemble ? Pourquoi as-tu soufflé tout ce super rapide ? » Eh bien, je vais aller de l'avant et vous montrer comment tout cela fonctionne ensemble pour créer un simple design de site web. Donc, continuons et supprimons ceux-ci et revenons à notre fichier de projet. Donc, ce que je voulais faire est de vous guider les gars, comment je créerais les formes générales qui composent une page d'accueil prototypique de la page d'accueil. Alors, passons à travers ça ensemble. Donc, nous allons commencer par une zone d'en-tête. Je ne veux pas devenir super compliqué en ce moment, je veux juste indiquer cette zone d'en-tête en faisant un grand rectangle. Je vais changer ça. Vous pouvez voir qu'on va entrer dans les couleurs beaucoup plus tard, mais pour l'instant on va aller de l'avant et faire ce gris, passer à autre chose. Donc, en ce moment, je vais mettre cela en position pour qu'il soit vraiment sympa et aligne vraiment sympa. Je vais me concentrer sur cette section ici. Donc, je voudrais faire une zone de témoignages. Dans le cadre de cette zone de témoignages, je veux créer une forme qui est une capture d'écran du site Web de quelqu'un avec une petite bulle de conversation qui a comme un avatar à l'intérieur de celui-ci. Donc, pour ce faire, nous pouvons combiner un tas de l'outil de forme différente. Donc, je vais commencer par le rectangle arrondi. Je vais faire une ceinture rectangulaire arrondie comme ça. C' est un peu trop gros. Donc, on va bouger ça. Je veux que ça corresponde à trois. Alors, allez-y et faites quelque chose comme ça. Cool. Ça devrait vraiment marcher. D'accord. Allez-y et alignez ça ici avec ma règle comme ça. Maintenant, ces avatars. Je veux un avatar de cercle. Je pense que ce serait cool d'avoir peut-être une petite bulle sortir du fond un peu, pour faire un peu plus d'une forme complexe. Essayons ça. Pour m'assurer que ces choses sont totalement alignées, je vais utiliser mon outil de ligne, outil de ligne fort. Ouais, ces gars sont tous alignés ensemble assez parfaits. Déplacez ça juste un peu. Déplacez ça juste un peu. Je vais aller de l'avant et unir ces deux-là ensemble. C' est cool. On a ce petit gars, mais j'en ai un. Donc, je vais bouger ça. Je vais les attraper. Je vais les regrouper pour que je puisse les déplacer les uns avec les autres, et je vais utiliser cette commande de déplacement et de copie comme je vous l'ai montré auparavant. Je vais en déplacer un tout le chemin vers la droite. Alors je vais en déménager un au centre. Vous pouvez voir que ceux-ci ne sont pas espacés uniformément. Alors, je vais les attraper tous les trois. Revenez à l'outil d'alignement et utilisez ce centre de distribution horizontal. Maintenant, j'ai trois éléments de ma petite zone de témoignages, et tous ces trois éléments sont parfaitement arrangés les uns avec les autres. C' est juste avoir un tutoriel très rapide qui montre, comment vous pouvez utiliser les formes pour concevoir petits éléments complexes et les placer autour de votre conception vraiment simplement. 3. Typographie et couleur: Dans cette partie de la classe, nous allons parler de type et de couleurs, et je pense que je vais vraiment le faire dans le contexte de ce site sur lequel nous avons travaillé auparavant à partir du projet 2. Le type est génial dans l'illustrateur. Je pense que l'illustrateur gère le type incroyablement bien. Je pense qu'il le gère mieux que dans Photoshop. Je pense que c'est vraiment l'un des points forts du programme, car une grande partie d'un design web est de type. Je pense qu'avoir un outil qui le gère bien est incroyablement utile, et je me suis toujours cogné la tête contre le mur essayant d'amener Photoshop à faire ce que je voulais vraiment. Donc, parlons d'abord de la façon dont nous créons le type dans Illustrator. Tout d'abord, nous utilisons l'outil de type. Vous voyez ici très vite. C'est par ici. Vous pouvez utiliser la touche de raccourci T, pour y arriver. Cliquer, vous donnera une, une zone ou vous donnera un curseur pour ensuite taper votre type. Alors, on peut, « C'est un gros titre. » Ce titre est audacieux, moche, et je voudrais le changer pour autre chose. Donc, vous pouvez voir ici nous avons quelques presets vraiment rapides pour votre personnage. C'est la famille de polices. Il s'agit du style de police spécifique, de la taille, du paragraphe. C' est vraiment tout ce dont vous aurez généralement besoin, sauf si vous avez affaire à plein sur les paragraphes et les choses, mais si vous avez besoin de faire ajustements individuels, vous pouvez cliquer ici sur le panneau de caractères. C' est là que vous allez obtenir tous les éléments de votre personnage. Il y a la taille, la hauteur de la ligne , la mise à l'échelle, qui jamais, jamais, jamais, jamais, utiliser la mise à l'échelle de type parce que cela va biaiser vos polices , et ce sera super laid, et c'est le crénage, si vous voulez créner des trucs dehors. Tout cela est probablement couvert dans d'autres classes. C' est juste en dessous de ce paragraphe. C' est là que vous allez voir toutes vos options d'alignement, la justification, l'espace au-dessus, l'espace ci-dessous, c'est à ce moment que vous allez vraiment faire face à des tonnes de type. Vous pouvez avoir besoin de cela pour certains projets, vous ne pouvez pas. Une autre chose à prendre en compte est le trait d'union. Donc, la césure automatique est génial lorsque vous travaillez sur un livre ou quelque chose que vous allez imprimer, mais ce n'est pas génial lorsque vous travaillez avec des sites Web parce que les sites Web ne font pas de coupure de mots. La plupart des navigateurs n'ont rien vraiment intégré, la plupart des sites Web ne mettent pas automatiquement les traits d'union quand ils deviennent trop longs. Donc, afin de voir le vrai chiffon de votre type, et avoir une représentation vraiment précise de ce qu'un visiteur va voir. Vous voulez vous assurer que ce trait d'union est désactivé. Donc, tout d'abord, je veux faire un titre pour notre site web juste mon site général. D' accord. Donc, d'abord, je vais m'occuper de mon titre. Je vais changer la police ici en museo sans, c'est ce qu'on utilise. Allez-y et changez ça comme les neuf cents, gentil et grand. C' est un gros titre. Un gros gros gros titre. Vous remarquerez que vous pouvez utiliser les mêmes outils de mise à l'échelle, les mêmes outils édition et les mêmes outils de sélection que nous avons parcourus dans le didacticiel sur les formes. La plupart du temps, votre ligne de texte est traitée comme une forme. Vous voulez vous assurer que lorsque vous le mettez à l'échelle, vous ne le mettez pas à l'échelle en cliquant simplement et en faisant glisser, car cela va vraiment biaiser votre type. Vous voulez vous assurer que vous maintenez toujours la touche shift enfoncée pour assurer que la proportion du type reste la même. Alors. Je vais aller de l'avant, et construire un petit titre centré. Voyons voir. Bon, maintenant que nous avons notre titre, allons de l'avant et peut-être nous faire un sous-texte. Alors, faisons ça. Donc, nous allons utiliser l'outil de type. Si je clique sur l'outil de type comme je l'ai fait avant et que je copie par exemple tout un tas de lorem ipsum, cela va être un problème, cela va être un problème, parce que l'outil de type normal tout seul n'a pas de conteneur. Donc, nous allons aller de l'avant, et supprimer ça. Ce que nous voulons faire est d'utiliser l'outil de type et de cliquer et faire glisser pour définir un cadre de sélection pour notre type. Donc, une fois que nous avons défini cette boîte de délimitation en cliquant à l'intérieur de celui-ci va garder tout le type à l'intérieur là. Donc, je vais frapper la commande A pour tout attraper. Évidemment, je ne veux pas que toute cette copie soit de 48 points de haut, je ne veux pas qu'elle soit super audacieuse. Donc, on va le déplacer à 500. Donc, que c'est sympa et lisible. Personne dans leur bon esprit ne veut lire autant au sommet d'un site Web, d' abord il va falsifier d'être à propos de ce gros. Vous remarquerez que vous pouvez modifier le cadre de sélection. Si quelque chose ne rentre pas dans le cadre de sélection vous allez voir ce petit plus rouge, pour indiquer qu'il y a plus de type qui ne convient pas. Donc, vous pouvez fondamentalement changer cela et le déplacer. Cela va nous donner juste un titre et une sous-copie super simples. Maintenant, disons que nos lignes étaient peut-être un peu rapprochées, peut-être que nous voulons les éloigner un peu plus loin. C' est là que quelque chose comme la hauteur de la ligne va être utile. En règle générale, j'aime généralement garder les choses environ un point cinq fois la taille de la police, mais pour quelque chose où, où il est un peu plus grand peut-être c'est une sous-copie, une copie de titre. J' aime le garder serré, alors peut-être 30. 30, c'est un peu mieux que 28. Donnez-lui juste un peu de place pour respirer. Donc, vous pouvez voir si on fait un zoom arrière. Nous avons maintenant un très beau titre. Là-haut, gardez notre sous-type, là-haut. Passons à ces témoignages. Donc, je veux créer juste un style de type vraiment sympa pour ces témoignages. Dites que je veux faire quelques choses, ce que la personne a dit, peut-être d'où ils venaient, qui ils sont. Ça a l'air d'un grand témoignage. Donc, nous allons prendre tout ça, rendre juste la taille normale de la copie corporelle dire 12, peut-être le faire tomber à la taille 300. Évidemment, c'est le laisser ici est beaucoup trop. On veut ramener ça à 18, prendre tout ça. Évidemment, nous ne voulons pas vraiment qu'ils soient centrés non plus, c'est un peu drôle là-bas, donc nous allons prendre ça. Viens ici à l'alignement. Gauche aligner, je pense que peut-être un peu plus grand, qui semble petit. 14, 21. Bot-a-choing-Bot-a-boom, on y va. Donc, coupons cela pour qu'ils ne soient pas incroyablement longs. Maintenant, ce qu'on peut faire, c'est venir dire que ça a été fait par un type. Je veux que quelqu'un se démarque un peu. Je vais aller de l'avant et faire ce 900, et peut-être qu'il est comme moi. Il vient de Dayton Ohio. Je ne veux pas que ça soit super audacieux non plus, donc je vais ramener ça à 500, et peut-être le faire tomber en taille juste pour que ce ne soit pas un super dans votre visage. Vous pouvez aussi faire des choses cool ici. Si vous regardez dans l'outil déroulant. Vous pouvez faire des choses toutes les bouchons, ce qui est génial, si vous voulez que quelque chose soit toujours dans toutes les majuscules. Vous pouvez également faire d'autres options. Un peu plus compliqué, exposants, indice, vous pourriez vouloir des petites majuscules. Habituellement, tous les capuchons sont celui que j'utilise le plus souvent. Donc, c'est là-haut. D' accord. Donc, maintenant que nous avons ça, nous allons vouloir peut-être changer un peu. Je ne veux pas vraiment que ça coule jusqu'ici. Pour le bien de peut-être rendre les choses pas si laides, je vais juste couper ce mot un peu, mais tellement comme nos formes que nous avons créées plus tôt, vous pouvez utiliser les mêmes outils pour vous assurer que cela ceux-ci sont espacés uniformément avec le reste du type. Donc, nous voulons que ceux-ci à gauche s'alignent sur les blocs de graphiques au-dessus. Donc, je vais prendre tous ces éléments, et je vais utiliser mes outils alignés pour sûr ici, puis me déplacer, et les aligner un peu, et cela va créer une zone de témoignage vraiment agréable en bas. Donc, maintenant que nous avons du contenu emballé, comment pouvons-nous le rendre cool, parce que j'aimerais que mon site utilise effectivement quelques couleurs. Les couleurs sont importantes et les couleurs sont aussi, sont vraiment génial dans Illustrator, et l'une des raisons pour lesquelles j'aime utiliser ce programme. Donc, la palette de couleurs est vraiment là où vous allez faire la plupart de votre travail. Changer vos couleurs, bricoler avec eux, pour s'assurer qu'ils sont absolument parfaits. La seule chose que je veux souligner qui va être super utile pour plus tard est cet outil hexadécimal juste ici. Maintenant, cet outil, RVB couleurs typiques quoi que ce soit sur un écran est une valeur RVB. Donc, ce sera le moyen le plus simple de savoir quelles couleurs vous voulez utiliser, mais quand vous prenez cette couleur, vous ne pouvez généralement pas donner à un développeur une couleur RVB, moins qu'il n'utilise des valeurs RGBA CSS 3 très compliquées. Donc, ce sur quoi vous allez vouloir compter est la valeur hexadécimale. La valeur hexadécimale est ce que le navigateur utilise pour déterminer quelle est cette couleur. Alors, commençons à colorier certains d'entre eux. Alors, et si je veux que cette zone supérieure soit bleue. Allons-y et choisissons un très beau bleu. J' utiliserai le bleu le plus proche de mon cœur, 0093da. C' est très bleu. Donc, nous avons une grande zone d'en-tête bleue. Peut-être que je veux que le titre apparaisse et qu'il soit blanc à la place. Peut-être que je veux que ce soit plus un traîneau au lieu d'un noir classique. Ainsi, vous pouvez déplacer et faire glisser ces éléments pour changer de couleur pour trouver ceux que vous aimez. Maintenant, le vrai problème est que faire si je veux utiliser ces couleurs encore, et encore, et encore ? Eh bien, la réponse est assez simple. Vous pouvez cliquer sur n'importe quelle forme, saisir sa couleur, cliquer et faire glisser, l'ajouter aux nuanciers. Maintenant, ce que cela va faire, c'est que ça va sauver cette couleur, afin que nous puissions la référencer, et l'utiliser encore, et encore, et encore. Donc, je veux sauver ce traîneau, et je veux aussi sauver ce bleu. Tu as remarqué la dernière fois que je l'ai attrapé d'ici. Vous pouvez aussi l'attraper d'ici, et le tirer là-bas aussi. Donc, cela va être vraiment utile pour créer une palette que vous utilisez encore, et encore, encore, pour vous assurer que les couleurs que vous utilisez sont toutes exactement les mêmes. Si cela devient un peu trop encombré ici, ce qui parfois il fait, vous pouvez descendre ici et simplement sélectionner tous les inutilisés. Ça va saisir toutes les nuances que vous n'utilisez pas. Ensuite, vous pouvez faire glisser des nuanciers vers la corbeille pour les supprimer. Donc, cela va essentiellement nous donner le noir et le blanc et les deux couleurs que nous avons définies comme nos couleurs pour notre design. Donc, je vais emménager ici et je vais faire la même chose avec ça. Je vais attraper ces gars. Je vais leur faire cette couleur lisse. Maintenant, quand je prends un bloc entier de texte, il va en fait coloriser tout ce qu'il contient. S' il y a un élément spécifique du texte que vous voulez être une certaine couleur, alors vous pouvez entrer avec votre outil de type, et sélectionner juste cela, puis monter et indiquer quelle couleur vous pensez qu'il devrait être à la place. Donc, je vais aller de l'avant et faire ces bleus, peut-être que je ne veux pas que ça se distingue autant, alors je vais peut-être le rendre un peu plus léger gris. Donc, j'espère que tout cela vous donne une poignée sur la façon d'utiliser les couleurs et taper pour ajouter beaucoup de personnalité et obtenir du contenu réel dans vos conceptions de site. 4. Ajouter des styles et des effets : Bonjour encore, et bienvenue au quatrième projet de cette classe. Ce projet est tout au sujet du style et de l'ajout de style aux différents éléments de votre site web. Donc, pour illustrer tous ces points, nous allons commencer par faire un très joli bouton haut de notre site Web pour donner à tout le monde un appel général à l'action. Donc, je vais aller de l'avant et commencer juste avec un carré de base. Je vais le créer ici, déplacer au centre pour qu'il soit vraiment bien assis. Donc je pense que je vais choisir quelque chose, allons de l'avant avec notre ardoise. Juste pour que ce soit sympa et lourd. Nous allons donner à ce bouton une étiquette qui dit simplement, « Fais quelque chose de génial », faisons-le blanc pour qu'il se détache et nous allons juste centrer les alignements aussi. Impressionnant. Donc maintenant, nous avons notre bouton assis ici, mais ça n'a pas l'air si génial. Alors, commençons par lui donner une frontière. Donc, les pensionnaires sont ici, ça s'appelle techniquement un accident vasculaire cérébral. Vous pouvez coloriser votre trait comme vous le feriez n'importe quelle forme normale en utilisant cette palette de couleurs ici. Donc, je vais aller de l'avant et juste le rendre blanc pour l'instant. Pour réellement changer la façon dont le trait ressemble, pour ajouter n'importe quelle sorte d'éléments supplémentaires, vous pouvez venir ici, la partie la plus importante de ceci est fondamentalement le poids où vous pouvez changer la façon dont votre bordure fonctionne, quel point il est épais et comment il entoure l'objet sur lequel il se trouve. Vous pouvez donc aligner cette bordure au milieu, aligner à l'intérieur ou l'aligner à l'extérieur. Mais vous pouvez voir parce que j'ai une forme carrée, les points de toutes mes frontières sont carrés. Une chose que je peux faire est essentiellement de choisir cet outil de coin pour entrer et dire à l'illustrateur que je ne veux pas que ces éléments aient un point de coin super, super pointu, je veux qu'ils soient un peu arrondis. Cela fonctionne très bien, et donne juste à certains de vos éléments plus carrés une sensation un peu plus douce. Je ne veux vraiment pas que ce soit blanc parce qu'il se démarque un peu trop. Donc, je vais aller peut-être sélectionner une couleur personnalisée. Allons de l'avant et choisissez la couleur de fond, puis, peut-être que je veux qu'il soit un peu plus sombre que l'arrière-plan. Ouais, c'est sympa. Alors allons de l'avant et ajoutons un dégradé à nos boutons juste pour le faire se démarquer un peu. Nous allons aller à la barre d'outils du dégradé, nous allons sélectionner le bouton auquel nous voulons donner un peu de profondeur. Nous allons sélectionner le type de gradient que nous voulons, nous allons utiliser un gradient linéaire, sorte qu'il soit négatif 90, donc c'est juste sympa et va de haut en bas. Vous pouvez essentiellement prendre ces couleurs et les faire glisser vers le bas dans votre élément pour changer les différentes couleurs qui composent votre dégradé, couleur dans laquelle il est en transition. Vous pouvez créer plusieurs étapes entre les deux en cliquant sur d'autres points le long de ce dégradé, et vous pouvez les cliquer et les faire glisser pour les éliminer, ce qui semble agréable. C' est juste un dégradé très simple pour donner à ce bouton un peu de profondeur afin que les gens qui visitent votre site vont certainement vouloir cliquer sur cette chose. Maintenant, en plus d'ajouter des dégradés à des objets, vous pouvez également utiliser une multitude de styles de calque et d' effets qui vous aideront à modifier vos formes et à leur donner un peu de style supplémentaire. Alors explorons quelques uns d'entre eux. L' un de ceux que j'utilise le plus souvent est en fait le rayon de bordure. Donc vous pouvez voir que nous avons un simple bouton carré. Mais, personnellement, j'aime un joli bouton de coin arrondi. Donc, je vais monter ici pour affecter les coins ronds stylisés. Maintenant, cela va me donner une petite boîte de dialogue qui me demande, quel point je veux qu'ils soient arrondis. Vous pouvez aller de l'avant et en prévisualiser simplement en cliquant sur ce petit bouton d'aperçu juste ici. Je fais habituellement quelque part autour de cinq pixels, c'est ce qui me semble généralement agréable. Maintenant, nous avons quelques coins arrondis sur notre bouton, explorons quelques-uns des autres effets qui nous aideront à ajouter de la profondeur. Nous allons aller ici à la zone des témoignages pour vraiment essayer ça. Donc, je vais prendre toutes ces formes, allons de l'avant et les rendre blanches. Je veux les faire sortir un peu de la page. Donc, pour ce faire, je vais les utiliser tous. Je vais utiliser la lueur extérieure. Maintenant, je préfère la lueur extérieure pour laisser tomber les ombres simplement parce que c'est un peu plus facile à gérer, et parce qu'avec les lueurs extérieures, la lueur est égale et commence au centre d'une forme au lieu de ressembler à une lumière directionnelle. Donc, pour moi, c'est la meilleure façon d'ajouter un peu de lueur à l'extérieur. Donc, je veux aller de l'avant et changer le mode pour se multiplier, ça va nous donner une belle lueur tout autour. D' habitude, je n'aime pas que ça soit super sombre, donc je vais habituellement vers 25 ou 15 ans, peut-être serrer un peu le flou. Je veux vraiment que ce soit subtil, alors je vais aller de l'avant et faire ça, puis enlever ça. Ensuite, vous pouvez voir que juste en ajoutant ce petit peu de lueur à l'extérieur de ces éléments, ils commencent vraiment à sortir de la page un peu, et c'est un moyen super facile de donner une profondeur minimale sans souffler les choses trop loin. Si vous ajoutez ces effets à des objets, vous pouvez toujours les éditer super facilement plus tard en utilisant le panneau Apparences ici. Donc, ce que fait le panneau d'apparence est, il vous dit tout sur une forme et ce qui est appliqué à elle. Ainsi, vous pouvez voir qu'il n'y a pas de trait, il a un remplissage blanc, il a une lueur extérieure, il a une opacité par défaut. Vous pouvez en quelque sorte prévisualiser ces choses en les désactivant et en les activant, vous pouvez également double-cliquer sur un effet pour les modifier rapidement et les modifier. Peut-être que c'était un peu plus léger et que je voulais qu'il soit plus sombre, je puisse entrer et ajuster immédiatement ça. Vous pouvez également prendre tous les effets et simplement les supprimer complètement en les saisissant et en les déplaçant ici à la poubelle. Cela reviendra à ce qu'ils étaient avant qu'ils n' aient des styles appliqués à eux. C' est donc l'exécution rapide des styles de calque, des dégradés, des bordures, et la façon dont vous pouvez embellir vos éléments pour les rendre plus interactifs et leur donner un peu plus de profondeur. 5. Ajouter des images: Donc, avec les quatre derniers projets que nous avons parcourus, comment configurer votre document, comment créer des formes et comment créer les éléments de la conception de votre site Web, mais cela exclut l'une des plus grandes pièces de la conception Web et c'est images. Donc, ce projet va être sur la façon d'importer des images dans votre document, gérer des images, et simplement de les utiliser en général. La première chose que nous allons examiner est de savoir comment obtenir des images dans votre document. Donc, le moyen le plus simple de saisir des images et de les extraire dans votre document est en fait simplement de les faire glisser dans votre document. Je l'ai fait avec quelques images ici que nous allons utiliser dans le tutoriel et cela devrait également être dans le fichier illustrateur que je fournis plus tard, mais c'est vraiment la façon la plus simple de lancer des trucs ici. L' autre façon de le faire est de venir ici à la commande Placer, et vous serez en mesure de saisir, et de sélectionner une image de n'importe où ailleurs sur votre ordinateur, et cela va simplement la placer dans votre document. Donc, une fois que vous avez une image que vous voulez utiliser comme je vais utiliser ce café grisé comme juste un arrière-plan général pour ma zone d'en-tête. Donc, je vais le mettre à l'échelle un peu, pour qu'il corresponde. Je vais utiliser la commande pour le pousser à l'arrière. Donc, c'est tout le chemin dans le dos et ensuite je vais utiliser un outil super cool appelé un masque de coupe. Ce qu'un masque d'écrêtage fait essentiellement, c'est qu'il prend une grande image d'illustration, tout ce qui est vraiment grand, et utilise une autre forme pour le clipser dans cette forme principale. Donc, la façon la plus simple de le faire est fondamentalement juste d'avoir deux boîtes. Je vais aller de l'avant et le faire avec l'en-tête. Donc, vous le faites essentiellement en saisissant les deux formes. Assurez-vous que la forme que vous souhaitez découper se trouve derrière la forme que vous souhaitez réellement être le masque. Nous allons monter ici à Object, Masque d' écrêtage et Make. Maintenant, vous pouvez voir ce que ça a fait. Il a fallu toute cette grande image, l' a découpée à la taille de cette forme d'en-tête que j'avais créée plus tôt. Donc, ce que vous pouvez faire pour modifier réellement c'est que vous pouvez utiliser l'outil de sélection directe, qui vous permettra de saisir l'élément lui-même, et vous pouvez faire des choses comme le coloriser. Mais en ce moment, il y a cette image qui s'y trouve. Donc, je veux un peu de ce bleu pour montrer à travers. Donc, je vais en fait utiliser l'outil de sélection directe, pour sélectionner cette image, puis je vais venir ici, et peut-être changer l'opacité vers le bas. Allons avec peut-être quelque chose comme 30, qui a l'air un peu mieux. Ils peuvent le voir un peu fantôme là-bas, juste lui donner un peu de personnalité. Donc, vous pouvez voir des masques d'écrêtage dans quelque chose peut-être un peu plus compliqué ici. Donc, je vais prendre certains de mes collègues préférés et les transformer en avatars. Donc d'abord, comme avant, quelqu'un va de l'avant et envoie ça à l'arrière. Je vais prendre cette forme puisque ça fait partie d'un groupe. Je vais aller de l'avant et le dégrouper, pour que ça puisse être tout seul. Ensuite, je vais l'utiliser comme un masque, et vous pouvez voir qu'il faut cela, et vous pouvez même l'utiliser pour des formes composées aussi, ce qui je pense est vraiment cool. Donc je veux faire ça avec tous ces types. Collez le, envoyez à l'arrière, groupe qui nous allons juste [inaudible] il. Maintenant, vous pouvez voir que j'utilise l'outil de sélection directe, et je peux réellement déplacer cette image à juste un endroit où je le veux, je peux redimensionner cette image là-bas, utiliser les outils fléchés pour vraiment position que, où je pense qu'il devrait aller et où il semble vraiment le meilleur. Vous n'avez pas à effectuer toutes les modifications avant d'insérer des éléments dans les masques de découpe. Alors, maintenant, nous avons trois gars cool, refroidissent dans notre section des témoignages. Ils sont tous des gars, et ils ont dit des choses qui sont sympa, quel que soit mon faux petit site web. Je vais aller de l'avant et en fait illustrer une autre chose cool sur le masque de coupe, et c'est que vous pouvez réellement clipser les masques à l'intérieur d'un masque. Vous pouvez faire tout l'écrêtage que vous voulez, vous pouvez voir qu'il s'agit en fait d'un masque d'écrêtage aussi. C' est juste une interface qui a été coupée à l'intérieur de ce très joli petit carré arrondi. Ce que je vais faire est en fait, utilisez ce même conteneur ici pour mettre cela dans l'en-tête aussi bien. Donc, voyez-vous, je vais prendre cette boîte de délimitation, à partir de l'image de mon café. Je vais copier cela, puis le coller en place, et vous pouvez voir qu'il le colle juste là où il était avant. Ensuite, je vais utiliser cette forme comme masque d'écrêtage pour mon interface. Maintenant, je peux réellement prendre cela et je peux le déplacer aussi loin que la profondeur est concernée. Alors, si je veux, je peux faire d'autres choses comme venir ici pour avancer un peu. Il a une belle petite bordure en bas, je vais peut-être, je peux double-cliquer ici pour modifier réellement ce qui est à l'intérieur d'un masque de coupe. Cela me laissera juste gérer ce qu'il y a à l'intérieur de ce masque, et je peux en quelque sorte prendre ça peut-être, je ne veux pas qu'il soit si haut pour vraiment entrer dans les déchets. Donc, je vais déplacer ça vers le bas, ou peut-être rendre mon bouton un peu moins énorme parce que c'est assez gros. Prenons cela ici, au cours de la conception de votre site Web, vous allez finir avec beaucoup d'images ici, et il est facile d'en perdre la trace. Les choses vraiment agréables que l'illustrateur a intégré en elle est un panneau Liens. Vous pouvez voir ici, je vais juste le traîner ici. Cela vous indique toutes les images qui sont liées à l'intérieur de votre document. Maintenant, il y a deux types d'images dans un document illustrateur. Il y a des images intégrées et il y a des images liées. Les images incorporées sont excellentes car elles sont réellement incorporées dans votre document. Mais c'est aussi une sorte de perte, car plus les images sont incorporées au lieu d'un document, plus la taille du fichier de document est grande. Si vous voulez garder votre taille de fichier petite, alors vous pouvez simplement lier à images externes comme nous l'avons fait avec notre image de café à l'aide de l'outil place. Cela s'affichera comme une image, tandis que les images incorporées, images qui sont placées directement dans notre document, apparaissent avec ce petit outil intégré. Une autre petite chose cool à propos de ce panneau, est qu'il a un vrai bouton de lien et aussi un bouton aller à lien. Le bouton Aller au lien, vous permettra en fait de sélectionner une image et il vous mènera directement à l'endroit où se trouve cette image dans votre document, et de la sélectionner pour vous. Vraiment utile si vous avez des tonnes d'images, et que vous essayez de changer, disons l'une d' entre elles et vous voulez juste trouver où il est vraiment rapide. C' est vraiment l'essentiel de la façon dont les images fonctionnent dans illustrator, et comment vous pouvez les ajouter à votre document, pour rendre les choses un peu plus personnelles. Donc, maintenant que nous avons une sorte de ces images là-dedans, allons rapidement élaborer le reste du design de ce site Web et je vais vous montrer comment je fais les choses en cours. Donc, notre zone de manchettes est à peu près réglée. Nous avons un beau gros titre, sorte de sous-type, et en général, vous allez avoir des trucs d'explication là-haut chaque fois que, appeler à l'action, des graphismes cool, avoir une petite zone de témoignage. Je vais aller de l'avant et créer une petite règle pour couper cela du reste. Au lieu d'être blanc, je voudrais que ça fasse probablement ce genre de couleur lisse. Non, beaucoup trop sombre. Faisons que ce gris très clair. Fait. Ça a l'air génial. Donc, j'aime vraiment ces boîtes, donc je vais utiliser ces boîtes à nouveau pour peut-être une petite zone ici qui appelle un couple de dire vos fonctionnalités de mon application que je construis. J' allais utiliser ce type à nouveau parce que c'est juste lorem ipsum. Peut fondamentalement, voyons, étaler cela de sorte qu'il va à deux chefs. Nous pouvons retourner nos guides pour que nous sachions comment le faire. Allons de l'avant et faisons ça. Ajoutez quelques lignes ici. Je dirai que c'est une sorte de caractéristique. Maintenant, disons que je veux qu'il imite l'autre type qui est autour de mon document. Ce que je peux faire avec l'outil pipette est essentiellement aller et trouver un autre ensemble de type et en cliquant dessus, je peux imiter complètement ce type. Ainsi, vous pouvez voir qu'il copie tout, de la police à l'espacement en passant par l'alignement. Donc, je vais aller de l'avant et changer ça pour lui donner un peu d'alignement. Maintenant, c'est ici mais ces choses sont assez espacées un peu trop loin à mon goût, donc je vais prendre ceci, je vais le supprimer, et je vais utiliser une fonctionnalité de paragraphe. Assurez-vous que vous avez ce genre. Donc, c'est l'espace après les paragraphes et cela vous permet en fait de taper une quantité d' espace que vous voulez venir après juste une ligne spécifique ou une quantité de texte que vous avez sélectionné. Je l'utilise beaucoup pour cette chose exacte, c' est-à-dire que vous prenez un titre, vous voulez ajouter un peu d'espace supplémentaire, vous ne voulez pas votre grand titre, et toute votre petite copie corporelle juste assis l'un à côté de l'autre. Donc, fondamentalement, nous pouvons l'utiliser. Nous pouvons également faire d'autres choses cool comme saisir ceci et venir, peut-être changer sa couleur pour que toutes ces fonctionnalités soient appelées avec du bleu. Peut-être que nous voulons tirer ça un peu plus serré pour qu'il s'adapte et ensuite centrer ces choses horizontalement juste pour que nous n'ayons pas cet espace funky ici. Nous pouvons le faire ici avec notre alignement. Utilisez l'horizontalement aligné verticalement et puis nous savons que tout est assis bien à côté de l'autre. Maintenant, si je voulais que cela dise peut-être que vous voulez créer un deuxième ensemble de ceux-ci, nous pouvons utiliser ce drag and shift tout permettre de maintenir la touche d'option enfoncée pour créer un autre ensemble de ceux-ci qui est juste les mêmes espaces un peu près. Donc, je vais juste déposer ça ici un peu. Tous les bons sites Web ont un pied de page. Donc, je vais peut-être indiquer ça. Créons un peu. Créons un ceci une zone plus ajustée. Attrapez ça avec l'espacement pour être à peu près le même que ce qui est au-dessus, alors peut-être tirez ça vers le bas. Impressionnant. Ça marche plutôt bien. Je vais venir ici avec mon type, et allons de l'avant et juste donner une belle, voyons, Copyright 2014, Ryan Clark, Tous droits réservés. Ne copiez pas les choses. Allons de l'avant et utilisons ce type ici pour rendre la faute de frappe blanche. Donc, sélecteur de couleurs. Maintenant, nous avons besoin d'un droit d'auteur. Tous les droits d'auteur ont besoin d'un véritable symbole de copyright. Donc, je vais vous montrer comment vous pouvez avoir accès aux glyphes de votre type. Fondamentalement, tu veux monter ici à une fenêtre. Je veux descendre ici taper, ouvrir tes glyphes, et ça ouvre ton panneau glyphes. Cela vous montre essentiellement tous les caractères de votre police entière afin que vous puissiez creuser à moins que vous ne connaissiez les raccourcis et que vous trouviez exactement ce que vous voulez. Alors, qu'est-ce que tu veux ? Droit d'auteur. Double-cliquez car il est juste là dans votre type. Super sympa. Allons-y et fermons ça. droits d'auteur n'ont pas besoin d'avoir 24 points de hauteur, donc nous pouvons aller de l'avant et faire ce 11. Ça va se refroidir ici, dans notre zone de pied de page. Joli, centré. Donc, cela va juste à squelette de site Web super simple. Si j'allais continuer à avancer sur cette heure, sans doute jeter comme quelques exemples de sites de ces personnes ou une autre sorte d'images contextuelles à ajouter là-bas, une chose que je peux vous montrer les gars comme si vous vouliez peut-être les faire sortir de l'arrière-plan un peu, vous pourriez aller et ajouter juste une très belle petite bordure blanche, peut-être donner un peu de taille supplémentaire pour qu'il se démarque un peu. Tu peux y retourner, et je vais attraper ce type. Vous pouvez également utiliser la pipette pour copier des styles de forme qui sont tout simplement super, super utile. Donc, je vais les saisir et leur donner la même frontière. Donc, maintenant ces gars sortent un peu de ces formes de fond pour qu'ils ne soient pas si au-dessus d'eux. Donc, comme je l'ai dit, c'est juste un squelette de site vraiment, vraiment général. Je vais en fait inclure ceci dans le fichier de la classe juste pour que vous l'ayez et que vous puissiez l'utiliser et le gâcher si vous voulez. C' est mieux. Personne n'aime les filtres super brillants de toute façon. Donc, j'espère que vous avez apprécié ce cours, avez tiré des choses. Espérons que je n'ai pas trop parlé de mal, mais ce sont vraiment les outils que j'utilise chaque jour construire des sites Web pour Ferb et pour d'autres personnes, pour mes clients. Je pense qu'Illustrator est un outil absolument fantastique pour conception Web juste basé sur la façon dont il traite les formes et le type, qui sont vraiment le cœur de n'importe quel site Web. Donc, espérons que nous développerons cette classe à l'avenir pour ajouter des fonctionnalités plus avancées et passer par des choses encore plus cool qu'Illustrator fait. Mais c'est juste un excellent point de départ. Alors, continuez à travailler. Donnez-moi toutes les questions que vous avez. Je suis toujours là. Je suis sur Twitter à ryanvsclark. J' ai hâte de voir ce que vous venez avec en ce qui concerne vos projets pour la classe et merci d'avoir suivi. Au revoir les gars. 6. Explorez la conception dans Skillshare: façon.