Conception d'interfaces utilisateur et de sites web à l'aide d'Adobe Illustrator CC

1. Introduction: Salut là. Je m'appelle Dan et je suis un instructeur certifié Adobe pour Illustrator. Dans cette série de vidéos, nous allons utiliser Adobe Illustrator pour créer ensemble un projet de conception Web et d'interface utilisateur. Nous allons utiliser un projet du monde réel. Nous commencerons par notre portefeuille. Vous connaissez le portefeuille, celui que vous avez prévu de construire pour toujours, mais vous n'avez pas réussi à le faire. On va construire ça ensemble maintenant. J' ai fait ce cours pour les débutants. Vous n'avez pas vraiment besoin d'une connaissance préalable d' Illustrator ou d'une autre expérience de conception. On va commencer par les super basiques. Peu importe si vous souhaitez utiliser Illustrator pour la conception d'applications ou de web, les techniques sont les mêmes. Nous allons passer par le processus complet de l'interface utilisateur. Je vais vous montrer comment utiliser Illustrator pour créer sitemap, puis créer vos premiers filaires. Nous commencerons ensuite à concevoir notre tablette mobile et notre site de bureau à l'aide de polices, couleurs et d'images réactives. Nous allons créer nos propres icônes et logos personnalisés, apprenant à utiliser l'outil Stylo et l'outil formidable Shape Builder. Au moment où nous aurons terminé, vous saurez exactement ce que vous attendez de vous en tant que concepteur d'interface utilisateur, en fournissant des images rétiniennes réactives et du code CSS afin que votre merveilleux design Web soit parfaitement reproduit comme un site Web. A la fin de cette série de tutoriels, il y a un projet. Il a une tâche définie que vous devez faire pour un client adapté, et vous pouvez l'utiliser dans le cadre de votre portefeuille pour aider à construire cela. C' est comme des devoirs, sauf que je vais appeler ça le développement des transporteurs. Il est temps d'améliorer vos compétences, d' obtenir un meilleur travail et d'impressionner vos clients. Je ne sais pas, ils commencent à agiter quand je commence à parler, comme si j'étais dans une comédie musicale. 2. Suis-je un designer UI UX maintenant: Maintenant, la question est, après ce cours, vais-je être un concepteur UX de slash d'interface utilisateur ? Tu le vois partout, ils vont de pair. Ce sont des choses très différentes. Après ce cours, vous pouvez dire, « Oui, je suis un concepteur d'interface utilisateur. » Je peux construire des interfaces utilisateur, comme les sites Web qui allaient faire, et la conception d'applications qui est l'interface utilisateur. Oui. Nous utilisons des outils comme Illustrator, entre autres que vous pourriez utiliser pour devenir concepteur d'interface utilisateur. Maintenant, en termes d'UX, l'expérience utilisateur, c'est une bouilloire de poisson totalement plus grande ou une autre chose. Vous utiliserez la conception de l'interface utilisateur dans le cadre d'un concepteur UX, mais il y a beaucoup d'autres choses qui font un concepteur UX. Il y a beaucoup plus autour de l'établissement d'objectifs, il y a de la recherche, il y a des tests, puis il y a aussi toute la phase de construction d'un projet. Maintenant, nous n'allons pas couvrir la conception UX dans ce cours. J' ai un autre cours complet sur le fait d'être designer UX, alors allez voir ça. Cela se concentre davantage sur l'interface utilisateur, qui fait partie de UX, mais pas tout. 3. Conception d'un UI : Photoshop, Illustrator, Sketch, InDesign ou Adobe XP: Dans cette vidéo, nous allons parler de ce que font les produits, car Adobe en a beaucoup. Il y a d'autres concurrents aussi sur le web dans la conception de l'interface utilisateur. Parlons des principaux produits Adobe. Nous parlerons d'InDesign contre Photoshop et Illustrator, que vous devriez utiliser. Celui que vous devriez utiliser est Photoshop ou Illustrator. Photoshop a un petit avantage sur Illustrator, principalement pour moi c'est quelque chose qu'on appelle l'aperçu de l'appareil. Si vous avez des compétences Photoshop, j'ai un cours complet de Photoshop, c'est exactement comme Illustrator 1 qui fait de la conception Web de l'interface utilisateur, alors allez vérifier cela. Mais nous sommes là pour apprendre Illustrator. Photoshop a le léger avantage pour la conception web en particulier sur Illustrator, mais pas assez pour dire ne pas utiliser l'un d'eux, ils sont tous les deux assez impressionnants. Illustrator, nous allons le regarder ce cours complet, et il est parfait pour le web et l'interface utilisateur, mais il vous donne également des compétences en termes de conception de logos et de symboles. Beaucoup de gens apprendront Illustrator parce qu'il a un double objectif. Vous pouvez l'utiliser pour un tas de choses différentes, ainsi que pour l'impression, ainsi que pour le web. Parlons d'InDesign. InDesign serait un no-go pour moi. Vous pouvez faire du web designer, il y a un fichier, un nouveau document, et vous pouvez choisir quelques fonctionnalités web, mais il manque tellement de goodies qui vous aident à développer l'interface utilisateur pour web et les applications que je l'utiliserais si vous êtes quelqu'un qui avait seulement InDesign le problème est que vous ne pouviez pas obtenir un emploi en tant que concepteur web à l'aide d'InDesign. Donc oui, InDesign manque trop de fonctionnalités. C' est pour les documents seulement. C' est plus comme une grande version de Word. Le groupe suivant est quelque chose appelé XD, Experience Design d'Adobe, c'est nouveau, c'est toujours en avant-première, c'est vraiment cool, mais c'est toujours en avant-première et il manque beaucoup de fonctionnalités. Je l'ai utilisé plusieurs fois et c'est vraiment bon, mais ce n'est pas encore comme un produit de production complet. J' utilise toujours des choses comme Illustrator et Photoshop, alors que XD finalement, j'ai l'impression que ce sera le produit à utiliser pour la conception web peut-être. C' est certainement celui qui se concentre davantage sur le développement d'applications que sur le web. Je pense que ce sera sa maison. Ce sera pour les développeurs d'applications ou les concepteurs d'applications. Des choses comme Illustrator et Photoshop resteront pour la communauté du web design. Le dernier produit à parler est quelque chose appelé Sketch. C' est en dehors du royaume d'Adobe. C' est un autre produit concurrent. Le produit avec lequel il est le plus en concurrence est Experience Design Adobe XD, car il s'agit plutôt d'un design d'application. Si je devais maintenant être un propriétaire à part entière d'Adobe faisant des applications, je m'assurerais que mes compétences Sketch étaient assez bonnes aussi. Vous pouvez tout faire dans Illustrator, c'est tout à fait bien, vos développeurs d'applications ne vont pas détester, mais Sketch est tout à fait en ce moment en termes de recherche d'emplois. Donc Sketch est un produit assez cool à utiliser, mais il est spécifiquement pour l'application. Vous pouvez l'utiliser pour le web, ce n'est pas un problème avec ça, mais j'ai l'impression que Photoshop et Illustrator sont mieux à faire ce truc web. Il y a beaucoup plus de produits matures et ils ont beaucoup d' autres possibilités pour faire d'autres choses. Sketch est juste vraiment spécifiquement pour la conception d'applications et de web, alors que ces deux autres produits ont beaucoup plus de portée en termes d'autres choses que vous pouvez faire avec ces compétences. 4. Quel est le rôle d'Illustrator dans la conception d'un site Web: Alors, quel est le rôle des Illustrators dans toute cette entreprise ? En tant que concepteur web, vous pourriez décider de terminer à la limite de l'endroit où Illustrator s'arrête, et ce que vous devriez faire, disons que vous êtes le concepteur, vous devrez travailler avec le développeur ou le concepteur web, ou le concepteur web frontal, quelqu' un qui fait le HTML et CSS parce que illustrateur lui-même ne fait pas réellement un site Web. Il le conçoit, l'apparence et la sensation, obtient tout dans la bonne position, les couleurs, les polices, et nous l'utilisons comme un modèle pour le construire dans le code. Ok, maintenant, c'est là que tu pourrais finir. Vous pourriez juste remettre à la fin ici. Si j'étais votre web designer, je m'attendrais à un tas de JPEG, PNG et SVG, donc juste des images. Je voudrais que vous me disiez quelles polices elles sont, quelles couleurs elles sont, quelles sont les tailles, quelles sont les boîtes colorées, quelle distance elles sont les unes des autres. Je vais vouloir ce truc et ça vient de vous à moi en tant que CSS, et nous allons regarder dans ce cours comment cela est fait. Ok, donc vous pourriez décider d'aller un peu plus loin et vous voulez faire tout le processus de conception web. Ce que je vais faire, c'est tourner ce design particulier que nous fabriquons ici dans Illustrator et nous le construirons également dans Dreamweaver, juste pour en faire une belle série complète. Donc, si vous êtes plus basé sur l'impression et si vous voulez juste rester de ce côté, illustrateurs où vous avez terminé. Mais si vous voulez passer un peu plus et peut-être avoir une petite introduction au code, ce n'est peut-être pas aussi effrayant que vous le pensez, j'espère, vous allez le déplacer dans quelque chose comme Dreamweaver et construire le site complet en cela. Voilà donc le rôle d'Illustrator. 5. Téléchargez les fichiers d'exercices, les fichiers terminés et les aide-mémoires: D' accord. La première chose que nous devons faire est d'obtenir les fichiers d'exercices. Il y aura un lien dans la description ou sur les sites ici quelque part. On peut aller chercher les fichiers d'exercices, et ce ne sont que les images que nous allons utiliser, n'importe quel texte que nous utilisons, toutes les ressources dont je parle. Alors téléchargez-les, et l'autre chose qui sera là sur chaque vidéo spécifique, il y aura un lien vers quelque chose appelé le fichier terminé, et cela signifie juste que quand nous faisons quelque chose dans un cours, quand j'arrive à la fin, je vais frapper » Enregistrer », et je vais le mettre dans un dossier spécial, et le nommer comme cette vidéo afin que si vous le faites et que la vôtre ne ressemble pas à la même chose, vous pouvez télécharger ma version, vérifier, ouvrir Illustrator et aller, « Oh, c'est comme ça qu'il a fait ça ». Donc vous comparez ces deux, ils sont appelés fichiers terminés et ils ne sont que sur des vidéos où je fais quoi que ce soit. La dernière chose est la feuille de triche. La feuille de triche est quelque chose que je fais et il y aura un lien sur l'écran sur hereish, Taylor, allez, et vous pouvez y aller et c'est un PDF téléchargeable, imprimez-le. Il y a aussi une version vidéo, partagez-la et c'est juste ça. Une fois ce cours terminé, tu diras : « Je vais bien maintenant. Je veux aller plus vite, quels sont tous les raccourcis ». C' est pour ça que sert cette petite feuille de triche. Va télécharger tout ça et on passe à la prochaine vidéo. 6. Préparer votre espace de travail et vos préférences d'Illustrator pour travailler sur une UI: Salut. Dans ce cours, ce que nous allons faire est d'envisager la configuration de notre Illustrator pour travailler avec le web et la conception d'applications. Il y a quelques choses que nous devons changer causent le moment par défaut, lorsque vous l'installez et pendant que vous l'utilisez, c' est supposé que vous avez affaire à des choses basées sur l'impression. Donc, il utilise des mesures physiques et comme millimètres, centimètres ou pouces. Donc, nous devons partir et changer quelques choses. La première chose que nous allons faire est d'ouvrir un nouveau document. Allons à Fichier Nouveau et il y a beaucoup en haut ici nous allons sur le Web et nous allons commencer par Common et juste cliquer sur « Créer ». Cool et ce qui va se passer, c'est qu'il va par défaut à quelques choses que nous devons changer. Pour ce faire, nous allons dans Illustrator CC et allons dans Préférences et nous allons d'abord dans Units. Si vous êtes sur un PC, c'est sous Modifier les préférences, donc son Modifier et tout le bas ici, il indiquera Préférences. Sous Mac, c'est là et on va aller aux Unités. C' est la première chose à changer, c'est Général, vôtre va probablement être réglé sur Inches si vous êtes en Amérique et si vous êtes n'importe où qui n'utilise pas de pouces, il sera réglé sur Millimètres ou Centimètres. Nous devons le changer en pixels. C' est la mesure que nous utilisons lorsque nous traitons de la conception de l'interface utilisateur, Nous allons choisir les pixels. Même avec le trait, il traite des points traditionnellement, mais nous devons traiter avec les pixels et la même chose avec le Type. Les polices sont conçues pour utiliser des tailles de pixels plutôt que, elles ne sont pas loin, les pixels et les points ne sont pas si éloignés en termes de mesures, mais utilisent des pixels. OK et cliquez sur « OK ». L' autre chose que nous devons faire, c'est que nos documents soient configurés de la même manière en termes d'espace de travail. Vous pouvez voir ici que le mien est mélangé parce que j'ai été en train de foirer avec ça. Ce que vous devez faire est d'aller en haut ici, aller à la fenêtre, aller dans l'espace de travail et le vôtre est probablement défini sur Essentials et cela ressemble à quelque chose comme ça, mais nous allons dans Fenêtre, aller dans Workspace et laisser le définir sur Web sans surprise, pas sans surprise. Vous pouvez voir si le tien est encore mélangé comme le mien, ce qu'on peut faire c'est retourner sur le Web, et je vois que c'est Web, mais on va dire Réinitialiser le Web s'il vous plaît. Ce qu'il fait, c'est qu'il le réinitialise, un espace web, cette chose apparaît toujours et c'est un peu ennuyeux, partez. C' est l'interface pour s'assurer que la tienne ressemble à la mienne, pour que nous puissions passer à autre chose. 7. Plan de site ou maquette fonctionnelle: Hé, dans cette vidéo, nous allons parler rapidement de ce qu' est un sitemap par rapport à un filaire. Ces deux-là peuvent se mêler quand je parle aux gens, donc c'est vraiment facile de te montrer. Ceci, mes amis, est un plan du site. C' est comme un organigramme de vous montrer quelles pages vont où sur votre site Web. Un filaire est une maquette de votre page, mais en utilisant simplement des graphiques de base, donc des espaces réservés pour les images, des espaces réservés pour le texte, et nous n'incluons pas réellement le logo, juste l'écrire là. C' est juste pour sortir des idées dans une sorte d'ordre sur l' endroit où les choses pourraient aller plutôt que de travailler sur des conceptions, des couleurs et des polices tout de suite. C' est ce qu'on appelle un filaire, et c'est ce qu'on appelle un sitemap. Allons à la vidéo suivante. 8. Créer un plan de site dans Illustrator: Hé ! Dans cette vidéo, nous allons regarder faire une carte du site. Maintenant, nous pouvons le faire dans quelques programmes. Je vais vous montrer comment le faire dans Illustrator parce que c'est une classe Illustrator, mais je vais vous montrer pourquoi je ne le fais pas dans Illustrator principalement parce que cela prend tellement de temps. Déconnectons-nous rapidement. Tout d'abord, parlons de la façon dont je le fais traditionnellement. Je vais faire un sitemap juste à la main dans mon carnet. Maintenant, si je fais affaire avec mon propre site, c'est juste à la main ; c'est tout, jeu terminé. Je l'élabore. Maintenant, si je le fais pour un client, ils s'attendent à un niveau de présentation plus élevé donc je ferai dans Illustrator ou je le ferai dans quelque chose appelé Muse, que je vous montrerai rapidement dans une seconde. Mais il n'y a pas d'outil réel spécifiquement pour cela. Nous allons utiliser Illustrator pour commencer. On va aller à File, New, et on va faire, probablement parce qu'il va être imprimé et envoyé au client, ça va être A4 et je vais le rendre paysage. Je vais créer, si vous aux États-Unis, allez à la lettre. Tout ce que vous faites, ce n'est pas particulièrement excitant, il est capture outil rectangle. Je vais donner mon remplissage blanc ou non, et je vais mettre une ligne noire autour de l'extérieur. En ce qui concerne le coup, je vais le mettre à un pixel. Le tien pourrait être réglé sur le point immobile. Ne vous inquiétez pas, utilisez juste un point pour le moment. On va changer ça dans un peu. Sitemap est de montrer au client le flux du site Web où les choses vont aller, comment il va être structuré. Donc, ce que vous pouvez faire est de dessiner une boîte et de saisir un outil de type et vous dites que c'est votre page d'accueil. Je vais centrer ces deux-là ensemble en les sélectionnant tous les deux, et en haut ici j'ai quelques options et il y a celle là qui dit centre. Maintenant, je vais dessiner ma page suivante. Je vais probablement déplacer ça un peu et je vais les copier et les coller. Donc éditer copier, éditer , coller, je vais l'aligner. Celui-ci va être ma page produit. Super. Je vais taper ça en utilisant mon clavier. Page suivante, et vous pouvez voir que c'est un peu monotone. Ce n'est pas trop mal, dépend de la taille de la structure. Je vais entrer ici et ça va être ma page À propos de nous. Je devrais probablement centrer ce texte pour le rendre plus facile, mais vous avez l'idée. Maintenant, je dois les joindre, et il y a un outil de segment de ligne ici. Maintenant, le tien pourrait être caché sous certains de ceux-ci. Donc, cliquez et maintenez enfoncée et saisissez le segment de ligne. Je vais cliquer sur Hold and drag. Vous pouvez voir qu'il rejoint ces deux-là. Celui-ci ici, c'est assez bon pour aligner les choses. Si votre truc ne s'aligne pas, vous pouvez voir le mien, il y a ce joli croisement, tout ça comme, voir ces lignes roses sauter partout. Vous pouvez activer et désactiver cela sous la vue, et il y en a un qui s'appelle les guides intelligents. Donc j'ai ça en ce moment, vous pouvez voir que mon propre ici n'est pas en fait de tracer une ligne, vous voyez qu'il est laissé là derrière. C' est parce que quand j'ai commencé à dessiner, tu vois que je n'ai pas de coup, pas de remplissage, et ça peut te couper. Donc je vais prendre ma flèche noire. Je les ai toujours sélectionnés, et je vais vous dire que vous avez besoin d'un coup noir. Vous pouvez voir le coup est la doublure à l'extérieur. Ce premier ici est le remplissage, et parce que c'est une ligne, il n'a pas de remplissage. Ce type existe toujours, mais il n'a pas d'attaque, pas de remplissage, donc il n'imprime pas donc il n'est pas très utile. Je vais allumer ce type. C'est très bien. Maintenant, nous voulons construire ça. Nous voulons donc saisir l'outil de segment de ligne et commencer à dessiner celui-ci. C'est ça. Il y a juste beaucoup de boîtes, beaucoup de copier-coller, beaucoup de lignes jointes à elles, en s'assurant qu'elles s'accrochent. Donc, ce n'est pas super eu. Mais si je vais faire un filaire, je ne vais probablement pas le construire de cette façon. Je vais me lancer dans quelque chose appelé Muse parce que c'est super facile et qu'il fait partie de la licence Creative Cloud. Donc, si vous avez cette dernière version ici, vous aurez Muse, et si vous l'utilisez, vous pouvez totalement utiliser Illustrator. Continuez avec Illustrator, continuez à construire ce truc. Alors, probablement là où le plus gros problème vient n'est pas tant la construction, c'est quand nous devons changer les choses, nous devons déplacer cela ici. Cela doit venir aussi bien donc nous sélectionnons tous ces ajustements, et ces ajustements deviennent un peu plus difficiles. Alors allons sauter dans Muse et pourquoi j'aime ça pour juste faire le filage. Alors téléchargez et installez Muse, vous n'avez pas à le faire. Je vais faire un nouveau site. En termes de largeur de page, nous ne sommes pas inquiets à ce sujet pour le moment. Je vais juste cliquer sur OK, et on va rester ici en fait. Dans Muse, juste pour que vous sachiez, c'est un programme Web Design sans utiliser de code. C' est vraiment cool et j'ai un cours là-dessus si tu veux y aller. Mais nous allons l'utiliser juste dans ce cas. Il fait partie du processus Illustrator et de la conception de l'interface utilisateur en raison de cette belle vue de plan. Alors assure-toi juste d'être en plan. Vous pouvez voir ici j'ai déjà une page d'accueil qui est pratique. Ensuite, je peux cliquer sur ce petit bouton Plus et vous pouvez voir, hé, je peux mettre dans ma page produit. Quand je dis page produit, c'est comme si nous construisons un site pour les widgets, c'est là que les widgets iraient là. Maintenant, je vais le mettre dans ma page À propos de nous et vous pouvez voir à quelle vitesse ce flux de travail est. Contactez-nous. Ensuite, quand nous allons aux produits, nous pouvons dire, je voudrais, dire produit, et épeler le produit A. Vous pouvez le faire produit A, et regarder ceci. C' est là que c'est sympa. Vous pouvez voir que c'est fait, rejoint ces lignes, a obtenu un petit organigramme cool. Il devient juste très facile de construire une carte du site. Tu peux continuer à construire ça. Vous pouvez continuer à ajouter des bits, vous pouvez les déplacer. Alors regardez, la page « A propos de nous » doit être là. Vous pouvez voir que cet interrupteur est rond et c'est probablement pour ça que je l'aime le plus. Maintenant, selon le type d'organigramme ou de plan du site que vous créez, vous pouvez le faire ici. Vous pouvez aller à l'horizontale ou à la verticale, ce qui l'affiche plus clairement pour votre client ou pour vous-même. Donc je vais revenir à ça, la taille. Vous pouvez le faire grand ou petit pour tenir dans beaucoup de pièces différentes, et c'est tout. Ils sont déjà étiquetés. Ils ont de belles petites lignes et des organigrammes. Maintenant, la question pourrait être, que dois-je en faire maintenant ? n'y a pas d'Export PDF du Sitemap, qui devrait être une fonction vraiment cool dans Muse, ce n'est pas le cas. Tout ce que je fais est de prendre une capture d'écran et ensuite éditer aussi dans le design ou Illustrator comme une image. Donc c'est mon flux de travail. Tu n'aimes peut-être pas ce noir ici. Tu peux faire des trucs de base. Vous pouvez passer par installer les polices et tout, mais vous pouvez faire des choses. Dites que je veux mettre ceci, je vais aller à Adobe Muse en haut et aller à Préférences. Si vous êtes sur un PC, ces préférences se cachent sous édition en bas ici. Donc, je vais aller aux préférences. Ce que vous pouvez faire est de changer la toile de fond pour cette couleur plus claire ici. Ensuite, vous pouvez faire une capture d'écran sur un PC. Il y avait en fait un bouton appelé capture d'écran. C' est là où se trouvent vos boutons Accueil et Fin Page Up. Sur un Mac, ce sera Command Shift 4, puis cliquez sur Hold et faites-le glisser. Je vais faire une capture d'écran. Alors ce que je fais, c'est que j'ouvre Illustrator. Débarrassez-vous de vous parce que vous prenez trop de temps. Ensuite, je vais aller à Fichier, Place, et à partir de mes captures d'écran, vous voilà, mettez-les là dedans. Ensuite, je conçois autour d'elle. Je pourrais mettre des choses comme le nom du travail, le nom du client, cette version du sitemap. C' est très important. Donc il y en a un que j'ai fait, presque prêt, l'affectation de l'interface utilisateur là-bas. J' ai donc pris une capture d'écran de la version noire. Je viens d'ajouter le nom de mon client, le nom mon agence de design. Je lui ai donné une version, et j'ai mis mon logo, juste pour le marquer et lui donner un peu, je suppose, regarder et sentir pour votre client auquel vous le livrez. Alors rappelez-vous à la main, c'est parfaitement bien quand vous avez affaire à vos amis, vos amis, et à vos parents. Je ne vais pas plus loin que cela, mais quand il y a un client payeur, s'attendait souvent à ce niveau ou à ce niveau lors d'une réunion. Vous pouvez utiliser Illustrator, faire glisser des zones, les joindre. Rien de mal à ça, ou vous pouvez sauter à Muse et juste utiliser ce petit outil cool, prendre une capture d'écran, le jeter ici. C' est donc la configuration d'un sitemap pour la conception de votre site Web. 9. Les tailles d'écran à utiliser pour concevoir des sites Web pour ordinateurs de bureau, tablettes et mobiles: Hé, là. Dans ce tutoriel, nous allons créer ces plans de travail dans Illustrator. Cela va être notre taille de bureau, cela va être notre taille de tablette, et cela va être notre taille mobile. Déterminons les tailles dont nous avons besoin pour les fabriquer en premier, puis nous allons les construire dans Illustrator. Nous devons déterminer les tailles à utiliser et cela peut être un peu difficile car il change au fil du temps et il y a tellement de tailles d'appareils, mais j'ai quelques bases pour vous d'utiliser ce que la plupart des gens utilisent, et si vous voulez être plus informé sur ce qui sort, ou quels appareils sont là, il y a vraiment un site cool appelé mydevice.io/devices. Alors allez à cette URL entière en une seule fois. Il vous donne juste des choses intéressantes sur les tailles. Maintenant, ignorez ces hauteurs physiques et largeurs, utilisez les largeurs CSS. C' est ce que nous utilisons en tant que designers, c'est des pixels de large, et nous pouvons voir le nouvel iPhone 7 fait 375 pixels de large. Cela vous donne une bonne jauge de peut-être mon mobile doit être à ce sujet ou au moins l'inclure parce que c'est l'un des téléphones les plus populaires. Vous pouvez voir le 6 plus, le gros téléphone géant est encore plus grand et je l'ignore, je l' ai laissé faire face à la taille de la tablette parce que c'est un gros téléphone, c'est ce gros truc préféré. Couvre iPhone 6 et vous pouvez voir tous les plus anciens ainsi ne pas obtenir au-dessus 375 même. Donc, je choisis souvent juste ma taille mobile pour être 400 pour inclure tous ceux, mais vous allez exclure un couple. Le grand favori géant, je pense qu'il y a quelqu'un ici comme Nixes 6. C' était un peu plus grand, c'est un gros téléphone. Il couvre la plupart d'entre eux. Blackberry Passport, c'est massif. Donc c'est pour mobile. Vous pouvez voir ici pour tablette juste en dessous. Vous pouvez commencer à les regarder. J' ai ignoré l'iPad Pro. Pourquoi ? Parce qu'il est aussi grand qu'un ordinateur de bureau. Si vous êtes déjà allé dans un Apple Store et voir le MacBook, iPad Pro, ils sont massifs. Je ne conçois pas pour ceux pour tablette. Je les laisse pour utiliser la taille du bureau, mais je couvre celui-ci. C' est donc la taille que j'utilise pour la tablette 768. Maintenant, il n'y a aucune raison pour que vous ne puissiez pas choisir spécifiquement d'autres tailles. Si vous travaillez avec un développeur ou un concepteur web après ce projet, demandez-leur. Dites, hé, je suis en train de concevoir le site de quelles tailles avez-vous besoin, et ils pourraient vous donner ceux que je vous donne différent ici, mais ce sera vraiment typique. Donc 400 pour le mobile, 768 pour la tablette, et puis vous obtenez sur le bureau. Le bureau est un peu différent, c'est ce que vous voulez concevoir, et je vais vous donner ce que je fais. Allons faire File, New. Nous allons commencer par le bureau est notre premier design, et vous pouvez voir si nous avons un web. Nous avons beaucoup de tailles différentes ici. Il y a web, minimum, grande taille, commun, vous pouvez choisir n'importe lequel d'entre eux, ça n'a pas vraiment d'importance. Ce que j'aime commencer est 1200 de large, principalement parce qu'il est divisible par nos grilles que nous allons apprendre un peu plus tard. C' est toujours une taille commune. La hauteur va changer beaucoup lorsque nous travaillons, donc nous allons la laisser à la hauteur par défaut, et nous allons la changer par la suite parce que cela dépend du contenu. L' orientation va être paysage, et nous n'allons pas ajouter de lame ou quoi que ce soit, et nous allons nous assurer que son RVB. Cliquez sur « Créer ». Super. Donc, c'est la page 1, je vais zoomer un peu en maintenant Commande moins, il zoome. Maintenant, je vais me déplacer en maintenant la touche de barre d'espace, en cliquant et en faisant glisser. Donc, si vous maintenez enfoncée la touche de barre d'espace sur votre clavier, cliquez et faites glisser, ou vous pouvez utiliser ces petits curseurs autour. J' ai le premier et ils sont appelés plan de travail au lieu de pages. Ce que je dois faire maintenant est de créer un autre plan de travail pour la taille de ma tablette. Ce que je vais faire, c'est qu'il y a deux façons, le plus simple est de monter ici. Il y en a un qui s'appelle l'outil de plan de travail, cliquez sur lui. Cela me permet de changer la taille de ceci si je le veux. Mais ce que je vais faire, c'est que je vais cliquer sur cette petite option ici, il est dit nouveau plan de travail. Vous pouvez voir que mon curseur est chargé avec un duplicata de ce gars. Vous pouvez cliquer n'importe où. Ça va te dire, pars là. Je vais glisser à travers en utilisant ma barre d'espace. Maintenant, quelle est la taille de la tablette ? Nous allons faire la largeur et la hauteur, pas la coordonnée x et y, dans ce cas nous sommes sur la largeur et la hauteur. Maintenant, on en a parlé avant. Quelle largeur va-t-il être ? Ça va être 768. De quelle taille va-t-il être ? Ça dépendra du contenu. Nous allons le concevoir probablement un peu plus longtemps, mais nous ne sommes pas inquiets à ce sujet pour le moment, alors n'insistez pas sur la taille de ce modèle. Je vais le faire traverser un peu. Donc c'est à côté de mon bureau, et maintenant je vais faire ma version mobile. Maintenant, je ne peux plus en avoir un nouveau, mais c'est facile, tu l'as fait. Si vous maintenez enfoncée la touche Option sur votre Mac, ou la touche Alt sur votre PC, et que vous pouvez voir le changement de curseur en cette petite flèche double, signifie qu'il va le dupliquer, et je trouve que c'est la façon la plus simple de faire glisser une autre version. Vous pouvez continuer à maintenir Alt et faire glisser beaucoup de versions. Je veux juste trois pour le moment. Donc, je vais avoir mon bureau, ma tablette, et maintenant mon mobile. Ma version mobile, on en a parlé avant. On utilise la largeur. La largeur dans ce cas va être de 400. Comprend toutes les nouvelles versions iPhone il y a jusqu'à sept maintenant, mais qui sait ce que ça va être ? Ça nous donne un peu de salle de jeux. Si ça finit par être quelque chose de stupide comme 380, nous n'avons pas besoin de revenir en arrière et de redessiner notre site pour mobile. La hauteur à nouveau, elle va changer en fonction du contenu. Donc c'est beaucoup plus mince. Ce que nous ferons avant de nous éloigner de ça. Nous avons créé nos pages, nous avons une tablette mobile et une version de bureau, allons les nommer, et nous devons trouver votre onglet de plans de travail. Si vous ne le trouvez pas, allez dans Fenêtre et descendons à Plans de travail. Mon premier, Artboard 1, je vais double-cliquer sur lui, et celui-ci va s'appeler mon bureau, et je vais lui donner un nom, donc tout le monde sait que j'utilise 1200 pixels. Ça ne change rien, c'est juste une étiquette. Artboard 2 est ma tablette, et 768 pixels de large, et mon mobile va être 400 pixels. Super. Je vais zoomer. Rappelez-vous Commande moins ou Contrôle moins sur un PC, barre d'espace pour vous déplacer. On y arrive. Nous allons le sauvegarder, File, Save. Maintenant, pour ce cours, je vais tout mettre sur mon bureau, je vais faire un nouveau dossier, et ce sera le Portfolio de mon Dan, et je vais lui donner V1. En fait, vous remarquez le nom du dossier, donc nous allons juste l'appeler Portfolio de Dan à créer, et maintenant le nom réel de ceci, donc ça va s'appeler Portfolio de Dan. Donnez-lui votre nom parce que nous allons vous en construire un pendant que nous allons le long et lui donner V1. Il a besoin d'un numéro de version, peut être des chiffres ou des lettres, ne jamais l'appeler finale. Finale est le baiser de la mort. Vous avez probablement des fichiers appelés final 2, final revisité, final nouveau, donc juste V1 et vous finirez avec beaucoup de versions différentes. Cliquez sur « Enregistrer ». Laissez tout par défaut ici, et cliquez sur « OK ». Que mes amis sont comment choisir les tailles et créer vos premiers plans de travail pour notre design. 10. Définition d'un système de grille et d'une conception réactive pour mobiles et tablettes: Hé, là. Dans cette vidéo, ce que nous allons faire, c'est parler de systèmes de grille et de design web réactif. Donc, quand les gens parlent de responsive, tout ce que cela signifie c'est que je vais concevoir un site qui répond aux différents appareils que j'utilise. Donc, il se peut que si je regarde, disons ce site ici, mon site, bringyourownlaptop.com sur un bureau, il ressemble à ceci. Mais quand il descend à une taille mobile, dites quelque chose comme ça, vous pouvez voir que le site change pour mieux utiliser l'immobilier de l'écran ou la taille de l'écran pour cette vue. Vous pouvez voir que ces gars sont un peu changés. Ceux-ci vont côte à côte, mais quand ils sont sur le bureau, il y en a quatre dans une rangée plutôt que deux dans une rangée. Quand il passe au mobile, il change encore à nouveau. Le grand changement est sur mobile. J' ai décidé que cette grande image en haut, ce bel homme souriant disparaissait. Il n'est pas utile sur mobile. Je cours à un écran immobilier. Donc, je vais juste à l'essentiel et j'utilise quelques clous ici. Donc c'est empilé l'un sur l'autre dans une colonne, mais tablette, c'est à deux et quand il est sur le bureau, il est quatre. Donc, ces ajustements peuvent mieux utiliser la taille de l'écran, est ce qu'on appelle la conception web responsive. Donc, ce que nous faisons lorsque nous utilisons Illustrator, c'est que nous devons concevoir pour ces trois vues. Alors que lorsque le site est construit soit par vous-même ou par un développeur, ils savent ce dont ils ont besoin pour ajuster la taille à tout leur site Web pour ressembler à ces différentes tailles d'écran. Maintenant, la prochaine chose à examiner est ce qu'est un système de grille. Parce que c'est la façon la plus courante de diviser ce site est, ce qui se passe, c'est qu'il y a une grille de 12 colonnes sous-jacente qui s'exécute le long de toutes les pages Web, et c'est ainsi que vous divisez le contenu. Donc, ce qui se passe est très similaire si vous êtes dans la conception de magazines parentaux, une grille de 12 colonnes sur un journal s'utilise pour vous aider à obtenir de la cohérence sur de nombreuses pages. C' est la même chose ici dans le web design. La façon la plus simple de le voir est dans notre version finale. C' est donc notre design final. Il y a la version de bureau, la télévision et le mobile. Ce qui finit par se passer est de regarder ceci, si j'allume les grilles que j'ai, vous pouvez voir que j'ai divisé le bureau en veillant même à garder à l'esprit cette 12 colonnes. Je ne l'aurais pas à mi-chemin ici ou à mi-chemin dans cette colonne, ils s'étendent tous à 12. Donc ce type ici est quatre d'entre eux. Donc 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, tous additionnent jusqu'à 12, j'espère. Mes maths sont mauvais. Mais ça veut dire que ce gars en haut ici, cette ligne couvre les 12, et c'est bon. Ces gars ici ont besoin d'être ajustés un peu. Mon dessin, ils s'étendent sur ces deux colonnes ici. J' ai besoin de les aligner un peu mieux, et ce gars ici, il couvre tout parce qu'il n'y a rien ici. Alors regardons ce que nous avons fait et redessinons pour la tablette. Maintenant, ce que nous faisons est que je pourrais mettre 12 colonnes ici, mais vous pouvez imaginer si je compresse 12 de ces colonnes jusqu'ici, même si techniquement tout cela devient un peu plus difficile à concevoir avec des centaines de lignes à travers, c' est encore pire quand on passe au mobile. Vous pouvez voir ce que j'ai fait et ce que vous ferez en tant que designer, c'est je n'ai pas besoin des 12. Cet ajustement fini, c'est trop pour moi. Vous pourriez l'aimer et vous pouvez garder vos 12 colonnes. Je viens de mettre six ici, donc 1, 2, 3, 4, 5, 6 et je les ai répartis uniformément. Donc il y a celui-là sur trois, celui-là sur trois. Donc c'est toujours divisible par 12. Vous pouvez voir ça s'étend comme la moitié, ce qui serait six et six. Donc, nous utilisons toujours la grille à 12 colonnes. Mais visuellement, c'est trop difficile d'en voir autant. Ce que nous avons décidé ici, c'est que je vais éteindre les grilles, c' est comme ça que je veux qu'il ressemble quand il est sur une tablette. Quand cela se fait sur un mobile, je veux le changer à nouveau. Donc nous l'avons beaucoup changé dans celui-ci, la navigation a changé ici, et nous avons utilisé à peu près tout le long du chemin. Nous avons utilisé la largeur complète, c' est-à-dire les 12 colonnes entières. Je veux rallumer les grilles. Quand je travaille à partir d'un mobile, souvent je traite juste avec deux colonnes. Donc ça fait six de ce côté, six de ce côté. J' en ai utilisé deux juste pour le rendre un peu plus facile. Vous pouvez mettre 12 là, mais ça devient un vrai mal de tête pour aligner les choses. C' est donc le système de grille et c'est ainsi que les concepteurs web de l'autre côté, divisent votre contenu. Vous ne pouvez pas faire 13 parce que c'est vraiment difficile de diviser le milieu parce que c'est un nombre impair. Donc même les nombres, la plupart du temps, il est 12 colonnes. Alors, dans la vidéo suivante, regardez comment faire ces colonnes afin que vous puissiez les concevoir. 11. Créer une grille réactive à 12 colonnes dans Illustrator: Bonjour des gens merveilleux. Ce que nous allons faire dans celui-ci, c'est que nous allons réellement ajouter ces guides à nos vues afin que nous puissions utiliser cette belle grille de 12 colonnes et commencer avec notre conception. Allons-y et faisons-le. Maintenant, nous allons faire nos grilles, avant vous, si vous déplacez le tableau d'application, les grilles ne viennent pas facilement pour le trajet. Faites-les disposer comme vous voulez. Peu importe comment vous avez vos tableaux d'application, mais je vais aligner le mien de cette façon, peut-être un peu plus près. Maintenant, je le déplace avec le tableau d'application aussi. C' est ce type en bas qui bouge tes pages. La première chose que nous devons faire est de prendre notre outil de rectangle, cliquez sur ce gars ici. Vous pourriez être coincé sur l'outil de cercle ou l'outil Rectangle arrondi en dessous saisir l'outil Rectangle pour moi. En termes de tailles, je veux soit un remplissage blanc ou aucun remplissage. C' est le centre de la boîte et c'est la ligne autour de l'extérieur et je veux que ce soit tout sauf quelque chose que l'on puisse voir sur un fond blanc, donc le noir fonctionne pour moi. Je vais cliquer sur « Hold and Drag  », et vous pouvez voir le mien essaie de s'accrocher. Vous pouvez voir qu'il est clair que le petit mot est son Intersect. Si le vôtre ne s'accroche pas, accédez à Afficher et activez ce qu'on appelle les guides intelligents ou commande U sur un Mac ou Control U sur un PC. C' est très pratique à utiliser, surtout à ce stade. Je vais zoomer un peu, me rappeler commande moins ou contrôle moins et je vais dessiner une boîte à travers tout le truc. C' est un peu faff, un peu. Nous avons une grande boîte, et maintenant ce que nous allons faire c'est nous allons la diviser en colonnes. Nous trouvons cela sous Object, puis sous Path, et puis il y en a un qui dit diviser en grille, et cette boîte amusante pairs, nous ne voulons pas de lignes, nous voulons des colonnes, des hauts et des bas. Nous allons le mettre à 12 et en termes de largeurs, nous ne sommes pas inquiets à ce sujet, ce qui nous inquiète, c'est la gouttière. Les colonnes que vous avez vues au début, il y a des espaces entre elles, et il y a une taille vraiment commune pour elles. Vous devrez peut-être vérifier auprès du développeur ou du CMS que vous utilisez. La plupart du temps, la gouttière entre eux se trouve de chaque côté de la colonne est de 15 pixels. C' est de chaque côté, quand ils sont à côté de l'autre, ils totalisent jusqu'à 30. Votre gouttière est réglée sur 30 pixels et nous allons cliquer sur « 12 » et assurez-vous d'activer Ajouter des guides. Je vais vous montrer en avant-première pour que vous puissiez voir de quoi nous parlons . Ça aurait été plus facile. Vous pouvez voir que j'ai 15 pixels, puis 15 pixels de chaque côté de ces colonnes, ensemble ils font 30. Cliquez sur « OK ». Maintenant, ce que je veux faire est, ce que je veux vraiment, c'est que je veux saisir ma flèche noire, mon outil de sélection, et je clique sur ces guides qui ont été faits, puis je vais cliquer avec le bouton droit sur eux et aller à Dégrouper. Je ne veux pas cette horizontale, je veux juste que la colonne ne soit pas ces lignes ici. Ce qu'on peut faire maintenant, c'est qu'on peut passer, en fait je vais sélectionner ces gars ici. Si vous avez utilisé Illustrator avant de penser, ce sont des guides géniaux. Ils sont comme des lignes physiques qui sont sur la chose utilisent ces guides. Ce que je dois faire maintenant, c'est que je vais les abaisser, juste pour qu'ils s'accrochent au sommet. Ils piquent le fond ici et ce que je vais faire, c'est les étendre par le bas. Je les ai tous sélectionnés. La façon la plus simple de les sélectionner tous, si vous êtes nouveau, Black Arrow, sélectionnez tous juste les sommets de tippy d'entre eux parce que nous les avons dissociés, il a laissé ces gars derrière. Je vais les faire glisser pour les mesurer en haut puis en bas ici, je vais faire défiler vers le bas, et je vais faire glisser ça assez loin. Je n'ai aucune idée de combien de temps cette page va durer et il est plus facile de le faire ici quand je la fais glisser vers le bas. J' ai fait tout ça, je les ai toujours sélectionnés. Ne vous inquiétez pas que l'un soit plus sombre que les autres. J' ai cliqué dessus par accident, je vais toujours travailler et on va descendre pour voir. On va aller voir des guides. Il y en a un ici qui dit « Faire des guides ». Je sais qu'on a déjà fait ça, ne t'inquiète pas. Ce sont de véritables guides maintenant. Maintenant, ce que je peux faire, c'est aller à Ma vue et je peux aller à Guides. Le vôtre peut être déjà verrouillé par défaut. S' il est indiqué de déverrouiller les guides ici, ne cliquez pas dessus. Mais le vôtre est probablement comme le mien et dit les guides de verrouillage qui signifie que je ne peux pas les déplacer maintenant. J' ai pu les effacer, mais maintenant je ne peux pas. Maintenant, toute cette ordure qui est laissée derrière elle, il y en a un peu. Paru. C'est ainsi que vous le transformez en une grille de 12 colonnes. Vous pourriez rembobiner et jouer ce truc plusieurs fois, ça l' a fait pour moi quand j'ai commencé à le faire, alors ne le transpire pas. C' est ainsi que vous configurez vos colonnes. Ce que nous allons aussi faire, c'est parce que je déteste le design à ce bord ici. Ce que je fais, c'est que je prends mon tableau blanc pendant que je l'étend un peu, juste pour que j'ai un espace de jeu. Cela signifie juste qu'il est plus difficile de concevoir dans cette petite boîte et que vous voulez dire qu'il a tout foutu jusqu'à cet âge et qu'il n'a tout simplement pas l'air correct. Je vais te montrer à quoi ça ressemble ici. Vous pouvez voir ici que j'ai cette zone ici et c'est des espaces blancs. Je sais que ce n'est pas toujours là, mais c'est souvent là. Je l'ai élargi en tant que designer juste pour que je puisse voir quelques bits supplémentaires. Je sais que la largeur entre ces deux guides est de 1200, qui est parfait et un petit conseil rapide pour vous est si vous faites glisser cela, dites ce gars à gauche ici, si je maintiens ma touche Option sur Mac, eh bien, le Touche Alt sur un PC, vous pouvez voir qu'il y a des deux côtés, me donne juste un peu de marge de manœuvre. Même si j'ai dit de ne pas les déplacer, on va les déplacer. n'y a pas de guides ici, donc on va bien. C' est dur et répétez pour le reste d'entre eux. Nous allons faire le prochain pour tablette et nous le ferons ensemble. Je vais le traîner, on va le rendre un peu plus rapide, on va aller à Object. On va prendre le chemin, on va aller à Split Into Grids et je vais dire, faisons 12 de ces gars. J' en ai parlé plus tôt, 12 c'est juste trop, donc je l'ai réduit à six parce qu'il est divisible par 12. Tu peux mettre 12 là-dedans, j'en veux six pour le réduire. La gouttière entre ces gars va encore être 30 et je vais cliquer sur « OK ». Non, je vais dire « Faire des guides ». Je vais cliquer sur « OK », et j'ai ça. Sache ce qu'on va faire, c'est que je vais les sélectionner. Je vais faire un clic droit sur eux et dire Ungroup, et je vais cliquer juste sur les sommets de la pointe à ces gars, et je vais les charger vers le bas et ensuite je vais dire View, je vais aller aux guides, je vais dire Faire des guides, et je n'ai pas à aller les verrouiller à nouveau, ils sont tous verrouillés par défaut. C'est comme dans l'ensemble, vous ne verrouillez pas les gars particuliers, vous verrouillez tous les guides sur toutes les pages. Si je vais voir les guides maintenant, vous pouvez voir que je peux les déverrouiller mais je ne peux pas les verrouiller parce qu'ils sont déjà verrouillés. Je peux sélectionner tous ces trucs au revoir. Prenez l'outil de conseil d'application, maintenez enfoncée votre touche Alt sur PC, ou la touche Option sur le Mac faites glisser les côtés juste me donner un peu d'une salle de jeux et nous allons faire la prochaine. Maintenant, je veux que tu partes et que tu fasses le prochain tout seul. Vous pouvez mettre la vidéo en pause et voir que vous pouvez lui donner une fissure. Je vais le faire ici et vous pouvez passer rapidement au prochain film si vous avez l'idée. J' ai sélectionné celui-ci, il n'a pas vraiment besoin d'aller au fond. C' est mon TOC et rappelez-vous, nous allons aller à l'objet et nous allons descendre sur le chemin, et nous allons descendre à diviser en grille. Dans ce cas, nous allons juste en utiliser deux. Je pourrais en mettre quatre si vous préférez, si vous voulez faire des choses cool ici sur mobile, je ne le suis pas. Je vais mettre le caniveau dans 30. Je continue de penser, d'accord, tu vas le faire aussi. Assurez-vous de cliquer sur « Ajouter des guides ». Oubliez ça à chaque fois, cliquez sur « OK ». Nous avons nos 10 guides, nous allons les sélectionner, cliquer avec le bouton droit sur eux. J' utilise ma flèche noire. Allez à Dégrouper. Je vais sélectionner juste les sommets pour eux, prendre un d'entre eux, et le faire glisser vers le bas. Il s'alignera en haut. Super. Maintenant, je vais les rallonger un peu. Je dois faire pour ces gars, je vais payer pour ça plus tard. C' est bon. Faites glisser ceci vers le bas. Maintenant, nous allons à View, nous allons à Guides, et nous allons à Créer des guides et puis il est déjà verrouillé, donc nous pouvons attraper tout ce qui reste, appuyer sur « Supprimer » et nous avons maintenant une grille de 12 colonnes sur tous, que nous avons bien juste en bas six et deux sur ces derniers ici. Je vais utiliser l'outil de tableau d'application sur ce sujet, et juste sortir un peu. Je vais frapper « Sauver ». Tous les bons gars ? Et c'est ainsi que vous pouvez créer une grille de 12 colonnes dans Illustrator. Si vous êtes paresseux comme moi, vous téléchargeriez un modèle et ce sera juste ici. Je vais laisser ça dans les dossiers d'exercice. Je l'appellerai grille de 12 colonnes dans Illustrator, template ou quelque chose comme ça. Il sera là-dedans. Tu peux juste ouvrir ça et aller de l'avant avec celui-là. 12. Créer un wireframe basse fidélité dessiné à la main: Dans cette vidéo, nous allons regarder faire des trames filaires, mais nous allons faire quelques petites images dessinées à la main. Je commence toujours par ceci, je le dessine dans mon livre et commence à travailler de cette façon. Souvent, si c'est mon propre travail, je n'irai pas plus loin que ça. Je ne me moque pas de beaux dans Illustrator parce qu'il n'y a pas de raison, il n'y a personne pour impressionner sauf moi, et c'est un peu d'idée qui est filaire, et je travaille à partir de ceux-ci. Mais si vous allez l'envoyer aux clients, ce serait bizarre de s'en sortir avec juste dessiné à la main. Vous voulez faire du sexe un peu en utilisant Illustrator pour faire en sorte que vos fils soient vraiment beaux. Laissez-moi vous montrer comment je le fais avec mes dessins à la main d'abord, puis la vidéo suivante, nous allons faire Illustrator. En ce qui concerne les filaires, c'est le niveau que nous examinons. C'est un filaire. Jetons un coup d'oeil à d'autres filaires et d'autres choses. Mais vous pouvez voir leur niveau, c'est juste pour faire baisser les idées. Parfois, j'ai mis un peu plus de soin à eux, mais pas beaucoup. Il y en a des que j'aime, c'est à ce niveau maintenant. Est-ce que je livrerais ça au client ? Disons que je cherche dans un processus où j'ai été embauché en tant que consultant UX et que je vais dans le filage, je mettrais un peu plus d'efforts là-dedans, pas une énorme quantité, parce que ce que je ne veux pas faire est, j'ai eu où Conseil dans les maquettes Photoshop, et il est temps de parler des fonctionnalités de base et la mise en page où les gens ont commencé à choisir des couleurs et à choisir des polices ou ce que je n'aime pas. Nous ne pouvons pas l'appeler comme ça, alors gardez le langage dehors, utilisez Lorem ipsum, utilisez des ticks squiggly valine, nous allons en avoir un très bon sens, mais sans entrer dans trop de détails. Si vous êtes super spécial, vous pourriez avoir un peu de couleur. Eh bien, regardez, soulignant, mais c'est à peu près tout. C' est mes fils, et ça marche vraiment pour moi en termes d'idées. L' autre chose est qu'ils ne font pas qu'un seul filaire, vous allez à votre liste de fonctionnalités, et vous commencez à les ajouter ici, ne faites pas seulement un filaire, je trouve que je dois en faire cinq. Même si votre premier, vous le faites, c'était cool, puis le second, puis le troisième, et le quatrième, et ce n'est pas avant que vous en ayez un peu à travers eux que vous travaillez en fait quelques bugs parce que vous pourrait arriver ici, c'est génial. Vous vous forcez à en faire une seconde, vous savez que c'est de la merde parce que c'était la bonne. Ensuite, vous faites le troisième, et vous dites  : « Je suis en train de passer par le processus. » Mais je sais souvent quand je fais les cinq et que je me force à, le numéro 3 est le gagnant. Si vous vous étiez arrêté dans le numéro 2, vous n'auriez jamais eu cette mise en page étonnante pour le numéro 3, alors forcez-vous à passer et à faire plus qu'une seule mise en page. 13. Créer un wireframe haute fidélité dans Illustrator: Dans cette vidéo, nous allons en faire une image filaire. C' est un filaire. Il est aussi juste des boîtes grises et un certain type. Agréable et simple. Allons-y. Commençons à construire un filaire. C' est comme notre sitemap, nous avons juste beaucoup de rectangles et un certain type. Il va y avoir des trucs et des astuces à venir. Mais si vous êtes assez confiant avec illustré déjà, vous voudrez peut-être sauter le long de celui-ci, mais ok, donc tout d'abord, je vais prendre un outil de rectangle. Et je vais commencer par, on pourrait juste utiliser des boîtes blanches, ok. J' aime utiliser juste un peu de gris dans la boîte ok, et un coup noir sont à l'extérieur avec un pixel. Et ça veut juste dire que je vais dessiner la boîte qui représentera mon, mon logo va là-bas. J' aime ce genre de blanc cassé juste pour le rendre facile et clair avec les différents éléments. Ok, maintenant en termes d'éléments pour impressionner les gens quand vous êtes à votre réunion, appelez ça « meubles de page » et gardez un visage droit. D' accord. C' est une sorte de nom pour ce genre de choses. Ok. Que le [inaudible] sur la page. D'accord. Un peu volé des empreintes, mais ça impressionne les gens. On dirait que tu es dans le business. Ok, l'autre chose à faire, c'est d'essayer de ne pas concevoir si loin. Je vais zoomer à 50%, ok, juste pour que je puisse voir les différents hors-bord, mais tu veux concevoir ce truc ou au moins te moquer de ça à la taille réelle, ok. Donc à quoi cela va ressembler sur un site Web réel pas un peu zoomé ou zoomé trop loin parce que vous allez prendre de mauvaises décisions en termes de conception. Pour ce faire, vous appuyez sur « Commande One », ou « Control One » sur un PC, ou le long chemin, « View », et il y en a un ici dit « Taille réelle ». C' est à ça que ça va ressembler sur un site Web réel. Donc j'ai l'impression que ce logo est maintenant un peu trop grand. D' accord. Et vous devez vous assurer que lorsque vous faites glisser ces boîtes que vous le faites dans les colonnes. N' essaie pas de faire ça. D' accord. Où ça chevauche une de ces gouttières. D' accord. Il doit s'aligner avec le bord de l' une de ces colonnes et ne peut pas traverser l'une des gouttières. Ok, donc colonne à colonne, et je vais ajouter un peu de type juste pour indiquer que cela, je vais cliquer une fois ici et taper le logo. Ok, tailles de police. Ça n'a pas vraiment d'importance. Seize pixels représente environ 12 points dans la vie réelle. Donc, si vous devez imprimer ça, ok, c'est sympa et éligible. Et oui, je vais commencer à dessiner ça. Je vais copier et coller ce gars en sélectionnant les deux en maintenant « Shift », puis aller « Copier » et « Coller ». C' est tout, il copier et coller ou « Control V », « Control C ». Et je vais faire de ça ma navigation, d'accord, mais pas à cheval dans les colonnes. D' accord. Et en termes de texte ici. Je vais juste le traîner dessus. Peut être un peu difficile à faire glisser ce texte, surtout quand vous êtes un peu zoomé, regardez ceci, vous finissez juste comme faire glisser les bords de celui-ci. Ainsi, plus vous zoomez, plus il est facile de déplacer les choses. Ou vous pouvez simplement utiliser vos touches fléchées sur votre clavier si vous maintenez « Maj » pendant que vous dessinez, j'utilise les touches fléchées sur le clavier, peu comme le fait en gros morceaux. Alors je vais en mettre un au milieu. Et en fait, laissez-moi changer le texte. Et je vais le faire tomber un peu. Retour à « Commande One » sur mon Mac ou « Control One » sur votre PC, « Taille réelle ». Maintenant, parfois c'est vraiment difficile à voir avec toutes ces colonnes. Il y a donc un très joli raccourci pour activer et désactiver les colonnes. Le long chemin est sous la « Vue ». Et c'est un ici et « Guides », accord, et « Hauts Guides ». Ok, mais vous pouvez voir ici c'est la commande de raccourci et le point-virgule ou le point-virgule de contrôle sur un PC. Je m'attaque, je maintiens la commande enfoncée et je tape juste le point-virgule. Je l'utilise tout le temps quand je conçois la cause comme le besoin de l'aligner, besoin de le voir et vous l'alignez soigné pour le voir. Bien. La prochaine partie sera une belle grande, ce qu'on appelle une boîte de héros. Ok, donc je vais prendre mon outil de rectangle ici, choisir toutes mes couleurs et toutes mes choses, ok, donc noir cassé sur l'extérieur d'un pixel. Et je vais dessiner ce qu'on appelle des boîtes de héros, ce genre de grosse dalle au milieu. Parfois, il tourne. D' accord. Mais c'est le genre de « Hé, c'est nous, c'est ce que nous faisons et nous accueillons ». Ok, donc c'est cette boîte et je vais y ajouter un peu de type. Et ce cas, ce que j'ai fait précédemment est de cliquer une fois et tapé, « OK » et il tape sur pour toujours. Ok, ce que je veux, c'est ce qu'on appelle une boîte à largeur fixe. Donc, je vais supprimer cela en utilisant le « Supprimer » sur mon clavier. D' accord. Et ce que je vais faire, c'est reprendre mon outil de type, qui est ce type ici, ok, le T. Capitale et je vais m'assurer de commencer de ce côté de ma colonne. Et je vais cliquer et faire glisser. Et si vous faites glisser une boîte, cela signifie qu'elle aura comme une largeur fixe signifie juste, comme voir qu'elle va en quelque sorte frapper jusqu'au bord, puis faire une boucle en arrière. Maintenant, ce texte est beaucoup trop petit. Je veux que ça soit grand, comme inspirant venir travailler avec nous chose et nous allons le mettre là. Et je vais juste sauter la taille du fichier, désolé, la taille de la police à quelque chose de assez grand. Ok, un petit raccourci cool est avec tout sélectionné comme il est ici. Vous maintenez la touche « Command Shift » enfoncée et appuyez sur la touche stop complète. Ok, donc « Control Shift » sur un PC et tapez la touche d'arrêt complet sur le clavier. Ok et ça le rend juste beau et grand. Et deux-points, désolé, la virgule le rend plus petit. Donc, en haut, ils sont en quelque sorte à côté de chacun, de haut en bas. Quelque chose qui ressemble à ça. Si tu détestes les traits d'union comme moi, comme tout le monde le fait. D' accord. Vous pouvez faire est de tout sélectionner. J' ai donc triplé dessus et il a tout sélectionné. Et vous pouvez aller à l'onglet de votre paragraphe ici et régler la coupure de trait d'union. Va loin de la césure. Et, je vais probablement devoir faire un triple clic et rendre ma police un peu plus petite, donc elle se trouve là dedans. Et j'attrape ma flèche noire, soulève cette boîte juste pour, c'est ce que je veux. Donc la prochaine chose que je veux, c'est qu'il y a un bouton d'appel à l'action ici. Pourquoi ça va là-bas juste, je ne sais pas. C' est devenu style que vous avez besoin de grandes citations inspirantes qui vous définissent. Et puis vous avez besoin d'un bouton en dessous, Ok, c'est votre appel à l'action, comme, « Venez acheter ce truc ou contactez-moi ou quelque chose comme [inaudible] ». Donc il y a mon bouton et vous pouvez voir le mien arriver par défaut au centre noir, mais pas de sucre à l'extérieur. Je voulais être comme le reste des boutons. Donc, ce que vous pouvez faire est que vous pouvez commencer à utiliser l' « Outil Pipette ». Donc j'ai dessiné celui-ci avec le « Pipette Tool ». OK, parce que c'est sélectionné et je clique sur ce gars et tu dis qu'il volera le style à ce gars. Ok, cette navigation sur le dessus. Je vais donc cliquer dessus, saisir mon logo, le copier et le coller. Et vous allez être mon magazine appelé Action. Je n'y mettrais pas de magazine si tu l'envoyais à un client. Je suis très professionnel à ce sujet. Donc la prochaine chose que je veux faire est que je veux mettre quelques vignettes en dessous. Je vais en mettre trois, d'accord, et ils vont s'étendre sur quatre colonnes chacune, ok, pour rattraper les 12. Mais le bas des pages est resté ici. Donc je vais prendre le rectangle, désolé, l'outil de plan de travail. Ok, et je vais zoomer un peu pour que je puisse tout voir, un peu loin. Et je vais le rendre un peu plus grand. Donc, je vais juste prendre le fond. Tu peux le faire aussi longtemps que tu le sais, je le fais souvent très longtemps. Et quand vous avez terminé, faites-le glisser vers le haut plutôt que de continuer à le déplacer vers le bas. Ok, revenez à la bonne taille, c'est vous là. Donc outil rectangle, je vais avoir un remplissage de mon blanc cassé. Je vais l'avoir. Je l'ai sélectionné. Tu vois ma coche sélectionnée quand je changeais ça ? D' accord. Et ça veut dire que ça a changé mes tiques pour avoir cette couleur blanc cassé, donc c'est là mais c'est la mauvaise couleur. Alors ne fais pas ça. Il y avait « Annuler ». Ok, je n'ai rien sélectionné. Flèche noire clic sur l'arrière-plan, fait. Ok, attrape mon outil de rectangle. Et je vais dessiner quelque chose à peu près à propos de cette taille. Il va passer des colonnes complètes. Ok, [inaudible] parfait. Maintenant, pour indiquer que ce n'est pas comme, c'est un bouton, en quelque sorte pour indiquer que c'est une image. Les gens y ont mis une croix. Ou ils utilisent cette taille d'image spéciale. Vous pouvez le voir là-bas, ce genre de paysage que vous regardez quelque chose. Donc, ce que nous allons faire est de saisir l'outil de segment de ligne et nous allons le dessiner. Maintenant, je pourrais commencer à faire glisser celui-ci, mais je n'aurai pas le bon angle, donc il est plus facile d'attraper la flèche noire, de cliquer sur, de s'assurer que ce gars vient de se faire sélectionner. Je vais aller pour éditer, copier, coller, et en haut ici, nous pouvons aller à « Objet », « Transformer » celui-ci qu'ils appelaient « Reflect ». Je vais utiliser horizontal, cliquez sur « OK », et il est juste un peu retourné maintenant, je vais juste le coincer près de lui. Pas trop inquiet parce que je vais les sélectionner tous les trois. Et il y en a un ici qui dit aligner horizontalement et verticalement. Alignez ma sauvegarde rectangle. Je vais les regrouper et ensuite aller à « Objet » du groupe tête supérieure. Et je vais maintenir la touche « Alt » enfoncée et cliquer et faire glisser un sur. Et ça le fait en quelque sorte dupliquer pendant qu'on traîne. Alors maintenez « Alt » enfoncé et vous remarquerez que lorsque vous maintenez « Alt », il suffit de se déplacer à travers et souvent il s'aligne. Vous pouvez le forcer pendant que vous faites glisser. Donc je tiens « Alt ». Vous pouvez aussi maintenir « Shift ». Et ça fait que tout est aligné, droit de haut en bas. Super. Et donc, la plupart du temps, je viens de faire ces croix, les gens aiment ça. Vous pouvez voir ce graphique ici avec la lumière, c'est un peu comme une image universelle, « Je suis une image ». Ok, vous pouvez ajouter cette complexité supplémentaire. n'y a pas de vrai drame pour ça. Vous pourriez, vous l'aimeriez peut-être et vous utilisez juste l'outil de segment de ligne et commencez à dessiner des montagnes, d'accord ? Vous pouvez augmenter la largeur de trait pour qu'elle corresponde à cela. Et si vous cherchez l'outil ellipse, c'est juste sous l'outil rectangle ici. Et vous pouvez vous moquer de votre propre version de ça. D' accord, donc j'ai mes images. Ce que je veux faire maintenant, c'est que je veux finir quelques choses. C' est là que vous pourriez sauter parce que ce sera juste un peu répétitif. Et ce que je vais faire, c'est probablement que je vais arrêter cette vidéo maintenant. Et la prochaine vidéo, vous pouvez sauter parce que, c'est moi juste de remplir cela et je vais aligner la version tablette ainsi. Oui, ça ne va pas être super excitant, mais je te verrai dans la prochaine vidéo ou la vidéo après ça. 14. Créer les wireframes de tablettes et de mobiles dans Illustrator: Les gens adorables, c'est ce que nous allons construire dans ce tutoriel. Nous allons finir à ce sommet, construire la tablette, et les versions mobiles de notre filaire. Je ne serai pas offensé si vous passez à la vidéo suivante parce qu'elle fait littéralement la même chose, mais travaille sur une grille différente. On en apprend plus ? On apprend à faire une ligne rayée par ici. Si vous voulez traîner autour de la ligne stripy, allons y entrer. Nous devons terminer notre vue de bureau, donc nous allons simplement ajouter une autre rangée d'images. Je vais sélectionner ces trois types. Maintenez ma touche Alt enfoncée, faites-les glisser vers le bas, joli. Nous allons ajouter quelques icônes sociales en bas, donc mon outil rectangle, il est là. Il va avoir aucun remplissage, [inaudible] remplissage blanc cassé, et un trait noir, et mes icônes sociales vont atteindre à travers, pas exactement sûr. Mais ça va être mes icônes sociales. Saisir cette copie juste pour que les polices soient exactement les mêmes. Comme je l'ai dit, comment attraper quand vous êtes à certains niveaux, vous devez saisir ça juste au milieu. Ça va être mon icône sociale. Social, je ne peux pas bien épeler social. Les icônes sociales et le mettre au milieu, mon milieu était là. Copiez et collez cela, et ce sera mon copyright. Ce que je pourrais faire juste pour gagner du temps, puis-je taper et l'obtenir pour écrire une ligne de sorte qu'il va copyright, copyright 2017. La chose intéressante est sous « Type », le symbole de copyright est sous quelque chose appelé « Glyphs ». Pour l'utiliser, double-cliquez dessus, vous verrez apparaître là, fermez Glyphes. Panneau utile qui était. Je vais mettre en compagnie de l'échantillon. Super. Flèche noire, déplacez-le le long de sorte qu'il soit assis sur cette colonne là. Joli. C'est mon fini de bureau. Ce que je vais faire, c'est que je vais zoomer un peu et je vais prendre mon plan de travail aussi. Je vais vous prendre du bas ici, le faire glisser vers le haut, et je veux le diviser pour le rembourrage en bas, super. Retour à mon outil de sélection, et nous allons commencer avec la version tablette. Le moyen le plus simple que je trouve pour commencer est de copier et coller le cours. Dans mon cas, je pourrais attraper ces gars. Vous pouvez copier et coller et faire glisser ou je maintiens Alt souvent lorsque je fais glisser, les aligner là-haut. Ma boîte à cheveux doit entrer comme la première. Super, et cette boîte à logo va probablement avoir exactement la même taille de ce côté et ma navigation ; je sais que ma navigation est assez petite. Ça va rentrer ici. Vous devrez peut-être ajuster la taille de votre logo sur votre tablette. Il est juste une question de travailler sur ce qui semble bon à la taille de la tablette, la mise en page différente que vous prévoyez d'utiliser. Je vais passer à travers, le gros changement pour moi c'est que j'aimerais juste faire deux de ces gars donc je vais les faire passer. En fait, ce que je pourrais faire est d'en faire passer un parce qu'ils vont devoir être redimensionnés. Je vais juste en faire un et ensuite les dupliquer. C' est aligner avec tout, zoomer un peu, Commande 1 juste pour s'assurer qu'il est parfaitement aligné, et je vais juste les traîner dans un peu, et je vais tenir Alt, et je vais faire deux de ces gars. Je vais agrandir mon plan de travail. Zoom arrière un peu, je veux plus grand. J' ai perdu mes grilles ici. C' est un peu ennuyeux, mais je pourrai m'en sortir. Je veux qu'ils passent trois par trois. Tu as vu une des belles choses qui se passe. Tu vois là, à droite ? Ici, je ne peux pas lâcher ma souris, mais sur le côté droit, il dit : « Voulez-vous que les écarts soient les mêmes. » Certaines des choses sympas que vous pouvez faire avec Illustrator. Cool, donc la prochaine chose que je veux, c'est les icônes sociales, je vais zoomer à nouveau. C' est juste le reconstruire ici. Maintenant, je ne peux pas voir mes guides alors je vais devoir vous montrer comment ça marche. Je vais les aligner. Je peux probablement m'en sortir, peux-tu voir que ça s'accroche aux gars en haut. Mais vous pourriez avoir la question  : « Comment puis-je réparer ça ? » Ce que je dois faire, c'est deux choses, c'est plus facile si je bouge ces morceaux juste ici pendant une seconde. Ensuite, allez dans « Afficher », allez dans « Guides » ici, et allez dans « Déverrouiller les guides ». Maintenant, je peux sélectionner tous ces types. Avec la flèche noire, ce n'est pas aussi utile que la flèche blanche. La flèche blanche, et je les sélectionne tous. Je prends ces petits points d'ancrage, dont vous allez en apprendre plus tard. Vous pouvez voir que je peux tous les faire descendre maintenant. Vous voulez les faire glisser vers le bas droit. Peut-être que vous pouvez maintenir la touche Maj pour les faire glisser directement. Parfait. Je vais retourner à verrouiller nos guides. Serrure guides, s'il vous plaît. Je vais récupérer la pile. Guides de retour en position, que je reçois le même écart. Joli. Mon plan de travail va devoir être un peu plus petit. Ce que je vais probablement faire est mes icônes sociales va devenir plus petit quand il arrive à tablette, et peut-être qu'ils vont partager l'espace ici. Je devrais peut-être changer cela un peu quand j'ai les icônes réelles dans la scène, selon combien le client a. Maintenant, j'ai un peu de travail. Dernier bit est la version mobile. J' arriverai peut-être tôt et que ce guide soit beaucoup plus grand. Ce que je vais faire dans ce cas, c'est que j'ai commencé avec le bureau et déplacé vers la tablette, puis vers le mobile. Je trouve que c'est la façon dont je travaille le mieux. C' est très courant et cool, je pense, de commencer le mobile d'abord. C' est le plus difficile à concevoir et je suis d'accord, mais je trouve les gens qui viennent sur mon site, bureau est une grande majorité, donc je passe plus de mon temps sur bureau et je reviens pour mobile. Il y a des tas de gens qui disent que c'est la mauvaise façon de le faire. Si vous faites la conception d'applications, il ne sert à rien de faire une version de bureau, donc vous allez commencer avec cet écran plus petit, et c'est le plus difficile à concevoir pour, donc c'est à vous de décider. Je vais prendre quelques morceaux dont j'ai besoin, et je vais probablement attraper tous ces types. Je vais tenir Alt, les faire glisser à travers. Vous pouvez faire le vôtre un par un, et ce que je vais certainement devoir faire, c'est les navigations ne correspondent pas donc nous allons le déplacer vers le bas, gros c'est un sandwich de navigation. Je vais saisir mon logo et le déplacer à travers. Dans cette partie supérieure, le long du haut, nous allons nous dessiner un menu hamburger ou un sandwich nav, donc ces trois lignes stripy, et nous allons juste utiliser trois lignes stripy. Je vais en dessiner un, je vais en dessiner deux, je vais en dessiner trois, pourrait ne pas avoir de lutte pour eux. Avant de commencer à dessiner, vous devriez probablement vérifier que vous avez sélectionné une ligne noire. Je vais faire le mien séparément. Ils sont toujours là. Je vais vous attraper, votre noir et je vais faire plus gros. Soyez à la vue réelle afin que vous puissiez avoir une idée de la taille qu'ils devraient être, il n'y a pas de taille définie pour eux. Je vais m'assurer qu'ils sont bien séparés. En haut, il y en a un qui dit « Distribuer les centres » et ça les aligne tous. C' est ce que je vais faire pour mon sandwich de navigation. Grilles, grilles sur, c'est à peu près la bonne taille, peut-être un peu grand, mais c'est bon. Ce qui va se passer ici, c'est que ça va descendre vers mes grilles. Mon image de grand héros va être beaucoup plus petite et le texte ici, même si je n'ai pas changé la taille de la police ici parce que j'ai laissé un peu plus de place. Quand il arrive sur mobile, je vais certainement devoir changer la taille de la police à quelque chose de plus petit. Ce que je pourrais faire, c'est juste m'assurer que j'ai, donc ça se termine à ce « diam ». Je vais le rendre un peu plus petit, et vous remarquerez qu'ici je ne vais pas m'aligner sur la grille. Il y a quelques trucs qu'on peut faire pour forcer ça à se produire. Où est-il ? Diam, donc je vais supprimer, regarder [inaudible], donc tout est parti et peut-être aligner joliment. L' autre chose que je vais faire est de sélectionner tout, et je vais changer le format ici. Il y a des choses que vous pouvez faire facilement, comme quand il passe de la tablette au mobile, je vais m'assurer qu'il s'alignera au centre, et ça va se passer. C' est une chose agréable et facile à faire. Comme avec ce type, il va être centré ici comme un gros bouton. Il est là, gentil, et la taille de police devient un peu plus petite. La prochaine chose que je veux faire est de m'assurer que c'est aligné, je ne l'ai pas fait. Ce que je vais faire, c'est ils vont juste empiler les uns sur les autres donc je vais copier et coller un, déplacer à travers et vous faire sortir pour rencontrer les côtés là-bas. Il va en fait être plus grand sur mobile que sur n'importe quelle autre vue. Je peux voir de ce point de vue ici, je dois m'assurer que ces choses s'alignent parfaitement. Tu vas là-dedans, gentil. Retour à la commande 1. Ce que je vais aussi faire, c'est au lieu d'en avoir six, je vais le réduire de sorte qu'en fait nous n'en avons que quatre. Pourquoi ? Principalement parce que je veux vous montrer à quoi ça ressemble, comment les éteindre quand nous arriverons à construire notre site Web. Nous pouvons les désactiver dans le code afin que nous n'en ayons que quatre, et juste pour que ce ne soit pas si épiquement long. Vous pouvez voir ici j'ai déjà quatre d'entre eux et les pages sont déjà beaucoup plus longues que la version tablette, c'est beaucoup de défilement. Ce que je vais faire en bas c'est que je vais attraper cette icône sociale et je vais empiler ces gars différemment, donc je vais les avoir au-dessus de l'autre parce qu'ils ne pouvaient pas aller côte à côte ici et c'est quelque chose que vous pouvez faire dans le code aussi. Assez facile. Assurez-vous de les copier lorsque vous les faites glisser. Tapotez un peu, attrapez celui-ci, et ils vont être centrés l'un sur l'autre. L' espacement est un bon outil de plan de travail. Très bien, et ça va être notre filaire. C' est peut-être le plus grand, le plus long, plus ennuyeux de tous les tutoriels ici sur Illustrator. Je promets que nous allons entrer dans un super fantastique, amusant conception de couleur en utilisant l'image époustouflante prochaine, je te le promets. D'accord, prochaine vidéo. 15. Inspiration pour la conception de votre site web: Maintenant, nous entrons dans la phase de conception. On a fait des sitemaps et des wireframes, et ils n'ont pas l'air très sexy. Maintenant, c'est l'heure sexy. Nous allons passer par là et voir où je trouve mon inspiration. Vous avez peut-être vos taches. Ceci, je trouve que c'est probablement le meilleur de tous les sites. Ça s'appelle Awwwards, mais avec Dub, Dub, Dub. Bon bâillon. Il y a les Sites du Jour. Si vous faites un site brillant, envoyez-le à eux, vous pourriez être mis en vedette, conduire un peu de trafic, et vous obtenez des félicitations de concepteur doux. Il y a juste des trucs vraiment jolis, plein et plein de jolies choses. Passez du temps à regarder par ici. Vous pourriez avoir un look spécifique que vous recherchez. Vous pourriez être illustrateur, allez jeter un oeil aux illustrations des autres. Tu dois utiliser cette petite icône, n'est-ce pas ? Oui. Partout ailleurs, si vous cliquez sur, il suffit d'ouvrir une page dans Awwards, ce qui est très bien. Il donne le classement des gens et d'autres choses, mais vous voulez vraiment regarder la page elle-même. C' est un site plutôt cool, Mitchlana. Désolé, Michelle Lana. Awwwards.com est un excellent site. J' utilise behance.com est un autre brillant. Je passe juste mon temps à passer à travers et à dire, « J'aime ça », et je commence à m'approprier des idées pour construire quelque chose ou avoir une idée de ce que je veux travailler avec. C' est une source d'inspiration pour votre design web. 16. Démarrer la conception de votre site Web à l'aide de modèles Illustrator: Dans ce tutoriel, nous allons voir comment commencer à partir des modèles. Vous pourriez être vraiment nouveau dans le design en général, vous pourriez être étudiant, vous pourriez être jeune, vous pourriez être plus vieux et vous ne l'avez jamais fait auparavant, quelle que soit la raison pour laquelle vous pourriez être un peu plus intimidé par tout le design , à quoi ça va ressembler ? Il est bon de commencer avec un modèle, et il y a beaucoup de modèles autour. Certains des plus faciles sont intégrés dans la nouvelle version d'Illustrator, nous sommes en 2017 pour le moment. Si nous allons à Nouveau ou Nouveau fichier, il y a cette petite fenêtre Nouveau document, si vous allez sur Web, vous verrez qu'en dessous il y a un tas de modèles, vous pouvez voir si je fais défiler vers le bas. Ils sont pour toutes sortes de choses. C' est une page de destination, c' est-à-dire des graphiques de présentation, des icônes de médias sociaux, il y a toutes sortes de différentes. Mais en termes de conception de page Web, vous pouvez le voir dans les filaires, regardez cela. Par les conceptions de page, vous pouvez commencer par l'un de ces et commencer simplement à changer, ils sont ici pour être utilisés, ils sont utilisés commercialement. Vous pourriez décider, je vais commencer par celle-là parce que ça correspond à ce que je veux faire. Vous double-cliquez dessus et vous commencez juste à passer et à jouer avec les couleurs, les polices, il le télécharge éventuellement et vous le modifiez avec vos images. Supposons que vous ne vendez pas une application, que vous vendez des cookies, vous pouvez le changer avec votre image ici et c'est une bonne façon commencer et a juste les bits que vous n'avez peut-être pas pensé, donc vous pouvez simplement utiliser cette page d'accueil et puis tout le reste de ceux-ci. C' est un excellent moyen. Il y a quelques autres modèles là-dedans. Un autre endroit cool où vous pouvez aller est, sous celui-ci, sous votre licence Creative Cloud, votre application Creative Cloud. Il y en a un, Assets, et il y en a un ici appelé Market. Si vous cliquez sur « Marché » et ici l'option de recherche, vous pouvez dire l'interface utilisateur Web. Voici un tas de trucs pré-fabriqués qui sont autorisés à être utilisés commercialement, sorte que vous pouvez commencer avec ceux-ci, c'est une excellente façon de regarder pro vraiment rapide. Il y a beaucoup de trucs d'application ici et beaucoup de trucs web aussi bien. Certains d'entre eux sont vraiment grands, certains d'entre eux juste de petits composants, mais cette ligne semble durer éternellement. Pour les utiliser, disons que vous aimez cette chose de l'interface utilisateur Web ici, comme l'aspect et la sensation de cela pour votre site, vous pouvez cliquer sur cela et dire télécharger à, souvent les gens vont simplement le télécharger dans leur bibliothèque, il s'appelle Ma bibliothèque, ce que je vais faire, c'est que je vais cliquer sur cela et le télécharger à celui que j'ai fait appelé, vous pouvez voir ici, Créer une bibliothèque, J'ai créé celui-ci appelé Portfolio de Dan. Ce qui va se passer est, espérons-le, vous pouvez le voir ici sous Fenêtre, Bibliothèques, qui est là. Il télécharge ce gars que je pourrais commencer à utiliser, il faut un peu de temps pour le télécharger avec le net, puis faites-le glisser dessus. Vous pouvez voir ici, c'est une interface utilisateur que vous pouvez commencer à utiliser et modifier et ajouter à votre conception, changer vos polices, utiliser vos couleurs, c'est un bon moyen de commencer à partir d'un modèle. C' est tout pour notre départ à partir de modèles. On va en faire la nôtre et ça va être génial. 17. Ajoutez votre logo vectoriel à la mise en page: Hé, là. Dans cette vidéo, nous allons apporter notre joli logo vecteur sexy et nous allons le déposer sur la barre de navigation, jouer avec l'opacité et ajouter un peu de type à notre navigation. D' accord, allons-y. Vous pouvez commencer évidemment en remplaçant les choses que je traverse souvent. C' est ce que j'ai utilisé pour transmettre mes idées au client, mais ce n'est pas quelque chose que je trouve utile pour commencer. J' ai réfléchi plus au produit et je vais garder mes cadres y près, je vais les imprimer et les coller près, mais je n'aime pas les changer de mot à mot, ce n' est pas ce genre de processus de conception. Ce que je fais, c'est que je vais m'arrêter. Je vais les utiliser comme guide, ne vous trompez pas. Je vais juste laisser le contenu pousser, bouger et jigger comme il le faut. Parce que j'ai des images du client maintenant et j'ai des logos d'eux, et tout a changé légèrement. Je vais apporter mon logo. Juste pour me donner mon premier bit, et ça va probablement conduire beaucoup de dessins, en particulier les couleurs, peut-être les polices. Donc on va les amener en premier. Maintenant, lorsque vous trouvez les logos de votre client, assurez-vous qu'il s'agit d'une version vectorielle. Ce qu'on va faire, c'est aller à « File » et on va aller à « Place », celui-là. Maintenant, les dossiers d'exercice, j'ai plein de logos. Il y a cinq versions. Donc JPEG et un PNG sont mauvais, SVG, EPS, ou un fichier AI sont bons. Je vais vous montrer la différence entre les deux. Disons que tous ces trois sont très semblables, à peu près les mêmes. Ces gars ont un travail très similaire aussi bien. Apportons le PNG et apportons, disons, la version EPS, ou disons le SVG. Voyons la différence entre les deux. Quelque chose appelé pixels par rapport au vecteur ou au bitmap par rapport aux chemins. Ce que je vais faire, c'est arracher mes gardes et zoomer. Ils ont l'air exactement pareil. Mais regardez ce qui se passe quand je commence à mettre à l'échelle ces deux. Si j'attrape ces gars et que je commence à les agrandir. Maintenant, c'est grand. Vous pouvez voir l'un commence à pixelliser, a l'air horrible, et l'autre ici reste agréable et cristalline. Si vous avez l'option, le client dit : « Quelle version voulez-vous ? » Assurez-vous d'obtenir la version vectorielle. Le vecteur est SVG, EPS ou AI. Parfois, il peut s'agir d'un PDF. Mais restez loin des PNG. PNG sont pratiques car ils ont de la transparence. Si vous avez seulement, disons, un JPEG et un PNG, obtenez la version PNG, cela ne va pas très évoluer, cela ne va pas nous aider avec notre réactivité. Ce n'est pas la fin du monde. Comparons-le avec la version JPEG. JPEG est un perdant clair parce qu'il a un fond blanc. Il est toujours les mêmes pixels, il pixélise toujours, mais vous pouvez voir, au moins, le PNG a un fond transparent. Souvent, pas toujours. Au revoir, les gars. Je vais apporter notre SVG à nouveau juste parce qu'il est venu par la bonne taille. SVG, super. Ça va être mon logo pour ma diapositive. Rappelez-vous, travaillez une commande 1 pixels réels. Vous remarquerez que le logo L a un fond blanc, c'est parce que ce que je veux faire c'est retourner mes gardes. Si vous avez oublié, c'est le côlon de commande ou le côlon de contrôle, je vais le faire frapper peut-être juste un peu plus loin parce que ce que je vais faire est que je vais attraper mon outil de rectangle et je vais mettre une barre de navigation sur le dessus. Je vais le rendre semi-transparent plus tard pour que vous puissiez voir en dessous et rendre tout cool. Je vais le faire traverser pour voir les deux côtés. On y va. Je vais dessiner un rectangle ici, il va traverser 12 colonnes. Je vais lui donner une couleur de remplissage de noir, et je vais lui donner aucun coup, donc la petite ligne rouge à travers elle signifie pas de trait. Un peu de l'opacité un peu. Ça devient un peu gris et je vais mettre des trucs derrière. En fait, lorsque nous construisons notre site, nous allons l'épingler en haut, donc cela signifie qu'il va défiler vers le bas lorsque nous commençons à faire défiler et qu'il va rester en haut et que nous serons toujours mesure de voir le logo dans le navigation. C'est cool. Maintenant, au moment où le logo est du mauvais côté, cette boîte est sur le dessus, alors nous avons juste un clic droit dessus. Si vous êtes sur un Mac, maintenez la touche Contrôle enfoncée et cliquez avec les boutons que vous possédez. Sur un PC, c'est un clic droit paresseux, et allez à celui qui dit « Arrangement », et allez à « Envoyer à l'arrière ». Vous pouvez voir, j'ai mon logo à l'avance. Cool. Je vais taper dessus pour qu'il soit assis là-dedans, éteindre mes guides, et semble bien. Maintenant, ce que je veux faire, c'est que je veux le mettre dans le texte pour ma navigation. Je vais saisir l'outil Type et je vais cliquer une fois. Peu importe où ça va, et je vais parler de nous. Ça va être à propos de moi parce que c'est mon portefeuille. Ce que je vais faire, c'est que je vais le copier et le coller dans la colonne à côté de lui, et il y aura une autre page appelée Me contacter. J' ai peut-être aussi le bouton Mon Portfolio. J' ai décidé de garder ces images en bas pour accéder à notre portfolio. C' est comme ces gars ici. Je vais les rendre blancs. Donc, avec cette flèche noire, on les a sélectionnés tous les deux. Je peux récupérer mon outil Type maintenant. En haut ici, je peux aller changer la couleur en blanc. En fait, ce que je vais utiliser, c'est ce blanc cassé tout le long. Je ne savais pas pourquoi j'aime ça, c'est juste un petit indice sur le blanc. Il a l'air blanc, en gros. Nous avons ajouté notre type, nous allons aller dans des polices de style dans un film juste après celui-ci, nous allons juste utiliser Arial pour le moment. La prochaine chose que je veux faire est que je veux travailler avec un peu de couleur. Allons le faire dans la prochaine vidéo. 18. Utiliser Adobe Color: Dans cette vidéo, nous allons parler de l'ajout de couleur à votre site. Nous allons commencer à utiliser quelque chose appelé Adobe Color CC. Il était appelé cooler, si vous vous souvenez de lui, mais si vous allez sur color.adobe.com et que vous vous connectez avec votre licence Creative Cloud, vous y arriverez. Si vous avez une version piratée, cela ne fonctionnera pas aussi bien, des morceaux de cela fonctionneront, ok. Mais nous espérons que vous avez une version légale. Ce que nous allons faire est de sauter créer et d'aller à un appelé explorer. Ce qui est vraiment pour, c'est pour les gens qui, même les designers expérimentés, comme je me retrouve appuyé sur les mêmes couleurs à chaque fois que je fais un design. Si vous venez me voir et que vous êtes boulanger et que vous avez besoin d'un site web, ce sera probablement vert et gris pour le moment. Si vous êtes, je ne sais pas, une compagnie aérienne internationale et que vous avez besoin de travailler, je vais probablement la rendre verte et grise. Je suis coincé dans un piège à utiliser le vert et le gris. Pour échapper à mon piège, j'utilise cette fonctionnalité « Explorer » dans Adobe Color. Ce que ça veut dire, c'est que je peux aller ici et me promener et explorer. Je pense que par défaut c'est activé, je ne suis pas trop sûr, mais allez à « Most Popular », je l'aime de tous les temps, peut-être ce mois-ci. Il va juste vous donner les choses que d'autres personnes téléchargent, les couleurs les plus populaires et souvent des trucs assez cool viennent au sommet. Allons avec « All Time » et ceux-ci ici, ouais, plein de couleurs. Ce qui se passe, c'est que, parce que vous vous êtes connecté, ce que vous pouvez faire est de dire que vous aimez « Tech Office ». Vous pouvez cliquer sur celui qui dit est, « Enregistrer », et il va dire comment, vous pouvez le renommer si vous voulez. Vous pouvez dire en fait que j'aimerais que vous le mettiez dans mon, rappelez-vous que nous avons fait cette bibliothèque [inaudible] appelée Portefeuille Dans. Vous pouvez en faire un nouveau ici, droit vers le bas, « Créer une nouvelle bibliothèque » va juste le coller dans votre, où est-il, ma bibliothèque. Mais je vais mettre le mien en portefeuille, vous pourriez le changer. C' est bon, mais je vais cliquer sur « Enregistrer » et la chose cool à ce sujet, est par magie, espère que si je vais à l'illustrateur maintenant et Dans portfolio, parfois vous pouvez cliquer dessus. Je vais rendre ça un peu plus petit. Il y a là, il y a les couleurs et je peux commencer à les utiliser. Je peux décider qu'en fait je vais utiliser ça pour la couleur. C' est juste une bonne façon de commencer à dessiner des choses et vous dites : « Ok, maintenant les choses commencent à fonctionner en termes de combien ont de la couleur. » Parce que j'ai commencé avec cette devine de couleur modèle. C' est un bon moyen d'aller avec vos couleurs. Ce que vous pouvez faire pour cette classe, c'est que vous pouvez aller sur le même site, et aller à « Explorer » et aller à « Rechercher » et tapez BYOL. Espérons que vous trouverez quelques-uns de ceux que j'utilise. Celui que j'utilise dans cette classe est appelé illustrateur de portefeuille BYOL. Téléchargez celui-ci et nous l'utiliserons pour ce cours. Si vous travaillez dans une plus grande agence, c'est un excellent moyen de façonner les couleurs de la marque. Vous pouvez les télécharger et il y a plusieurs façons d' aller à « Créer » et vous pouvez descendre ici et dire en fait, donc CMJN, vous pouvez commencer à taper ces dans et les changer, puis appuyez sur « Enregistrer » et ils finissent sur cette exploration chose. Les gens peuvent rechercher et partager et cela rend vraiment facile, ouais partager des couleurs vives. Alors nous allons télécharger le Bring Your Laptop one, un peu oublié que vérifier BYOL, et je clique sur « Enregistrer », le mettre dans le portefeuille Dans. Génial, gentil. Illustrator cliquez sur la petite icône de nuage créatif, et il est là. Je vais cliquer sur ce gars avec le bouton droit de la souris et dire, Supprimer, n'a pas besoin de toi. Cool et super, donc nous avons nos couleurs. Passons maintenant et regardons, disons, parce que cela va être une marque pour cette fausse entreprise particulière ou un faux portefeuille que nous faisons et si vous avez réellement des couleurs spécifiques et un logo à partir de laquelle travailler, je vais pour vous montrer comment faire cela dans la vidéo suivante et tirer ces couleurs à travers. 19. Harmoniser les couleurs de la marque à l'aide d'Adobe Illustrator: Hé, dans cette vidéo, nous allons regarder une sorte de couleurs tirant des logos de marque existants à utiliser dans votre conception de l'interface utilisateur. Disons que nous faisons du travail pour une entreprise et que vous avez son logo. Vous pouvez l'apporter et nous allons aller File Place, et dans cet exemple, nous allons juste utiliser le Google Logo.png, amenez-le. Disons que je veux dessiner quelques éléments, disons que c'est notre boîte de héros en arrière-plan ici. Mais je veux qu'il corresponde aux couleurs de Google, faisons semblant que c'est une couleur aléatoire pour commencer, pas assez aléatoire. Avec elle sélectionnée, ce que vous devez faire est de saisir l'outil pipette, la pipette est des outils qui se cachent en quelque sorte ici. Tout ce que vous devez faire est avec tout ce qui est sélectionné, il suffit de choisir une couleur, et vous pouvez voir qu'il cessera de tirer les couleurs de la marque de cela. À quel point sera-t-il précis ? Plutôt précis. Supposons que vous vouliez les ajouter en quelque sorte, mais que vous utilisiez plus tard plutôt que d'avoir utilisé l'outil pipette à chaque fois, ce que vous devez faire est de passer à votre panneau nuancier. Maintenant, votre panneau nuancier si vous ne le trouvez pas, il est sous Fenêtre vers le bas pour Nuancier, allumez-le et considérez les commutateurs comme des couleurs préfabriquées et prémélangées prêtes à l'emploi. Ce que nous allons faire, c'est, choisissons ce bleu, alors voici, ce que vous pouvez faire est en haut, liste déroulante et est une option qui indique New Swatch. Donne-lui un nom, je vais appeler le mien Google Blue, et cliquer. Vous pouvez voir que c'est dans ma bibliothèque, et c'est ici, ma bibliothèque d'échantillons. Alors faites votre chemin à travers les couleurs, je prends l'outil compte-gouttes. Un rouge, ici, le nouveau Google Red est là, et c'est ici le panneau des nuanciers. La raison pour laquelle c'est bon de les avoir dans vos échantillons, nous le trouverons un peu plus tard. Vous trouverez que ce truc de bibliothèque, est génial pour la plupart des choses. Il est nouveau et il n'est pas encore parfait pour tout, donc parfois vous en avez besoin dans votre panneau nuancier. Ok, génial. C' est comment tirer les couleurs de la marque des logos existants pour commencer à utiliser plutôt que de partir en essayant de comprendre ce que sont toutes ces couleurs. D'accord. Voilà, tu y vas. 20. Utiliser les bonnes polices web : Google Fonts et Typekit: Dans cette vidéo, nous allons chercher à apporter polices web sûres vraiment spécifiques de Google Fonts et Typekit, comme ce petit gars sexy ici et ces petites polices Plain Jane mais très cool en haut ici. Donc ce que nous avons, et nous utilisons juste un vieux texte. Vous avez peut-être utilisé Arial, mais Illustrator aime Myriad Pro par défaut. Ce que nous devons faire maintenant est de le désactiver pour la police que nous voulons utiliser. Maintenant, vous ne pouvez pas juste parcourir votre liste et y aller, je veux choisir toutes ces polices que j'ai sur ma machine. Vous en avez peut-être des centaines, vous n'en avez peut-être que quelques-uns. Tu ne peux pas aller en choisir l'un d'entre eux. Ils doivent être spécifiquement des polices qui peuvent être utilisées en ligne, essentiellement simplement être sous licence en ligne, et s'ils sont payés pour cette licence et s'ils ne sont pas commercialement utilisables, allez les utiliser. Il y a deux endroits principaux que vous allez faire si vous êtes Illustrator. Il y en a un qui s'appelle Google Fonts ou Typekit. D' après mon expérience, ça dépend de ce que tu fais. Chez Google Fonts, je trouve cela plus facile. Ils sont un peu plus difficiles à mettre en œuvre, mais ils sont meilleurs en termes de licence. Ce qui se passe, c'est que les polices Google sont gratuites pour un usage commercial, qui sont géniaux. Typekit est gratuit à utiliser avec votre licence Creative Cloud, ce qui est parfait pour mon portfolio ici parce que je ne l'utilise pas pour autre chose. Ça veut dire que c'est pour mon portefeuille. Mais supposons que je la crée pour un client et qu'il n'a pas de licence Creative Cloud, son site Web devra concéder une licence pour cette police ou que je doive utiliser ma licence Creative Cloud pour que son site utilise la bonne police. Si je décide de passer dans l'Himalaya et de terminer toute ma vie numérique, cela signifie que leur police cessera de fonctionner parce que je ne paie pas ma licence Creative Cloud. Nous les regarderons tous les deux. Ils sont tous les deux cool, tous les deux assez faciles à utiliser. Tout d'abord, allons regarder Google Fonts. D' abord, allez sur fonts.google.com, et vous arrivez ici. J' aime vraiment Google Fonts. Il y en a plein. Un couple de choses cool que vous pouvez faire avec eux est sur le côté ici, donc vous avez besoin d'une police d'écriture manuscrite. Ils peuvent être très difficiles à trouver. Nous allons juste avoir l'écriture manuscrite et superviser, allons juste vous donner des listes pour les polices d'écriture manuscrite. Donc je vais tous les allumer. Certaines des autres belles choses en bas ici sont que vous pouvez jouer avec, disons comme la largeur. La largeur peut être vraiment utile car vous pouvez l'abaisser afin que vous puissiez obtenir une bonne police compacte, ou compressée, ou une police condensée. C'est juste un peu plus mince. Cela signifie simplement, surtout lorsque vous travaillez en ligne, si vous obtenez certains de ces très minces, vous pouvez le mettre bas dans un titre sans qu'il se casse sur deux lignes. Vous pouvez voir ici vous pouvez insérer un peu de mots sur celui-ci, alors que si vous cherchez une unité avec des polices très larges, vous pouvez voir qu'elle est beaucoup plus éloignée. Quoi qu'il en soit, il y a deux choses à faire. L' un est choisir une police, donc Roboto et probablement Open Sans. Si vous recherchez une police de copie corporelle, ce sont les plus courantes. Open Sans est probablement le plus commun. C' est le nouvel Arial. Tout le monde utilise Open Sans parce que c'est clair, c'est sympa, il a beaucoup de poids différents, et cela fonctionne bien dans différentes langues. Ce que je vais faire, c'est que je vais choisir. En fait, j'ai passé un peu de temps à jeter un coup d'oeil et j'ai décidé et je vais utiliser celui-ci appelé Playfair. J' aime vraiment ça. C'est celui-là. Il a de bons poids. Parfois, vous choisissez une police et elle n'a pas l'air bien. Vous pourriez penser que ça a l'air bien ici, mais alors ça a l'air terrible dans les mots dont vous avez besoin. Vous pouvez voir que je peux juste taper dessus juste pour voir à quoi ressemble mon nom. En fait, avant de passer par, vous pouvez cliquer sur le nom et vous donne juste un plus grand échantillon de tout et de toute l'utilisation différente, et l'une des choses utiles ainsi que cela vous donne une police correspondante est nous allons l'utiliser pour nos titres dans nos grands titres, mais nous avons besoin d'une police plus simple pour la copie corporelle ou le texte de notre paragraphe. Vous pouvez voir ici qu'il m'a donné une option qui dit essayer Raleway, ou celui-ci, ou celui-ci. J' ai opté pour celui-ci, Open Sans Condensed. Probablement pas les versions légères, peut-être un peu trop difficile à lire en ligne en termes de convivialité. Mais cela vous donne juste des options, donc si vous êtes nouveau ou si vous êtes vieille école et que vous avez juste besoin d'aide pour choisir une bonne police. Ce que nous faisons, c'est que nous choisissons celui-ci et puis le trouvons en haut et nous disons « Sélectionnez cette police », ou si vous êtes de retour dans l'autre écran ici, vous cliquez sur ce petit bouton « Plus », et cela ajoute juste ce bas ici appelé collections, et vous pouvez ajouter les polices. Combien en ajoutes-tu ? Vraiment, tu as juste besoin de deux. Il se résume à plus. C' est un mélange de règles de police. Si vous avez 10 polices sur votre site, ça va avoir l'air terrible. Donc, gardez-le au minimum. Vous n'avez besoin que de deux, une police de titre et une police de copie de corps. Vous pouvez en avoir trois si vous en avez besoin. Je vais ajouter celui-ci et ensuite je vais trouver ici Open Sans, et il y a Condensed ici, et j'ai frappé « Plus ». Ils sont tous les deux ensemble. Je vais ouvrir ça. Maintenant, il y a quelques choses que je dois faire. Je vais cliquer sur « Personnaliser » parce que je dois décider de ces polices, ce que je veux. Ce que je veux en fait, c'est que je veux l'audacieux et je ne vais pas utiliser le standard dans mon design. Ce que vous pourriez faire, c'est que vous pourriez tout simplement les allumer parce que nous en sommes à l'étape du concept. Nous ne montrons pas lequel nous allons utiliser, nous les téléchargeons tous. Vous ne voulez pas tous les utiliser bien que dans votre conception finie réelle, il suffit de choisir un ou deux parce que vous pouvez voir le plus de temps nécessaire pour charger votre page, et une page de chargement lent est mauvaise pour quelques raisons, c'est votre utilisateur passer des âges à essayer de télécharger des polices pendant que votre page ne se charge pas, ne se soucient pas de votre sélection étonnante de polices, et Google n'aime pas cela, donc ils vous pénalisent en termes de recherche. Essayez de ne pas choisir trop de polices. Mais dans mon cas, je les télécharge tous parce qu'en ce moment je suis juste à mon stade de conception. Je ne choisirai qu'un ou deux. Mais ici, c'est comme une petite flèche obscure, cette chose qui dit télécharger cette sélection. Le truc cool à ce sujet est qu'il va télécharger, et je vais le mettre dans mes fichiers d'exercice. Ce sera là prêt pour vous à l'utiliser dans le vôtre afin que vous n'ayez pas à passer par ce processus. Vous pouvez commencer à les utiliser. Mais on les a téléchargés. Ils sont là. Ouvrez le zip, et sur Mac et PC maintenant, ceux-ci sont assez faciles à mettre en œuvre. Je vais ouvrir Open Sans, et je vais double-cliquer sur tous ces éléments. Il va s'ouvrir et je peux cliquer sur « Installer ». Je les ai déjà installés sur le mien plus tôt. Faites-le pour les deux. Sélectionnez tous ces éléments, double-cliquez, qui va installer, et vous pouvez commencer à les utiliser dans Illustrator. Illustrator n'a pas besoin d'être redémarré. Vous trouverez juste qu'ils apparaissent étonnamment. Ouvrez Sans Condensed et je vais utiliser l'audacieux. Je pense que j'utilise Condensed Bold. Cool. Ce que nous avons fait là-bas, c'est que nous les avons téléchargés pour les utiliser sur notre ordinateur , et ce qui est cool, c'est que vous pouvez les utiliser pour toutes sortes de choses. Ce n'est pas forcément le web design. Vous avez juste un tas de polices cool à utiliser maintenant. Google vous permettra d'utiliser commercialement. Maintenant, ce que vous êtes censé faire est de choisir ceux-ci et lorsque vous donnez plus tard vos fichiers à un concepteur, un concepteur Web, ou à un développeur Web, ou que vous le faites vous-même, vous utiliserez ces polices d'une manière spéciale lorsque le site web est construit. Ils appellent Google et disent, « Nous utilisons ces polices, s'il vous plaît », et Google dit, « Pas de soucis, » et les fait fonctionner sur votre site Web. Nous venons donc de les télécharger pour l'instant pour les utiliser sur notre bureau. Parfait. Allez sur typekit.com, et ici cliquez sur « Polices ». Vous devez vous connecter avec votre licence Creative Cloud, vous pouvez voir mon petit visage là-haut, et vous pouvez taper un peu d'exemple de texte. La seule chose que vous devez vous assurer est que Typekit a certains qui sont utilisés uniquement sur le bureau, et d'autres qui sont utilisés sur le Web aussi. Vous ne voulez pas vous assurer que c'est une coche pour dire. Je veux ceux qui peuvent être utilisés sur un site Web, parce qu'il ne sert à rien d'en concevoir un, ils ne peuvent pas l'être. Ici, les mêmes choses comme Google. Vous pouvez cliquer sur, disons que je veux des polices scripty uniquement, et il les sépare juste aux polices de script. Je veux peut-être trouver un slab serif. Vous pouvez faire la même chose avec la largeur qu'ils sont, quel point ils sont lourds, toutes sortes de trucs cool. Ouais, ça devient un peu plus facile de commencer à implémenter. Dites que j'adore cette police ici, ce Sutro, et je clique dessus. Je décide lequel je veux utiliser. Je veux utiliser ce remplissage de luxe, j'adore ça. Cliquez sur « Synchroniser ». Ce qui se passe est en arrière-plan, c'est en fait l'installation sur votre machine, ce qui est assez fou. Vous pouvez voir qu'il est juste installé là, donc Sutro. C' est un peu plus facile que les polices Google. Super. Je peux commencer à les utiliser. Rappelez-vous, le seul problème avec Typekit est qu'il s'agit d'une licence payante. Vous l'obtenez gratuitement pour votre Creative Cloud. Donc, pour votre propre personnel, c'est parfait. Mais aller voir un client, vous allez devoir expliquer que ces polices sont sous licence. C' est un coût annuel, et vous ajouterez cela à votre conception web juste pour vous assurer qu'ils sauront qu'il y a des coûts supplémentaires pour ces polices. Souvent, je vais juste à Google Fonts parce qu'aucun coût supplémentaire. Les bibliothèques de polices sont différentes. S' il y a une police qu'ils aiment et qu'elle est dans Typekit, vous pouvez leur dire, oui, vous pouvez l'utiliser mais elle doit être sous licence. Je suis bouleversé maintenant. Il y a donc d'autres sites à visiter. Un autre est Font Squirrel. C' est tout à fait comme les deux, mais entre les deux j'aime Google Fonts si. Cool. C'était une explication particulièrement longue de la façon d'utiliser les polices. 21. La vidéo de production finalise la nav, la hero box et les polices de caractères: Salut, là. Dans cette vidéo de production, la vidéo de production signifie simplement que je ne fais rien de nouveau, je vais juste combler les trous pour notre design. Vous pouvez regarder ou vous pouvez l'ignorer, c'est bon. C' est ce que nous allons arriver à la fin de cette vidéo, nous allons mettre des tiques et des boîtes colorées, mais nous savons comment mettre des tiques et des boîtes colorées, et donc allons-y et le faire maintenant. Cool. Tout d'abord, dessinons nos petits boutons sur le dessus ici. Vous pouvez simplement les laisser sous forme de texte, mais ce que je veux faire est de saisir mon outil Rectangle et de dessiner une chose de bouton qui tient là dedans. Maintenant, je vais utiliser mes couleurs que nous avons téléchargées, les couleurs du portefeuille BYOL. De quelle couleur est-ce que je veux qu'il soit ? Le vert est cool. Je vais cliquer avec le bouton droit de la souris. Avant même d'arranger ce qu'il y a à l'arrière, on les envoie à l'arrière. Au revoir. Il est derrière la navigation, il suffit de le voir là-bas. Donc je l'ai défait. Donc, il va se défaire. Ce que je vais faire, c'est qu'il y a une option ici qui dit d'arranger et d'envoyer, au lieu à l'arrière, envoyer à l'arrière, juste derrière comme le gars en face de lui. Que se passe-t-il ici ? Oui, j'ai la bonne taille. Je vais faire une copie de ce gars et les garder cognés ensemble, mais je vais utiliser cette couleur rouge pour ça. Je clique avec le bouton droit de la souris, « Organiser », « Envoyer vers l'arrière ». Parfois, il y a deux mecs entre eux et Backwards ne marche pas. Tu dois continuer, « Envoyer en arrière ». Vous pouvez voir qu'il y a un raccourci, Envoyer vers l'arrière. Je vais le faire jusqu'à ce que je m'en occupe. Super. Ce type doit être au centre. Cool. Allons zoomer un peu, "Commande-1", pour qu'il soit de taille réelle. En fait, je vais zoomer une fois de plus. Je vais le mettre dans ma boîte de héros en haut. Je vais allumer mes guides à nouveau, aller chercher l'outil Rectangle, et nous allons regarder des images dans une vidéo séparée, mais j'apporte mon image maintenant, mais nous allons juste mettre dans une grande boîte de couleur, Envoyez-le à l'arrière, et regardez mettre le reste de mon genre. Alors construisons ça. Je vais prendre mon outil Type. Je vais traîner ma boîte, ça va couvrir, pas exactement combien encore, mais je sais que c'est mon texte, mon inspiration, incroyable, m'engager comme entraîneur. Bien sûr que c'est inégal. Designer UX. Super. Taille de police, j'aime ça. Ça a l'air bien. Ça va être blanc parce que je vais mettre une image assez sombre derrière elle. En fait, ce sera le blanc cassé que j'ai utilisé. Ce blanc cassé est là aussi. C' est dans la couleur, donc vous pouvez utiliser l'un ou l'autre. Super. Ce que je veux faire, c'est que je veux probablement l'insérer par l'une de ces colonnes. Vous pouvez le faire dans la conception web assez facile. Vous pouvez dire laisser celui-ci vide, puis commencer cette zone de texte un peu plus loin. Je vais avoir un peu de type ci-dessus, je vais laisser cela plus tard dans le tutoriel. Ce type a besoin d'être un peu plus bas. J' utilise ma flèche noire juste pour le faire glisser un peu vers le bas. Je vais mettre une ligne blanche en dessous. Pourquoi ? Juste parce que j'aime l'idée de ça. Donc, je vais récupérer mon outil Segment de ligne. Pour le moment, peu importe le remplissage qu'il a, mais il importe certainement quel trait de couleur nous avons. J' utilise encore ce blanc cassé. Je vais cliquer dessus. Ça va les traverser. Je vais tenir « Shift » pour m'assurer que ça va droit. Combien de pixels ? Probablement juste un pixel va bien paraître. Si j'éteins et allume les grilles juste pour avoir une idée de tout ça. Ouais, j'aime ça là-bas. Maintenant, je vais faire un bouton en dessous. Ça va ressembler exactement à ça, donc je vais le voler, le copier et le coller. Ce sera mon appel à l'action. Engagez-moi, s'il vous plaît Je vais zoomer un peu. Je vais probablement utiliser la même taille de police. Celui-ci va dire : « Parlons. » Je pense que tout le monde écrit des choses comme  : « Allons prendre un café », « Laisse-moi t'aider. » Vous pouvez penser à votre propre version désarmante familière. Une chose que j'ai remarqué quand je suis ici, pouvez-vous voir que c'est un stroker à l'extérieur ? J'ai cliqué dessus. Il y a en fait ce blanc cassé à l'extérieur de ça. Il a le remplissage vert, mais je vais tourner le blanc cassé en ligne rouge, ce qui veut dire qu'il n'a pas de trait et qu'il s'alignera. Toujours ne s'alignent pas parfaitement, n'est-ce pas ? Parfois, faites-le glisser, en le faisant glisser vers l'arrière. Ça a l'air parfait maintenant. Charmant. Quelque chose d'autre que je veux faire ? Non, il y a beaucoup de choses que je veux là-dedans. En fait, une dernière chose pendant qu'on passe des âges faire ça, c'est que je vais copier et coller ce texte. Je vais le mettre ici et il y a une meilleure copie que je veux y aller. Je vais avoir cette petite chose qui dit : « Je suis actuellement disponible pour le travail. » Je vais utiliser cette couleur jaunie et je vais la déplacer. Je vais mettre une ellipse ici, comme un petit cercle. Je vais mettre une tique dedans. Nous allons enregistrer la coche pour plus tard parce que je vais vous montrer comment faire cela dans la partie des symboles de la série vidéo. Mais pour le cercle, maintenez l'outil Rectangle enfoncé, attrapez l'outil Ellipse, et si vous faites simplement glisser un cercle aléatoire, tout ira bien. Vous allez probablement l'ailier. Mais si vous maintenez la touche Maj enfoncée pendant que vous le faites glisser, cela en fera un cercle parfait pendant que vous conduisez. Si tu conduisais. Ça a été une longue journée. Donc ça va être un cercle ici. On va le remplir avec ce vert plus léger. Cela aura plus de sens lorsque nous changerons cette image en arrière-plan. « Commande-1". Tout est de la bonne taille, je crois. J' ai l'impression que ce cercle est un grand, mais on le changera plus tard. C' est assez pour la vidéo de production. Allons et commençons à faire le prochain morceau. 22. Images gratuites ou libres de droits: Salut là. Dans cette vidéo, nous allons voir où obtenir des images gratuites et quelles sont les images libres de droits. Nous commencerons avec les images gratuites. De bons endroits où aller. Le meilleur endroit est probablement celui qui s'appelle freeimages.com. Il y a beaucoup de choses ici, et vous avez juste besoin d'un login et vous pouvez les utiliser commercialement, ce qui est assez cool. Si j'avais besoin d'une photo d'une rose, ce que vous devez faire, c'est ignorer ces bons-là. C' est ainsi que, je suppose que le site gagne son argent, qu' il vous montre des trucs qui sont à moitié décent et qui vont ensuite, qu'en est-il de ceux-ci ? Ce sont ceux que vous allez payer, et ça n'a pas de problème. Mais si vous cherchez gratuitement, mon gros conseil pour utiliser l'un des sites gratuits est évident. Du côté ici, ils disent la pertinence. La plupart d'entre eux commenceront par ça. Vous voulez aller à celui qui dit Most Download. Je trouve que cela apportera la crème de la récolte au sommet. Celles qui avaient été les plus téléchargées. Vous pouvez voir qu'ils sont tous de différentes tailles. Certains d'entre eux sont vraiment grands et certains d'entre eux sont assez petits, comme celui-ci ici est assez agréable, c'est une bague de mariage découpée sur blanc, et ici freeimages.com. Maintenant, un autre site cool pour aller, c'est en fait juste comme un répertoire pour beaucoup d'autres images gratuites plus petites, et je sais que c'est un grand long lien vers le haut ici, je vais laisser un lien dans la description quelque part, mais si vous venez de Google « Shopify 22 sites impressionnants pour de superbes images de stock gratuit », vous finirez ici. Ce qui est vraiment cool à ce sujet, c'est que tout à fait niche comme certains des sites qu'ils vont mettre en place une image gratuite par jour, mais certains d'entre eux sont vraiment beaux. J' ai regardé ces gars ici, Gratisographie. Ce type, c'est un photographe, Ryan McGuire. Il fait des trucs vraiment cool et il les permet d'être utilisés commercialement. Bravo, Ryan. Ouais, tu peux passer par. Il y a plus de choses commerciales ici avec des modèles, alors que, disons, freeimages.com souvent c'est juste une vraie bibliothèque de stock standardisée. Jetez un coup d'oeil à cette liste et il y a beaucoup de choses différentes ici, mais Free Images est l'endroit principal. En termes de libre de droits, libre de droits ne signifie pas libre, cela signifie simplement que vous payez pour cela une fois et vous pouvez l'utiliser encore et encore. Ils vont entre 20$ et 40$ US à acheter et ensuite vous pouvez les réutiliser. Ce sont trois acteurs principaux : iStock, Shutterstock, et celui-ci s'appelle Adobe Stock. Ils ont tous une bibliothèque très similaire faisant une chose similaire. J' utilise Adobe Stock principalement à la légère parce qu'il est si bien lié à Creative Cloud, et c'est probablement son plus grand avantage par rapport aux autres. Ils ont tous des interfaces impressionnantes légèrement différentes et donc utiliser celle que vous aimez le plus. J' utilise Adobe Stock pour économiser pour l'extérieur. Je veux mettre des images de designers. Donc, je viens de taper le designer. En fait, mettons-nous en graphiste, et il arrive. Plutôt similaire. Donc ce que je vais faire, c'est que je vais prendre choses de design inspirantes, et ce que je vais faire est, rappelez-vous, plus tôt dans ce tutoriel, j'ai fait cette bibliothèque appelée, ou est-ce là Illustrator ? Je ne sais pas, le portefeuille de Dan est ce que j'appelle ça. J' ai donc gardé un aperçu dans les portefeuilles de Dan. Si je saute dans Illustrator maintenant, d'accord. Nous avons à Illustrator, et j'ai appuyé sur ce petit bouton Update, il y a. La bonne chose à ce sujet est que je ne l'ai pas encore payé, vous pouvez voir qu'il a le filigrane, mais c'est une belle copie et je peux commencer présenter à mon client et dire que ce sont les images, c'est ce que je suis penser et leur donner un coût pour ces images aussi. Ce qui est vraiment bien, c'est que si je commence à concevoir ceci, et que je commence à l'ajuster et à le recadrer et à changer les couleurs, ce que je peux faire est ici, je peux cliquer dessus et juste dire License Image, et si j'ai, disons, un abonnement à Adobe Stock et je peux obtenir 10 images par mois pour quelque chose comme $20 US, quelque chose autour de cela, et il serait juste licence et mettre à jour cette chose. Je n'ai pas besoin de le lire, de le relier ou de le réimporter ou de tout ce jazz, donc c'est plutôt cool. Ce que je vais faire pour ça c'est, c'est que je vais aller chercher des images de créateurs. Je vais taper ux, mon mot préféré. Je vais dire oui, je veux que celui-ci en fasse partie, et vous pouvez voir qu' il y en a un, mais il y a aussi juste un aperçu de sauvegarde. Je vais enregistrer cet aperçu et je vais enregistrer cet aperçu. Je vais sauver celui-là. Je vais te sauver, et je te sauverai. Je prétends que c'est mon portefeuille. Je n'ai pas fait ces choses, je les télécharge. Tu verras ici, j'espère qu' on devrait avoir un tas de petites images pour qu'on puisse commencer à travailler avec. D' accord. Donc, que vous utilisiez Adobe Stock, il y aura un lien à l'écran pour accéder à Adobe Stock. Si vous ne l'avez jamais utilisé auparavant et que vous voulez vous inscrire, utilisez mon petit lien. Pourquoi ? Parce que je reçois une coupure d'Adobe. Ça ne vous coûte rien d'autre, mais ils me donnent un peu moins de votre abonnement. C' est gagnant-gagnant, gagner pour moi principalement. Mais oui, essayez Adobe Stock ou iStock est vraiment bon et Shutterstock en est un autre. Peut-être aller comparer ceux-ci et voir lequel vous voulez utiliser. Les images gratuites ont obtenu sur freeimages.com, et si vous voulez obtenir des images libres de droits que vous pouvez acheter et utiliser encore et encore pour de nombreux projets différents, allez sur stock.adobe.com. 23. Ajouter des liens pour recadrer et masquer des images dans Illustrator: Dans cette vidéo, ce que nous allons faire est, nous allons apporter quelques images et nous allons voir comment les recadrer dans ces petites vignettes ici. Nous allons regarder les carrés et les cercles. Allons-y. Tout d'abord, allumons nos guides, rappelez-vous que c'est Commande, point-virgule ou si vous êtes sur un PC, c'est Contrôle, point-virgule. Je vais faire défiler un peu vers le bas, je vais zoomer un peu. Ce que je veux faire, c'est que je veux ajouter mes petites vignettes comme nous l'avons fait dans notre filaire. Je vais prendre l'outil Rectangle et je vais en tirer mon poing. Il y a ma première miniature, elle va s'étendre sur 1, 2, 3, 4 colonnes et maintenant je veux mettre une image à l'intérieur. En fait, ce que je pourrais faire est, je pourrais lui donner une couleur de remplissage, n'a pas besoin d'une couleur de remplissage, je le fais juste, donc c'est utile pour vous de voir. Je vais dupliquer ces gars ici. Je vais avoir 1, 2, 3. Joli. Je tiens Shift sélectionner tout ça. J'ai ma flèche noire. Je maintiens ma touche Alt enfoncée, rappelez-vous, pour faire glisser et copier en même temps, ou vous pouvez simplement aller Contrôle C, Contrôle V. Ce que je veux faire, c'est que je veux maintenant mettre dans ces images. Pour importer une image dans Illustrator, nous montons à Fichier et nous descendons à quelque chose appelé Place. Ils utilisent la place au lieu de l'importation juste pour confondre tout le monde. Accédez à Fichier, Place, puis à vos fichiers d'exercice. J' ai des images. Je les ai téléchargés dans le tutoriel précédent et d'autres versions filigranées, évidemment. Si vous voulez les utiliser, vous devez les payer chez Adobe Stock, mais en voici un filigrane. Ce que je vais faire, c'est que tu peux les amener un par un. Je peux apporter la miniature 1, Placez, cliquez sur ceux, il va passer comme il est en pleine taille. C' est très bien pour ces petites versions de vignettes ou ces versions de filigrane, mais parfois elles peuvent être assez grandes. Ce que vous pouvez faire est d'aller à Fichier, Place et ce que je préfère faire est de choisir le premier et de le faire glisser. Il va contraindre la hauteur et la largeur. Pour l'obtenir à une taille rugueuse que vous voulez qu'il soit le premier. Vous pouvez apporter beaucoup à la fois Fichier, Place, et vous pouvez saisir tous ces gars, toutes nos vignettes et vous pouvez aller cliquer sur vous, pouvez cliquer sur vous, pouvez cliquer sur vous, pouvez cliquer sur vous, vous, vous, vous, vous, vous, vous obtenez l'idée. Vous pouvez les amener, tous après l'autre ou si vous avez fait ce que j'ai fait et obtenu des miniatures de votre bibliothèque, vous pouvez simplement les faire glisser d'ici. Quoi qu'il en soit, c'est comment apporter vos images. Je vais faire glisser les images de ma bibliothèque de stock d' ici et nous allons regarder les recadrer vers ce rectangle. Faites-les glisser, alignez-les et redimensionnez-les comme je veux les insérer dans la boîte. Parce que maintenant ce qu'on va faire, c'est les recadrer sur cette vignette. Je vais maintenir la touche Maj et cela la fait évoluer manière réactive afin que la hauteur et la largeur viennent le long et je vais l'obtenir grossièrement. Je peux ajuster ça après. Alors ce que je dois faire, c'est que je dois le sélectionner et la boîte derrière lui. La façon la plus simple de faire est, parce qu'il n'y a rien ici que je peux cliquer sur Hold and Glisser. Vous voyez que je peux juste traîner sur ces deux-là et je les ai tous les deux. Le raccourci est Command 7 ou Control 7 et vous apprendrez celui-ci pour le rognage. Le long chemin est sous Objet et il est sous Masque d'écrêtage et Make. Ça devient un peu dur, tu crois que je vais le recadrer ou je vais le masquer. Ça s'appelle un masque d'écrêtage dans Illustrator. Vous pouvez voir là, il y a un raccourci Command 7. Ce qui va arriver, c'est que ça ne marchera pas. Parce qu'en fait, cela doit être derrière notre forme que nous voulons recadrer. Je vais cliquer avec le bouton droit de la souris et aller à Arrangement et envoyer à l'arrière. Je vais faire semblant de l'avoir fait exprès, mais je n'ai pas oublié. Maintenant, commande 7. Regarde ça, lisse. Faisons une de plus. Allons le traîner dedans. Maintenez Maj enfoncé, mettez à l'échelle pour qu'il soit à peu près de la bonne taille. Mettez-le là-dedans. Je suis d'accord avec un peu de recadrage intéressant, donc ça ne me dérange pas que ce n'est pas parfait là-dedans, et rappelez-vous, n'oubliez pas, il doit être à l'arrière. Sélectionnez les deux, puis Commande 7 ou Contrôle 7 sur un PC. Dis que tu n'aimes pas cette récolte, ouais, je pensais que ça allait être cool, mais on dirait que c'est éteint. Ce que vous pouvez faire est de ne rien avoir sélectionné avec la flèche noire, en cliquant sur l'arrière-plan et cliquez dessus une fois et vous obtenez le carré. Si vous double-cliquez sur lui, ce qui se passe, c'est que vous allez dans ce mode d'isolement, et cela signifie juste que je suis à l'intérieur. Pensez que la couche 1 est la base de la maison, c'est de retour ici, mais quand je double-clique sur quelque chose, je vais à l'intérieur de ce groupe. Ça s'appelle un groupe de clips. Cela signifie que je peux commencer à travailler sur cela séparément de la place à l'extérieur. C' est bon de faire attention à la façon dont vous le faites glisser. Vous pouvez voir que je peux faire glisser l'image autour de l'extérieur ou je peux faire glisser le centre de ceci ou je peux faire glisser le bord du rectangle. Vous pouvez faire glisser les deux bits dans cette vue, qui est un peu déroutant. Rappelez-vous simplement si vous prenez le centre, vous faites glisser l'image et si vous prenez le bord, vous faites glisser ce carré à l'extérieur. Donc c'est à vous de choisir ce que vous voulez faire. Je vais traîner ça ici. Vous pouvez le redimensionner encore à partir d'ici. Laisse-moi aller pour un gros clip. Celle-ci va être une image vectorielle, elle va l'être. Quoi qu'il en soit, pour se déplacer vers le retour à la base de la maison est vous pouvez cliquer sur cette flèche un couple de fois ou simplement double-cliquer dans ce pas d'espace autour ici, cette zone blanche. Super. On va traverser et faire ça. On va t'attraper. Je vais zoomer dessus maintenant. Nous ne ferons pas de cercles pour celui-ci, mais je le ferai dans la seconde. Mettons ce type à l'arrière, filtrons peut-être ici, Commandement 7. Joli. Disons que je veux en faire un pour un cercle ou un cercle arrondi, un polygone ou une étoile, peu importe. Faisons semblant que je vais faire une version cercle. Je dessine mon beau cercle. Je lui donne une couleur de remplissage. Il n'en a pas besoin. C' est plus facile pour nous de voir. Je vais faire glisser cette image, la mettre au-dessus. Flèche noire, mettez-le au-dessus, assurez-vous qu'il est en dessous, sélectionnez les deux, Commande 7, vous pouvez voir que vous obtenez exactement le même effet. Si vous êtes déjà à portée de main avec un outil Plume, nous allons regarder l'outil Plume plus tard. Mais vous pouvez dessiner n'importe quelle forme et faire exactement la même chose, l'utiliser comme une boîte de recadrage. Mais si vous avez besoin d'être enseigné, ne vous inquiétez pas, nous allons le faire dans un autre épisode, eh bien une autre vidéo au moins. Faisons les dernières parties. Lesquels que j'utilise. Je n'aime plus ce type. On l'a. Commandement 7. Vous pouvez voir, vous pouvez obtenir un peu de flux après un peu de temps. Tu es un peu grand, descends. Tu reviens, toi, toi. Commande 7 même. Le dernier était ce type là. On veut être un peu plus gros. Quel raccourci j'utilise là ? Juste pour avoir les choses derrière l'autre, et on l'a regardé plus tôt, c'est le, si je sélectionne quelque chose que je ne veux pas le coller derrière, Arrangez, Send to Back peux-tu le voir là-bas ? C' est Commande, Shift, Carré, Envoyer vers l'arrière. Vous pouvez voir ce crochet carré. Sur un PC, ce sera Shift and Control, Square Bracket. Certains des raccourcis que vous apprendrez par cœur et d'autres vous ne le ferez pas. La dernière chose que je fais est que je veux ajouter un peu d'un coup à l'extérieur juste pour leur donner une meilleure cohérence. J' ai sélectionné ma flèche noire les a tous sélectionnés. Vous remarquerez que le tracé n'est pas apparu ici car on les appelle maintenant un groupe Clip au lieu de nos boîtes normales. On peut ouvrir Window et descendre à Stroke. Il est là et je vais lui donner un coup de peut-être, il doit être d'un pixel ou au-dessus, ne peut pas être quelque chose de plus bas que cela, il ne peut pas imprimer parce que nous avons affaire à des pixels ici. Super. Quelle couleur devrait-il être ? Je vais le faire, où est ma couleur de course ? Je vais ouvrir Window et je vais à Color. Ici, c'est en bas ici. Ma couleur de trait est noire. Je vais probablement juste choisir, je ne veux pas choisir une couleur grise. Vous rencontrez probablement ce problème si vous êtes un utilisateur expérimenté d'Illustrator, est-ce que RGB est difficile à choisir le gris si vous devez les faire correspondre tous. La façon la plus simple de choisir un gris est de changer vos couleurs de RVB à ce code Nuance Saturation et Luminosité. C' est vraiment facile. Cela signifie simplement glisser la luminosité vers le haut et vers le bas. Je vais utiliser un peu de gris. Joli. À mes guides, à quoi ça ressemble ? Il est beau, sauf que le tableau d'art doit être étendu et je vais étendre l'esprit arrêter un peu vers le bas parce que j'ai mon pied de page et des choses à coller là-dedans. C' est tout pour notre recadrage dans le masquage des images. Passons à la prochaine vidéo. 24. Lavis d'images dans Illustrator avec un arrière-plan coloré: Hé, là. Dans cette vidéo, nous allons faire cette petite image en arrière-plan ici où c'est un fond plein extensible, et il est délavé, et il a un ton vert. Nous allons voir comment faire cela dans Illustrator. D' abord, ramenons notre image. Maintenant, il y a deux façons de le faire entrer, nous pouvons le faire glisser de notre bibliothèque si nous y sommes, ou nous pouvons aller à Fichier, Place. Maintenant, cela va changer comment nous le faisons, disons, noir et blanc. J' apporte l'image, je la traîne belle et grande, super. Si je le fais de cette façon, il devient très facile de convertir en noir et blanc. Je vais vous montrer que de temps temps nous allons regarder quelques-unes de ces autres images qui sont liées à dire, votre bibliothèque, et elles ne deviennent pas plus difficiles, elles ne sont qu'une étape supplémentaire. Ce qu'on va faire, c'est qu'on va le recadrer là où on en a besoin. En fait, faisons-le noir et blanc d'abord avant d'aller et recadrer dans ce carré en arrière-plan. Pour ce faire, c'est assez facile, faites-le sélectionner et allez dans « Modifier », « Modifier les couleurs » et « Convertir en niveaux de gris ». Maintenant, il n'y a pas beaucoup de contrôle dans Illustrator comment vous convertissez en niveaux de gris, cela se passe, votre niveau de gris et l'espoir pour le meilleur. Si vous voulez être un peu plus de contrôle sur ce qui se passe, différentes couleurs vont différents gris, vous pouvez le faire dans Photoshop. Maintenant, ce n'est pas un cours Photoshop, alors nous allons l'oublier. Mais si vous avez vraiment besoin de ce contrôle, tournez vers Photoshop et faites un calque de réglage, c'est sous le calque, les calques de réglage et on l'appelle noir et blanc. Vous avez beaucoup de contrôle sur la façon de le convertir en noir et blanc, enregistrez-le puis amenez-le dans Illustrator. C' est assez facile cependant dans Illustrator et je suis assez satisfait des résultats. Si je veux faire exactement la même chose, je vais vous faire monter. Je veux faire exactement la même chose à, disons, ce graphique ici. Parce que c'est lié à ma bibliothèque, ça ne me laisse pas faire autant. Donc, si je double-clique dessus, double-cliquez dessus à nouveau, j'ai mon image. Si je vais à la même chose, « Modifier » et aller à « Modifier les couleurs », vous remarquerez qu'il est grisé. C' est juste l'une des choses qui se produisent si vous utilisez des éléments de votre bibliothèque parce qu'ils sont connectés. Si vous mettez à jour votre élément de bibliothèque, il est mis à jour ici, donc il ne veut pas que vous le jouiez. Pour jouer avec elle, est, vous avez juste à cliquer sur « Intégrer ». Continuez à double-cliquer dessus jusqu'à ce que vous ayez votre image. Ensuite, allez dans « Intégrer » et vous remarquerez que vous pouvez « Modifier », « Modifier les couleurs » et « Convertir en niveaux de gris ». Je vais annuler parce que je ne veux pas le convertir en niveaux de gris. Je veux juste vous dire que si vous avez ce problème, c'est peut-être un logo pour lequel vous essayez de le faire, tout ce que vous avez importé. Donc on a des niveaux de gris. Je vais le mettre à peu près là où je le veux, et rappelle-toi qu'il doit être à l'arrière. Ensuite, je vais sélectionner ces deux deux et je vais utiliser mon raccourci, Command, sept sur un Mac, et Control, sept sur un PC. C' est ce que je veux. Mais ce que je veux faire, c'est lui donner ce regard vert-sombre, et il y a deux étapes. Vous prenez votre outil rectangle. Je vais dessiner un rectangle qui couvre tout le document là-bas, et je vais lui donner un remplissage de noir, et je vais lui donner un coup de zéro, ce qui est déjà, super, et nous allons baisser l'opacité . Vous pouvez réduire l'opacité de différentes manières dans Illustrator, nous allons l'utiliser en haut. Nous allons descendre jusqu'à ce que nous soyons satisfaits de l'arrière-plan, ça dépend de ce que vous voulez. Maintenant, évidemment, c'est au-dessus de tout, donc ce que je vais faire c'est faire un clic droit et je vais aller « Arrangement », au lieu d'aller jusqu'à l'arrière, je peux aller jusqu'à l'arrière. Maintenant, c'est derrière cette image. Donc je vais cliquer sur cette image et dire, vous êtes à l'arrière. On y va. Ok, donc ça a l'air mieux. Je veux y ajouter cette teinte verte. Donc vous pouvez laisser ça ici et décider en fait, je vais augmenter l'opacité. Je vais avoir ce fond délavé, regard noir, et c'est bon. La prochaine chose que je veux faire, c'est arrêter de jouer avec les couleurs, Dan, c'est que je vais créer un nouveau rectangle en plus de tout cela. Je vais d'abord désélectionner en arrière-plan. Donc flèche noire cliquez en arrière-plan puis prenez mon outil rectangle, le rend plus facile. Dessinez un rectangle en haut. Je vais faire de ça mon vert. Maintenant, je dois le mettre derrière, ok, pris en sandwich. Je le veux devant la boîte noire et l'image, mais derrière tout le texte. Il y a deux façons différentes. Différents formateurs vous montreront différentes manières. Ce que je trouve le plus facile à faire, c'est de le déplacer parce que c'est plus facile de remonter ensemble, c'est que, en fait, je vais envoyer ce gars à l'arrière. Donc vous, la boîte verte, vous allez à l'arrière. Puis ces gars, je voulais l'amener au-dessus de ces deux-là. Alors je vais t'attraper. Je viens de les défaire tous pour que je puisse les voir tous, donc je peux cliquer sur vous, maintenir « Shift » saisir la boîte noire, cliquer avec le bouton droit sur les deux et le renvoyer. La boîte verte est à l'arrière maintenant. Ces gars sont derrière cette boîte verte, mais devant ce texte. Ok, donc c'est comme ça que je fais. Il y a différentes façons. J'utilise le panneau Calques. C' est ma façon. Ce que je veux faire, c'est évidemment que ça ne marche pas tout à fait. Je couvre tout. Nous allons utiliser quelque chose appelé un mode calque, et cela nous permet de, vous pouvez juste réduire l'opacité, et cela fonctionne. Mais ça ne me donne pas le look que je veux. Je veux vraiment ce noir fort avec remplissage vert dans les bords. Ok, donc ça marcherait. Mais ce que je vais faire, c'est quelque chose qu'on appelle un mode calque. Vous le faites en cliquant sur le mot « Opacité » en haut. Donc flèche noire, cliquez sur la boîte verte, cliquez sur « Opacité », et ici où il est dit Normal, qui fait exactement ce que vous pensez qu'il était. Vous pouvez jouer avec ceux-ci, de sorte que vous pouvez voir. C' est une façon de la boîte verte d'interagir avec les trucs derrière elle. Au lieu d'utiliser simplement l'opacité, vous pouvez utiliser ces autres modes. Ils sont tous légèrement différents, et si vous avez une image différente avec des couleurs différentes, vous allez trouver un mode de calque différent qui fonctionnera. Je vais utiliser Soft Light principalement parce que j'ai déjà joué avec cela et je l'aime. Mais la lumière douce est un peu forte, donc ce que je vais faire, c'est que je vais juste en baisser l'opacité. Donc, j'utilise le mode calque et l'opacité et il semble, je l'aime beaucoup mieux que de simplement abaisser l'opacité. Vous pouvez voir qu'il y a encore des noirs vifs en arrière-plan, mais il est teinté aussi, donc je peux toujours mettre ce vert là-dedans, remplir les trous avec du vert. Très bien, mes amis, c'est comme ça que vous lavez un fond et que vous y ajoutez un peu de couleur en même temps. D' accord, sur la prochaine vidéo. 25. Comment utiliser les calques dans Illustrator 2017: Comment vas-tu sur le campus ? Dans cette vidéo, nous allons regarder les calques dans Illustrator et ce que nous allons faire, c'est que nous allons finir par ressembler à ceci où nous avons un calque avec toutes nos illustrations, d' accord, et un calque avec le calque d'arrière-plan. La chose cool à propos du calque d'arrière-plan est qu'il est verrouillé. Il y a une icône de verrouillage ici, donc on ne peut pas la déplacer. Alors allons-y et faisons-le maintenant. D' accord. Donc la première chose que je veux faire est que je ne vais pas utiliser le blanc de l'arrière-plan ici, c'est un blanc pur d'Illustrator. Ce que je veux faire, c'est en fait que je veux le mettre comme mon blanc cassé que j'utiliserais ici. D' accord. Donc, je vais attraper l'outil rectangle et vous pouvez mettre à jour la couleur du tableau d'art-board. D' accord. Donc, nous devons dessiner manuellement une boîte et lui donner ce remplissage, puis je vais utiliser ma flèche noire, faire un clic droit dessus, arranger, renvoyer et juste m'assurer qu'il n'a pas de trait à l'extérieur, j'utilise juste ce gris ici. D' accord. Donc ça va être ma couleur de fond. Vous pouvez le coller derrière tout juste pour vous assurer qu'il couvre tout. D' accord ? Oui. Il n'y a aucun moyen de re-colorier ce tableau d'art. Donc, ce que je veux faire maintenant, c'est jouer avec les couches. Parce que je trouve vraiment difficile maintenant de commencer à bouger des choses et j'ai accidentellement attrapé les milieux. D' accord. C'est plus facile parce que je ne veux jamais que ces choses bougent. Donc, je veux que ces verres collent là où ils sont et ne bougent pas et la meilleure façon de le faire est de les coller sur leur propre couche, ok et verrouiller cette couche. D' accord. Dans votre panneau Calques, accédez à Fenêtre, allez à Calques, où êtes-vous les calques ? Vous êtes là. D' accord. Par défaut, avec un calque, il est très courant de travailler dans Illustrator et seulement s'ils ont un calque. Ne transpirez pas si vous n'en avez qu'un, vous savez tous de Photoshop que vous finirez avec des centaines de couches, mais dans Illustrator, si vous savez, je veux dire que ce serait juste le seul, ce n'est pas mal, ok ? Donc il n'y a rien de mal à ça. Mais nous allons faire une nouvelle couche. Cette petite page s'est retrouvée ici, d'accord ? Nous allons double-cliquer dessus et l'appeler arrière-plan, ok et il n'y a rien sur l'arrière-plan. Vous pouvez voir cette petite vignette là-bas, elle n'a rien dessus. Ce que je veux faire est de sélectionner tout ce que je veux y déplacer et parce que je fais glisser une boîte autour de tout cela, il a attrapé ma boîte verte, la boîte noire, l'image derrière elle et cette boîte grise tous ensemble en une seule fois, qui est génial. Ce que nous voulons faire est de les faire glisser sur ce calque d'arrière-plan, accord et de la façon la plus simple, vous voyez ce petit point ici, ok, ce petit carré, cliquez et faites glisser, qui déplace tout ce que j'avais sélectionné à mon arrière-plan couche. Cool. Maintenant, je vais le verrouiller. Maintenant, l'icône de verrouillage est juste destinée à savoir au hasard que c'est le trou de verrouillage, ok ? Cliquez dessus, d'accord et je verrouillerai cette couche et ils ne peuvent pas être déplacés maintenant, ok ? Le seul problème, c'est que c'est au-dessus, d'accord ? Vous pouvez voir les arrière-plans au-dessus de mon calque 1. Double-cliquez sur le calque un et appelons cette illustration ou un mot d'art, puis faites glisser ce type clic maintenez, faites glisser, donc il est en dessous. Maintenant. D'accord ? Je clique sur l'illustration, donc c'est mon calque actif. Ma couche d'arrière-plan est maintenant, ok, indésélectionnable, donc je peux aller sélectionner tous ces types, les déplacer sans sélectionner l'arrière-plan. Je suppose que c'est le but d'utiliser les couches ici. L' autre chose agréable à ce sujet est que vous pouvez éteindre cette couche, vous voyez le globe oculaire. Vous pouvez activer et désactiver toute votre couche d'arrière-plan, accord, juste en cliquant sur le petit globe oculaire là. D' accord. Mes amis, c'est comment utiliser les calques dans Illustrator. Passé à la vidéo suivante. 26. Utiliser Adobe Market pour obtenir des icônes gratuites: Dans cette vidéo, on va tricher. Nous avons besoin d'une tique et nous allons simplement le voler, voler est le mauvais mot, nous allons l'approprier Creative Cloud Marketplace et il y a beaucoup de bonnes choses là-dedans que nous pouvons utiliser et nous sommes autorisés à utiliser légalement et tout est évolutif pour vectoriser cela. Ça nous évite de le dessiner. Allons voir ça maintenant. Pour accéder à Adobe Market, nous avons installé cette application Creative Cloud. Si vous ne l'avez pas installée, accédez à adobe.com/downloads et obtenez l'application Creative Cloud. C' est celui que vous cherchez à télécharger. Il est probablement déjà installé sur votre machine et sur un Mac, il est sur cette icône supérieure ici. Si vous êtes sur un PC, c'est en bas à droite, en bas ici. Vous êtes à la recherche de ce truc indirectif Cloud. Vous voulez aller à Actifs et vous voulez aller au Marché. Nous avons regardé cela plus tôt. Le marché est vraiment, vraiment bon pour les icônes. Donc je vais cliquer ici, et dire qu'on a besoin d'une tique. « Je suis actuellement disponible pour le travail », vous pourriez avoir une tique et une croix. Donc, je veux mettre en tick et passer par et juste choisir la tique que je veux, et il y a beaucoup d'options ici. qui est cool à leur sujet, c'est qu'ils sont des vecteurs évolutifs. Celui-ci m'a l'air bien, je vais le télécharger dans mon Portfolio de Dan, parfait. Il est là, il y a téléchargement. Je vais le traîner dedans. Je vais le traîner à nouveau. La raison pour laquelle il ne glisse pas est que vous avez peut-être rencontré ce problème aussi, c'est que je suis sur le calque appelé Arrière-plan et qu'il est verrouillé. Je prétends que j'ai mis ça exprès juste pour te montrer, mais je ne l'ai pas fait. Ça arrive au meilleur d'entre nous. Au-delà de votre calque d'illustration , la version déverrouillée, je vais le faire glisser sur cette couche ici. Ce que nous allons voir, c'est que nous avons téléchargé une image et vous pouvez voir qu'elle n'est pas très bonne parce qu'elle est pixellisée quand je deviens plus grand. Donc, lorsque vous les téléchargez, allez sur Marketplace, et lorsque vous cliquez dessus, celui-ci a été fait dans Photoshop, pas bon. Cliquons sur celui-ci ici, c'est un SVG. Rappelez-vous que SVG est des graphiques vectoriels évolutifs impressionnants, il doit être IA, EPS ou SVG et il fonctionnera. Même si, je n'ai pas besoin de ça, c'est bon. Je vais aller à Download et je vais le télécharger dans le portfolio de Dan, charmant. Le voilà, il vient. Attendez qu'il se télécharge, il est là. Ok, il est là. La chose cool à ce sujet maintenant est que vous pouvez voir instantanément qu'il a la ligne bleue autour d'elle, mais vous pouvez voir qu'il est évolutif, ce qui est vraiment cool. Ce que j'aimerais faire maintenant, c'est que je vais cliquer dessus avec le bouton droit, Dégrouper et cliquer avec le bouton droit de la souris, Dégrouper à nouveau. Selon la façon dont ce sont des groupes, je vais les supprimer, [inaudible] et maintenant je me suis une petite tique. Donc je l'ai dégroupé deux fois. Je vais lui donner une couleur de remplissage de mon blanc cassé et je vais la mettre à l'échelle et l'utiliser comme graphique. Je vais zoomer, en maintenant Shift dans les coins, rappelle-toi, et il y a mon petit tique-aroni. La chose cool à propos de l'utilisation d'Adobe Market est que vous pouvez trouver trucs vectoriels là-dedans et vous pouvez l'utiliser commercialement et vous pouvez dessiner votre propre tique. Nous allons le faire dans un peu, vous montrer comment utiliser le Pinto, choses comme ça, je l'utilise pour toutes sortes d'icônes, juste plus facile de les trouver là-dedans. Très bien, c'est comment utiliser Adobe Market pour emprunter des icônes à utiliser pour vos créations. 27. Utiliser Icon finder pour obtenir des icônes sociales gratuites pour l'interface utilisateur d'un site web: Bonjour, dans cette vidéo, ce que nous allons faire c'est que nous allons obtenir ces images, ces icônes, ces icônes sociales, et nous allons les obtenir gratuitement à partir d'un endroit appelé Iconfinder. Ensuite, nous allons changer les couleurs pour correspondre à notre design. Allons-y. Première étape, nous devons utiliser Iconfinder, et de partir et trouver nos icônes. J' adore Iconfinder, et il y a beaucoup d'icônes gratuites en ligne, mais il y a tellement de vraies mauvaises choses là-bas qu'il est difficile passer au crible et les gens d'Iconfinder l'ont fait pour nous. Donc nous allons taper, disons social. Cela pourrait être votre maison, ce pourrait être des produits, icône que vous cherchez à faire. Ce que vous devez vous assurer, c'est que ça dépend comme si j'avais le mien sur l'utilisation gratuite et commerciale. Pas de lien arrière. Cela signifie juste que je dois payer pour ça, je n'ai pas besoin d'ajouter un lien les pensant, c'est totalement à vous de décider comment vous voulez travailler. Je veux m'assurer que le mien est aussi Vector, parce que je ne veux pas de pixellisation, je veux mettre à l'échelle bien. Mais les prix sont assez bon marché, comme si je regarde Any, les icônes sont acheter pour un dollar. Donc, ils ne vont pas briser la banque s'il n'y a pas un que vous pouvez téléphoner dans l'option gratuite aller pour payer pour elle et qui soutiennent le site aussi bien. Ce que je cherche, c'est Vector, Free, No back link. Pour que je puisse partir et l'utiliser. La chose cool à ce sujet est non seulement il a beaucoup d'icônes. Lorsque vous cliquez sur l'un d'eux, il a souvent une partie d'un groupe plus grand et c'est ce qui est vraiment pratique. C' est qu'ils ont tous la même apparence et avoir un look et une sensation similaires à eux tous, donc j'adore cela à propos de cette diapositive ici. C' est un test pour vous. Nous allons télécharger, disons, un groupe de ceux-ci. Quelle version dois-je obtenir le SVG, le PNG, l'IA ou le CSH ? La forme DW. Lequel est-ce que je veux ? Soit le SVG, l'IA sera parfait pour nous. Cette version Photoshop fonctionne aussi bien, mais la version PNG, n'est pas évolutive. Donc nous voulons continuer cette constriction à l'intérieur et à l'extérieur, et ces SVG et AI vont nous permettre de les recolorer. Parce que cette plus grande partie de la couleur ne fait pas pour moi et ce bleu non plus ne correspond pas à nos couleurs. Ce que vous pouvez faire est que vous pouvez passer en revue et télécharger tous ceux que vous voulez. J' en ai téléchargé quelques pour nous pour les alcôves, elles sont dans vos fichiers d'exercices, et nous allons les amener maintenant et aller changer les couleurs. Merci Iconfinder, tu es génial. Ce que je vais faire, c'est tout d'abord, je vais dire à mes guides sur une petite ligne qui traverse le fond ici n'est qu'une partie de mon design. Je tiens le quart de travail pour le faire aller droit, et celui-ci n'a pas de remplissage, pas de course et je vais peut-être utiliser ce vert que nous avons utilisé. Où est le vert ? Ou peut-être un gris foncé ou un gris clair. On y va. Les guides sont éteints. Donc maintenant sur mes icônes sociales d'être ici. Apportons toutes nos formes. Allons à Dossier et allons à Place. Sur votre bureau, vous rasez vos fichiers d'exercices, et voici tous les réseaux sociaux que je veux apporter, et ce sont des SVG que j'ai décidé d' utiliser, peu importe. IA ou SVG. Je vais aller, cliquer, tout sur l'autre, tout sur l'autre juste pour que lorsque je les sélectionne tous, je puisse maintenir la touche Maj enfoncée et les redimensionner tous. Maintenant cool petite coupe courte est si vous maintenez le décalage, il limite la hauteur et la largeur, parfait, nous le savons déjà. Mais si vous maintenez votre touche Alt enfoncée sur un PC ou une touche Option sur un Mac, c'est du centre, assez souvent c'est très utile. Au lieu d'essayer, oui, vous pourriez avoir de la chance, vous le savez peut-être. De quelle taille vont-ils être ? Pas encore sûr de ça, mais c'est à peu près. Ce qu'on va faire, c'est qu'on les choisira tous parce que je veux changer les couleurs d'abord, et c'est une bonne façon de le faire rapidement. Ce que nous allons faire, c'est ils sont tous regroupés en ce moment. Mais disons que je veux changer une correspondance certaines de mes couleurs. Ce que je peux faire, c'est d'abord zoomer. Je vais le faire d'abord sur Facebook, et il y a quelques façons de le faire. Le plus simple, c'est qu'on puisse se dégrouper plein de ces gars parce qu'en ce moment on est enfermés ensemble. Je veux changer ce fond bleu, mais je les changerais ou la scène. petit truc, c'est qu'on utilise cette flèche noire un peu. On va utiliser la flèche blanche. La flèche noire déplace les choses physiquement, et la flèche blanche se déplace autour de petits morceaux au sein de ce petit groupe. Alors regarde ça. Je vais cliquer sur en arrière-plan et puis je clique juste sur ce corny. Vous pouvez voir que je peux commencer à jouer avec eux, même s'ils sont en groupe en utilisant cette flèche blanche. Alors cliquez sur l'arrière-plan, cliquez une fois sur le cercle, vous verrez qu'il est choisi ici. Ce que je peux faire, c'est que je peux faire quelque chose de très cool, et ces pistes et dire, parce que je veux que toutes ces couleurs changent plutôt que de les faire toutes individuellement. Donc, je peux aller à Sélectionner, Même, Couleur de remplissage. Je vais choisir tout sur ce document qui a la même couleur de remplissage est lui. Vous pouvez voir qu'il a choisi tous ces types. Cela signifie que je peux rapidement et facilement changer les couleurs. Choisissez la couleur de vos couleurs, et si c'était une icône multicolore, vous pouvez simplement utiliser la flèche blanche et cliquer sur différentes parties de celui-ci, et décider et aller et les changer tous. Le problème serait de dire que si je voulais changer la couleur du blanc et le logo Twitter ici, si je clique sur « Blanc » et aller Select Same, il va choisir le blanc qui ont utilisé partout ailleurs dans le document. Je ne pense pas avoir utilisé du blanc, j'ai utilisé ce blanc cassé, mais ça va changer tout en un seul coup. Il a certaines limitations lorsque vous commencez à utiliser cette option Sélectionner même. Nous avons ces gars, nous allons les commander dans la prochaine vidéo, nous allons examiner l'alignement et la distribution des icônes L dans Illustrator. 28. Aligner et distribuer des icônes dans Illustrator pour concevoir un site web: Bonjour concepteurs d'interface utilisateur. Ce que nous allons faire maintenant est d'obtenir ces icônes juste alignées bien et équilibrées dans ces colonnes. Bon, allons le faire. abord, je veux rallumer mes guides, c'est un point-virgule de commande ou un point-virgule de contrôle sur un PC, et zoomer un peu. Je vais aller en commander un ou en contrôler un sur PC pour obtenir un plein écran parce que je veux avoir une idée de la taille que je veux qu'ils soient. Je pense que ces gars sont un peu trop grands pour les icônes sociales parce que c'est là que la taille va être affichée pour un site Web. Je vais rendre le mien un peu plus petit. D' accord. L'ordre d'eux. La façon dont cela fonctionne est, mettons Facebook dire est mon plus important, et disons que Twitter est le prochain et juste les obtenir dans un ordre approximatif. Ça n'a pas besoin d'être belle. Alors votre dernier. C'est le premier et le dernier qui sont importants. D' accord. Je vais faire en sorte que ces gars couvrent une colonne complète, d'accord ? On les a dans une sorte d'ordre l'un après l'autre. Je vais les sélectionner tous, puis le long du haut ici, si vous ne pouvez pas voir cela, disons que vous travaillez sur un très petit écran, vous devrez peut-être aller à Window Aligner, et il y a un panneau entier qui s'ouvre ou vous pouvez utiliser le un en haut, c'est à vous de décider. Ce que j'aimerais faire, tout d'abord, c'est probablement les amener à s'aligner horizontalement. Je me mêle verticalement et horizontalement à chaque fois, vous pourriez être le même. Je vais cliquer dessus juste pour qu'ils s'alignent tous. Tu vois ça ? Tous alignés joliment. Ensuite, il y a celui-ci appelé Distribuer horizontalement, seulement parce que je le lis à partir de la barre d'outils là, mais distribuons-les horizontalement, et nous allons cliquer dessus. Il les répartit uniformément. C' est la façon de les aligner et de les distribuer. Une dernière chose avant de partir. Ce n'est pas relatif à ce que nous faisons ici , mais il deviendra utile pour vous à un moment donné. Pour le moment, par défaut, il s'aligne sur la sélection, ce qui est cool. Il fait exactement ce que nous voulons qu'il fasse, mais dire que nous voulions l'aligner sur l'application, bien penser à cet alignement sur la page. Dites que je vais regrouper ces types, donc ils sont regroupés. Maintenant, je veux dire aligner, mais cela va le faire sur le plan de travail, cela signifie que lorsque je clique sur aligner au centre horizontalement, il va s'aligner au centre de mon plan de travail, et vous pouvez voir que c'est très utile aussi. Il se souviendra de la dernière chose que vous faites alors je vais tourner le dos à la sélection, je vais obtenir une annulation pour les remettre là où ils étaient, et je pourrais les dégrouper à nouveau parce que je n'avais pas besoin d'eux groupés. Très bien, c'est donc l'alignement et la distribution dans Illustrator. 29. Comment ajuster les formes vectorielles dans Illustrator: Très bien, dans cette vidéo, nous allons regarder les vecteurs d'édition qui existent déjà que nous avons téléchargés, et nous voulons arrêter de jouer et les ajuster un peu. Nous allons le faire à cette petite flèche simple ici, nous allons changer la taille de la tige et l'ajuster un peu avec la couleur, et nous allons aussi gâcher avec eux, les rendre un peu arrondis et faire toutes sortes de Des trucs amusants. Bon, alors allons-y et faisons-le maintenant. Alors commençons par éditer un joli simple nous allons utiliser cette flèche que j'ai téléchargée, j'ai la mienne ici dans la bibliothèque parce que je le télécharge à partir du marché, mais j'ai un exemple dans les fichiers d'exercice que vous pouvez télécharger allez le vérifier, il s'appelle Icône Arrow, ce qui ne devrait pas être difficile à trouver. Alors allez dans Fichier et placez-le dans, assurez-vous que son vecteur, et nous avons utilisé la flèche noire, n'oubliez pas de déplacer les choses, et nous avons utilisé de manière limitée la flèche blanche pour faire des ajustements, donc nous allons regarder cela. C' est la flèche blanche, c'est ainsi que vous ajustez les vecteurs existants. Disons que je veux rendre ce peu plus court, donc ce que je fais est que je peux cliquer sur ce coin ici, donc tout d'abord cliquer en arrière-plan, assurez-vous que rien n'est sélectionné, cliquez sur ce point d'ancrage que je veux déplacer ces petits points sur les coins sont appelés points d'ancrage. Maintenant, je veux le sélectionner et je peux le déplacer, puis-je l'ajuster et dire, c' est ce que je veux faire, ma belle flèche. Ainsi, vous pouvez faire quelques ajustements de base avec la flèche blanche. Je vais annuler ça, et disons que je veux en quelque sorte mettre ça dans un peu donc c'est une tige plus courte sur ça. Donc, je vais cliquer sur ce premier, donc je vais cliquer en arrière-plan, cliquer sur le premier, puis maintenir la touche Maj enfoncée, et puis nous allons ajouter à vos sélections, vous avez deux bits sélectionnés et je clique et fais glisser et je vais juste abaisser cette tige pour qu'elle soit beaucoup plus courte. Tu fais la même chose pour ça, je peux le faire entrer, je vais le traîner un peu, attraper ce gars et le traîner un peu. Donc je suis en quelque sorte en train de régler ma flèche et une autre chose que vous pouvez faire est au moment où il a des bords tranchants et je pense que je le veux, je vais laisser ça, donc je vais en faire une copie, en utilisant ma flèche noire, en la sélectionnant, Copy Coller, Je vais le laisser là-haut et vous remarquerez que je regarde ici dans cette zone grise, c'est un endroit très facile pour travailler sans être gêné par tous les graphiques, guides et autres trucs ici. Donc, avec cette sélection, je vais revenir à ma flèche blanche et ce que vous remarquerez est que vous pouvez voir ces petits points blancs ici, sont comment arrondir les coins qui est, je vais zoomer un peu, Si je attrape ce gars et les traîne parce que j'ai le coin sélectionné, ils seront tous arrondis. C' est comment arrondir, ça n'a pas besoin d'être une flèche, ça pourrait être un rectangle. Vous dessinez un rectangle, attrapez la flèche blanche, attrapez les coins et vous pouvez arrondir les coins de cette façon. Ce que vous pourriez aussi faire est de dire que vous voulez que quelqu' un autour de l'un des coins est de saisir la flèche blanche, et cliquer sur, ça s'appelle l'outil de sélection directe, je continue à l'appeler la flèche blanche parce que c'est plus facile à comprendre, mais ça s'appelle l'outil de sélection directe, mais si vous cliquez sur l'un d'eux, vous pouvez voir que je n'ai qu'un point sur l'un d'eux et je peux couper dans ce coin ici et dans ce coin, mais il aime ce genre de larmes boîtes factoïdes. C' est ainsi que convertir les choses en ces coins arrondis. Une autre chose que nous allons faire est que nous allons regarder les convertir parce que le moment c'est un peu comme si c'était un coin arrondi tout à fait unique, ce que nous allons faire est de prendre ce gars, nous allons le copier et le coller et ce que je ferais comme faire est de commencer à l'ajuster d'un peu plus d'une manière de style à main levée. Donc je vais saisir ma flèche blanche, je vais cliquer sur ce coin ici et au lieu de juste faire ce coin arrondi, qui est vraiment symétrique, avec elle cliquée ici, vous pouvez le convertir à partir du moment C'est un coin, vous pouvez dire que c'est un coin bien pointu, vous pouvez cliquer sur celui-ci ici et cela va le lisser. Ça donnera juste à notre point d'ancrage ces poignées pour que vous puissiez voir le chemin passe toujours par le point d'ancrage, il était là, maintenant il a été étiré par ces petites poignées ici, je pense à eux comme des petites choses de gravité ce genre de, la ligne doit encore passer par le point d'ancrage, mais ces petites poignées ajustent la façon dont elle passe et vous pouvez commencer à jouer avec elle, pour lui donner un peu plus d'une forme libre. Vous pouvez également casser cela parce que dès qu'ils sont la scie à voir, où vous faites un côté, il réparera l'autre. Donc, ce que vous pouvez faire est que vous voulez les accrocher, maintenez enfoncée la touche Alt sur votre PC ou la touche Option sur une marque et regarder ceci, Je clique sur l'un d'eux ils sorte de snap. Donc, il y a toujours de plier la ligne, mais ils ne font plus cette option de voir-scie et donc il y a quelques petites choses que nous avons apprises ici, une est que nous pouvons contourner ces coins en saisissant ces points, mais si nous voulons plus d'une forme libre, nous cliquons sur le coin, et nous disons que j'aimerais que vous soyez lisse et si vous voulez la casser parce que pour le moment c'est une sorte de cause de lissage à travers, mais il y a une interaction entre les deux qui permet de le lisser, mais dites que vous ne voulez pas cela, vous pouvez maintenir la touche Alt ou Option enfoncée, les casser et vous pouvez arrêter de jouer avec ces choses un peu plus de détails. Donc la prochaine chose que je veux faire est de le colorer. Maintenant, j'ai téléchargé normalement, il suffit de cliquer sur vos couleurs ici et cela fonctionnera, mais cet exemple particulier, et c'est probablement ce que vous allez obtenir de l'icône de recherche ou de la place de marché est de regarder ce coin vectoriel et aller vous d'une couleur. Il va utiliser ces montres ici se sent comme un bug dans illustrateur que tout, je défais pour se débarrasser des couleurs est que vous pouvez faire l'une des deux choses, l'une est que vous pouvez continuer à double-cliquer dessus, aller à l'intérieur cette flèche, double-cliquez dessus à nouveau pour aller à l'intérieur du chemin et puis je peux le colorer. Nous laisserions ce genre de combinaison légère que quelqu'un est sauvé, je vais annuler cela, revenir en double-cliquant sur l'arrière-plan. Je trouve le moyen le plus simple est ces Thèmes de Couleur ici, je vais cliquer avec le bouton droit et aller à Ajouter aux Nuancier et vous remarquerez en bas ici mon Panneau Nuancier, mes petites couleurs pré-faites sont les couleurs que vous pouvez voir petites versions de cela et je clique sur cela et dire en bas le bas ici, les zones qu'ils avaient les couleurs, double-cliquant dessus jusqu'à ce que vous obtenez droit à l'intérieur de celui-ci, puis changer la couleur. Alors assurez-vous que vous double-cliquez sur l'arrière-plan pour revenir jusqu'ici, et nous allons utiliser ce type. Donc je vais le copier, je vais laisser ces gars là-bas, je vais zoomer et je vais utiliser cette petite flèche ici. Il est un peu grand, maintenez la touche Maj enfoncée et rappelez-vous de l'échelle proportionnellement et ce que je vais faire, c'est que je vais le réduire et que je vais le faire tourner autour. Maintenant, il y a un outil de rotation et il y a là, vous pouvez cliquer dessus et simplement les faire pivoter. Ce que la plupart des gens font cependant est juste d'utiliser la flèche noire, si je zoom avant, si vous passez au-dessus de l'un de ces, nous avons utilisé les âges beaucoup pour le redimensionnement, mais regardez ceci si j'ai un vol stationnaire juste à l'extérieur, vous pouvez voir que c'est comme la main de aucun homme donc que la mise à l'échelle, la rotation , rien d'autre, la rotation, la mise à l'échelle, donc nous voulons la rotation avec la petite flèche pliée, et vous pouvez la faire pivoter et si vous maintenez la touche Maj enfoncée pendant que vous la tournez, pouvez-vous le voir verrouiller dans angles de 45 degrés et ça va marcher pour ma flèche, nous voulons aller comme ça. Très bien, il y a ma petite flèche, et j'ai un peu personnalisé, pas beaucoup mis la tige dans, mais nous avons appris un peu sur personnalisation des graphiques vectoriels que nous n'avons peut-être pas créés, nous allons passer au prochain épisode et envisager de créer nos propres graphismes. D' accord, je te verrai la prochaine vidéo. 30. Créer des icônes et des logos personnalisés à l'aide de l'outil de création de formes dans Illustrator: Salut là. Dans cette vidéo, nous allons construire cette forme de logo ici en utilisant le constructeur de forme. Nous allons aussi construire tous ces petits gars amusants. Allons-y et apprenons à utiliser l'outil de création de formes. D' abord, supprimons ces gars. Ils provenaient d'un tutoriel précédent, et nous allons utiliser cette zone de collage sur le côté ici, mais vous pouvez utiliser un nouveau document. L' outil de construction de forme, vous allez adorer. Quand ils sont sortis avec ça en tant qu'entraîneur, je sautais autour des jours heureux parce que la prochaine chose que nous devons faire après ceci est l'outil de stylo. Si vous avez déjà essayé d'apprendre Illustrator, que vous êtes allé à l'outil Plume et que vous essayez de joindre des pièces. C' est une douleur dans les fesses. Maintenant, le constructeur de forme va faire de vous un pro assez rapide. Ce qu'on va faire, c'est que je vais lui donner un coup sur l'extérieur du magenta, juste parce que je vais lui donner un joli coup épais pour que vous puissiez le voir. Maintenez enfoncé, « Shift » pour obtenir un cercle parfait. Je vais faire la même chose avec l'outil rectangle. Outil Rectangle, je vais dessiner ça. Je suis juste en train de construire une forme aléatoire pour vous montrer un peu d'exemple, je vais attraper l'outil étoile. Vous pouvez voir qu'il y a toutes sortes de choses bizarres qui se passent ici. Maintenant, si je veux remplir ces choses, si vous n'avez jamais utilisé Illustrator avant, vous n'êtes peut-être pas aussi impressionné, mais si vous avez essayé de vous enseigner vous-même, ça va être époustouflant. Je les ai choisis tous les trois. Je vais attraper cet outil de recherche innocent ici. C' est ce qu'on appelle l'outil de création de formes. Ce que ça me permet de faire, c'est quelques belles choses. Cela me permet de combler ces lacunes. Ils ne sont pas rejoints, mais ça va les obliger à le faire pour nous. Je vais choisir une couleur de remplissage. Je vais vous dire que je veux que vous remplissiez, je ne sais pas. Où sont mes échantillons, ce sont les échantillons que j'ai achetés ici. Je vais prendre ce vert et regarder ça. Fermez ce dos. Je peux dire, je veux que tu sois verte et peut-être que tu sois verte. Mais j'aimerais que vous disiez que ce peu soit orange, ou que la couleur rouge. Vous pouvez voir à quel point il est rapide et facile de commencer à colorier ces choses. Ce que vous pouvez également commencer à faire est de commencer à les rejoindre. Dites que je veux que ces gars soient la même forme, pas deux couleurs séparées avec un trait autour d'elle. Ce que tu peux faire, c'est que j'ai choisi cette couleur ici. Je vais traîner à travers. Pouvez-vous voir que j'ai dessiné une ligne en cliquant et en tenant ma souris sur ces deux-là, et regarder, ça le fait fusionne. Donc, si vous avez déjà foiré avec l'outil Pathfinder, dites au revoir aussi l'outil Pathfinder. est bien aussi, c'est que vous pouvez couper les choses, dire que vous ne voulez pas cette boîte ici. Vous pouvez maintenir la touche Alt enfoncée sur un PC ou la touche Option sur le Mac, regardez ceci, et cliquez sur ceci, et hé, coupe, sympa. Donc je peux dire en fait que je ne veux pas ça, je ne veux pas ça. Vous pouvez couper quelques choses, je ne veux aucun de ces deux-là. Vous pouvez arrêter de construire des formes, tout en utilisant des formes préfabriquées existantes. Ouais, ça rend vraiment facile de commencer à créer des choses. Vous pouvez voir qu'ils sont tous séparés. J' ai un peu cool, je ne sais pas ce que c'est. Mais c'est la façon de commencer avec ça. Je ne sais pas d'où il restait. Regardons une des choses que vous pouvez faire avec. Disons que nous allons utiliser l'outil de ligne et dessinons une petite icône d'accueil, comme un bouton d'accueil. Je le dessine à la main libre. Tout ce que tu as à faire, c'est de t'assurer qu'ils se chevauchent. Vous pouvez voir ma petite maison de bâton ici. Petite maison en bas, pour s' assurer que tout se chevauche. Si ce n'est pas le cas, prenez votre flèche blanche, cliquez sur l'un des points, cliquez sur l'arrière-plan, cliquez sur l'un des points et vous pouvez les déplacer. Assurez-vous juste qu'ils se chevauchent tous. Sélectionnez tout, prenez mon constructeur de forme. Choisissez une couleur avec laquelle je vais la remplir. Mettons un toit sur ce truc. Mettons un toit dessus. Attrapez mon constructeur de forme. En fait, sélectionnez-les tous d'abord. Prenez le constructeur de forme, choisissez une couleur de remplissage. Une de mes couleurs là-bas, j'ai choisi le vert pour le toit. Cool, hey, tu peux juste le remplir et ensuite je peux aller, quoi d'autre ai-je ici, choisir une couleur différente, orange. Remplissez la maison et la porte sera jaune. Il est juste vraiment facile de créer des formes personnalisées ici. Maintenant, vous pourriez penser, « Qu'en est-il de tous les moches ? ». Il y a quelques choses qu'on pourrait faire. Je viens utiliser ma flèche noire. Cliquez sur le bouton en arrière-plan. Cliquez sur Maj, sélectionnez les trois d'entre eux. Je pourrais juste utiliser ça. J'ai toujours la course autour de l'extérieur. Je pourrais tous les sélectionner et dire, « Pas de coup ». Vous pouvez voir là que j'ai fait toutes ces formes ou vous pouvez commencer à faire des trucs comme ça. Dites que je veux juste des bits des traits, mais je veux couper ces bords en utilisant à nouveau l'outil de construction de forme, en maintenant Alt enfoncé. Rappelez-vous par défaut que c'est l'ajout de formes. Je peux cliquer et ajouter, mais si je veux supprimer des formes, je maintiens enfoncée la touche Alt sur un PC ou une touche Option sur le Mac, regardez ceci, je peux faire glisser sur ces gars. Au revoir. C'est cool ? J' adore cet outil. Tu peux te débarrasser de ceux que tu veux. Gardez ceux que vous n'avez pas. C' est un peu plus de l'outil de création de forme. Vous pouvez aussi faire des choses comme ça. Tu peux dire, « Type », et je vais le faire, « Dan ». Non, je ne veux pas de dictée. Cliquez et tapez le mot « Dan ». Je vais le rendre beau et grand. Où sont mes tailles de police. Encore plus grand encore. Maintenez la touche Maj enfoncée, utilisez ma flèche noire, rendez-la belle et grande. Choisissez une police qui n'est pas super boiteuse. Museo Slab est un genre d'homme. Maintenant, le constructeur de formes ne fonctionnera pas comme ça alors qu'il est de type modifiable. Ce que nous devons faire, c'est d'aller à Type et celui-ci, et ici c'est créer des contours. Ok, maintenant ce n'est plus un type modifiable. Je ne peux pas changer l'orthographe ou la police. Vous voudrez peut-être le dupliquer avant de le faire. Mais maintenant, c'est une forme comme ces autres formes ici, et nous pouvons commencer à jouer avec elles. Par défaut, ils sont tous regroupés. Je vais les cliquer avec le bouton droit de la souris, dégrouper. J' espère que maintenant je peux commencer à faire un peu cool. Quand je dis cool, ça va être plutôt boiteux, je peux déjà le dire. C'est un bon exemple. Sélectionnez tous ces gars, je vais attraper mon outil de constructeur de forme. Reculez, constructeur de formes. Ce que je vais faire est peut-être juste supprimer les bits qui crossover pour faire une sorte de, je ne sais même pas ce que je fais. Choisissez une couleur de remplissage. On va choisir une couleur dans mes échantillons. Toi et toi. Oh, oui, terrible. En fait, je pourrais attraper l'outil de constructeur de forme et juste supprimer celui-ci là. Je ne veux pas de lui. Oh oui, on est funky. Outil de construction de forme, de mieux en mieux. Regardons à reconstruire notre logo parce que c'est vraiment ce que je voulais faire, c'est faire quelque chose comme ça et tu pourrais arrêter. Tu vas probablement pouvoir voir que ça va être assez facile, non ? Il l'est. Pour faire cette forme là, on va prendre mon outil d'ellipse. J' ai maintenu, « Shift » pour m'assurer qu'il va parfaitement sphérique. Je pourrais en fait faire un coup autour de l'extérieur, il n'y a aucune raison de le faire, juste pour que vous compreniez facilement. Il y a juste un coup noir autour de l'extérieur, je suis de retour sur ma flèche noire maintenant. Je veux deux de ces probabilités, donc je vais la copier. Si je le colle, Illustrator le colle juste au milieu de votre écran. Si vous allez à, « Modifier » et allez à, « Coller à l'avant » rien ne ressemble à ce qui se passe, mais il y a une autre copie exactement en face de celle que nous avions avant. Si je prends un des coins, je peux le rendre plus petit. Si je tiens, « Shift » pendant que je le saisis, cela le rendra parfaitement plus petit, comme dans la hauteur et la largeur. Rappelez-vous ce raccourci que nous avons appris il y a quelques vidéos, si nous maintenons l'option aussi enfoncée. Donc, shift et option ou si vous êtes sur un PC, c'est Shift et Alt, et il le fera à partir du centre. On a deux petits cercles. Vous pouvez simplement les dessiner séparément, les sélectionner tous les deux et les aligner. La prochaine chose que je veux faire est que je veux attraper mon outil de ligne et parce que j'ai des guides intelligents sur. Si vous ne le faites pas, assurez-vous que c'est coché, je peux partir du centre ici. Si j'essaie de tracer une autre ligne du centre, ça commence à ajuster celle que j'ai. Donc, ce que vous pouvez faire est de revenir à la flèche noire, cliquer sur en arrière-plan, puis saisir votre outil de ligne, en démarrer un nouveau. Retour à la flèche noire. Cliquez sur le bouton en arrière-plan. Un peu douloureux. Je fais juste ça comme un segment de ligne pour que notre marque soit une sorte d'infographie. Vous pouvez voir à quel point ça va être facile à remplir. Flèche noire, sélectionnez-les tous et je ferai quelque chose comme ça. Souvenez-vous, version géante [inaudible]. Peut-être qu'il y a un trop de segments. Je ne sais pas comment je vais faire ça. Coloriez-les, on s'arrangera. Avec cet outil de création de formes sélectionné. Ce que je vais faire, c'est ici, je vais choisir une nuance. Peu importe que tu le ramasses ici ou en bas. C' est important si vous cliquez sur ceux-ci, il remplit juste le tout. On dirait un petit insecte avec ça. Les bibliothèques sont géniales, mais il y a quelques petites choses. Alors rappelez-vous, si vous sautez dans ce tutoriel par vous-même, vous devrez peut-être cliquer avec le bouton droit de la souris sur ce gars et dire, « Ajouter les Nuanciers » pour que vous les ayez ici. Cette couleur va être celle-là, celle-là sera celle-là. Celle-là va être celle-là. Ça va sur un fond sombre, donc c'est pour ça que je peux utiliser ce blanc. Je suis d'accord avec ça. Impressionnant. Ce que je veux faire, c'est que je pourrais supprimer ces gars. Il y a deux façons. Mais ce que je pourrais faire est juste de cliquer dessus, maintenez, « Maj » pour sélectionner toutes ces pièces et simplement les déplacer. Sélectionnez-les tous. Ils ont toujours un coup noir autour d'eux. Dis : « Aucun s'il vous plaît ». Maintenant, je me suis un petit truc cool pour mon logo. Ce que je pourrais faire, c'est, parce qu'ils sont tous séparés, ce qui est cool, sélectionnez-les tous, faites un clic droit sur eux et allez à, « Groupe ». Si vous êtes sur un Mac et que vous essayez de cliquer avec le bouton droit de la souris et qu'il ne fait pas un clic droit, allez à « Objet » et il y a, « Groupe » ici. Vous vous retrouverez à l'aide des lots d'outils du constructeur de forme. C' est mon incontournable pour construire toutes sortes de formes intéressantes sans avoir à aller à l'outil stylo. Mais l'outil stylo est une nécessité et nous allons l'apprendre dans la prochaine vidéo. Alors allons-y et faisons-le. 31. Dessiner des icônes et des logos dans Illustrator à l'aide de l'outil Plume: D' accord. Dans cet exercice, nous allons dessiner ce kiwi et ce trèfle en bas, et nous allons dessiner une couronne. Ils sont tous vecteurs. Ils sont gentils dans les lits de victoire, et nous allons vous montrer comment utiliser ce charmant outil de stylo. Allons faire ça. abord, nous allons les dessiner sur son propre document et les copier et les coller plus tard, juste pour ne pas être trop confus avec ce document. Allons à Fichier, allons à Nouveau. Ça n'a pas vraiment d'importance, on sera sur Print. Utilisons A4 ou Lettre. Je ne suis pas trop inquiet pour la taille. Nous allons apporter des choses à dessiner. Maintenant, la plupart du temps, si c'est une forme assez complexe, je vais le dessiner à la main dans mon cahier, puis en prendre une photo et l'apporter, parce que je suis beaucoup mieux pour dessiner avec mes mains qu'avec l'outil Stylo. Si c'est une forme simple comme un cœur ou une étoile ou quelque chose comme ça ou une flèche, je vais essayer de la main levée avec l'outil Stylo. Mais regardons apporter certaines des choses que nous avons dessinées. Donc File, Place. Dans vos fichiers d'exercices, téléchargez les fichiers d'exercices Pen Tool. Si vous n'avez pas ces fichiers d'exercice, il y a un lien sur la page quelque part pour les télécharger. Je vais cliquer et le faire glisser pour qu'il s'intègre ici. C' est ce qu'on va dessiner. Ce sont de belles choses progressistes à dessiner. Donc j'ai dessiné ça à la main. Si tu te demandes ce que c'est, c'est un kiwi. C' est un petit oiseau indigène. C' est un terrible kiwi, et il m'a fallu des siècles pour dessiner celui-là aussi. kiwis sont difficiles à dessiner. C'est comme des ballons de foot avec des jambes. Bref, donc tu as dessiné à la main ton petit truc que tu veux. Maintenant, ce que nous voulons faire est de dessiner au-dessus de cela, et nous voulons verrouiller ce calque d'arrière-plan pour qu'il ne se déplace pas à mi-chemin du dessin. La façon la plus simple, nous l'avons déjà fait dans les couches. Mais voir la couche 1, on va le verrouiller. Cette petite icône apparaît ici dans cette petite boîte vide. On va appeler ça un arrière-plan. Super. On va faire une nouvelle couche. Je vais juste m'assurer que nous avons sélectionné ce calque et que ce sera notre calque de dessin. Assurez-vous qu'on est sur cette couche, on va attraper l'outil Stylo. Où est notre outil Pen ? Là, il est là. On veut celui-là appelé l'outil Pen. Donc, les bases sont, nous allons zoomer. Si je commence à dessiner maintenant, regardez ce qui se passe. Tu finis avec cette boîte blanche qui le remplit. Cela arrive souvent quand les gens commencent. Ne lui donnons pas de remplissage. Donc c'est le premier ici, pas de remplissage, et le coup sur l'extérieur, quelque chose qui contraste ce fond. Peu importe la couleur que c'est parce que nous allons la changer plus tard. Je vais utiliser un vert vif. Le coup va être d'un pixel. Dessiner des formes comme celle-ci, comme des flèches et des couronnes, est vraiment facile car lorsque nous utilisons l'outil Plume, vous cliquez simplement une fois pour un coin. On va faire des courbes dans une seconde. Tout ce que tu vas faire, c'est travailler ton chemin. Donc, cliquez une fois. Vous pouvez voir que cette chose est attachée à elle. Ne vous inquiétez pas pour ça, juste un aperçu de l'endroit où la ligne va aller. Je vais cliquer une fois de plus ici, cliquez une fois de plus ici. Vous pouvez voir cette ligne verte qui commence à apparaître. Cliquez une fois de plus ici, une fois de plus ici. Là encore, là, là, là. Nous avons une terrible couronne irrégulière. Mais c'est juste comme un exercice de dessin, alors ne nous inquiétons pas trop à ce sujet. Donnons-lui un remplissage. Donc, nous allons prendre notre flèche noire avec celle sélectionnée. Cliquez sur en arrière-plan, cliquez dessus. Je peux lui donner une couleur de remplissage ou ma queue. Donnez-lui n'importe quelle couleur et donnez-lui un trait peut-être nul. Impressionnant. On a une couronne. Pour le voir par lui-même, vous pouvez désactiver le globe oculaire sur ce calque d'arrière-plan et c'est notre très jolie couronne. Regardons notre trèfle. C' est comme si je vivais en Irlande maintenant, je suis un kiwi, tu comprends. Nous allons dessiner ceci, et nous allons les dessiner en trois parties séparées et ensuite les combiner parce qu'un trèfle n'a évidemment pas ces lacunes. Mais on en fait un exercice de dessin. Ce que nous allons apprendre maintenant, c'est que nous avons travaillé les coins, vous cliquez une fois. Pour obtenir une courbe, cliquez et faites-le glisser. Il est préférable de commencer à un coin parce que cela le rend facile. Donc je vais cliquer une fois. Tu vois cette ligne encore attachée ? Mais au lieu de cliquer à nouveau, qui va nous donner un coin, ce que je veux faire c'est que j'ai défait alors. J' ai cliqué une fois ici. Ce que nous voulons faire, c'est trouver à mi-chemin de cette courbe. Cette courbe va d'ici tout le chemin, et littéralement, à mi-chemin est à peu près là. Mais ce que vous voulez trouver, c'est le sommet, où il change le plus. Vous pouvez voir à propos de là, c'est comme ça, le point du coin ou le sommet. Regardez ceci, si je clique et fais glisser, vous obtenez cette petite poignée qui sort. On les a vus plus tôt. Je clique, je tiens et je traîne, et on peut le bouger. Alors n'ayez pas peur de le traîner. Ce qui, je peux le faire glisser pour qu'il soit vraiment serré et vraiment pointu ou que je puisse le faire sortir et que ce soit un coin vraiment long et exagéré. Alors, entrez et sortez et bougez le autour pour qu'il aille à l'angle que vous voulez. Ce que tu trouveras, c'est que tu ne l'obtiendras jamais la première fois. Tu te torches, ton spin vieillit. Ne vous inquiétez pas, c'est la phase 1. On peut le réparer par la suite en utilisant la flèche blanche. Je vais le traîner jusqu'à ce que j'y trouve. Alors c'est un coin ou une courbe ? C' est un coin. Les gens ont tendance à cliquer et à faire glisser celui-ci aussi, qui n'est pas ce que je veux. Je vais y aller et cliquer une fois parce que c'est un coin, c'est un grand changement de direction. Tu vois le grand cerceau du haut ? Ils sont comme, oh non, érigés. n'est qu'une partie du dessin avec l'outil Plume. On pourra régler ça plus tard assez facilement. Je vais me défaire. Il y avait un coin, cliquez une fois. Cette chose ici est une courbe, cliquez et faites glisser. Ici, c'est un coin ou une courbe ? C' est un coin, donc vous allez cliquer une fois. J' y vais, non ? Oui, c'est ce qu'on a dessiné. Une fois que vous avez les coins là-bas et les points à peu près dans le bon point, alors vous pouvez le réparer avec la flèche blanche. Il y a toujours un peu de retouche à la fin, et vous cliquez sur ce point d'ancrage ici. C' est le gars qui a besoin d'être réparé, et regarde ça, je peux le remuer, ouais. Alors je le répare. Mais alors, ce gars n'a pas tout à fait raison, alors je prends cette poignée et je lui donne un tremblement. Maintenant, je peux le déplacer de haut en bas, mais tu vois ça ? Je peux le déplacer plus serré aussi. Tu vois que ça va un peu mieux ? Je peux commencer à remuer ça. Ce que tu trouveras, c'est que tu auras tout à fait parfait, mais tu détruiras de l'autre côté. Il y a certainement beaucoup de coups de pied et de froing. C'est comme une scie-mer. Ils doivent s'équilibrer pour avoir l'air agréable et lisse. Mais tu vas trouver un équilibre entre les deux. Ce type est le même. Mais ce type n'est peut-être pas assez loin. Je vais zoomer. Pouvez-vous voir ? C' est comme s'il n'y avait pas de plier ces poignées pour les faire sortir. Donc physiquement, je dois déplacer ce type ici. Alors je peux le traîner un peu là-bas. Ce gars ici, j'essaie de réparer. Il y a toujours un peu de bruit entre les deux. Je vais zoomer. Oui, c'est bon pour ma première. Passons à travers, et c'est juste cette étape de répétition. Donc, je vais attraper l'outil Plume, cliquer une fois pour un coin. Ici, cliquez et faites glisser pour une courbe, cliquez une fois pour le coin, cliquez et faites glisser pour une courbe, cliquez une fois pour le coin. Après un petit moment, vous pouvez voir que je n'ai pas détruit celui-ci autant que le dernier, mais il reste encore un peu de retouche à faire. Charmant. Essayons le troisième. Espérons que pendant que vous allez, votre premier aura l'air terrible. J' imagine que ce sera une grande chose. C' est bon. Oubliez-le, vous avez eu une fissure. Essayez le suivant, et au troisième, ce sera probablement mauvais récemment. Cela dépend de vos compétences pour dessiner avec un outil de stylo, certaines personnes l'attrapent. Maintenant, j'ai appris à des milliers de personnes avec un Pen Tool et je vous promets que tout le monde est terrible depuis longtemps. Il faut beaucoup de pratique avec l'outil Pen pour obtenir le coup de main. On y va. Vous pouvez les ajuster. Maintenant, tu trouveras peut-être que c'est plus facile. Donc, si je clique dessus et que je clique dessus, et de dire en fait, je veux qu'il n'ait pas de remplissage. J' ai ce coup de vert à l'extérieur pendant que je travaille pour le rendre un peu plus facile de voir la chose en dessous. N' ayez pas peur de déplacer les points d'ancrage si vous ne trouvez pas qu'ils fonctionnent. Maintenant, regardons cette dernière partie, la petite tige. Je vais récupérer mon outil Pen, venir ici Pen Tool. Regardez ça, je vais cliquer une fois. Si vous trouvez ça vraiment difficile, pouvez-vous voir qu'il essaie de sauter autour, de rejoindre et de lier et de faire tout ça ? Cela peut être utile, mais en termes d'outil Plume, souvent ce n'est pas le cas. Donc je vais annuler pour me débarrasser de ce point, et je vais désactiver mes Smart Guides. Où êtes-vous Smart Guides ? Je ne te vois nulle part. Voilà, les guides intelligents. Outil de stylo Cliquez une fois pour un coin. Vous pouvez voir ici, c'est juste une courbe vraiment lente, donc ce que je dois faire est à mi-chemin, à ce sujet, je vais cliquer et faire glisser. C' est là que ça devient un peu bizarre. Vous pouvez voir ici, je vais juste l'apporter. Cliquez une fois là-bas, je vais en faire une fin plate. Ensuite, il y a juste une légère courbe ici. Je vais attendre à mi-chemin, cliquer et faire glisser. De quelle façon faites-vous glisser ? Les gens font ça tout le temps, ils le traînent comme ça, et j'essaie que ça ne marche pas. Ce type doit aller là-bas. Si ça tourne horriblement mal, si tu fais ça, et allons-y, et tu vas par là, et tu es genre, tu te joins et tu es genre, ça n'a pas l'air juste. Ce que vous pouvez faire, c'est saisir une flèche blanche. Je vais zoomer un peu. Je vais dire que ce gars ici, vous devez être déplacé. Vous pouvez commencer à l'ajuster. Je vais sélectionner ce type, leur donner la même couleur de remplissage, et vous utilisez l'outil compte-gouttes, nous l'avons appris au début de l'exercice, outil compte-gouttes. Joli. D'accord. Ce type est assez horrible. Tu pourrais tricher. Je ne le saurai pas. Je vais les copier et les coller. Si tu en prends un, bien. Va les répéter. Ce qu'on va faire maintenant, c'est avant de passer au kiwi, on va rejoindre ces gars. Alors donne-les pour qu'ils se chevauchent. Ce gars ici, je veux qu'il s'éloigne, mais peut-être pas comme ça. On y va, comme ça. Ils se chevauchent tous et se souviennent de notre incroyable outil qui rejoint les choses. Maintenant, lissez-les tous. Ce sont toutes des formes distinctes. Tu pourrais le laisser comme ça, il n'y a pas de vrai problème avec ça. Mais si vous voulez tous les joindre, nous allons utiliser l'outil Générateur de formes, et vous pouvez dessiner sur tous ces éléments. Pouvez-vous ensuite glisser à travers pour rejoindre ces deux-là ? Joignez-vous à ces gars. Joignez-vous à ces gars. Il faudra peut-être zoomer un peu. Je veux que tous ces types fassent partie du même gang avec la tige ici. Vous pouvez voir maintenant qu'ils sont une forme complète. Charmant, à quel point sommes-nous géniaux ? Maintenant, le vilain oiseau de football. J' aime cet oiseau, mais pas mon dessin de lui. Il y a un bizarre [inaudible]. De toute façon. Ce type va être plus compliqué. C' est à peu près juste une longue version de ça. Allons-y et faisons-ça. Prenez l'outil Plume et commençons par le coin. Je vais commencer par celle-là. Cliquez dessus une fois. Par quel chemin je vais aller ? Maintenant, je vais aller par là. Maintenant ce type en a, il n'est pas juste un cercle complet ici. Si j'essayais de le faire, celui-là , j'y arriverais surtout. Mais parce qu'il a comme un arc là-bas et un arc différent à l'arrière. Ce qu'on pourrait trouver, c'est qu'on va utiliser deux petites poignées pour le faire tourner. Ne le soyez pas, ce que beaucoup de gens font, c'est qu'ils vont aller comme ça et qu'ils vont en ajouter beaucoup pour obtenir la courbe. C' est bon, et ça marche. Mais tu finiras avec une forme. Permettez-moi d'éteindre le calque d'arrière-plan. Tu finiras avec une forme qui n'est jamais aussi lisse. Il y a tout ça comme des petits jinks dedans. Je vais réactiver le calque d'arrière-plan. Il est toujours préférable d'utiliser le moins de points d'ancrage possible, mais quand vous êtes nouveau, il est difficile de savoir le moins que vous pouvez faire. Mais dans ce cas, il va probablement en avoir besoin de deux, donc je vais aller un, juste pour le coin, cliquez une fois. Ensuite, par ici, je vais peut-être y aller, cliquer et faire glisser. Je suis en train de l'aligner, pousser. Je vais venir ici et peut-être un autre virage près de son clochard. Je n'ai pas besoin de beaucoup là-bas. Vous pouvez voir qu'il fonctionnait et vous avez l'inclinaison juste pour aller cliquer une fois. Mais parce qu'il est un point d'angle, ça va être très difficile de faire en sorte que ça soit lisse par là. Tu vois ce petit jink ? Ne vous inquiétez pas si vous arrivez ici, vous avez juste besoin d'un peu de poignées. On peut réparer ça par la suite en le renversant, mais au moins ça va bien dans la courbe. Vous pouvez cliquer ici une fois. Tu seras comme, ça se terminerait ici. C' est bon, souviens-toi de cette flèche blanche après, on peut arranger ça. Maintenant ces pieds terribles, je ne sais pas ce que je faisais avec ça. Ils sont terribles. Tu vois [inaudible] deviner ce qu'il y a là-dedans ? Ce que je pourrais faire, c'est que je vais le changer pour ne pas avoir de remplissage et avoir une attaque, j'amène le coup à l'avant. J' utilise celui-ci ici parce que pendant que vous utilisez l'outil Plume, cette chose que nous aimons disparaît, donc j'utilise le panneau Nuancier. Je vais utiliser le vert pour mon trait et il continue toujours avec l'outil Plume. Cliquer ici, c'est mon terrible pied. Maintenant à mi-chemin de cette courbe, [inaudible] cliquez et faites glisser et voici mon coin. Cliquez une fois, cliquez et faites glisser. Cliquez une fois, je veux dire aux pieds. Je ne sais même pas combien d'orteils mon oiseau a, je suis un terrible Kiwi. Beaucoup de coins. Maintenant celui-ci est cool. Cela va comme ça, puis va comme ça, puis va par là, donc il y en aura trois. Ça va être celle-là, ça va être celle-là et ça va être celle-là. Si le vôtre ne ressemble pas à ça, ne vous inquiétez pas, mettez-les dans les bonnes positions et nous pourrons utiliser la flèche blanche après. En bas, il y a un coin, mais au milieu, à peu près. Super, bien. Cliquez une fois. Courbe de bec, cliquez une fois, courbe, cliquez une fois. Allons réparer ça. C' est bon. Mon dessin n'est pas bon, donc le dessin sur le dessus ne peut pas être bien pire. Je vais la glisser avec ma flèche noire. Vas-y et je vais leur donner aucun coup. Je vais lui donner une couleur de remplissage. Je n'ai pas mes échantillons du dernier exercice, donc ce que je vais faire est probablement juste couleur en couleur aléatoire, puis le changer quand je le fais glisser vers mon autre document parce que ces couleurs existeront là. Mais ce que je vais faire maintenant, c'est aller à ma flèche blanche, cliquer sur l'un de ces points d'ancrage et commencer à jouer sur ce qu'il ya à essayer, une certaine dignité mon petit oiseau. Au lieu de ça, je vais essayer de lui arranger la tête pendant qu'on est là. Je trouve toujours qu'il est plus facile de dessiner sur le dessus, dessiner à la main en premier, puis de le dessiner sur le dessus et de le fixer ensuite. Vous pourriez être différent, vous pourriez juste le dessiner à la main. Mais oui, donc l'outil Plume, une dernière chose que j'aimerais partager avec vous avec l'outil Plume est de dire qu'il y a une courbe où il devrait y avoir un coin et un coin où il devrait y avoir une courbe. Nous l'avons fait un peu plus tôt quand nous avons commencé à ajuster les vecteurs existants, regardez cette vidéo. Mais disons que je veux que ce soit un coin maintenant, c'est un oiseau rigide. J' ai accidentellement mis un coin où je voulais, désolé, une courbe où je voulais un coin. Ce que je vais faire, c'est cliquer dessus. Vous pouvez voir qu'il a un joli petit point maintenant. C' est comme un truc d'oiseau de chameau. Si je veux revenir à une courbe, je clique sur « Courbe ». Je vais le remettre exactement, donc je vais devoir le traîner dehors. Génial, génial. Disons qu'il y a un point que vous ne voulez pas, disons que je veux tout faire sur un point, il y a un point supplémentaire que je ne veux pas. Vous pouvez saisir le stylo ou vous pouvez, désolé, sélectionner sur l'un des points d'ancrage. Vous pouvez voir ici il dit Ancre et il y en a un qui dit Supprimer le point d'ancrage sélectionné et il va disparaître. Vous pourriez essayer de déplacer celui-ci et essayer de l'obtenir un gros coup parce que c'est plus lisse. Vous pouvez voir que ça marche. En fait, c'est mieux. Je vais le laisser comme ça. Je ne l'aime pas, je reviens. C' est si vous voulez ajouter un point d'ancrage. Ce que vous pouvez faire, c'est que vous pouvez aller à nouveau à l'outil Plume et si vous décidez que vous avez besoin d'un autre point d'ancrage ici, voir avec juste avec l'outil Stylet sélectionné, je peux juste cliquer dessus et j'ai obtenu un autre. Ça me donne un peu de contrôle supplémentaire pour arrêter de bouger et arrêter de jouer avec ces gars. Je vais l'annuler parce que je n'en veux pas. Maintenant, nous allons le déplacer vers notre autre document, donc je vais zoomer. Je n'ai pas besoin de la couronne. J' ai juste besoin de ces deux-là. Je vais les défoncer tous les deux. Je vais en avoir une copie. Donc Éditer, Copier. Passez à Illustrator et ce que je vais faire, c'est que je les ramasse. Aussi belles qu'elles fussent, je n'en ai plus besoin. En fait, j'ai dessiné mon logo. Vous pouvez réutiliser le vôtre. Vous pouvez supprimer le logo. Supprimez le logo à la fin, utilisez votre nouveau logo que vous avez créé. Mais je vais juste coller ces gars dedans. Chose intéressante. Voyez-vous un peu de tout cela s'est produit ? C' est parce que je pense que je n'avais que la flèche blanche et qu'il a choisi ce morceau. Prends-le avec ta flèche noire. Cliquez sur le bouton, sélectionnez ces deux gars, Copier. Sélectionnez ces gars et collez-le là, tous les deux. Maintenant, je peux aller dans mes Nuancier et choisir ma couleur de remplissage. Je vais choisir le vert. Ce que je vais faire, c'est que je vais les aligner en bas. C' est comme si je ne savais même pas pourquoi ils sont là, c'est plutôt un exercice d'outil Pen. Est-ce que je les aime ? J'aime le kiwi plus. C'est mon kiwi. Je suis un petit trèfle. Ça ne va pas aller en bas ici. C' est comme un petit truc graphique cool. Kiwi est un peu gros. C' est tout pour l'outil Plume pour le moment. Tu devrais peut-être regarder ça une ou deux fois. L' outil de stylo peut être dur, ne vous découragez pas, c'est dur je vous le promets. Si vous demandez à n'importe quel graphiste qui connaît l'outil Plume, il va le détester pendant longtemps jusqu'à ce qu'il ait dû l'utiliser pendant un petit moment, puis comblera cet écart et commencera à l'utiliser, puis cela devient son meilleur ami. J' adore ça. Tu détestes probablement ça à ce stade. Ensuite, utilisez simplement l'outil Forme un peu et Stylo quand vous le devez. C'est tout pour cette vidéo. 32. Créer une version de notre conception Web de l'UI pour tablette dans Illustrator.: Dans ce tutoriel, nous allons créer notre vision de tablette. Ça va sembler très similaire. Nous allons jouer avec un peu de rembourrage sur les côtés ici, ce n'est pas si amusant bosselé. Nous allons réorganiser l'ordre d'empilement de ces vignettes et oui, petits morceaux et morceaux, mais nous allons préparer la tablette complète. Commençons. Maintenant, j'ai déjà planifié ce que je voulais faire dans mon cadre métallique. Ça va être facile de suivre ça. Ce que je trouve aussi, c'est, les cadres de fil proches de ce que je veux, mais je finis par le changer un peu comme je travaille avec la copie réelle et les images réelles. D' abord, nous allons connaître mes guides. J' utilise un point-virgule de commande, ou un point-virgule de contrôle sur un PC. Vous pouvez voir que j'ai décidé, n'oubliez pas d'utiliser trois colonnes au lieu de 12. Il est censé y en avoir 12, mais visuellement trop dur pour travailler avec. Ce qu'on va faire, c'est utiliser nos 12 ici. Tout d'abord, permet de déplacer l'arrière-plan le long. Ce que nous pourrions faire, c'est voir ici mon panneau Calques. Vous devrez peut-être aller à Fenêtre, Calques pour voir cela. Je verrouille le calque d'illustration et déverrouille le calque d'arrière-plan. Ce que je voulais faire, c'est peut-être sélectionner ces trois gars. Ce que je vais faire est de maintenir la touche Alt enfoncée pendant que je la fais glisser, cela fait une copie. Vous le déplacez ici, et ça finira sur ce tableau d'art. Ce que je vais faire, c'est comment je vais dimensionner ça ? Je vais probablement devoir ajuster ça à nouveau après, probablement. Ce que je vais faire, c'est que je vais attraper ces trois gars , le mettre dans le coin supérieur pour commencer et me garder. Alors je vais les ajuster un à la fois. Je vais t'attraper, te couper au bord. Maintenant, vous pouvez voir que le mien ne craque pas juste fudging ici une seconde comme, fenêtre il n'est pas claqué. Finalement, ça a fonctionné. Plus tôt dans le didacticiel précédent, j'ai désactivé les guides intelligents. Les guides intelligents sont vraiment utiles et cela signifie que lorsque je peux aligner ces choses, regardez accrocher un gribouillis. Oui, j'ai dit de piquer un gribouillage. On va le faire glisser dans cette boîte verte, en faisant glisser la boîte noire, et on va glisser dans celle-ci. Maintenant, si je fais glisser celui-ci dedans, vous remarquerez qu'il se comprime juste. Ce n'est pas ce que je veux. Je vais double-cliquer dessus, pour aller à l'intérieur, saisir le bord de ceci, c'est ma boîte de culture. Je suis entré à l'intérieur maintenant. J' ai double-cliqué dessus, je vais à l'intérieur de ce groupe où je l'ai coupé avant, j'ai fait un masque. Je peux décider comment je veux que ça marche. Je vais probablement mettre cette image au milieu au centre. C' est comme ça que je vais faire dans le code au moins. J' ai besoin qu'il soit plus petit probablement. Il va se redimensionner un peu, jusqu'à cette petite taille là-bas, et agréable. Double-cliquez sur l'arrière-plan pour revenir et nous y revenons, case 1. Une chose qu'il n'a pas fait, c'est ce que je pourrais faire, c'est juste ranger ça. On y va. Aujourd'hui, c'est mon arrière-plan graphique. Je vais devoir changer ça un peu. Je vais attraper cette grande boîte grise.Faites-le glisser à travers aussi bien. Prends ce coin, enfermez-les. La hauteur de cela va changer un peu. Ça a été trop long. Je vais verrouiller ces gars, déverrouiller les œuvres d'art, et arrêter de bouger ce haut. Je vais peut-être les attraper, ce n'est pas tout saisir, juste pour rendre la vie plus facile. Ce que je fais pour tablette, c'est que je vais en fait laisser la navigation là. Je vais attraper ces trois gars. Assure-toi de tenir Alt et je traînerai tout ça comme je viens de le faire. Je vais l'attraper et le copier. Alors je vais défaire, le remettre là. Je vais venir ici, et aller à Edit, Coller à l'avant. Maintenez Alt pendant que vous faites glisser, c'est que vous ne le déplacez pas simplement. Bien, je vais prendre ces trois. Je les ai tous attrapés, y compris l'arrière-plan. Si je maintiens Maj et cliquez sur celui-ci, comme je ne veux pas sélectionné, je viens d'avoir ces gars à gauche, copier et coller, venir à travers et ils s'adaptent toujours assez bien là. Je vais continuer avec ça. Tous ces trucs vont tomber, tenant Alt, aligné, sympa. Tout a l'air bien. Ne change pas beaucoup pour la tablette que vous pouvez voir. Je vais juste faire ça, t' allumer et t'éteindre. Vous voyez la différence que je fais, c'est qu'il y a du rembourrage dans celui-ci parce que j'ai un peu de liberté d'espace. J' ai cette idée sur les tablettes va l'amener à la ligne, tout le chemin ici. La hauteur fonctionne pour moi. La différence va être ce type. Je vais les attraper tous les six, tenir tout simplement les traîner à travers. La différence de ceux-ci, c'est que je vais les empiler deux par deux. Ils ont besoin de redimensionner un peu. Donc ce gars ici va venir. Vous remarquerez que vous vous accrochez à beaucoup de choses, que déplacez les choses d'une autre façon parce que mes guides sont pratiques. Vous pouvez voir qu'il ne correspond pas parce que c'est une taille différente, je vais devoir maintenir Maj et le faire glisser vers le bas. Si tu trouves un accrochage à trop de choses, je trouve que c'est toujours plus facile. Juste pour venir dans gentil et serré, et il oubliera beaucoup d'autres choses qui essayent de s'accrocher trop et de se concentrer. J' aime bien ce type, mais comment puis-je correspondre à tout ça en même temps ? C' est facile comme avec elle sélectionnée, vous pouvez voir que c'est une largeur de ceci. C' est 369,5 pixels. Je vais prendre ça. Attrape toi. Laisse partir le petit, je ne peux pas. Je vais te faire, je vais le sélectionner. Je vais m'assurer que c'est lié. Lorsque je change la largeur, cela change la hauteur. Entrez, vous pouvez le voir réduit. Pour vous mon ami, vont être les mêmes, largeur et hauteur. Vous pouvez voir que juste donner proportionnellement plus petit. Toi, toi et toi. Il devient un peu difficile si vous voulez mélanger la commande. Il est évident que c'est facile de faire un illustrateur, mais quand on vient à la conception web, c'est difficile. Essayez de garder la même couleur coule, à l'intérieur de celui-ci. Puis ce gars, puis ce gars, gentil. J' ai ma ligne en bas, en fait à propos de la boîte grise. C' est [inaudible], allez massif, et nous pouvons ajuster cette grande chose par la suite. Je vais apporter, je vous apporterai tout pour vous. Tu peux y aller. Cette ligne doit être beaucoup plus courte. Il sait que c'est dur de saisir cette ligne et de la ramener. Vous devrez peut-être effectuer un zoom avant. Je trouve que c'est plus facile quand on essaie de saisir certains de ces points. Je t'attrape. Une chose que je n'ai pas mis dans le dernier bit, c'est que je voulais ajouter le petit avis de copyright sur le bureau et aussi. Il va juste dire Copyright 2017. On va mettre en place. On a fait ça. J'avais l'impression qu'on avait fait le droit d'auteur tout à l'heure. On le fait ? Allons-y. Nous avons dû les supprimer. Type, Glyphes qu'on a fait. Je me souviens de cette débâcle. Copyright, ma première fois, cette fois. Double-cliquez dessus, et s'il a fait le fond, ils ont supprimé massivement. Ici Dans Portfolio. Vous mettez le nom de votre entreprise, si vous en avez un, limité. Je vais utiliser une police que nous utilisons, qui est Open Sans Condensed, j'utilise bold je pense. Super. Je vais vous attraper les gars, pas seulement la ficelle, les copier, les coller. Déplacez-vous, et vous y allez. Ce qu'on pourrait avoir à faire, c'est l'ordre de ça. Ces deux-là vont s'étendre. Quoi d'autre va s'étendre ? Eh bien, six maintenant ? Choisissez-les tous, rangez celui-là. On va s'étaler sur six et on va distribuer les centres, horizontalement ou verticalement, si je me souviens. C' est à ça que va ressembler ici. C' est tout pour ma vision de tablette. Je vais juste ranger le tableau d'art avant qu'on finisse et passer au mobile. C' est à peu près juste. Je vais déverrouiller l'arrière-plan pour que cette chose grise glisse vers le bas. En fait, il y a une grosse lacune ici que je veux imiter. Je verrouille l'arrière-plan. Peut-être que ça descend un peu. Charmant, c'est notre vision de tablette. Passons au mobile. 33. Créer une conception de site web avec une interface utilisateur adaptée au mobile dans Illustrator 2017: Bonjour de belles personnes. Dans ce tutoriel, nous allons faire notre version mobile. Vous pouvez voir que c'est un peu différent. Nous avons fait beaucoup d'alignement à gauche et de colonnes. En mobile, on va le décomposer. On va enlever des boîtes. Vous pouvez voir que nous manquons quelques lignes et nous allons pour quelques morceaux centrés et probablement le morceau principal est un joli menu mobile ou un sandwich Nav ou notre menu Hamburger. Allons construire ce truc. Processus similaire à la tablette. Je vais verrouiller l'illustration et déverrouiller l'arrière-plan pour que je puisse le déplacer. Je vais sélectionner toutes ces pièces, tenir « Alt », les copier à travers, essayer de les faire claquer, ils ne le font pas, je dois travailler ça par la suite. Je vais sélectionner les trois, me joindre, et je me raccroche dans le coin. Je ne veux toujours pas s'accrocher. J' allais bien si tu zoomes dessus, ça veut mieux s'accrocher. Mon problème, c'est que certains d'entre eux ne sont pas tout à fait alignés. Maintenant, la belle apparence. Très bien, ce qui va probablement être, ça va être beaucoup plus court. Je sais cela parce que j'ai tout prêt à se moquer pour ce tutoriel. Vous allez probablement le faire à la volée pendant que vous travaillez. Je vais juste le rendre un peu plus petit parce que je sais. Rappelez-vous que le redimensionnement de celui-ci est un peu bizarre. Si je prends juste le coin, ça va vraiment marcher dans ce cas, vous pouvez voir qu'il redimensionne, mais si je fais des trucs bizarres comme ça, ça le rend long et maigre. Ce que je pourrais faire, c'est, maintenez 'Shift' jusqu'à ce que j'y arrive. Je veux qu'il redimensionne, maintenant je double-clique, cliquez sur l'extérieur, qui est le cadre d'écrêtage. Je vais le traîner pour qu'il corresponde à ça, puis je vais saisir l'intérieur de ça et juste le déplacer pour qu'il s'adapte. Je vais le réduire un peu. Très bien, double-cliquez sur l'arrière-plan pour sortir, et nous avons notre joli petit fond fané. Ce type a besoin d'être ajusté. Celle-ci va durer beaucoup plus longtemps, je suppose. Nous devrons ajuster ça quand nous arriverons au fond. Refroidir, verrouiller l'arrière-plan, déverrouiller l'illustration, puis commencer à la mélanger. Probablement le plus grand changement dans ce cas sera la façon dont le menu va fonctionner. On n'a que deux boutons, donc on s'en sort sans doute avec des boutons. Mais peu de gens n'auraient que deux boutons. On va utiliser un menu Hamburger ou un sandwich Nav. On va allumer mes guides. Maintenant rappelez-vous que nous n'utilisons que deux des colonnes au lieu de l'ensemble des 12, juste pour que ça ne devienne pas fou quand nous essayons de le faire, nous n'avons pas de colonnes partout. Ce que je vais faire, c'est quelques choses. Le logo va devoir se rétrécir. Il est resté le même à la tablette, mais je prends la décision de réduire cela vers le bas au mobile. Il va devoir devenir plus petit, comment plus petit ? Juste pour qu'il puisse adapter mon sandwich Nav ici pour qu'il ne soit pas trop mauvais. Vous pouvez changer les logos à différents formats, c'est totalement possible en HTML, vous pouvez masquer un type de logo et vous pourriez avoir une pile différente peut-être quelque chose empilé sur le dessus pour mobile mais pour au moment où il y a mon petit Nav et on va dessiner un sandwich Nav. Maintenant, le sandwich Nav est ces trois lignes sangles, il est devenu la chose universelle pour faire des sandwichs Nav ou des menus mobiles. C' est juste trois lignes lanières dans ce cas et votre développeur ou vous en tant que concepteur lorsque vous le construisez en disons, Dreamweaver ou autre chose, peut manipuler cela assez facilement. Pour tracer la ligne, je vais m'assurer, je vais utiliser mon blanc cassé et je vais m'assurer que c'est beau et épais. Quelle épaisseur ? N' oubliez pas d'aller, « Commande 1 » pour le regarder à la taille réelle plutôt que d'essayer de zoomer. Je pensais que c'était une taille correcte, à cette taille quand j'ai zoomé, mais c'est évidemment trop large. Je vais être 3 pixels. Je vais probablement le serrer et encore une fois, c'est vraiment difficile de le faire à partir d'ici. On va encore zoomer et je vais resserrer cette ligne. Maintenez 'Shift' pendant que je le serre et assurez-vous juste qu'il reste en ligne droite. Avec elle sélectionnée, je vais tenir « Alt », faire glisser vers le bas, le faire glisser vers le bas. Comment ça a l'air ? Plein écran ? C'est à peu près juste. Ce que je pourrais faire pendant que je suis ici, c'est juste pour m'assurer qu'ils sont tous à distance égale. Est le Distribuer Vertical', et ils sont tous bien. Bien, mets-le là-dedans. Vous pourriez aimer celui-ci, vous pourriez aimer les coins arrondis à la fin. Celui-ci a des extrémités plates et c'est ce que je veux parce qu' il s'adapte à tout ce que j'ai fait avec les bords carrés. On voit une personne ronde et audacieuse. Ce que vous pouvez faire, c'est que vous pouvez sélectionner sur ces traits ici. Ouvrez votre panneau « Stroke ». Où sont mes coups ? Ce n'est pas ouvert. Il y a le mien là-bas, mais si vous ne trouvez pas que ça a une fenêtre et descendez à « Strokes » et ce que vous cherchez c'est ce « caps » ici. Pour le moment, il est sur le « bout à bout » malheureusement nommé, mais vous pouvez passer à la casquette ronde. Vous remarquerez qu'il les rend ronds menu Hamburger. À vous. Zoom arrière, super. Je peux probablement m'en sortir avec mon logo un peu plus grand. Sur mobile, je ne veux pas qu'il soit trop petit. Taille réelle, guides hors, excellent. Ensuite, je vais faire quelque chose de très différent en termes de mise en page. Je vais d'abord attraper ce groupe. Je vais le copier à travers. Ce que je vais faire, c'est que je vais les regrouper et que je veux qu'il soit centré sur ce plan de travail. On l'a regardé un peu plus tôt. Nous allons aller à notre « Fenêtre », nous allons ouvrir « aligner », descendre ici et je veux qu'elle aille au centre, mais ce que je veux faire, c'est que vous, mon ami, montrez Options et je veux qu'elle s'alignera sur le plan de travail. Je veux qu'il soit centré sur le tableau d'art. Si je ne les avais pas regroupés en premier, regardez ce qui se passe. Je les regroupe, ils sont tous centrés, mais ce n'est pas ce que je veux. Je les regroupe ensemble, 'Command G 'ou 'Control G' sur un PC, ou cliquez avec le bouton droit de la souris sur 'Groupe' et je m'assure juste de l'aligner sur le plan de travail, au centre. Cool, il va aller au sommet. Je vais garder la taille de la police la même, je pense. Ce peu ici, je vais le copier à travers et je vais l'enfoncer jusqu'aux bords. Mais ce que je vais faire, c'est que je vais m'assurer que la taille de la police diminue. Il est très facile de changer la taille de la police lorsque vous êtes un concepteur web. Je vais le faire. Je vais le faire centré et je vais attraper ma flèche noire, l'outil d'alignement. Je n'ai pas besoin d'aligner cela parce que j'ai utilisé aligné avec le texte ici. Il va être centré là. Quelle est la petite taille ? Peut-être juste un petit peu plus petit, là on va bien. Ensuite, mordez la ligne. J' amènerai tout ce petit gang à la fois. Maintenez la touche « Alt » enfoncée, faites-le glisser. Nous pouvons le copier et le coller et ce que je vais faire, en fait, ce que je pourrais faire est d'éteindre cette ligne pour mobile. C' est une de ces petites choses bizarres où j'ai joué avec elle avant et je n'ai pas aimé la ligne. Je vais regrouper tout cela ensemble, tous les trois sont regroupés et puis je vais m'assurer qu'il est aligné sur le plan de travail, centrer, éteindre mes colonnes. J' ai l'impression que c'est peut-être un peu trop gros. Je vais tout sélectionner et peut-être déplacer la taille de la police vers le bas à quelque chose d'un peu plus petit. petits changements comme ça, le développeur web, ou vous-même sera en mesure de le vérifier, mais si cela ne semble pas visuellement différent, ils n'iraient probablement pas vérifier, donc vous devrez peut-être faire une note pour vous assurer que vous indiquez qui est en fait juste une taille de police plus petite. Pas de plainte. Vous devrez peut-être écrire en CSS juste pour un que nous sommes taille de police, mais c'est pourquoi votre concepteur. Vous pouvez prendre les grandes ou minuscules décisions de police. Très bien, je vais probablement monter ça un peu en bas, surtout parce que ce n'est pas la queue. Je vais déverrouiller l'arrière-plan, l' attraper, voilà, gentil. D' accord, la prochaine chose que je veux faire est de le sauver. Voyons comment nous allons faire avec ces miniatures. Maintenant jusqu'à maintenant nous avons fait, nous avons fait des piles de, nous avons fait 3 colonnes, puis nous avons fait 2 colonnes et celui-ci nous allons faire 1 colonne selon un filaire. Maintenant, j'ai mon filaire et imprimé à côté de moi et je suis juste en train de copier ça au fur et à mesure que je vais. Ce que je vais faire, c'est attraper un de ces gars, le faire traverser, allumer mes guides, l' aligner, l'étirer. bizarre, c'est qu'il est en fait le plus gros qu'il ait jamais été sur mobile bizarre. Comme le bureau, il est en fait le plus petit, il est un peu plus gros sur tablette et il est le plus gros sur mobile. Maintenant, vous pouvez voir qu'il y a beaucoup de décisions en cours sur mobile, beaucoup de gens vont concevoir d'abord pour mobile. Ce n'est pas mon, étant mon expérience qu'il est préférable de travailler avec l'écran le plus utilisé, qui dans ce cas est le bureau. On l'a arraché et il est à quel point ? 399. Je vais l'attraper et en fait je vais amener tous ces gars à travers. Je suis Shift en cliquant sur eux tous, tous viennent à travers. Je vais les coincer ici dans le plan de travail et je prends ces deux-là, parce que ça a lié 399.5, génial. Je sais qu'on les a fait séparément avant, mais quand ils sont alignés l'un sur l'autre, vous pouvez changer la largeur parce qu'ils sont alignés l'un à côté de l'autre. Bon, maintenant c'est une question de les empiler. On va copier cette pile de la tablette, gentil. Vous ensuite, qui est le prochain ? Tu es la prochaine. Nous sommes totalement à court d'espace. Ce que nous allons faire, juste parce que je vais nous transformer jusqu'à ce que le tutoriel web design aussi, nous allons utiliser Dreamweaver, qui rend cela, plutôt que de simplement le concevoir, c' est que nous allons réellement transformer ces deux off juste pour que la page n'est pas comme ce défilement épique, version mobile massive de sorte qu'il charge agréable et rapide sur le mobile au cas où les gens ne sont pas dans la portée Wi-Fi. Je le fais principalement pour que je puisse le faire dans un tutoriel web pour vous montrer comment activer et désactiver les choses. Nous allons allumer et éteindre cette ligne, et nous allons ces gars allumer et éteindre en utilisant CSS. On les a ajustés et on apportera un pied de page ici. On a peut-être prolongé ça un peu. Jusqu' où ? Pas sûr. Mes antécédents, l'arrière-plan n'était pas verrouillé. Un peu plus bas. Verrouillé l'arrière-plan. Attrapez vous trois, amenez-les à travers. Ce que je vais faire, c'est que je vais avoir les gens sociaux aussi. Je vais les regrouper ensemble. 'Command G 'ou 'Control G' sur un PC. Il est aligné sur le plan de travail, je vais les centrer, donc je les ai centrés là. Je vais les empiler. C' est quelque chose que je peux faire facilement en HTML aussi, c'est que je vais regrouper ces gars. Je les ai regroupés pour pouvoir les envoyer sur le plan de travail et je vais le traîner vers le bas. J' utilise mes raccourcis clavier juste pour le descendre dans ce cas. Ce n'étaient pas des groupes. Ils se chevauchent les uns les autres. Annulation, retour, retour, retour , annulation, annulation, annulation. Ils sont là. Maintenant, faites un clic droit sur eux et les « grouper ». Maintenant, si vous les centrez, ils ne devraient pas trébucher l'un sur l'autre. Joli. Rangez le tableau d'art et là mes amis sont notre version mobile. Déverrouillez-le. Lorsque vous faites cela, il ne va probablement pas aimer ce est quelque chose que j'ai conçu précédemment pour ce tutoriel. Vous passerez comme si je faisais un temps incroyable à pousser tout ça, à bouger ça, à changer ces couleurs, jouer avec leur police, pour que tout ressemble à ce que vous voulez. N' ayez pas peur si vous avez trois ou quatre versions de votre mobile parce que c'est le plus difficile à faire, mais que mes amis sont notre petit design web réactif. Bon, passons à la prochaine vidéo. 34. Exportez vos maquettes d'interface utilisateur Web pleine page depuis Illustrator 2017: Dans ce tutoriel, nous allons explorer nos différents écrans ou nos différents plans de travail afin que nous puissions les mettre dans un PDF afin que nous puissions les envoyer au client pour voir ou pour notre concepteur web pour peut-être nous donner un coût sur. Oui, juste une belle façon de faire un PDF directement à partir de l'illustrateur. Allons-y et faisons-le maintenant. Nous avons donc fait nos superbes designs incroyables. Maintenant, nous devons les faire sortir à nos clients pour les montrer ou peut-être à nos concepteurs web pour leur montrer la maquette que nous cherchons à faire. Nous allons simplement exporter les écrans ou les plans de travail abord plutôt que ces petits éléments adb. C' est vraiment facile à faire dans la nouvelle version d'illustrator. Si vous utilisez une version antérieure, ce n'est pas trop difficile. Vous pouvez aller « Fichier » « Enregistrer sous » et passer par et enregistrer tous les différents plans de travail, mais il y a cette nouvelle version, vous allez à « Exporter » et il y a cette chose appelée « Exporter pour écrans » qui est vraiment cool. Si c'est sur « Assets » ce n'est pas ce que je veux, je veux « Artboards ». Il va juste exporter ces trois pages différentes séparément. Vous pouvez également les exporter ensemble et ce que vous pouvez décider est le fichier que vous voulez. Donc, je veux tous ensemble ou en fait, je veux un document complet, eh bien, peut-être une page que je viens de leur envoyer ou je veux les pages séparées sur un PDF. Ce que je veux qu'ils soient, c'est le format, vous pouvez descendre au PDF. C' est probablement le plus facile à partager que nous pouvons envoyer par e-mail à quelqu'un. Où va-t-il aller ? Jusqu' à, le mien dans les fichiers d'exercice, vous pouvez voir, et je vais cliquer sur « Exporter ». Retournez, détendez-vous, et j'espère qu'il y a là. J' ai un ordinateur de bureau, une version mobile et une tablette. Ouvrez-les. C'est mettre en commun les noms des plans de travail que je leur ai donnés. Impressionnant. Charmant. Si vous voulez les coller ensemble et que vous êtes dans quelque chose comme Acrobat Pro ici, vous pouvez passer à, c'est « Organiser les pages » et vous pouvez dire « Insérer » « From file » et trouver ces deux autres pages. Vous les fichiers d'exercices de bureau et vous les collez ici, réorganisez-les et je vais enregistrer celui-ci et cela peut être juste un document d'une page. Maintenant, quand les gens l'ouvrent, ils peuvent passer par le mobile, tablette et simplement taper tout en une seule fois. Donc c'est exporter tout le look et la sensation. Ce n'est pas la fin. C' est bon pour le client de signer ou pour le concepteur web d'avoir une idée de ce que vous faites, mais après tout, nous devons explorer toutes les petites pièces différentes séparément afin que nous puissions les utiliser sur notre site Web. 35. Utiliser l'exportation de SVG dans Illustrator 2017 pour concevoir un site web: Ok, dans ce tutoriel, nous allons parler des SVG et devrais-je les utiliser ou ne devrais-je pas ? SVGs un format de fichier raisonnablement nouveau. C' est comme un JPEG ou un PNG, et c'est vraiment bon pour une utilisation en ligne parce qu'il est évolutif. SVG est un graphique vectoriel, ce qui signifie qu'il peut être mis à l'échelle vers le haut et vers le bas sans perte de résolution. Alors que JPEG si vous l'étirez vraiment grand, il devient tout pixelisé et yucky. La première chose, c'est que c'est génial ? Oui, c'est génial pour des choses comme les icônes et les logos, des choses qui ont des couleurs vraiment simples. Jetons un coup d'oeil à l'illustrateur ici. Ok, donc les choses qui fonctionneraient vraiment bien en tant que SVG sont ce logo et cette petite icône. Voici une petite flèche que nous avons faite, ces petits gars en bas ici, les icônes sociales, ça fonctionnera très bien comme SVG. Les choses qui ne fonctionnent pas bien comme SVG sont tout ce qui a plus que quelques couleurs. Ok, donc comme cette image ici, c'est ce qu'on appelle une image bitmap ou une image raster, et elle vient traditionnellement de Photoshop. Alors que ces gars, vous pouvez dire quand vous zoomez sur eux, qu'ils sont tous vecteurs et pods et tout ce joli SVG, bonté. Alors que ce n'est qu'un tas de pixels. Ces gars doivent toujours être typiquement un JPEG. Ces gars sont exportés comme l'un ou l'autre en PNG ou SVG. Maintenant, vous êtes sûr d'utiliser SVG ? Oui. Si vous m'aviez demandé il y a un an, je l'aurais dit peut-être et un an avant que j'aurais dit non, cause du support du navigateur. Mais ce que j'aime faire est de garder un œil sur le site appelé caniuse.com. Vous tapez SVG et il vous donne des informations utiles, le moment il a un énorme support de navigateur, sauf si vous supportez IE 8. Maintenant, vous pourriez travailler pour une très grande entreprise et ils supportent vraiment les anciennes versions de ce navigateur. Il est près de dix ans maintenant, IE 8, et je ne connais pas beaucoup de gens supportant huit sauf si vous travaillez chez IBM ou de grandes entreprises qui ont à faire face à de vieux ordinateurs vraiment merdique encore. Si vous faites votre propre portefeuille, sautez certainement, allez directement à SVG, c'est génial. Si vous travaillez avec une entreprise, il vous suffit de vérifier auprès du développeur. Ou si vous êtes un peu incertain et que vous n'êtes pas trop sûr de SVG, il suffit de s'en tenir au PNG , cela ne va pas tuer votre site, mais cela facilite la réactivité si nous utilisons des SVG. Donc il suffit de vérifier ici, vous pouvez voir dans le monde entier, il est utilisé 97 pour cent. Il y a quelques personnes qui n'aiment pas l'utiliser. Il y a quelques astuces que vous pouvez faire pour désactiver SVG et d'autres choses si vous êtes un peu plus hardcore dans votre développement web. Quoi qu'il en soit, comment savez-vous si d'autres personnes utilisent SVG ? Je vous ai montré ces deux-là tout à l'heure, ils étaient Shutterstock et iStock et vous pouvez voir qu'ils sont tous les deux superbes. Ce sont des logos au moins. Ce qui se passe, c'est si je fais un zoom avant, donc je tiens juste la commande plus sur mon clavier, si vous êtes sur un PC, c'est le contrôle plus, vous voyez finalement qu'il commence à regarder pixelisé. Donc c'est un PNG et c'est bon. Ça a l'air bien loin, ici. Mais si je devais le mettre à l'échelle bien et grand, je devrais faire une taille de fichier vraiment grande dans un PNG pour qu'il ait l'air bien à cette taille. Si je regarde iStock et que je zoome dessus, vous pouvez voir le logo, plus je me rapproche, plus il est net. Cela devient vraiment utile lorsque vous avez affaire à écrit dans des écrans ou des écrans vraiment haute résolution, 4K, 5K écrans. Parce que bien que cela semble bien ici, zoomé, ça pourrait paraître terrible sur un iMac très haute résolution ou sur mon Mac écrit ici, ou sur un iPhone ou un iPad. Donc les PDF les utilisent, ils vont bien, ils fonctionnent partout, ils sont pare-balles. Vous pouvez paniquer votre développeur en leur envoyant un SVG. C' est une chose que vous pourriez faire est si vous avez affaire à des SVG et que vous voulez vraiment suivre ce chemin, parce que vous comprenez le vecteur et ce n'est pas si difficile. Vous devrez peut-être éduquer la personne avec qui vous travaillez. Ou demandez-leur simplement au début, « Puis-je vous envoyer des SVG ? » S' ils paniquent, il suffit de leur envoyer PNG, s'ils ne sont pas trop sûrs d'eux et veulent un peu plus de conseils, il y a un article vraiment cool sur CSS-tricks. Quel est son nom ? J'ai oublié ton nom. Ton nom est Chris Coyer. C'est ça. CSS- trucs est un site vraiment cool pour tout ce qui est avec SVG. Ok, et celui-là est à peu près comment j'ai pu accélérer. CSS- tricks.com, grand SVG. Ce type est un génie. Vraiment bien expliqué. Je t'ai donné la seule explication vidéo. Il y a 32 vidéos. C' est entrer dans le minutieux de SVG, si vous voulez aller aussi loin. Très bien, donc ça va être si pour les SVG. Si vous n'êtes pas trop sûr, faites des PNG et SVG et envoyez-les tous les deux, c'est vraiment facile de faire les deux. Si vous faites vos propres trucs et que vous utilisez Dreamweaver, utilisez SVG. C' est génial et les navigateurs suivent avec elle. Si vous travaillez avec des trucs de la vieille école avec des CMS de la vieille école, vous devrez peut-être vous en tenir aux PNG. Mais demandez simplement à un développeur web ce qu'elle veut en premier. 36. Exporter des images et des photos à partir d'Illustrator 2017 pour le web: Très bien, dans cette vidéo, nous allons regarder exporter nos images, des choses comme des photos. Ok, et il y a un graphique de fond ici, vous pouvez voir que nous allons finir dans ce panneau d'exportation, et ensuite nous allons finir avec ce joli groupe de génial exporté. Bon, commençons. Ok, d'abord, ce qu'il faut faire, c'est qu'on doit explorer les trois ? Nous ne le faisons pas, parce que ce qui va se passer à la phase de conception Web, c'est que, vous allez importer cette image, cette image d'arrière-plan ici et vous allez la réutiliser dans les trois tailles en la mettant à l'échelle plutôt que de la changer. Il existe un moyen de le changer pour chaque image différente, mais cela fait que votre page se charge longtemps et cela signifie que vous avez beaucoup de fichiers CSS différents et d'actifs en cours. Ce qui se passe généralement, c'est que vous importez ce fichier et comme nous l'avons fait dans Illustrator, sur le web, nous le réduisons pour les différentes tailles, pour ces différents points d'arrêt ou pour les différentes tailles d'écran. Ce que vous faites est de choisir la plus grande, parce que vous voulez, quelle que soit sa taille, vous voulez exporter cette version, parce que cela va être vrai de cette image d'arrière-plan sur le bureau. C' est aussi grand que ce sera jamais et quand vous venez dire ces gars si, nous avons travaillé à travers ce tutoriel bien que, en fait, le gars sur le mobile est en fait mis à l'échelle un peu plus grand que ce gars. Il est un petit pourcentage plus gros. Nous allons exporter cette image d'arrière-plan à partir du bureau. Nous allons exporter ces gars depuis mobile, puis nous allons regarder les icônes dans la prochaine, car il y a un processus légèrement différent pour faire des icônes et des logos. Tout d'abord, nous devons déverrouiller notre couche d'arrière-plan et nous devons ouvrir ce panneau d'exportation d'actifs. Vous pouvez le faire à partir de Window et vous pouvez aller à Exportation d'actifs. Ce qu'on va faire, c'est qu'on va zoomer un peu, je vais sélectionner les trois. Je ne veux pas avoir ça, mais je veux juste ces trois gars. Tout ce que j'ai besoin de faire est, sélectionnez-les tous et maintenez-les et faites-les glisser dans cette fenêtre ici, nous cliquons, maintenez, faites glisser. Ça va exporter cette image pour moi. Je vais lui donner un nom, parce que ça va l'appeler Asset 4 pour le moment. Donnons-lui un bon nom de moteur de recherche. Chaque fois que vous nommez des fichiers, donnez-lui de bons noms de moteurs de recherche. Voici Daniel Scott. J' utilise des traits d'union et pas des espaces. Lorsque vous venez de construire cela plus tard en tant que développeur de site Web ou vous-même sera ennuyé de cette utilisation des espaces dans ce temps, parce que les navigateurs ne les aiment pas, ils aiment un chemin complet. Portefeuille Daniel Scott. Quel genre de format ? Dans ce cas, ce sera un JPEG. Maintenant, comment savoir lequel choisir. En ce qui concerne les images, vous n'avez qu'à choisir des JPEG et des PNG. Vous ne pouvez pas utiliser ces SVG même si nous venons d'en parler. C' est bon pour les icônes et les couleurs et logos simples, mais pas bon pour ces images. Quand dois-je utiliser un PNG et un JPEG ? Presque JPEG tout le temps, si c'est une image rectangulaire plate. Si vous avez besoin de transparence, disons que vous avez été dans Photoshop et que vous avez masqué les choses et que vous voulez qu'il ait une transparence derrière elle, alors vous allez devoir passer à PNG. Le problème avec les PNG cependant, est qu'ils incluent la transparence, ce qui est génial, mais ils font que la taille du fichier est beaucoup plus grande. On va faire une petite comparaison. Nous allons exporter cette chose en PNG, et nous en ajouterons une autre, nous ajouterons une autre échelle et au lieu de l'agrandir, nous allons simplement revenir à la même taille. Ce sera exactement une fois, mais nous allons faire une version JPEG. Quelle hauteur dans ce JPEG ? C'est à vous de décider. La plupart du temps, vous pouvez vous en sortir avec un JPEG 50, mais vous ne pouvez pas l'ajuster ici pour avoir la taille que vous voulez, et pensez à cela comme le curseur de qualité. Si vous le déplacez jusqu'à 100, ce sera super parfait, mais probablement une taille de fichier très importante. Ce que nous devons faire est de trouver un équilibre entre la qualité et la taille, et vous trouverez JPEG, en particulier cette image d'arrière-plan, n'est pas très clair de toute façon, parce qu'il est un peu lavé dans l'arrière-plan. Si c'était une photo de la chose que je vendais, disons que j'essayais de vendre un Bentley, je l'aurais probablement assez élevé, environ 80, juste parce que je veux que ce soit une belle image, aussi claire que possible probablement au-dessus de ce que j'en ai probablement besoin. Tu peux aller en dessous de 50, pas de problème. Ce que nous allons faire, c'est exporter les deux et nous allons frapper l'exportation. Il va me demander où ça va aller et je vais le mettre dans le fichier d'exercice central pour que vous puissiez vérifier ça . Je vais y faire un fichier appelé, exporter des images. Je vais les mettre là-dedans. Une fois que j'ai fait ça, je vais aller les vérifier. Explorez les images, et vous verrez la différence entre ces deux images. C' est le PNG, et c'est 450 kilo-octets et celui-ci est un 120, donc beaucoup plus petit. Regardons la qualité par rapport aux deux. Ne vous inquiétez pas que le gris change en arrière-plan, nous sommes plus inquiets de l'image elle-même et il n'y a pas de différence. Vous remarquerez peut-être que c'est difficile à dire, parce que vous regardez une vidéo probablement et, vous êtes certainement en train de regarder une vidéo, mais la qualité de peut ne pas être HD où vous la regardez. Nous utilisons sont low res-image avec un filigrane juste pour que je n'ai pas de mal à vous donner des images que j'ai payé. La qualité n'est pas parfaite, parce que je l'ai mis à l'échelle parce que c'est une version filigranée. Vous pouvez voir la différence, c'est parce que je n'ai pas besoin et je n'ai pas besoin de transparence, je n'ai pas besoin d'un PNG. Depuis que cette image est terminée. Ce qui est vraiment cool à ce sujet, c'est que vous pouvez les voir là-dedans, leur genre de attachés. Je décide que cette image haut, et peut-être que nous les sélectionnons en haut et nous choisissons ce vert. Disons que vous décidez plus tard que le client aime un plus d'orange, vous pouvez voir qu'il est déjà là. Je peux cliquer à nouveau sur Exporter et il s'éteint et les met à jour. Choisissez, remplacez. Cela le rend agréable une fois que vous l'avez fait une fois et le client revient ou le développeur web du désert revient et dit, pouvez-vous changer ou ajuster ou pouvez-vous me donner une autre version ? Vous n'avez pas à passer par là et à les nommer à nouveau. Vous pouvez voir qu'ils ont tous été exportés à nouveau. Je vais retourner à ma belle couleur. Vous devez tous les faire séparément ? Pas moyen. Je vais enlever cette version PNG, parce que je sais que je n'en ai pas besoin, et je vais dire que je veux ce gars. Flèche noire, attrape ce type. Tu peux les faire tous en une seule fois ? Probablement. C' est un dix. Je vais passer par là et les nommer tous. Peut-être que Taylor, tu peux accélérer ça pour moi, mon pote. D' accord. Maintenant, nous allons cliquer sur Exporter, Choisir, il va et j'espère que maintenant, tout cela a fonctionné. La raison pour laquelle je ne les ai pas tous exportés est, parce que j'ai eu celui-ci sélectionné, parce qu'il a été mis en évidence, je l'ai seulement exporté. Je vais tous les sélectionner. Eh bien, peut-être qu'il suffit de sélectionner Aucun d'entre eux. Je n'ai rien sélectionné là-dedans et non, j'ai besoin de les sélectionner tous. Je vais maintenir le décalage et sélectionner tous ces gars, et m'assurer qu'ils sont tous sélectionnés et maintenant aller à l'exportation. Appuyez sur Choisir, appuyez sur Remplacer, et bien. Il y a ce type ici dont je vais me débarrasser, qui est mon PNG. Je ne veux pas de lui, mais tous ces types ont été exportés. Ils ont été ajoutés avec le moins 50, ce qui dit juste que c'est la qualité. Je ne ferais probablement pas ça, je peux probablement saisir son suffixe. Je n'aime pas ça, je vais aller ici et supprimer tous ces types, et ensuite aller dans ce truc. C' est comme le premier, maintenez le décalage, prenez le dernier afin qu'ils soient tous sélectionnés, et allez à Exporter et choisissez, Il va aller les exporter tous sans ce suffixe à la fin. Voici mes graphismes, ils deviennent tous assez petits. D' accord, c'est comme ça que vous explorez les images. Ce que je viens de réaliser, c'est que je me souviens d'avoir parlé au début, en m'assurant d'exporter le plus grand. Je rejette totalement ça. Ne vous inquiétez pas, vous pouvez exporter ceux-ci. Mon seul problème avec ça, c'est que j'ai supprimé au moins quatre de ces images, plutôt que les six. Pas de gros drame, je passerais à travers et les rendrais un peu plus grands et peut-être les coller au bord ici juste comme des espaces réservés afin que je puisse les utiliser dans cette fenêtre d'exportation. D' accord. C'est juste fait, maintenant. Passons à l'exportation de SVG, d'icônes et de logos. 37. Exporter des logos et des icônes à partir d'Illustrator 2017 pour l'interface utilisateur: Salut. Dans ce tutoriel, nous allons examiner l'exportation de logos et d'icônes à partir d'Illustrator pour une utilisation sur le Web ou sur l'application. Lorsque nous avons affaire à des SVG, nous en avons parlé dans une vidéo antérieure, c'est super facile. Vous ouvrez le panneau Exportation de ressources. Vous prenez les choses que vous voulez être SVG, comme ces quelques-unes de ces icônes sociales ici. Cliquez dessus, faites-les glisser, double-cliquez dessus, donnez-leur des noms. Ça va s'appeler Facebook social. Assurez-vous qu'il indique SVG en bas ici parce que je veux que ce soit un joli graphique SVG net. Celle-ci ici, et vous continuez à ajouter tous leurs noms. C' est tout pour les exporter. Vous cliquez sur Exporter et vous aurez un tas de SVG. Supposons cependant que vous exportez ceux-ci et que vous utilisez des PNG, parce que vous avez besoin de la transparence. Tu ne veux pas de JPEG. Vous voulez de la transparence afin que cette icône ici, vous pouvez voir autour du bord du cercle là-bas. Les PNG sont la façon dont vous allez. Maintenant, c'est quelque chose qu'on appelle pixel parfait. Maintenant, cela ne fonctionne pas sur chaque objet, mais ce qu'il fait, c'est, parce qu'un PNG n'est pas vecteur, donc ce n'est pas ce bord croustillant. Il est en fait constitué de ces petits pixels, comme cette image ici. Si je zoom assez près, vous pouvez voir que cette image est en fait composée de tous ces petits cubes, et c'est ainsi que PNG est rendu. Ce que nous devons faire, c'est nous assurer que lorsqu' il est rendu, il est rendu le mieux possible dans ces petits pixels. J' ai ce petit exemple de graphiques ici. Ce qu'ils sont, c'est, tout d'abord, nous devons aller à View, et dans Illustrator, vous pouvez falsifier les pixels. Cela ne change pas vraiment la façon dont votre document fonctionne. Il vous montre juste une vue d'aperçu des pixels. Si je zoome maintenant, pouvez-vous commencer à voir, quand je suis en vue normale, c'est sympa et net et vectoriel. Mais si ça doit être un PNG, ça va ressembler à ça. Ce qui se passe, c'est que si j'ai l'un de ces, disons, cette ligne, c'est seulement un pixel de large, mais je l'ai positionnée de sorte qu'elle chevauche deux pixels. Pouvez-vous voir ? va de chaque côté, donc il ne sait pas de quelle façon le mettre, donc ça nous donne un flou trouble, avec ce L ici, même avec ce type ici. Ce qui se passe, c'est que quand je l'exporte , ça va être un peu floue. Cela arrive un peu de la part d'Illustrator. Ce que nous allons faire, c'est que nous allons les sélectionner et aller avec le bouton droit de la souris, et dire Make Pixel Perfect. Ce qu'il fait, il déplace réellement les lignes, alors soyez prudent. Il a fait chauffer la croustillance. Comme je les ai physiquement déplacés, déplacons-les un peu vers la droite, ou un demi-pixel vers la droite, je peux facilement dire si ça va être parfait pixel. Voir en haut ici, la largeur est de 92,5 pixels. Vous ne pouvez pas avoir un 0,5. Ils doivent être des nombres entiers. Vous pouvez faire manuellement pixel parfait en faisant cela. Vous pouvez voir maintenant les côtés sont beaux, et si je fais le haut, 26, si je l'ai vraiment réduit un peu, mais maintenant il n'essaie pas de chevaucher notre pixel. C' est définitivement en bas de la ligne maintenant. Où est-ce qu'il est allé ? Ici, tu y vas. Ce L ici est le même. Les polices sont un peu bizarres. Celui-ci ne va pas être trop mauvais. Regardez ceci, si je fais un clic droit sur eux, Make Pixel Perfect, il semble en fait mieux. Il a en fait coupé un peu le fond. Pouvez-vous voir ? Il était un peu plus gros en bas. Soyez donc prudent lorsque vous utilisez Pixel Perfect. Maintenant, Pixel Perfect fonctionne très bien pour les lignes horizontales et verticales, ou la plupart des choses [inaudibles] de toute façon. Mais quand vous arrivez à des choses comme ces types de formes, il ne sert à rien de jouer avec Pixel Perfect. Avec ces gars, regardez ça. Si je vais à Pixel Perfect, je ne peux pas le faire. Trop de courbes, ça ne marche pas. Certains d'entre eux ont des lignes droites. Si je clique sur lui et que je vais faire Pixel Perfect, je pense que ça a empiré les choses. Ça les a poussés partout. Il y a trop de formes. Pixel parfait, idéal pour vraiment cube, lignes droites et polices. Assurez-vous donc qu'ils sont Pixel Perfect avant de les faire glisser dans votre panneau de ressources pour l'exportation en tant que PNG. Ce qu'on va faire, c'est juste pour finir, c'est qu'on va ajouter tous ces types, donc je prends les trois, voilà. En fait, il les a tous regroupés. Ce n'est pas ce que je veux. Vous êtes un F. Vous êtes un F. Vous êtes un F. Je vais les nommer dans une seconde. Quoi d'autre doit aller ? Ça va être tapé. Ces deux doivent y aller. Quoi d'autre doit aller ? La flèche doit partir. Assurez-vous que lorsque vous avez terminé l'utilisation de l'aperçu des pixels pour le désactiver. Tu n'en as pas besoin après. Parfois, c'est dur d'attraper ces gars. Tu vas zoomer. Ici, tu y vas. Quoi d'autre ? Ce type ici. Voici une autre façon de le faire. Au lieu d'essayer de les faire glisser, sélectionnez simplement à la fois, et il y en a un ici qui dit « Ajouter la sélection ». Vous pouvez voir qu'il tombe juste à travers. Impressionnant. On les a tous là-dedans. Maintenant, je veux les sélectionner. Je tiens Shift et je clique sur tous. Parce que ce que je vais faire, c'est que je vais m'assurer que je suis d'accord pour les deux options. Je vais avoir SVG plus un PNG. Nous allons tous les mettre à l'échelle. On va aller à la première fois, PNG, donc on va avoir les deux. Maintenant, ce que je devrais faire, c'est passer par là et nommer ça, avant de les exporter. Je vais y aller maintenant. Taylor va accélérer ça avec son montage magique. Va Taylor. Fait. Maintenant, je vais frapper Export et j'espère qu'ils vont tous exporter. Alors vérifiez. Vas-y. J'ai une flèche, deux versions. J' ai un SVG et un PNG. Vous pouvez voir les tailles de fichier. Le SVG est en fait seulement un petit peu plus grand, mais le PNG ici est juste un peu plus petit. Mais celui-là est de cette taille, minuscule, vous le voyez juste là-dedans. Le SVG est cependant évolutif, massif. Même avec le logo ici. Le logo est beaucoup plus grand qu'un JPEG. En fait, ce sont les mauvaises. Ce que je veux, c'est, où un logo , SVG, deux kilo-octets, trois. Donc, pas de grande différence, sauf que celui-ci est énorme ici. Super. C'est ainsi que vous passez en revue et exportez vos PNG et vos SVG si vous exportez des icônes et des logos. 38. Exporter des images Retina HiDPI et réactives à partir d'Illustrator 2017: Salut là. Dans cette vidéo, nous allons parler de ce que nous faisons à propos de la rétine, ou de la haute résolution, ou des images réactives, peu importe ce que vous voulez appeler, tout est sur la qualité des images. Maintenant, la plupart du temps, nous sommes à un point où il n'y a pas de règles claires sur ce que vous devriez faire, il y a quelques façons de le faire, et certaines personnes le font et pas. La plupart du temps, les gens ne le font pas, ce qu'ils font, c'est qu'ils vous donnent juste une image et qu'ils la mettent à l'échelle de haut bas pour les différentes résolutions et qu'ils vivent avec elle. Parce que les écrans Retina comme mon MacBook Pro devant moi et certaines des tablettes Windows et certains des nouveaux iPads, ils ont le double des pixels, ils ont une qualité incroyable entassés en eux. Ce qui arrive surtout, c'est que les gens l'ignorent. C' est triste, mais vrai. gens oublient simplement ces gars, parce qu'ils sont un si petit pourcentage, et il y a un peu de travail sur le côté de la conception web pour essayer de les accommoder tous. Maintenant en disant que, si j'étais un grand site, bien sûr, je vais les accommoder. Mais assez souvent, quand je fais affaire avec des gens avec des sites Web de petite à moyenne taille, les gens ne s'inquiètent pas à ce sujet. Vous ne pouvez pas vous inquiéter à ce sujet et vous devrez y entrer. Nous allons en parler maintenant, mais sachez que si vous voulez pour votre premier site, c'est bon, vous obtenez un post entier. Vous êtes autorisé à utiliser simplement des images de définition standard pour cette première. Mais une fois que vous avez fait un couple et que vos compétences web s'améliorent, vous voulez absolument entrer dans ce domaine. Surtout si vous avez affaire à des clients. Comme pour moi, j'enseigne des concepteurs web et des choses créatives, donc vous pourriez argumenter que je devrais faire des trucs haute résolution parce que beaucoup de gens qui suivent mes cours ont des ordinateurs portables, donc ils pourrait utiliser MacBook Pros avec les derniers écrans et toutes ces choses. Parlons de ce que les gens font normalement. Ils exportent juste une vision comme nous le faisons ici. Je vais épingler tout ça. Eh bien, notre beau travail. Je vais épingler plus juste pour qu'on recommence. Disons que j'exporte ceci pour mon site Web, je vais déverrouiller mon calque d'arrière-plan, recadrer juste cette partie et je vais la faire glisser. Ce que les gens font surtout, c'est que ce sera un JPEG, et je vais lui donner le suffixe. Je n'aime pas ça là-bas et ça va être une échelle d'un. Laissez-nous vivre avec. Quand il arrive sur un écran qui est vraiment grand ou qui a vraiment haute résolution, comme un écran de rétine pour Mac, comme un écran de rétine pour Mac, il se contentent de le redimensionner et de le piéger. C'est juste le cas. Ça n'a pas l'air mal, mais je peux dire que 90 pour cent de la population ne peut pas dire qu'elle n'est pas à l'échelle. Souvent, ce que je fais c'est, dire pour quelque chose comme ça, ce gros graphique ici, c' est que je vais le rendre plus grand qu'il ne doit l'être, donc je vais descendre ici et aller à ce 1.5. Je l'ai fait comme si ce n'était pas le double de la taille. Je pourrais faire un double, donc c'est en fait deux fois la taille d' ici, donc ça veut dire quand il est vu sur une rétine, c'est vraiment clair. Le problème avec cela est que les gens qui ne le sont pas, ou disent que quelqu'un sur un téléphone mobile ne s'occupe pas cette image vraiment grande étant mis à l'échelle juste parce qu'ils vont bien, mais ils doivent aimer charger cette taille de fichier vraiment grande. Si souvent ce que je fais comme je le coupe au milieu, je dis que je vais faire 1.5. Maintenant, c'est le moyen pas cher, facile et facile et la façon dont je le fais la plupart du temps. Donc disons que vous le faites correctement, et faisons semblant que nous sommes bons. Ce que je vais faire, c'est créer une vision, cette échelle. Alors pour les affichages de la rétine, je vais créer une vision différente. Alors ajoutez une échelle et je vais en faire une plus épaisse fois deux. Ça veut juste dire que je vais aller au JPEG. Je vais l'ajouter ? Oui, je vais devoir l'ajouter. Vous pouvez utiliser le parfois 2X. Cela fonctionne bien et c'est vraiment bon quand vous faites du développement iOS, que nous allons couvrir dans le prochain. Mais normalement, quand je le fais, je fais juste deux fois. J' ai une autre version et ça dépend de la hauteur que vous allez aller. Je n'ai qu'en devenant sérieux, je soutiens vraiment la rétine, ce qui est le double de la résolution. Vous pouvez trouver beaucoup d'appareils ces jours-ci qui ont quatre fois la résolution. Ces quatre vont être énormes. Alors très bien, vous pouvez soutenir ces gros fichiers. Ce que vous pouvez faire, c'est lorsque vous construisez votre site, c'est que vous pouvez changer les choses avec des requêtes multimédias. Cela signifie juste que peut vérifier quelle taille l'écran est, puis afficher la bonne image pour elle. C' est parfait et ça marche très bien. C' est beaucoup de travail supplémentaire pour un petit pourcentage de votre lectorat ou de vos utilisateurs. Donc c'est une façon de le faire et maintenant j'ai trois versions. Si je touche export maintenant, je touche export. Comment s'appelle ce type ? Trouve-lui un nom propre. Je vais donner un nouveau nom. Je vais appeler ça de fond, c'est excitant export. Mettons-le dedans, jetons un coup d'oeil, fond. J' ai cette première version et il y a une autre version et puis il y a une vision géante. Vous pouvez voir les tailles ici. Une fois est à 1,1 mégaoctets, 1,2, puis on saute jusqu'à 0,7. Donc assez grand, si grand, gâchis encore plus grand. Ce qui se passe, c'est lorsque vous construisez votre site Web de l'autre côté, ce que je veux dire par l'autre côté est encoder, il n'est pas super difficile de passer par et de créer requêtes multimédias pour déclencher ces requêtes à différentes tailles d'écran. Il dit juste avec mon navigateur est en train de regarder cela dans un écran super rétine vérifier si c'est, puis téléchargez cette image pour charger cette image. C' est une douleur dans les fesses, mais c'est comme ça que les gens s'en sortent. C' est comme ça que tu fais face à la rétine. Souvent, vous n'avez pas besoin de faire deux versions. Vous ferez une version normale, puis à deux reprises, et juste la commuter dans le code. Maintenant en disant que je ne le fais pas, tout ce que je fais c'est attraper ce gars, faire 1.5 juste au milieu et je force tout le monde à regarder la version 1.5. Cela signifie que les personnes utilisant des écrans qui ne sont pas de la rétine doivent charger une taille de fichier légèrement plus grande. Les personnes qui sont sur la rétine reçoivent un peu d'image. Personne ne gagne ou tout le monde gagne, dépend de la façon dont vous le regardez. Donc, vous pouvez passer par toutes ces images et simplement les télécharger, les faire glisser ici et j'ai deux versions. J' espère que cela vous aidera. Une autre chose est que les gens l'appellent parfois haut DPI dans la rétine que la même chose. DPI élevé est ce qu'aucun Apple n'a à appeler. Retina est une chanson de marque d'Apple. Donc si tu appelles ça la rétine, tu as des ennuis. Il doit être élevé DPI, parce que c'est ce qu'ils appellent ces images haute résolution. Maintenant une autre chose mes petits extraits à la fin ici est que, son 2017, une image dans quelques années. Si vous regardez ça en 2019, vous êtes probablement [inaudible] avec vous entrer dans ces Dan, mauvais mauvais mauvais mauvais trucs. choses ont peut-être progressé qu'elles n'auraient pu une grande adoption de l'parfois deux, ou il pourrait y avoir une autre façon de le faire. Donc celui-ci est celui qui va vérifier tout le reste solide. Celui-ci ici, il suffit de vérifier avec votre développeur ce qu'ils veulent. Très bien, si vous ne vous souvenez rien de cette vidéo, je me suis mêlé un peu ici et je suis juste de laisser ça à la fois un, c'est ce que tout le monde fait et vous ne serez pas frappé. Si vous faites cela, cela pourrait ne pas paraître aussi bon sur certains écrans. Alors faites juste une échelle pour le moment. Très bien, la diarrhée verbale, fini. Retour à vos vidéos. 39. Exporter votre interface utilisateur pour concevoir une application à l'aide d'Illustrator 2017: Cette vidéo va être plus sur l'exportation pour l'application. Imaginons que nous ne construisons pas une version de bureau et de tablette, nous construisons simplement une application mobile, donc nous avons construit quelques icônes à utiliser ici. C' est très facile, disons que je veux exporter ces deux gars ensemble, peut-être séparément. Je vais les dégrouper et vous allez, faites glisser le Kiwi. En fait, nous allons juste utiliser le Kiwi pour le moment, vous pouvez faire glisser tout ça en une seule fois. Nous allons juste faire ce gars, donc ce gars va s'appeler le Kiwi et ce dont ils vont avoir besoin, c'est se débarrasser de tout ça, c' est tout ce que vous avez à faire, c'est iOS et Android. Vous êtes probablement en train de développer pour les deux ou peut-être juste pour iOS ou juste pour Android, mais disons que nous le faisons pour un produit Apple et que nous travaillions avec un développeur Apple et qu'il a besoin de graphiques iOS. Cliquez sur iOS et ce qu'ils font c'est qu'ils ont besoin d'une échelle de un, deux et trois. Donc, cette taille, double la taille et trois fois la taille pour travailler avec toutes les différentes tailles qu'ils ont en termes de leurs écrans. Ils sont très stricts sur les conventions de dénomination, nous devons laisser le suffixe là, puis nous allons cliquer sur Exporter. On va l'exporter ici et on devrait trouver Kiwi ici. Nous avons les trois versions dont ils vont avoir besoin, il y a le png standard qui est cette taille unique puis il y a un png ici à une échelle puis à deux fois et puis à trois fois et ce sont les fichiers dont ils vont avoir besoin. Alors que chaque graphique que vous faites vous allez avoir besoin de versions complètes qui vont probablement juste utiliser ces trois mais leur donner le SVG aussi. Si vous allez faire la même chose pour Android, c'est très similaire. Débarrassez-vous de ces gars, cliquez sur Android, ils ont juste une convention de nommage différente et ils ont beaucoup de tailles différentes pour leurs applications. Vous pouvez voir qu'il y a même un faible ppp, ppp moyen, un ppp élevé, un très grand haut. Il va jusqu'à xxx ppp élevé. Donc, il y a jusqu'à quatre échelles, certains des téléphones LG ont quelques grands écrans écrits. Cliquez sur Exporter, même chose, nous allons avoir Kiwi. Il y a déjà Kiwi svg, mais vous leur donnerez ces versions. Ce sont les versions qui iront pour Android. Vous faites peut-être les deux ou vous ne faites que un ou l'autre, mais c'est ce qu'ils vont s'attendre. Chaque graphique va avoir tout cela et il va avoir cette convention de nommage explicite ici et je sais que Android, je pense fonctionne légèrement différent, je pense fonctionne légèrement différent, ils finissent dans des dossiers différents, donc c'est quelque chose que vous pourrait avoir à parler à votre développeur de la façon dont ils les veulent et probablement vous pouvez simplement les donner de cette façon et ils les diviseront dans les dossiers dans lesquels ils doivent aller. C' est l'exploitation pour le développement d'applications et la seule chose à penser, comme nous l' avons fait dans le tutoriel précédent est de regarder pixel parfait, surtout si vous avez l'une de ces lignes horizontales et verticales. Principalement parce que nous utilisons ces pngs, ces versions pixel. C' est tout pour cette vidéo, on se voit dans la prochaine. 40. Exporter des CSS pour les développeurs à l'aide d'Adobe Illustrator 2017: Salut là. Dans cette vidéo, nous allons examiner l' exploitation d'une partie du code d'Illustrator. Code. Si vous n'avez jamais utilisé de code auparavant, c'est quelque chose qui serait vraiment utile pour la personne qui construit votre site. Si vous allez construire votre site, cela va vous être très utile. Ce que nous allons faire, c'est nous allons examiner les différents éléments. Nous en ferons quelques, mais les règles sont les mêmes pour beaucoup. Ce que nous allons faire, c'est commencer par cette rubrique parce que c'est le plus grand et le plus facile. Avec elle sélectionnée, allez à Fenêtre et allons à Propriétés CSS. La chose cool à ce sujet est que cela va nous dire beaucoup de caractères CSS. Je vais faire glisser ce panneau de propriétés. Vous voyez ici, j'ai juste attrapé le haut de l'onglet, le mot là, pour que je puisse tout voir. Ce que ça va me dire, c'est que ça va me dire des choses intéressantes sur ces polices. Il va me dire quelle famille de polices il est, si c'est gras, quelle taille c'est, la couleur qu'il est. C' est le genre de choses qu'un concepteur de web aimerait. Parce qu'au lieu de leur donner le PDF qu' on a fait plus tôt et de dire, « Devinez la police. Devinez la taille. Devine la couleur. » Ils reviendront dire qu'ils construisent ton site pour toi et que tu  : « Bon sang, c'est quoi cette police ? Qui utilise Comic Sans ? » Ils ont utilisé régulièrement au lieu d'audacieux et tout ce que vous avez passé l'âge à essayer de travailler. Il va être de 80 pixels ou 81 pixels. Tu peux leur dire. Ce que vous pouvez faire, c'est que vous pouvez les saisir , les copier et commencer à construire une fiche technique. Vous pouvez dire bureau, et celui-ci va être mon, je sais que c'est appelé un h1, mais vous pourriez juste l'appeler quelque chose comme un titre. Supprimez tout ce que vous n'aimez pas là-dedans ou ajustez-le, mais ce sera mon titre principal. Si vous êtes un web designer, vous en saurez quelques-uns. Vous seriez capable de lui donner des choses comme des noms de classe ou des noms de balise, mais c'est à vous de décider vraiment. Le truc cool à ce sujet est que j'aurai une version de bureau, et ce que je vais faire, c'est que j'aurai une version mobile aussi bien de la même chose. Mais ici, quand je le sélectionne, pouvez-vous voir que les différentes tailles de police ont tout trouvé ici ? Mobile va être ça. C' est exactement la même chose. Il sait que c'est ma première, notre rubrique principale. La différence est, Playfair, c'est toujours audacieux, mais c'est cette taille maintenant. Une chose à savoir est si génial, ça m'a donné beaucoup d'informations, mais dans Illustrator ici, vous pouvez voir, ça ne me donne pas la syntaxe text-align. Il y a des morceaux que ça fait, ça ne te donne pas. C'est génial. C' est aussi, il manque quelques petites choses, ennuyeux, mais c'est bon. Cela économise la journée pour beaucoup d'avoir à passer les choses au développeur ou juste pour vous-même. Je l'utilise tout le temps moi-même. Je vais jouer avec les polices ici et venir vérifier. Je ne vais probablement pas construire un document comme celui-ci pour moi-même. Je vais probablement travailler étape par étape pendant que je construis le site pour venir en illustrateur et juste le sortir. Mais si vous envoyez à quelqu'un d'autre, et une des choses, dites cette case ici, vous ne l'exporteriez pas comme un graphique. Cette boîte de pêche prête ici. Vous ne l'exporteriez pas en tant que graphique PNG. Il serait conçu en code, en CSS, et lui donnerait sa hauteur, sa largeur et sa couleur. Vous pouvez voir lorsque vous sélectionnez ces est qu'il n'y a pas de CSS généré. Tu dois leur donner des noms pour une raison quelconque. Vous pouvez faire la version longue et aller dans votre panneau de couches, serrer vos couches, et ce qui se passe,