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

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

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

1. Делаем фигурный край

Как всегда, способов в фотошопе  много. И я расскажу о тех, которые использую сама.

Простые формы

Если вам нужен, круг, овал, прмоугольник, квадрат, ромб, то выбираем «Выделение».

инструмент выделение

Шаг 1. Растягиваем круг над нашим фоном, удерживая SHIFT, чтобы круг был правильной формы.

Шаг 2. Копируем выделенный участок на новый слой. Для этого нажимаем CTRL+ C  и CTRL+ V (копировать/вклеить). После этой процедуры вы не увидите изменений на избражении, зато в панели «Слои» появится новый слой — «Слой 1».

копировать вклеить на новый слой

Шаг 3. Теперь удаляем или отключаем («спи глазок») задний план.

круг

Всё готово, можно переходить к сохранению.

Затейливые формы

Если вам нужна форма со скругленными углами или цветок, сердечко, кот или другие — тогда нужно выбрать инструмент «Произвольная фигура».

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

 Шаг 1. Выбираем «Произвольную фигуру» на панели инструментов слева. В настройках инструментов вы увидите палитру шаблонов. Здесь есть из чего выбрать. При желании можно загрузить дополнительные.

как выбрать фигуру в фотошопе

Шаг 2. Растягиваем фигуру поверх основного слоя — она будет на новом слое под названием «Фигура 1». Из предложеных стилей слоя — выбираем «Без стиля» (перечеркнутый квадрат).

инструмент произвольная фигура

Шаг 3. Нажимаем правой клавишей мышки на название слоя «Фигура 1» и выбираем «Растрировать слой».

растрировать слой

Шаг 4. На панели инструментов слева выбираем «Волшебную палочку». Щелкаем в центр фигуры — она будет выделена полностью.

Переключаем слои. У нас был активным слой с фигурой, теперь активизируйте задний план. А выделение  осталось прежним. Но оно уже принадлежит нижнему слою.

Шаг 5. Теперь нужно скопировать обведенную область на новый слой. Делаем это известным способом: нажимаем CTRL+ C  и CTRL+ V (копировать/вклеить).

Отключаем или убираем лишние слои. Теперь можно сохранять файл.

фигурный край

На первый взгляд может показаться, что мы произвели очень сложную процедуру, на самом деле это занимает около минуты. Посмотрите, что на панели «История» отобразилось всего 5 пунктов! Вы видите их на скриншоте снизу.

2. Сохраняем на прозрачном фоне

Обычные картинки чаще всего хранятся в формате JPG. Теперь нам нужна не обычая картинка, а вырезанная. Ее нужно сохранить в формате PNG. В меню «Файл», выбираем «Сохранить как» В строке «Тип файла» ищем необходимый нам.

формат PNG

Какие достоинства есть у  PNG-файлов:

  • Изображение сохраняется на прозрачном или полупрозрачном фоне.
  • По сравнению с  форматом PSD, который так же поддерживает функцию прозрачности, PNG-файл весит гораздо меньше. Для сравнения, я сохранила логотип на прозрачном фоне в формате PSD и он занял 281 кв, а в PNG всего 71,7 кв, и качество отсталость прежним.
  •  Картинку в формате PNG можно просмотреть в стандартной программе-просмотрщике изображений.

Буду рада, если в этом уроке вы нашли ответ на свой вопрос. Предложения и пожелания оставляйте в комментариях.

Как сделать фигурные края у иконки: 8 комментариев

  1. Когда соберусь изменять окантовку иконки обязательно вернусь опять к этой статье… потому что так сразу (с одного прочтения) все не упомнишь

  2. Спасибо за наглядный урок. Я правда использую GIMP, но думаю саму идею применить смогу.

  3. Спасибо за статью. Сколько раз пыталась найти для себя иконки, но то цвет не подходит, то еще что-то. Решила делать их сама, но как-то уверенности в познаниях фото-редакторов не было.
    Теперь я сделаю иконку сама!

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

  5. С фотошопом еще не работала, вроде бы и не сложно, но однозначно полезная программка!

  6. Поздравляю с Днем Смеха, желаю улыбок, радости, веселья. Запастись чувством юмора и приобрести запас отличного настроения на весь 2012 год!

  7. ой, как здорово))))) фотошопничать люблю))))
    а как Вы все здорово расписали!!! нам, чайникам, в самый раз)))) Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *