Уроки мастерства Фотошопа: эффект шума. Часть 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.

Пользователь: iean 03.08.2017 08:54
Аватар пользователя iean

abcdefg

[url=http://www.zqcqmeminvaq.com/]zqcqmeminvaq[/url]

[url="http://www.zqcqmeminvaq.com"/]zqcqmeminvaq[/url]

http://www.google.com/

Пользователь: annlike 13.09.2017 09:56
Аватар пользователя annlike

Lorsque nous achetons un test certifié ou de marque leur propre certification standard de la replique montre, nous serons naturellement fiers de cela, car cela représente et d'autres montres ordinaires ne sont pas de la même qualité, et dans ces certifications et normes, pour les détails de la processus, tests fonctionnels, nous ne pouvons pas savoir en un coup d'œil, la précision est devenue une certification des critères d'évaluation les plus évidents et les plus directs. J'aimerais que beaucoup d'amis aient une telle habitude, de temps en temps réviser l'heure de la montre, lorsque vous trouvez que la montre tous les jours est très quasi-très stable, mais pas une différence de deux ou trois secondes, bien sûr, sera très excité, mais aussi la qualité des montres. De plus en plus confiance, évidemment, pour que quelqu'un dépense de l'argent pour acheter sa propre table comme les amis de la table, c'est une chose merveilleuse. Dans le même temps, il vaut la peine d'attirer l'attention sur le fait qu'une montre est exacte, souvent nous jugeons si elle nécessite une réparation et une maintenance d'une référence. La grande majorité des amis de table à la maison et ne va pas configurer l'équipement de détection de montre, lorsqu'une montre que nous utilisons normalement, si vous trouvez que la Breitling Montre va parfois rapidement, ralentis, la performance la plus directe est que l'erreur quotidienne est très instable, puis Nous pouvons essentiellement déterminer le problème avec la montre, faire des tests, peut être affecté par le magnétique, peut-être en raison des problèmes internes. En plus de l'usure et de l'usure à long terme sans la maintenance régulière du problème, certains des problèmes de surveillance ordinaires, en marchant dans ce qui précède seront réfléchis, la précision de la marche est devenue un juge si les problèmes internes de la montre sont les plus intuitifs base. Bien que ce ne soit pas absolue, mais comme une table ordinaire, les amis, en l'absence d'équipement professionnel sous la prémisse, et il n'y a pas vraiment moyen de savoir si le problème est une Audemars Piguet Montre, mais la vitesse de 20 secondes par jour devrait évidemment être noté, souvent plus d'une demi-minute Une erreur de jour, devrait être effectuée sous le test

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