Transcript for:
Инфографика карточек товаров в Figma

гма для инфографики карточек товаров полный курс для начинающих в одном видео на этом курсе Мы полностью освоим инструменты графического редактора figma который нам потребуются для создания карточек товаров а в конце этого видео мы вместе с вами создадим полноценную карточку товаров состоящую из шести слайдов полученных знаний вам хватит для создания инфографики самостоятельно для своих нужд либо для нужд заказчиков Привет Меня зовут Андрей и из 2021 года я занимаюсь подготовкой визуального контента для маркетплейсов у у меня собственная студия полного цикла и мы подготовили уже более 15.000 карточек товаров для российских маркетплейсов и американского Amazon Я искренне считаю что гма является сейчас лучшим и самым удобным инструментом для создания инфографики карточек товаров ранее я работал только в Photoshop и перейдя в фигму я удивился насколько это простой и Дружелюбный инструмент для создания графики на нём в разы быстрее и проще делать карточки товаров в отличие от того же Photoshop я уверен что вы тоже скоро почувствуете лёгкость работы в этом графическом редакторе и влюбитесь в него как я советую проходить этот курс делайте все действия вместе со мной то есть буквально останавливайтесь сделал на видео дополнительные материалы которые я буду использовать в рамках этого видео вы также можете найти по ссылке в описании к нему я разделил данный курс на шаги и постарался объяснить всё максимально простым языком если вам будет что-то непонятно то просто можете вернуться в начало этого шага и повторить все те же самые действия которые я выполнил Ну и не забывайте что Практика - это главный источник нашего роста поехали Итак друзья сейчас мы будем проходить регистрацию на платформе figma для этого Заходим в один из поисковиков вбиваем здесь гма и дальше у нас В результатах выдачи будет нечто подобное обязательно смотрим на то чтобы попасть именно на сайт figma.com видите у меня здесь рекламные публикации сверху да и это вот только вот это является фиг мой дальше это просто конкуренты здесь я могу По первой органической ссылке перейти убедившись что figma.com - это тот сайт который мне нужен дальше я попадаю примерно на такую страницу Всё зависит от того когда вы будете делать и когда вы будете проходить регистрацию возможно сайт немножко поменяется но в любом случае как правило в правом верхнем углу у вас будет Вот такая кнопка Get started for То есть вы можете начать бесплатно Я вам сразу небольшой спойлер дам что начать и продолжать Вы можете очень долгое время бесплатно дальше мы нажимаем сюда У вас есть два способа пройти регистрацию либо это через Google аккаунт либо через email и придумывание пароля Мне проще через Google аккаунт но я расскажу и про второй способ тоже дальше я выбираю необходимый аккаунт я создал акан для этого и подключаюсь через него буквально через 5 секунд я Перенесу в рабочую пространство уже фигмы и здесь у нас будет приветствовать Примерно вот такой вот экран мне предлагает пройти так скажем предварительную регистрацию как меня будет называть Фима как я буду называться внутри этого интерфейса я могу также нажать продолжить да Либо мы можем пропустить этот промежуток опросник но в принципе здесь не особо имеет значение Это больше такой опрос для того чтобы разработчики фигмы понимали кто с кем они имеют дело дальше он нам предлагает пройти выбрать тариф Обратите внимание что стартовый тариф он бесплатный дальше у нас идут различные стоимости он точнее гма не принимает российские карты Поэтому нам в любом случае нужен вот этот стартовый тариф Ну и на самом деле его Хватит вам надолго Очень надолго потому что я с 2022 года пользуюсь фиг мой на стартовом тарифе у меня до сих пор нет такой потребности чтобы купил эту платную подписку дальше мы попадаем сразу вот в такую рабочую область но я здесь не торопиться а перейти сначала вот по левому верхнему по левой верхней иконке перейти вот в эту вот рабочую область с этой рабочей областью мы с вами будем разбираться но перед этим на следующем шаге мы скачаем десктопную версию то что мы можем поставить на компьютер можно работать как с браузера так и с версией которая установлен на компьютер разницы практически никакой нет но мне удобнее например работать с компьютерной версией поэтому я там обычно всё провожу и дальнейшие действия У меня тоже будут А в этом видео через компьютерную версию обращаю Ваше внимание Если Вы выбрали способ регистрации вашего аккаунта в фигме через электронную почту то вам необходимо после этого перейти в вашу электронную почту там придёт письмо это письмо будет содержать ссылку по которой вы переходите и попадаете в примерно Ту же самую среду которая была у меня представлена выше дальше я вас очень Рекомендую вам зарегистрироваться именно на рабочую реальную вашу почту потому что вы может быть потеряете доступ забудете пароль там или что-то ещё вы всегда сможете восстановить свой доступ через эту электронную почту это раз И вы можете абсолютно не бояться что гма вам будет рассылать свои письма и на доедать вам своими рассылками у неё такого вообще нет У неё очень много клиентов дела у них хорошо идут поэтому у них нет такой потребности каждому отправлять письма максимум может быть раз в полгода что-нибудь придёт Вот на этом всё сейчас мы переходим к следующему шагу установку десктопной версии Перед тем как мы начнём я ещё хотел бы пару слов сказать о разных тарифах которые мы видели на в конце предыдущего ша Не пугайтесь пожалуйста если вы там прочитали 30 дней Да там на бесплатном тарифе 30 дней кто-то мне пишет потом Андрей 30 дней бесплатно только гма существует в моём аккаунте Нет это неправильно 30 дней у вас хранение истории ваших действий в фигме на бесплатном тарифе это абсолютно разные вещи это когда Вы что-то удалили например или что-то создали всё-всё всё гма записывает в свою базу данных и вы потом можете вернуть её даже если вы вы уже забыли что-то куда-то потеряли там на протяжении 30 дней вы можете отменить любое действие и именно про это там говорится то есть не про то что 30 дней существует ваш аккаунт на бесплатной версии это не так так давайте Сейчас разберёмся Как нам скачать десктопную версию это то есть та версия которая устанавливается в качестве программы или приложения на Ваш компьютер а для того чтобы скачать этот установочный файл Вам необходимо зайти в меню вашего аккаунта как правило он находится в левом верхнем углу но у фигмы может быть какие-то изменения в интерфейсе Да всё в зависимости от того когда вы будете смотреть это видео Посмотрите может быть у вас нечто подобное будет находиться в правом верхнем углу такое тоже возможно возможно А где-то будет ещё но скорее всего это будет вверху потому что по UX дизайну так принято открываем меню нашего аккаунта и здесь у нас вот есть такая кнопочка Get Desktop App нажимаем на неё и у нас скачивается установочный файл я так как уже скачал фигму и установил её то делать продолжать не буду это действие а открою напрямую свою фигму но вы дальше скачиваете и работаете по обычному сценарию То есть вы просто запускаете файл который у вас устанавливается буквально там в два клика эта вся программа ставится к вам на компьютер и дальше вы получаете примерно следующее так вот моя Фима Я перехожу в свой существующий аккаунт у меня несколько аккаунтов и это сейчас я создал третий аккаунт для того чтобы вам продемонстрировать на абсолютно пустом аккаунте без каких-либо ограничений дополнений А здесь у меня а предлагает значит система пройти логин и связать мой так скажем мою десктопную версию с каким-то из моим моих аккаунтов мы здесь также можем сделать в зависимости от того как вы регистрировались да Либо вы логине через логин и пароль как вы это ранее делали Либо вы логинится через ваш аккаунт так как у меня два рабочих браузера у меня эта ссылка открылась в другом браузере Но если вы открывали её в том же браузере в котором до этого логинится у вас сразу произойдёт Вот такая кнопка появится Здесь вы просто нажимаете на неё и благодаря этому Да разрешить А вы попадаете в десктопную версию но уже нового аккаунта который у вас был создан Теперь у меня здесь вот это новый аккаунт И также у меня ещё прицеплен ещё два аккаунта рабочих на которых я собственно говоря делаю проекты и так далее Ну вот в общем-то всё очень просто здесь сейчас мы будем разбираться уже во внутренностях нашей фигмы И интерфейсов как я уже говорил ранее практически нет никаких отличий между веб-версия и десктопной версией есть совсем маленькие совсем маленькие различия сейчас по ним как раз и пройдёмся вот мы сейчас в данный момент находимся в десктопной версии вы её видите на своих экранах А смотрите У нас здесь в самом верху находится вот такой вот домик домик - это это по сути означает Вот это домашнее пространство Откуда мы начинаем нашу работу да если мы заходим вот первый раз в фигму дальше у вас скорее всего будут просто уже открываться внутренние ваши А проекты которые с которыми вы работали они будут выглядеть примерно Вот так скоро мы до них дойдём всё там разберёмся и вот смотрите каждый из этих проектов дизайн проектов они у вас будут находиться вот в таких вот вкладов внутри этой программы Также вы можете нажать на плюсик и Добавить сюда ещё какой-то новый проект Обратите внимание что сейчас это я создал новый аккаунт и у меня в Пока ещё нет своих дизайн файлов которые с которыми я бы работал да с проектов но вкладок у меня уже есть потому что они сохранились в предыдущих моих аккаунтов и они здесь висят это не страшно вам даже может быть это не стоит обращать внимани Но мало ли у вас возник вопрос почему здесь у меня уже что-то есть у вас нет А теперь давайте посмотрим как это выглядит в веб-версия в веб-версия у нас нет домика но у нас вот главная страница она будет открываться В отдельной вкладке А все дизайн файлы которые мы хотим с которыми Мы хотим поработать они будут открываться как в окне браузера дополнительными вкладками то есть такая супер привычная система работы с сайтами да то есть как обычных сайтах Вот Но так как мы будем вс-таки работать больше в десктопной версии и предлагаю вам всё-таки обратить на неё больше внимания потому что она чуть быстрее Может быть она не зависит напрямую вот интернета от скорости соединения и так далее Главное чтобы это у вас всё подгрузило вовремя и чтобы Вы могли работать в принципе вы даже разницы не заметите но я больше привык к десктопной версии если вам необходимо быть в каком там ну я не знаю там в чатах со своими там может быть колегами там или с клиентом и у вас она эти все чаты ведутся например в вкладке браузера И вам легче переходить между вкладками браузера то тогда вы можете пользоваться веб-версия Если Вы заходите например с компьютера не со своего например чтобы подправить пакет Вы можете залогиниться в веб-версию любого компьютера поменять внести какие-то там изменения выйти оттуда да И для этого очень хорошо подходит веб-версия и ещё есть одно отличие веб-версия и десктопной версии это в том что как устанавливаются шрифты то есть там немного разные механики когда мы дойдём до этого пункта я вам обязательно расскажу об этих двух способах установки шрифтов А в остальном Ну практически всё одинаково Так что Выбирайте Сами как вам будет удобно работать Итак сейчас на этом шае с вами разберёмся с внутренним Точнее с внешним даже интерфейсом фигмы - это то что находится ещё вне вашего рабочего поля где мы будем собирать наши макеты А это тоже важно Для того чтобы понимать что вы можете делать вообще в фигме Да здесь вы будете проводить очень мало времени но всё-таки лучше знать чем не знать вот эти вот моменты элементы интерфейса для чего они вам нужны понадобятся в каких ситуациях и так далее Давайте Я бы хотел ещё кстати вот перед началом обратить Ваше внимание что пожалуйста Не бойтесь что здесь всё на английском языке да у фигмы нет русского языка Но в этом нет ничего страшного вы не будете каждый раз сталкиваться с чем-то новым у вас работа вообще в фигме это работа однообразная достаточная у вас будут инструменты которым вы будете пользоваться из раза в раз и вы уже не будете замечать вообще на тексты которые у вас здесь прописаны Так что пожалуйста не бойтесь этого не пугайтесь не думайте что вы не разберётесь из-за того что фигмы на английском языке тут языка знать практически не нужно вам нужно может быть запомнить там Пару десятков максимум слов и всё больше от вас ничего не требуется дальше Вы всё будете делать по памяти а также гма вообще это очень простой и интуитивно понятный инструмент в отличие от того же фотошоп например который очень сложный объёме сый увесистый и там очень много возможностей Здесь тоже много возможностей но всё-таки гма в разы проще и в разы быстрее в ней делать ту же инфографику собственно говоря Почему я её люблю больше Хотя изначально Я работал в Фотошопе сюда Я перешёл после и здесь мне больше сейчас нравится потому что она намного быстрее здесь быстрее собираются карточки товаров Давайте А посмотрим на наши поле и посмотрим какие у нас есть вообще здесь элементы Давайте начнём сверху вниз и здесь у нас вот такая вот тёмно-серая полоса почти чёрная сверху находится где у нас Как раз-таки располагаются наши вкладки Да которые мы с вами уже разбирали и Здесь же есть иконка домика когда А мы на неё нажимаем Мы попадаем в то самое пространство где собственно говоря и находимся также здесь у нас справа есть три точки Вы можете нажать на неё и здесь у вас будут недавно закрытые файлы те файлы которые у вас Недавно были вот здесь содержались Во вкладках а вы их недавно закрыли они у вас появятся вот здесь скорее всего если у вас новый аккаунт то у вас здесь ещё ничего не будет а далее переходим ниже и вот к левой части Да к левой части меню вообще как бы у фигмы в рабочем поле потом пространстве Когда мы будем находиться там аналогичная система иерархии и распределения областей то есть вот слева у нас есть всегда меню там слои находятся Но об этом мы поговорим попозже справа у нас есть меню и центральное меню вот здесь вправо конкретно нет меню но а в дальше там будут различные инструменты которые нам будут помогать работать с текстами эффектами и так далее ну об этом поговорим а так здесь у нас находится меню нашего аккаунта мы можем открыть мы уже его открывали здесь у нас есть различные темы А мы можем поставить например Light тогда у нас будет всегда Светлая тема А мы можем поставить Dark То есть у нас будет Вот такая тема кому приятнее работать в такой можете работать в такой либо системная тема - это в зависимости от того как Ваш компьютер настроен то есть У меня например компьютер настроен А так что он будет показывать э тот интерфейс который в в котором времени суток я сейчас нахожусь Да вечером он меня автоматически на Dark сменится Ну давайте я буду всё сейчас в однообразно интерфейсе показывать White и э Так наверное будет нам проще разбираться дальше у нас есть различные настройки здесь у нас есть Community прой я объясню что такое комьюнити это вообще классная штуковина коммьюнити - это вообще сообщество фигмы которое делает Ну различные дополнительные плюшки бонусы плагины это так скажем элементы надстройки которые помогают решать определённые задачи внутри фигмы которая не решена по умолчанию так скажем вот и дальше у нас идт наш аккаунт скорее всего у вас будет один аккаунт у меня здесь три аккаунта и я могу ещё добавлять аккаунты А я и есть возможность выйти Да из моего аккаунта из одного и или из всех аккаунтов сразу вот а здесь же у нас находится колокольчик сюда будет приходить какие-то важные уведомления Я честно говоря ни разу не видел чтобы здесь какое-то приходило уведомление наверное ну как бы фигма-обзор а она только даёт вам грубо говоря да пользу и никакого внимания То есть к себе не требует это очень круто так а дальше у нас здесь Если вот мы пойдём по горизонтали то мы здесь попадём в цветные кнопки которые называются ign файл и figma gem board А смотрите дизайн файл - это по сути вот наша основная кнопка Откуда мы будем начинать работу да вот здесь мы будем создавать наш дизайн файл и там уже будем создавать наши макеты что касается гма jem - это платный продукт фигмы Где вы можете работать в команде буквально в онлайне в одном и том же рабочем пространстве находиться там вместе перетаскивать какие-то элементы в общем всё вместе делать Мы про эту часть фигмы не будем разговаривать потому что мы здесь будем как бы как работать в одного фигме Да у нас в основном вот этому будет посвящен этот ролик мини-курс дальше У нас есть кнопка ещё импорт например кто-то поделился с вами файлом который был создан в фигме он имеет особое расширение точка фиг и вы можете с помощью этой кнопки загрузить этот файл к себе И тем самым получить этот файл здесь у себя в работе на самом деле это можно ещё быстрее сделать там через ссылку об этом мы тоже поговорим попозже соответственно здесь сейчас пока у нас нет особой необходимости дальше разбираться давай Дава теперь пойдём по вертикали отсюда из этой же точки здесь у нас есть строка поиска Благодаря этой строке Вы можете найти абсолютно всё что у вас находится в вашем пространстве фигмы например Вы забыли какой-то или потеряли дизайн файл и у вас там лежали макеты неоднократно такое случалось у наших учеников и начиналась паника Я говорю Вы помните хотя бы какое-нибудь слово из вашего дизайн файла хотя бы какое-нибудь там я не знаю там размер дециметр чтоб что-то за что можно зацепиться Если вы уже вводите вот это вот слово вот сюда то у вас будут предложены все варианты где встречается это слово в ваших дизайн файлах в том числе в каких-нибудь маленьких может быть элементах текстовых внутри вашего макета Я пока не буду выражаться подбираю слова так скажем более общего характера чтобы на профессиональную лексику не переходить мы с ней ознакомимся чуть-чуть попозже да В общем с помощью этой строки вы не потеряете никакой файл Будьте уверены дальше у вас вот есть вот такая иконка часиков и здесь написано recents это недавние дизайн файлы которым с которыми вы работали Обратите внимание что недавними могут быть не только те которые вам принадлежат но и те которые вы открывали по ссылке например вам кто-то поделился ссылкой на свой дизайн файл типа вот посмотри или скачать там какие-нибудь материалы из этого дизайн файла и это у вас появится Вот в этой Вот вкладке recens я сейчас Как кстати в ней нахожусь Да в рисен сах и поэтому у меня здесь ну как бы у меня новый аккаунт поэтому у вас скорее всего то же самое будет да то есть здесь могут быть дизайн файлы вот эти вот находящиеся здесь они могут не принадлежать мне дальше а your teams - это значит ваши команды Ну и что у вас создано вами так скажем да вот драфт сы драфт точнее - это черновик переводится как черновик и драфт сы - это Ну соответственно черновики и здесь это дизайн файлы которые принадлежат конкретно вам вашей команде А ну мы про Команду сейчас опять же не говорим вам принадлежат и вы можете с ними работать вот два дизайн файла которые вам принадлежат и вы их можете редактировать А другие которые вам например поделились по ссылке вы их может быть и не сможете редактировать но просматривать вы их сможете Вот они тоже здесь появятся также Здесь нам Фима предлагает повысить наш тариф тарифный план но опять же повторюсь что нам фри бесплатного тарифа более чем достаточно поэтому мы сюда нажимать не будем а дальше у нас идут любимые или избранные файлы что это такое например вы чаще всего работаете вот с каким-то одним дизайн файлом но у вас также бывает да вам присылают там на проверку там что-нибудь ещё там ну вот как-то у вас сильно много дизайн файлов получается в работе и у вас в вот в этом вот разделе recens у вас будет очень много и чтобы находить свои любимые которые были бы постоянно закреплены и видны сверху Для этого вам необходимо нажать вот навести Да когда мы наводим стрелочку на один из а дизайн файлов у нас в правом верхнем углу появляется звёздочка если мы её нажмём она станет активной жёлтая и вот автоматически здесь у нас появляется в списке вот этот дизайн файл как избранный мы её отож это в принципе тоже вам очень наверное не скоро пригодиться и дальше у нас тоже идёт речь о командах здесь у нас одна команда бесплатная на бесплатном тарифе я расскажу сколько мы можем вообще в этом в этом в этой команде создавать дизайн файлов проектов и так далее там достаточно много вам хватит вот Давайте теперь к центральной области перейм в Центральной области у на Вот вот есть сейчас так скажем Она такая либо рекламная либо ознакомительная в зависимости от ситуации мы можем её нажать закрыть потому что она как бы не несёт какой-то определённой роли вот сейчас она нам не нужна нет необходимости в ней А И вот эти собственно говоря дизайн файлы с которыми Мы будем работать в следующих шагах мы о них по подробнее поговорим по сути Это вот те самые основные рабочие поля например вот если мы зайдём Я не знаю вот сюда Да вот это есть дизайн Вот и вот так они будут выглядеть если мы их не откроем вроде бы по всем вопросам прошёлся Ну вот опять же exp Community это исследовать коммьюнити это то что я вам говорил что у фигмы есть своё сообщество большое которое старается сделать фигмы лучше и в том числе с помощью каких-то дополнительных инструментов которые называются плагины мы об этом тоже будем говорить на этом мини уро на этом мини курсе и здесь я вам расскажу как вы можете их использовать у себя в правом нижнем углу у вас есть кнопочка помощи соответственно Здесь вы можете посмотреть какие-то может быть видео какие-то статьи почитать либо обратиться в центр помощи поддержки который Вам подскажут специалисты Я честно говоря ни разу Не обращался не знаю насколько быстро приходит ответ но я практически уверен что на любой вопрос Вы сможете либо получить ответ в комментариях КК этому видео либо Погугли посмотрев на ютубере ролики вдруг если вам что-то не будет понятно из этого урока большого Да урока мини курса А в любом случае Вы точно найдёте ответ на любой вопрос относительно фигмы Вот на этом Этот шаг Мы закончили и приступаем к следующему Итак друзья мы переходим к следу шагу сейчас мы будем разбираться с внутренним интерфейсом фигмы это то место где мы будем проводить 99.9% всего нашего рабочего времени в этом графическом редакторе для того чтобы создать наш дизайн файл А это именно интерфейс внутренний в дизайн файле нам Мы можем сделать несколько несколькими способами это одно и то же действие вообще в фигме очень много действий мы можем делать не несколькими способами двумя тремя некоторые даже четырьмя способами Всё дело в том что разработчики фигмы очень круто смотрят за поведенческими факторами пользователей и Они каждый раз внедряют что-то новенькое Они видят что например пользователи не ну не используют вот эту кнопку да но почему-то ищут её в другом месте Да и соответственно они ставят туда кнопку чтобы нам было удобнее с Вами потому что Так действует боль большинство вот для того чтобы создать дизайн файл новый мы можем А значит либо а воспользоваться вот этой синей кнопкой мы ей воспользуемся но перед этим я ещё покажу второй вариант если мы наводим например на drafts помните Да это черновики то здесь вот в этой области когда мы наводим мышкой здесь у нас появляется вот такая а такой плюсик New File Соответственно что мы здесь нажмём что там это будет одинаково поэтому тут не имеет значения давайте мы просто нажмём А на синюю кнопку Вот здесь мы уже попали в наше первое рабочее пространство Возможно если Вы раньше не работали с фиг мой я вас поздравляю это собственно говоря наша Рабочая область где мы с вами будем много проводить времени А вот здесь у нас сверху да Опять же то же самое всё абсолютно находится в десктопной версии тот же домик те же вкладки всё абсолютно то же самое только вот сейчас активная вкладка Вот это да untitled то есть не названная то есть без без названия В общем это наш дизайн файл в данный момент а дальше если Мы спустимся чуть ниже то у нас появляется вот такая заги улина это логотип фигмы и мы можем нажать на неё и здесь у нас будет основное меню через Это основное меню мы можем сделать абсолютно любое действие абсолютно чем угодно да то есть он так скажем здесь сборник основных действий находится но мы при этом не будем практически пользоваться вот этой частью То есть я практически сюда не захожу вы сейчас некоторые у нас будут пункты недоступны неактивны потому что у нас внутри нашего дизайн файла Вот здесь Да ещё ничего не присутствует никаких объектов нет Вот например на объекты когда мы наводим у нас нет возможности что-либо сделать Да но я повторюсь любую из этих команд мы можем сделать другим способом более так скажем часто пользе и мы будем как раз-таки пользоваться другими способами А здесь мы можем посмотреть это всё я бы хотел наверное обратить Ваше внимание Только на вот эту позицию это горячие клавиши горячие клавиши полезный инструмент для чего он нужен Да вообще горячие клавиши - это набор клавиш на клавиатуре зажимая вре на которые вы получаете какое-то действие когда вам необходимо производить одно и то же действие несколько раз вам не удобно вызывать например какое-то контекстное меню например правой клавишей мыши щёлкать вот сюда и потом нажимать куда-то вот сюда Да у нас есть стандартный так скажем набор вот этих вот действий которые которым посвящены определённые горячие клавиши Некоторые из этих горячих клавиш Вы наверняка знаете например на Windows клавиатуре вы будете нажимать Ctrl C для того чтобы скопировать Любой объект или текст и Ctrl V вы будете нажимать чтобы вставить этот объект или текст тоже самое Ctrl Z Ctrl A Ну и многое другое что здесь в принципе дублируется да мы можем посмотреть какие у нас здесь есть горячие клавиши по основным из них мы пройдёмся обязательно в этом мини курсе Мы их изучим я вам буду говорить называть что я сейчас нажимаю для того чтобы вы что через эту горячую клавишу мы вызываем действия и у нас что-то происходит меняется дальше мы здесь можем ещё посмотреть что у нас есть Не пугайтесь их количеству абсолютно не обязательно все их запоминать Я сам их не знаю меня только вот то что мне нужно то я и запоминаю тут во-первых надо понимать что Фима она используется огромным количеством различных дизайнеров не только дизайнеров карточек товаров вообще фиг была придумана для интерфейсов это то есть интерфейсы сайтов различных приложений систем и так далее и здесь потом уже она полюбилась другим дизайнерам в том числе нами Вот и мы сюда пришли и так что некоторые функции от фигмы нам в принципе не особо-то и нужны Вот но Давайте закроем эти горячие клавиши Теперь вы знаете как их вызывать если что-то то вы можете их по заучивать заучивать нужно только тогда когда вы понимаете что Ой что-то я устал или устала там делать одно и то же действие Наверняка у этого действия есть какая-то горячая клавиша Вы заходите и ищете эту горячую клавишу либо просто гуглите и смотрите какие есть горячие клавиши полезные для вашей работы для вашей ситуации А так дальше у нас идёт вот это вот меню инструментария здесь мы будем отдельно останавливаться на каждом пункте и в общем это в ближайших будущем вы увидите в этом же видео по каждому из этих по каждой из этих кнопок далее У нас идт по центру значит название наше Да если мы Клик на него два раза то мы можем его переименовать например мы можем назвать его инфографика инфографика Потом мы кликаем где-то в стороне и у нас наш теперь дизайн файл называется инфографика означает что мы на бесплатном тарифе находимся drafts Это означает что он у нас в разделе черновиков и Значит мы можем его редактировать также если мы нажмём на вот эту вот галочку то мы попадём в такое выпадающее меню через которое мы сможем определённые действия произвести с этим дизайн файлом это все действия относятся именно к дизайн файлу мы можем его экспортировать мы можем поменять какие-либо настройки цвета Но вот самое основное Наверное - это то есть переназвать да Но мы уже через двойное нажатие на самом названии это сделали и самое основное - это дублировать то есть вот если вам кто-то скидывает дизайн файл или возможно вы там к нам на курс зайдёте У нас есть там шаблонизатор который вы полностью себе можете скопировать я потом вам попозже его немножко покажу вы просто нажимаете duplicate и вы вот это вот весь всё что здесь будет находиться это может быть огромный массив данных огромный массив масса информации графики они у вас копируются в ваш дизайн файл вашего проекта и вы сможете их редактировать А и также вы можете удалить либо сделать его избранным Но это мы тоже уже проходили ранее далее а переходим чуть-чуть правее и здесь у нас находится значит подсказка в каком аккаунте мы сейчас находимся Да и какие ещё пользователи находятся в этом дизайн файле одновре именно с нами то есть если вы где-то поделились ссылкой сейчас мы об этом поговорим а поделились ссылкой на этот дизайн файл то ещё другие пользователи могут зайти единственное Они не смогут там редактировать на бесплатной версии а сразу да по умолчанию но вы можете видеть их здесь знаете как в Google документов там неопознанный опосум там ещё А какие-то вот животные интересные Да вот они здесь всё будет появляться А и вы будете видеть что вот например одновременно с вами смотрит вот столько человек кнопка Share это очень важная кнопка она выделена синим вообще все основные элементы все важные элементы они выделены Да в фигме А мы если нажмём на неё то у нас появится Вот такая вот такое окно popup всплывающее окно где мы можем произвести различные действия с помощью которых мы можем поделиться материалами этого дизайн файла с другими участниками А ну вообще с любым человеком по сути да Для чего это нужно например мы на курсе используем такую механику когда человек обучающийся делает какое-то задание практику он в дизайн файле работает работает работает и для того чтобы ему сделали обратную связь Ну дали обратную связь по его работе Он копирует ссылку вот сверху находится Колин и отправляет в чат куратору И после этого куратор может зайти туда как пользователь как зритель смотреть что было сделано и прокомментировать прямо в нужных местах например что нужно поправить что какое-то мнение рекомендация и так далее А это можно сделать вот буквально нажав две кнопки кнопка Share и кнопка Copy Link всё у вас будет уже скопировано в буфер обмена который вы уже можете вставить там в любой удобный документ или в чат а дальше что вы ещё можете сделать Да а вот тут вот есть настройка по умолчанию она сейчас так стоит но возможно в какой-то новой версии фигмы подут по-другому поэтому обратите на это внимание опять же потому что А здесь вот прописано возможно надо будет просто менять Да а кто ссылкой то есть вот anyone with the Link То есть это Любой человек любой пользователь с этой ссылкой может просматривать Вот это по умолчанию стоит то есть вот эту ссылку Вы когда копируете это будет а по умолчанию дальше у вас идёт вот здесь вот раздел а пользователя который является основателем хозяином Я не знаю какой-то Ну тот кто создал этот создатель Да этого дизайн файла owner вот он здесь прописывается это То есть я в скобочках мне фиг подсказывает что это я и дальше у нас есть различные ещё пункты которые в принципе вам не будут необходимы скорее всего А это режим разработчика это опять же для тех кто сделает сайт мы им вообще не будем пользоваться вот и здесь определённые действия с комьюнити и кодом в принципе это не столь важно для для нас важна вот эта вот вся часть и смотрите что каждый с этой ссылкой может просматривать скопировали ссылку вставили Куда нам её необходимо вставить это опять же переключение между различными режимами это режим разработчиков то есть мы если сюда нажмём у нас поменяется интерфейс но он нам не нужен поэтому мы даже не будем сейчас ну как бы экспериментировать с ней Если вдруг вы случайно нажали просто ещ раз отожмите потому что это просто тумблер а дальше дальше у вас есть обзор А вашего прототипа но этом мы тоже не будем пользоваться и э масштаб э в котором мы сейчас находимся относительно нашего фрейма ой относительно нашего дизайн файла рабочий области у нас сейчас здесь серый фон присутствует нам сложно разобраться Какой это размер вообще да если мы вообще не понимаем вот эти вот значения В чём они здесь отображены и так далее В общем это тоже не су важно мы будем простыми там горячими клавишами или тачпада или колёсиком мышки увеличивать уменьшать размеры чтобы какие-то моменты приближать отдалять смотреть и так далее Давайте теперь перейдём в правую часть Помните я говорил что у фигмы Да есть такое базовое разделение Это центральная левая и правая панель Центральная - это как правило Рабочая область А вот эти вот это менюшки вот и здесь мы значит находимся практически всегда Ну то есть нам вот эта вкладка прото тайп она по по сути не требуется А вот дизайн она мы находимся в ней всё время А здесь у нас какие есть возможности по умолчанию да то есть вот сейчас у нас на нет никаких объектов всё чисто и здесь у нас есть такой вот квадратик светло-серый и здесь написано F5 F5 F5 квадратик обозначает этот цвет а цвет - это рабочего нашего а рабочей нашей области вот этого поля если мы будем двигать вот этот кружочек Да внутри вот этой градиентной области то мы будем попадать на новые какие-то цвета также мы можем выбрать вот по этой линии различные оттенки вообще новые цвета а потом у ещё до корректировать что-то а для инструмент так скажем по выбору цвета практически Един везде в фигме да то есть он везде одинаково работает но я вам рекомендую просто оставаться на вот этой вот настройки по умолчанию потому что она самые приятные глаза Потому что если вы будете работать в красном оттенке У вас глаза очень быстро устанут в чёрном Ну тоже на любителя да то есть если вы ночью работаете то О'кей а но вот этот рекомендуемый так скажем а цвет F5 F5 F5 - это кодировка цвета а по хкс мы будем об этом говорить попозже когда дойдём до А работы с цветом А в принципе ну я тоже об этом расскажу здесь У нас 100% написано Да 100% - это непрозрачность то есть непрозрачность нашего А вот этого рабочего Поля если мы поставим сюда например А 0% да просто вот удалим вот это то у нас появляется вот такая картина здесь мы видим всё в квадратиках возможно кто-то знает эти квадратики означают Альфа слой Альфа слой - это прозрачный слой то есть схо с прозрачностью здесь как бы ничего нет как правило нам здесь в данной ситуации практически никогда этого не нужно делать потому что Рабочая область - это как знаете как наш рабочий стол он есть и есть мы возвращаем ему 100% и вот он просто у нас будет там можно любое значение выбрать от нуля до 100 соответственно а также мы можем нажать на кнопку глазик и она станет невидимой сразу то есть вот эта область у нас она становится неви да то есть вот это как бы наша страница внутри здесь а здесь дальше у нас есть определённые настройки по которым мы пройдёмся чуть-чуть попозже в частности мы будем в основе так скажем работать наверное с экспортом и с локальными стилями Но это чуть-чуть попозже опять же с правой частью разобрались с верхней частью полностью разобрались значит с Центральной у нас всё понятно здесь она будет попозже задействовано и в левой части вот важный момент у нас здесь располагаются меню слоёв которая всегда отвечает за слои То есть если вот эта часть будет у нас меняться в зависимости от того какой мы объект здесь выбираем вы это увидите А вот эта часть она будет всегда отвечать за слои и также в этих слоях есть такая иконочный у нас может быть много всего Ну то есть огромное количество дизайн файлов вообще материалов и соответственно мы не знаем где он находится Ну помним что есть какой-то надпись вот эту надпись мы можем как раз найти через эту лупу А всё пожалуй А ну да Вот ещё один момент вот здесь вот у нас есть й это страница да то есть вот это вот по большому счёту это всё страница мы можем создавать если я не ошибаюсь три страницы в таком проекте и эти страницы огромные мы потом по масштабу посмотрим и вы поймёте что там можно размещать огромное количество материалов если единственное там может быть ограничение в вашем компьютере что он будет загружать Вот это всё из Интернета Да как бы и вывезет ли он это Но в принципе э вам любого ресурса в фигме должно хватить всё на этом разбор внутренней части интерфейса окончен сейчас мы перейдём к работе уже с элементами внутри нашего рабочего поля самое интересное Сейчас начнётся Итак друзья сейчас мы переходим к элементам внутри нашей рабочей области и в первым главным элементом у нас будет фрейм а фрейм - это по сути лист бумаги можно так его назвать где мы будем собирать наши аппликации то есть собирать кусочки туда элементы какие-то фотографии складывать туда они там будут храниться и потом мы их можем брать и куда-то вешать сохранять и так далее для того чтобы создать фрейм мы можем воспользоваться нашим меню инструментов и вот здесь вот у нас второй вот инструмент в виде решёточник как он самый популярный мы нажимаем на него он у нас загорелся синим здесь у нас есть видите какая-то подсказок анимированная выскакивает И после этого Когда мы уже зажатым вот этим Точнее не с зажатым а с синим Да вот этим вот фреймом а идём в Рабочая область у нас появляется вместо нашего а курсора стрелочки обычной у нас появляется вот такой крестик Это означает что мы готовы для того чтобы сделать фрейм для того чтобы сделать фрейм нам нужно зажать левой клавишей мыши в любом месте и и потом потянуть в какую-либо из сторон И видите у нас получается вот такой прямоугольник сверху в левом углу написано рейм о и здесь у нас в нижней части идут цифры бегут да такие цифры - это они обозначают как вы уже догадались размер этого фрейма первая цифра - это ширина вторая цифра - это высота в пикселях соответственно так как мы будем работать с материалами которые будут потом в дальнейшем загружаться на Маркет плейсы то нам нужно знать размеры фреймов размеры слайдов которые туда загружаются либо хотя бы соотношение сторон А если мы будем брать самый крупный маркетплейс - это Валберис то у нас там будет соотношение сторон на всех категориях товаров на всех карточках 3 к четырём минимальный размер этого фрейма должен быть точнее слайда 900 на 1200 пикселей давайте мы как раз его и создадим сейчас видите Да я веду и у там до 90000 не доходит да то есть я могу вот так вот как-то Ну не совсем удобно это на самом деле Да вот так вот подбирать выискивать тот самый пиксель где у меня сойдётся Вот это значение 900 на 12200 поэтому я в любой точке могу отпустить фрейм и у меня создастся создастся вот такой вот лист где я смогу в дальнейшем работать чтобы сделать его нужного размера я помимо его изменения тот же ту механику которую я только что показывал я могу воспользоваться более продвинутыми инструментами которыми вы будете чаще всего пользоваться в частности когда мы выбираем вот этот фрейм видите он у нас подсвеченный рамкой А это означает что мы сейчас э с ним работаем он находится в активном режиме а соответственно в правом меню у нас возникает в правой экране в правовом стороне экрана у нас возникает меню которое относится к этому фрейму выговорил и здесь мы как раз-таки все манипуляции которые мы можем провести с этим фреймом относительно его формы размера цвета и так далее мы можем сделать вот через это правое меню сейчас мы с вами по некоторым из этих основных инструментов безусловно пройдёмся А давайте для того чтобы его привести в нужный размер 900 на 12200 пикселей сначала обратимся к этим значениям То есть мы интуитивно понимаем что здесь 469 на 416 значит вот эти два значения и значит они отвечают за ширину и за высоту а соответственно мы можем вбить здесь вручную нужные нам значения и поэтому нам не нужно будет выискивать вот эти значения поиском нужного пикселя А здесь мы прописываем 900 и высоту мы прописываем 1.00 вот нажимаем либо Enter либо просто в сторону куда-то клика вот у нас получился вот такой фрейм сейчас я буду перемещаться по моему по моей области перемещение у меня значит происходит по моей области через тачпад я тачпад если например вы на ноутбуке работаете то у вас скорее всего тачпад работает при двойном соприкосновении с двумя пальцами Когда вы двигаетесь двигать вот э вот область Да ну то есть перемещаться по вашему полю Если вы заж пробел вот у вас появляется такая ладошка вместо стрелочки зажатым пробелом вы двигаетесь и зажимается левый клавишей мыши и перемещается в нужную область нашего рабочего поля для того чтобы ну сделать какие-то манипуляции дальнейшие вот также важный момент да сразу видите у меня фрейм не помещается на мой экран соответственно Я хочу его немножко отдалить а поменять масштаб моего рабочего поле я могу сделать это через вот этот инструмент а видите у меня здесь 102 про Но это неудобно потому что каждый раз отсылать вот сюда Да и пытаться там вот как-то сделать зумирование или наоборот на отдаление э это неудобно соответственно я а пользуюсь чаще всего опять же на ноутбуке тачпада двумя пальцами я свожу или развожу и соответственно у меня происходит увеличение или отдаление то же самое как вы работаете на телефоне приближайте ваше изображение и так далее ну это достаточно просто а также если у вас нет возможности или вы работаете на компьютере у вас нет тачпада то соответственно мышка и клавиатура у вас есть Вы можете зажать если это на Windows клавиатуре то вы зажимает Ctrl и либо колёсиком крутите либо зажимает плюс или минус на клавиатуре И от этого у вас происходит увеличение или отдаление колёсико более отзывчивое и тут меньший шаг так скажем Да вот этот вот зумирование вы соответственно можете больше лучше подобрать Но вот тачпад для меня это прямо One потому что здесь можно делать максимально всё быстро перемещаться по полю отдалять и приближать Так давайте перейдём снова к нашему фрейму здесь у нас Какие ещ есть значения относительно этого фрейма эту область мы разберём чуть-чуть попозже она здесь пока не активна потому что она относится к другим элементам которые будут находиться внутри фрейма А здесь у нас идёт значит А вот эти вот две основные позиции Да это X и Y А это относительно всего вот нашего дизайн файла вот этого дизайн э Рабочая области дизайн файла Да вот я сейчас на максимальное отдаление сделал здесь у меня сейчас 2% Да И вот вот так вот выглядит наш фрейм ой 900 на 12200 пикселей а соответственно вот эта точка т 305 и 109 это его позиция относительно вот этих координат где вот здесь ноль и вот где точнее где здесь на этом всём большом поле ноль а это идёт по иксу 305 и по игре 109 если мы начнём перемещать видите Да у нас происходит изменения То есть у нас изменяется как X так и y это нам не особо важно на самом деле X Y вот эти вот значения не особо важны намного важнее вот эти 900 на 1200 Давайте ещё вот обратим внимание что у нас справа есть вот такая иконка зажав которой у нас получается цепочка да три звена как будто они как будто бы сцеплены что это означает Я вообще рекомендую пользоваться не 900 на если мы для ВБ работаем а в два раза больше по каждой стороне то есть 1.800 на 2.400 для того чтобы изменить этот размер мы можем сделать проще Да например мы вот этого сохраняем пропорцию сцепляется нального я одно из значение меняю там пример на 1.800 нажимаю Enter и второе значение у меня автоматически подтягивается в соответствии с этой пропорцией и составляет сейчас 2400 пиксе вот Обычно я работаю для vb вот с такими размерами если Мне позволяет качество фотографии если качество фотографии плохое то Можно перейти на минимальное разрешение 900 на 1.200 это именно минималка для ВБ для зона минималка идёт а 1.000 на 1.000 ну так скажем у них намного меньше идёт там до 300 пикселей Но это вот прямо очень старые правила и никто их Конечно же не соблюдает но где-то на 1.200 1.200 желательно выводить потому что там идт Квадратное соотношение сторон один к одному квадрат в большинстве категорий кроме одежда аксессуары и обувь вот в этих трёх категориях у нас также идёт соотношение сторон как и на ВБ 3 к че вот дальше у нас идёт здесь значение поворот нашего значит фрейма но нам это значение не нужно мы можем его к фрейму применять а также у нас здесь идёт скругление углов она также нам здесь во фрейме не нужно мы можем тоже его во фрейме не применять мы будем пользоваться этими инструментами но уже внутри на Когда мы будем работать с более Ну с мелкими элементами которые там например прямоугольники какие-то линии и так далее мы их здесь будем крутить вертеть сделать им сглаживать углы и так далее дальше Обратите внимание супер важная галочка которая называется Clip Content это Функция которую вы вообще не почувствуете при нажатии Да вот сейчас вот что она означает когда у нас функция Clip Content включена то есть синяя галочка горит то всё что находится в нашем фрейме А мы на этот фрейм будем как бы накладывать помните Да аналогию я провёл как будто бы это у нас аппликация детская да то есть вот мы взяли лист бумаги и на неё наклеиваем и это всё то же самое здесь будет происходить А И когда наши элементы какие-то будут выходить за границы этого фрейма вот где у нас сейчас синяя линия Да происходит то эти элементы будут обрезать визуально только обреза то есть они по факту останутся целыми но здесь мы их дальше не будем видеть Я сейчас немного забегу вперёд но так как это важная функция и многие так скажем спрашивают по ней да а что как как ей пользоваться я сейчас вам немножко расскажу вот смотрите например мы возьмём какой-нибудь элемент возьмём эллипс для Для более наглядного примера А я сейчас мы с эллипсом дальше поработаем отдельно но я просто его начерт вот здесь вот да в виде круга А и размещу его по краю вот Обратите внимание Вот я его размещаю в фрейме он у меня находится в фрейме Да но здесь он обрезается если я зайду снова в настройки нашего фрейма и отключу клип контент то произойдёт Вот такая вот вещь то есть у нас появился визуально то есть появился вот этот часть вот этого Круга при этом важный момент тоже да мы дальше будем разговаривать на эту тему но лучше в два раза повторить Это вопрос подчинения то есть вот эти вот элементы которые находятся внутри фрейма они будут выглядеть в слоях вот таким образом не переживайте мы об этом ещё поговорим если вам сейчас что-то Непонятно мы будем ещё неоднократно к этому возвращаться и Вы точно разберётесь в этом всм вот здесь если вот этот у нас находится во фрейме значит он подчиняется ему да то есть все действия которые мы будем делать с этим фреймом у нас будут эти действия касаться и вот этого элемента Например я только что передвинул вы заметили всё это тоже вместе передвинул я если например фрейм сохраню то этот Круг У меня тоже там сохранится именно будет в таком виде например в жиге или в н существовать и так далее То есть бывает ситуация такая Когда вы случайно вынесли этот фрейм например вот вы хотели так захватили в мышкой его вот с этой стороны и понесли его вот сюда хопани и этого фрейма и соответственно в этот же момент Ваш Круг уже не подчиняется этому фрейму это тоже важно запомнить и здесь у нас в слоях он теперь находится не под фреймом и не чуть-чуть правее Да его Что означает подчинение а отдельно вообще и выше по слоям по слоям сейчас мы тоже разберёмся что это такое Вот ладно давайте не будем сейчас сильно перегружать мы значит эту задачу выполнили дальше давайте мы попробуем копировать фрейм фрейм как и любой элемент в рабочей области а подвергается практически одинаковым одним и тем же манипуляциям в частности мы можем его скопировать надо вам нарисовать второй фрейм Да кстати Вы можете его делать рисовать через горячую клавишу F Frame А вот я нажал на F и у меня появился вот этот вот крестик который нарисует фрейм но не всегда удобно рисовать одно и то же да например нам нужно таких 10 слайдов сделать и все они будут понятное дело одного размера Зачем мне каждый раз его рисовать заново тут я могу просто взять его и скопировать для этого я выделяю нужный мне фрейм нажимаю Ctrl C и нажимаю Ctrl V копировать вставить знаете да самые популярные горячие клавиши во всех системах Ну то есть для Мака это будет ко и здесь дальше Вы имеете точно такой же фрейм за одним маленьким исключением у него название будет другое да то есть у нас здесь фрейм о и так как здесь у нас есть в конце числительное гма понимает что у нас не может быть два одинаковых названия во фрейма Хотя физически Это возможно но она нам сразу помогает и подсказывает и делат следующее значение 2 дальше понн с вами разобрались по копированию мы с вами разобрались Давайте теперь перейдём вот к левой панели где мы уже немножко Заска Да сда и смотрели на наши слои я вам раньше объяснял что это такое и в принципе здесь у нас как раз-таки вот эти слои сейчас видны да то есть вот я нажимаю точнее даже не нажимаю просто наложу мышку без нажатия на один из фреймов один Например у меня подсвечивается конкретный фрейм он выделяется а второе Нам тоже подсказывает что вот так выглядит вот там находится второй фрейм и тоже самое у нас будет с третьим или с каким-то конкретным элементом который будет содержаться внутри фрейма это не имеет значения вот а давайте сейчас посмотрим У нас есть здесь у каждого элемента в этих слоях по две таких вот иконочный фрейм к той позиции где он сейчас находится и например Обратите внимание что фрейм 2 у нас приколочено да зафиксирован там а фрейм оди у нас не зафиксирован то есть я если просто провожу мышкой даже над фреймом один то он у меня подсвечивается А фрейм 2 он у меня не подсвечивается потому что я его сдвинуть сейчас не могу что бы я сейчас тут не делал а он у меня не сдвинется ни на пиксель при этом при этом рейм 1 что угодно я могу с ним сделать для того чтобы вернуть кстати в исходную позицию отменить действие предыдущее я пользуюсь горячими клавишами которые вам 100% надо запомнить вы будете это делать даже неосознанной жизни Ctrl Z либо Common Z вы убираете отменяйте последнее ваше действие и вы можете неоднократно нажимать Command Z или Ctrl Z и тогда вы будете возвращаться на шаг назад Вот я зафиксировал то самое положение которое мне необходимо через ctr Z и оставляя всё в таком виде Ладно давайте с замочком разобрались Давайте теперь ещё одна иконка это глазик как мы уже разбирались с фоном да для рабочей области это видимость или невидимость соответственно если мы нажимаем глазик то у нас пропадает при этом фрейм Ну или другой любой элемент существует Но он просто нам не виден и он у нас не будет сохраняться то есть при сохранении также е пой Я не сказал что у нас здесь есть страницы в каждом проекте Вы можете создавать до ТХ страниц и в каждом и вы можете делать три проекта то есть у вас по большому счёту есть возможность собрать девять вот огромных таких областей фреймов то точнее дизайн файлов они очень большие я вот даже не помню где вот вот я сейчас потерял в частности мой фреймы да потому что настолько это большое поле которое сложно Ну то есть себе представить просто вот я нашёл мои фреймы вот они здесь находятся всё А так дальше А у нас ещё есть два элемента важных Да с которыми мы постоянно работаем даже один элемент с которым мы постоянно работаем и один ещё очень похожий элемент они тоже находятся у нас вот в этой Вот строке мы будем неоднократно переключаться между ними в частности это режим Move это режим по умолчанию когда мы вот просто стрелочкой вот такие безобидные действия делаем там что-то передвигаемся горячая клавиша K А тут горячая клавиша V соответственно если мы нажимаем на клавишу Scale K то мы можем А например понеся да к одному из углов нашего фрейма мы видим такую задвоенные Да это означает что мы как раз-таки в режиме масштабирования сейчас работаем Скейл - это масштаб и если мы будем применять этот масштаб то у нас внутри что находится вот в этого фрейма он будет тоже масштабироваться либо а пропорционально уменьшаться либо пропорционально увеличиваться Возможно вы сейчас не чувствуете разницу между обычным изменением размера и скейла но вы почувствуете это 100% когда мы будем работать с текстами например да то есть когда размер текста будет у нас уменьшаться и ничего не поедет Это только через режим Scale K клавиши а также мы Сейчас переходим в обычный режим через горячую клавишу Вот это уж точно надо запомнить вот эти две горячие клавиши V и K VM K Scale Вот вы запомните это через какое-то время 100% А дальше я на конкретных примеров потом попозже ещё покажу А дальше вернёмся снова в правую область здесь у нас есть поля АВ layout а layout GD Но вот например в частности layout GD он больше подходит для сайта строения с вёрстки сайтов а авто layout мы можем использовать в принципе но я не буду сейчас вас загружать это как бы немножко посложнее тема А вы также можете переходить вот в следующие Ну то есть вот эти вот layers мы слои р слой мы разберём попозже в следующих уроках а здесь у нас вот есть л такой область Да на настройки л означает заполнение заполнить а чем он у нас заполнен в данном случае заполнен цветом F это белый цвет полностью белый цвет давайте мы ему поменяем другой цвет и у нас он меняется на фрейме вот пускай будет Вот такой красный и А здесь мы видим опять же те же значения помните когда Мы работали с областью вот этой вот 100% то есть это 100% непрозрачность мы можем поменять на 50% появилось 50% прозрачности возвращаем обратно к 100 и здесь же у нас есть глазик который отвечает всегда за видимость и вот этот вот минус который удаляет эту функцию Ну то есть в данном случае это функция заполнения цветом мы можем её нажать и у нас как бы всё заполнение исчезло при этом сам фрейм остался я могу нажать Ctrl Z Запомните горячая клавиша это самая полезная горячая клавиша которая у вас всегда будет под рукой а дальше мы можем сделать нашему фрейму строк строк - это линия линия обводки А мы не будем сейчас работать в частности на фрейма потому что строк на фрейме бесполезен он не нужен поэтому я сейчас просто вас даже грузить не буду мы разберёмся с этим инструментом на других элементах с эффектами такая же самая история мы будем разбираться на них с эффектами на других элементах а вот с экспортом на надо разобраться экспорт - это одна из самых важных функций для фрейма потому что именно через экспорт мы будем сохранять наш фрейм в виде слайда всё что содержится внутри слайда всё что ему подчинено будет сохраняться через экспорт здесь мы видим значит следующее значение выпадающее меню где мы будем выбирать формат в котором мы будем сохранять png JPEG svg или PDF если мы работаем в с клиентом и нам необходимо предоставить ему макеты которые он в дальнейшем будет загружать на marketplace то мы работаем только с png и только с JPEG потому что маркетплейсы другие форматы не принимают запомните это пожалуйста png и JPEG так и дальше мы просто нажимаем на кнопку exper Frame 2 ну в частности потому что Frame 2 и он у нас предлагает Выбрать путь куда мы будем сохранять наш значит фрейм вот я отменю моё действие и а Наверное мы подошли к финалу а дальше по фрейма Я имею в виду Мы вроде бы всё по фрейма разобрались А дальше у нас будут тема слоёв и фигур которые мы сможем уже внедрять в наши фреймы и уже создавать какие-то минимальные композиции Итак друзья в этом уроке мы с вами разберёмся со слоями как с ними можно работать И для этого я сделал небольшую заготовочка в виде вот этих трёх квадратов как эти квадраты делать Мы разберёмся в следующих видео в следующих шагах Точнее не переживайте так А давайте для того чтобы разобраться как работают слои вот эти вот слева мы с вами создадим фрейм для этого я могу кликнуть либо вот на эту иконку помните да либо вызвать через горячую клавишу F я сделаю второй вариант и у меня появился крестик после чего я могу ввести и рисовать свой фрейм сразу привыкаем работать с фреймами которые нам подходят для работы для маркетплейсов на маркетплейсах и соответственно Я здесь прописываю нужные мне размеры в пикселях 100800 на 2400 пикселей А так смотрите фрейм у нас готов у нас готовы вот эти вот квадратики которые А собственно говоря мы сейчас будем экспериментировать с которыми да А вот смотрите если мы посмотрим на левую часть экрана то Увидим что у нас есть фрейм есть прямоугольник Давайте кстати их назовём да то есть вот этот вот прямоугольник для того чтобы легче ориентироваться у нас будет красный этот прямоугольник у нас соответственно будет зелёный и этот синий всё сейчас мы нам так легче будет просто смотреть смотрите возьмём красный прямоугольник квадрат в частности и занесём его на во фрейм То есть на территорию фрейма видите Сначала он появляется у меня как будто бы под ним Да а потом когда курсор заходит на территорию фрейма он у меня в самом фрейме появляется и фрейм подсвечивается синей рамкой это означает что наш прямоугольник теперь стал квадрат Ладно квадрат наш теперь стал в подчинении нашего фрейма то есть в данном случае он находится как бы вот в древовидной структуре нашего фрейма Да видите у нас как бы корень вот он это фрейм и потом всё что подчиняется Ему оно находится уже немножко правее да то есть вот эти вот два квадрата они находятся соответственно левее они не находятся в подчинении также можем сделать со следующими квадратами тоже занести их и они у нас находятся в подчинении я ещё раз обращу внимание ваше на то что есть такая функция как Clip Content мы её на предыдущем шаге разбирали но я бы ещё хотел обратить внимание если наш элемент какой-то выходит да за границы частично вот этого фрейма то он соответственно будет теряться но только в том случае если он находится А в подчинении фрейма опять же если мы хотим его посмотреть вдруг по какой-то причине да то мы должны перейти в настройки фрейма выбрать его у нас поменяется здесь меню и вот здесь у нас появится такая галочка Clip Content нажимаем на неё и вот у нас происходит то самое действие которое мы репетировали в предыдущем шаги нажимаем снова клип контент он у меня всегда включён Так что я вам тоже его рекомендую всегда включать Я просто акцентируют внимание потому что очень частая ошибка у пользователей фигмы так и а последний шаг у нас остаётся синий квадрат мы его тоже сюда затаскивает внутри А фрейма сделаем вот такую композицию друг на друга их наложи и посмотрим как это всё работает чуть-чуть отцентровать там например середину позици относительно фрейма то есть середину позиции относительно другого объекта или он должен быть в ровен с другим объектом короче гма Нам очень сильно помогает в этом поэтому вы скорее всего не запутай так давайте теперь по экспериментируем со слоями Красные у нас находится как мы видим здесь в самом низу по слоям то есть вот когда они находятся во фрейме да то есть они как будто бы внизу вот относительно этих слоёв Да вот расположение вот этих полос точнее линий Да они находятся как будто бы э ниже но на самом-то деле выше визуально Я надеюсь я тут вас не запутал потому что они как на листе бумаги да вы помните вот эту аналогию они как будто бы там как на листе бумаги находятся Вот и соответственно здесь мы Какие действия сейчас мы можем сделать Мы можем взять и красный передвинуть а выше по слою просто берём левой клавишей зажимаем и ведём его Вверх Он у нас стал выше чем зелёный и мы видим что позиция у нас здесь изменилась и он соответственно действительно стал выше чем зелёный аналогичную ситуацию мы можем провести например с синим квадратом и сделать его ниже зелёного Вот он у нас появился здесь Давайте теперь общее пересечение у всех трёх сделаем квадратов чтобы у нас было наглядно и красный и синий тоже пересекались между собой если мы возьмём синий и аналогичным образом если мы его передвинь На самый верх то он у нас показывается полностью Я думаю здесь Всё достаточно просто и интуитивно Понятно поэтому вы мы с этим разобрались и можем идти дальше так дальше у нас бывает возникает такая ситуация очень кстати частая А я бы тоже хотел на неё обратить внимание например Давайте вот сделаем такую каскадную историю Но вот э у нас Три квадрата находятся во фрейме Мы с ними работаем вроде бы всё в порядке но что-то произошло и мы начинаем А вот вот этот вот как-то синий квадрат например мы его случайно выкинули за предел фрейма Вот он у нас ушёл по слоям выше Ну то есть он там вот да находится он по факту он по видимости выше всех находится но не во фрейме далее Когда мы уже вот закончили нашу работу и мы хотим сохранить наш фрейм кстати сейчас прорех это действие да Для этого мы нажимаем выделяем фрейм щёлка на него название здесь он у нас выделяется Здесь всё выделяется тоже синим и дальше у нас появляется вот такое вот меню Да где есть галочка Clip Content это значит вы работаете именно с фреймом и у вас внизу есть всегда такая а кнопка экспорт нажимаете на неё далее Мы выбираем формат png пускай будет также и нажимаем Export Frame 1 а для этого мы просто ну как бы сохраняем путь да то есть находим путь по которому Нам необходимо сохранить А я уже заготовил здесь папку нажимаю сохранить и Обратите внимание как сейчас выглядит мой фрейм Да и как он выглядит Сейчас у меня на просмотре то есть синий квадрат пропал вы уже догадались потому что он находится не в фрейме соответственно для того чтобы он у нас сохранялся правильно Нам нужно следить за тем чтобы у нас всё было во фрейме это очень легко проверить Например если вы возьмёте Вот например синий у вас не в подчинении находится у фрейма Да Выделите только фрейм и зате вот глазик да то есть Убрать всё он у Вас должен убрать абсолютно всё То есть если у Вас что-то остаётся значит это не во фрейме находится возвращаем Синий в во Frame нажимаем то же самое действие делаем здесь новое название нажимаем сохранить и вот у нас уже новый фрейм он сохранён с учётом синего квадрата а всё здесь мы разобрались со слоями достаточно всё просто самые главные ошибки Мы тоже разобрали и следующим шагом который мы будем разбирать в фигме это будет инструмент А и инструмент прямоугольник в частности самый популярный инструмент Итак друзья сейчас мы будем разбираться с инструментом прямоугольники и в частный случай прямоугольника ещё есть квадрат как мы знаем Из геометрии Да для того чтобы вызвать этот инструмент Нам необходимо в панели инструментов выбрать вот этот вот иконку Да также здесь у нас есть стрелочка и здесь есть другие инструменты которые мы разберём попозже но мы берём самый часто используемый инструмент прямоугольник также у него есть горячая клавиша rangle мы нажимаем он у нас активный и у нас получается соответственно крестик благодаря которому мы сможем нарисовать фигуру как мы уже догадываемся давайте Нарисуем пока вот такой прямоугольник разместим его по центру и а дальше мы посмотрим что можно делать Какие манипуляции можно с ним делать Например если мы опять же создаём прямоугольник мы можем его сделать так да как и фрейм тоже самое если мы создадим ещё один прямоугольник вот через горячую клавишу R я сейчас это делаю Да А то мы соответственно можем его просто так скажем кликнуть на любой области и у нас автоматически создастся квадрат с размерами 100 на 100 пикселей а также мы например можем создавать квадрат сразу другого размера сейчас я удалил этот квадрат да И если мы заходим в рекн прямоугольник и зажимаем Shift вот сейчас я с зажатым шифтом поведу у меня будет фигура правильный формы образовываться конкретно это квадрат Вот и тут я могу подбирать размеры которые мне нужно и также я могу это делать через настройки так же как мы делали в фрейме А давайте сейчас посмотрим например на историю когда а нужно нам изменить размеры Да определённого значения а самые простые механики мы знаем Сейчас удалим пока квадрат самые простые механики мы знаем А например нам нужно получить прямоугольник который будет в два раза Вот я да как бы сразу да вам показываю ещё размеры Как можно изменять конкретные размеры длину там или высоту ширину или высоту Короче как как назвать А и здесь например нам нужно то такой же вот прямоугольник с такой же высотой но в два раза чтобы он был шире да то есть у нас 294 пикселя сейчас идёт по ширине А нам надо его например в два раза мы можем высчитать Да это значение у нас там получится порядка 600 пикселей но мы можем это сделать ещё и проще вот смотрите во всех абсолютно во всех вот этих вот внутренних так скажем элементах куда мы можем переменные вносить наши с значения в фигме мы можем использовать внутренний калькулятор это вообще супер крутая вещь я вам сейчас её покажу например Мы сюда можем 294 и просто пишем обычную формулу умножить Так где у меня тут умножить умножить на два например нам надо сделать в два раза больше его Да нажимаем и он у нас автоматически в 588 пикселей превращает вот эту ширину это вообще супер классный инструмент Потому что если вам там нужно умножить на 1,6 например там поделить на 4 и Ну короче много всяких моментов которые до которых вы скорее всего с самого начала не дойдёте но потом вам вспомните про этот урок и вспомните что есть такая функция она очень классно выручает в некоторых моментах в фигме так размеры Значит мы поменяли Теперь давайте посмотрим как нам можно менять размеры например вот нужно нам такой пропорции Да размер её сохранить но сделать побольше прямоугольник А для этого мы выбираем наш прямоугольник зажимаем Shift и тянем за угол он у нас будет видите Я хоть куда передвигаю свою свой курсор он у меня всё равно пропорционально нарастает или уменьшается относительно тех же размеров которые у меня были изначально тоже самое И происходит Ну точнее не тоже самое а интересная происходит вещь когда мы делаем Это всё с альтом либо с Option Если вы на Маке работаете здесь происходит такая такая история смотрите например мы нажимаем Alt зажимаем и начинаем вести видите я Введу в какую-либо из сторон Давайте вот на простых изменениях сторон покажу например Я зажимаю Alt и начинаю сводить их да то есть у меня сводятся сразу в двух значениях И относительно центра это всё происходит это очень удобно на самом деле я очень часто пользуюсь изменением размером с альтом и зачастую ещё и с шифтом Сейчас объясню почему Например нам нужно вот сделать просто вот такой вот квадрат чтобы он относительно у нас также центр стоял как и сейчас но чтобы он был меньше Да я просто визуально хочу его сделать поменьше для этого Я зажимаю сразу и Shift и Alt и потом я его Введу и видите он у меня и одновременно сохраняет пропорцию и одновременно со всех сторон изменяет размер это очень удобная функция на самом деле и потом вы её скорее всего будете очень часто применять Так давайте м к следующему значит инструменту что ли манипуляции с нашими объектами А в частности мы сейчас поговорим с вами про вращение мы как-то говорили про это уже на фрейме но с фреймом у нас там была история что фрейм нет смысла вращать Но вот зато элементы внутри фрейма очень даже часто вращаются а для того чтобы нам сделать изменение наклона угла мы можем перейти вот в эту панель здесь у нас появляется вот такая вот Градусы да rotation то есть поворот здесь мы можем поставить Например я не знаю Ну пускай будет 50 градусов Вот он у нас наклонился на 50° здесь мы можем поставить минус Да например 50° он у нас в другую сторону наклонился вот тоже самое мы можем делать если мы будем просто выделять наш объект и когда мы курсор подводим к внешней стороне нашего угла Да любого угла у нас появляется вот такая вот стрелочка изогнутая и соответственно здесь нажав на неё и вращая мы можем добиться визуально нужного нам угла Вот Но если мы например с этой стрелочкой будем работать и заж ещё и Shift Shift он помогает всегда так скажем отвечает за ровность за то чтобы у нас всё ровненько происходило вот Shift он начинает вращать нашу фигуру С шагом То есть у нас сейчас происходит вот каждое перемещение ровно 15° и соответственно мы можем изменять например на 180 на 90° без проблем вращать это всё с шифтом и зачастую Вы практически не будете пользоваться вот этим инструментом именно изменением вот этого значения может быть только в том случае когда вам нужно будет добиться определённого угла Например я сейчас создам копию Кстати как я это сделал да Значит вы можете либо нажать Ctrl C Ctrl V и у вас создаст копия либо я чаще всего пользуюсь с следующим действием я выбираю мой объект дальше зажимаю Alt и не тяну Да вот здесь вот не меняю ему размер а просто вот за серединку вот когда такая двойная стрелочка появляется я вот так вот несу его в сторону и у меня появляется точно такая же копия вот этого объекта давайте мы вот этот наш второй объект мы его возьмём и и поменяем ему цвет для того чтобы он у нас отличался чуть-чуть А дальше мы с помощью вращения и с помощью шифта его сделаем таким вот горизонтальным и здесь мы сейчас немного забегая опять же вперёд Да поработаем как бы с несколькими объектами для того чтобы выбрать несколько объектов мы просто берём как бы и вот захватываем вот таким вот образом область все где содержатся все вот эти вот объекты а мы выделили их и мы ещё можем сделать Какие манипуляции Да здесь мы можем например отразить это по горизонтали Вот эту вот всю вот композицию мы можем отразить по горизонтали для этого мы щёлка кликаем на правой клавишей мыши на любом из пикселей который вот в этой группе находится и у нас появляется такой контекстное меню где у нас здесь вот в самом внизу всегда находится два значения Флип горизонталь и Флип Вертикаль это значит отразить горизонтально и отразить вертикально если мы отрази горизонта то у нас получается вот такая композиция если отрази вертикально то у нас получается вот такая композиция как будто бы мы просто ставим зеркало Да при вертикальном мы его горизонтально ставим а при горизонтальном отражении мы его ставим вертикально Ну соответственно у нас отражение получается ортогональное и Давайте вернём в исходное положение для этого я пользуюсь горячими клавишами Ctrl Z Вот это наше исходное положение Давайте теперь на примере вот этого прямоугольника этот можем удалить посмотрим что ещё мы можем делать с нашими объектами в принципе вот сейчас мы которые прои изучаем Да вот эти вот инструменты манипуляции мы на самом деле практически к любому дальнейшему инструменту тоже их сможем применить поэтому это такие универсальные штуковины А смотрите если мы значит возьмём наш прямоугольник то у нас также ещ появится Вот здесь вот такое значение как Егоре Да помните во фрейме я тоже говорил что а скругление углов нам в принципе не нужно для фрейма Но вот для объектов очень даже она часто используется поэтому мы можем его использовать А например чтобы придать какую-то больше более сглажен ную форму нашим там п ашкам кнопкам Ну не кнопкам кнопкам конечно у нас нет кнопок А может быть линиям даже в том числе то есть мы можем придавать различные формы с помощью вот этого инструмента скругления увов например мы можем сделать скругление углов например 50 пикселей Что значит 50 пикселей к скругление углов А давайте чуть-чуть приблизить его и посмотрим на наш прямоугольник смотрите когда мы его наводим Да у нас вот эти вот здесь есть такие кругляшки которые находятся всегда в углах Но эти кругляшки как раз-таки отвечают за радиус скругления то есть Радиус скругления - это расстояние между центрой центром этой до края нашего прямоугольника объекта в частности оно будет здесь везде 50 Вот здесь Да вот в этой Вот зоне она везде будет 50 пикселей это и есть именно вот это значение 50 пикселей что мы ещё можем делать если мы например нажмём вот на эту клавишу кнопку то у нас получится Вот такая история здесь у нас произойдёт по каждому углу у нас будет отдельная угол скругления то есть здесь мы можем например поставить 100 и посмотрите как у нас меняется фигура да то есть всё остальное не меняется вот эти два угла остаются прежними а вот эти поменялись здесь например Давайте поставим 200 пикселей и вот у нас здесь а здесь например у нас будет ноль пикселей и вот у нас такая фигура получается а на самом деле вот прямо так вот работать как именно здесь показано не совсем удобно и вы вряд ли его будете применять именно в таком ключе но если мы сейчас вернёмся в исходное положение через Ctrl Z вот а мы можем сделать следующую манипуляции мы можем вот с помощью вот этих вот кругляшков как раз-таки изменить наш радиус скругления если мы нажмём на один из кругляшков и потянем в сторону то у нас получится вот эти вот все углы этой фигуры будут скруглить интересно форма фигуры если мы например сделаем те же плюс-минус 50 радиус скругления и зажёг только по одному углу когда Мы перешли в этот режим скругление по одному углу дальше нам уже не надо нажимать Alt мы дальше можем сделать просто вот вести уже в нужные нам значения да и у нас будут изменяться только те самые углы которые мы собственно говоря и тащим вот таким образом мы можем получать различные фигуры и вы можете тут поэкспериментировать сделать какую-то свою уникальную фигуру Давайте ещё мы наверное посмотрим один из элементов который Вам впоследствии тоже пригодится И он у нас будет там в уроках у нас м потребуется сейчас изменить форму редактирование формы фигуры для редактирования формы фигуры Нам необходимо выбрать эту самую фигуру и А здесь вот у нас есть такое значение Edit object то есть настройка объекта Да здесь мы нажимаем на неё и у нас появляется вот такая вот разлинованная э зона где А у нас появляются опять же вот эти вот четыре точки по углам да В данном случае и потянув за который вот смотрите у нас происходит изменение как бы редактирование формы То есть у нас форма меняется У нашего объекта таким образом например мы можем и преподнести новую какую-то перспективу для нашей фигуры да Или например с помощью этого элемента мы можем делать какую-то падающую Тень на плоскость от какого-то другого объекта об этом мы тоже будем говорить дальше это у нас тоже будет содержаться в рамках данного мини-курс по фигме также мы можем выбрать какую-либо из линий и за эту линию потянуть у нас происходит вот изменение сразу двух а точек А на этом мы заканчиваем обзор нашего инструмента прямоугольник и переходим к следующему инструменту это инструмент ellips Да кстати чтобы выйти из режима редактирования формы нам нужно нажать на Enter и таким образом вот у нас уже новая фигура появилась либо чтобы нам снова зайти в этот режим редактирования Вы можете не обязательно пользоваться вот этой кнопкой Вы можете просто ещё раз нажать Enter и Вы снова зайдёте в режим редактирования формы и также можно выйти как я говорил ранее что в фигме есть очень много разных вариантов сделать одно и тоже разными способами Вы можете нажать на синюю кнопку да и таким образом у вас закончится редактирование этой формы Так а теперь мы приступим к следующему инструменту этот инструмент называется с помощью эллипса мы можем рисовать различные овалы круги чтобы найти эллипс нам нужно вызвать Вот это выпадающее меню здесь Да где у нас различные фигуры представлены и выбрать вот этот вот элемент Также вы можете его вызвать через горячую клавишу которая Очень напоминает собственно говоря ЭПС Точно также мы рисуем вы здесь уже видите и понимаете Здесь всё Аналогично нашему прямоугольнику если мы заж Shift то наш эллипс возьмёт себя в руки и станет кругом и у него будет соответственно ровные стороны дальше А мы можем посмотреть всё то же самое что можно производить с этим эллипсом через выделение его сделаем когда мы его делаем активным и здесь у нас появляется точно так же позиционирование точно также у нас появляется ширина высота здесь в данном случае она у нас равна потому что это Круг и здесь у нас угол поворота 0° да В данном случае конечно он у нас не имеет значения потому что если мы будем его вращать то мы никакой разницы не заметим но в некоторых других случаях мы безусловно заметим например он у нас у нас может быть залит каким-то цветом или градиентом Когда у нас будет отличаться Да этот фигура эта фигура либо перейдём вот сейчас к следующим а манипуляция над этим над этой фигурой и увидим что ещё можно сделать А смотрите если мы приблизит то у нас здесь вот появляется одна такая точка Арк если мы потянем за неё то у нас получается вот такое раскрытие как у круговой диаграммы да Или как у пакмана если кто-то помнит такого персонажа здесь мы можем вот так вот его делать и таким образом получать вот буквально совершенно разные фигуры и у нас появляется ещё очень интересная штуковина ещё дополнительные две точки Давайте разбираться что эти точки умеют Давайте Сначала с самым простым разберёмся Вот это Старт - это так скажем Откуда начинается что ли Да вот у нас угол поворота условно говоря но при этом у нас не меняется значение угла поворота заметьте Да вот здесь вот сейчас если мы его повракула вот это вот значение на 1244 это как раз отвечает за внутренний разворот внутри Да вот нашей фигуры А дальше у нас появилось ещё значение Вот это в радио которой мы сейчас с вами поэкспериментировать очень интересных разных фигур которые по сути ограничены только нашей фантазией дальше мы можем сделать с ними например следующее действие а так как у нас уже эта фигура не напоминает Круг и у неё появились углы то у нас и здесь появляется вот это вот активное поле с углами А мы можем здесь поставить значение например 30 пикселей скругления и вы видите Да у нас происходит Вот такой вот а скругление по этим именно в этих углах где у нас раньше были Ну почти прямые углы если мы ещё больше сделаем например 90 пикселей то у нас получается вот такая симпатичная буква с которую мы можем уже для каких-то целей даже применять в том числе в инфографике Вот в общем вы можете самостоятельно поэкспериментировать по нажимать различные значения побить покрутить и возможно у вас получится ещё какая-то интересная фигура которую я вам не показал вот дальше у нас будет следующий инструмент инструмент многоугольник так друзья сейчас у нас на очереди многоугольник и мы за ним пойдём в то же место в наш инструментарий снова выпадающее меню и здесь вот у нас есть такая фигура полигон это как раз таки означает многоугольник но так как это сае так скажем лья фигура из многоугольника это треугольник поэтому по умолчанию мы будем всегда рисовать треугольник Мы точно так же как и с кругом с эллипсом и с прямоугольником мы можем его рисовать вот таким образом либо с шифтом мне всегда больше нравится что-то более правильное поэтому я нарисую его вот таким он у нас будет равносторонним да то есть мы здесь можем менять ему различные стороны и тогда он у нас он будет равнобедренным вернём в исходное положение Я всё-таки вот люблю вот совсем идеально вот так чтобы было и дальше мы посмотрим что можно с ним делать точно также нажимаем и смотрим какие у нас есть параметры XY Понятно ширина высота тоже понятно здесь у нас поворот да то есть мы можем изменять Мы уже помним что изменять поворот угол можно и таким способом более удобно здесь у нас также есть скругление углов здесь мы можем прописать 30 пикселе самое что у нас было до этого Да у нас в прямоугольнике Мы точно также это всё можем менять через вот такие значения через вот такие кругляшки а такой вот дорожный знак форма дорожного знака у нас уже получилась Давайте вернём снова в исходное положение и вот здесь у нас появляется новое да что-то новое coun - это получается количество углов которое у нас присутствует в этом многоугольнике Например если мы сделаем Здесь пять нажмём enter то у нас будет пятиугольник соответственно здесь мы можем сделать 20 и он у нас будет вот таким Мы помним из уроков геометрии чем у нас больше углов в многоугольнике правильной формы тем ближе он будет по форме к кругу соответственно чем здесь у нас будет больше 50 если мы сможем сюда значение поставить да то мы практически даже может не отличим его от Круга Давайте снова вернём его в положение трёх углов и посмотрим какие у нас ещ есть вспомогательные инструменты внутри этого многоугольника радиус мы уже с вами разобрали и здесь вот у нас одна точка Да в отличие вот от этой здесь у нас как раз-таки и получается вот контроль количества вот этого вот этих углов здесь мы можем их задавать через непосредственно влияние вот нашего курсора в принципе достаточно про уже значительно быстрее идём Да потому что знаем базовые вещи исходя из того что мы прошли ранее а следующий инструмент который мы разберём это будет инструмент звезда Итак следующий инструмент у нас будет инструмент звезда а чтобы вызвать его У нас есть только один путь и это путь через выпадающее меню потому что как и у многоугольника У звезды нет горячей клавиши но это не страшно потому что мы не так часто пользуемся этими значит формами выбираем звезду И точно также по аналогии мы создаём её я опять же создаю с шифтом для того чтобы она у меня была ровненько вот а у нас по умолчанию опять же возникает звезда пятиконечная которая нам знакома с детства И здесь у нас в принципе ничего такого нового по отношению к предыдущим фигурам Наверное нет Ну разве что у нас есть не некоторые значения вот конкретно Вот это значение которое мы сейчас с вами посмотрим За что отвечает А давайте мы можем в принципе сразу перейти к экспериментом вот с этими точками потому что здесь у нас достаточно всё понятно И мы понимаем что они будут изменяться если мы будем изменять это всё здесь и скорее всего вы всё-таки будете пользоваться А По моим ощущениям вот этими точками потому что я тоже так делаю А смотрите по с верхней Да точки Если начнём то здесь у нас получается скругление углов мы можем до таких значений у нас благодаря скругления углов получается значительное Изменение формы Так скажем Возможно мы будем получать различные шестерёнки там какие-то фигуры А кому как удобно будет да давайте сейчас вот перейдём вот к этому аккаунт Вы помните Да что это будет у нас отвечать за количество а углов в нашей звезде А в Звезде мы можем делать до 0 от трёх до 6 углов а соответственно у нас практически всё то же самое что и в многоугольнике только единственное у нас появляется вот это вот ещё значение Да которое отвечает за впадины так скажем граней Поэтому его мы можем сейчас вот тоже по двигать и посмотреть Как меняется вот у нас тут такой вот бдж такой формы да получается Особенно если мы ещё как-то его скругление сделаем ему Вполне себе хорошая приличная плашка которую можно где-то использовать а также мы можем и изменять вот такую вот такую даже форму делать абсолютно необычная Да при этом у нас практически все точки соединились внутри А если мы к стандартной форме приведём и потянем вот здесь вот за эту точку то у нас получается вот такой морской ёж особенно если мы ему дадим побольше значений вот максимум 60 Да помните как я говорил и минимум три вот такой значок этой фигуре Мы тоже ВС разобрали Вы можете её использовать экспериментировать бывает интересные элементы так скажем эффекты даёт для наших работ Итак сейчас мы поработаем с линиями и с со стрелочками как их рисовать и как их вызывать Давайте посмотрим заключительных так скажем инструментах которые у нас находятся вот здесь вот Tool То есть это менты формы различных форм здесь у нас есть линия отдельно и у неё есть горячая клавиша L и есть стрелочка Arrow У нас тоже есть комбинация горячих клавиш Shift п L Давайте просто вызовем линию через этот инструмент и дальше у нас привычный крестик получается и также мы ведём и получаем линию да то есть у нас есть стартовое значение и финальное значение пикселя где у нас постави эта линия для того чтобы у нас линия была ровная потому что мы чаще всего будем скорее всего рисовать линии прямоуголь ну точнее горизонтальные или вертикальные соответственно нам нужно использовать это всё дело с шифтом здесь в отличие от поворота у нас здесь шаг 45° а не 15 как это было в инструменте например прямоугольника А вот Давайте линию мы эту Нарисуем дальше мы можем её выбрать Да СПО зонировать в нужную точку и также мы можем изменять вот любое вот это вот значения изменения размера и так далее Всё по стандарту А здесь мы снова поставим по центру фрейма и посмотрим какие у нас есть ещё возможности Как вы видите здесь у нас практически нет никаких возможностей манипуляции с линией Зато у нас появляется активное вот это вот значение строк То есть это линия сама по себе Да как бы строк у нас может быть как обводка например на прямоугольнике там или на эллипсе или на чём угодно и здесь у нас эта строка это в принципе она за саму непосредственно линию с которой мы и работаем а здесь мы можем выбрать цвет дальше Мы ещё поговорим но вы уже в принципе понимаете как это делать здесь мы можем выбрать толщину Давайте попробуем поэкспериментировать с толщиной А в пикселях например возьмём 5 пикселей и вы видите что наша линия стала такой более заметной жирной и здесь мы можем ещё увеличить её например до значения там 20 пикселей Но это прямо редко когда уже встречается Если вы хотите ещё что-то сделать больше Ну например 100 пикселей она уже больше похожа на прямоугольник Да но при этом мы посмотрим что у неё нет высоты то есть вот второе значение у неё всегда будет ноль у линии Потому что она по сути как бы м вот это вот толщина она не влияет на саму линию и здесь у нас будет располагаться Ну выглядеть она визуально будет Вот именно таким образом А так дальше что мы можем сделать Давайте в какой-то более адекватный значение её переведём 20 пикселей например чтобы было заметно и в то же время не сильно уж напоминало прямоугольник А здесь мы можем ещё выбрать два значения интересные которые Start Point это то как она начинается А с какого С какой формы Да так скажем наконечники А вот это у нас есть как Стрелка как Стрелка другой формы такой правильный треугольный как Стрелка либо вовнутрь либо она Стартовая Стрелка такая чаще всего бывает как обычный поит Ну то есть это какая-то точка да либо Как как он называется квадрат в общем также мы можем изменить значение например мы можем сделать его со скругления либо Квадратное как у нас по умолчанию стоит Вот видите Да со скругления у нас такая вот интересная штуковина получается давайте сделаем стрелочку и выберем вот это вот значение она мне НВИ так чисто визуально а второе значение мы здесь можем например скругление просто сделать И вот у нас такая симпатичная Стрелка которая в принципе мы можем использовать в наших дизайнах и скорее всего вы будете использовать их в слайдах с размерами потому что в карточках товаров мы Одним из главных параметров любого товара физического является его размер Поэтому соответственно мы будем использовать эти инструменты чаще всего на этих слайдах вот в принципе с линией мы разобрались Давайте посмотрим что мы можем сделать с со стрелкой на самом деле Стрелка очень интересный инструмент потому что это по сути та же линия которую мы получили вот таким вот образом то есть здесь все те же самые манипуляции которую вы можете произвести с линией поэтому здесь прямо особого какого-то особой разницы Я бы не стал выделять Вы можете это делать ну то есть просто вызывать линию чуть побыстрее чем если бы вы рисовали её точнее вы можете вызывать стрелку чуть побыстрее чем если бы вы её делали через линию всё на этом мы заканчиваем а разбор инструментов и дальше мы переходим к работе с группами объектов Итак сейчас мы поработаем с группами объектов для этого давайте воспользуемся квадратами прямоугольниками для этого мы можем вызвать их через горячую клавишу R и нарисовать я с шифтом веду и рисую квадрат А чтобы получилась группа Мне нужно как минимум два объекта я буду делать их побольше чтобы у нас эксперимент был такой более разнообразный смотрите чтобы скопировать я могу конечно нарисовать новый Да но вы помните как мы уже обсуждали раньше мы можем просто это сделать через Ctrl C Ctrl V У нас как будто бы ничего не произошло но у нас здесь появился новый слой в нашем значит в нашей панели слоёв и здесь мы Как раз-таки видим вот наш второй квадрат но мне проще пользоваться через копированием через Alt как я опять же говорил я могу сделать Alt и зажать Shift для того чтобы у меня получилась ровная копия того что здесь представлено аналогичным образом я могу сделать и здесь я хочу но можно копировать не один объект а сразу несколько Давайте сразу сделаем три объекта выделим заж Alt либо Option и с шифтом потянем вниз вот таким образом у нас получилось ше объектов вот чтобы создать группу этих объектов Мне необходимо сначала выделить все эти объекты которые попадут в группу дальше либо Ягу действовать клавишу мыши и здесь у меня есть значение Group selection вот это вот оно и отвечает за эту же команду комбинация горячих клавиш Либо вы если работаете на iOS то у вас получается Command G либо Ctrl G Если вы работаете на Windows нажимаем это значение и у нас получилась группа заметили что здесь пропало Да у нас количество слоёв которые здесь были видны но они на самом деле у нас просто в скрылись под вот этой группой если мы нажмём на треугольник то у нас произойдёт вот это вот выпадающее меню всё Что содержится в этой группе мы можем увидеть здесь то есть каждый объект по сути он присутствует отдельно но мы его можем перемещать через группу Да что мы можем делать да с группой например вот группу Мы можем двигать совместно и она а у нас соответственно будет пере перемещаться мы можем её приколоть замочек закрыть и тогда у нас все элементы этой группы будут недоступны к манипуляциям мы можем также скрыть группу и то же самое произойдёт что и со скрытия любого объектам то есть по сути все команды которые мы применяли к одному бы предмету мы можем применять сразу к группе и они будут равнозначно влиять на каждого участника этой группы А давайте сейчас разберёмся как разгруппировать Да вот Мы создали группу Command G либо Ctrl G и чтобы привести обратное значение нам нужно разгруппировать например Мы точно также можем через через правую клавишу Group selection и у нас а получается вот oup вот эта вот команда Да Shift ой ко у нас получается и здесь у нас команда Command Backspace но Либо вы можете воспользоваться командой которая очень похожа на предыдущую То есть если мы раньше нажимали Ctrl G то сейчас мы нажимаем Ctrl Shift G Давайте посмотрим Shift G и вс У нас группа пропала и теперь Каждый элемент в ней по отдельности Вот давайте кстати вернёмся ещё снова в группу я для этого Z нажимаю Ctrl Z и у нас получается группа сейчас не получается у нас группа сейчас я сделаю это через горячую клави ctr G вот ус груп какой-то один объект в этой группе да и какую-то манипуляцию с ним произвести то Для этого нам нужно будет кликнуть на этом объекте дважды вот когда мы два раза кликаем и у нас получается выделение конкретно этого объекта тогда мы будем работать именно с ним например мы можем там его а изменить ему цвет Да и сделать его каким-то другим цветом для дальнейших наших экспериментов вот а дальше давайте сейчас разгруппировать при этом даже если она не находится в группе А мы тут то такая вот интересная казуистика получается потому что А сейчас я провожу разгруппировать А что ещё мы можем сделать с группой Да по сути вот когда мы вот объединяем то есть это уже группа объектов Да она у нас не сгруппированы в слоях Но мы уже можем какие-то манипуляции производить с этой группой даже двигать все вместе мы их можем и даже цветом менять все вместе можем и много чего ещё размер в том числе но они при этом не будут являться как бы группой именно в слоях Давайте посмотрим какие у нас ещё есть возможности с выделением нескольких объектов Вы наверняка заметили что у нас появляются вот такие вот непривычные розовые линии и розовые кружочки Давайте посмотрим за что они отвечают если мы чуть-чуть приблизит например эти вот эта вот линия Да если мы её и мы можем подвигать её и посмотреть что происходит у нас получается как бы идёт а изменение вот этого расстояния Да между объектами то есть мы можем сделать его как большим так и даже наложением стопроцентным вот дальше что мы ещё можем сделать мы можем подвигать например вот эти линии и Здесь интереснее ещё происходит потому что эти линии будут одновременно двигаться вместе то есть вот на этих двух промежутках Таким образом мы можем экономить кучу времени Если вы работали например раньше в Фотошопе то там такой функции нет И вы ну просто будете очень много времени вот на эту всю вот раскладок тратить А здесь это всё происходит быстро Почему я говорю что фигме работает намного быстрее и собирать карточки Там намного быстрее так а далее что мы ещё можем сделать а вот мы разобрались с линиями да Давайте теперь разберёмся с кружочками а кружочки по сути отвечает у нас за то чтобы какие-то элементы заменить то есть местами поменять Например я хочу вот этот вот синий поменять с вот этим вот серым для этого я просто нажимаю и зажимаю левой клавишей мыши и несу его в это место видите Да он взял просто и передвинул я могу дальше продолжить и он дальше передвинь Вот этот заменит то есть Таким образом мы можем производить рокировку наших объектов внутри группы или просто группы объектов выделенных дальше мы например с помою каких-то там действий Может быть там рисовали как-то так да и что-то у нас пошло не так мы понимаем что у нас сбилось да то есть вот картинка то есть у нас вот где-то всё всё пошло как-то не так ну то есть вот они у нас не ровненько относительно друг друга стоят давайте сейчас попробуем Вот именно поработать вот с этими тремя объектами А смотрите когда мы их выделяем то и они у нас не стоят на ровных расстояниях то у нас получается в вот этой области выделения выделения с правой нижней в правом нижнем углу всегда Да вот такой вот как бы перевёрнутый Бургер да Ну это как бы в UI дизайне называется бургером по сути это как бы ну три палочки здесь Пускай это будет так да а это будет означать что если вы на них нажмёте то у вас произойдёт выравнивание в данном случае по вертикали но Обратите внимание что выравнивание у нас происходит вот относительно только этого объекта Да было бы у нас там четыре объекта все то выравниваю бы второй и третий то есть у нас как бы есть границ вот эта вот да она твёрдая которая задаётся нашим синим квадратом и у нас есть другая граница относительно вот этих вот именно вертикалей да то есть которая задаётся серым квадратом А вот этот серый между ними Да он получается и не там и не там но его надо выровнять относительно других поэтому именно он двигается вот это как бы важно понять и как мы понимаем что он выровнен когда мы выделяем у нас здесь ничего не происходит Да вот этого вго бургера нет трёх палочек но зато у нас появляются вот эти розовые линии которые означают что расстояния здесь равны вот с этим всё но у нас есть ещё более широкий функционал по вот этим вот выравнивания если мы зайдём например давайте выберем сейчас два объекта и посмотрим вот здесь вот на вот эти вот клавиши которые мы давно приметили Но пока ещ с ними ничего не производили Давайте посмотрим пожимает что будет происходить обращаю Ваше внимание сразу на то да что вот у нас есть вот эта вот граница в рамках которой У нас сейчас будет происходить движение если мы нажмём вот на эту линию ой точнее на эту кнопку то у нас получается что всё должно прибить к левому краю Давайте посмотрим сейчас серый переместиться влево это произошло теперь нажимаем Ctrl Z отменяем действия у нас снова выделение двух объектов дальше мы нажимаем по центру то есть относительно вот этого же вот этого области предыдущего выделения Да у нас здесь оказался центр и у нас оба квадрата приехали сюда тоже самое как в первом случае у нас было сейчас по правому краю только синий будет двигаться Да а далее Мы тоже Ctrl Z нажимаем дальше Мы производим то же действие но только по верхней границе уже Ctrl Z дальше по центру тоже самое Да только у нас центр уже этой области определялся относительно горизонтали поэтому он здесь и тоже самое у нас происходит вот Нижний спускается относительно нижней границы нашего нашей группы объектов но здесь есть ещё интересные штуки которые мы сейчас с Вами рассмотрим Давайте теперь вот перейдём к ним вот пускай у нас будет сейчас три и они будут Вот как-то вот как-то вот так вот тоже хаотично стоять а здесь мы можем ещё открыть вот такое вот меню здесь у нас есть три функции которые мы можем применить первая функция мы уже её пробовали Да если мы её нажмём то у нас Центральный квадрат передвинь в середину А дальше нажимаем Ctrl Z если мы нажмём вот на эту клавишу то у нас получится а вот эта вся вот эти все три объекта относительно вертикали Да вот сейчас выровняется то есть этот задаёт твёрдую границу сверху этот задаёт твёрдую границу снизу А этот собственно говоря теле пает между ними и здесь вот ровно в середину он встаёт А давайте снова Ctrl Z и а аналогичное действие мы произведём вот с этим объектом То есть он сейчас у нас встал по центру А давайте ещё интереснее сделаем возьмём вот у нас вот шесть объектов это прямо вот супер магия прямо вот когда мы берём шесть объектов например и А здесь у нас появляется ещё новая кнопка А мы можем посмотреть на неё и здесь у нас получается вот такие вот девять точек нажимаем на неё и у нас выстраивание сразу происходит по плитке А дальше у нас появляются вот розовые линии которые нам подсказывают что всё О'кей ваши объекты выровнены ровненько Вы можете их соответственно А уже подгонять как вам нужно Кстати как вам нужно например да вы хотите чтобы 100 пикселей было или просто равное расстояние между вот в вертикальных вот этих вот пространствах и в горизонтальном пространстве тоже А когда мы выделяем несколько объектов то и они выровнены у нас да то у нас появляется вот здесь два значения 149 в частности и 134 пикселя давайте сделаем например по 100 пикселей это как вы понимаете вертикальные Да пространство сейчас будет меняться и здесь вот будет у нас сейчас тоже 100 пикселей это горизонтальный и таким образом у нас получилась такая ровненько позиция Плиточная где у нас все вот эти вот пространства выровнены и они составляют 100 пикселей ле каждая вот в принципе я думаю что с группами объектов мы хорошенько поработали Я думаю что вам стало намного понятнее если вы раньше с ними не работали и дальше мы перейдём к работе с цветом которым мы уже неоднократно косвенно касались Ну чуть-чуть у нас была уже такая работа но сейчас мы более подробно её разберём Итак Друзья нам сейчас пришло время раскрасить наши Серые будни фигмы и сейчас мы будем работать с цветами Для этого нам необходим какой-то из объектов Я предлагаю взять стандартный прямоугольник и нарисовать квадрат давайте сделаем вот так и потом перейдём в значения которые отвечают за раскрашивание за цвет это в частности два значения Где мы можем придавать различные цвета это либо Фил заполнение либо это строк сначала разберёмся с первым с филом а второе строк оставим на потом и посмотрим как их можно будет комбинировать так смотрите у нас если мы сразу посмотрим в значение F то мы увидим здесь квадрат наш это то есть образец нашего цвета дальше код этого цвета вообще есть как бы различные кодировки цветов но вот эта кодировка хкс называется и в этой кодировке практически Ну она более популярная так скажем Да в обыватель так скажем в они больше для профессиональных каких-то отдельных отраслевых историй А вот хкс он больше так для всех в графических редакторах Вы практически всегда увидите вот эту шестизначных она уникальная дальше у нас идёт 100% это у нас уровень заполняемости да то есть видимости данной заливки потому что она отвечает именно за заливку а потом у нас идёт глазик это мы знаем уже Что такое Это у нас получается видимость вообще в принципе потому что мы например можем в этом объекте а убрать заливку через глазик но при этом у нас останется линия строк и тогда у нас получится обрамление Да такое вот как такая рамка получится Вот это тоже возможно и здесь у нас есть минус это мы можем удалить этот эффект То есть у нас по сути так как у нас сейчас в данном квадрате нет ничего кроме этой заливки то у нас он по сути а пропадёт но останется слой с этим мы сейчас пока экспериментировать не будем и также через плюсик и через вот эти четыре точки можно делать добавлять новые А цвета или новые формы Так скажем цветовой заливки туда да А через эти четыре точки можно использовать сохранённые стили которые у вас есть Например в вашем дизайн файле Но об этом э уже Немного попозже сейчас мы будем работать с простыми базовыми инструментами и Давайте откроем наше а вроде бы как уже привычное Мы уже несколько раз сюда заглядывали а вот это вот поле да где у нас есть как раз-таки цветовой квадрат А в цветовом квадрате в зависимости от того куда мы двинем нашу точку А у нас поменяется а цвет на нашем квадрате и также у нас меняется сразу уникальный вот этот код кодировки КС А давайте поставим его например вот таким розовым дальше у нас есть ещё вот такая шкала цветовая Где мы можем попутешествовать и различные другие цвета применить И точно также здесь в этом цветовом квадрате выбрать нужный нам оттенок а пускай будет у нас может быть Вот такой вот цвет а дальше у нас есть инструмент вот этот шкала прозрачности она отвечает Именно за то что и вот это значение Да и вы обращаете внимание что когда мы двигаем этот бегунок то у нас и здесь прозрачность меняется и здесь прозрачность меняется Это всё об одном и том же по сути это просто дублирование А дальше у нас вот как раз-таки та самая кодировка КС Ну я вам больше тут даже наверное Не рекомендую вот сюда заходить э сбивать эти настройки Потому что если у вас там CSS какой-нибудь встанет вы будете путаться и не понимать почему это так происходит Почему у вас написан цвет совсем другой а далее У нас опять же идёт его непрозрачность То есть 100% - это непрозрачность если там идёт э 10% то есть это 10% непрозрачности на 90% он будет прозрачным вот а и очень крутой инструмент который называется пипетка пипетка - это давайте Вот её например выберем но у нас сейчас нет а варианта куда мы её можем применить давайте сделаем а какой-нибудь маленький квадратик и здесь вот расположи какой-то другой цвет например будет Вот такой синий А смотрите если мы заходим в наш редактирование цвета нашего а квадрата вот этого розового опять же сюда переходим и воспользовавшись инструментом пипетки мы можем сделать окрасить его в такой цвет который у нас а есть на каком-то из образце из образцов странно вообще из ко веркола слова смотрите у нас в правом верхнем углу получается вот такой Круг Где у нас как раз-таки появляется пиксельная сетка А в зависимости от того где у нас располагается курсор этот цвет меняется да то есть Вот видите там и кодировка внизу FF все это значит полностью белый или вот это такой серый F5 F5 F5 это это цвет нашего фона рабочего пространства и если мы наведём пипетку вот на эту область то у нас получается Такой цвет если мы сейчас вот прямо ККМ левой клавишей то у нас цвет преобразуется Да станет Именно таким каким он здесь был на нашем дорном образце А дальше если мы пройдёмся ниже да то у нас получается вот здесь ещё такая вот область которая отвечает за цвета которые находятся в вашем дизайн файле если у вас большой дизайн файл и там много макетов Вы помните Да что такое дизайн файл это вот это всё огромное пространство это всё ваш дизайн файл А и точнее даже вот у вас страница да это только будет страница вот и он он здесь будет именно на эту страницу отталкиваться от неё То есть все те цвета которые здесь содержатся А давайте разберём вот белый цвет - это цвет нашего фона фрейма потом розовый цвет сейчас Я немножко попозже его объясню а серый цвет это Рабочая плоскость пространство вот здесь вот да синий цвет - это тот цвет который присутствует здесь а розовый цвет на самом деле он ещё не поменялся потому что мы не применили Вот здесь Да если мы вот закроем здесь вот это окно тогда у нас применит этот свет и он станет вот этот синий но сейчас по факту фигма-обзор показывает розовым это удобно когда вы знаете например делаете какие-то элементы в карточке товара и у вас все плашки например одного цвета и чтобы не выискивать именно тот оттенок например жёлтого цвета вы можете посмотреть здесь Ага вот он жёлтый тот самый который мне нужно пипеткой его там не где-то не забирать вы просто зайдёте в эту библиотеку цветов и выберите его и у вас всё будет как бы О'кей вот также Поэтому да он ещё вот сейчас у нас розовый потому что только не применён А дальше что ещё мы можем сделать с этим А я так скажем разберу наиболее частые инструменты которые мы будем пользоваться вот сверху здесь у нас есть способ заливки То есть это есть сплошная заливка в данном случае мы работаем в ней да поэтому у нас она выделена далее У нас есть градиентная заливка То есть если мы её выберем то у нас появляется вот такой Градиент Градиент - это переход от одного цвета в другой цвет а есть сейчас мы с градиентом ещё отдельно по поговорим там разберёмся есть у нас также идж То есть это картинка изображение то есть мы сюда можем в это пространство загрузить какое-то изображение обычным перетаскиванием например этого изображения в эту область Да там из вашей папки сюда и здесь есть видео видео нам не понадобится Значит мы не будем им сейчас в данном случае использовать его давайте сейчас пройдём по градиенту и разберёмся с этим инструментом инструмент очень важный его очень часто используют градиентные заливки - это прямо мастхэв в дизайне поэтому надо разобраться как они работают эти заливки А смотрите у нас есть вот эта шкала которая автоматически появилась Да у нас был один цвет вот этот а второй цвет там фигма-обзор вам не нравится Вы хотели бы здесь какой-нибудь там зелёный Да посмотреть цвет второй в точке для этого вы выбираете вот этот вот квадрат который отвечает именно за этот цвет а далее У нас есть к нему настройки вот у нас подсветить линия Да такая А эта строчка подсветить у нас здесь есть 100% непрозрачности градиентной а здесь у нас сам цвет мы можем зайти в него ещё раз провалившись да как бы уже в во второй порядок цветовой можно так сказать а И здесь мы выбираем зелёный Да какой-то зелёный и потом вот выбираем Ну например вот какой-то вот такой более спокойный а цвет всё здесь у нас точно такие же настройки которые мы видели предыдущем разборе и у нас здесь всё как бы понятно а далее что мы можем ещё сделать с этим градиентом у нас есть различные формы градиентов есть линейный есть радиальный есть угловой и есть в виде ромба Ну или как здесь он называется Алмазный мы о них тоже немножко попозже поговорим я на конкретных примерах приведу вам Ну то есть покажу как они выглядят Все пока мы с самым простым самым часто употребляемый так скажем линейным градиентом поработаем А здесь у нас появились вот такие вот кнопки а управлени направлением управление направлением так говорится Надеюсь а этого градиента То есть если мы нажмём на неё то мы понимаем что у нас сдвинется Градиент на 90° Да как бы вот был он такой сейчас он такой и также несколько раз мы можем сделать И у нас получится вот смена Да Нам надо сразу например поменять синий с зелёным то вы просто нажимаете вот на эту кнопку и у вас происходит как бы отражение этих точек на градиенте что можно ещё сделать с этим линейным градиентом Давайте разберёмся А смотрите у нас есть вот эта вот линия Да которая в принципе дублирует вот эту линию Казалось бы да Но зачем она тогда здесь нужна у неё другая функция она направление градиента задаёт то есть мы можем взять Вот эту точку это будет тот же цвет всё то же самое Да но мы теперь можем отодвигать его и смотреть направление градиента менять то есть мы можем его сделать по диагонали можем сделать по какому-то своему авторскому там я не знаю стилю э предусмотреть какой-то свой вариант можем сделать на вот так вот при приблизив его и тогда практически у нас исчезнет полностью зелёный цвет То есть тут тут вариантов очень много как с этим можно экспериментировать и это даже можно выносить за пределы нашего фигуры То есть у нас как бы будет один цвет растягиваться ещё сильнее и он такой будет более а интересный что ли Градиент Я не знаю вот когда он знаете не не очень очевидный этот Градиент мне больше нравится например в большинстве случаев за все сейчас сказать не смогу А вот что ещё мы можем сделать очень интересная вещь тут мы например вот с этой шкалой можем работать в принципе как и с этой но например у нас есть зелёный а нам надо добавить ещё между ними жёлтый цвет для этого мы берём выделяем вот этот квадрат и С альтом Это самый простой вариант просто с альтом мы перетаскивая вот этот квадратик видите он у нас он у нас выделился здесь Да здесь мы берём например какой-нибудь вот чтобы сильнее отличался он Ну давайте вот такой вот красный пускай будет и здесь у нас получилось вот такое сочетание цветов они переходят от одного в другой и потом ещё и таких градиентов Вы можете делать здесь сколько угодно здесь этих точек Вы можете ставить просто до умопомрачения потому что ваша Только фантазия ограничивает количество этих точек количество направлений этого градиента и его цвет всё что угодно Вы можете делать самостоятельно и даже даже вот как я вот сейчас сделал случайно Да но по факту Вы тоже можете добавлять эту точку абсолютно рандомно просто кликнув левой клавишей мыши в любую точку и она у вас рисует при этом рисует она у вас нечто среднее Да между вот этими двумя точками то есть гма тоже в автоматическом режиме это всё подстраивает под вас всё когда мы сохраняем вот у нас у на вот этот квадрат Стал вот такого цвета Давайте его удалим и вот этот квадрат Мы тоже удалим сейчас мы разберёмся с различными способами да то есть градиентной заливки У нас есть там ещё три способа которые мы не разобрали Давайте вот их сейчас как раз и разберём например Мы заходим входим мы переходим в настройку градиентов и здесь делаем радиальный То есть он будет у нас по кругу А вот у нас получился такой по умолчанию да сразу Градиент мы здесь можем что-то изменить Ну то есть какой-то цвет ему дать Ну то есть вы в принципе понимаете что уже произошло Да вы видите что здесь у нас а есть радиус и То есть если раньше мы по по прямой по линейному градиенту Да вот изменяли цвет то сейчас мы изменяем его как бы по радиусу У нас есть одна точка которая идёт центром окружности и всё остальное идёт в удаление и в зависимости от удаления от этой точки мы получаем различные цвета А давайте здесь вот серый конечно не очень хорошо смотрится Ну вот пускай будет хотя бы вот жёлтый вот а вот так да можем сделать Мы точно также здесь можем добавлять новые цвета всё что угодно и перемещать эту линию мы тоже можем при этом здесь у нас намного интереснее всё происходит Да потому что мы можем её задвинуть вот сюда и здесь у нас дальше Градиент Пойдёт то есть у нас с одного угла только пойдёт такое свечение солнечное тоже прикольно так всё закрываем это переходим к следующему квадрату и будем смотреть второй вариант а третий уже получается градиентом вот это у нас получается угловой Градиент и он у нас выглядит таким образом благодаря этому градиенту мы в принципе получили сразу какую-то объёмную фигурку Да и здесь мы тоже можем его менять с помощью опять же этих линий и здесь у нас есть ещё вспомогательные точки которые мы можем тоже в разные стороны по а покрутить Да и и мы получим а значение то есть здесь мы например а увеличиваем или уменьшаем этот Градиент и поворачиваем заодно его а здесь у нас есть э Центральная точка которая у нас опять же отвечает как и в а вот этом радиальном градиенте за расположение его а здесь есть у нас ещё вот эта точка которая отвечает за так скажем перспективу этого градиента да что ли потому что здесь как будто бы у нас в плоскости лежит а тут как будто бы вот так вот мы наклоняемся картинка строится тоже самое мы с цветами здесь можем делать что угодно любые эксперименты и добавлять какие-то новые цвета для этого да просто вот кликаем например сюда и здесь добавляем ещё какой-нибудь жёлтый цвет ну так вот Я не претендую сейчас на красоту это просто для того чтобы показать какие есть возможности А дальше мы переходим ещё в Градиент который называется Diamond а бриллиант мы здесь мы можем вот такую вот фигуру ромбик получить Да и здесь мы собственно говоря то же самое мы можем делать как и ранее А и дальше мы здесь можем ещё расположение позиционирование его а менять так например выбираем Когда в настройку заходим Да позиционирование в зависимости от размера будет Да она у нас такая вот маленькая звёздочка получается и опять же его как бы перспектива То есть как будто бы она там лежит либо она там стоит И так далее Вот такой вот у нас получился Блик который в принципе Вы можете использовать в дальнейшем в карточке товара на при нанесении на корректирующих слоях так скажем нашего объекта товара чтобы он выглядел более ите Давайте посмотрим ещ очень важную функцию сейчас Мы удалим вот эти два квадрата например и здесь делаем Круг эллипс да Для этого мы вызываем через горячую клавишу с шифтом мы несём его вот сюда Делаем его по размерам примерно как этот вот буквально у нас фиг сейчас всё подскажет и вот например смотрите у нас есть настроенный цвет вот залив и теперь нам необходимо такую же заливку сделать на вот этот предмет Ну тут как бы помните мы там сложно Да как-то его выравнивать сюда относили там Если ещё один цвет будет то это ещё сложнее всё будет происходить а как это сделать в два клика берёте выделяйте вот этот объект вот выделяйте вот это вот Фил тут внимание очень большое прошу обра обратить внимание именно вот в эту вот вот в эту вот небольшую область вам надо попасть речкой вот между границей и между вот этим вот вот этой вот границей Да вот здесь вот вот сюда вот вы попадаете вы выделяется как бы всю строчку относительно а именно цвета дальше вы нажимаете Ctrl C и у вас как бы эта настройка сохранилась в буфер обмена дальше Вы переходите в Новый объект и нажимаете Ctrl V и эта настройка применила к этому новому объекту То есть у нас сейчас абсолютно одинаковые настройки по заполнению что в этом объекте что в этом объекте Обратите внимание кстати вот если мы Клик сюда да то Л У нас здесь будет одна строчка а если мы Клик сюда то л у нас будет две строчки И это тоже как бы есть определённые А так скажем возможности даёт да то есть у нас как бы получается эффект наложения определённый например мы нижний слой вот этот серый Да мы его сейчас не увидим изменение Ну вот он будет у нас каким-то таким вот зелёным а чтобы убедиться что это произошло мы можем вскрыть верхний слой который у нас идёт в наложении и Да действительно у нас один слой не виден а второй слой зелёный и например Здесь Для чего нам нужна вот эта вот штука Как прозрачность Да например мы её можем сделать 50% И у нас получилось наложение цветов и вот такая вот сложная интересная как бы объёмная даже я бы сказал фигура у нас получилась Да как бы как будто бы шар и по факту мы с помощью таких инструментов можем получать неограниченное количество возможностей всего того что мы можем делать в фигме Так что экспериментируйте сделайте что-нибудь по-своему и у вас наверняка тоже получится какой-то свой и уникальный результат дальше мы можем перейти давайте сейчас более простым фигурам перейдём через рекн Да через R мы вызываем значит горячую клавишу например мы сейчас Нарисуем ещё парочку квадратов по центру это всё сделаем вот и например в одном из квадратов у нас будет какой-нибудь цвет какой-то Он унылый жёлтый получился вот такой зелёный пускай будет А смотрите и вот здесь вот например у нас вот этот цвет немножечко немножечко изменился вот буквально Совсем чуть-чуть вы возможно глазом этого и не заметите да то есть но а если вы возьмёте и выделите вот эти вот все объекты то у нас вот здесь получится такая вот новая область selection Colors это то есть э цвета которые находятся в этой группе объединения да то есть вот которые сейчас вот у нас присутствует и мы видим что здесь присутствует три цвета Ну просто потому что здесь Три строчки один зелёный Это очевидно это вот вот это да А вот этот А какой-то из этих уехал то есть нам надо D9 D9 D9 например и чтобы просто взять и скопировать мы можем чтобы придать такой же цвет Да без дополнительных каких-то лишних манипуляций мы берём кодировку этого цвета Ctrl C и переносим на кодировку того цвета который немножко отъехал Ctrl V всё И после этого нажимаем Enter Всё теперь у нас все цвета Вот вот у этих двух они одинаковые видите Да если мы даже выделим только два объекта то у нас будет Фил единый также мы можем у этих объектов менять сразу цвет и у нас получится ну то есть экономим большое количество времени опять же почему я люблю фигму потому что это всё быстро Ну как бы ускоряет всю работу Давайте теперь поработаем с линиями вызываем ЭПС горячая клавиша шифтом я рисую квадра ой квадрат Круг например Ну давайте это попозже немножко сделаем вот возм значит значение нас будет вот какого-нибудь такого цвета и переходим ко второму значению это значение строк которое я в самом начале этой части видео обещал разобрать А смотрите здесь у нас как будто бы ничего не произошло Да но на самом деле там маленькая Тоненькая Лени линия появилась вот эта вот в один пиксель Вот она как раз вот и здесь она у нас и есть а для того чтобы сделать её более заметной и так скажем наш урок более понятным мы здесь увеличим толщину это этой линии например мы сделаем там я не знаю 20 пикселей вот у нас он появился вот такой вот серая такая Ой чёрная кантовка кстати очень важный момент ну как бы не важный прямо очень важный но очень полезный момент если вы хотите изменить какие-то значение в этих полях во всех да то есть в любом абсолютно поле вашего в фигме то вы можете Вот сюда вот навести курсор ничего не произойдёт вроде бы там никакого эффекта не примени к вашему курсору Но если вы зажёвывает янув влево уменьшать значение а потянув вправо увеличивать значение и это во многом очень тоже ускоряет процесс рабочий Давайте вернём снова к двадцати пикселям и здесь применим какие-нибудь цветовые эффекты к нашему А вот этой к нашей обводке здесь абсолютно всё то же самое что Мы работали в филе то есть вот как мы там делали Да вот здесь вот в наложении цвета то же самое Здесь всё происходит абсолютно то есть мы здесь можем Градиент сделать То есть мы здесь можем обводку сделать можем любого вида Градиент сделать может даже изображение туда замон но то есть это всё-всё-всё возможно здесь а здесь например Ну давайте вот пускай вот останется Градиент просто так и А сейчас я бы хотел вам ещё А да Кстати вот важный момент у нас здесь вот ещё есть такая настройка Вот про эти настройки Я не говорю потому что они уже понятны нам Да мы уже как бы знаем про них вот новая настройка например Исай что это такое Исай - это вовнутрь Да а вовнутрь именно Именно касается линии да то есть вот у нас граница нашего объекта Вот она синяя обозначена если мы эту сделаем значит значение не Исай А например асай то соответственно у нас эта линия обводки вывалилась за пределы нашего за пределы нашего границы при этом размер изображения точнее объекта не поменялся он как был 544 пикселя в диаметре так и остался это очень важно потому что визуально то у вас он теперь сталось больше занимать место да если он у нас там вот это по 20 то соответственно с каждой стороны то есть плю 40 это получается 584 пикселя у нас вся вот эта вот картинка Да стала теперь размером в диаметре но мы-то видим только 544 и мы только манипулирую так скажем Работаем только с этими пикселями которые у нас прописаны здесь так что обращайте внимание что может быть у вас настройка вот этой вот линии Да она где-то там а повела себя не так Возможно у вас была такая задумка возможно нет И вы поставили её на аутсайд А я не скажу что я где-то часто чаще использую Инсайт или асай без разницы абсолютно Ну то есть смотрю уже в зависимости от обстоятельств и здесь же ещё есть третья позиция - это центр То есть тут всё понятно да 10 пикселей будет с этой стороны 10 пикселей с этой стороны потому что у нас общая обводка 20 пикселей вот в принципе мы с этим разобрались и я бы сейчас ещё хотел обратить Ваше внимание на инструмент который называется Scale давайте мы здесь побольше сделаем обводку вот где-нибудь такую вот 50 это потом нам пригодится 50 пикселей вот сделаем копию нашего объекта и теперь нам надо сделать больше например да объект увеличить его мы можем просто с режимом Move в котором мы проводим Ну там 99% времени в фигме да то есть мы в режиме mve всегда работаем это горячая клавиша в напоминаю и здесь мы увеличить хотим Да например вот это изображение Окей мы его увеличиваем вот где-нибудь до таких значений а тут даже возможно нам придётся выйти из фрейма чтобы была более показательная история а Обратите внимание что у нас как бы вот Круг увеличился но обводка у него не увеличилась она как была 50 пикселей так и осталась Что делать если мы хотим пропорционально всю эту картинку увеличить так как это векторный объект мы его можем полностью пропорционально увеличивать и без потери качества мы Для этого переходим в режим Scale это горячая клавиша K либо она вот здесь вот находится Да Scale дальше Мы увеличиваем тоже так же шифтом я тяну И до тех же значений что и примерно хотя бы да как и вот этот вот Круг Просто гма здесь в данном случае мне не подсказывает потому что я работаю не в фрейме вот далее мы смотрим обратно в Move переходим горячая клавиша V и тогда у нас появляется Кстати да вот эта вот меню То есть если вы работаете в в режиме Scale то у вас вот так вот выглядит поле и новичок чаще всего пугается потому что он не не видел раньше вот этого вот этой настройки почему она сейчас присутствует здесь да вы просто в другом режиме работаете вам надо перейти в режим M V а вот после того как вы в неё перешли так я тут на на кликал не туда после того как вы перешли в этот режим то вы уже можете Вот сравнить Да вот наша обводка с скей была Вот такая а свом была Вот такая то есть то же самое будет происходить и с вашими шрифтами со шрифтами там вообще будет полная Катавасия потому что вы а шрифты у вас все уедут Если вы будете это всё масштабировать Точнее не масштабировать а изменять размер через режим Move а об этом мы тоже ещё попозже поговорим но здесь у нас стала обводка уже 8,14 пикселя А здесь также осталось 50 пикселей Это говорит о том что с режимом Scale мы масштабируется размер всё на этом всё с цветом мы разобрались далее У нас будут эффекты и эффекты на фигуры и на изображение Итак друзья сейчас мы переходим к разбору эффектов Какие эффекты у нас бывают фигмы в стандартном виде и мы сейчас их продемонстрируем на различных квадратах я сделал заготовку заранее и давайте сейчас приступим всего есть стандартных в стандартной базе четыре эффекта и они находятся все вот в этом вот разделе Effects давайте мы откроем его и посмотрим что здесь предлагается нам видите мы только нажали А у нас уже применил наш первый эффект если мы приблизить здесь тень А здесь на у нас также она прописывается Да Drop Shadow ДП - это значит бросить Shadow тень здесь бросилась у нас Тень под нашим объектом и она ровно в в том по той форме которой У нас есть объект что мы можем здесь сделать во-первых мы можем её скрыть этот эффект эту тень либо удалить совсем здесь мы можем также настройку произвести например нажав на это солнышко и здесь мы получим значит вот такую вот такие данные которые мы можем менять а по иксу и иреку понятно да это у нас будет смещение тени То есть если мы здесь введём значение какие-нибудь Боше чтобы это было более заметно например по иксу 15 то у нас тень сдвинулась вправо по иксу соответственно на 15 пунктов А если мы здесь добавим по игри например те же самые 15 пунктов Ну или 15 пикселей и у нас получится смещение вниз Мы помним Да из геометрии у нас есть ось X и ось Y Вот и по оси X Мы двигаемся горизонтально по оси Y Мы двигаемся вертикально вот дальше что ещё мы можем сделать с этой тенью мы можем её размыть BL - это размытие это тоже частая слова поэтому его можно запомнить вы Если вдруг не знаете английского то скорее всего вы его быстро запомните А здесь мы можем задать параметр размытия То есть например Мы можем поставить 20 пикселей и тогда у нас получается размытие на 20 пикселей вот и оно доходит Вот до дальней границы Да так скажем можем ещё больше сделать и тогда у нас будет размытие ещё больше производиться спред - это у нас если я я не ошибаюсь я потому что практически не пользуюсь этим параметром Да я вообще как бы на самом деле не пользуюсь этим эффектом тени вот здесь Потому что я пользуюсь отдельным плагином О плагинах мы поговорим немножко попозже а это идёт как бы распространение Да относительно нашего объекта то есть да давайте сюда поставим тоже значение какое-нибудь 20 и вот она как бы отдалилась да то есть как будто бы по распространилась Короче больше ещё от той позиции но здесь можно через другие параметры на это же влиять поэтому я эту настройку не трогаю далее У нас есть как мы уже понимаем цветовая настройка Да здесь мы можем настроить нашу тень и здесь важный момент Я бы тоже хотел сразу вам сказать что например мы можем цвет тени здесь поменять Да мы можем сделать ей какой-нибудь вот такой вот неоновый эффект если вам это уместно например Да в вашем дизайне вот Вы можете его сюда применить но а также Я бы хотел сразу сказать что если ваша тень падает на белый объект то она как правило серая Да если ваша тень падает на какой-то из цветных объектов то она а становится таким же цветом но на 2-3 тона темнее чем этот чем та поверхность на куда куда она падает То есть она там не должна быть серая но в крайнем случае если вам там например сложно заморачиваться с этим да то тень чтобы она выглядела более естественно либо она вот первый сценарий Вот который я вам рассказал того же цвета но темнее либо второй сценарий Когда вы просто берёте чёрный цвет и там его размывается и делаете его по прозрачности сильнее Ну то есть по сути это как бы серый но без оттенков светло-серого и так далее вот такие э нюансы есть при работе с тенью А так дальше мы переходим ко второму нашему квадрату и здесь у нас тоже будут эффекты а но мы сейчас посмотрим выпадающее меню и добавим следующую следующий эффект вот здесь ещё есть inner Shadow это значит внутренняя тень вы видите Да что у нас немножко уже что-то произошло вот здесь вот в частности а поменялась э у нас картинка и как будто бы внутренняя тень стала падать тут можно по-разному её воспринимать да на самом деле вы можете воспринять это как объём какой-то дополнительный который здесь появился Либо вы Вы можете понять как будто бы это вырезано да то есть слой а под этим слоем вырезан слой бумаги например а под этим слоем лежит какой-то слой цветной бумаги и таким образом у нас вот благодаря этому эффекту внутренней тени А происходит Вот такая иллюзия мы здесь также можем играться с теми же самыми параметрами что и в обычной тени помните Да мы можем просто зажать вот этот стрелочку и перемещать её относительно м того как Какое значение нам нужно получить Вот и дальше мы её можем вот так вот где-нибудь размыть таким образом у нас какая-то получилось углубление вот в этом вот месте а дальше переходим к следующему эффекту и это будет эффект layer BL А вот мы его ввели Да но мы как будто бы ничего не заметили Но на самом деле если мы приблизить то мы обратим внимание что граница у этого квадрата где ещё никакой нет никакого эффекта и у этого квадрата Они разные Да вот здесь как раз таки произошло размытие L BL - это именно размытие этого слоя то есть вот мы работаем с этим слоем с этим объектом он соответственно его размывается Он очень часто так скажем применим каким-либо фотографиям или элементам декора который присутствует у нас в кадре и которые мы хотим например придать динамику им да то есть заблюрить их или сделать их в расфокусе то есть чтобы у нас такая композиция получилась глубокая многоплановое и соответственно у нас какие-то там элементы могут быть где-то летать или что-то в этом роде layer BL это вообще один из моих любимых эффектов поэтому я его часто а применяю какие есть настройки на самом деле всего одна настроечный да то есть посмотреть насколько это у нас происходит размытие размывать можно прямо очень до Больших значений например просто вот ради эксперимента 1.000 я вам пикселей сейчас вот покажу как будто бы у нас он просто дезинтегративной деле он существует потому что у него есть вот эта граница а всё остальное просто разлетелось до 1.000 пикселей в сторону вот тогда мы берём и возвращаем это значение Ну например там я не знаю до вменяемых каких-нибудь 100 чтобы было понятно что что это за эффект вот а мы дальше переходим к третьему к четвёртому заключительному нашему эффекту здесь А который называется background BL это тоже BL мы понимаем что это размытие а Граунд - это у нас фон фоновое размытие Давайте нажмём на него посмотрим что произошло вообще ничего не поменялось Даже если мы приблизив эффект но он очень крутой смотрите у него почему это произошло во-первых у него есть настройка которую мы можем тоже по применять Да например сразу вот из четырёх пикселей привести там какое-то большее значение например 40 пикселей но всё равно ничего не происходит всё в том что он применяется только тогда когда мы ставим на его поле м р ну точнее Вот на этом вот поле короче другое значение например 50 и он у нас ть Всё дело в том что он применяется только в том случае когда у нас есть прозрачность на его заполнении например Мы можем поставить сюда заполнение вот этого цвета Да 50% вот вроде бы тоже ничего не поменялось Но если мы отнесём его на какой-либо объект он как бы сверху Да находится у нас по слоям поэтому он будет размывать ниже стоящий объект и в зависимости от того насколько опять же мы будем его блюрить Да картинка будет у нас меняться вот при стандартных четырёх пикселях у на у нас бы вот такая вот такой бы эффект был такой получается эффект матового стекла для того чтобы ещё больше придать этому матовом стику более такой интересный эффект А мы можем ему дать тень А для этого мы можем воспользоваться А совмещением различных эффектов Вы можете одинаковые эффекты совмещать Вы можете разные совмещать эффекты их может быть у вас очень много я честно говоря даже не знаю есть ли там какой-то лимит Для этого нам надо просто нажать на плюсик в эффектах и у нас по умолчанию Drop Shadow Да здесь покажется Давайте настройки его откроем сделаем неболь небольшую такую вот теншоу даже а три слоя вот если мы смотрим да то есть трёхслойная композиция Вот это самое Верхнее матовое стекло лежит потом вот белый это как будто бы у нас фон вот этот лист бумаги А вот этот бирюзовый он как будто бы ещё утоплен как будто бы вырезан внутри Ещё ещё ниже то есть уже трёхэтажная композиция у нас получается даже на таких простых элементах и на таких простых эффектах всё далее мы будем разбираться со шрифтами как с ними работать потому что это супер важная тема так дорогие друзья сейчас мы разберёмся с нашими шрифтами шрифты и текст - это вообще одно из самых основных что есть в инфографике Объясню почему А мы ведь делаем инфографику для того чтобы увеличить продажи карточки товара а увеличивают продажи карточки товара именно правильные смыслы которые разнесены по слайдам карточки товара которые вместе с фотографиями во-первых дают визуальный образ и представления о товаре а текстом мы подчёркиваем основные ключевые преимущества этого товара соответственно нам достаточно для хороших продающих фотографий точнее карточек товаров достаточно только хороших фотографий и только текста но всё остальное - это как бы доб навешивание сверху Да там делать какие-то Может быть дополнительные визуальные эффекты Но это вот минимум основной который нам необходимо отрабатывать соответственно тексты - это очень важно и давайте мы сейчас к ним приступим для того чтобы работать с текстом и создать текстовое поле Нам необходимо выбрать инструмент Т текст После этого у нас есть несколько способов добавить текст И я покажу вам один из них здесь у нас будет текст показан через текстовое поле которое я нарисовал То есть как прямоугольник как любую другую фигуру без разницы У меня есть буфер обмена содержится текст и я его Вставляю видите он у нас здесь появился А дальше мы можем сделать и другим способом добавить этот текст Да мы можем просто выбрать инструмент т и просто кликнуть левой клавишей в нужном нам месте дальше Мы просто его вставляем и у нас получается следующая картина текст у нас Вставил в одну строчку и так как у нас строчка оказалась длиннее чем фрейм А во фрейме у нас включён клип контент мы получили вот такую длинную строчку уходящую За горизонт для того чтобы её поправить Нам необходимо сначала кликнуть в стороне потом перейти в режим редактирования Ну вот так скажем изменения параметров его текста текстового поля и после этого просто его подтянуть подтянуть в нужные адекватные так скажем рамки так здесь Точно также мы можем подтягивать изменять вот эти вот параметры но мы об этом немножко попозже поговорим так далее Давайте посмотрим что мы можем делать с этими текстами возьмём за основу вот этот когда мы нажимаем на текст у Наде появляется поле как нитек параметры которые мы можем выбирать в частности самый главный параметр - это выбор шрифта здесь я уже установил свой любимый шрифт это мацерат я вообще являюсь амбассадором шрифта Марат я крайне рекомендую его использовать потому что он один из самых простых он выглядит хорошо он хорошо собран для тех кто понимает и много смотрит на шрифты он понимает что шрифт мацерат и там ему подобные они хорошо собраны при этом есть шрифты которые не так хорошо СОБРа например для кириллицы для русского языка они все большинство шрифтов делаются сначала для английской раскладки по остаточному принципу потом на другие языки переводится в том числе на кириллицу поэтому не все шрифты настолько хороши как Например мацерат я вам его рекомендую использовать как установить вообще сюда свой шрифт вот здесь очень много шрифтов различных Да но они у меня появились потому что я их сюда поставил У вас есть два способа как их установить в этом отличается Как раз-таки ещё есть одно отличие между десктопной и веб версии фигмы Об этом я в самом начале говорил а если вы всё-таки поставили десктопную версию то всё что вы устанавливаете себе на компьютер у вас автоматически будет загружаться на сюда в интерфейс фигмы но не совсем автоматически потому что после установки шрифта вам необходимо будет просто произвести перезагрузку ва фигмы выйти из неё полностью и потом библиотека этих шрифтов подгрузить и вы её увидите вот здесь в этом выпадающем меню Но если вы всё-таки работаете на веб-версию по какой-то причине то там есть специальный способ который требует дополнительной программки Такой маленькой быстро устанавливаемой который будет соединять так скажем ваши шрифты из компьютера с вашими шрифтами в фигме как это сделать Я рассказал у себя на канале Вы можете найти это видео оно примерно так и называется как установить шрифт для фигмы что-то в этом роде там эти два способа я досконально подробно объяснил как как с ними работать вот Давайте приступим и дальше мы посмотрим другие параметры которые мы можем изменять смотрите ниже у нас к этому шрифту есть начертания не у каждого шрифта есть различные начертания А эти начертания устанавливаются как по сути отдельные шрифты но они кладутся так скажем вме рифта которое мы установили вот Марата например там на самом деле гораздо больше этих начертаний то есть там есть н Это буквально тоненький тоненький еле заметный шрифт дальше есть там несколько ещё порядка там если я не ошибаюсь Ну может быть 12 этих начертаний дальше есть там диу Reg себо Black это вот уже всё жирнее жирнее да для основных текстов мы не используем такие жирные мы используем либо medum либо Reg да для наших карточек товаров там где у нас не идёт заголовок или какой-то подзаголовок для них отдельная история там другие правила Я честно говоря сейчас в правила сильно не буду вникать потому что мы сейчас больше техническую сторону проходим фигмы для того чтобы владеть ей а всё остальное это как бы в дальнейшем у меня на курсе содержится Если у вас есть желани то вы можете присоединиться А дальше у нас есть а помимо начертаний а ещё и размер шрифта то есть здесь мы можем поменять вот этот ещё называют его кегль например поставим его 24 чтобы он был более заметен А я также не буду говорить сейчас да Какие должны быть шрифты А в минимальной там или максимальный это всё зависит от дизайнера но есть всё равно какое-то минимальное ограничение чтобы это было всё заметно Вы можете просматривать там опять же различными способами Вы можете взять телефон в руки а посмотреть этот текст например на в вашем слайде на вытянутой руке видите ли вы или не видите в зависимости всё будет конечно от зрения всё супер субъективно Ну например например если мы используем фрейм там с размером 1.800 на 2400 то Я рекомендую хотя бы хегль ставить 50 чтобы он был читаемым вот где-то такой шрифт он должен быть а в вашем слайде чтобы он был читаемым Вот давайте вернём другое значение потому что нам ещё потребуется настройки этого текстового поля А дальше по кеглю мы с вами разобрались дальше у нас есть межстрочное расстояние здесь по умолчанию оно стоит как ауто то есть оно будет у вас всегда вот в новом шрифте так такое Да но вы можете настроить своё межстрочное расстояние и настраивается оно Внимание В двух параметрах либо в процентах либо в пикселях всё в зависимости от того как вы напишите Если вы напишете сюда 100 и нажмёте enter то у вас получится вот он как в данном случае он уменьшился Да если вы нажмёте он просто будет равен Да вот как бы если в Ворде мы смотрим однострочное расстоянию вот точнее одинарному меж срочному расстоянию вот высота этих букв это будет высота от Нижней вот этой буквы до Верхней вот этой буквы вот эти вот буквы сверху и снизу торчащие они обрезаются и не учитываются Вот в этих параметрах поэтому А вот здесь Да расстояние будет меньше намного чем вот здесь дальше переходим к следующему параметру Точнее к этому же параметру Но к следующей его интерпретации Например у вас не А Вы захотели поставить в пикселях или случайно поставили в пикселе и забыли поставить процент допустим вы хотели поставить 100% а поставили 100 пикселей вот что произойдёт у вас просто между каждой строчкой будет у вас по 100 пикселей при данном при данных размерах фрейма и нашего шрифта А что ещё есть есть ещё межбуквенное расстояние или теринг его называют это это межбуквенное расстояние крайне редко я Рекомендую вам использовать лучше не заходить вам сюда потому что это такая тонкая настройка Когда вы работаете например с заголовком Да и вы пишете какой-то заголовок например видеокамера видеокамера и в этом заголовке вы хотите использовать например это можно использовать в каких-нибудь заголовках например и это однострочный заголовках должно быть вообще как бы там много всего всяких дополнительных ещё вопросов да возникает Ну например у нас есть заголовок видеокамера видите Да кстати текстовое поле у меня увеличено это потому что у меня вот здесь вот стоит параметр 100 он у меня по умолчанию как-то вот так сохранился я его Хочу поставить в автоматический режим соответственно я сюда ставлю схо авто он у меня зашёл в режим редактирования текста поэтому я а не смог его вбить сюда Сейчас ещё раз не смог точнее применить вот применила А дальше мы можем например здесь побольше сделать кегль чтобы это было более заметно Вот например 96 А и поставим по центру и вот сейчас посмотрим что такое ринг Давайте поставим сюда 20% например видите у нас увеличилось Вот это расстояние межбуквенное и здесь оно ещё Окей но если мы сделаем такую же историю вот здесь это будет ужас просто нечитаемый потому что вот так вот текст не должен выглядеть ни в коем случае а здесь поставим также 0% это пока оставим нам ещё пригодится для одного небольшого эксперимента А дальше мы переходим к следующей строчке настроек Да здесь у нас идёт речь с параграфами да то есть это инструмент опять же тоже больше для верстальщиков нужен нежели чем для слайдов потому что мы не работаем с таким большим массивом текстов А здесь у нас есть выравнивания различные да то есть у нас вот например есть выравнивание по высоте и выравнивание по ширине А зачем это нужно вот вроде бы у нас есть текстовое поле вот есть текстовое поле но у этого текстового поля вот эта граница она больше чем здесь Да Несмотря на то что даже там не учитывая то что здесь теринг меньше ой точнее кегли меньше Но всё-таки вот если мы оставим этот текстовое поле с таким пространством воздушным здесь то у нас получится выравнивание будет э сложно выравнивание будет происходить именно относительно вот этой границы этого текстового поля зачастую это очень сильно мешает и поэтому надо избавляться от такого воздуха внутри текстовых полей А для этого мы должны воспользоваться вот этими двумя кнопками эту кнопку мы используем только тогда когда у нас есть только одна строчка текста А эту кнопку когда у нас есть несколько строчек текста и есть пространство снизу по высоте соответственно мы вертикальное вот это вот убираем автопод гон делаем И у нас получается вот так и так выравнивать гораздо проще и правильней например что если сделать вот этот размер больше Да вот примерно Вот такой вот у нас он будет и начинаем мы выравнивать мы начинаем выискивать вот эту линию Да И вот эта линия Центральная Вот она здесь у нас получается не вот здесь вот нигде Да тут нам фиг бы ничего такого не подскажет она окажется вот здесь вот но текст-то у нас здесь находится Да это всё потому что фигмы ориентируется вот на эти размеры А мы наш глаз ориентируется на эти размеры соответственно нам нужно синхронизироваться с фиг мой и удалить лишнее Вот это пространство лишнее пространство удаляется как я говорил ранее из однострочный Вот таких вот историй с помощью вот этой кнопкой авто ширина вот после этого мы уже можем поставить центру и это будет правильно кстати мы можем пользоваться и вот этими кнопками выравнивания которые я по-моему не говорил раньше но они супер э простые и понятные здесь выравнивание идёт относительно фрейма А по левому краю по центру по правому краю по высоте по центру относительно вертикали и по по Нижнему краю Давайте поставим это вот в таком виде и оставим это так так переходим дальше мы уже разобрались вот с этим с этой частью теперь у нас осталась последняя строчка и три точки А здесь у нас есть такой параметр как выключка это выравнивание либо по левому краю либо по центру либо по правому краю я крайне Не рекомендую использовать выключ по правому краю самая главная выключка Которую мы должны использовать в текстах Это для основного текста это по левому краю редко когда мы используем для основного текста по по центру по центру используется в основном для заголовков или для подзаголовков и крайне редко используется по правому краю относительно какой-то например ну то есть Ну относительно нашей композиции может быть это такое происходить это больше такая больше исключений жели чем часто истории А точно такая же аналогичная есть у нас вот история только относительно вертикали но это если у нас нет авто подго по высоте да то есть вот если у нас предыдущая история была которую мы уже отмели я вам просто покажу что эти кнопки обозначают Вот вы мы просто гуляем внутри этого поля по вертикали но так как нам не нужно такое поле Мы просто его убираем через такую кнопку А дальше Давайте посмотрим ещё зайдём Вот в это дополнительное меню здесь более редкие функции собраны Некоторые из них продублированы здесь я это тоже выравнивание да текстовое поле здесь у нас идт выключка есть и выключка по ширине такое тоже не надо использовать в карточках товаров это такая выключка используется в газетах например на узкую колонку там это приемлемо но и то большинство сейчас уже верста ется по левому и дальше у нас идёт различные подчёркивание что в принципе я практически не уверен что можно использовать просто это использовать либо перечёркнутое это для карточек товаров практически не нужно а дальше у нас есть вот такие вот интересные настройки по тексту мы можем например сделать отключить все настройки Вот это минус Либо мы можем сделать все а м буквы в нашем текстовом поле в верхнем регистре То есть это заглавные буквы наоборот мы можем сделать все строчные То есть это нижний регистр мы можем сделать чтобы все слова были начинались с заглавных букв вне зависимости от пунктуации и здесь есть два дополнительных так скажем параметры которые я честно говоря даже не знаю и ими не пользуюсь то есть здесь в основном я пользуюсь либо вот этим Либо для заголовков может быть Вот этим для примера Да если у нас есть основной текст ни в коем случае не пишите его заглавными буквами полностью Это очень тяжело читается это для заглавные тексты для верхний регистр нужен только для аббревиатур и приемлем для заголовков Когда у нас слово одно например видеокамера Да мы можем его поставить в верхнем регистре для этого мы вот нажимаем эту кнопку и здесь оно смотрится уместно тем более с вот этой вот межбуквенный расстоянием увеличенным Да вот сейчас видеокамера смотрится уместно здесь это крайне неправильно и это очень сложно читать человеческому глазу сложнее воспринимать такой текст нежели чем обычный вот такой текст то есть строчные буквы воспринимается проще реально так всё выключим эти настройки нижние настройки Я тоже не буду проходить здесь есть нумерация или маркировка списка не особо это нужно на самом деле потому что мы будем списки делать оформлять по-другому другим способам Но если вам интересно можете поэкспериментировать самостоятельно с ними у нас вс-таки идт урок по освоению фигмы для инфографики в там с текстами Мы завершаем за исключением того наверное что ещё скажу что мы можем к текстам применять тоже также заливку различную Мы также можем применять различные эффекты например тени Да если у нас там какой-то схож фон сложная фотография и мы можем где-то там кинуть тень но не увлекайтесь с этим потому что это где-то уже мо витоном считается А есть вот что точно будет считаться мо витоном Если вы поставите обводку на ваш текст это будет просто супер кринж простите за выражение но ни в коем случае не делайте так вот сколько бы я не говорю вот где-то у кого-нибудь до проскочить никогда не ставьте обводку вокруг текста Это просто ужасно всё на этом мы заканчиваем работу с текстом эта тема намного более объёмная и требует больше внимания но у нас задачу всё-таки разобраться в первую очередь с техническими параметрами фиг для того чтобы мы могли собирать карточки товаров Так сейчас мы будем проводить различные операции с объектами с группой объектов А в частности мы воспользуемся нашим инструментом элипс Нарисуем здесь два Круга дадим им какие-нибудь различные цвета Пускай это будет такой цвет и какой-нибудь вот такой цвет далее мы поместим эти круги таким образом чтобы они немного пересекались друг другом скопирую эту всю историю и сделаем так чтобы теперь у нас были круги по-другому располагались вот смотрите когда мы объединяем не один объект а два объекта и более то у нас получается вот здесь вот активируется такая кнопка как bulling groups она означает различные так скажем эффекты наложения друг на друга и соединение или вычетание форм этих объектов сейчас это звучит сложно но я вам объясню как это выглядит и вы поймёте В чём разница смотрите Давайте по первому сначала пройдём Union selection Мы выбираем его и у нас происходит объединение Да как бы вот этой формы она у нас вот такая вот теперь стала в слое Union написа и здесь мы развернуть и найти там два наших объекта из чего собственно говоря эта форма сейчас состоит Зачем второй нам Да нужен для того чтобы применить самый тот же самый эффект но там у нас единственное отличие - это расположение розового и вот этого фиолетового Да кружков здесь у нас получается розовый кружок дал цвет всей вот этому всему объединённом всей объединённой группе вот этих объектов соответственно что лежит выше то и даёт цвет отменяем действие Ctrl Z и таким образом Да мы понимаем что если у нас там будет что-то другое то мы будем понимать что это более высокое даст свет этому Но при этом они объединятся тоже самое происходит Ну вот здесь вот отмечено Да вот в этих иконках также у нас есть и получим вычитание здесь мы получили сейчас вычитание верхнего из Нижнего то есть формы верхнего из формы нижнего аналогичная история произойдёт здесь только в другую сторону и соответственно у нас останется фиолетовый Как вы поняли вот здесь в принципе по иконке тоже понятно что это происходит Да и здесь мы можем отменить эти действия и про экспериментировать следующим действием это действие которая у нас на соприкосновении Да делает убирает всё только оставляет зону соприкосновения и соответственно От этого от того как располагаются слои у нас будет зависеть цвет нашего нашей формы новой и Последний из этих четырёх вариантов - это вычитание вот этой же зоны пересечения Как вы уже догадались здесь будет вычитание с другим цветом что ещё есть да там ещё есть пятая строчка Давайте с ней разберёмся Ну например мы сделаем вот это вот вычитание Или давайте вот это вот сабра selection сделаем а если мы нажмём вот этот а объект Да и потом сделаем flon селек это значит что мы создадим новую фигуру которая не сможет раскрываться и редактировать как те две фигуры то есть здесь мы просто уничтожили вторую нашу фигуру и оставили только вот эту и таким образом получили новую форму с которой можем взаимодействовать это больше история для вёрстки сайтов либо там приложений потому что они получают вот какие-то такие новые фигуры потом в дальнейшем их передают на вёрстку просто сохраняя отдельно соответственно у нас такой истории нет потому что мы сами работаем над карточкой товара только мы видим её в редактируемом формате поэтому у нас Пускай лучше будет всегда возможность редактировать вот эти вот поля А что значит редактировать Давайте посмотрим как их можно редактировать вот есть у нас вот эти два поля Да и мы применяем к ним например Ну тот же Пускай даже subst S здесь у нас получается Вот такая история то есть мы каждый из этих объектов можем что-то с ним делать да то есть мы например можем его перемещать такой вот Лунной затмение делать Мы можем ему изменять размер и вставить его позицию например давайте сделаем вот такую вот фигуру и эта фигура вот сейчас вот са абстракт Да она у нас прозрачная становится если мы её сейчас наверх закинем вот сейчас вот посмотрим вот на фиолетовом её видно да а здесь она становится прозрачной и соответственно мы можем таким образом получать какие-то новые фигуры с помощью вот этих вот инструментов bulling groups дальше мы перейдём к инструменту масок и посмотрим что они умеют это достаточно часто используемый инструмент в дизайне карточек товаров так на этом шаге мы с Вами познакомимся с инструментом маски и маски нам потребуются так скажем Ну в работе с разными фигурами и в том числе с фотографиями Поэтому я предлагаю немного зайти вперёд и уже начать работу с фотографиями перетащить фотографию я думаю каждый сможет Это самый простой способ добавление фотографии в наш в наши Рабочая области и в наш фрейм в частности а для того чтобы сделать маску к этой фотографии Нам необходимо понять какой формы Мы хотим сделать наше изображение вообще маска по сути своей - это а придание формы это так скажем способ объединения двух объектов при котором у нас форма верхнего приобретается от формы нижнего То есть сейчас я объясню на конкретном примере например мы делаем карточку товара для ресниц да для патчей для наращивания ресниц и мы оформляем слайд с со способами применения Например у нас есть способ применения там окрашивание ресниц наращивание ресниц и так далее Вот и здесь Нам необходимо сделать именно вот эту вот часть с ресницами наращивания для этого мы берём создаём объект той формы который мы хотим в дальнейшем нашу фотографию после этого важный момент мы переносим этот объект вниз и далее мы выделяем два объекта и нажимаем всего на одну кнопку use Mask вот это она вот здесь вот сверху будет показана и таким образом мы получаем объект в маске фотографию по форме того самого объекта который был снизу и в слоях следующим образом у нас есть маска точнее Вот вот это вот да маска формы и у нас есть содержимое этой маски это в частности фотография здесь мы можем её менять увеличивать как-то сдвигать без разницы тут в принципе всё что угодно мы можем здесь сделать даже закинуть какой-то Новый объект или заменить другую фотографию Теперь давайте посмотрим рассмотрим ещё один вариант и закинем фотографию с космосом с космосом А закидываем сюда и Обратите внимание Да вот у меня произошла такая ситуация что у меня больше в этом фрейме не было ничего кроме самой маски поэтому Вот моя фотография с космосом она залетела внутрь маски по умолчанию поэтому она бы могла залететь вот кстати вот сюда и мы бы думали почему у нас не добавилось изображение Да просто это изображение добавилось в маску А это зона невидимой невидимая зона маски соответственно мы вынести изд влияние этой маски и мы просто берм в слоях перева это в нужно нам место дальше мы уменьшаем наше изображение также как и прямоугольник как и любой другой объект и дальше я хочу сделать стилизованный текст который будет с вот этим вот космическим сюжетом Для этого мне нужен инструмент соответственно текст здесь я вписывай слово типа космос вот Обратите внимание Да я сам даже попался на эту штуку потому что я сейчас добавил текст и у меня текст залетел в эту маску Да чтобы этого не произошло то есть не пугайтесь что вот он так не появился Хотя я Сам испугался Вот видите Хотя сколько работаю и у меня это этот текст он находится за пределами этой маски мы можем вот так вот вынести Либо мы можем пере по-другому всё это изменить и сделать выбрать текст а перед этим Либо после выбрать какой-то объект вне этой маски И после этого мы нажимаем снова на создание текста и пишем Сва Космос в данном случае у нас всё произошло хорошо потому что мы не попали влияние под влияние маски дальше чтобы увеличить текст мы можем воспользоваться увеличением кегля его но есть ещё и другой способ который Я кстати вам в прошлом в прошлом шаге не показал это позапрошлом шаге я вам не показал это изменение размера через инструмент Scale Вы помните что это горячая клавиша мы её нажимаем и с альтом или с опм я увеличиваю своё изображение точнее текст ээ до размеров необходимых относительно моего изображения далее я переношу это Примерно вот так делаю текст более заметным обратно перехожу в режим Move горячая клавиша V А делаю текст более заметным для этого я использую какое-нибудь более такое жирное начертание А и следующим шагом так же как и в случае с кружком я переношу вниз потому что мне нужна именно форма моих букв а содержание у нас будет приниматься от верхнего слоя далее мы выделяем эти оба слоя и нажимаем на кнопку использовать как Маска Всё теперь у нас получился космический текст который мы можем вставить в какую-то тематическую карточку товара на этом мы с масками завершили работу на самом деле инструмент очень интересный полезный и многогранный его е можно познавать и даже не понимать как это сделать например да графически А Это скорее всего будет сделано с помощью маски потому что в масках ещё много можно чего делать И именно это Всё познаётся через эксперименты А на этом всё мы переходим к следующему шагу Так сейчас мы будем разбираться с инструментом кривые и точки это нужно для того чтобы построить какие-то нестандартные какие-нибудь такие интереснее фигуры и линии которые мы не сможем сделать с помощью обычных наших инструментов для этого у нас существует два инструмента это Pen и pencil давайте мы будем работать всё-таки с инструментом Pen потому что он более так скажем интересный и более плавный А здесь мы выбирая его Да у нас есть предлагается выбрать линию старта откуда у нас будет начинаться наша кривая Ну может быть она будет и прямая посмотрим смотрите у нас Мы раз нажали я больше не не держу свою мышку Значит на кнопку на кнопке и дальше у меня всё равно рисуется как будто бы продолжение как будто как линия Да пока всё так же а далее я отпускаю точнее нажимаю здесь ещё раз а Введу в сторону Отпускаю И ещё раз нажимаю здесь я могу А нажать и задержать Тогда получу кривую линию Вот например такую Дальше можно нарисовать что угодно и куда угодно дальше пойти но вот Я вот здесь вот ещё раз зафиксируй одну точку и сделаю ещё одну вершину Вот такая вот у нас фигура получается и у меня как бы дальше продолжается ещ линия Да здесь я могу выйти из этого двумя способами либо нажать Escape либо нажать Enter вот я нажимаю Enter и у меня моя фигура точнее линия это не фигура да ещё у меня получилась вот эта кривая линия вот такой вот формы А дальше что мы можем сделать с этой линией вы обратили внимание Да что у нас При появлении вот такой вот когда мы держим левую клавишу мыши и ведём то получается вот эта вот изогнутая форма эту изогнутую можно ещ дальше редактировать тут можно вообще в принципе что угодно редактировать но Давайте вот разберёмся с этим я выбираю Вот эту вот линию потом нажимаю на неё как энтеро либо вот через эту клавишу и захожу в режим редактирования формы Давайте разберёмся вот с этой изогнутой аркой здесь у нас есть если мы ККМ на одну из точек появляются такие вот усы их называют усами без е и в описании к этому видео вы найдёте ссылку на тренажёр который позволит вам больше так скажем освоить этот навык работы с кривыми потому что он достаточно сложный и чтобы научиться работать с кривыми нужна определённая практика Там как раз-таки на этом тренажёре вы сможете попрактиковаться А смотрите что можем мы ещё делать в режиме редактирования формы с этой точкой конкретно да А мы можем э ус двигать в различные стороны они у нас как качели двигаются мы можем их увеличивать либо уменьшать при этом Обратите внимание что размер влияет только на одну на вот эту вот часть кривой но когда мы позиционирование меняем то меняется и другое позиционирование но мы можем например зажать и у нас будет пози ние меняться только у одной части вот этих качелей так оставим Пока так давайте посмотрим что мы можем сделать например с другими точками например возьмём для эксперимента вот эту точку которая была построена не с помощью как бы кривой Да вот с этих не с помощью вот этих с помощью вот этих усов А без них то есть здесь вот у нас усов нет А здесь появляются А здесь мы можем тоже и их сделать но у нас есть специальный инструмент Вот который так скажем сглаживание формы Да что ли инструмент такой вот появления вот этих усов выращивания усов Давайте нажмём на него и Клик в этой точке Всё теперь у нас появился место такого вот острого угла а нечто подобное Да и мы в принципе можем настроить Это нечто подобное Как чтобы по форме она наиболее похожа была вот с этой частью нашей кривой линии а также что мы ещё можем сделать Например у нас есть вот эта вот а линия Мы также Заходим в режим редактирования формы и мы можем снова выбрать инструмент Pen и с помощью этого инструмента мы можем добавить точку на каком-то из участков нашей линии зачем это нужно например Мы хотим изза как-то ещё дополнительный излом Да вот к этой линии применить и поэтому мы нажимаем вот здесь вот когда мы наводим на линию у нас появляется плюсик нажимаем на неё левой клавишей и у нас как бы гма предлагает продолжить дорисовывать мы можем дорисовать это будет частью вот нашей линии но я сейчас выйду из этого режима редактирования нажав клавишу Enter потом я снова захожу в режим редактирования снова нажимаю на Enter и у нас появляется вот здесь вот это вот точка Теперь я могу с помощью этой точки поменять траекторию нашей линии Так что ещё можно делать с помощью этих линий например мы можем нарисовать какую-то фигуру а для этого мы берём нашу тот же наш инструмент Pen введём его ну тут как вы сами захотите это сделать вот я буду такую вот элемент бокс схемы что ли рисовать сюда я размещу вот такую дугу вогнутую здесь я по прямой пройду И вот так вот завершу тут Важно Да чтобы у на чтобы у нас получилась именно форма Нам необходимо завершить там где Мы начинали после того как мы нажимаем нам уже гма не предлагает продолжить точку потому что она понимает что мы завершили наше действие но мы всё ещё находимся в режиме редактирования формы мы можем здесь дополнять дополнять какие-то точки но я просто нажму кнопку либо ent образом мы получили вот такую фигуру и с этой фигурой пока которая содержит только линию мы можем работать мы здесь можем например сделать ей заливку для этого я снова перехожу в режим редактирования формы и здесь вот есть такой инструмент последняя Кнопка это ведро с краской я беру его и Заливаю наш участок нажимаю есть более простой интуитивный способ который позволит вам то же самое сделать например вы находитесь просто выбираете эту нашу фигуру и просто нажимаете вот здесь вот в разделе Л У нас появляется заливка всё тоже самое произошло только более простым способом так что можете не путаться не запоминать те значения сделать это так а также я не могу не сказать если у нас например существует какой-то Объект который мы нарисовали стандартной формы А мы его тоже можем редактировать помните мы а делали перспективу меняли Да у объекта здесь мы можем тоже мимо того чтобы делать это вот изменение перспективы Так мы ещё и можем А работать с этими кривыми то есть здесь мы заходим в режим редактирования формы нажимаем Enter далее А у нас в режиме Pen а делаем какую-то точку дополнительную Да вот по умолчанию кстати фигмы нам подсказывает что мы можем поставить на каждой из сторон вот такую вот Фантом ную точку которая обозначает середину пускай будет так как фигмы подсказывает я поставлю Вот ровно её в середину А дальше я не буду продолжать отсюда линию Я просто завершу и снова зайду в режим редактирования формы снова через Enter у меня уже здесь появилась точка И с помощью вот этого инструмента Move стандартного я передвигаю эту точку туда куда мне необходимо Например я вот хочу её повторить Да вот ту форму того объекта который у меня был при этом я могу зажать Shift и ровно посередине его спустить А дальше я могу выбрать вот этот инструмент сглаживания улов и нарисовать здесь усы просто один раз кликнув нажимаю кнопку done и у меня получилась такая вот фигура которая ровная то есть в отличие от этой нарисованной Да она несимметричная вот это симметричная потому что мы её делали ровно по с помощью тех инструментов которые гма подсказывала нам вот на этом мы всё завершили с этой темы тема такая требующая вашего внимания дополнительно тут надо потренироваться Поэтому я предлагаю вам ещё тот самый тренажёр о котором говорил ранее с каждым шагом мы всё больше больше узнаём фигму всё больше в неё погружаемся и разбираемся и в этом шаге Я бы хотел вам рассказать про плагины или плагины Кто как их называет по сути это внутренние маленькие программы которые были разработаны либо самой может быть компанией что вряд ли скорее всего это энтузиастами которые выполняют определённый род задач и у них нет возможности выполнить что-то в фигме стандартными инструментами для этого они сами разрабатывают мини продукты а зачастую это и не мини продукты которые внедряются потом как маленькие пазлы или частички конструктора в нашу фигму и мы можем ещё более широкий функционал получать для своих задач что это такое Как это работает Какие задачи может выполнять я вам сейчас расскажу А смотрите чтобы воспользоваться этими плагинами мы можем нажать вот на эту клавишу где у нас откроются вот такое выпадающее меню здесь у нас будут плагины компоненты и виджеты это тоже дополнительные ещё штуки которые вы можете использовать но по сути они как бы для создания карточек товаров Ну скорее всего не понадобятся это больше для сайтов и для совместной работы в Едином пространстве Давайте посмотрим на раздел именно плагинов И что он может это мои плагины которые установлены здесь не все они там есть ещё здесь просто видимая так скажем область недавних моих плагинов которые Я использовал например для того чтобы вать красивые тени У меня есть специальный плагин Shadow Maker и этот плагин работает следующим образом например Нам нужен нужна какая-то красивая Тень на прямоугольнике А сделаем его Давайте цветным И теперь мы выбираем его и правой клавишей кликаем я вам сначала покажу что такое плагин а потом расскажу Как его установить это вот важный момент дальше я кликаю Да и захожу вот правой клавишей мыши на моём объекте и захожу в раздел плагины в здесь у меня выпадает ещё меню вот опять же те же Н это то что недавно Я использовал я выбираю здесь свой вот этот плагин Shadow Maker И сейчас у меня откроется дополнительное окно настройки теней вы уже обратили внимание что уже бросилась определённая тень и и эта тень очень мягкая просто вот чтобы вы понимали когда мы делали один эффект дополняли тень да то у нас появляется только вот здесь одна строчка здесь у нас их уже появилось сколько шесть строчек мы можем ещё более мягкую ещё сделать её Да и дополнить до восьми слоёв этих теней то есть они будут как бы так вот мягко мягкой ступеней каждый больше другого и дальше отходящий от нашей от нашего объекта таким образом у нас получается Вот такая вот интересная тень также мы можем направление её поменять да то есть вот здесь вот у нас есть такой tbl Direction и здесь мы можем любой угол задать ей чтобы тень наша падала так как нам нужно а также мы можем выбрать цвет тени здесь у нас прозрачность и соответственно непрозрачность когда мы её увеличиваем да то есть вот здесь вот у нас тень совсем становится такой грубой я её ставлю обычно меньше ну там в зависимости опять же от ситуации какой у нас фон и так далее а также мы можем поменять дистанцию на Какою дистанцию будет он отходить от нашего объекта если мы растянет эту ступенчато Да такого делать не надо надо делать так чтобы была всё-таки плавность для этого существует этот плагин и здесь у нас есть ещё эффект размытия то есть здесь вот этими тумблера Вы можете поиграться и Например если у вас даже высок дистанция да то вы через эффект размытия можете её опять же сгладить и получить такую мягенький мы применим и у нас получилась Вот такая вот тень как и любой другой эффект мы можем скопировать эти тени на другой объект Давайте покажем на том же например Круге здесь у нас есть Круг здесь у нас есть с эффектами прямоугольник мы берём первый и Например я зажатым шифтом сейчас выделю последний То есть у нас вся группа вот этих эффектов выделилась здесь я дальше нажимаю Ctrl C перехожу в объект другой и нажимаю Ctrl V и вот такая же тень только от другого объекта у нас уже ста падать вот сюда просто рисуется через плагин в зависимости от постановки нашего объекта Возможно это товар и от плоскости куда он будет падать или вообще поверхности куда он будет падать тень будет ложиться по-разному опять же это будет зависеть от источника света от возможных отражений и так далее но самые простые вот тени которые мы можем нанести на такие вот Аля интерфейсные части мы можем применять такие плагины как Shadow Maker сейчас я ещё Расскажу какие Как установить плаги например вдруг по какой-то причине плагин Shadow Maker стал платным да Такое тоже бывает кстати не все плагины бесплатные Вы можете перейти на какой-то альтернативный вариант для этого вы открываете например вот здесь плагины и здесь вы вводите нечто какое-то ключевое слово которое позволит вам найти аналог вашего плагина который вы успели полюбить но не готовы за него платить например мы вводим Shadow и здесь вот у нас есть то что мы недавно использовали А здесь у нас есть какие-то ещё варианты этих вариантов на самом деле очень много и вы можете сами в этом убедиться но я смотрю например по количеству пользователей А здесь его используют и я его могу применить вот у нас здесь есть определённая другая да то есть я повторюсь это опять же люди разные составляют различные программы мини программы в фигме Поэтому у них своё абсолютно видение на то Как должен выглядеть их маленький вот этот интерфейс решающий эту задачу поэтому здесь он выглядит вот таким вот образом Наверное если мы применим это К какому-то объекту то сможем в м разобраться более подробней Ну да вот собственно говоря вот у нас здесь такая происходит настройка вы это можете сделать самостоятельно всё в принципе здесь достаточно просто поэтому просто Открывайте раздел плагинов ищите что вам нужно Вы можете запомнить мои названия вот те которые я показывал ранее и применять их также Пользуясь случаем я расскажу об одном ещ плагине которые я тоже давно использую это плагин Называется он osf icons он Как вы догадались из название содержит в себе библиотеку иконок например Вы тоже можете его установить себе в фигму и здесь у вас будут различные иконки их прямо не так чтобы много да но они все очень красивые хорошо собранные у них есть возможность редактирования То есть как собирается иконка это тоже очень важно Они максимально масштабируемые Мы можем взять Вот этот самолёт перекинуть его к нам в фрейм Вот он у нас Добавился и он добавился внутри ещё маленького фрейма Я как правило вытаскиваю вот этот векторный объект Да который собственно говоря и есть наша иконка А вот этот фрейм внутри маленький я удаляю также мы можем сразу посмотреть здесь какой-то провести поиск например вам нужна какая-то книга Да вы вбивается сюда обязательно на английском языке Вот здесь это важно да тут нет поддержки русского И выбираете например какую-то из вариантов книги который Вам подойдёт по стилистике по вашему наверное даже по вашей задаче А дальше Вы можете стилистику выбрать Вы можете выбрать например болт жирное начертание либо вообще очень тоненькие а также вы можете сделать заполнением и так далее Также у вас здесь есть вот эта вот функция Либо вы делае F то есть она плоская либо она Row будет и вы её сможете редактировать по каждую линию она у вас будет векторная Вот Но даже так вы можете редактировать вашу иконку и делать с ней в принципе что угодно Либо мы можем её увеличивать я повторюсь это векторный объект он не потеряет своего качества Вы можете его сделать максимально огромным и с ним всё будет в порядке Также вы можете здесь применять к нему различные эффекты Делать ему э заполнение то есть Обратите внимание что он а по-другому воспринимается То есть он как объект вот это вот вот это и есть объект это и есть заливка его да то есть внутри он не распознаёт его как предмет единый То есть это не линия линию мы можем добавить но она будет ещё поверху у нас располагаться Вот и соответственно в зависимости от того как мы её настроим В общем обязательно Разберитесь с плагинами плагины - это целая м так скажем океан возможностей и вы можете зайти кстати в комьюнити о котором я тоже говорил вот здесь вот есть такая значок значок планеты и в этом коммьюнити собраны просто тонны полезной информации просто тонны этих плагинов Вы можете здесь заизолировать любым так скажем задачам своим найти решение всё исследуйте А мы поехали дальше так друзья Мы уже подходим к финалу нашего освоения программы гма И сейчас мы Я говорю именно про инструментарии Да и сейчас мы поговорим с вами поработаем с изображениями которые здесь в основе тоже У нас должны быть карточек товаров Безусловно вот для того чтобы добавить изображение я покажу самый простой способ это Drag and Drop то есть перетащить и бросить А мы таким образом можем сделать например с любым изображением Мы просто его берём и затаскивает область куда мы хотим его разместить Далее подгоняем по размеру и вставим так как нам нужно например по центру нашего слайда и в данном случае я работаю с зажатым альтом и с зажатым шифтом для того чтобы ровненько по середине У меня также всё и получилось то есть изображение выросло ровно так как мне нужно вот это один из способов здесь я могу удалить Это изображение вы также можете А добавлять несколько изображений То есть вы можете добавить например вот так два изображением перетащить и в зависимости от того куда вы их положите они у вас там и добавятся например вы случайно можете нажать или не случайно Специально за пределами фрейма тогда у вас изображение добавится вот так поверх нашего фрейма но они не будут ему подчиняться Да при этом Мы помним про то как Мы работали со слоями и вот только в этом случае они уже будут внутри нашего фрейма и там мы уже можем делать с ними что угодно А так давайте поработаем наверное с некоторыми инструментами внутри фигмы опять же которые позволяют нам делать цветокоррекцию нашего изображения А например например восстанавливаем в правах этот эту фотографию а дальше мы переходим вот выделяем да саму фотографию и у нас вот здесь вот справа есть л тот самый л который отвечает за Градиент или за заливку цветную Ну там же помните Вы мы делали ещё и замещение фотографии Да это вот как раз таки оно и есть вот сейчас по сути у нас как бы есть прямоугольник внутри которого встроена фотография Вот так это для фигмы выглядит то есть здесь мы можем Какие действия манипуляции произвести Мы например можем заменить наше изображение и мы хотим так сделать чтобы это изображение ровненько встало прямо вот место этого да если наше тоже такого же размера то у нас вот без проблем когда вот я переношу да и бросаю Вот именно в эту плоскость синюю то у нас фотография ровненько встаёт и замещает её я сейчас отменю действие нажму Ctrl Z Например у нас может быть такая ситуация когда мы работаем с фотографией и нам надо её немножко подправить по цвету возможно сделать е экспозицию то есть высветленные затемнить это значит экспозиция поменьше и здесь вот у нас есть ряд бегунков которые мы можем так скажем вот для этих целей использовать гма он как бы не фоторедактор поэтому здесь достаточно топорный вот эти все функции Да ну как бы это не умоляет достоинств фигмы безусловно потому что все вот эти вот цветокоррекции производятся как правило в других программах таких как Photoshop Lightroom например и так далее обычно с фотографией работает конечно фото нам уже переда Я имею в виду вот дизайнерам или контент готовый материал также мы здесь можем поработать над контрастностью для того чтобы наши точки были так скажем дальше Да друг от друга отходили то есть изображение больше приобретало отчётливо какой-то вот по цветам тут же есть saturation это насыщенность цвета мы можем убрать его и тогда получим чёрно-белое изображение Здесь также например повышаем её мы делаем кадр более тёплым понижаем делаем более холодным в зависимости от ситуации опять же какой нам потребуется для нашего изображения хотим дать больше ламповой атмосферы уютной можем добавить тепла хотим более коммерческой такой подачи добавляем холода и так далее дальше Вы тут тоже можете самостоятельно посмотреть и какие какие-то из этих возможно бегунков вам потребуется в вашей дальнейшей работе но как правило экспозиция и контрастность - это самые популярные пожалуй а также у нас есть возможность и изменить позиционирование нашего изображения внутри да то есть вот мы его его можем перемещать но при этом у нас размер как бы кадра остаётся тот же то есть внутри содержимое перемещается Ну вы сами всё видите Да что у нас надо ещё подгонять если например на 90° не квадратные изображение повернуть давайте сделаем небольшое подобие слайда может быть заготовку какую-то слайда и разместим здесь два изображения например нам надо показать эту сковородку с этой стороны и с обратной стороны так как это сервировочная сковородка нам надо показать что она там снизу как бы керамическая Да чтобы никто её не поставил на плиту Вот для этого нам потребуется второе изображение мы его закидываем к нам вот сюда например могу пока пока в сторону закинуть уменьшаю его по размеру потому что оно у меня будет в миниатюре использоваться далее Я хочу чтобы это показалось здесь в кружке Для этого мне нужен собственно говоря форма Круга А и так как мы уже работали с масками мы знаем что это такое Да мы заносим наше изображение в эту область и уменьшаем чуть-чуть фотографию а далее У нас проверяем Да так как мы будем работать с маской проверяем что у нас фотография находится над нашим кругом а далее объединяем два этих объекта и нажимаем на кнопку использовать как маску вот таким образом у нас сейчас получилось Мы можем взять отдельно фотографию подвигать её внутри маски может быть показать полностью её может быть наоборот сделать вот так вот да чтобы было понятно что боль больше приближения было к этому участку и так далее тут в зависимости от вашего размышления и о том как вы решите это очень важно потому что именно думать и потом обосновывать это наверное самая основная часть работы дизайнера и контентмейкер что он делает вот далее Я хотел бы отделить тут у нас серый фон тут у нас тоже серый фон Да у нас есть определённая разница в оттенках Я бы хотел отделить через добавление тени А например на саму маску я тоже могу добавить Тень для этого я захожу либо в эффекты либо в плагины И добавляю тень а таким способом давайте через стандартный инструмент через инструмент добавления тени сделаем её небольшую вот такую отбивочный размытие побольше вот таким образом у нас получилось изображение которое в дальнейшем пригодится уже для создания карточки товара здесь мы можем разместить какие-то тексты Да вот У нас есть хорошее место здесь у нас есть хорошее место для размещения текста и с текстами мы сейчас как раз поработаем на следующем шаге чтобы повторить эту работу Вы можете перейти по ссылке в описании к этому ролику и вы там найдёте все материалы которые вам потребуются во всём вот этом ролике на протяжении всего этого ролика где я их использовал и вы соответственно Там же их сможете и скачать и все остальные сопутствующий материал будут тоже там же Давайте удалим Это изображение а вместо этого изображения Мы например а разместим другое изображение и поработаем немножко с текстом А помните Да мы делали вот такой инструмент здесь мы сейчас чтобы не подгонять дальше по размерам закинем вот новый изображение прямо сюда а сделаем его вот таким образом и я может быть посмотрю по экспозиции вот буквально на одно деление может быть на два увеличу для того чтобы оно было посветлее Вот на одно наверное будет так а дальше Мне необходимо разместить какую-то фразу э на этот слайд что куда я могу вообще её разместить Да фраза - это такая не технического характера а фраза это будет больше эмоционального характера для особого случая именно так она будет звучать А чтобы разместить её здесь мне нужно придумать куда я буду размещать Да у нас есть место сверху но здесь мешают бокалы У нас есть место хорошее вот здесь Но здесь у нас всё-таки если не техническая информация техническую информацию здесь очень хорошо размещать Но если это какая-то общего характера информация больше такой эмоциональный слайд то я хочу разместить его как заголовок прямо вот крупно А здесь у нас есть снизу пространство но оно так скажем занято уже декором это можно в принципе совместить но я хочу сделать это поверху вот именно в этой части А как это будет конфликтовать И как мы будем решать вот этот конфликт с фужерами мы с вами разберёмся чуть-чуть попозже Давайте добавим текст сюда и здесь мы сразу можем поменять размер такой чтобы у нас был более приемлем например 48 А здесь мы пропишет и особого случая я добавлю в отдельный в отдельную строчку то есть вот у меня будет первая строчка для и потом особого случая это будет ниже здесь я поменяю начертание например на себо мне для этого нужно выделить без редактирования и дальше я буду делать нечто подобное только с новой строчки то есть дальше я буду прописывать особого здесь мы прописываем для особого случае я хочу сделать этот текст конечно же больше и я хочу сделать его с с большим регистром а для этого я выделяю этот текст захожу в три точки нахожу здесь высокий регистр добавляю отцентровать фрейма Вот он у меня посередине фрейма стоит теперь я хочу его сделать ещ крупнее я могу просто выбрать нужно мне значение например 128 Окей А здесь Я буду использовать значение Ну пускай в два раза меньше Пускай это будет 64 здесь у меня сейчас стоит себо Давайте посмотрим как это будет на медиуме в принципе на медиуме тоже окей А здесь как будет тоже нормально Здесь мы выставляем пока для по центру повыше особого случая вот сюда тут как раз можно так скажем использовать тот редкий случай когда у нас можно небольшую разрядом дать например вот этот вот ринг значение мы можем поменять для на 10% ну так скажем больше даже для частоты эксперимента и образовательного процесса А смотрите если вы обратили внимание то я перед этим перед тем как отцентровать относительно фрейма я нажал ещё на кнопку вот это вот Центральный выключ это сделал для того чтобы вот дальнейшие изменения у меня происходили относительно центра да то есть вот я сейчас сделал разрядку между буквами и у меня разрядка букв не унесла туда вот да текстовое поле в правую сторону а она сделала её относительно центра то есть увеличила И соответственно у меня ничего мне не надо снова менять позиционировать и так далее так оставляем Пока так и я бы ещ хотел небольшой акценти сделать на маленьком вот этой фразе для сюда я поставлю сейчас инструмент прямоугольник и сделаю как бы такой небольшой указатель А я поставлю Вот сюда вот эту Как как будто бы линию но я не буду пользоваться линией потому что линия в этом случае ну не очень хорошо подойдёт А мне необходимо с одной стороны сделать белый цвет Для этого я выбираю здесь белый с этой стороны у меня будет прозрачность но я тоже буду её делать через белую прозрачность То есть я ставлю сначала белый цвет чтобы она не давала никаких оттенков И потом я здесь даю полную прозрачность на 100% вот таким образом у нас получилось вот такая вот вот такой вот элемент мы его сделаем немножко потоньше я с альтом сейчас его уменьш вот где-то до 6 пикселей и аналогичным способом Ну точнее не аналогичным а с другой поставлю Зеркальное его отражение я просто беру его с альтом переношу и потом а переворачиваю его с помощью шифта на 180° далее его позиционирую его относительно ровно относительно вот этого элемента Главное чтобы эти элементы у нас были на экране оба да тогда нам фигма-обзор пикселей сторон у нас остаётся Таким образом у нас получается что вот фраза маленькая Да схо для особого случая и она осталась не совсем без внимания и особого случая понятное дело у нас выделена хорошо потому что оно у нас как бы максимально крупно по центру выглядит А что же будем делать с вот этим вот небольшим конфликтом Да с фужерами здесь мы добавим небольшую подложку вызываем снова прямоугольник этот прямоугольник мы сейчас будем окрашивать в Градиент меняем позиционирование градиента Ну вот так вот я хочу чтобы тёмный был сверху и здесь его делаем ещё темнее абсолютно чёрным этот на самом деле Мы тоже будем делать абсолютно чёрным потому что он нам даст грязный оттенок если мы его сделаем например оставим светло-серым Но даже если мы поставим сюда ноль Вот видите Да как бы вот мы вроде бы здесь но вроде бы его но здесь-то он ещ существует Да И вот этот чёрный стремится вот в э вот в этот серый через прохождение вот этого пути и у нас получается Вот как раз вот такая вот туманность или грязь вот здесь на этом градиенте поэтому нам нужно использовать именно тот же цвет в данном случае чтобы он у нас был такой правильный Градиент далее Мы размещаем наш фрейм вот здесь не фрейм а прямоугольник сверху и вытягиваем его Понятное дело что он у нас сейчас наоборот ухудшил да видимость Но мы его перенесём вниз И теперь у нас контрастность повысилась он находится над фотографией он затемняет фотографию в этом месте но он подчёркивает всё остальное всё что находится сверху белое и соответственно у нас получается хорошая контрастность Всё э на этом мы можем завершать Но я ещё хочу сделать важную вещь а увеличить нашу фотографию чтобы товар был крупнее это одно из самых главных правил а в продающей контенте Ну не самых главных правил ну так скажем правила которые нельзя нарушать товар должен быть на первом месте товар - это главное действующее лицо любой карточки товара соответственно мы должны его максимально везде подсвечивать он у нас должен быть везде виден хорошо виден мы не должны сомневаться Что продаётся на этом А на этом слайде то есть фужеры там я не знаю вилка с ложкой с ножом либо помидоры может быть да мы должны сразу понимать что здесь продаётся эта сковородка для этого мы увеличиваем размер этого фотографии и делаем так чтобы это было по центру относительно всех остальных элементов вот здесь у нас есть нак на сервировку также поддерживается Эта история вот этими фужерами здесь у нас есть декор у нас достаточно крупно показан фото фото товара И у нас читается текст если вам необходимо Вы можете ещё увеличить например вот это вот э наше расстояние ну точнее наш прямоугольник Таким образом у нас фужеры всё равно не пропадут человеческий глаз и мозг до думают что они там стоят и дорисует их самостоятельно а при этом текст у нас будет читаться И вот в таком виде мы уже можем передавать слайд нашему клиенту для загрузки marketplace Ну либо Вы самостоятельно делаете для себя и соответственно Вы можете уже такой вот Рядовой внутренний слайд поставить свою карточку товара Итак друзья начинаем наш урок Мы сейчас будем делать карточку товара для гранолы А смотрите что у нас есть в этой папке представлены все материалы которые нам потребуются для создания данной карточки товара эти же материалы вы получите себе А вы будете работать абсолютно с тем же самым и будете делать Ну практически то же самое что и я делаю смотрите у нас здесь есть помимо фотографии техническое задание Давайте с него и начнём А в Техническом задании у нас представлены слайды с нумерацией и есть описание кадра это то что должно быть в качестве фотографии использовано на слайде и описание смысло это то что мы с вами будем наносить в виде инфографики на каждый из этих слайдов А можете посмотреть здесь смотрите что написано например про первый слайд упаковка товара лицевая сторона заголовок гранола видимо этот заголовок используется как ключевое слово поэтому его важно указать на Первом слайде чтобы люди понимали и быстрее считывать смысл и тип товара дальше на первом слайде же будет указать нам название вкуса это клюквенный Мафин и вес 250 г всё по большому счёту здесь больше ничего не нужно и это очень хорошо потому что иногда клиент любит загромождать быть один какой-то смысл А здесь всего два смысла Ну можно считать три вместе с заголовком и они все важны дальше смотрите у нас идт замечание и нам необходимо будет подготовить Две версии главного слайда для тестов на ctr ctr - это кликабельность меряется она в рекламе и соответственно для того чтобы реклама была более эффективна выбирают один из лучших вариантов обложек который был представлен дизайнером Итак к остальным слайдам мы приступим по ходу нашего движения Давайте начнём с первого слайда Нам необходимо будет использовать наш графический редактор figma и первым делом мы создадим фрейм помните что размер фрейма у нас будет не 900 на 12200 а 1.800 на 240000 на 2400 вот наш фрейм И сейчас мы будем сюда в первую очередь Наш товар Мы помним что лицевая сторона и Мы помним что у нас товар клюкви Мафин Если вы Обратите внимание то тут все фотографии вот эти вот по двойной упаковке они нам понадобятся в самом конце и две фотографии одинарные упаковки спереди и сзади собственно говоря это нам и нужно для размещения на Первом слайде смотрите у нас здесь есть фон я хочу от этого потому что я буду ставить туда собственный фон и он мне будет мешать вот этот вот белый фон да Или Светло серый его надо убрать Как это можно сделать раньше можно было например через шп выводить кривую линию вот ровно по контуру и это очень долго и после этого мы получаем только то что здесь внутри Но сейчас всё гораздо проще и сейчас мы с вами это сделаем смотри есть тако И называется он photo.com Вы можете зайти на этот сайт он абсолютно бесплатен Ну бесплатен с небольшим нюансом с этим нюансом мы сейчас с вами тоже поработаем И вам необходимо будет в нём зарегистрироваться для того чтобы получать больше возможностей на вырезку обрезку фотографий смотрите берём эту фотографию и прямо закидываем в браузер ждм несколько секунд и у нас получается результат смотрите у нас вот в правом в правой стороне экрана две два слоя это сам объект и фон так как мы хотим удалить этот фон Нам нужен png файл без фона Нам необходимо нажать на фон и выбрать вот эти вот квадратики Это и будет означать без фона дальше Обратите внимание здесь у в правом нижнем рума это как раз таки единственный нюанс бесплатной версии Ну ещ в том что он не очень хорошее качество выдаёт по итогу файла но достаточно для того чтобы работать со слайдами кстати Так что мы сейчас уже имеем готовый файл и мы можем его экспортировать Для этого нам необходимо нажать на кнопку и он предлагает либо сделать по версии либо перейти на платную версию я делаю по бесплатной он говорит предупреждает что там меньше разрешение но меня это пока не пугает смотрите вот мы получили вот этот файл И он теперь выглядит вот таким образом снизу у нас здесь идёт небольшая Нюшка которая не очень хорошо обрезала Но это как бы совсем ерунда потому что это там близкий был цвет а вообщем очень классно режет и он обрезает там волосы шерсть животных просто великолепно Ну то есть для меня лучши вариантов решений я пока ещё не видел все другие сервисы они по сравнению с рум были похуже А смотрите у меня кстати выдаёт вот файл всегда 1.00 на 2000 пикселей это достаточно большой размер и для слайда он должен подойти так как эта фотография будет не полностью занимать весь размер и даже если Она займёт полностью то будет маловероятна перейм в нашу фигму сейчас мы перетащи наш объект и я объясню что надо будет сделать вот с этим вот логотип ком здесь мы будем хитрить и мы будем просто сужать область Нашего Нашего изображения таким образом чтобы этот логотип ул за область ВМ получаем изображение для работы я меняю размер ставлю его чуть больше но пока это так просто накидка Я ещё не знаю каким именно он будет в конечном итоге поэтому я просто прикинул сюда его здесь его оставлю здесь у меня сверху будет заголовок здесь же в заголовке точнее под заголовком я напишу название вкуса и размещу граммовку где-нибудь сейчас мы это и будем делать давайте для создания текста возьмём текстовый инструмент здесь у нас огромный размер Ну пускай будет пока вот такой так он мне уже предлагает тот шрифт который я хотел использовать это шрифт дюкк я его приложу кма работе точнее вы под этим видео в материалах найдёте этот шрифт вы сможете его скачать установить на компьютер после того как вы его Установите обязательно перезагрузите фигму чтобы он подтянулся в фигму И вы тогда сможете его использовать уже там А дальше я хочу понятное дело увеличить этот шрифт но я не хочу работать вот с размерами кеглей поэтому я возьму использую инструмент Scale помните это горячая клавиша K или ну-ка так что-то произошло какое-то зависание О'кей вот Окей это горячая клавиша и здесь мы увеличиваем наш шрифт я держу зажатым Alt и Shift для того чтобы во-первых у меня была пропорция Не съезжала никуда ничего и во-вторых чтобы также всё по центру двигалось дальше я перехожу в инструмент Move Это я Для начала буду показывать так потом перейду на горячие клавиши А инструмент Move и двигаем наш объект Чуть повыше после этого нам ещё необходимо разместить под заголовок и здесь будет у нас название текста а для того чтобы скопировать я зажал Alt и Shift для того чтобы скопировать и ровно вертикально его отпустить вниз можете кстати брать написание из технического задания потому что там это уже всё прописано это раз во-вторых если вам Клин присылает вы хотя быте себя ответственность если вдруг у вас что-то какая-то опечатка произошла вы её может быть не по своей вине совершите Конечно надо всегда перепроверять всё-таки это ваше качество работы будет зависеть от конечного результата поэтому всё перепроверять клюквенный Мафин добавили пока чуть низ это мы просто накидывай для того чтобы у нас понятна была композиция После этого я чу добавить граммовку и я делаю прописываю граммовку 250 Гра Так у меня во-первых в режиме текстовом здесь видите поставлены заглавные буквы зажаты поэтому он мне всё пишет по умолчанию заглавными буквами но я хочу ввести второй шрифт следующей прине Это тако заголовочный риф ВиДи очертания он достаточно конкретный его видно издалека он хороший шрифт для заголовков Но вот для второстепенных текстов для основных текстов его использовать Ну как-то сильно будет напряжно что ли Ну то есть зрителю смотреть не будет скорее всего приятно и опять же когда мы работаем с акцентами нам надо понимать что акцент на той акцент Чтобы на чём-то одном сфокусировать внимание когда мы либо на одном либо на на одно если мы работаем постоянно с акцентами и делаем их там 10 штук вводим в один слайд в одну картинку то соответственно считайте что у нас нет акцентов В принципе А так поэтому я хочу поменять другой шрифт и для такого случая Я люблю использовать шрифт который называется вот так А смотрите у него Значит начертание тоже погнало под наш первоначальный заголовочный шрифт но мне не нужен такой жирный и я не хочу его делать италик Ну то есть курсивом я хочу его сделать прямым и пускай это будет болт то есть жирный и куда-нибудь вот сюда вот я размещу свою информацию про граммовку Так ну вот в принципе Макет как бы у на готов м ступать уже к его так скажем проработке для того чтобы мне например не нравится изначально вот здесь вот да в моём заголовке то что он сильно активный он такой чёрный и он передавливает даже сам товар поэтому я хочу его сделать градиентным во-первых А во-вторых не таким тмм эти все инструменты проходили поэтому я что-то может быть не прокомментируй Но вот я сейчас регулирую Градиент и у меня задача сделать его более таким Ну не то чтобы невесомым но менее активным и для этого я использую линейный Градиент по верху У меня идёт непрозрачность 100% по низу но при этом с вылетом Да я ниже чуть-чуть делаю 87 то есть здесь ещё меньше в конце внизу так скажем бук пока оставлю такую версию потом посмотрю как это ВС будет выглядеть так я хочу сюда ввести цвет цвет который будет так скажем у нас путешествовать по всем слайдам И для этого я хочу его в первую очередь использую для подложки на подзаголовок возьму инструмент Я сейчас пока буду нажимать вот так чтобы было вам привычнее прямоугольник а так Мы помним что это горячая клавиша R так как у нас здесь основном композиция идёт симметричная поэтому я лишний раз не отказываю себе в удовольствие А поправить э относительно фрейма Любой объект Ну единственное вот 250 У нас конечно не будет симметричен вот э для того чтобы я я могу конечно сделать 250 либо сюда поставить либо сюда поставить но я тогда должен понимать что я буду а жертвовать пространством размера самой самой упаковки вс-таки Не надо забывать что упаковка - это самое главное товар на слайде он самый главный Поэтому ему должно быть выделяться самое заметное место Вот давайте здесь мы введём цвет и мне чем вот эта работа допустим проста да тем что у нас есть упаковка и у неё есть этикетка и мы соответственно можем какие-то стилистики или что-то перенимать из этой упаковки возьму цвет и я поставлю сюда голубой цвет который нам представлен вот здесь я беру инструмент пипетка и делаю такой я хочу сделать тоже градиентом но Градиент он будет у нас полностью залитый Но немного с другим оттенком немного другой оттенок видимо здесь не очень получился так Вот так более-менее я хочу чтобы этот был потемнее сверху так Окей и что-нибудь Давайте как-нибудь вот так его растянется такая такая жёсткая опять же можем его вытащить за линии и таким образом у нас вс-таки Я хочу сделать чуть-чуть чуть посветлее его О'кей Окей так сочетается сочетается дальше а я его подкладывают заголовок точнее А теперь мне необходимо его вниз опустить да то есть я использую либо правую клавишу мыши и дальше нажимаю на на отправить назад либо я пользуюсь горячей клавишей открывающей квадратной скобкой либо опять же через слои я перетаскивают так сделали дальше Что Дальше мы можем сде понятное дело Вот Что Вот этот чёрный мы его тоже таким не оставим мне на самом деле нравится сочетание белого с синим и может быть сейчас по экспериментируем добавим сюда немного а менее активное сочетание смотрите Я когда выделяю вот этот прямоугольник Я хочу в него попасть Да но постоянно Попадаю на это изображение самого товара потому что оно у нас достаточно большое и замещает много пространства поэтому я е сечас сделаю я его прико вот закрыл замочек И теперь я его не могу сдвинуть и соответственно выделять другие объекты без помех могу так я хочу сделать поменьше вот этот прямоугольник я сейчас выделил Сначала два объекта но сейчас обратно вернулся к одному объекту Вот примерно таким Я зажимаю для того чтобы симетрично стороны так как они у нас уже центрована мне лишний раз не хочется с двух сторон двигать поэтому я работаю альтом А вот примерно такого размера Но мне хочется поддержать так скажем геометрию моего шрифта основного заголовочной ну и соответственно подзаголовок наш прямоугольник и сделать его немного сдвинутых А смотрите Что можно сделать Вы помните что мы можем менять форму любой фигуры Для этого нам необходимо либо два раза кликнуть по ней и тогда вот у нас появится Вот такое вот меню сверху Да и появятся точки на углах А мне необходимо сдвинуть вверх вправо соответственно я могу либо выбрать эту точку потом её подвигать вправо а потом выбрать эту точку и тоже её подвинуть вправо либо я могу выделить вот эти две точки вот так вот и через клавиши аккуратненько сдвинуть примерно в такой же угол как у меня идт након у букв Я думаю вот это хорошо да ВС мы получили результат и обратно отцентровать Да поэтому он сам немного визуально тоже сместился мы его Вер обратно Ико чтобы у нас вот это вот место оно ну как бы очень много занимает места заголовок Я хочу его поджать Поэтому поднимаю под заголовочные имеет место быть Ну когда у нас идёт подзаголовок внизу но в принципе здесь буквы такие заголовка массивные что я думаю будет льно вынести их наперёд поэтому я сейчас с горячей клавишей с закрывающей квадратной скобкой вынес на первый слой вот эти два объекта два объекта это мой прямоугольник искривлённый который стал трапецией да и подзаголовок я их вынес вперёд и дальше я хочу ещё добавить определённый эффект для моего для моей трапеции смотрите Я хочу сделать некое свечение Мне эта тема поминает Ну вот какой-то я не знаю киберпанк что ли или что-то что-то такое но я не знаю киберпанк конечно не очень хорошо с этими с овсянкой как-то пересекается но такая такая стилистика У нашего товара Поэтому в принципе мы можем её где-то что-то поддержать а видите здесь у нас есть такое неоновое свечение на вот этом вот лице и в принципе здесь на точках тоже я хочу нечто подобное сделать здесь же смотрите мы можем а провернуть следующую историю выделяем прямоугольник Ctrl C Ctrl V копируем его и он у нас получился в двух слоях абсолютно одинаковый теперь я беру Нижний прямоугольник не верхний а Нижний прямоугольник и даю ему эффект Я его хочу размыть у нас по умолчанию помните здесь сначала будет Drop Shadow но нам нужно будет Вот это вот размытие слоя потом сечас он абсолютно незаметен я его сделаю побольше хотя бы где-нибудь 50 ну вот это прикольно Вот так и будет нормально так и оставим такой вот такой эффект мы получили с помощью двух прямоугольников при этом контур у первого верхнего виден а Нижний как будто как у машины неоновая подсветка а Светит нам вниз а дальше для того чтобы с этим блоком я в принципе закончил Ну вот именно с подзаголовок потом выделяю второй прямоугольник зажатым контролом и выделяю А сам текст клюквенный маффин и нажимаю горячую клавишу Ctrl G это группа Всё у нас получилась группа мы её зафиксировали она у нас здесь а заголовок сам у нас отдельно пока живёт всё здесь мы завершили эту часть теперь Теперь я хочу разобраться вот с этой граммов кой у нас здесь 250 г и нам в принципе тоже надо подсветить его для того чтобы это было всё понятно я использую форму геометрическую Круга и на неё располож вот этот вот объект Наш текст а видите он у меня опять же снизу оказался Да я через горячую клавишу закрывающую квадратную скобку поднимаю его наверх и работаю с ним здесь А смотрите у меня здесь Какая история я его хочу расположить в перспективе В перспективе под вот этой вот под упаковкой как это будет выглядеть я нечто подобное хочу вот сделать но что мне здесь не нравится то что 250 У меня прижата к левому краю и она как-то Ну визуально не очень хорошо смотрится как будто бы она заехала под эту упаковку уже поэтому я а разделю это на две строчки Ну то есть вот эти 250 г на две строчки у меня видите здесь по умолчанию стоит разрядка и в этом шрифте Вот она вот такая вот авто разрядка Точнее не авто разрядка а расстояние между строк межстрочное расстояние Оно большое Поэтому я сделаю в ручном режиме его сокращ это конкретно для вот этого случая потому что у нас как бы тут идёт такое макетирование которое ближе наверное к афиш макетирования некоторыми правилами типографики и там может быть вёрстки потому что здесь больше такая идёт рекламная ли карем Я хочу сделать этот размер именно 250 побольше и например 170 кег Посмотрим как будет выглядеть в принципе Норм а но вот этот грам А мне здесь не очень нравится потому что р потому что он как бы немного Ну теряется смотрите Кстати я работаю в одном текстовом поле но у меня разные кегли у вот этого да у 250 У меня 170 кегль стоит а а у этого 128 кег стоит И когда я нажимаю на этот текстовый бок у меня здесь написано где вместо где размер шрифта показан смешанный Это значит что у нас здесь присутствует два и более размеров но я хочу сделать во-первых грамм прописать полностью и так как он у нас вылетел ещ больше стал я его возвращаю примерно Тае же растояние как 250 вот у нас есть 96 в данный момент Да я нахожу здесь вот точку и можно потянуть вот за эти за эти значения вправо или влево и мы будем по чуть-чуть увеличивать или уменьшать вот 99 Я думаю что это хорошо симпатично смотрится так как мы ввели уже одну цветовую комбинацию сюда Я её хочу и использовать дальше в частности я окрасить че Тай же цвет как и этот прямоугольник это трапецию Точнее я выделяю трапецию и помните Да у меня в разделе л заполнение есть значит настройки цвета я могу эти настройки просто копировать я нажимаю Ctrl C выделяя Вот именно вот здесь вот в этой точке В этой зоне я выделяю и нажимаю ctr далее когда я просто выделяю Новый объект достаточно т нать у Ctrl V и он окрасится в тот самый цвет в то в ту самую цветовую гамму В какой у меня гамме находится и первоначальный объект так мне всё-таки чего-то не хватает возможно возможно мне хочется сделать более а более об объёме сую что ли вот этот перелив давайте сейчас посмотрим на примере с белым шрифтом я сейчас просто подбираю комбинацию в принципе нормально Я думаю что здесь можно использовать вот здесь он как будто бы чуть-чуть разъезжается но это возможно из-за эффекта размытия нижнего схо Я думаю что здесь можно чуть-чуть добавить эффект тени того чтобы прорисовать контур букв И тем самым мы можем Ну как бы выделить её и дать больше объёмно в принципе нашей композиции заголовочной А здесь мы тоже сделаем чуть-чуть вправо отступим посмотрим как это вот меня как раз вот эта зона волновала потому что здесь N как будто бы чуть-чуть сливалась а тень Достаточно неплохая но мне вот хочется её сделать чуть-чуть менее опять же агрессивной такой я до 20 сниу вот так в принципе и контрастность сохранилась и тень тень симпатичная у нас так всё хорошо Теперь точно такой же мы применим эффект проверим точнее такой ли цвет у нас находится здесь видите здесь важно попасть А у меня выделена была группа поэтому я не мо попасть в свой обет такая же группа применена поэтому я один цвет убрал И теперь у меня здесь всего один цвет остался одна Одно одна цветовая схема точнее дальше Давайте поработаем с 250 250 Мы можем отцентровать с помощью наших направляющих которые нам подсказывают А где у него центр здесь в принципе нормально То есть он встал неплохо оставляем так мне тоже здесь у 250 не хватает нюш поэтому я сейчас её наверное прямо отсюда заберу Вы помните что любой эффект можно скопировать прямо да и применить под а другой объект Вот она у нас скопировала точно такая же как и здесь никаких разногласий у нас нет теперь так ну в принципе всё теперь я хочу поработать с декором информацию Мы Разместили дальше мы в конце ещё посмотрим что с упаковкой сделать потому что это ещ не конечная версия где она будет стоять у нас и я хочу сейчас Добавить сюда декор для декора у меня припас значит следующие изображения здесь есть вот такие ягоды они кстати вот это вот и вот это они уже в ПН их можно использовать прямо перенося вот сюда и они у нас без фона добавляются это тоже коме и Shift Но это нужно для того чтобы у нас пропорции нигде не уехали и наше изображение нигде не подрезала потом я хочу использовать листья этой самой клюквы вот смотрите у нас есть вот такое изображение У нас есть одно изображение по сути с листьями но я хочу сделать здесь ну Два листа сделать Да например чтобы они были этого с снова перехожу на домашний экран на домашнем экране У меня есть вот эта функция загрузить и здесь первым делом всегда я обрезаю этот фон убираю его Потому что если мы его не уберём он у нас скачается с таким же белым фоном как и вот здесь на картинке по сути это тоже самое что мы закидывали но смотрите Как отделить вот этот лист от вот этого листа в данном случае можно воспользоваться внутренним инструментом находится он вот здесь смотрите когда мы именно нажимаем на объект наш и вот здесь вот у нас есть такие вот ножницы мы их нажимаем и он предлагает два варианта вот выбираем красный и когда мы красным проводим по тому объекту который необходимо удалить он это понимает и удаляет именно этот обект второй объект оставляет таким как бы да смотрите если я например вот это изображение сделаю вот таким образом то у меня при уменьшении вот поля этом фигме Я залезу на свой же лист Да и его обрежу получается для этого я могу подвинуть здесь на холсте мой объект для того чтобы он не пересекался с логотипом форума ВС яго двинул и нажимаю скачать скачиваю в ту же папку и иду фигму вот смотрите Теперь его вот у нас Интересная история получается здесь или не получается да получается смотрите у нас здесь вроде бы ещ здесь не подреза да до конца Но лист уже сверху начинает подреза если мы уберём логотип то мы получим обрезанный лист нам этого конечно делать Не нужно поэтому здесь у нас вступает следующая механика А смотрите мы берём Мы же знаем что этот лист выше находится да чем вот этот а но так когда мы меняем размер Он у нас идёт симметрично Даже несмотря на то что я ничем ничего не зажимаю это просто по умолчанию фигни так устроено я нажимаю на Вот это изображение вправо улу и здесь вот у нас в выпадающем меню есть Э где л написано мы берм вот этот вот параметр роп и кроп у нас идёт как раз видите с одной стороны идёт обрезка мы поближе сейчас сделаем чтобы точнее наш наша Операция прошла Вот и когда нам нужно уже достигли нужного эффекта нажимаем Enter Всё у нас изображение обрезалось так как нам нужно и логотипа у нас нет но при этом есть листочек Так давайте сечас зам второй че обем возвращаемся в снова идм вот в эту настройку А смотрите здесь сейчас мы делаем наоборот сейчас мы возвращаем вот этот объект нажимаем на зелёный инструмент и тоже самое но делаем с зелёным инструментом он нам его вернул смотрите здесь Кстати да вот так как эта фотография была скана с интернета она была с водяным знаком не заметил этого Но вот тут вот написано Да название название фотостоках использовать в маленьких размерах и потом ещё его будем размывать нам в принципе не стоит бояться того что вот эта надпись будет видна она не будет видна но если мы будем использовать изображение и мы получили файл таким образом то конечно Это изображение не подойдёт либо надо воспользоваться каким-то инструментом который удаляет водяные знаки либо сделать ну какой-то другой альтернативный путь найти теперь Мы возвращаемся в режим резинки и стираем её уже второй лист всё подтверждаем Ту же самую манипуляцию делаем со вторым листом скидываем в папку и потом уже скидываем наш дизайн файл Так у меня тут какой-то глюк небольшой был поэтому он у меня не закинулся с первого раза я просто нажал escap и сейчас заново повторил действие редко но бывает такое дальше Всё мы получили два листочка с ними можем уже тоже поработать дальше Мы можем взять е какие-нибудь ягоды Ну пока Ладно давайте вот так вот разместим Давайте поработаем с вот этим листом мы сейчас будем создавать эффект такой как бы левитации или я не знаю какого-то урагана который вот поднимает разные предметы и они как будто бы летают рядом с нашим объектом естественно нам нужно это всё ради того только чтобы передать атмосферу а этого вкуса клюквенный Мафин Да так как здесь естественно в составе Мафина Нет мы можем в Техническом задании немножко забежать вперёд Да и посмотреть здесь состав у нас на втором Понятное дело что Мафин не может попасть в состав гранолы Как так как это уже готовый продукт поэтому мы его используем только Ну то есть образ клюквы на нашей изображени Смотрите мне хочется вот этот вот эту ягоду разместить плашку но так как она у меня листьями сюда перекрывает буквы и буквы немного теряются я её отражу по горизонтали для этого я делаю Вот это Флип горизонталь горизонталь отлично произношение у меня дальше я чуть-чуть его так [музыка] наклон эту ягоду закинем сюда я зажал и у меня автоматически поло пошла копия смотрите здесь у нас как бы идёт сейчас постановка композиции для композиции нам нужно так скажем какой-то уравновешивание да то есть мы композицию постепенно уравновешивать как слева так справа как сверху так снизу вот для этого мы сейчас используем и будем раскидывать наши элементы в разные стороны а элементы тоже должны быть по-своему так скажем отработаны эту так как ягоды вот эти вот видите они у нас одинаковые и мы их будем использовать несколько раз поэтому я им даю разные интерпретации какую-то я могу отзеркалить по горизонтали какую-то по вертикали обязательно поменяю размер для того чтобы они были менее похожи друг на друга и обязательно потом дам им разное размытие для того чтобы они выглядели по-разному так эту ягоду мы используем здесь и потом её разместим ниже То есть я сейчас нажал на горячую клавишу но вы видели что у меня слой перескочил Вниз А дальше я так как эту ягоду уже сильно заюзал Я её хочу комбинировать со своим Вот с таким вот листочком для того чтобы быстро копировать я повторюсь я нажимаю Alt и тяну в сторону Любой объект он сразу идёт на через копирование так ягоду я хочу повыше поднять листочек пониже поэтому я нажал опять же горячую клавишу с шифтом работаю для того чтобы поменять размер более-менее сделать соотношение вот этого листа с ягодой и дальше чтобы нас вот эта вот пипочка не светилась везде не выдавало Что это у нас одна и та же ягода я её вот так вот разр и уберу её за кадр А это у нас будет как бы такая вот совместная композиция в принципе даже её могу сгруппировать чтобы потом с ней вместе работать дальше этот листок Я хочу с помощью него уравновесить композицию с этой стороны и так как у нас идёт вот этот лист в эту сторону смотрит Я хочу сделать этот лист немножко в эту наклон и по размеру его Ну чуть-чуть тоже чтобы он отличался так а теперь теперь А что мы сделаем Теперь мы добавим ещё вниз клюкву рядом лежащую с с нашей упаковкой Вот эту вот клюкву она у нас также в джипег с фоном поэтому мы сейчас перейдём в рум на домашний экран и здесь мы закинем её вовнутрь первым делом убираем фон чуть-чуть её подгоняем повыше видим что здесь не пересекается скачиваем проносим через папку я делаю всё через папку Чтобы у меня сохранилось в папке потому что мало ли что-то потом чтобы х шки вот эти вот я вам не предоставлю сразу скажу и вы их не увидите потому что я хочу чтобы вы поработали самостоятельно с форумом и посмотрели как он работает с ним побольше так скажем времени провели тогда у вас будет сформирован хороший навык и вы будете себя в нём хорошо чувствовать в принципе программа очень простая но вс-таки надо еже поработать с ней чтобы когда вы перейдете на заказы у вас уже этот навык был супер отработанный и вы не парились за то что у вас там чего-то вы не знаете и знали все возможности этой программы так Ну наверное Вот как-то вот так вот и сделаем ему центровку центровку пока вот такую оставим так добавим достаточно классический что ли будет вариант решения вот у меня есть такой фон с кухней я убираю вот эту нижнюю часть за предела моего фрейма и потом его тяну таким образом чтобы чтобы у насчитывал образ кухни так в принципе здесь вот эти вот лопатки и всё остальное есть это видно И мы в принципе понимаем что это всё кухня и значит это товар относится к кухонной тематике или к продуктам значит питание что оно есть вот дальше смотрите сейчас мы будем делать магию с помощью вот как раз-таки инструмента бра смотрите например вот берём один из объектов нажимаем эффекты и добавляем ему BL а давайте ему вот на четыре Да ему практически ничего там не не стало заметно если мы добавим ему побольше например 20 блюр то он у нас вот такой вот размытый получился но в принципе достаточно симпатично размытый где-то наравне с кухней Ну там кухней наверное побольше даже Ну в принципе нормально просто какое-то красное пятно при других версиях мы поймём что это красное пятно означает ягоду Давайте снова приколом наш наше изображение товара И кстати можно приколоть сразу фон чтобы он тоже нам не мешался в выделениях дальше мы берём следующую ягоду эффект мы можем этот копировать чтобы было проще быстрее тоже поставили 20 я далеко находится ее находится к экрану мы его соответственно брим меньше Но мы также можем Добавить сюда эффект для того чтобы нам быстрее настраивать и например поставить его сюда 12 Давайте даже наверное де такой бр Окей Сюда Тоже Ctrl ctr я делаю и автоматически приме эффект на Новый объект здесь я тоже поставлю его поменьше примерно 14 ещё поменьше 10 10 Окей как я понимаю Окей или не окей по ощущениям просто по ощущениям смотрю и смотрю где он относительно там может быть Ну просто как бы представил вот здесь наверно будет так как у нас фокус на упаковке значит наверное ближе к упаковке он будет меньше брится соответственно вот этот например он у нас меньше всех за брится тут пускай будет Пятёрочка Пятёрочка слабенько смотрится семёрочка вот так пускай будет здесь будет у нас где-нибудь около того же где-нибудь тоже семёрочка этот объект Я тоже заблюрить я ему поставлю где-нибудь двоечку Вот он будет еле-еле заметен и добавлю ему небольшую теншоу для этого я ещё зайду в наш в нашу настройку по иксу я двигать не буду тень по игре О'кей а чуть-чуть она сдвинулась вот так может быть и поставлю сюда блюр тени чуть побольше и она будет где-то также подыгрывать как и упаковка всё и здесь в принципе можно сделать Чуть поменьше 20% А так Смотрим что не так вот этот лист У нас остался без блюра добавляем сюда и тоже бр и делаем его не таким сильным Давайте на 14 поставим всё О'кей всё вроде бы всё вертится крутится где-то рядом летает э эффект передаётся здесь у нас одинаковый блюр поэтому мне это не очень нравится я его сейчас чуть-чуть изменю сделаю чуть-чуть побольше Пускай здесь будет десятка так мне сейчас не нравится то что у нас пакет как-то не очень дружит с нашей поверхностью стола поэтому надо добавить тень боковую потому как у нас здесь есть маленькая теншен свете Такая она может образоваться но так как мы посмотрим на саму упаковку мы увидим что правая сторона засвеченная здесь Возможно у нас появится Тень для правдоподобности и вот для того чтобы это всё смотрелось хорошо мы сейчас добавим сюда тень как это сделать смотрите так как у нас всё в слоях мы можем сделать а один слой Так сейчас мы во-первых а скро пока нашу клюкву А мы можем сделать отдельный слой с тенью смотрите мы здесь рисуем так называемый шейп это фигура вот Вот она допустим у нас пойдёт вот таким вот [музыка] образом и потом где-то вот так же примерно по границе стола Да и дальше мы создаём этот шейп А дальше мы создаём ему заливку убираем если у вас образовалась обводка то убираем обводку А после этого мы делаем темнее её этот шейп и отпускаем его за наш пакет дальше переходим в эффекты и добавляем эффект размыв нашего объекта например на 60 смотрите у нас тень получилась такая достаточно очень Тёмная Да и она перекрывает фактуру нашего дере Соответственно что мы делаем вот здесь у нас есть заливка процент заливки мы её можем уменьшить сейчас у нас 100 если мы поставим например 30 то получится Вот такая небольшая тень но при этом она становится Вполне себе естественной и и выглядит неплохо но мне хочется немножко оторвать е чтобы она не соприкасалась прямо с границей и лучше таким образом считыватель у нас видно что она идёт по форме пакета и в принципе она как бы не конфликтует с ней и становится более-менее понятно что она она именно к ней относится дальше мы возвращаем нашу наши ягоды где они Вот они и у ягод тоже самое произойдёт да и у ягод видите тоже есть блики с правых сторон Хотя тут есть с левых сторон но я думаю это так как слайд будет считываться очень быстро ну вы представляете Да там время внимания слайда на слайде будет примерно там 3 секунды максимум то есть такие мелочи над ними можно конечно не заморачиваться но так или иначе мы сейчас сделаем небольшую тоже дополнительный Шей для того чтобы повторить форму наших ягод и потом сде тень именно от них Я просто дублирую по контуру вот нашу историю приблизительно тут смысла нет прямо делать Точно Точно Вот завершаю закрываю и также те же самые манипуляции в принципе делаю что и с преды такт но сейчас я покажу В чём тут будет небольшое отличие так здесь Мы также её меняем и помним Да мы там делали 60 размытия здесь пускай будет у нас тоже 60 А здесь у нас было 30 здесь пускай будет тоже сделаем 30 теперь этот шейп отпускаем ниже для того чтобы он у нас точно оказался под ягодами так и выдвигаем его в сторону по направлению нашего Света предполагаемого вот в принципе уже О'кей единственное можно придраться то что у нас пакет стоит здесь Да и от тени до пакета гораздо больше расстояния чем от ягод э до этой тени да то есть до поверхности соответственно здесь граница должна быть этой тени более чёткой поэтому мы можем здесь вот этот как раз то различие о котором я говорил а здесь мы можем уменьшить бр до например до пся посмотрим как это будет выглядеть Давайте попробуем 40 посмотрим что изменится так ну 40 я думаю более-менее приемлемо и вот как-то вот так вот её сделаем всё О'кей теперь теперь с этим Хорошо теперь наш а объект стоит на плоскости Это очень хорошо так друзья сейчас мы будем делать второй слайд второй слайд мы смотрим в Техническом задании и смотрим Что это состав смотрите здесь у нас также надо будет использовать Ту же самую фотографию упаковки товара где показана лицевая сторона соответственно мы идём в нашу фигму и копируем наш фрейм для того чтобы использовать основные элементы в принципе с него А смотрите я могу поудаляла буду копировать но не буду удалять например [музыка] сам само изображение товара Также мне здесь не нужна будет подложка фоновая Я здесь хочу использовать однотонный фон и соответственно поработать с упаковкой смотрите Я хочу использовать здесь следующую композицию так как у нас идёт речь про состав и в составе указано что тут есть овсянка с корицей орех кешью клюква вяленая банановые чипсы белый кунжут Мне кажется что если мы это просто перечислим текстом то это будет Скучновато поэтому я хочу добавить дополнительные графические элементы для того чтобы это смотрелось во-первых более привлекательно во-вторых более интересно что ли можно было бы как-то за что-то глаз зацепить потому что мы эту картинку гранола уже видели у нас хотелось бы сюда конечно разместить фотографию а рассыпанный Нол чтобы посмотреть что внутри пакета но к сожалению от заказчика не было передано такой фотографии поэтому мы её не можем использовать её нет просто-напросто для этого смотрите так как у нас информации будет достаточно много Да и здесь вот ещё Кстати у нас есть вот аж такой примечание вот такое примечание То есть это достаточно большой абзац текста который надо расположить на нашем слайде мы соответственно обладаем не очень много не очень многим местом но так как мы уже показали Наш товар Я предлагаю его задвинуть за край нашего фрейма и оставить примерно в такой вот позиции почему яламе вот вот нет но и вот что-то здесь совсем непонятное то есть здесь у нас название идт вкуса и я хотел мне хотелось бы чтобы название вкуса у нас оставалось в видимой зоне Я думаю что можно чуть-чуть побольше сделать вот как образ мы оставим то что мы имеем отношение именно с этим товаром нам надо будет объяснить нашему зрителю что речь здесь пойдёт о составе поэтому первым делом также сделаем заголовок и напишем состав заголовок у нас достаточно большой кегль Я не хочу использовать такой же огромный ну он опять же будет сильно сильно выделяться поэтому я уменьш его например в два раза сделаю вот нам размере кстати размер при размере нашего фрейма 1.800 на 200 2.400 смотрится именно так в другой размере в другом размере фрейма он будет выглядеть по-другому То есть если соответственно у нас фрейм 900 на 1.200 то соответственно этот будет выглядеть в два раза больше текста Вот почему я так объясняю подробно Да это первая наша с вами практическая полноценная работа с карточкой товара поэтому я проговариваем максимально всё для того чтобы вам было понятно из у нас уроки длинные получаются Да но я хочу чтобы вы максимум поняли и уловили всяких Вот таких вот маленьких нюансов побольше чтобы вам легче дальше было двигаться а опять же приколом фрейму наш объект для того чтобы он не мешался А здесь оставим также и нам необходимо прописать сам состав так как у нас в составе на только натуральные ингредиенты Давайте напишем хоть этого и нет в Техническом задании но в принципе это позитивный момент а пропишет здесь что а только натуральные продукты были использованы для э нашего товара из значит я беру из первого слайда Снова под заголовок я буду из него делать тоже подзаголовок но он у меня находится в группе Я хочу сделать небольшой немного другое решение поэтому разгруппировать так Смотрим он у нас чуть-чуть не влезает для того чтобы там не ловить нужный кегли Я просто воспользуюсь клавишей и подожгу его до нужного мне размера Понятно белый на белом не будет он здесь поэтому я ему придам то же тот же цвет что и у нас акценты цветовые поставлены Я два раза щёлкнул На вот этом Круге да и у меня получилось что я залез в настройку формы но мне нужно было только на активировать его для того чтобы забрать отсюда на образец цветового решения дальше я выделяю этот объект и копирую и Вставляю эту настройку вот смотрите здесь тень смотрится более агрессивно чем вот в этом случае здесь она во-первых други х сочетаниях во-вторых что более важно она используется на большем размере объекта здесь у нас текст поменьше поэтому текст поэтому Тень у нас вываливается как будто бы из вот этого всего давайте сделаем её менее заметной и поставим 15 примерно так это такой маленький нюанси но я думаю что он не будет вам лишним дальше смотрите у нас дальше идёт перечисление Давайте используем его овсянка с корицей я буду использовать здесь шрифт который у нас был дополнительный на Первом слайде А я уберу а у него эффект и он у нас Совсем пропал потому что белый на белом Да но мы вернём ему цвет и сделаем его Ну вот не совсем чёрным А вот таким вот мное дальше мы возьмём ему размер придам единый 64 Ну может быть с корицей Я буду работать только со строчными буквами поэтому здесь уберу лишнее смотрите сейчас я буду их примерно выставлять друг за другом даре Shift И перехожу ко второму пункту соответственно копирую его вставляем Ладно потом доработать с этими буквами с регистрами точнее Да банановые чипсы всегда боюсь за зубы когда их ем что-то Они слишком твёрдые и белый кунжут так всё О'кей Теперь мы меняем регистр заглавной буквы на строчную п и Б так О'кей А я буду выполнять её А в следующем порядке смотрите во-первых чтобы они ровненько относительно друг друга стали Да когда я их выделил помните Да из предыдущих уроков что мы можем нажать на эту клавишу и у нас они станут вообще ровно ровны то есть до пикселя а пускай будет у нас чуть-чуть побольше межстрочное расстояние между вот этими объектами И кстати да я их всех выделил в отдельные поля для того чтобы потом с ними легче работать было а сейчас э я передам им вот такую такое выравнивание Пускай это будет с по правой стороне и сейчас мы добавим объекты с нашими подсказок такими визуальными Так а здесь у нас будет Первое это овсянка вот я скачал откуда я беру эти фотографии во-первых Да а беру я их из открытых источников некоторые Ну опять же какой вариант Вам да будет приемлемым скорее всего бесплатный открытый источник можно использовать покупать подписку на фотостоки но я на самом деле крайне редко вот пользуюсь нечто подобным потому что мы как правило делаем весь контент самостоятельно Поэтому нам Ну как бы все фотографии у нас уже есть свои но если заниматься чисто инфографикой то скорее всего да будете часто прибегать к таким механикам и скачивать какие-то бесплатные или там стоковые приложения ой стоковые изображения так чу уменьшил для того чтобы опять же а не конфликтовал не обрезала в перспективе мне потом так как изображение будет ну крайне маленькие просто на слайде Я представляю Сейчас вы увидите просто это то я особо не парюсь за счёт качества этих изображений банановые чипсы убираем фон скачиваем закидываем так и у нас осталась вишня ой вишня клюква вяленая вот смотрите Да здесь изображение практически в квадрат уходит и вот нам очень сложно будет его обрезать нормально тогда мы просто делаем а Ну вот так вот подстраивать поменьше ничего страшного нам хватит этого разрешения и последний у нас объект остался это кунжут белый вы просто не представляете сколько раньше времени требовалось для того чтобы вырезать объект с фона даже с белого фона Например если в Фотошопе вы работали и это надо было сделать Ну были автоматические там способы но они так криво работали и их надо было до автоматизма ещё довести чтобы они нормально обрезали А сейчас это делается Ну просто в три клика Да ещё и на бесплатном инструменте с небольшим нюансом но я вообще за то чтобы купить платную подписку я действительно Вот например Здесь очень часто пользуюсь но я здесь вот сейчас в данный момент ну как бы у меня нет платной подписки но и сейчас я буду вам показывать на бесплатной подписке для того чтобы всё было так же как и как и у вас смотрите здесь я как будто бы совсем рядом поставил поэтому чуть-чуть приподнимают у меня уже скачалась вторая версия вот этого кун Вот видите здесь по эю чтобы закидывать это ВС в наш фрейм здесь у нас будет овсянка сразу удаляем её Да кстати я так вот думаю ну как бы так не хотел использовать Я сейчас хочу ещё добавить некоторый небольшой элемент А я хочу это сделать вот эту вот визуализацию в виде табов Что такое табы Ну это типа как будто кнопки подсказки знаете такие они имеют Такую форму круглую полукруглые вот так вот скруглить им объёмно с Пускай это будет Вот как-то так выглядеть но при этом нет так посветлее еле-еле заметный Градиент и пускай здесь будет тень тоже на мягенькая так всё отлично Вот примерно такой Тап я себе и представлял дальше его чуть-чуть расширим и усм его Вниз для того чтобы отцентровать также через Alt чтобы ровно по вертикали двигать и через Shift точно также делаю с третьим с четвёртым с пятый всё И теперь буду добавлять вот сюда Вот наши образы в эту часть таба по идее как бы если в интерфейс смотреть Да ну то есть на сайтах табы используются с изображениями но чаще всего используются просто с текстом А и изображение Ну вот здесь мы просто как бы немного так вынесем его за пределы таба для того чтобы форму его чуть-чуть подчеркнуть и сделать чуть-чуть более заметно когда она выбивается из так скажем общей какой-то композиции и она становится более заметным заметной так дальше орех кешью где он вот он пробуем его обрезать обрезать У нас не получается значит уходим по второму варианту и делаем ему кроп Режем только с одной стороны дальше через Shift и Alt уменьшаем его весу визуальному весу примерно как вот наш первый Объект от него и будем плясать есть такое понятие визуальный вес вы его так скажем он ощущается просто это не где-то прописано Да что вот у этого вес там 3 г у этого 5 Г визуальный вес Он на той визуальный чтобы мы просто его представляли вот вот это выглядит больше Вот это меньше быть при этом равными по пикселям Да по фактическим значениям но по факту они будут выглядеть по-разному это как бы один из таких Знаете ну часто встречается в разных а иллюзиях что ли визуальных А вот здесь я вообще накосячил с бананом Не зря я их не люблю Давайте снова значит зайдём и снова банан об Режем убираем на него фон Ну да конечно уменьшаем как вы поняли раз размер очень маленький у нас будет использоваться поэтому ничего страшного что мы здесь его ещё уменьшили нам это за глаза хватит Так теперь несём новое изображение к нам и вот так уже нормально всё бананы ставим и тут вы заметили Да ставим относительно вот этих всех объектов тоже по центру Они конечно могут быть немного сами по себе в разные стороны гулять потому что изображение неправильное неровное но так или иначе мы хоть как-то подгоняем под общую а ось И это всё равно будет смотреться дружно так хорошо о'кей вот Окей всё так и оставляем всё соответствует изображение изображение соответствует этому Окей Смотрите мне что сейчас не нравится то что у нас правая часть нашего слайда перегружена да то есть у нас здесь очень большое графическое такое графический элемент Наш товар и здесь у нас Мы опять же на правую сторону перевесит этими нашими изображениями образами состава составных частей давайте мы тогда сделаем по-другому во-первых поменяем Вот эту вот историю выделим все а текстовые блоки я их выделял через Shift для того чтобы их вместе сделать так и сделаем выравнивание по левой стороне дальше мы их так чуть-чуть о двинем Теперь выделим все изображения и унесём вот сюда вот так как они у нас там пересекались я их немножко скомкано поменял местами но смысл от этого не изменился всё О'кей хорошо здесь мы с табами разобрались в принципе выглядит всё хорошо дружно Мне нравится дальше мы переходим к вот этой вот надписи Которую мы должны написать обязательно но при этом мы должны будем её применить только к овсянки потому что речь идёт про хопи смотрите здесь мы берём какой-нибудь копируем объект текстовое поле точнее и так как у нас здесь уже пойдёт текст Я не убираю здесь первую букву не делаю из не Я не хочу чтобы этот текст так как он вспомогательный вспомогательный к вот этому тексту Да конкретно вот к этому я хочу чтобы он у нас был менее заметным и соответственно Я хочу ему убрать начертание вот до такого уровня смотрите когда я делаю несколько несколько строчек то у нас всё не очень красиво выглядит потому что здесь у нас межстрочное расстояние поменялось так и допустим если мы используем сюда другой кегль например пятьдесят пятый вот в три строчки это будет О'кей Я бы даже ещё пятидесятый поставил это прямо такая информация не супер важная не самая важно смотрите Но вопрос В чём овсянка здесь у нас стоит на первом месте и Но это относится к овсянке теперь нам надо как-то это связать Да почему мы не можем например овсянку перенести вот сюда последнею вообще логически это будет Неправильно потому что овсянка составляет основу этой гранолы То есть она е там больше всего Понятное дело что она должна быть ээ первая соответственно мы её оставляем там но а делаем какую-то сноску Либо мы можем например какую-нибудь Аля звёздочку поставить и потом её сюда продублировать да либо какой-то другой знак либо что-то ещё Либо мы можем использовать давайте для тренировки навыка А работы с кривыми мы используем кривую линию которую мы поведём вот отсюда вот я помните беру инструмент перо и сразу зажимая его Да тяну [музыка] до до моего значения Пока это так сделаем сейчас мы будем его править и нажал Enter для того чтобы зафиксировать Теперь я снова нажимаю enter но для того чтобы его уже редактировать вот этот Усик меньше сделаю А вот эту точку Я отведу вот сюда чтобы линия была во-первых полностью в фрейме для того чтобы она не терялась Да смыс по смыслу было сразу понятно к чему она относится Вот и при этом она огибала не задевала Никакой из других табов и относилась только к нашему Табу с овсянкой так посмотрим как он сечас выглядит в принципе никаких переломов нет оставляем её такой дальше выводим на нижний слой для того чтобы она погрузилась под та вот вполне конкретная У нас связь образовалась Теперь мы можем ещё сделать другую линию Вот посмотрите мы когда поставили точки да Сюда Ну вот прерывистую линию А у нас здесь по умолчанию чере Т это очень маленькая тока 10 сделаем 10 а сделаем её не чёрной а серой так как мы её сделали серой мы её можем чуть-чуть потолще сделать на примерно двоечку поставить Вот так Окей эту чуть-чуть ниже отпустим для того чтобы ну совсем вот эстетично у нас начиналось с середины первой строчки заглавной буквы Вот вот с этой точки начинается у нас линия всё это как бы Старт нашего текстового поля А дальше нам необходимо нечто что может украсить этот слайд Смотрите мне например Здесь так как мы говорим всё ещё про этот состав мне э хотелось бы сюда добавить какой-то декор Ну декор мы можем использовать те же ягоды это в принципе хороший приём когда мы используем один и тот же декор на слайдах в разных слайдах Ну для того чтобы так скажем а общую историю этого слайда подчеркнуть Так давайте его чуть-чуть отрази поставим Вот так это будет Вот чистый Рандом вот как что станет Я просто по низу хочу немного ягод и листочков накидать для того чтобы а поинтереснее у нас смотрелась композиция Да всё-таки у нас когда на маленькую переходим Да вот большое размытие ему уничтожает практически объект давайте мы дадим 15 Давайте потом ещё вот такую ягоду возьмём поболе тоже её заблюрить до Одина а этот можно чуть-чуть поменьше так так эта ягодка у нас неповторимая поэтому мы её отсюда утащили Ну как бы мы их дополнительно поворачиваем для того чтобы совсем уж они не были похожи идентичны тем которые мы видели на предыдущем слайде Понятное дело что они будут теми же самыми но так как мы их развернули размер поменяли и так далее У нас всё равно немножко картинка поменяется и не будет уже выглядеть такой же как предыдущая однообразие будет не такой очевидно так так вот этот листок мне мешает захватить ягоду два раза кликнул случайно на этом так давайте я вот сюда добавлю ещё один листочек вот отсюда сверху он у нас другой помните мы его там по-другому рисовали пускай он тоже будет у нас вот такой вот размытый так О'кей сверху немного не хватает Да здесь у нас достаточно загружено но без перегруза с воздухом Здесь тоже здесь тоже здесь какой-то ну просто какой-то хочется уравновесить опять же верхушку Поэтому я думаю что мы во-первых чуть-чуть приподнимется Вот так и потом мы сделаем вот смотрите здесь у нас есть эффект вот такой вот текст друг за другом идёт да А давайте мы его повторим повторим но с небольшим изменениям так как у нас здесь используется курсив то есть наклонный шрифт мы его сейчас немножко смещать будем так друг за другом И здесь тоже не будем его утяжеляет заливку мы ему уберём и ещё раз такой же корнём сделаем его продолжением сделаем примерно на таком же расстоянии Как и стоит первый от второго для того чтобы они нормально сочетались Я хочу чтобы он уходил у меня За горизонт поэтому Ну не За горизонт за фреймовый поэтому я его чуть-чуть Вот так сдвигаем А смотрите Я бы хотел ещё достичь эффекта как будто бы он у нас исчезает Да туда там дальше меньше и меньше его видно поэтому я его эту историю поддержу градиентом во-первых первого слайда ой первого написания во-вторых эту чуть-чуть поактивнее сделаю линию А эту наоборот менее заметно будет Вот так так Окей таким образом Ну вот мы там ещё подняли заголовок Да у нас повыше Давайте тогда вот это вот опять же уравновесилась я наверное только вот этот пододвинуть не совсем типичные правило м композиции так скажем вёрстки да то есть мы как будто бы не по вертикальной линии их выравниваем Вот именно вот эти тексты А по наклонной поэтому продолжением логичным вот здесь будет являться Старт вот этой строчки отсюда Так что оставим её в таком виде всё всё на этом всё дальше у нас будет следующий урок И следующий слайд у нас с вами на очереди третий слайд мы снова идм в техническое задание и смотрим Что у нас здесь обратной стороной Ой надо указать пищевую ценность и Бж Окей в принципе ничего сложного идём и придумываем как это всё будет выглядеть Давайте корнём этот фрейм удалим практически всё с него Так я что-то вот вижу сейчас что мне не очень нравится как у нас выглядит фон Давайте мы его чуть-чуть э сделаем более серым что ли Ну как бы белый э он не лучше белым не оставлять так скажем Я что-то вот сейчас не заметил этого Давайте поставим е FF EF это такой э светло-серый фон он смотрится просто в интерфейсе в интерфейсе маркетплейса поинтересней То есть у маркетплейса зачастую сам фон выдачи как раз-таки белый и когда белый на белом то это не очень а вот когда такой слегка серый то окей можно F3 F4 F5 это тоже код цвета можно его использовать ну вот или наме тако чуть потемнее Кай хотите на самом деле его даже ткнуть там в любую точку и такой и будет ну вот делать где-то так чуть-чуть чуть-чуть сероватым для того чтобы он отличался от фона маркетплейса а от нашего фона кстати не очень отличается потому что здесь у меня фон такой очень приближены к нему Итак давайте будем работать с фотографией фотография у нас вот эта обратная сторона Нам её Надо будет тоже обрезать соответственно мы идём в м здесь берём фотографию закидываем её как всегда удаляем фон скачиваем так скачался И переносим это всё дело по [музыка] фигму Да ну и сразу здесь фон тоже поменяем в этом фрейме так О'кей так пока оставим в таком виде Потом посмотрим что с этим сделать смотрите у нас значит по техническому заданию бжу - Это примерно равнозначные по значению Ну как бы вот по значимости Да а информация соответственно мы должны её показать одинаково А чтобы её показать одинаково она должна у нас смотреться на слайдах одинаково Если мы возьмём например на какую-нибудь композицию которая будет у нас прописывать Белки жиры углеводы то у нас соответственно углеводы сховай будет занимать больше места смотрите как белки и жиры хорошо сочетаются по длине схо углеводы прямо вообще вылетают по длине а соответственно от названия отталкиваться мы не можем А можем конечно но как бы Надо что-то придумывать будет такое интересненькое Я думаю что мы можем сделать снизу э четыре одинаковых каких-то плашки Ой три одинаковых плашки и мы по этим плашка нанесёт эти самое значения бжу а потом калораж ну то есть калории Да энергетическую ценность мы её пропишет для многих Ну как бы основным параметром поэтому мы её сделаем сильно больше сильно активнее Итак приступим давайте для как бы это по сути будет не заголовок но мы возьмём как будто бы заголовок и пропишет калорий Я честно говоря вот так до сих пор и не понял почему два раза к если все говорят просто калорий А если килокалорий то это как будто бы 1.000 калорий то соответственно очень много получается так это пока оставляем здесь дальше будем работать с нижними плашками А смотрите здесь я думаю что надо будет использовать опять же вот такое же решение как у нас было под заголовке на главном слайде Я хочу такой же прямоугольник но наверное но наверное я его сделаю по по-другому как-нибудь по-другому сейчас по стилистике он у меня будет такой же сейчас посмотрим разгруппировать так разгруппировать через Ctrl Shift G нам отсюда нужен вот этот прямоугольник вот этот я пока удалю Ну не пока в принципе удалю смотрите у нас будет примерно три одинаковых плашки на всю ширину соответственно Мне нужно подогнать у них размеры так вот таким образом например мы их увеличиваем и расстояние уменьшаем для того чтобы понять как они у нас будут влезать Мне нужно сейчас подогнать Расстояние которое позволит мне их и разместить всех и чтобы они не сильно маленькие были вот когда работаешь с альтом то проскакивает несколько значений может проскакивает Вот примерно вот в таком диапазоне мне меня устраивает такой размер а дальше что мы делаем дальше мне хочется чуть-чуть наклонить их побольше соответственно так как мы пропорции поменяли у нас угол наклона сменился это не то чтобы супер принципиально Ну вот Мне так хочется я так вижу я хочу чтобы он соответствовал вот этому углу наклона я его текст беру в помощнике Вот и сейчас мы поработаем снова с формой снова выделяем две верхние можно Две нижние влево Я две верхние и вправо тяну их Вот вот так поддержим поддержим наклон таким образом эти два варианта мы можем удалить потому что они нам просто помоли понять размер а копировать будем вот этот вариант И вот так Вот всё Теперь они у нас стоят ровно по центру Кстати если мы например выделим три объекта и нажмём отцентровать то они все в центр улетят Ctrl Z если мы их выберем и выделим как отдельную группу нажмём Ctrl G то у нас получится вот они здесь например были сейчас они будут у нас отцентровать именно в группе относительно друг друга они не будут меняться Но я разгруппировать ещё с текстом здесь так А по тексту Мне необходимо будет прописать Белки жиры углеводы соответственно я возьму вот такую небольшую надпись и поработаю с ней белки Понятное дело что вот на этом свете нам будет выгоднее работать с белым веду его до середины нашего блока А кстати здесь можно на нажать На центр тогда наши изменение вот сейчас вот я буду писать жиры оно будет сразу прописываться в сюда же Ну то есть в таком же виде то есть тоже по центру Если бы у меня например выключка левая стояла да то вот я смотрите чтобы было с углеводами видите они в сторону убегают Мне необходимо их будет возвращать в ручном режиме А если бы я поставил выключ по центру и перебивал текст то они бы у меня стояли ровно по центру Я бы сэкономил время дальше Вот из этого текста я уберу пока тень и сделаю значение у нас здесь 12 16 и 64 г 12 г здесь у нас опять же появляется заглавные буквы все мы знаем как с ними работать сес вот появилось Выключаем эту функцию и делаем поменьше девяносто шестой кегль Ну допустим О'кей так тень сюда всё-таки напрашивается но наверное не такая большая как у нас была Так здесь у нас на двадцатке стоит и пускай будет 10 пускай вот так вот чуть-чуть выделим её дальше у нас было 16 и 64 всё 12 16 и 64 г всё О'кей А теперь я хочу ещё сделать знаете что а выделить вот эти Ну так как у нас эффект помните был такой неонового свечения под под ними я сейчас хочу его вернуть А и сделать по новой форме соответственно я выделяю все вот эти трапеции и нажимаю Ctrl C Ctrl V потом выделяю нижние из них и даю им эффект эффект размытия фона помните мы там на 50 брили тут соответственно также на 50 Всё окей Ну выглядит неплохо дальше мы будем работать с верхней частью и здесь мы возм в обработку вот этот 448 килокалорий или калорий Я уж не знаю Извините здесь у нас будет другой Градиент Я хочу поставить такой вот только наоборот так да это у нас сильно сильно выделяющийся Мне хочется чтобы он уходил в какую-то практически такую вот белизну как будто бы пропадал Для этого нам можно поправить наш Градиент так вот попробуем вот так пока поработать так делаю его прям супер огромным через инструмент K так как это основная информация Ну и просто хочется поработать с типографий сделаем его вот вот таким единственное может быть сделаем ему начертание не сильно А вот хотя бы такое начертание предпоследнее начертание и снова его чуть-чуть увеличим снова через инструмент Scale и потом возвращаемся в инструмент Move через горячую клавишу V так хорошо о'кей Теперь мы сделаем поэкспериментировать [музыка] чтобы поработать с этими трапеция подниму их наверх в принципе я здесь ничего криминального не делаю не перегорания текста ничего там такого Ну прям супер важного который у нас где-то не дублировал так и мне хочется придать эффект левитации для нашего пакета смотрите как это делается например вот он у нас такой вообще эфф че хоро потому что он обращает к себе внимание Так что мы его можем смело использовать в наших креатива например мы можем смотрите как сделать добавляем прямоуголь Ой не прямоугольник а эллипс кладём его примерно под размер дальше мы переходим в градиентную заливку и меняем ориентацию Нашего Нашего градиента Делаем его можно по всей ширине и вот смотрите так как у нас вот эта вот форма пакета идёт таким образом что вот эта точка оказывается ниже всего условной вот этой вот плоскости Да куда падает тень где у нас Нижняя точка там у нас соответственно более более проявленная тень значит в этом месте У нас должна быть тень Чуть более заметно чем в остальных местах вот смотрите что я делаю с градиентом я веду вот сюда вот такое значение появляется третья точка Да я её оставляю пока такой А все остальные точки я делаю менее заметными так и вот эту сейчас мы чуть-чуть проявим а здесь даже можно чуть-чуть потемнее сделать всё О'кей оставляем Пока так и потом этому а эллипсу мы даём эффект нашего любимого блюра и где-то тоже в 50 укладываем его так уводи это всё на нижний слой Смотрим как получилось есть определённый эффект Но мне хочется больше э проявленной этой тени эта тень явно должна проявиться пускай будет вот так может быть даже этим нас значения тоже чуть-чуть подтянем потемнее потому что объект видите Да он левитирует совсем близко к поверхности соответственно Чем ближе тем тень будет более явная вот в этом месте у нас самая удалённая точка соответственно здесь нужно сделать её менее заметной например через вот такой эффект Так ну вот таким образом мы получаем интересную теншоу Да ягодок и листочков всё берём с первого и со второго слайда пока накидывай через Альт я переношу это всё дело наши Наш третий слайд Да важный момент ещё я забыл упустил нам надо будет показать что это [музыка] 448 килокалорий на 100 г продукта то есть на 100 г сейчас мы так и пром на 100 г это будет такая подсказка просто под вот этим текстом нам для нас привычно видеть что бжу идёт на 100 г но у нас бывает сомнения возникают с тем что калории бывают указаны за всего за продукт Потому что некоторые там ну я не знаю производители каких-нибудь фитнес продуктов немного хитрят Например у них там продукт не весит 100 г Да а весит он например 50 г и они такие пишут их не 448 Да условно не 450 килокалорий А 20025 и они вот пишут 225 к калорий всего лишь у нас Но на самом-то деле по правилам надо писать на 100 г у них они хитрят и соответственно как бы немного могут кого-то в заблуждение ввести так а дальше ягоды добавляем не отвлекаемся какую-нибудь ягоду ть Сюда можно закинуть тогда эту повернуть как-нибудь так вот это у нас нигде не участвует её можно вниз убрать и чуть побольше Так этот листочек мы можем развернуть и тоже убрать вниз Ой здесь мы можем ещё какую-нибудь ягодку добавить но совсем маленькую сделать как бы на общую картинку смотрите чтобы она у вас устраивала Ну взгляд ваш радовала так скажем когда она такая как бы полноценная без лишнего нежного так скажем пере остались Они видны хорошо считываются ничего у нас не пропало никуда тогда это правильный подход Так ну вроде бы достаточно уравновешенная композиция так окей ой всё это этот слайд мы завершили и сейчас приступим к четвёртому слайду Так мы значит приступаем к четвёртому слайду я сделал заготовочка под наш слайд с составил такой же обычный фрейм без всего содержимого Пойдёмте в техническое задание посмотрим что от нас требуется надо значит продемонстрировать на этом слайде что есть ещё и другая упаковка и другие вкусы Окей А у нас значит здесь есть упаковка которой мы работаем 250 г и есть вторая упаковка на 500 г Окей надо будет пометить артикулы здесь у нас это в примечании прописано что у этих именно у основного вкуса это наш основной вкус два ой два артикула ставим Да на 500 и на 250 грав А по всем остальным мы можем просто про прописать эти артикулы без указания граммовом Так ну что ну показать их надо смотрите для этого у нас есть отдельные фотографии где указаны где показаны как раз-таки две вот эти упаковки мы ищем люпин и Мафин оба Так значит идём снова в наш любимый фоторум и скармливать его вот такую фотографию аналогично Так давайте сразу все подготовим все фотографии где у нас показана двойная двойная упаковка так Вишнёвый штрудель здесь у нас есть убираем фон скачиваем дальше у нас есть кешю кей удаляем фон скачиваем пирог с корицей выбираем фон качаем так и последний у нас вкус остался это шоколадный брауне так всё все подготовили А теперь начинаем с нашего основного вкуса клюквенный Мафин несём его в наш фрейм и убираем логотип форума пока оставляем в таком виде закидываем все остальные смотрите у нас здесь получается Четыре оставшихся вкуса мы можем закинуть их прямо пачкой вот мы их закинули пачкой В чём плюс мы во-первых получаем одинаковый размер и теперь мы можем с ними одновременно работать я выделил их все теперь у всех одновременно меняю размер Смотрите Они у нас сейчас находятся вне фрейма нам их надо затащить Во фрейм вот когда подсветить мы уже работаем внутри фрейма и дальше смотрим чтобы не путаться А в какой последовательности шоколадный Брауни у нас будет на первом месте шоколадный Брауни как раз он так на втором месте у нас будет пирог с корицей это Он на третьем месте у нас будет кешке и Вишнёвый так кешю кейк и Вишнёвый так дальше мы их снова подгоняем по высоте например мы их чисто номинально показываем здесь так как эти другие вкусы они представлены в других карточках Эта карточка товара нужна для того чтобы Точнее не это карточка товара этот слайд нужен для того чтобы мы могли продать больше точнее наш продавец мог больше продать своей продукции и чтобы зрители заходя на эту на эту карточку товара могли посмотреть и увидеть там какой-нибудь свой любимый вкус по сути это как бы слайд доп продажи это один из элементов того что мы можем делать с нашим клиентом во благо ему для того чтобы сработать самостоятельно больше тут мы и показываем и делаем дополнительный слайд а делаем мы их на каждый вкус соответственно Да это соответственно деньги для нас а для него это тоже деньги потому что он через них продаёт больше сложно посчитать Насколько больше но надо говорить что больше нуно на самом деле это много ещё по каким причинам плюс ему но обо всех плюсах мы будем говорить дальше по ходу курса и это кстати будет мотивацией для того чтобы увеличивать свой чек за услуги смотрите здесь мне нужно будет сделать какой-то заголовок Я хочу Здесь в первую очередь указать на то что у нас есть два формата и пропишет что два формата одного вкуса так как это в принципе небольшое небольшая фраза поэтому мы можем взять вот такую вот сочетание заголовка и подзаголовка и использовать его в нашей в нашем слайде здесь Здесь мы пропишет два вот заметили Да вот если бы я сделал выключ по центру то мне бы потом не надо было выравнивать два формата всё равно пришлось чуть-чуть выравнивать потому что размер у нас большой допустим 350 но так или иначе он Зато всё равно встаёт у нас по центру так и здесь мы поставим фразу одного вкуса у нас прямоугольник который является подложкой А Мы помним что их два а больше Поэтому мы его подгоняем под размер приемлемый с альтом помните Да что он будет действовать симметрично изменяться а в принципе здесь у нас есть небольшое изменение по Угу на Кона Ну как бы всё зависит от вашего уровня перфекционизма я конечно это сделаю потому что к сожалению есть у меня такая проблема выделяем две точки и ведём в тот самый угол который у нас наклонен текст Всё теперь О'кей всё верхний текст читается никакие буквы не путаются когда мы работаем вот с такими наложения Да эффектами наложения одной плашки например на на заголовок то надо следить чтобы буква считывать однозначно чтобы не было такого что её можно прочитать как-то по-другому там если мы перегородить например букву р вот до середины да то это может быть какая-то буква в и и так далее так а дальше мы здесь сделали там нам необходимо А сейчас указать артикулы и указать на то что у нас два размера смотрите Я тут придумал супер креатив я ж сам честно говоря от себя в восторге я подумал что про большую надо написать короче есть у нас большая да которая 500 г есть маленькая которая 250 г 250 кто покупает скорее всего тот кто пробует новые вкусы и пробует ну как как пробник Да скорее всего берёт я так подумал что мы здесь напишем для тех кто ищет вот здесь а здесь для тех кто шёл таким образом подчёркивая что это экономная упаковка и её можно э так скажем для Если вы уже определились с вашим вкусом то покупать её так для тех кто ищет сделаем вот такие более-менее равнозначные строчки и чуть-чуть там их удалим может быть на 70% друг от друга чтобы разрядить и опять же мы можем здесь Взять другое начертание реги Давайте сначала одну отметим даже ещё побольше Вот так и потом вторую просто копим здесь мы пром 250 грам помните что можем вот такую штуку делать Да и тогда у нас будет всё подтягиваться Но если в одну строчку если мы сделаем на двух строчках то у нас она встанет вот так в одну строчку соответственно Здесь нам не подойдёт такое решение так 250 г а здесь мы пропишет ниже артикул у 250 г ищем 250 г артикул вот такой копируем несём так как он большой мы его чуть-чуть сделаем поменьше так и здесь Я бы хотел наоборот обратить внимание на то что это упаковки разного размера разного размера соответственно дальше я хочу сделать е дополнительный акцент выставить вот сюда меняем на болт но мне чего не хватает вот здесь мне сейчас цвета не хватает например Здесь у нас в одном месте представлен цвет здесь он больше нигде не представлен поэтому мне бы хотелось его поддержать то есть вот эту вот вот этим прямоугольником например Два прямоугольника вынесем их отдельно они у нас по-прежнему в группе но мы их вынесем из этой группы для того чтобы можно было удобно с ними работать и а подтянем их под размер нашего нашей фразы так я думаю вот таким образом будет О'кей Они здесь конечно Тут на любителя потому что у нас есть во-первых прямой текст который внутри находи Но с другой стороны у нас есть уже наклонные формы которые которые вроде бы пересекаются по тематике с этим с этой формой соответственно Кто как решит хотите правь хотите Не правь ну вот я имею в виду форму можно сделать её более резкую так как у нас поменялась Либо наоборот её выпрямить и сделать вот прямоуголь но я ближе к верхней нашей подведу и вот такой её сделаем вот дальше я беру и копирую этот текст и зажимаю с альтом и с шифтом несу его в левую часть А здесь мы будем равняться по нашему м вот этому прямоугольнику точнее трапецию по трапеции здесь мы будем в правую сторону уходить И это тоже У нас отодвинь чуть-чуть здесь соответственно у нас появится новое значение 500 г здесь у нас появится для тех кто нашёл кстати ставьте букву ё это правило хорошего тона и для дизайнера это важно если вы её используете значит ну бы это уже так скажем подсознательно ном сказать Так что я думаю для вас это будет полезно Так здесь мы поменяли новый артикул поставили для тех кто нашёл для тех кто ищет всё вроде с запятыми тоже не напутали И теперь мы должны рассказать о других наших вкусах смотрите у нас как-то использовался форма таба Да вот здесь вот но она больше у нас нигде не поддерживается Ну то есть Больше нигде не приставлена я хочу её увести вот сюда и здесь её продемонстрировать так здесь мы чуть-чуть наверное её как-то так выделим чтобы она выде чтобы она у нас какой-то имела отличие от фона так как она одна по себе так другие наши вкусы можем прописать так возм такой же рифт теперь здесь сделаем в одну строчку и по центру поставим выров по центру относительно этого Так проверим чтобы у нас была Центральная выключка потому что мы будем сейчас перебивать другой шрифт другие наши вкусы Фима Несмотря на то что она вот подчёркивает она на самом деле не знает русский язык как и янона подчёркивать всё что угодно Так что перепроверять или например в Ворде если у вас там есть да возможность печатать запечатать лучше Там меньше просто будет вероятности что у вас будет ошибка в слайде вылезет так та мы поддержали А теперь я хочу ещё добавить немножечко совсем немножечко сюда цвета так другие наши вкусы опять же бы сильно большая смотрится Несмотря на то что и так всё мелко здесь у нас но здесь мелко потому что у нас уже в принципе такая история пошла до продажи и много элементов на каждом слайде располагается Мне нравится как уравновешена композиция относительно пакетов поэтому я их чуть-чуть вместе приподнимает я тоже хочу немного цвета добавить я это сделал через такую микро прямоугольник почти линию Ну мы делали вот в практике нечто подобное А давайте мы сейчас здесь также сделаем только возьмём например вот этот прямоугольник возьмём у него цвет перенесём этот цвет сюда удалим его Потом мы берм и центру его относительно фрейма Теперь мы его центру по вертикали относительно нашего таба Вот так и теперь мы его уводи вниз вот так Таким образом у нас появился вот такой вот разделитель я бы его ещ чуть чуточку уменьшил сальтом я его чуть меньше сделал чтобы он такой был почти невесомый но при этом давал цвет вот И теперь мы будем писать под над нашими вкусами вот эту информацию так сначала нам надо разработать единый какой-то текстовый блок сейчас мы Подгони выключ сделаем Центральную и будем здесь ориентироваться на Вот это значение так собственно пакет шоколад так как это не предложение Я позволю себе поставить с маленькой буквы и знаков припинания у нас спереди не было дальше так как у нас было в Техническом задании указано что граммовка обязательна для указания только на главном вкусе а то мы соответственно здесь это избежит нам надо сделать сам Shift чуть меньше так допустим если мы сюда поставим бот О'кей так О'кей а вообще-то всё-таки правильно будет написать с большой буквой потому что шоколадный Брауни - это название этого вкуса практически имя собственное Ну пускай не такое уж как как наш с вами Но вот всё же какой есть шоколадного брау дальше мы ведём копируем также и делаем второй вкус здесь у нас пирог с корицей Я бы сделал даже по-другому немножко копировал потому что у нас там уже всё настроено Я бы сделал вот так вот выделял отдельные объекты и вот здесь вот выделял только отдельные артикулы и поставлял их вот сюда повторюсь потому что у нас там всё настроено если мы сделаем как в первый раз то у нас как в первый раз и все настройки улетят они будут с нул Ну нулёвый и нам это надо будет всё переделывать Так у нас быстрее работа идёт вообще не пугайтесь то что мы Достаточно долго делаем во-первых Мы делаем работу не за стартовую стоимость Ну то есть вот эта работа она не стоит там тех денег которые берёт новичок она стоит дороже соответственно она чуть-чуть посложнее я сейчас много объясняю я Ну естественно если бы не объяснял делал бы гораздо быстрее это всё и в заключени работаем Нам вкусом заказ на Все вкусы и на два у каждого вкуса на две граммовки то есть такой Заказ будет стоить Ну даже если при при инфографике слайда допустим в 300 руб он будет стоить там порядка 10.000 Можно конечно конкретно посчитать но я примерно говорю Время затраченное оно как бы не зря вот всё в принципе Окей я сейчас Единственное только побольше Вот эту обознач вот эту принадлежность к этому пакету А эту к этому пакету не что они сами по себе живут да А что именно вот этот пакет имеет 250 и у него Вот такая штука для этого я хочу просто поставить такую вот подсказок указатель так скажем Да супер простой Вот супер простой просто небольшая кривая линия Вот и точно такой же только для другого там мы ввели за пакет значит здесь тоже будем вводить за пакет тут большая история перфекционизма надо конечно же покрасивее выровнять эту кривую но это не обращайте внимания Это это уже пров пров болезни так О'кей здесь в принципе тоже можно Во так очень симпатично и сгибается Так ну всё с этим слайдом Мы тоже закончили и у нас всё меньше и меньше времени уходит на каждый слайд отлично приступаем дальше к следующему слайду заключительному и потом у нас ещё одна версия будет главного слайда так друзья Мы уже на финишной вираже у нас значит четвёртый слайд а Прошу прощения пятый слайд заключительный слайд и потом у нас ещё одна версия интерпретации первого слайда а так Смотрим по традиции в техническое задание и здесь мы должны сказать про картонную упаковку размер упаковки указать и написать Вот такую заботливую надпись О'кей м дальше мы приступаем к нашему так к нашему материала у нас есть вот такая коробочка и мы её используем коробку я брал тоже открытого источника смотрел просто по пропорциям что более-менее подходит И как более-менее по ракурс выглядит вот поэтому никакого конкретики Ну то есть вот это это не конкретная коробка которую используют наши заказчики А мы идём и удаляем фон так коробку делаем поменьше поня причинам ещё чучуть поменьше потом я дальше на курсе уже покажу как делать Как избежать вот этого вот этой именно механики и сделать так что Если даже у вас изображение во всю плоскость но при этом логотип вот здесь вот остаётся как его обрезать Мы просто будем уже проходить тему плагинов и это будут дополнительные программы внутри фигмы которые позволяют решать определённые конкретные задачки поэтому это ещё будет сильно упрощать нам нашу работу в данном случае мы пока работаем вот так вот так добавим коробку а сразу вижу что здесь у нас обре можется верхний край поэтому иду в инструмент кроп и тут внимательно Смотрю чтобы вот так вот сделать и попасть на коробку так Окей коробку добавили А здесь у нас будет немного текста поэтому я позволю опять себе воспользоваться большим заголовком и под заголовком копируем с предыдущего слайда и напишем фразу которую у нас здесь нет но мы можем сами придумать смысл в ЧМ пакеты рвутся скорее всего или как-то там пачкаются наверное это в принципе не гигиенично когда там пакет без упаковки какой-то вообще едет в транспортной компании потом ставится на кухонный стол и так далее поэтому Аа заказчик использует картонную упаковку в связи с чем мы должны это показать и а объяснить клиенту зачем это да нужно а во-первых то что он приедет не порвавшие се мы пишем сюда так [музыка] Приедет Приедет целая Мы же про гранолу говорим Да значит она она приедет целая потом по традиции мы идём к нашим прямоугольником точнее давно уже не прямоугольником а трапеция и подгоняем по размеру также по традиции мы идём и смотрим угол наклона ну я повторюсь Это чисто мой бзик я вот так вот хочу его показать Я буду рад если Вы также будете делать Так примерно около того нажима подтверждаем смену дальше смотрите у нас вот здесь группа да давайте её разгруппировать же у неё центр тяжести сместился и она немножко съехала в сторону Смотрим как бы ну визуально сначала проверяем это всё да потом можно всегда через вот эти вот кнопки помощников проверить ещё раз так ну я как бы уже не хочу вот использовать прямо Один в один такую же композицию пускай будет что-нибудь другое вот здесь у нас в принципе больше смысла нет слова делать Этот приедет поэтому я поставлю вот таким образом вот тут кстати очень Кстати то что у нас на наша трапеция стала в параллель с нашими буквами и по низу они тоже сочетаются хорошо всё получилась такая вот шрифтовая работа Вполне себе приличная дальше выделяем и всё это Ставим на центр вот надо будет показать нам размеры на упаковке если мы будем прямо вот так вот делать Ну как-то будет немного Скучновато По мне так давайте мы её немножко развернёт А как будто её немножко швырнули и вот она вот летит такая к себе приземляется и думает что гранола будет в порядке В ней так смотрите как нам сделать эффект что она у нас вот стоит летит или что-то ещё рядом с плоскостью находится правильно с помощью тени вот тень мы сейчас будем рисовать будет небы Фомы покам будем рисовать через перо Например у нас будет Вот такая форма тени смотрим Что что может так скажем отражаться в нашей коробке Ну как-то так примерно Сейчас объясню почему примерно потому что смысла тут точно подгонять нет у нас нарисовалась фигура да помните Мы замкнули из нашего урока предыдущих там уроков мы замкнули кривую и таким образом получили форму но эта форма у нас образовалась просто вот с линией без заполнения вот если заполнение то мы нажимаем на и соответственно она заполнилась но при этом нам линия вокруг обрамляющая не нужна мы её просто удаляем в данном случае дальше мы переходим в заполнение и делаем ему Градиент похожий метод мы уже использовали на пакете на втором слайде или третьем на третьем слайде здесь будет что-то примерно такое же смотрите вот у нас есть тень А вот мы её можем сделать чуть-чуть потемнее Здесь тоже мы можем сделать нет здесь должно быть в ноль уходить потому что у нас не должно быть видно вот этой границы чёткой так но а сама она может быть чуть-чуть потемнее дальше что мы делаем с этой тенью углы сводим Вот примерно вот таким образом уводи её на зад и теперь мы её растушёвывать то есть берём и снова где-то применяем в районе п вот таким образом у нас получилось плюс-минус нечто похожее с реальной тенью сейчас мы ещё её доработали через вот эти инструменты Вот здесь она будет явно больше А здесь вот этой вот не должно быть вообще в принципе вот может быть даже вот так вот лучше будет выглядеть Да вот досюда вот так пожалуй оно близко к правде чуть-чуть её подравнивание так чтобы она была заметно так мне чуть-чуть не нравится как у нас выглядит как у нас выглядит вот эта часть смотрим издалека и смотрим Что нам приглядываться допустим я так выведу эту эту сделаю немножко [музыка] потемнее это оставим такой даже вот так вот Вот такая растушёвка ближе к правде экспериментируйте Смотрите как вам вот больше нравится что больше кажется вам правильным Вот так и делайте по сути вот здесь вот да у нас идёт в светлую какую-то уходит историю По идее там тоже Света не должно быть по идее он должен куда-то дальше распространяться сильно Я думаю мы конечно заморачиваться над этой тенью не будем но всё равно хочется сделать что-то симпатичное так так и всю эту всю эту историю мы сделаем чуть меньше Так ну О'кей вот так так мы её оставим а так мы её оставим дальше мы приступаем к нанесению размеров размер у нас получается следующий Так здесь у нас получается 23 15 и 5 С5 по пропорциям коробки это всё понятно поэтому мы поэтому мы достаточно просто разбираемся где есть что выбираем инструмент линия делаем параллельный вот такой вот отрезок одной из сторон эту кстати тоже можно приколоть чтобы не попада нам и помни из про линию мы здесь делаем наконечники в виде стрелочек чтобы более заметно была я до х пикселей ширину доведу и саму линию сделаю чуть-чуть посветлее так аналогичным способом мы сейчас проу две другие тени Так другие линии направляющие здесь мы тоже также делаем параллель и чтобы не пересекалась с нашей тенью так как мы над ней старались всё-таки А мы уведёт этот размер дальше будут у нас простановка размеров с Давайте возьмём какой-то обычный рифт но сделаем его таким же цветом как и саму как и сама линия сделаем можем здесь Reg поставить и 23 см смотрите чтобы нам запараллелить с этой линией мы можем посмотреть в настройках вот этот вот это значение Давайте вот начнём Вот с этого 23 там по-моему 15 было да 15 см 15 см вот смотрите здесь у нас значение угла вот такое копируем его и несём к этому значению Вот и как раз то что нужно получилось у нас вроде бы параллельно но в то же время Ну как бы на 180° развёрнуто помните в одном из самых первых уроков про фигму мы как раз говорили про то что есть внутренний калькулятор в каждом поле мы можем Добавить сюда п10 и нам гма подскажет Как правильно вот он установится прямо на то самое значение которое нам нужно при этом 26,9 градусов мы бы в жизнь вообще тут 2 26° и9 секунд мы бы тут вообще высчитывали очень долго да с калькулятором притом А тут мы быстро всё это с помощью фигмы организовали здесь у нас -11 84 А здесь такая же история Ну мы уже знаем как с этим справляться ставим плю 180 получаем 23 Если вы помните из уроков черчения то правильно ставить размер над указателем или слева от него в этом же в этих же уроках говорится о том что надо чертить вообще как бы размеры вертикально или горизонтально здесь у нас это это правило не соблюдается но так или иначе всё равно будет приятно если вы будете а соблюдать Ну как бы вот сверху писать да сверху в данном случае верх Вот это будет Вот эта часть так Смотрим здесь угол наклона и дублируем его сюда и надо же у нас комбо у нас во всех трёх случаях надо плюс 180° добавлять О'кей вообще не проблема так это мы зря и теперь надо будет примерно для того чтобы красиво симпатично всё дружно смотрелось на одинаковом расстоянии А вот эти вот отдалить наши подписи и указатели так всё окей с коробкой мы завершили А дальше У нас осталась ещё надпись Давайте возьмём эту надпись и пропишет Заходим в техническое задание и здесь есть вот такая фраза мы её несём мы е е делаем вот так так и она у нас слишком крупная поэтому мы её уменьшаем делаем как-нибудь вот вот такая ступенчатая композиция она симпатично смотрится когда первая больше Потом поменьше и Ёлочка перевёрнутая так будет правильнее сказать такую можно использовать Так ну что в принципе Вполне себе получился слайд А сейчас мы чуть-чуть сдвинем буквально на несколько пикселей повыше и всё всё готово ещё проверим центровку всё О'кей всё этот слайд тоже можем сохранять А так и у нас остался последний слайд но при этом он первый потому что это будет интерпретация первого слайда Так у нас на очереди последний по очереди но не по значимости слайд это будет первый слайд и вторая его интерпретация Почему мы делаем его в конце Ну на самом деле можно и в начале без разницы абсолютно мне так захотелось для того чтобы как бы в одном темпе начать и потом немножко что-то немножко другое сделать в конце Вот для чего нужен второй слайд для первого вторая версия пер слайда для того чтобы его тестировать на рекламе для того чтобы его тестировать и получать какой-то внятный результат нам нужно делать отличительную так скажем картинку от того что у нас есть мы не можем повлиять с вами на цену но мы можем повлиять на картинку соответственно цена конечно имеет значение и на товар с абсолютно таким же Ну вот внешним видом будут кликать Конечно больше если у него ниже цена это безусловно но всё-таки мы можем с помощью инфографики выделяться и делать нечто нечто другое Так Смотрите мне например Здесь хочется заменить фон это самое простое Что можно сделать в таких случаях потому что ну сам же товар мы поменять не можем и тем более у нас есть ограничения по самим фотографиям соответственно я этот фон удалю эти ягоды Я тоже удалю потому что у нас плоскость пропала Они лежали у нас плоскости но при этом я хохочу сделать здесь градиентную заливку на самом фоне А на самом фрейме смотрите у меня как какая идея Я хочу сделать его жёлтым для того чтобы во-первых сильно отличить от этого всего да во-вторых жёлтый на таком фоне ой на таких с такими элементами цветами смотрится хорошо так вот у меня где-то есть здесь какой-то симпатичный жёлтый вот такой возьмём а второй например какой-нибудь вот такой и сделаем радиальную заливку но не такую какую Нам сейчас предложил а обратную Вот и такой насыщенный жёлтый чтобы у нас получился Отлично Да он он хорошо смотрится вот как-то по сочно Я не знаю сри со всеми вот этими имеющимися цветами дальше сам пакет так как у нас он уже не стоит то его в принципе можно подбросить Что это значит Ну так как у нас всё летит Да вся композиция летит мы можем сделать его тоже немного летящим и Мы с вами уже делали нечто подобное несколько раз И в частности вот здесь у нас есть такая тень пря Какая здесь нам нуж смотрите мы перенесли эту тень но она у нас явно другого оттенка она у нас такая серая А здесь Нам нужно будет его перекрасить и сделать вот типа такого но увести ближе в сторону чёрного снова выбираем такой же оттенок но уводи опять же в сторону чёрного и чуть-чуть подальше потому что мы помним что здесь у нас идт ближняя точка к плоскости последняя точка идт дальше всех от плоскости Значит мы его чуть-чуть отводим от фонового света Так сейчас мы эту пачку так вот сделаем зафиксируем так принципе в принципе в принципе уже неплохо Сейчас е чуть-чуть дать блюра на него Так И как будто бы хочется пакетик чуть-чуть повыше расположить опять же такой приём можно использовать для первых слайдов так как зачастую используется в выдаче прямую постановку товара то есть когда мы немного видоизменяется лучше чем обычная стандартная постановка поэтому поэтому такой вариант очень даже может быть сейчас так немножко замести пустоту потому что у нас здесь она образовалась сзи со сменной композиции Вот и пускай будет здесь вот таким образом мы листок поставим так это выведем вперёд ничего у нас здесь не перегородить это плюс-минус также можно оставить А вот эту поднимем чтобы выше расположить граммовку и граммовку опять же смотрите если я вот граммовку я кстати не показал вот такую штуку если я эту граммовку начну просто вот менять вот сейчас в режиме Move Да больше или меньше её делать то у меня произойдёт Вот такая картина у меня не поменяются абсолютно кегли Но если я возьму и как раньше делал через Scale инструмент то у меня появится изменение кегля и соответственно всё будет пропорционально меняться в размерах так Окей это можно так оставить и какую-нибудь ягодку ещё чуть-чуть пониже отпустим Давайте назад я в принципе окей Всё вот так вот быстро Мы в принципе сделали композицию новую обновлённую из имеющегося слайда сейчас с этим листиком что-нибудь придумаю как-то его хочется немножко менее заметным сделать Угу Когда опять же вот листья у нас все одного размера да то это тоже как-то смотрится Ну не очень а если мы их начинаем по размеру менять то они уже это всё поинтереснее выглядит вот так вот ещё интересней и вот этот наверно если вот так сделаем вот то что нужно всё на это то и здесь у нас получилось всего слайдов че дополнительных и Две версии первого слайда спокойно можем передавать клиенту и ждать от него обратной связи Как общаться с клиентом как получать обратную связь как презентовать свой проект и как правильно там я не знаю и какправильно делать це образовани ваших услу курсе а здесь мы проговорили вот основные части такую больше механическую работу естественно мы затронули там может быть 20% всего функционала который вот обычно используется Ну может быть 25 так как здесь я подобрал работу такую достаточно разнообразную чтобы Здесь было побольше вариантов для того чтобы у нас было разные механики применялись В общем А есть много других программ которые позволяют проще нам делать определённые действия делать интереснее какую-то картинку и так далее ну и самое главное - это вообще понимать то что мы делаем Потому что если мы делаем и просто потому что это красиво на наш взгляд красиво - это вообще очень субъективное понятие Одно из самых субъективных понятий то мы не сможем обосновать этого но нам нужно обосновывать клиенту именно почему мы сделали так а не иначе я за свои действия а в дизайне могу обосновать любое своё движение и когда меня клиент спросит Почему я ему сразу готов ответить на этот вопрос а редко прямо очень редко когда я бываю безоружен если мне что-то говорят за мой дизайн этому надо научиться это определённый скилл Но это всё приходит со временем Итак мы завершили курс по фигме и я надеюсь что вы получили удовольствие и приобрели больше уверенности в работе с графическим редактором вы уже можете выполнять значительную часть дизайн задач и даже работать над коммерческими проектами Но если вы хотите заниматься созданием визуального контента профессионально то это только начало которое даёт вам понимание основного рабочего инструмента безусловно самое главное в этом деле - это создавать продающий контент К сожалению эта фраза уже настолько часто употребляется что можно сказать практически обесценилась но при этом продающий контент Можно конкретно характеризовать потому как он влияет на цифры и на продажи именно созданию продающего контента посвящён мой курс контентмейкер для маркетплейсов на курсе Мы делаем упор на профессиональной аналитике смыслов построению Воронок продаж и непосредственному влиянию на основные показатели конверсий также на курсе вас безусловно ждёт огромное количество практики то что мы прошли в рамках этого видео - это наверное даже не 5% того что вас ждёт на курсе Ну и логичным итогом такого большого объёма практики будет классное мощное портфолио которое будет содержать в себя не только слайды но и Рич контент видеоочки видео о товаре аналитику концепции карточек товаров и многое другое таким портфолио у вас не купит только странный человек назовём его так также на курсе Мы активно изучаем нейросети которые нам помогают создавать визуальный контент быстрее и делать его привлекательным отдельный модуль у нас посвящён поиску клиентов и в действую с ними благодаря определённым механикам которые мы применяем в нашей студии заказов на инфографику мы получаем до трёх раз больше чем по классическим каналам привлечения клиентов этими же механиками можете пользоваться вы после окончания курса Ну и вишенкой на торте - это наш шаблонизатор это наш внутренний продукт который мы разработали специально для дизайнеров нашей студии и для тех кто обучается на курсе шаблонизатор - это место куда мы собрали и подготовили самостоятельно отрисовать сотни готовых элементов дизайна это плашки стрелочки шрифты шрифтовые пары цветовые схемы композиции иконки и многое другое с помощью шаблонизатор вы значительно сможете упростить и ускорить свой процесс создания карточек товаров также шаблонизатор содержит конкретный пошаговый алгоритм создания карточки товара который Вам позволит Не упустить важные элементы и подскажет какими дополнительными инструментами Вы можете воспользоваться на конкретном этапе это не инфоцыган ский курс он основан на нашем реальном опыте я повторюсь мы занимаемся подготовкой визуального контента с 2021 года у нас студия полного цикла и мы подготовили более 15.000 карточек товаров для российских маркетплейсов и для американского Amazon с помощью этого курса я в том числе ищу для себя лучших специалистов которые могут пополнить наши ряды и с кем мы можем продолжить сотрудничество нам всегда нужны специалисты по визуальному контенту потому что тех же заказов по инфографике у нас всегда больше чем мы можем обработать в любой момент времени к сожалению я не знаю когда вы смотрите это видео но на данный момент у нас действует оплачиваемая стажировка в нашей студии более подробные и актуальные условия по курсу контентмейкер для маркетплейсов вы можете посмотреть на нашем сайте ссылка находится также в описании к этому видео Ну а я вас благодарю за просмотр любознательность и стремление к новым знаниям Я очень надеюсь что этот мини-курс по фигме был для вас полезным буду благодарен Если вы Поделитесь своим мнением в комментариях к этому видео всего вам доброго До новых встреч пока