Уроки мастерства Фотошопа: эффект шума. Часть 1

Уроки мастерства Фотошопа: эффект шума. Часть 1

В глазах посетителей сайт по своей красоте может стать великолепным во многом благодаря малозаметным деталям. Например: градиенты, тени, текстуры и другие элементы дизайна. Фотошоп предлагает массу вариантов для «полировки» шаблона, но выбор нужного инструмента может запутать неискушенного пользователя. В первой части этого по истине объёмного урока Вы сможете увидеть какими приёмами пользуются веб-дизайнеры для создания эффекта присутствия шума.

Добавление шума


button.png


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


  1. Количество используемых слоев: чем меньше, тем лучше
  2. Будет ли сохраняться выбранный нами эффект при изменении размеров документа
  3. Можно ли будет использовать шум поверх слоя с наложением цвета и градиента
  4. Можно ли будет использовать метод с любой текстурой, не обязательно с применением шума


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


img-001.png


Вероятно самый очевидный вариант добавления шума к рисунку таков: создаём обычный растровый слой, закрашиваем его нужным цветом, применяем к слою фильтр Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум) и создаём маску-слой (или векторную маску) в форме элемента, на который накладываем текстуру шума.


В настройках фильтра Add Noise оптимальным значением является 48%, как показывает практика. Также необходимо слою с шумом выставить режим отображения Luminosity (Свечение) в панели Layers.


  1. Число слоёв: 2
  2. Сохранение эффекта: Нет (требуется пересоздание слоя, если разрешение документа меняется)
  3. Работает с другими стилями слоя: Да
  4. Работает с любой текстурой: Да


Стиль слоя Inner Glow (Внутреннее свечение)


noise-lesson-master-photoshop-diwo-by-01-small.png


Использование стиля слоя Inner Glow (доступно после двойного клика по слою) с настройками «Источник из центра» и размером 0 пикселей позволит задействовать ползунок «Шум» в нужных нам целях. Таким образом можно добавить шум на любой слой. Это оригинальное применение эффекта Inner Glow и отличный вариант, учитывая что шум будет добавляться даже если применить к слою эффекты наложения цвета, градиента и текстуры.


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


  1. Число слоёв: 1
  2. Сохранение эффекта: Да, изменится автоматически
  3. Работает с другими стилями слоя: Да
  4. Работает с любой текстурой: Нет

Смарт-объект


noise-lesson-master-photoshop-diwo-by-02-small.png


Создаёте слой с цветной заливкой, сконвертируйте его в смарт-объект (Smart Object), примените фильтр Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум), создайте векторную маску в виде нужного элемента, выставьте слою режим Luminosity и уменьшите его прозрачность.


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


  1. Число слоёв: 2
  2. Сохранение эффекта: Да, изменится автоматически
  3. Работает с другими стилями слоя: Да
  4. Работает с любой текстурой: Нет


Стиль слоя Pattern Overlay (Перекрытие узора)


noise-lesson-master-photoshop-diwo-by-03-small.png


Начните с создания шума в новом документе, выполните команду Edit > Define Pattern (Редактирование > Определить узор). После этого текстура с шумом появится в окне опций Pattern Overlay (Перекрытие узора). Примените этот стиль к нужному слою. Как и в случае с предыдущими методами, использование режима отображения слоя Luminosity (Свечение) и снижения его прозрачности даст нужный эффект.


Эффект «Перекрытие узора» расположен ниже эффектов наложения цвета и градиент в настройках слоя, а это значит что метод не будет работать если их задействовать. Однако, это ограничение можно обойти, создав слой, содержащий один шум по методу Pattern Overlay.


  1. Число слоёв: 1
  2. Сохранение эффекта: Да, изменить вручную на 100%
  3. Работает с другими стилями слоя: Нет
  4. Работает с любой текстурой: Да


КАКОЙ МЕТОД ЛУЧШЕ?


Сначала создаём отдельный слой с градиентом, добавляем перекрытие узора (Pattern Overlay) и добавляем векторную маску (в виде кнопки, например) – самый оптимальный вариант. Такой порядок действий лучшим образом подходит для создания гибких, масштабируемых и поддающихся редактированию элементов для пользовательского интерфейса. В качестве бонуса, закрашенные вручную градиентом слои могут быть сглажены («дизеринг», галочка «dither»), т.е. выглядеть на дисплее монитора максимально красиво (чего нельзя добиться, если использовать наложение градиента через стили слоя).


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



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


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


Комментарии
Пользователь: Slim_Shady 07.10.2013 12:20
Аватар пользователя Slim_Shady

хорошая статья, будет полезна для начинающих вэб-дизайнеров

Пользователь: rolex replica 13.12.2016 04:16
Аватар пользователя rolex replica

Calibre 36 movement as the basis for replica rolex the new series of outstanding members, completely based uk replica watches on the needs of modern life and design. To ensure the best innovation of siliceous gossamer precision, only a barrel can be at four Hz (28800 per hour time of vibration) to provide power reserves for more replica watches uk than 100 hours, to ensure a longer operation time.

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