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

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

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

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-файлов:

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

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