—»     —»   Применение «ретро»-оттенков в ваших дизайнах
  Раздел: Образование и Изучение   Нет комментариев  

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



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

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

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

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

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

Надеемся, вам понравилась наша краткая публикация о применении ретро/винтажных оттенков. Если вы можете поделиться с нашими читателями разными подсказками, приёмами и хитростями на тему цветового оформления, пожалуйста, непременно сообщите нам об этом в разделе комментариев!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 8615   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30