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

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

Комментарии • 87

  • @dmitriyzakharov3696
    @dmitriyzakharov3696 Год назад +3

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

  • @teploukhov_sad
    @teploukhov_sad 2 года назад +12

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

    • @julijzoria
      @julijzoria Год назад

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

  • @НаташаШевченко-в7л
    @НаташаШевченко-в7л 4 года назад +7

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

  • @маринаборовых-д4л
    @маринаборовых-д4л 3 года назад +3

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

  • @СветланаГангардт-ц2й
    @СветланаГангардт-ц2й 3 года назад +3

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

  • @ИринаНыркова-ч2с
    @ИринаНыркова-ч2с 3 года назад +2

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

    • @YanAgeenko
      @YanAgeenko  3 года назад

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

  • @ИринаЧ-ы4к
    @ИринаЧ-ы4к 4 года назад +8

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

    • @БурыйМедведь-в7ж
      @БурыйМедведь-в7ж 2 года назад

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

  • @littlemermaid3088
    @littlemermaid3088 3 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

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

  • @z1mmex
    @z1mmex 2 года назад +1

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

  • @oksanavictorivna7809
    @oksanavictorivna7809 3 года назад +3

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

  • @НатаГаляткина
    @НатаГаляткина 2 месяца назад

    Дякую за Ваші знання! Ви мені допомогли!❤

  • @СергейСвинтицкий-ъ6б
    @СергейСвинтицкий-ъ6б 4 года назад +2

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

    • @YanAgeenko
      @YanAgeenko  4 года назад +2

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

  • @unlight77
    @unlight77 4 года назад +3

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

    • @YanAgeenko
      @YanAgeenko  4 года назад +1

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

  • @Artem-Rusich
    @Artem-Rusich Год назад +1

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

  • @АлинаКвитка-э8м
    @АлинаКвитка-э8м Год назад +1

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

  • @ЯнаЗасеева-п3т
    @ЯнаЗасеева-п3т 2 года назад +1

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

  • @rinaruben1648
    @rinaruben1648 2 года назад +1

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

  • @ЭннВасечкина
    @ЭннВасечкина 4 года назад +5

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

    • @YanAgeenko
      @YanAgeenko  4 года назад +3

      Посмотри это видео: ruclips.net/video/RLCMs5BzMzg/видео.html

    • @ЭннВасечкина
      @ЭннВасечкина 4 года назад

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

  • @littlemermaid3088
    @littlemermaid3088 3 года назад +1

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

  • @NurSandal
    @NurSandal Год назад +1

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

  • @ЮлияАндреева-п2я
    @ЮлияАндреева-п2я Год назад +1

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

  • @neperwi
    @neperwi Год назад

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

  • @rus_dos
    @rus_dos 3 года назад +1

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

  • @habweb8815
    @habweb8815 2 года назад +1

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

  • @АнжеликаВолотка
    @АнжеликаВолотка 3 года назад +1

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

  • @Bonaidea
    @Bonaidea Год назад +1

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

    • @YanAgeenko
      @YanAgeenko  Год назад

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

    • @Bonaidea
      @Bonaidea Год назад

      @@YanAgeenko Спасибо!

  • @ИринаНыркова-ч2с
    @ИринаНыркова-ч2с 3 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

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

  • @sophiewaibole1457
    @sophiewaibole1457 2 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  2 года назад +1

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

  • @ЭлигияРусинович
    @ЭлигияРусинович 3 года назад +1

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

  • @ИринаКобук
    @ИринаКобук 4 года назад +1

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

  • @melizami
    @melizami 2 года назад +1

    Благодарю!

  • @ЕлизаветаМирошникова-ю1л
    @ЕлизаветаМирошникова-ю1л 6 месяцев назад +1

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

    • @YanAgeenko
      @YanAgeenko  6 месяцев назад

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

  • @marinasergeeva4824
    @marinasergeeva4824 Год назад

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

    • @YanAgeenko
      @YanAgeenko  Год назад

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

  • @Ace_of_Black
    @Ace_of_Black 4 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  4 года назад

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

  • @ОльгаК-ф8р
    @ОльгаК-ф8р 2 года назад +1

    Спасибо!!

  • @backstreet9910
    @backstreet9910 3 года назад

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

  • @rinaruben1648
    @rinaruben1648 2 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  2 года назад +2

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

  • @juliasiedina6867
    @juliasiedina6867 3 года назад

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

    • @YanAgeenko
      @YanAgeenko  3 года назад

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

  • @alsoualsou9
    @alsoualsou9 3 года назад +1

    спасибо!!!

  • @ЮляТимирязева-ф6ъ
    @ЮляТимирязева-ф6ъ 4 года назад +1

    Спасибо!

  • @ОлесяОрлова-д9г
    @ОлесяОрлова-д9г 3 года назад +1

    супер)))

  • @artcoin901
    @artcoin901 3 года назад +1

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

    • @YanAgeenko
      @YanAgeenko  3 года назад

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

  • @ИванНикишин-т2ш
    @ИванНикишин-т2ш 3 года назад

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

  • @yuliya_diary
    @yuliya_diary 2 года назад

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

    • @YanAgeenko
      @YanAgeenko  2 года назад

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

    • @yuliya_diary
      @yuliya_diary 2 года назад

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

    • @YanAgeenko
      @YanAgeenko  2 года назад

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

    • @yuliya_diary
      @yuliya_diary 2 года назад

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

    • @YanAgeenko
      @YanAgeenko  2 года назад

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

  • @ЛюдмилаСультеева-д5н

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

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

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

    • @ЛюдмилаСультеева-д5н
      @ЛюдмилаСультеева-д5н 3 года назад +1

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

  • @JuliaRu11
    @JuliaRu11 2 года назад

    Есть еще проще способ рисовать щестеренки. Чуть ли не в два клика.

  • @БурыйМедведь-в7ж
    @БурыйМедведь-в7ж 2 года назад

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

  • @dariabosenko6159
    @dariabosenko6159 3 года назад

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

    • @YanAgeenko
      @YanAgeenko  3 года назад

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

  • @Chaosbirdvorona
    @Chaosbirdvorona 4 года назад

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

    • @YanAgeenko
      @YanAgeenko  4 года назад

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

  • @_cheeter3270
    @_cheeter3270 4 года назад

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

    • @YanAgeenko
      @YanAgeenko  4 года назад +1

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

    • @_cheeter3270
      @_cheeter3270 4 года назад

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

  • @ЭдгардДжл
    @ЭдгардДжл 2 месяца назад

    Ну ты и намудрил конечно со звездочкой, особенно для новичков🤦‍♂️ можно же просто в stroke settings, join поставить на скругленый и всё! Будет то же самое 😂

  • @kazinazmul3709
    @kazinazmul3709 2 года назад +1

    Good

  • @Ольга-з3г5у
    @Ольга-з3г5у 5 месяцев назад

    А если моя иконка будет позожа на иконку другого автора, то это нарушение авторских прав? Например, я нарисовала домик, другой аатор точно такой же домик. 😂😂Не могу понять

    • @YanAgeenko
      @YanAgeenko  5 месяцев назад

      всё будет ок, не переживайте :) похожие иконки - это частое явление

  • @tanyalohinova3219
    @tanyalohinova3219 4 года назад +1

    Спасибо 🙏

  • @adiamock
    @adiamock 10 месяцев назад +1

    Спасибо!

    • @YanAgeenko
      @YanAgeenko  10 месяцев назад

      На здоровье!