Инструкция к сервису по подбору цветовой гаммы для дизайна интерьера

Привет! Меня зовут Сергей.

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

Суть проблемы

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

Как же человеку, не имеющему художественного образования, сориентироваться в этом многообразии?

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

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

Чтобы сообщить другому человеку выбранный цвет, его нужно как-то описать или указатьПрофессионалы имеют устоявшиеся названия для многих оттенков цветов. У них есть колоды образцов, каждому цвету на которых присвоен код, по которому они смогут смешать такую же краску. Но сделать шаг от фразы, вроде: «как закат, только зеленый», до точного кода или названия оттенка непосвященному человеку затруднительно.

Куда проще взять и показать! И пусть профессионалы сами разбираются со своими кодами и обозначениями.

Так я пришел к мысли о необходимости создании бесплатного online-сервиса, ориентированного на возможности непрофессионалов, который позволяет не только легко находить удачные сочетания цветов, но и сразу демонстрировать их на примере того или иного интерьера. И чтобы найденные варианты можно было легко сохранить и передать другим людям.

Сейчас я покажу, что у меня получилось, и научу пользоваться своим сервисом. Это действительно просто!

Описание сервиса

и представляет собой флэш-приложение, встроенное в страницуСервис расположен на главной странице моего сайта Kvartirobus.ru о ремонте и обустройстве квартиры, и представляет собой синий прямоугольник под основным (красным) меню сайта, в правой части которого изображен разноцветный круг, с помощью которого мы будем подбирать цвета, а слева расположена фотография комнаты, на примере которой выбранные цвета будут демонстрироваться.

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

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

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

Наибольшую популярность в дизайне интерьеров получили следующие методики подбора цветов:

Монохроматическая Монохроматическая – заключается в выборе одного цвета, оттенками которого оформляются все предметы интерьера. Соответственно, на цветовом круге выбирается всего одна точка.
Линейная Линейная – выбор цветов производится с помощью линии, проведенной через центр круга. На сторонах круга линия указывает на две точки, одна из которых считается основным цветом, а вторая – противоположным (акцентирующим). В интерьере, соответственно, преобладают оттенки основного цвета.
Треугольная Треугольная – сводится к выбору трех точек цветового круга, образующих равнобедренный треугольник. При этом одна точка указывает главный цвет, преобладающий в интерьере, а две другие – дополнительные, использующиеся умеренно.
Двухлинейная (прямоугольная) Двухлинейная (прямоугольная) – заключается в выборе четырех точек цветового круга, которые можно представить себе как вершины вписанного прямоугольника, или точки пересечения с кругом двух проходящих через его центр линий. Второе представление наиболее удобно, так как одна из линий может считаться основной, а вторая – дополнительной. Одна из точек на основной линии указывает главный, преобладающий цвет, а вторая – противоположный ему цвет, использующийся в малых объемах для создания акцента. Вторая же линия задает противоположные друг другу, умеренно использующиеся дополнительные цвета.
Сходственная Сходственная – очень похожа на монохроматическую, но вместо одного цвета используются оттенки трех, близко расположенных на цветовом круге точек, одна из которых считается главным, а две другие – дополнительными цветами.
Акцентированная (акцентированная сходственная) Акцентированная (акцентированная сходственная) – в дополнение к предыдущей методике на круге выбирается еще одна точка – противоположная основному цвету. Этот цвет используется для создания акцента в помещении.

 

В сервисе, в зависимости от выбранного метода подбора, на цветовом круге появляются движки-указатели выбранных цветов. Всего существует три их типа:

Маркер главного цвета Главный цвет – представлен крупным закругленным движком, который можно свободно перемещать мышкой по кругу.
Маркер дополнительного цвета Дополнительные цвета – задаются закругленными движками поменьше, с острым носиком. Их положение зависит от главного движка, и они могут перемещаться относительно него в пределах, ограниченных выбранной моделью подбора цветов.
Маркер акцентирующего цвета Акцентирующий цвет – отображается в виде ромбовидного указателя. Перемещать его нельзя, так как он всегда должен быть строго напротив главного цвета. Но если его кликнуть мышкой, то на место акцента мгновенно будет перемещен главный цвет, повернув все движки на 180°.

Путем таких нехитрых манипуляций с цветовым кругом можно быстро подобрать 2, 3 или даже 4 сочетающихся между собой цвета. Но, прежде чем раскрашивать подопытную фотографию, нужно вспомнить об оттенках.

Оттенки цветов отличаются по яркости и цветности (насыщенности). То есть, имеется четыре предельных варианта: светлый-насыщенный, светлый-бледный, темный-насыщенный и темный-бледный. Между этими предельными значениями располагаются все остальные возможные вариации цвета.

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

Глобальные настройки Яркости и ЦветностиВнутри цветового круга моего сервиса как раз и расположена такая плоскость со шкалами яркости и цветности. А небольшой белый кружок-ползунок, который можно перемещать с помощью мышки, указывает своим центром точку, задающую общие для всей палитры выбранных цветов значения яркости и цветности, от которых мы будем отталкиваться при раскрашивании фото.

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

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

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

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

Теперь рассмотрим саму фотографию.

Применение цвета к объектуМногие (но не все) объекты представленных в сервисе интерьеров могут быть окрашены. Чтобы окрасить объект на фотографии, достаточно с помощью мыши перетянуть на него цвет с палитры. При этом рядом с курсором мыши будет отображаться небольшой кружок, окрашенный в выбранный цвет.

Проверить возможность окрашивания интересующего Вас объекта можно, наведя на него курсор мыши. При этом для окрашиваемых объектов рядом с курсором будет появляться маркер-подсказка, содержащий символы Я и Ц.

Маркер-подсказка для окрашиваемых объектовНе сложно догадаться, что Я и Ц на маркере означают возможность изменения Яркости и Цветности окраски именно этого объекта, а клиновидные значки рядом указывают направления минимума и максимума этих характеристик.

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

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

Для изменения яркости объекта на фотографии достаточно навести на него курсор (кончик стрелочки), прижать и удерживать левую кнопку мыши, переместить курсор по вертикали, что и приведет к изменению яркости окраски объекта. При перемещении курсора вверх яркость будет увеличиваться, а если его двигать вниз – уменьшаться. После достижения нужного значения яркости окраски объекта кнопку мыши нужно отпустить.

Аналогично производится настройка цветности окраски объекта, только перемещение курсора мыши выполняется горизонтально. При движении влево окраска становится более бледной, а движение вправо сделает ее более насыщенной.

Настройка яркости и цветности объектовКонечно, на практике, вертикальное и горизонтальное перемещение курсора происходят одновременно, что за один прием позволяет настроить и яркость, и цветность объекта. То есть, мы как бы пытаемся перетащить мышкой объект в сторону нужных значений его яркости и цветности.

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

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

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

Кнопки функций сервисаПомните, я вначале упомянул про кнопочки под цветовым кругом? – Вот именно там и есть кнопка «Открыть», позволяющая посмотреть доступные варианты и выбрать наиболее подходящий из них.

Кнопка «Сохранить», как Вы наверняка уже догадались, позволяет сохранить раскрашенную фотографию в формате JPEG. Это удобно тем, что такую картинку можно открыть многими современными устройствами с цветным дисплеем: персональными компьютерами, ноутбуками, КПК, смартфонами и даже мобильными телефонами. Ее можно легко показать или передать кому угодно через Интернет или на носителе информации (диске или флэшке). Например, можно прийти в магазин и на телефоне показать продавцу желаемый оттенок краски.

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

Несмотря на свое удобство, формат JPEG не позволяет сохранить настройки моего сервиса. То есть, загрузить обратно картинку и продолжить менять на ней цвета не получится. Однако есть другой способ сохранить найденные сочетания цветов.

Адресная строка браузера

Все выбранные цвета и настройки в моем сервисе кодируются специальным образом в адресной строке браузера. Каждый раз, когда Вы что-то меняете – меняется и адрес. И наоборот, если изменить адрес соответствующим образом, то изменится и состояние сервиса. Что открывает ряд интересных возможностей:

Чтобы сохранить выбранные цвета и настройки, достаточно просто сохранить ссылку на текущую страницу – добавить ее в закладки или избранное.

Чтобы вернуться к ранее сохраненным цветам и настройкам нужно просто открыть соответствующую им ссылку.

Вносимые в ходе работы с сервисом изменения отражаются в истории посещения страниц браузера, что можно использовать для отмены последних совершенных в сервисе действий. Не понравилось новое сочетание цветов? – Не беда! Жмем кнопку «Назад» в браузере и получаем то, что было раньше.

Наконец, ссылки можно передавать другим людям. Что и предлагает диалог, открывающийся по кнопке сервиса «Поделиться». И они смогут не только увидеть выбранные Вами цвета и раскрашенную фотографию, но смогут на их основе создать свои варианты.

Панель социальных закладокКстати, это может быть удобно делать с помощью плавающей панели социальных закладок, расположенной на всех страницах моего сайта слева.

То есть, обмениваясь ссылками можно обсуждать с кем-нибудь разные варианты оформления интерьера, что очень удобно, если собеседники находятся на расстоянии друг от друга.

Можно спросить совета у участников своего любимого форума, у друзей ВКонтакте, в городском чате, или поделиться найденным сочетанием цветов с читателями Вашего персонального блога. Вариантов использования – масса!

Подводим итоги

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

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

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

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

Что получилось?

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

Конечно, здесь еще много что можно доделать и переделать. Не исключены ошибки и баги. У Вас могут возникнуть вопросы и пожелания, которые я буду рад услышать и обсудить.

Вместе мы сделаем сервис еще лучше! Не стесняйтесь высказываться.