Уроки мастерства Фотошопа: сглаженные углы. Часть 2

Уроки мастерства Фотошопа: сглаженные углы. Часть 2

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


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


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


button.png


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-01a-small.png


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


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-01-big.png


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


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-02-small.png


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. Закрасьте выбранную область.


photoshop-master-lesson-diiwo-by-rounded-rectangle-blur.png


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


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


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


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-circles.png


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


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


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-stroke.png


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


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


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


photoshop-master-lesson-diiwo-by-rounded-rectangle-06-small.png


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



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


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


Комментарии
Пользователь: nastek 06.03.2011 14:04
Аватар пользователя nastek

Я хотела бы спросить, где можно подать заявку на урок( а то я новенькая в фотошопе, и совсем не понимаю что такое слои, и еще как вырезать предмет из фотки и вставить его на другое фото)???

Пользователь: shureiman 09.03.2011 07:20
Аватар пользователя shureiman

Подать заявку можно на нашем форуме вот в этой теме.

Пользователь: Гость 02.09.2011 14:37
Аватар пользователя Гость

А где описание как сделать при помощи выделения?

Пользователь: Аlechka 23.10.2011 19:24
Аватар пользователя Аlechka

А эти уроки нужно оплачивать???

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