DIWO.BY

Сглаженные углы в графических элементах сайта, интерфейсах уже прочно вошли в арсенал многих веб-дизайнеров. Они столь распространены, что закруглённый угол можно встретить почти на любой странице в интернете, в каждом программном приложении. К сожалению, идеальные углы не так легко нарисовать в Фотошопе.

Сглаженные углы

Продвинутые пользователи Adobe Photoshop, как правило, знают несколько способов создания описываемого нами эффекта. После прочтения этой статьи их станет ещё больше. В итоге остановимся на оптимальном варианте.

1. Векторный инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle)

Лучшего кандидата на титул самого удобного инструмента для наших целей не найти. Но до тех пор, пока Вам не станет ясно, что края у нарисованных фигур получаются размытые (смотрите рисунок выше).

К счастью в Фотошопе есть очень хорошая опция (и очень хорошо спрятанная), которая привязывает работу инструмента Rounded Rectangle к сетке пикселов. Чтобы её включить, нужно вызвать параметры инструмента (смотрите рисунок ниже).

С этой опцией каждый раз фигура у Вас будет получаться идеальной формы. Единственный минус – после создания фигуры, радиус углов нельзя изменить, но если очень надо – придётся рисовать заново. В программе Adobe Illustrator, кстати, такой недостаток отсутствует: радиус закругления просто меняется нажатием клавиш вверх и вниз.

К плюсам метода можно отнести то, что при увеличении рисунка углы не станут размытыми – фигура-то векторная. Кстати, если сильно придираться к работе данного инструмента, то в масштабе можно заметить следующее: одна половина угла не похожа ну другую его половину. Но на практике в масштабе 1:1 это не заметно.

2. Фильтр «Размытие» (Blur)

Метод с применением фильтра Blur – по сути небольшой «хак», заключающийся в создании слоя с выделением прямоугольной области, последующего его размытия и увеличения контраста.

Этот метод можно разделить на 7 шагов. Нужно быть аккуратным и помнить, что радиус созданных углов нельзя изменять «на лету». Изменение настроек уровней (Levels) тоже бывает муторным. Преимущество данного метода заключается в том, что в зависимости от настроек уровней (Levels) можно добиться разной степени сглаженности.

1. Создайте новый слой.
2. Нарисуйте с помощью инструмента выделения прямоугольную фигуру.
3. Включите режим быстрой маски (клав. Q).
4. Примените фильтр размытия по Гауссу (Filter > Blur > Gaussian Blur). Если вам нужен радиус в 6 пикселей, в настройках фильтра нужно задать 3.
5. Вызовите окно с настройками Уровни (CTRL + L), для чёрного ползунка выставьте значение 118, для белого 137 для входных значений (Input Levels).
6. Отключите быструю маску (клав. Q).
7. Закрасьте выбранную область.

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

3. Рисование вручную

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

1. Создайте новый слой.
2. Нарисуйте окружность с помощью инструмента выделение. Для 6-пиксельного скругления нужно рисовать окружность с радиусом 12.
3. Закрасьте окружность.
4. Сместите выделение вправо. Это можно сделать с помощью клавиатуры: зажмите Shift и нажмите несколько раз клавишу вправо.
5. Закрасьте окружность.
6. Сместите выделение вниз.
7. Закрасьте окружность.
8. Сместите выделение влево.
9. Закрасьте окружность.
10. Нарисуйте вертикальный прямоугольник.
11. Закрасьте прямоугольник.
12. Нарисуйте горизонтальный прямоугольник.
13. Закрасьте прямоугольник.

4. Обводка (Stroke)

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

1. Создайте новый слой.
2. Нарисуйте с помощью инструмента выделения (Select) прямоугольник, который будет по размерам меньше, чем нужная Вам фигура.
3. Закрашиваете выделенную область.
4. В настройках слоя выбираете эффект обводки (Stroke). Толщина обводки будет соответствовать значению нужного радиуса угла.

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

Какой метод лучше?

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

Примеры работы можно посмотреть в PSD-файле. В следующей части мы расскажем о применении градиента.

по материалам smashingmagazine

Ещё уроки Фотошопа для начинающих:

• Уроки мастерства Фотошопа: эффект шума. Часть 1
• Хитрости Adobe Photoshop CS4
• Веб-дизайн. Стеклянные кнопки, иконки, аватары
• Adobe Photoshop с нуля. Оптимизация изображений
• Как обрезать фотографию в Фотошопе