Иконки

UI UX дизайн
03.11.2017

С иконками всегда много трудностей, отсюда возникла тема об их быстром создании. Рисовать иконки каждый раз самому не всегда есть время, а у многих просто способности. Но в этом нет ничего страшного, потому что есть как минимум 2 способа быстро подчинить скаченные иконки заданному стилю.

Сразу добавлю несколько стоков на которых я качаю иконки сама:

Icons for everything

ICONFINDER/

Freepik/

Flaticon

Если вам нужны иконки с контуром определённой толщины:

  1. Скачиваем иконки в формате Svg ( иконку выполненную в стиле заливки, а не контурную):
  2. Кнопка 1
  3. Перетаскиваем в фотошоп;
  4. Дважды кликаем по слою и вызываем окно стилей;
  5. Наложение слоя > Задаем цвет фона;
  6. Выполнить обводку > Задаем нужный цвет обводки и нужную толщину, а так же задаем более подходящее положение:
  7. Кнопка 2
  8. Обрабатываем все иконки подобным образом:
Кнопка 3

Таким методом легко и быстро получается создать 1 пиксельные иконки, просто задать Обводку размером - 1.

Если вас наоборот, устраивает форма вашей иконки, но вы хотите сделать все иконки 2х определённых цветов, это тоже займет всего пару минут:

  1. Так же клинув дважды по слою замените цвет иконки на необходимый:
  2. Кнопка 4
  3. Кликните по слою и преобразуйте его в смарт объект; (это требуется чтобы новый цвет стал не стилем, а основным. Если вы этого не сделаете при добавлении маски она не будет отображаться);
  4. Перекройте нужным цветом ту часть иконки, которую хотите закрасить другим цветом:
  5. Кнопка 5
  6. Кликнув по слою с новой фигурой добавьте обтравочную маску:
  7. Кнопка 6
    Кнопка 7
  8. Выделите слой с иконкой и верхней фигурой и преобразуйте в единый смарт объект;
  9. Если вам требуется заполнить другим цветом сложную форму, нарисуйте её пером:
  10. Кнопка 8
  11. Повторите такие же операции с другими иконками.
Опубликовано: 2017-11-03

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку