Урок фотошопа: Шум, текстуры, градиенты и закругленные углы.
Шум, текстуры, градиенты и закругленные углы.
Часто
именно мелкие детали превращают хороший макет в отличный дизайн; детали
вроде проработанных текстур, полутонов и гладких форм. Фотошоп содержит
в себе огромный запас инструментов, с помощью которых можно
усовершенствовать дизайн, но выбрать подходящий не всегда легко. Будучи
одержимыми мыслью, что сделали правильный выбор, мы провели огромное
количество экспериментов, чтобы определить преимущества и недостатки
каждого метода. В итоге получилось руководство по часто используемым
инструментам и техникам для Web и UI дизайна в Photoshop.
Шум и текстуры
Аккуратный
шум или текстура на элементах пользовательского интерфейса могут
выглядеть замечательно, но какой способ добавить их является самым
лучшим? Наша цель найти метод, который позволит сохранять качество при
масштабировании, но также будет прост в применении и легко изменяем.
Чтобы узнать, какой лучше, мы будет сравнивать каждый метод по
следующим критериям:
Количество слоев: чем меньше, тем лучше.
Возможность масштабирования: если размер документа изменен, останется ли качество эффекта тем же?
Будет ли шум находиться поверх примененных стилей слоя c цветом и градиентом?
Может ли метод быть использован с любой другой текстурой, а не только с шумом?[/*]
Растровый слой с шумом
Возможно, самый простой способ сделать элемент текстурным - это создать обычный растровый слой, заполнить его цветом, применить Filter - Noise - Add Noise, затем применить маску или векторную маску, чтобы соответствовать размерам элемента, к которому вы применяете шум.
Использование
высокого уровня шума, изменив режим наложения слоя на Luminosity
(Свечение) и уменьшая непрозрачность, даст наибольший контроль над
текстурой с минимальным искажением нижележащих слоев.
Выставление
количества шума до 48% дает более высокий динамический диапазон без
склеивания шума (склеивание проявляется повышением контраста, что не
всегда желательно).
Количество слоев: 2.
Масштабируемость: Нет. Текстуру придется создать снова при изменении размера документа.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Да.
Стиль слоя Внутренне Свечение
Применение стиля слоя Внутренне Свечение (Inner Glow) с параметром source измененным на center
и размером 0 пикселей позволит вам использовать ползунок регулирования
шума, чтобы добавить текстурности любому слою. Это хорошее решение,
только если вы еще не используете этот стиль слоя для чего-то еще. Шум
накладывается поверх цвета, градиента и орнамента, что здорово.
К
сожалению, такой шум может либо только затемнять, либо высветлять
нижележащие элементы. Предыдущий метод позволяет добавлять света и тени
сразу, сохраняя среднюю яркость, и он выглядит лучше на мой взгляд.
Количество слоев: 1.
Масштабируемость: Да, текстура будет переделана автоматически.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Нет.
Smart Object с фильтрами
Создайте слой, залитый сплошным цветом, конвертируйте его в Smart Object, выберите Filter - Noise - Add Noise,
примените векторную маску, чтобы соответствовать размерам элемента,
смените режим наложения слоя на Luminosity и понизьте непрозрачность
слоя.
Это достаточно сложный метод, но он может вместить
комбинацию эффектов, которые будут перевоссозданы, если документ
масштабируется.
Количество слоев: 2.
Масштабируемость: Да, текстура будет переделана автоматически.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Нет.
Стиль слоя Pattern Overlay
Начните с создания шума или повторяющейся текстуры в новом документе, затем выберите Edit - Define Pattern.
Как только вы создадите шаблон текстуры, он будет доступен в параметрах
стиля слоя Pattern Overlay. Так же как и с предыдущими методами,
используйте режим наложения слоя Luminosity и уменьшайте непрозрачность
слоя, чтобы добиться подходящего результата.
Стиль слоя
Pattern Overlay размещается под стилями слоя Color и Gradient, что
сводит результат к нулю. Однако, вы можете создать отдельный слой, к
которому будет применена текстура, если вам это необходимо, или начать
с градиентного слоя, обходя ограничения.
Количество слоев: 1.
Масштабируемость: Да, но вам придется выставить масштаб слоя на 100% после изменения размера.
Работает с примененными стилями слоя Цвет и Градиент: Нет, текстура размещается внизу.
Работает с любой текстурой: Да.
Какой метод лучше?
Хотя
будучи немного громоздким, создание градиентного слоя, добавив стиль
слоя Pattern Overlay и создав затем векторную маску, кажется наилучшим
из возможных способов. Он может применяться для создания гибких,
масштабируемых и редактируемых однослойных элементов с текстурой. В
качестве бонуса, градиенты, наложенные на слои могут быть сглажены, что
дает результат более высокого качества (Градиенты добавленные как стиль
слоя не могут быть сглажены).
Ниже приведены несколько примеров,
которые мы создали, и исходный psd файл, так что вы можете посмотреть,
как они были выполнены.
Прямоугольники
с закругленными углами входят в стандартный набор инструментов 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 на Маке. Процесс создания на обоих версиях одинаков.
Градиенты
Градиенты
позволяют добавить реалистичный эффект освещения и оттенения
поверхностям. Применяя их как слой с градиентом или стиль слоя, мы
получаем возможность с легкостью масштабировать и редактировать
элементы.
Линейный градиент
Линейный
- это градиент в самом простом виде, с постепенным смешением цветов
вдоль прямой линии. Вы это наверняка знали, поэтому перейдем к более
интересным вещам.
Зеркальный градиент
Зеркальные
градиенты похожи на своих линейных товарищей, но градиент повторяется
дважды - сперва идет обычный линейный, затем его зеркальное отражение.
Это делает редактирование немного утомительным, т.к. необходимо
подгонять градиент под желаемый результат.
Радиальный градиент
Радиальные
градиенты выходят из центра (или любой другой выбранной точки) и
заполняют объект по кругу (как круговая диаграмма). Они незаменимы для
создания сфер и добавления эффектов на краях круглых элементов. Центр
градиента можно двигать по холсту при помощи мыши даже при открытом
окне настройки градиента или стиля слоя.
Угловой градиент
Угловой
градиент - это отличное средство, чтобы сымитировать натуральные
отражения, которые можно увидеть на полированных металлических
поверхностях. Центр градиента можно двигать по холсту при помощи мыши
даже при открытом окне настройки градиента или стиля слоя.
Градиент на градиенте
Хорошим
можно и позлоупотреблять, не так ли? Совмещение градиентного слоя с
градиентным стилем слоя позволяет накладывать два разных градиента друг
на друга, придавая более сложный - и что самое главное - крайне
динамичный результат. Чтобы скомбинировать градиенты, вам нужно
изменить режим наложения для градиентного стиля слоя. К примеру, внизу
я применил Screen/Осветление (хорошо подходит для эффекта освещения) и
Multiply/Умножение (для оттенения).
Сглаживание - наше всё
Добавление
сглаживания градиенту приводит к более качественному результату. На
несглаженных градиентах часто можно заметить тональные переходы. Также
сглаживание крайне важно, если при просмотре вашей работы используется
дешевый монитор (ЖК-дисплей с 6 битами на канал и некоторые типы дисплеев, которые, как правило, усиливают проблемную постеризацию).
(Слева - градиент без сглаживания; справа - сглаженный градиент)
Если разница для вас не заметна, вот более утрированный пример сглаживания в действии:
(Слева - градиент без сглаживания; справа - сглаженный градиент)
Убедиться в том, что ваш градиент сглажен очень просто: просто проверьте, поставлена ли нужная галочка в настройках.
Обратите
внимание на то, что градиент, примененный посредством добавления стиля
слоя не может быть сглажен. Градиенты в импортированных объектах
(например элементы, скопированные и вставленные из Illustrator) также
не сглаживаются.
Если вы используете полупрозрачный градиент,
то он также не может быть сглажен, что иногда является целой проблемой.
Но существует решение для некоторых случаев: если вы используете
полупрозрачный градиент, чтобы высветлить участок белым, изменение
режима наложения на Screen (Осветление) сгладит ваш градиент. То же
самое может быть проделано для затемнения при помощи режима наложения
Multiply.
Комбинация вышеперечисленных техник была использована для создания иконки приложения приведенной ниже.
Карта Градиента
Значительно
отличаясь от остальных типов градиентов, градиентные карты могут быть
замечательным способом скорректировать цвет, позволяя точно
контролировать процесс. Градиентные карты используют яркость каждого
пикселя изображения, распределяя соответствующие цвета градиента. Если
градиент начинается с красного цвета и заканчивается синим, то все
светлые участки изображения станут красными, а все темные - синими.
Все, что между ними, тонально будет сопоставлено с градиентом, в
зависимости от яркости участка.
Изображение ниже было использовано в качестве постера для школы плавания Kingswim.
(С применением градиентной карты)
Без
градиентной карты всё выглядит иначе. Композиция составлена из семи
фотографий; мальчик и фон были сняты на черно-белую пленку с
использованием заведомо низкого контраста, чтобы увеличить зернистость
снимка после применения градиентной карты. Градиентная карта также
скрывает цветовые несоответствия на изображении.
(Без градиентной карты)
Одержимость?
Так
точно. Я провел все вышеприведенные опыты, чтобы узнать больше об
общераспространенных методах, которые я сам использовал: то есть, чтобы
переоценить и отточить их, тем самым сделав свои собственные работы
лучше. Можно создавать шедевры и без глубокого понимания того, как
работают используемые инструменты, но чем больше вы знаете, тем
вероятнее, что вы будете работать быстрее и с большей уверенностью в
собственных действиях.
Автор: Marc Edwards
Ссылка на источник для вставки в своём блоге, форуме, сайте:
Главная страница
Всё для Фотошопа
Каталог уроков
Заведи питомца
Учебники онлайн
Наш Форум
Магазин
Топ авторов
Друзья сайта
Гостевая книга
Обратная связь
Онлайн игры
FAQ (вопрос/ответ)
