Бесплатный скрипт для окрашивания выделенных объектов в случайном порядке. Color Picker пример использования

Данный блок думаю будет очень полезен, особенно для случаев, когда Вам необходимо встроить его себе на сайт. Работает этот блок Color Picker с помощью Javascript. Итак рассмотрим, как его добавить на сайт и чем примечателен этот JQuery плагин.

Работа с кодом

В первую очередь нам необходимо подключить Javascript и CSS файлы. Не забудьте редактировать CSS файл и исправить пути к изображениям (если это необходимо), в соответствии с темой Вашего сайта.

XHTML

Настройки плагина

Пользовательские настройки плагина (необязательны).

• eventName – желаемое события, для вызова функции выбора цвета, по умолчанию: “щелчок”.
• color – цвет по умолчанию. Строка для HEX цвета или хэш для RGB и HSB ({r:255, r:0, b:0}), по умолчанию: “FF0000″.
• flat – вывести блок выбора цвета сразу или только по клику, значение по умолчанию false .
• livePreview – по умолчанию true .
• onShow – функция обратного вызова срабатывает, когда показан блок выбора цвета.
• onBeforeShow – функция обратного вызова срабатывает до того, как был показан блок выбора цвета.
• onHide – функция обратного вызова срабатывает, когда блок выбора цвета скрыт.
• onChange – функция обратного вызова срабатывает при изменении цвета.
• onSubmit – функция обратного вызова срабатывает, когда выбираем цвет.

Надеюсь Вам понравился этот плагин. Желаю успехов и развития Вашему сайту!

Данный урок подготовлен для вас командой сайта
Источник урока: http://www.eyecon.ro/colorpicker/
Перевел: Владислав Бондаренко

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

Итак, все прекрасно знают для чего нужен color picker, известный также под русскоязычным названием - "пипетка" (а для детей известен как "пипеточка" - прим.ред. ).

Иногда на сайтах требуется установить color picker (к примеру, ) , а посему я предлагаю все, найденные мной, плагины пипеток на jQuery. Полагаю это наиболее полная коллекция. Итак.

Все плагины делятся на две категории. Одна из категорий представляет собой атлас цветов (swatches) - есть какие-то предустановленные цвета, из которых надо делать выбор. А вторая категория - позволяет выбирать всевозможные варианты цветов, путём перемещения по цветовому полю - color picker . Оба названия взяты из соответствующих инструментов Adobe Photoshop.

Все плагины проверялись в Internet Explorer 6-8, Google Chrome 5, Opera 10.60, Opera 9.26, Mozilla Firefox 3.6.6, Safari 4.03.

Color Pickers

Гибридный плагин, содержащий в себе и color picker, и swatches. Лучший в линейке плагинов, т.к. корректно работает во всех ишаках, даёт информацию о цвете в системах HSV и RGB, даёт номер цвета. При этом если вы будете кликать по точечкам рядом с буквами RGB и HSV, то внешний вид палитры будет изменяться! Иными словами, есть всё, на вкус и на цвет.

Eyecon Color Picker . Очень приятный и удобный плагин. Выдаёт параметры цвета в цветовых системах RGB и HSB, даёт также номер цвета. Более и не надо. Возможно задать два цвета в окошках справа вверху, чтобы их сравнивать. По ссылке инфо можно найти очень полезную информацию по плагину. Замечена некорректная работа в IE6 - цветовое поле представлено оттенками серого, но при этом цвета в полях справа вверху показаны нормально, да и номера цветов указываются верно. По ссылке на второй пример указана упрощённая версия плагина. В целом плагин очень хорош, и если выбирать не jPicker, то этот. Советую.

Intelliance Color Picker . Очень похож на упрощённую версию от Eyecon, но обладает своими недостатками. Показывает цвет в системе RGB и даёт номер цвета. В шестом экплорере выдаёт красное поле, боковая полоска цветов отсутствует. При этом в окошке справа вверху цвет показывается, номер цвета даётся корректно. В остальном всё нормально. По окончании выборки цвета возможно вызывать какую-нибудь функцию.

. Плагин, внешне отличающийся от предыдущих. Даёт только номер цвета, хотя в некоторых случаях вроде бы можно получить нормированный цвет по системе HSL (нормированный к единице). Работает корректно вроде как везде. Хотя 7 ишак у меня просто зависал, но не факт, что в этом виноват плагин, нужно проверять.

Swatches

Очень приятная палитра цветов. Даёт номер цвета. Баги не замечены.

Really Simple Color Picker . Очень простой атлас цветов. Цветов всего 36, возвращается номер цвета. Баги не замечены.

Normal Color Picker . Представляет собой атлас цветов, возвращающий номер цвета. По окончании выборки цвета возможно вызывать какую-нибудь функцию. В IE6 и Opera9.26 не работал, а IE7 намертво зависал, т.е. требуется дополнительная проверка на IE7.

Simplecolor color-picker . Простой атлас цветов. Не проверялся, т.к. нет онлайн-примера.

Сегодня мы представляем полезный скрипт для Adobe Illustrator. Он был создан талантливым украинским разработчиком скриптов и плагинов для Adobe Illustrator и моим другом - Ярославом Табачковским (Yemz), который также известен как разработчик бесплатного плагина Mesh Tormentor . Скрипт RandomSwatchesFill в случайном порядке окрашивает выделенные объекты в цвета выбранные в палитре Swatches.

Бесплатно скачать скрипт Вы можете нажав на кнопку Download в начале или конце данного обзора.

Давайте поместим скрипт в следующую папку, например:

Для Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Для Mac: Applications / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Для примера работы скрипта Random Swatches Fill возьмем векторную работу состоящую из множества однотонных объектов.

Обращаю ваше внимание, что объекты к которым будет применяться скрипт должны быть разгруппированы и выделены. Не снимая выделения, открываем панель Swatches. Используя клавишу Ctrl/Command, выбираем из палитры Swatches цвета, которые будем использовать для окрашивания объектов.

Применяем скрипт RandomSwatchesFill, для этого переходим File > Scripts > RandomSwatchesFill. В результате получаем цветные объекты окрашенные в случайном порядке.

Данный скрипт можно применить как ко всей векторной работе, так и к нескольким объектам. Используя инструмент Lasso Tool (Q), выделяем несколько объектов и используя клавишу Ctrl/Command, выбираем цвета из палитры Swatches, в которые будем окрашивать данные объекты.

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

Можете поэкспериментировать с цветами, градиентными заливками или Patterns в панели Swatches и увидеть каких оригинальных результатов можно добиться. От себя лично хочу поблагодарить Yemz за этот скрипт и надеюсь, что он будет полезен в вашей каждодневной творческой работе и вы будете меньше времени уделять рутинным техническим вопросам.

Название ничего не объясняет, это правда. Лучше глянуть на картинку:

Как видно, подразумеваются три шага: найти какой-либо фон, нарисовать сверху векторных фигурок, запустить скрипт и получить перекрашенные фигурки. Чтобы это сработало потребуется иллюстратор не ниже CS6 и думаю любой (проверено на CS3) фотошоп. Без фотошопа не получится. Да, и еще терпение потребуется)

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

Теперь чуть-чуть подробнее о каждом этапе:
1. Фон - фон может быть любым, растровым или векторным. Он может быть как сплошным, так и быть коллажом из чего угодно. Важно только то, что фоном скрипт будет считать все то, что лежит на самом нижнем слое.

2. Векторные объекты - это то что будет перекрашиваться. По сути речь идет о замкнутых путях, образующих какие-либо фигуры. Компаунды не проверял, думаю они будут проигнорированы. Фигуры могут быть объединены в группы, в том числе многоярусные. Могут быть маскированы (надо только иметь виду что перекрашено будет и то что "скрыто" маской, а это время, о чем ниже). Перекрашиваться будет то, что лежит на самом верхнем слое. Слои между первым и последним будут проигнорированы.

3. Скрипт и собственно его работа. Фотошоп следует запустить до запуска скрипта. В случае чего скрипт его сам запустит, но так только время лишнее потеряете. Выделять ничего не нужно, если фон и объекты готовы и лежат на своих слоях запускаете и.. долго ждете. Вот и ложка дегтя, процесс этот долгий. не буду пытаться отговориться техническими подробностями, проблема конечно просто в моей криворукости. Так или иначе дело пока обстоит именно так. Пример что на картинке в шапке, делался около 10 минут, а в нем чуть больше 400 шестигранников. Т.е. примерно по 1,5 секунды на объект. Если в процессе будут сбои, время увеличивается на перекраску. Сразу после запуска скрипт прикинет сколько времени потребуется и сообщит об этом. Но отказаться уже будет нельзя (пока что).
Вторая ложка дегтя, но только владельцами windows-компьютеров - у вас процесс будет выглядеть так, будто иллюстратор завис (напишет "не отвечает"). Фотошоп возможно будет помигивать фоном для перекраски) Но, для того чтобы понимать все плохо или он просто притворяется, я добавил индикацию звуком - системный биип после каждого 10-го перекрашенного объекта. Если вы будете слышать этот бип (проверьте включен ли звук), значит скрипт работает, нужно просто подождать. Собственно компьютер при этом не висит, можно открыть браузер)
А маководы смогут наблюдать в реальном времени процесс перекраски, объект за объектом.

Еще несколько общих слов:
Цвет для заливки берется не из одной точки, а средний из области размером чуть меньшей чем размер bounding box перекрашиваемого объекта.
Объекты для перекраски и фон не обязательно должны располагаться внтури артборда, это не важно. Во время работы скрипта размер артборда будет скорректирован под все видимое из числа фоновых и целевых объектов, а по завершению возвращено на свои места. Поэтому, если целевой объект лежат не на части фона, и вне артборда - он скорее всего будет покрашен в белый цвет, разве что его немного загрязнит близкий фон из-за особенностей выбора среднего цвета (пункт выше).

По ссылке ниже сам скрипт и простенький тестовый пример. Лучше начать с него.
Ссылка: https://yadi.sk/d/aGnOBIkymiPbX
Бета-тестирование закончено, спасибо всем кто попробовал!
С активными тестерами продолжим в сложившемся частном режиме.

Это бета-версия, будут ли улучшения и дополнительные возможности зависит от того найдет ли кто-нибудь баги и придумает ли новые фичи)
Идею скрипта подала мне art_of_sun , за что ей большое спасибо! Если у кого-нибудь еще есть идеи - welcome!

Полезная ли игрушка? Пиксилезаторов разных и без меня наделали уже, но может это можно как-то интереснее использовать? Или нет? Кто что думает, высказывайтесь)