Создаем цветовую схему для сайта на основе фотографии

Здесь расскажу вам про отличный онлайн сервис для подборки цветовой схемы для вашего сайта.

Скачать исходники для статьи можно ниже

Многие дизайнеры ищут вдохновение именно в фотографиях природы, почему бы и нам не воспользоваться данным способом. И для этого как раз подойдет онлайн сервис:

http://www.colr.org/

Данный ресурс использует фотографии и картинки из следующих источников:

Некоторые фотографии природы приходят из freefoto.com .

Некоторые приходят из Лесной службы США.

Некоторые приходят из (WoW) 2realeyes.com .

Некоторые приходят из фотобанка Flickr.

Как данным ресурсом пользоваться?

Как только вы открываете данный сайт вам показываются три случайных фотографии.

Если вам не понравилась ни одна из них можете обновить страницу и они изменятся.

А можно воспользоваться одной из кнопок расположенных справа от картинок:

Под названием Random Flickr image, которая добавляет по одной картинке справа из фотобанка Flickr.

Данным способом ищете понравившуюся картинку.

Как же получить цветовую схему понравившейся вам фотографии?

Просто наведите на нее курсором и нажмите на кнопку вверху нее (кнопка выделена на скриншоте ниже синей стрелочкой).

После нажатия на кнопку «Pick a scheme from image» у вас появится внизу окошечко:

Как видите появилась цветовая схема из 4 цветов, чтобы узнать их код, достаточно навести курсором на нужный цвет и в выплывшем меню нажать на пункт «Edit this color» (или можно удалить данный цвет, если выбрать «Remove»).

После выскочит еще одно окошко, в котором появиться код данного цвета.

Для того, чтобы добавить к данной политре еще цвет, нужно нажать на плюсик.

А затем на любой цвет, имеющийся на картинках выше, для примера выберу цвет от другой картинки.

После чего данный цвет появиться в моей политре.

Цветовая схема готова!!!

Далее можно нажать на кнопку «More»

И сохранить данную цветовую схему себе на компьютер, нажав на кнопку «Download …»

Есть на данном сервисе и еще одна интересная функция — загрузка своей собственной картинки, фотографии.

Для этого необходимо нажать на кнопку справа от картинок с названием «Load your own».

По-моему мнению, ее можно использовать например для следующего:

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>