Как изменить цвет png в Figma. 2 способа как поменять цвет картинки пнг в фигма.

Поделиться
HTML-код
  • Опубликовано: 8 окт 2024
  • Быстрые и простые способы изменения цвета png картинки в Figma. В видео рассказываю о том как изменить цвет png в Figma. 2 способа как поменять цвет картинки пнг в фигма.
    Это видео может быть вам полезно, если заказчик предоставил вам свой логотип в формате пнг, а вам нужно изменить цвет логотипа. Но не любой логотип можно заливать в один цвет и не используйте этот способ для иконок, иконки должны быть векторные.
    🟢 Видео про иконки: • Где взять иконки для с...
    🟢 Мое предыдущее видео: • 1.2 Кнопки Auto Layout...
    👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
    ►Мой StyleGuide/Ui-kit в Figma Community: cutt.ly/HWcW3Tm
    ►Instagram - cutt.ly/jWcQ3Mk
    Добавляйтесь в друзья:
    ★ Facebook - cutt.ly/nWcWecJ
    ★ Вконтакте - cutt.ly/5WcWu2W
    ★ Linkedin - cutt.ly/DWcWb5q
    Вступайте в сообщества:
    ★ Полезные публикации о дизайне Вконтакте - cutt.ly/0WcEtXP
    ★ Telegram канал t.me/joinchat/...
    ★ Telegram чат: t.me/joinchat/...
    Мои работы:
    ★ Dribbble: cutt.ly/1WcEx6E
    ★ Behance: cutt.ly/UWcEW0I
    #figma #webdesign #uxui #uikit

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

  • @ValeriyaDesire
    @ValeriyaDesire  3 года назад +6

    Знали о таком методе? Может у вас тоже есть какие-нибудь классные лайфхаки?делитесь в комментариях🚀

    • @Pavel.Maslennikov
      @Pavel.Maslennikov 6 месяцев назад

      Ну это база. Небольшой секрет, но необязательно копировать лого для маски, можно просто прямоугольник разноцветный сделать и цвет лого поменять на цвет прямоугольника. А лучше потыкать все виды масок с разным способом наложения, чтобы понять какие способы ещё есть и как они работают. а я пошёл дальше искать кнопку заливки в фигме)

  • @Center_Group
    @Center_Group 2 года назад +3

    Искренне благодарю!
    Ты умничка, очень доступно объяснила, всё получилось по первому примеру!

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

    Спасибо Валерия. Вы так отлично всё объясняете!!! Очень люблю слушать ваши видео !!!

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

    Простые но очень дельные уроки. Спасибо Лерочка, ты фея💫

  • @Oxxamyt
    @Oxxamyt 7 месяцев назад +2

    Спасибо! Все получилось)

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

    Спасибо Вам Большое!! Я не знал, что в Фигме так можно, просто привык к Фотошопу, а Фигма для Меня тёмный лес))

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

    Спасибо большое! Недавно с такой проблемой столкнулся, теперь хоть знаю как её решить.

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

    Коротко, доступно, понятно 👍

  • @Максим-о8о8г
    @Максим-о8о8г 2 года назад +2

    Быстро и просто - спасибо!

  • @Елена-з1и4ч
    @Елена-з1и4ч 3 года назад +2

    Cпасибо! Делала верстку и нужно было изменить цвет иконки с синего на белый. В видео просто и понятно объяснили. Все получилось! Хотелось понять, как именно в фигме это делать, а не в фотошопе. Так как в основном с макетами приходится работать в фигме.

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

      Пожалуйста, очень рада, что ролик оказался для вас полезным))) 🌸

  • @user-uc5zm8bd1c
    @user-uc5zm8bd1c 3 года назад +4

    Единственное видео на котором сказали, как дублировать!! Спасибо ❤️

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

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

  • @ПавлихинаАнгелина

    Вы спасли меня , с меня подписка

  • @maksymtyshchenko7084
    @maksymtyshchenko7084 3 года назад +2

    Привет, Лера.
    Спасибо за такой лайфхак!
    Я все это делал в старом-добром Фотошопе :)
    Удачи!

    • @ValeriyaDesire
      @ValeriyaDesire  3 года назад +2

      Привет) Я тоже раньше это делала в фотошопе))

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

    Интересно конечно !!! Еще проще способ если изображения с четкими контурами то воспользоваться плагином image tracer и делай с вектором что хочешь )))

  • @ТинаКовригина
    @ТинаКовригина Год назад +1

    Спасибо, отлично! Очень помогла!!

  • @linamakarova2630
    @linamakarova2630 7 месяцев назад

    Очень помогли, спасибо большое!

  • @-caseflow1354
    @-caseflow1354 3 года назад +1

    В фигме вообще, конечно, не хватает чуть более расширенной работы с растром. Есть еще плагины, типа инструмента hue/saturation в фотошопе, позволяют менять цвет для уже цветных растровых изображений. Adjustments, как пример.

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

      Интересно, обязательно посмотрю плагин 👍🏼

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

    Спасибо)) Еще фишечки))

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

    Вы прекрасно объяснили, спасибо за видео! Но у меня видимо личный баг: делаю все как объясняете, шаг за шагом, а цвет заливается вместо окрашивания иконки... Подскажите пожалуйста, в чем может быть причина? Одну иконку сделала, а больше не выходит...

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

    спасибо большое хоть кто-то нормально обьяснил

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

    Классное видео, легко и просто! 👍

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

    Круто. Благодарю. А как сделать так чтоб весь фрейм (все составляющие: текст, фото и тп) стал в чб (для неактивной кнопки)?

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

    спасибо за урок

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

    Спасибо!

  • @artemasoap
    @artemasoap 3 месяца назад

    круто! спасибо!

  • @ИринаАфонькина-ю5щ

    Подскажите а как выделить оба изображения? У меня не получается

  • @ОльгаПопова-щ9н
    @ОльгаПопова-щ9н 2 года назад +1

    благодарочка

  • @RomanBuzunov1
    @RomanBuzunov1 2 месяца назад

    Спасибо

  • @СамираСалишева
    @СамираСалишева 2 года назад +1

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

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

      Когда сохраняешь выделяешь только слой или всю группу в маске? Нужно сохранять всю группу.

    • @СамираСалишева
      @СамираСалишева 2 года назад

      @@ValeriyaDesire спасибо, получилось!

  • @ДарьяЩебет
    @ДарьяЩебет 2 года назад

    спасибо!

  • @ЛюбовьВасильева-с3б
    @ЛюбовьВасильева-с3б 10 месяцев назад

    Класс

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

    А если изображение двухцветное, то как поменять только один цвет?

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

      Тогда лучше в фотошопе сделать

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

    класс

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

    У меня нет пункта заливки пнг, что делать?

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

    а как поменять цвет самого логотипа , а текст чтоб остался с прежнем цветом ?

  • @ЮлияЮлия-ж8о3п
    @ЮлияЮлия-ж8о3п 2 года назад +1

    Мне не понятно как дублировать? Что за команда “команд д”

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

      На маке это сочетание Command + D, на винде это Ctrl +D

    • @ЮлияЮлия-ж8о3п
      @ЮлияЮлия-ж8о3п 2 года назад +1

      @@ValeriyaDesire спасибо 🙏🏻💐💐💐

    • @ЮлияЮлия-ж8о3п
      @ЮлияЮлия-ж8о3п 2 года назад +1

      Подскажите пожалуйста, почему может быть такое иногда получается поменять цвет иногда заливается весь квадрат? Делаю по вашему способу одинаково.

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

    спасибо за плагин!!!

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

    начало: 1:15

  • @Игорь-и9м5к
    @Игорь-и9м5к 10 месяцев назад

    не понимаю почему у меня не получается также( полностью заливает цветом элемент

    • @marinakiseleva2747
      @marinakiseleva2747 7 месяцев назад

      картинка пнг должна быть на прозрачном фоне (в начале об этом сказали)

    • @Зиннира_МГ
      @Зиннира_МГ 5 месяцев назад

      когда 2 картинки, заливать нужно верхний

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

    Не работает на винде 7 херь какая-то

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

      Фигма и плагин ни как не относятся к операционной системе, все должно работать

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

      @@ValeriyaDesire разобрался! Пасиб за урок.)

  • @sns76
    @sns76 11 месяцев назад +1

    зАЧЕМ ВЫ ТАРАТОРИТЕ, КОГДА ОБЬЯСНЯЕТЕ? мНЕПРИХОДИТСЯ СКОРОСТЬ УБАВЛЯТЬ, ПОКАЗЫВАЕТ ВСЁ МЕЛЬКОМ. пРЕКРАТИТЕ ТАРАТОРИТЬ