Пипетка/Color Picker — анализ цветовой схемы сайта с помощью Rainbow Color Tools — расширения FireFox для вебмастера

Пипетка/Color Picker - анализ цветовой схемы сайта с помощью Rainbow Color Tools - расширения FireFox для вебмастера

В этом видео мы рассмотрим расширение для FileFox, которое называется Rainbow Color Tools. Если вы, время от времени, занимаетесь редизайном вашего сайта или, в принципе, занимаетесь сайтами,  то это расширение может сэкономить вам кучу времени. Давайте рассмотрим на конкретном примере, как им пользоваться.

Пипетка-Color Picker 

После установки, то есть после того, как вы нажали кнопку «Add to FileFox», перезапустили браузер, у вас на панели появляется «радуга», которая называется Rainbow. Если нажать на нее, то по умолчанию появляется инструмент «Color Picker», который позволяет выбрать/определить цвет любого пикселя на странице.

У вас, наверняка, было такое, что вы заходите на какой-то сайт и видите — какая классная цветовая гамма, круто подобраны цвета и, допустим, вы хотите использовать понравившийся цвет в логотипе. Здесь, это можно сделать в течение двух секунд. Нажали на Color Picker, навели на цвет, который вам нужен, который вам нравится, который вы хотите использовать, потом нажали на него, и после этого его код копируется в буфер и дальше его можно, например, скопировать в блокнот. Я, скопировал этот цвет и вот у меня его HEX-код, который я могу уже использовать у себя на сайте.

Инструмент Website Analyzer в Rainbow Color Tools

Следующая полезная возможность Rainbow Color Tools, когда вы находитесь на каком-то интересном сайте и вам понравился веб-дизайн, как все оформлено, цветовая гамма, как все подобрано, вы можете выбрать следующий инструмент – «Website Analyzer». Выбираете Website Analyzer и это расширение/плагин анализирует гамму этого сайта и выводит вам ее в виде раскладки, вы можете посмотреть какой цвет вы хотите использовать, скопировать конкретно этот цвет или можете скопировать все цвета из цветовой схемы сайта.

Я нажимаю «копировать», вставляю, в NotePad++ и вот у меня цветовая гамма, которую я могу отправить дизайнеру или самому использовать в фотошопе или сказать, фрилансеру, пожалуйста, нарисуй мне макет с использованием этих цветов, вот тебе ссылка на пример, то есть используй эту цветовую гамму. Так же, если мне понравилась цветовая гамма этого сайта или любого сайта или любой страницы, я могу нажать на кнопочку «Save», сохранить ее к себе в библиотеку.

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

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

И, главное, что это можно делать на «живом» сайте: брать нужные и понравившиеся цвета, примерять их в нужные блоки и смотреть, как это будет смотреться в реальной жизни. Если вы занимаетесь разработкой или в принципе занимаетесь украшением своего сайта, все время пытаетесь чтобы он выглядел лучше и лучше, берете какие-то элементы, которые вам понравились с других сайтов, то Rainbow Color Tools будет в этом плане очень полезный инструмент и сэкономит вам кучу времени.

Что думаете вы?

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

Спасибо, что посмотрели это видео. Мне было приятно для вас его сделать. Буду благодарен, если вы поделитесь им в социальных сетях. Ставьте палец вверх, подписывайтесь на новые видео. Если у вас возникли вопросы или вам нужна помощь, вы можете отправить заявку на странице контактов.

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

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