Використання колірних схем pantone в веб-дизайні

Досить часто веб-майстри отримують замовлення, який озвучується так: «створіть нам таку тему (шаблон, дизайн) з урахуванням останніх трендів і тенденцій, щоб за останнім словом моди в сфері дизайну сайтів». Буває, що колірна гамма залишається на вибір самого веб-дизайнера. А буває і так, що дизайни сайтів взагалі створюються для портфоліо. Так чи інакше, але в будь-якому випадку виникає питання, яке поєднання кольорів використовувати в цей раз? Який новий колір або його відтінок підібрати і прочая, і прочая?

З початку XXI століття компанія Pantone вирішила щорічно вибирати один (іноді два) кольору, що стануть домінуючими протягом року. Так вже існує 17 унікальних колірних відтінків, які служать дизайнерам своєрідним керівництвом для проходження стилю і моді. Графічний дизайн або архітектура, ландшафтний або дизайн одягу, взуття та аксесуарів, веб-дизайн або дизайн авто. Всі вони в тій чи іншій мірі намагаються орієнтуватися на вибір і «слово» Pantone.

Pantone: 15-0343

Хтось із вас добре знайомий з Pantone, хтось не дуже, а хтось може і чув, що «так, є тренд», але як використовувати його в веб-дизайні і чи є в цьому сенс, не особливо замислювався . Ми сьогодні приділимо саме цього увагу і навіть знову скористаємося допомогою Photoshop.

що естьPantone

Вибір кольору і палітри року базується на зміни у світовій культурі та соціумі на планеті, на тому, як часто, де і в якому вигляді дані кольору використовувалися, яке глобальне вплив зробили на розвиток мистецтва. Потім вибір палітри узгоджується з багатьма іменитими дизайнерами, колористами в великих компаніях і вже потім виходить керівництво Pantone View, яке описує останній розвиток колористики в світі.

Pantone і веб-дизайн

Навіщо потрібна кольорова палітра Pantone для веб-дизайнера, якщо колір і так можна підбирати на колесі RGB або веселці. Як мінімум, для зручності роботи в цілому. Pantone описує вже готові чіткі кольору. Чи не брудно-рожевий, десь ближче до сірого, а більш явний і чіткий. Більш того, веб-дизайнеру не буде потрібно після / до створення шаблону сайту пояснювати верстальщику або замовнику, що за колір був / буде використаний, а-ля, «світло-синьо-зелений з легким фіолетовим відтінком». Досить просто вказати номер в палітрі Пантон і всім все стає ясно.

Таким чином, веб-майстер спрощує всім і собі, в тому числі, роботу з колористикою його майбутнього дизайну сайту. Мова не йде про те, що Pantone важливий тільки для поліграфії, для створення візиток і іншого. Ні, в веб-дизайні використовувати кольорову палітру цілком можна.

Наведемо приклад. Компанія замовляє вам дизайн сайту, але в колористиці їх візиток, логотипу та ін. Зрозуміло, що ваше завдання правильно підібрати колір. Вам можуть показати брошури в PDF або картинки логотипів, а ви вже Піпеткою в Photoshop підчіплюють потрібний колір. Але якраз тут і можуть виникнути дрібні неточності і потім, коли ви встановите картинку логотипу на сайт, можуть бути помітні невеликі відмінності в тональності. Файл при збереженні все одно втрачає частину кольору і піпеткою можна підхопити саме ту частину (той піксель), що був змінений. Щоб такого випадково не відбулося, зручніше дізнатися у замовника точні кольори палітри Pantone, що використовувалися при створенні їх поліграфії. Тоді дизайн по колорит буде збігатися 100%.

Особливість квітів в палітрах Pantone - вони позитивно сприймаються людьми. Фарби не дратують, не виглядають незграбними. А оскільки дизайн сайту створюється не для того, щоб сайт був «десь там в інтернеті», а для відвідувачів, для того, щоб вони поверталися на сайт і їм було зручно користуватися ним, то і кольору повинні бути приємні очам, погляду. Pantone, як раз, і приділяє цьому фактору особливу увагу.

Pantone іPhotoshop

Наприклад, ми скликали ПКМ по Analagous.ase, подивилися кольору на сайті і побачили їх в меню Зразки. Зверніть увагу, що назва квітів відрізняються від основної палітри Pantone, тому сплутати їх буде складно.

Якщо виникає необхідність скористатися наборами минулих років, досить відкрити відповідну сторінку на сайті pantone.com і вибирати пункт меню «Download Palette for Adobe Applications». Завантажиться архів з ASE файлами.

Після перезапуску Photoshop кольори зберігаються у Custom Зразки і не пропадають.

Нижче ми пропонуємо варіанти використання текстур, фонів, іконок і приклади існуючих сайтів з використанням світло-зеленого кольору і нової, свіжої палітри кольорів.

Веб дизайн

Сайт використовує тільки вкраплення зеленого в зображеннях, колір шрифту заголовків, на деяких мініатюрах. В цілому ж при поєднанні біло-сірого, темно-сірого і світло-зеленого виходить вельми красиво і відчуття перебування «в болоті» немає.

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

Качконіс і Ricanza

Оскільки в палітрі року не тільки зелений колір, то, відповідно, і іконки можуть бути не тільки зеленими. Це і поєднання жовтого і зеленого, чорні і зеленими елементами, синіми, білими. На прикладах вище можна побачити приклади.

Текстура і візерунки

Ніжні зелені візерунки і текстури також можуть використовуватися і не перетворювати весь дизайн сайту в «дикий зелений ліс». Світлі відтінки або красиве поєднання двох кольорів додадуть Landing Page або секції витонченість і пікантність. Ми вже розповідали про великих базах по структурам і фонам для Photoshop. тому просто додайте в поле пошуку слово «green» і підбирайте.

завершення

Використовувати палітру Pantone зручно і тим, що кольори в ній чіткі, красиві і вже підготовлені. Не потрібно витрачати час самому, підбираючи поєднання. Тим більше що обраний колір все одно описується квітами RGB. Палітра кольорів року і колір року не означає, що ви повинні створювати тільки все в рожевому або зеленому кольорі. Ні, на те і є палітра. Вона дозволяє поєднувати, підбирати і вибирати. Іншими словами - творити.