Работа с инструментами Rainbow

Ну, вот и дошла очередь до самой интересной части описания – работа с приложением Rainbow.

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

Inspector (пипетка)

Нажав на иконку в виде радуги, в моём случае, открылся инструмент: Inspector (пипетка), поскольку, именно этот инструмент я указал в настройках.

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

Если же, нужно сохранить цветовой код, кликните правой клавишей мыши и на дисплее в этот момент появится другая надпись: saved (сохранён). Это означает, что цветовой код вместе с образцом цвета сохранён в Библиотеке приложения, откуда можно скопировать его в любое время или использовать для экспериментального окрашивания объектов на веб-странице.

Picker (выбор)

Всем знаком этот бесхитростный и очень полезный инструмент –  цветовая палитра Color Picker (выбор цвета). Кстати, подобные расширения есть почти во всех браузерах, которое так и называется Color Picker. При необходимости, воспользуйтесь.

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

В первую очередь указать основной цвет. Если ползунки не работают, нужно кликнуть на желаемый цвет (стрелка 1).

В поле выбора, кликом левой клавиши мыши выбирается оттенок основного цвета (стрелка 2).

На дисплее справа отображается выбираемый цвет или оттенок (стрелка 3).

Вверху, в информационном поле отображается цветовой код #Hex (стрелка 4). Если в настройках установлено отображение кода в RGB, то в инфо-поле будет отображаться код в такой форме: rgb(207, 153, 21). А вообще, значение RGB всегда можно увидеть под дисплеем (обведено рамкой).

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

Чтобы избежать такого неудобства, в Color Picker встроена очень удобная функция: Double click to compare colors (кликнуть дважды для сравнения цветов). Выделив кликом мыши любую из двух половинок, можно воспользоваться стрелками возврата (снимок выше).

Сравнить цвета можно и на странице браузера, для этого воспользуйтесь функцией: inspect pixel on browser. Простым языком – (выберите точку (цвет) в браузере). Кликните на перекрестье.

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

После чего, в Color Picker выделите другую половинку дисплея, кликните по крестику и, на странице браузера выберите другую точку. Для наглядности я показал верхнее и нижнее значение цветов в градиенте.

В итоге, на дисплее видим верхнюю и нижнюю цветовую границы градиента. Можно по отдельности выделяя ту или другую половинки, копировать цветовые коды. Ну, раз уж заговорил о градиентах, то хочу заметить, что градиент в CSS чаще всего указывается в формате: Rgb и Rgba.

Чтобы изменить формат (значение) цветового кода в информационном поле (стрелка 3) и не лезть лишний раз в настройки, кликните правой клавишей мыши по кнопке: Select element to preview (Выбрать формат кода просматриваемого элемента (цвета)) (стрелка 1). Наведите курсор на появившуюся табличку: Format и, в выпадающем списке форматов, выберите необходимый (стрелка 2). 

И наконец, чтобы скопировать код, нажмите на кнопку: Copy (копировать). А чтобы сохранить код в библиотеке, кликните по кнопке: Save (сохранить) (стрелка 1).

В открывшемся окне (необязательно) впишите адрес страницы (Url:) и место, откуда взят образец цвета (Tags:) после чего, нажмите кнопку: Save (стрелка 2).

Library (библиотека)

Инструмент Color Library. Откройте окно настроек, нажав на кнопку в верхнем правом углу окна библиотеки (стрелка 1) и выберите (укажите), какие колонки должны отображаться в окне библиотеки.

Website Analyzer (анализатор веб-сайта)

Анализатор веб-сайта очень полезный инструмент. Зайдя на любую веб-страницу и активировав инструмент: Website Analyzer, можно увидеть все основные цвета CSS настроек и цвета содержащиеся в картинках на текущей веб-странице.

Откройте любую веб-страницу (сайт), которую хотите проанализировать. Откройте список инструментов (стрелка 1). Выберите инструмент: Website Analyzer (стрелка 2).

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

Через несколько секунд откроются основные цвета, которые присутствуют на анализируемой странице. По умолчанию установлено минимальное количество цветов в одном ряду, я установил семь цветов. Для этого нужно кликнуть по окну правой клавишей мыши, навести курсор на: Change Limit (Изменить предел, ограничение) и, в выпадающем списке выбрать нужное количество цветов.

Чтобы открыть дополнительные цвета (второй ряд), кликните по треугольнику (стрелка 1).

В открывшемся втором ряду, можно увидеть дополнительные цвета. Обычно, это цвета шрифтов и цвета, содержащиеся в изображениях. При наведении курсора на любой цвет, можно увидеть процентное содержание этого цвета на данной странице, ну и конечно, его цветовой код. Также можно скопировать код любого цвета или сохранить в библиотеке, пользуясь кнопками: Copy и Save. Мало того, можно скопировать или сохранить все коды одним кликом, воспользовавшись такими же кнопками в правом нижнем углу окна анализатора.

Как перекрасить сайт

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

Откройте библиотеку (library)? предварительно сохранив в неё несколько предполагаемых цветов. Наведите на выбранный цвет курсор мыши, нажмите левую клавишу и, не отпуская её, перетащите цвет на нужный участок, например, общий фон или фон шапки сайта. Ну, фон и шапку я уже “перекрасил”, а на более мелких элементах покажу, как это выглядит.

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

Таким же образом цвет перетягивается из цветовой палитры. Наводится курсор на дисплей с выбранным цветом (стрелка 1), зажимается левая клавиша мыши, курсор подводится к нужному блоку и, когда вокруг этого блока появилась красная рамка (стрелка 2), клавишу отпустить.

Таким же способом окрашиваются остальные элементы страницы кроме шрифтов (сколько не пытался, окрасить шрифт не удалось).

Вот что у меня получилось “на скорую руку”. Для сравнения, сайт перед вами. Т.е. получилась страница без всяких замысловатостей, градиентов и прочих украшений.

А у меня на этом, всё. Заходите, критикуйте, спрашивайте, если что.

 

Удачи Вам!