Применение «ретро»-оттенков в ваших дизайнах

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

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

Ретро-оттенки в веб-дизайне

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

01. Kitschen Sink


02. Huxley Prairie Festiva


03. Clickfarm Interactive


04. Douglas Menezes


05. The Literary Bohemian


06. Michela Chiucini


07. Hope Unlimited


08. Design Log of Ayaka ito


09. f claire baxter


10. Mia Mäkilä


11. De PSD a HTML


12. Owltastic


13. Coopers Kids


14. SproutBox


15. Nou Zeppelin


16. Kingsford Competition Briquets


17. One Promo


18. Element Fusion’s Internship Program


19. Joe Longstreet


20. Mplusz


21. THINK. DO. CREATE.


22. JANA’S BAKERY


23. Hardscapes Etc.


24. Social Snack


25. web-gab.com


26. JOBY


27. Supermercati Motta


Применение ретро-оттенков в дизайнах с помощью Photoshop

Ознакомившись с примерами веб-сайтов, оформленных в ретро-тонах, давайте разберём приёмы их создания в программе Adobe Photoshop.

Используйте определитель цвета для снижения насыщенности

Выберите щелчком основной цвет (Foreground color) в инструментальной панели (Tools Panel); таким образом откроется диалоговое окно определителя цвета. Начните с красного (#FF0000). И щёлкайте левее по шкале насыщенности выбранного вами красного цвета. Чем дальше вы будете сдвигаться по ней влево, тем бледнее будет становиться оттенок.


Снизив матовость слоёв изображения, вы уменьшите насыщенность цвета

Снижение матовости на шкале слоёв изображения (Layers Panel) приведёт к размыванию цвета. Недостаток (или достоинство) данного метода состоит в том, что изображения нижних слоёв, при наличии таковых, проявятся и станут заметны.


Настройка фото-фильтрации изображения

Для снижения насыщенности цвета посредством настройки фото-фильтра нам сначала нужно получить цвет, противоположный нашему исходному; итак, нажмите Ctrl + I (клавишная комбинация быстрого вызова для Image > Adjustments > Invert).

Далее выберите "пипетку" (Eyedropper Tool) в инструментальной панели, щёлкните по образцу противоположного цвета на мольберте, чтобы запомнить его свойства, и задайте его в качестве основного цвета (Foreground color). Настроив его параметры, вновь нажмите Ctrl + I для возврата к исходному цвету. Теперь перейдите по пунктам меню Image > Adjustments > Photo Filter. Наконец, обратите цвет в противоположный.


Настройка тонов/насыщенности для всего изображения

Для применения этого приёма нам нужно открыть диалоговое окно настройки тонов/насыщенности нажатием Ctrl + U или переходом по пунктам меню Image > Adjustments > Hue/Saturation. Снижение уровня насыщенности цветов изображения достигается смещением влево ползунка на шкале Saturation. Видимо, так проще и лучше всего уменьшать насыщенность окраски всего изображения сразу.


Использование образцов текстуры

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

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

Прежде всего, возьмём образец текстуры на Zen Textures.

Откроем данный образец в Photoshop и поместим его поверх красного квадрата. Затем перейдём из режима перетекания слоя в экранный (Screen).


Теперь, чтобы наше изображение не переливалось красками как спелый персик, снизим его матовость примерно наполовину.


Надеемся, вам понравилась наша краткая публикация о применении ретро/винтажных оттенков. Если вы можете поделиться с нашими читателями разными подсказками, приёмами и хитростями на тему цветового оформления, пожалуйста, непременно сообщите нам об этом в разделе комментариев!