Бесплатный курс по инфографике для маркетплейсов | первый урок | Wildberries | OZON видеоурок Figma
HTML-код
- Опубликовано: 25 окт 2023
- Это первый урок бесплатного курса для начинающих и продолжающих дизайнеров карточек товаров на маркетплейсах. Курс полностью построен на базе бесплатного графического редактора Figma.
Пройдя этот курс, вы сможете выполнять до 70% всех дизайн-задач, которые встречаются в разработке карточек товаров и стать специалистом, который оказывает услуги по дизайну инфографики.
В этом уроке мы сделаем обложку для карточки товара на ВБ, будем работать с основными инструментами Фигма, с добавлением эффектов на объекты, внедрим в работу плагины и выстроим композицию нашего изображения так, чтобы оно привлекало внимание зрителя с первой секунды.
Меня зовут Андрей и я с 2021 года занимаюсь подготовкой контента для маркетплейсов. У меня собственная студия полного цикла и мы подготовили более 12000 карточек товаров.
Навигация по курсу:
0 урок - о бесплатном курсе, регистрация в Figma, установочные данные перед курсом • Бесплатный курс по диз... .
1 урок - сделаем обложку для WB, товар - чай • Бесплатный курс по инф...
2 урок - разработаем сочную обложку для кофейного сиропа • Бесплатный курс по инф...
3 урок - задизайнерим обложку карточки товара для OZON, товар - кабель для зарядки • Бесплатный курс по инф...
Если интересно повысить уровень и выйти на доход от 100 000 рублей в месяц на инфографике, то приглашаю на мой основной курс contentmakermp.ru/
⚡️Это курс с оплачиваемой стажировкой в моей студии!⚡️
Материалы к уроку disk.yandex.ru/d/7KNMdmduX6kEDw
Подписывайся на мой канал www.youtube.com/ @content_prodaet - бесплатные уроки и видео о контенте для маркетплейсов
Канал в Telegram про профессию t.me/+imQZD0T2zKRjNzgy тут раскрываю стоимости наших проектов, делюсь профессиональными фишками
Сайт студии для заказа контента qcosta.ru/
Связаться со мной в Telegram t.me/apulkin 
Хобби
Спасибо , самый понятный курс на Ютубе для меня тупого пятидесятилетнего мужика , смотрел кучу других видео , все шпарят с английскими словечками , ни фига не понятно что нажимать , куда смотреть , здесь прям всё класс . 👍
Спасибо большое вам) очень приятно читать такие отзывы 🤝
Здравствуйте. Реально самый понятный курс.
@@user-lb2lo5qj1v спасибо) Рад, что понравился и мне приятно)
Спасибо за видео! Как доступно вы преподностите информацию!
И вам большое спасибо! Рад, что понравилось 🙌
Андрей, благодарю за полезные уроки!
И вам спасибо, что смотрите 🙌
Спасибо за урок! Очень хорошо объясняете еще и бесплатно!!!!
Здравствуйте! Спасибо вам за просмотр и комментарий! Рад, что понравилось и все было понятно 🙌
Спасибо за урок! Комфортная подача информации
Инна, и вам большое спасибо за обратную связь 🙏
Спасибо за урок. Очень хорошо и достаточно подробно объясняете
И вам спасибо за просмотр и отзыв 🙏
Супер, спасибо большое
Будем пробовать ))
Все получится)
Лучшее видео! Спасибо огромное!!❤
И вам большое спасибо за приятные слова)
Спасибо за урок 🙌
И вам большое спасибо за просмотр и благодарность!
Спасибо, действительно понятно! У меня получилось! 😊
Класс! Вы - молодец 👍 Все всегда получится 🙌
Очень понятно, благодарю
И вам спасибо 🙌
Спасибо, отличный урок!
И вам спасибо за обратную связь 🤝
Спасибо большое 🙏🏻
И вам спасибо за просмотр и благодарность 🤗
Огромное спасибо!
И вам большое спасибо 🤝
Отличный бесплатный урок, огромное спасибо автору ❤
Классно! Спасибо, что оценили 🙌
Пару раз посмотреть и усвоится в голове моей😂
Все обязательно усвоится) главное - параллельно делать ещё это же)
очень круто рассказываете, мне понравилось
Спасибо большое 😊
Спасибо Вам большое
Вам спасибо за просмотр! И слова благодарности)
Очень понравилось❤
Большое спасибо 🙌 я рад
Спасибо! ❤
И вам спасибо за просмотр и благодарность 🙌
Спасибо за урок, супер информативно. Кстати про отдельный фрейм для иконки, он нужен для того, чтобы когда меняешь размер основного фрейма, сама иконка не искажалась. Довольно полезная функция, возможно мешают отступы от иконки до её фрейма, в таком случае можно сделать ресайз фрейма под размер иконки (Ctrl + Alt + Shift + R) или кнопка в правом верхнем углу блока с размерами и позиционированием.
Класс! Спасибо большое) не сталкивался с таким лично, но видел, что иконка искажается или распадается на части при смене размера главного фрейма. Теперь буду знать) спасибо вам 🙌🤝
@@content_prodaet просто пришёл сюда из дизайна сайтов, а там изменения размеров фрейма обычное дело)
@@zist_l да, я как раз про это и подумал 😅 в веб-дизайне это должно постоянно встречаться.
Тут тоже бывает ресайз с 3х4 на 1х1, например, поэтому актуально! Спасибо ещё раз 🤝
Редкий урок. Светлый дизайн сложная штука. А порой очень нужный.
Спасибо, что обратили на это внимание) Да, некоторые категории товаров сложно показать в ярком дизайне - он подходит далеко не всем товарам
Подскажите, в Фигме встроенные шрифты которые по умолчанию, они разрешены для коммерческого использования? Заранее благодарю за ответ! Спасибо за классные, понятные ролики
Спасибо вам за приятные слова 🙌 да, встроенные шрифты разрешены. Главное смотреть за теми, которые вы устанавливаете.
Здравствуйте! Классные уроки, спасибо вам. Единственное у меня доп слои из квадратов эллипсов либо какой нибудь картинки выходят за границы и не прячутся?
Здравствуйте! Спасибо 🙌
Скорее всего у вас на фрейме не стоит галочка в поле clip content (меню справа, когда вы нажимаете на фрейм).
Либо данные элементы не подчинены фрейму (в слоях нужно проверить).
Спасибо за урок, очень полезно и актуально! А откуда вы берете листья и другие подобные мелкие объекты для украшения инфографики? Заранее благодарю за ответ
Сейчас беру с сайта Freepik.com, а раньше с обычных Яндекс картинок)
Спасибо вам за просмотр и приятный комментарий!
Здравствуйте, Андрей! Благодарю Вас за урок, очень доступно и легко доносите информацию. Я начинающий в инфографике, и уверена, что с Вашими уроками быстрее освою эту интересную творческую профессию дизайнера. Андрей, могли бы Вы помочь разобраться с возникшей проблемой при скачивании готового фрейма, ругается на original not aligned (в Preview показывает, что с правой стороны обрезан край, хотя все параметры фрейма и фона соблюдены). В чём моя ошибка? Заранее благодарю.
Добрый день! Спасибо большое за приятную и развернутую обратную связь)
Профессия, действительно, очень интересная. Нет ни дня, когда ничего нового не узнаешь, благодаря ей))
По поводу ошибки - посмотрите, пожалуйста, чтобы у вас не было долей в пикселях (размер и позиция фрейма (и его содержимого, если есть содержимое). Еще есть специальный плагин Pixel perfect, который убирает это за вас)
Спасибо большое за видео! супер доступно и понятно
немного пугает самостоятельный поиск дополнений ,как листочки, в следующих работах, нужных на прозрачном фоне, надеюсь в следующих уроках это затронется или яндекс будет сразу выдавать то что нужно, а то не знаю где еще искать . Еще раз спасибо, буду учиться дальше
Мария, здравствуйте! И вам спасибо за обратную связь и приятный отзыв) декора не пугайтесь, именно такого плана декор очень просто искать в том же яндексе. Если нет с прозрачным фотом, то воспользуйтесь одним из инструментов, который я разбирал в этом видео ruclips.net/video/onYRtHa170c/видео.htmlsi=PPN8sSmgx2W9Hxmw так же выполняйте другие открытые уроки и там будет много ответов на большинство вопросов)) Успешного освоения 🙏
❤❤❤
❤😊
Подскажите пожалуйста про листочки у меня почему то они так не заезжают под общий фон, как это сделать подскажите пожалуйста, у меня они по самому фрейму только или если разместить под Фрей то его естественно не видно? Спасибо
Если я правильно понял вопрос и у вас по краю фрейма листочки не обрезаются, значит на фрейме отключена функция клип контент или листья находятся вне фрейма. Можете мне в тг прислать скрин, чтобы было видно слои t.me/apulkin
Спасибо большое за ответ. Завтра вам скину как у меня получается в ТГ.
Здравствуйте, подскажите вашу ссылку на ТГ не могу никак найти )
@@alisa_koshechka2594 t.me/apulkin )
Добрый день, если я у вас учусь можно добавлять эти карточки к себе в портфолио ?
Добрый день) да, конечно👌
благодарю
@@content_prodaet
очень полезное видео. спасибо))) если плагины не показывают, что делать?
Спасибо вам за просмотр и приятный комментарий)) То есть у вас в строке поиска не показываются плагины?
У меня вопрос. Почему принято использовать фигма а не Фотошоп, ведь тоже самое можно сделать там?
Все верно! В фш можно делать то же самое и даже в чем-то лучше, но в фигме все делать гораздо быстрее) я сам изначально в фш работал, но при переходе в фигму увеличил скорость работы раза в 2😃
еще к фигме легче привыкнуть и у неё базовая бесплатная лицензия обширная)
Можно будет карточку с этой фирмой чая добавить в портфолио или выложить к себе в профиль? Не будет последствий из-за авторских прав?
Можете просто прописать, что работа была выполнена в рамках образовательного курса «Контентмейкер для маркетплейсов», тогда точно никто не придерется)
@@content_prodaet спасибо большое))
Здравствуйте. Почему когда я выбираю белый цвет у меня надпись становится супер прозрачный и ее вообще не видно?
Здравствуйте! Возможно, из-за настройки экрана. Возможно, как-то так получилось, что включилась градиентная заливка и часть текста ушла в прозрачность. Пожалуй, это самые распространенные случаи)
А у меня вместо прозрачного фона листочки и чай добавляются на верном фоне, хотя на компе без фона открывает. Что я не так делаю?
Хм... Очень странно. Не встречал такого. Если с браузерной версии фигмы работаете, то попробуйте установить десктопную (или наоборот).
Достаточно понятно, учитывая, что работаю в этом первый раз. вопрос - как надпись (200 грамм) скрылась за рамку, у меня она оказалась сверху? И еще по цвету - почему надпись ЧАЙ оставили светлую - ее не видно, или так и задумано?
Спасибо за комментарий!
Не совсем понял про 200 грамм. Если она у вас не в подчинении фрейма, то вам нужно ее просто "занести" по слоям в нужное место.
Про белый цвет - сделано специально, потому что текст массивный и он виден в миниатюрах, а в маленьких размерах контрастность повышается для человеческого глаза. Поэтому текст виден при маленьком изображении, но не отвлекает на себя внимание при большом, что правильно с точки зрения презентации товара.
попробую переместить зеленый круг с надписью 200 гр. в нужный слой @@content_prodaet
@@content_prodaet Мне тоже не видно белую надпись, поэтому я добавила легкую тень))
@@user-vb1ip2jm5t конечно, вносите собственные изменения! Каждый индивидуален)
У меня почему-то шрифты которые уже были в сигме большинство не работают(
возможно установщик слетел, если через браузер работаете. Просто установите его заново. Подробнее рассказывал в этом видео ruclips.net/video/r-ABGsAxmDQ/видео.htmlsi=uw5TvsNC2w3PSlsf
Урок просто восторг 🎉 но как сохранить поняла по комментариям ) только у меня чай индийский не на фото почему-то 😀что не так ? Подскажите пожалуйста 🙏
Спасибо вам за приятные слова) А что значит "не на фото"? Возможно, он у вас по слою ниже спустился, если он спрятался за коробкой. В этом случае его надо просто перетащить на слой выше в левом меню)
@@content_prodaet ой я нашла почему 😀у меня надпись была не в Frame а за ним поэтому без нее сохранялась ) спасибо большое за ваши уроки 👍
@@user-mp8is2xl5g 🙌😊
Здравствуйте, очень полезные и интересные видео ❤️ можно ли как то делать то же самое через телефон?
Здравствуйте! Спасибо большое за приятную обратную связь) честно говоря, я на телефоне приложение Figma использую только для срочных просмотров. Функцию редактирования даже не проверял, но думаю, что это очень неудобно)
@@content_prodaet спасибо большое ❤️ а какие то приложения можете посоветовать для телефона? Если есть такая возможность
@@user-uw5nc8ty8n честно говоря, не изучал тему в этом вопросе, но, может быть в Canva можно справиться)
Спасибо большое! А как сохранить?
И вам спасибо! Чтобы сохранить, выберете фрейм в обычном режиме Move (горячая клавиша V) и справа появится меню, где внизу найдете раздел Export - вот через него.
Подскажите как удалить текст , то есть фрейм с текстом?
Необходимо выделить объект и нажать кнопку Delete - один из вариантов)
Странно, но запнулась на первых же минутах урока (на 6й) почему то рисунок не перетаскивается на frame. Пишет: image file import failed
Это вы не запутались. Это глюк фигмы. Попробуйте ее перезапустить или скачать десктопную версию, если работаете из браузера
Классный видео урок, а сколько платный видео курс стоит?
Спасибо большое 🙌
В данный момент стоимость курса с обратной связью составляет 29990 рублей или 2500 рублей в месяц с беспроцентной рассрочкой на год.
Хороший урок, но почему «Чай» так сильно сливается с фоном? Не лучше подложить что нибудь, или обвести чёрным? Я подписался, если что😊
Спасибо за вопрос и подписку) тут фокус в том, что контрастность повышается при рассмотрении этого изображения в миниатюре, а если смотреть приближенное изображение, то заголовок не так заметен, но тогда уже понятно, что это чай)
@@content_prodaet понял, спасибо
Легенькую размытую тень можно добавить
А как сохранять это всё в картинку? Столько делала это, а в конце не сказали как сохранить)
Выделяете фрейм в режиме Move (V), справа внизу в меню появится блок Export, выбираете нужный формат (скорее всего Jpeg или png) и нажимаете на кнопку Export, выбираете путь для сохранения. Готово
У меня не устанавливаются шрифты, в фигму перезагружала, переустановить пыталась, еще раз перезагрузила.
Вы работаете через браузерную или десктопную версию фигмы?
Если Вы работаете через браузер то зайдите на страницу "фигма загрузки" и выбираете кнопку для виндоус или айос
После чего установите файл и перезагрузите страницу с фигмой
@@Shedshebolda спасибо, что ответили) Я еще забыл видео приложить, в котором рассказывается про установку ruclips.net/video/r-ABGsAxmDQ/видео.htmlsi=T0dnWks-icC3cyXl
Что делать если не открывается файл во фрейме
а что именно происходит? Какой файл не открывается? изображение перетаскиваете и оно не появляется?
@@content_prodaetпишет «file format not recognized or failed to convent”, если прям дословно (ну это конкретно у меня)
А… У меня все решилось обычным перемещением фото в другую папку компьютера 😅
@@nahemasid1280 хм, интересно) а это пнг был?
Спасибо за урок, а слепые зоны как же
Спасибо вам за обратную связь) Там в слепые зоны ничего не попадает, но спасибо, что написали - выпущу по этому отдельное видео и поделюсь своими проверочными макетами)
спасибо, буду ждать@@content_prodaet
Спасибо за урок, но очень плохой звук(
И вам спасибо) а что с ним не так?
@@content_prodaet тихий и как будто нечеткий
я не че не понимаю с размером оно просто не ставится либо фрейм больше либо фотка больше ппц
нужно больше вводных, чтобы я смог помочь вам. Сейчас не понимаю, на каком именно этапе у вас возникла проблема
Зря не сказали как правильно сохранять работу
Зря) каюсь... 😁
Выбираете фрейм в решиме Move (корячая клавиша V), справа появляется меню, ищете раздел Export и сохраняете)