Как нарисовать векторные иконки для сайта или приложения в Figma (бесплатный урок для новичков)

Рет қаралды 64,859

Школа дизайна Яна Агеенко. Бесплатные уроки, курсы

4 жыл бұрын

Хочешь больше полезностей о дизайне?
Вступай в чат Гильдии дизайнеров: ttttt.me/designers_guild
Подписывайся на мой инстаграм: / yan.ageenko
Читай мою книгу: www.litres.ru/yan-ageenko/kak...
Приходи ко мне на курсы: yan.ageenko.pro/school.html?ut...
Урок для тех, кто начинает с полного нуля и не владеет графическими редакторами: • Бесплатный мастер-клас...

Пікірлер: 86

@user-us5bw7uf2z 3 жыл бұрын

Спасибо, первый раз рисовала иконки, очень все понятно и оказывается не так все страшно)) Очень доступно объясняете , для новичков - просто то бальзам на душу! ))

@user-iv7kp2kt2g 2 жыл бұрын

Спасибо,люблю когда видео по делу, без воды,а самое главное с пользой)

@dmitriyzakharov3696 10 ай бұрын

Посмотрев всего 22 минуты я научился базово делать иконки и уже сделал себе парочку! Спасибо большое!

@user-ef2wx9es1p 3 жыл бұрын

Урра! У меня получилось! Спасибо огромное! Такой урок для начинающих - высший пилотаж

@oksanavictorivna7809 3 жыл бұрын

Супер! Благодарю за такой полезный урок!!!

@teploukhov_sad 2 жыл бұрын

Чтобы не выключать заливку и не идти включать обводку - можно сочетанием клавиш Shift + X сразу их поменять местами

@julijzoria Жыл бұрын

ты че такой умный эээ?

@littlemermaid3088 2 жыл бұрын

Спасибо большое, ваши уроки по дизайну самые лучшие!

@YanAgeenko 2 жыл бұрын

Спасибо, очень приятно :)

@user-ub9le6lp3h 3 жыл бұрын

Ян великолепный мастер класс по созданию иконок. Тоже первый раз зашла на ваш канал, ну до чего классная информация)) Благодарю !!!

@YanAgeenko 3 жыл бұрын

Всегда пожалуйста :)

@rinaruben1648 Жыл бұрын

Отлично объясняете. Спасибо!

@user-pr4fs3fx5y 2 жыл бұрын

Отличное видео! Спасибо за урок)))

@z1mmex 2 жыл бұрын

Спасибо за видео! На стажировке понадобилось нарисовать иконки, вот наткнулся на ваше видео!

@user-mv3bv8vi8b 3 жыл бұрын

Отличный урок!🙏 Очень нравится, когда разбирают именно логику работы, а не просто демонстрируют свою (типа) крутизну👍 Подписка, лайк😁 Посмотрела список тем Ваших видосиков - посмотреть «придётся» всё 😏 успехов каналу💪

@user-xi6uj4dx5e Жыл бұрын

ну еще бы озвучивал к логике ГОРЯЧИЕ клавиши было еще лучше, а то копируем и тд и тп, а как это делается сами догадайтесь!

@user-wu3zn8jc1v 4 жыл бұрын

Спасибо за полезный урок)

@user-jh7ed5bz8b Жыл бұрын

Спасибо! Доступно и достаточно понятно

@Artem-Rusich Жыл бұрын

Спасибо. Чётко и по теме. Отличное видео

@rus_dos 2 жыл бұрын

Супер. Очень полезный урок

@user-co4ei5yk1m 3 жыл бұрын

Спасибо, отличный урок

@user-tj3jb9op1p Жыл бұрын

Спасибо, очень доступно.

@littlemermaid3088 2 жыл бұрын

Хочется больше уроков по векторной графике :)

@user-qw7uv3yr3n Жыл бұрын

Зависла на вашем канале )))) как интересно) спасибо )))

@user-ji8dl8rd7y 3 жыл бұрын

Спасибоян! Для новичков ну прям очень здорово разжевано. Еще бы хотелось чтобы ты говорил как сделать то или иное действие во время стрма. Типа как остановить работу пера, либо какие-то еще мелочи.

@YanAgeenko 3 жыл бұрын

Перо останавливается нажатием esc. Спрашивай в комментах, если что-то непонятно, я отвечу :)

@user-fy5rq7ki2f 8 ай бұрын

Супер! Спасибо)

@tanyalohinova3219 4 жыл бұрын

Спасибо 🙏

@melizami Жыл бұрын

Благодарю!

@user-ks9zq9wu1l 4 жыл бұрын

Спасибо!

@neperwi 7 ай бұрын

В последней иконке, как Вы изменили размер внутреннего эллипса? Выделив и прокрутив колесик? У меня после создания иконка не увеличивается а размере, фрейм растягивается а иконка нет

@user-kk7zn5iu5u Жыл бұрын

Спасибо!!

@habweb8815 2 жыл бұрын

Спасибо! Тысячный лайк поставил (было 999) :))

@alsoualsou9 2 жыл бұрын

спасибо!!!

@user-lz9nd9pr1e 3 жыл бұрын

Супер!!! Все четко и понятно!!! ❤️ благодарю! Я бы с удовольствием послушала видео про перо) не слушается оно меня ((

@YanAgeenko 3 жыл бұрын

Посмотри это видео: kzfaq.info/get/bejne/iLJzgNZmp-Cxqps.html

@user-lz9nd9pr1e 3 жыл бұрын

От души спасибо) буду учиться с вами 💪

@sophiewaibole1457 Жыл бұрын

подскажите, пожалуйста, как масштабировать такие иконки? так как они сделаны с помощью обводки, то при масштабировании толщина обводки сохраняется в 2 пикселя. визуально получается, что чем больше иконка, тем тоньше обводка, тк ее размер не масштабируется вместе с самой формой. что нужно сделать с иконкой, чтоб обводка тоже масштабировалась?

@YanAgeenko Жыл бұрын

с помощью инструмента Scale (клавиша K на клавиатуре или выпадающий список у инструмента Move)

@unlight77 4 жыл бұрын

можно иначе сделать иконку со звездой, преобразовать обводку в кривые и наружным точкам придать сглаживание, выделив только их. Видео полезное, спасибо!

@YanAgeenko 4 жыл бұрын

Да, тут каждую из этих иконок можно несколькими способами сделать, в этом и суть :)

@user-xj1oj5nk1s 2 жыл бұрын

супер)))

@juliasiedina6867 3 жыл бұрын

Вопрос. Иконки всегда должны быть 2-ух пиксельные ? И я их должна разбирать как в илюстраторе или могу оставить в формате обводки ?! Спасибо!

@YanAgeenko 3 жыл бұрын

Не принципиально

@backstreet9910 2 жыл бұрын

Ребят как выделять линии кликом мышки, как на видео, не получается

@Ace_of_Black 3 жыл бұрын

Иконки разве не искажаются при сохранении, особенно сглаживаемые элементы? Я привык если делать, то строго по пикселю. В редакторе выглядит норм, а на практике плывёт. Слишком маленький размер. В каком формате лучше сохранять?

@YanAgeenko 3 жыл бұрын

Иконки могут искажаться при сохранении в масштабе, не равном 100%. Лучший формат для сохранения - svg.

@Bonaidea Жыл бұрын

Спасибо большое за видео, то что нужно для самых чайников, как я! Только вопрос: иконки в одном сете не обязательно разве должны быть одинаковы по высоте? Тут получается дом и звезда на два пикселя меньше остальных

@YanAgeenko Жыл бұрын

фрейм иконки должен быть одинаковый, но сами иконки могут быть разными

@Bonaidea Жыл бұрын

@@YanAgeenko Спасибо!

@user-ub9le6lp3h 3 жыл бұрын

Ян я решила в 3 иконке не оставлять промежуточный пиксель, а просто соединила голову с туловищем. Мне показалось, что так лучше.

@YanAgeenko 3 жыл бұрын

Можно и так, да

@user-ch4yq9yw5t 27 күн бұрын

как сделать скругленную крышу у домика?( эти острые углы режут глаз

@YanAgeenko 26 күн бұрын

Внизу блока Stroke жмете на три точки и в появившемся окне в разделе Join выбираете скругление

@rinaruben1648 Жыл бұрын

Почему не рисует перо, рисует только тонкие линии, переключение не помогает?

@YanAgeenko Жыл бұрын

Так перо и должно рисовать линии. Чтобы была фигура, нужно нарисовать замкнутый контур и добавить заливку

@Chaosbirdvorona 3 жыл бұрын

спасибо, классный туториал! а почему два пикселя толщина линий?

@YanAgeenko 3 жыл бұрын

Толщину можно любую делать :)

@marinasergeeva4824 Жыл бұрын

Только у меня возник вопрос как сделать точку, за которую можно вытянуть в арку?)

@YanAgeenko Жыл бұрын

Двойным щелчком по контуру

@user-fq4lx3tx7d 3 жыл бұрын

Этож набор для Гугл карт!

@kazinazmul3709 2 жыл бұрын

Good

@invisibleobserver9248 3 жыл бұрын

Скажите как сохранять их в png ?

@YanAgeenko 3 жыл бұрын

Просто выделяешь в фигме и в правой части интерфейса снизу жмешь export

@dariabosenko6159 3 жыл бұрын

как включить сетку не для фрейма?

@YanAgeenko 3 жыл бұрын

Сетки в фигме можно сделать только для фрейма.

@yuliya_diary Жыл бұрын

Не знаю в чём дело, делаю всё как в видео, но при нажатии intersect selection, не получается так. А выходит сплошная фигура. Тоже самое и с лупой в первом уроке , лупа получается полностью чёрная 🫤

@YanAgeenko Жыл бұрын

Значит, что-то делаешь всё же не так :)

@yuliya_diary Жыл бұрын

В третьей иконке та же проблема, не работают эти функции у меня так, как показано в видео. В чем может быть проблема?😩

@YanAgeenko Жыл бұрын

Пришлите в телеграм-чат t.me/AgeenkoDesign свой вопрос и ссылку на файл

@yuliya_diary Жыл бұрын

Всё, поняла в чём дело. Получилось🙂

@YanAgeenko Жыл бұрын

И в чем было дело?

@artcoin901 3 жыл бұрын

как выделить несколько фигур сразу

@YanAgeenko 3 жыл бұрын

С зажатым shift или ctrl

@_cheeter3270 3 жыл бұрын

Не получается сделать прямые линии домика постоянно сворачивает!

@YanAgeenko 3 жыл бұрын

Нужно зажать shift

@_cheeter3270 3 жыл бұрын

@@YanAgeenko спасибо большое я посмотрел другое ваше видео там нашел ответ!

@user-xi6uj4dx5e Жыл бұрын

Ну если бы озвучил действия, как копировать и другое, было бы еще лучше, а так, сами тыркайте и понимайте!

@user-zb1jm1ir7i 3 жыл бұрын

Я видимо тупее всех тупых(( Не поняла в начале про связь иконки в 24 пикселя и линий, которые мы должны прорисовывать четко по пикселям, а не между двух..поняла, чтобы не расплывалось, но ведь когда фигура круг, там линия в 2 пикселя идет между квадратиков, получается будет расплываться? Или объяснение было вообще не про это))

@YanAgeenko 3 жыл бұрын

да, круг будет расплываться в любом случае

@user-zb1jm1ir7i 3 жыл бұрын

@@YanAgeenko оойй! Я иду в правильном направлении, соображаю оказывается! Спасибо))