Главная > Образование и Изучение > Применение «ретро»-оттенков в ваших дизайнах
Применение «ретро»-оттенков в ваших дизайнах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). Теперь, чтобы наше изображение не переливалось красками как спелый персик, снизим его матовость примерно наполовину. Надеемся, вам понравилась наша краткая публикация о применении ретро/винтажных оттенков. Если вы можете поделиться с нашими читателями разными подсказками, приёмами и хитростями на тему цветового оформления, пожалуйста, непременно сообщите нам об этом в разделе комментариев! Вернуться назад |