Задание 27.03.2012 - Шум, текстуры, градиенты и закругленные углы. !!!

На прошлой неделе нас порадовала только мама Е, она и получает заслуженную медальку "ученик недели" в мини-школе !!!

На этой неделе поговорим о веб-дизайне !!!

Часто именно мелкие детали превращают хороший макет в отличный дизайн; детали вроде проработанных текстур, полутонов и гладких форм. Фотошоп содержит в себе огромный запас инструментов, с помощью которых можно усовершенствовать дизайн, но выбрать подходящий не всегда легко. Будучи одержимыми мыслью, что сделали правильный выбор, мы провели огромное количество экспериментов, чтобы определить преимущества и недостатки каждого метода. В итоге получилось руководство по часто используемым инструментам и техникам для Web и UI дизайна в Photoshop.

Шум и текстуры

Аккуратный шум или текстура на элементах пользовательского интерфейса могут выглядеть замечательно, но какой способ добавить их является самым лучшим? Наша цель найти метод, который позволит сохранять качество при масштабировании, но также будет прост в применении и легко изменяем. Чтобы узнать, какой лучше, мы будет сравнивать каждый метод по следующим критериям:
[mod]* Количество слоев: чем меньше, тем лучше.
* Возможность масштабирования: если размер документа изменен, останется ли качество эффекта тем же?
* Будет ли шум находиться поверх примененных стилей слоя c цветом и градиентом?
* Может ли метод быть использован с любой другой текстурой, а не только с шумом?
[/mod]

Растровый слой с шумом

Возможно, самый простой способ сделать элемент текстурным - это создать обычный растровый слой, заполнить его цветом, применить Filter - Noise - Add Noise, затем применить маску или векторную маску, чтобы соответствовать размерам элемента, к которому вы применяете шум.

Использование высокого уровня шума, изменив режим наложения слоя на Luminosity (Свечение) и уменьшая непрозрачность, даст наибольший контроль над текстурой с минимальным искажением нижележащих слоев.

Выставление количества шума до 48% дает более высокий динамический диапазон без склеивания шума (склеивание проявляется повышением контраста, что не всегда желательно).

[mod]Количество слоев: 2.
Масштабируемость: Нет. Текстуру придется создать снова при изменении размера документа.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Да.[/mod]

Стиль слоя Внутренне Свечение

Применение стиля слоя Внутренне Свечение (Inner Glow) с параметром source измененным на center и размером 0 пикселей позволит вам использовать ползунок регулирования шума, чтобы добавить текстурности любому слою. Это хорошее решение, только если вы еще не используете этот стиль слоя для чего-то еще. Шум накладывается поверх цвета, градиента и орнамента, что здорово.

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

[mod]Количество слоев: 1.
Масштабируемость: Да, текстура будет переделана автоматически.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Нет.
[/mod]
Smart Object с фильтрами

Создайте слой, залитый сплошным цветом, конвертируйте его в Smart Object, выберите Filter - Noise - Add Noise, примените векторную маску, чтобы соответствовать размерам элемента, смените режим наложения слоя на Luminosity и понизьте непрозрачность слоя.

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

[mod]Количество слоев: 2.
Масштабируемость: Да, текстура будет переделана автоматически.
Работает с примененными стилями слоя Цвет и Градиент: Да.
Работает с любой текстурой: Нет.
[/mod]

Стиль слоя Pattern Overlay

Начните с создания шума или повторяющейся текстуры в новом документе, затем выберите Edit - Define Pattern. Как только вы создадите шаблон текстуры, он будет доступен в параметрах стиля слоя Pattern Overlay. Так же как и с предыдущими методами, используйте режим наложения слоя Luminosity и уменьшайте непрозрачность слоя, чтобы добиться подходящего результата.

Стиль слоя Pattern Overlay размещается под стилями слоя Color и Gradient, что сводит результат к нулю. Однако, вы можете создать отдельный слой, к которому будет применена текстура, если вам это необходимо, или начать с градиентного слоя, обходя ограничения.

[mod]Количество слоев: 1.
Масштабируемость: Да, но вам придется выставить масштаб слоя на 100% после изменения размера.
Работает с примененными стилями слоя Цвет и Градиент: Нет, текстура размещается внизу.
Работает с любой текстурой: Да.
[/mod]

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

Хотя будучи немного громоздким, создание градиентного слоя, добавив стиль слоя Pattern Overlay и создав затем векторную маску, кажется наилучшим из возможных способов. Он может применяться для создания гибких, масштабируемых и редактируемых однослойных элементов с текстурой. В качестве бонуса, градиенты, наложенные на слои могут быть сглажены, что дает результат более высокого качества (Градиенты добавленные как стиль слоя не могут быть сглажены).

Ниже приведены несколько примеров, которые мы создали, и исходный psd файл, так что вы можете посмотреть, как они были выполнены.