Надеюсь,что если вы хотя бы прочитали прошлый урок и то хорошо, надеюсь когда мы дойдем до практики, вы все обязательно вспомните, а если что - посмотрите и попробуете. Медалька "ученик недели" пока никому не достается:

Продолжим нашу тему о веб-дизайне и сегодня поговорим о закругленных углах.

Закругленные углы

Прямоугольники с закругленными углами входят в стандартный набор инструментов Web и UI дизайнера. Они настолько распространены, что редко встретишь веб страницу или приложение, которые не используют их в качестве элементов пользовательского интерфейса. К сожалению, относительно сложно создать четкий прямоугольник с закругленными углами в Photoshop (под четкими я имею ввиду, что каждая грань образована отчетливой границей из пикселей для обеспечения наиболее высокой резкости объекта).

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

Векторный прямоугольник с закругленными углами

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

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

Чтобы применить эту опцию, поставьте галочку на Snap to Pixels в настройках инструмента.

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

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

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

Размытие

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

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

1. Создайте новый слой.
2. Сделайте выделение в форме прямоугольника.
3. Войдите в режим быстрой маски (Q).
4. Примените размытие по Гауссу (Filter - Blur - Gaussian Blur) в размере половины радиуса будущего закругленного угла (например, для угла радиусом в 10 пикселей понадобится размытие силой 5 пикселей).
5. Скорректируйте уровни (command/control+L) и введите значение около 118 для точки черного и 137 для точки белого.
6. Выйдите из режима быстрой маски (Q).
7. Заполните выделение.

Этот метод хорош если необходимо быстро создать некую необычную форму, которую сложно рисовать вручную.

Круги

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

1. Создайте новый слой.
2. Сделайте выделение в форме круга, которое в два раза больше, чем желаемый радиус будущего закругленного угла (к примеру для угла радиусом 10 пикселей понадобится круг 20х20 пикселей).
3. Заполните выделение.
4. Переместите выделение вправо. Это может быть сделано быстро если нажать клавиши shift+вправо пару раз.
5. Заполните выделение.
6. Переместите выделение вниз.
7. Заполните выделение.
8. Переместите выделение влево.
9. Заполните выделение.
10. Создайте выделение в форме прямоугольника, которое закрывает весь вертикальных промежуток между кругами, но начинается и заканчивается в центре каждого круга.
11. Заполните выделение.
12. Создайте прямоугольное выделение, которое закрывает весь горизонтальный промежуток между кругами, но начинается и заканчивается в центре каждого круга.
13. Заполните выделение.

Обводка

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

1. Создайте новый слой.
2. Создайте прямоугольное выделение, которое меньше, чем непосредственный размер будущего прямоугольник с закругленными углами (меньше на 2*радиус).
3. Заполните выделение.
4. Добавьте обводку, создав соответствующий стиль слоя, толщиной, равной радиусу закругления угла.

Если вам нужно свести объект, чтобы удалить стиль слоя с обводкой, проделайте следующее:

1. Создайте новый слой.
2. В панели слоев выберите новый слой и предыдущий с прямоугольником.
3. Объедините слои (command/control+E).

Можно автоматизировать процесс сведения записав экшен (Photoshop Action), которому может быть присвоена комбинация клавиш для быстрого вызова.

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

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

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

Однако, как видно внизу, каждый метод дает различный результат. Так что, в зависимости от того, какого результата вы хотите достичь, можно сочетать эти методы.

(сверху вниз: Инструмент Закругленный Прямоугольник; Инструмент Закругленный Прямоугольник+Выровнять по Пикселям; Размытие; Размытие + Уровни с другими параметрами; Круги; Обводка.)

Все тесты были выполнены в Photoshop CS4 и CS5 на Маке. Процесс создания на обоих версиях одинаков.

Автор: Marc Edwards
Перевод: Phenobarbidoll

А на следующей неделе мы поговорим и о градиентах !!!!

Задание недели - изучить данные методы !!!