Колірні міксери
Я думаю всім читачам і так зрозуміло, що кольори не повинні дратувати, вони повинні бути не контрастними в роботі з основними дозволами моніторів відвідувачів, і т.п. нісенітниця, яка вже не раз обсмоктувалася на інших блогах. Я не повторюватиму їх слова, достатньо погуглити.
Про що ж я все-таки писатиму? Про кілька сервісів-міксерів — підбирачів адекватних для відвідувача квітів, що є безперечно корисним інструментом у роботі юзабіліста. Кольори, безсумнівно, дуже важливий інструмент у досягненні більшої зручності на сайті, що яскраво доводить приклад Яндекса. Наприклад - те ж колірне розмежування блоків, які я мимохідь описав у замітці про ідеальні форми, і збираюся найближчим часом зайнятися продовженням цього питання.
ColorSchemer Studio
Що таке міксер? Це, якщо по-простому, змішувач. Неважливо чого, але в моєму випадку це кольори — адже для того, щоб отримати будь-який колір, потрібно створити комбінацію з кількох інших. Отже — нам потрібен хороший, і зручний інструмент для цього змішування, причому з обов'язково інтуїтивним інтерфейсом, і купою примочок, реалізованих у цьому самому інтерфейсі, який інтуїтивний. Ми ж юзабілісти, ага.
Щоб мої думки знайшли під собою основу — я зазирнув у вікіпедію, щоб подивитися — що вона видасть мені за визначенням «міксер» (. Отже, що ми там маємо:
Міксер - малий побутовий прилад призначений для збивання яєць, приготування напоїв, мусів, омлетів, рідкого тіста тощо. Міксери бувають стаціонарні та ручні (поширеніші пристрої).
Дуже ... дуже вичерпна відповідь на такий конкретний запит. Щоб надалі у інших людей не було проблем- Я створив визначення Колірний міксер.
У першій частині цієї серії статей я розповім про програму ColorSchemer Studio від однойменної компанії, яка була першопрохідником у створенні подібних продуктів, кількість яких вже перевалила за кілька десятків, у найрізноманітніших видах.
Колір
На скріншоті нижче можна подивитися на найголовніший інструмент програми – колесо колеса. Саме в ньому ми проводитимемо більшу частину свого перебування в цій програмі. Використовується він просто - достатньо вибрати колір, і він покаже найбільш підходящі і контрастні кольори для нього. Все просто.
Це стартовий інструмент, за яким зазвичай витікає найбільша кількість часу — адже сусідній колір може сподобатися більше, а в нього (у сусіднього чи то пак) ще кілька сумісніших. Загалом краса, а не інструмент.
Колірні гармонії
Інструмент «Кольорові гармонії» допомагає нам побачити етапи переходів між двома основними кольорами. Причому видає цей інструмент 2 види можливих переходів – темний та світлий. Зручно.
Кольори з найкращою сумісністю
У цьому інструменті все просто до неподобства — вибираємо колір, і програма видає нам кольори, які найкраще підходять для того, щоб використовувати їх разом із оригіналом. Зауважу, що самі по собі ці кольори можуть бути і не дуже красивими, але у використанні разом з рештою 5-ти — виходять дійсно красиві речі.
Photoschemer
Цікава, і нова функція програми – взяти з фотографії кілька кольорів, і згенерувати на їх базі сумісні. Вбиваємо двох зайців - на фотографіях здебільшого природні кольори, які не викликають відторгнення. Як можна побачити по скріншоті.кольори дійсно хороші, і не пробують з'їсти наш мозок.
Колірний міксер
Знову найпростіший і інтуїтивно зрозумілий інструмент — завантажуємо два різні кольори і отримуємо різноманітні пропорції від їх змішування. Чесно кажучи, я жодного разу цей інструмент не використовував через непотрібність. Хоча сподіваюся комусь він таки буде потрібний, інакше б він не був у складі програми. Можливо художникам?
Аналізатор колірних поєднань
Уявімо, що колірну добірку ми вже зробили, тепер треба пожинати плоди. Аналізатор поєднань двох кольорів – фоновий та текстовий. Тобто. це найкращий інструмент для юзабілістів — підібравши колір тла можна миттю отримати його найкраще поєднання для тексту. Адже супер.
Швидке прев'ю
Мало того, що програма підбере з вашою допомогою хороші кольори, так вона ще й допоможе їх правильно розташувати на сторінці. Використовуються, до речі, психологічні методи цього інструмента, що цікаво саме собою.
Після того як ми зберегли свою іменну палітру кольорів — можливо буде потрібно її роздрукувати? І це легко зробити за допомогою інструменту Print Your Color Schemes. Цим же інструментом можна перегнати отримані результати у pdf - чудова можливість, якщо враховувати, що PDF стандартизували.
Імпорт та експорт
Крім друку було б непогано мати можливість імпортувати та експортувати кольори з того ж Photoshop. І нам знову дають цю чудову нагоду. Ось список, які сумісні з можливістю імпорту-експорту програми.
Організувати імпорт можна з будь-якої сайтової CSS (ну нічого собі…), gif зображення, файлу колірних таблиць (.act), та палітри кольорів photoshop (.aco)
Експортувати можна назад в будь-яку CSS, або html body атрибути, в gif зображення, колірну палітру photoshop, файли колірних таблиць, колірну палітру illustrator (боже, і сюди дісталися), Adobe Fireworks, і Corel Painter
Достатньо об'ємний список, чи не так?
На жаль і ах — але за програму вимагають гроші, що цілком логічно — адже продукт відмінний. Коштує вона 49 доларів в обох варіаціях — як для Windows, так і для MacOS (я думаю, багато хто вже злякався, дивлячись на скріншоти, що користувачів windows залишили за бортом. На щастя, це не так).
Щоб потестувати програму, можна скористатися 15-денною trial-версією, але заважатиме попап при старті програми.
На момент написання статті була доступна версія 1.5.3 для MacOS і 1.5.1 для Windows
Завантажити віджет на робочий стіл (Win, Mac) -40 KB - дозволяє шукати вже готові палітри кольорів, не відриваючись від робочого столу.
Готові поєднання
А тепер найсмачніше — на сайті програми просто МОРЕ чудових колірних рішень. Наважуйтеся!
Онлайнова версія ColorSchemer Studio
Купувати програму звичайно варто (її зрозуміло можна і зламати, але це особиста справа кожного). ColorSchemer Studio надає море можливостей для юзабілістів, графічних дизайнерів і навіть художників. Початківцям теж варто її радити, адже вона допоможе нам уникнути монстрів з непереможними квітами.
Adobe Kuler
У першій статті ми з'ясували, що таке колірний міксер, і з чим його потрібно їсти для більшого збільшення апетиту на прикладі програми ColorSchemer Studio. Безперечно, хороша річ, але платна, а я вирішив сьогодні присвятити статтю безкоштовному, і web-based інструменту від компанії Adobe, якітак само як і компанія ColorSchemer вчасно просікли про те, чого не вистачає дизайнерської компанії. Отже зустрічайте - Adobe Kuler.
Adobe Kuler
Ця замітка буде значно менше, ніж попередня, але не менш корисна. Чому менше? Тому що веб-сервіси як би не намагалися, а дорости до повноцінної програми поки що не можуть — отже, менше можливостей, але зручніше. Ще один безперечний плюс - Kuler зберігає результати у Adobe ID - тобто. у разі зміни ОС на вашому комп'ютері або постійних змінах комп'ютера (робота-будинок, будинок і робота) — все буде доступно, якщо на комп'ютерах є інтернет. Що набагато зручніше, ніж возити на флешці готові палітри із ColorSchemer Studio.
Колірний міксер
Порівняно з програмою на комп'ютері — веб сервіси явно поступаються можливостями, але не так вже й сильно як раніше. Тут є все, що потрібно, і навіть трохи згори.
На відміну від ColorSchemer Studio, де роль міксера безсоромно виконує колірне колесо (color wheel) - тут з цим обов'язком справляється якийсь колірний бочонок. Щонайменше, у мене асоціації були саме такі — ми заважаємо кольори в бочці, при цьому дивимося на цю бочку зверху. У принципі — зовсім не ускладнює, і навіть швидше за все полегшує завдання — очікуваний колір можна отримати набагато швидше.
А можна й не одержати. На жаль при всій видимій зручності - я часто ловлю себе на думці, що знаю приблизно який колір хочу, але не знаю як його отримати - і тут Kuler робить у своєму інтерфейсі найбільшу підлянку - не знаючи колірних кодів, і не розібравшись у механіці сервісу - Очікуваний колір отримати досить важко.
На щастя, розробники з Adobe Labs знають свою роботу добре, тому до дещо дивногоінтерфейсу звикаєш швидко.
Готові колірні рішення
Вперше коли потрапляєш на Adobe Kuler — видається гарний рейтинг найкращих, на думку відвідувачів, палітр — вибрати можна відразу їх і з ними ж продовжити роботу. Плюси зрозумілі - далеко ходити не потрібно, все вже готове на поличці.
З мінусів хотілося б сказати лише одне — кулер досить популярний сервіс, і обравши кольори з першої десятки, є ризик зустріти «колірного клону» свого майбутнього сайту. Тобто. найкраще рішення - це все-таки створити свою унікальну збірку, благо це зручно.
Вже готові рішення можна відсортувати з кількох способів:
1.За оцінкою - пояснювати в принципі нічого - видаються кращі збірки кольорів за версією користувачів Кулера, які ви, до речі, також можете оцінити і подивитись детально.
2.За популярністю — наскільки я зрозумів у даному розділі видаються найпрогляданіші кольорові рішення. Мені здається, що цей рейтинг не набагато відрізняється від сортування за оцінкою, адже переважна більшість людей далі за другу-третю сторінку кулера не піде.
3.Нові - якщо ви щойно створили свою унікальну палітру, і хотіли б, щоб її хтось побачив і скачав, крім вас - цей розділ саме для таких як ви. Тут публікуються нові кольорові палітри. З мінусів — щохвилини створюється понад 20 палітр, тож загубитися можна й тут.
Створивши своє рішення, ви також можете додати його на сайт.
На жаль імпорту у сервісі немає, тобто. покращити вже готову палітру вашого сайту не вийде. Вийде тільки заново їх відтворити. На щастя експорт тут є і дозволяє перенести готові результати в будь-який з інструментів Adobe лінійки CS2 і CS3. Молодці. ДоНа жаль тут немає експорту в Corel, та інші програми, відмінні від Adobe зі зрозумілих причин.
Як і будь-яке веб-рішення якогось завдання інструмент трохи програє у функціональності своїм програмним побратимам, зате виграє у зручності та швидкості отримання результату. Рекомендую використовувати цей сервіс у випадку, якщо ви часто змінюєте свій комп'ютер, ваші кольори розміщені в інтернеті нікуди від вас не подінуться. Для тих же, у кого проблеми з перенесенням даних немає - рекомендую все ж таки скористатися платним програмним аналогом - ColorSchemer Studio.
Джерело: Блог про юзабіліті веб-інтерфейсів (Adobe Kuler, Colorschemer)Автор: Ярослав Бірзул (DezmASter)
Хардкорна конфа за С++. Ми запрошуємо лише профі.