Главная > Образование и Изучение > Применение «ретро»-оттенков в ваших дизайнах

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


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

В данной статье мы продемонстрируем примеры ретро-окраски тем оформления, встречающиеся в реальных дизайнах, а также рассмотрим технику получения ретро-оттенков с помощью 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).

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

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

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

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