Довольно часто веб-мастера получают заказ, который озвучивается так: «создайте нам такую тему (шаблон, дизайн) с учетом последних трендов и веяний, чтобы по последнему слову моды в сфере дизайна сайтов». Бывает, что цветовая гамма остается на выбор самого веб-дизайнера. А бывает и так, что дизайны сайтов вообще создаются для портфолио. Так или иначе, но в любом случае возникает вопрос, какое сочетание цветов использовать в этот раз? Какой новый цвет или его оттенок подобрать и прочая, и прочая?
С начала XXI века компания Pantone решила ежегодно выбирать один (иногда два) цвета, что станут доминирующими в течение года. Так уже существует 17 уникальных цветовых оттенков, которые служат дизайнерам своеобразным руководством для следования стилю и моде. Графический дизайн или архитектура, ландшафтный или дизайн одежды, обуви и аксессуаров, веб-дизайн или дизайн авто. Все они в той или иной степени стараются ориентироваться на выбор и «слово» Pantone.
И если в прошлом году достаточно часто можно было увидеть светло-голубые и светло-розовые цвета в дизайне, то в 2017 выбор пал на нежный светло-зеленый цвет. Проще всего сравнить и называть его «цветом молодой травы», что появляется в середине весны под первыми лучами уже жаркого солнышка. Кроме этого были представлены и новые палитры года с цветами,которые сочетаются с выбранным зеленым.
Pantone: 15-0343
- RGB: 136 R, 176 G, 75 B
- HEX / HTML: 88B04B
- CMYK: 51 С, 9 М, 88 Y, 0 К
Кто-то из вас хорошо знаком с Pantone, кто-то не очень, а кто-то может и слышал, что «да, есть тренд», но как использовать его в веб-дизайне и есть ли в этом смысл, не особо задумывался. Мы сегодня уделим как раз этому внимание и даже опять воспользуемся помощью Photoshop.
Что есть Pantone
Начнем с того, что Pantone – это компания, являющаяся авторитетом в сфере цветовых гамм. Она же создает цветовые схемы, наборы, технологии по передаче и смешиванию оттенков и для удобства выпускает картонные «веера» палитры цветов. Их вполне можно приобрести отдельно (физически) по немалой цене, а можно найти и в цифровом формате на сайте самого Pantone.
Существует в составе компании и институт исследования цветов, где постоянно ведется анализ влияние того или иного цвета или оттенка на жизнь общества в целом (кино, мода, реклама, дизайн, полиграфия и т.д.). Каждый год этот институт выбирает самую актуальную палитру цветов на наступающий год и обозначает один, самый главный, цвет. Необходимо понимать одну вещь. Выбор цвета не делается с потолка и говорить о том, что тренд в веб-дизайне 2017 – зеленый цвет – «ну, понапридумывали, хорошо серо-буро-малиновый в крапинку не выбрали. Ну, мы-то знаем, что так делать не надо, тренды это пустое» – досадное заблуждение. Бывает, говорят и думают так…
Выбор цвета и палитры года базируется на изменениях в мировой культуре и социуме на планете, на том, как часто, где и в каком виде данные цвета использовались, какое глобальное влияние оказали на развитие искусства. Затем выбор палитры согласовывается со многими именитыми дизайнерами, колористами в крупных компаниях и уже затем выходит руководство Pantone View, описывающее последнее развитие колористики в мире.
Pantone и веб-дизайн
Зачем нужна цветовая палитра Pantone для веб-дизайнера, если цвет и так можно подбирать на колесе RGB или радуге. Как минимум, для удобства работы в целом. Pantone описывает уже готовые четкие цвета. Не грязно-розовый, где-то ближе к серому, а более явный и четкий. Более того, веб-дизайнеру не потребуется после/до создания шаблона сайта объяснять верстальщику или заказчику, что за цвет был/будет использован, а-ля, «светло-сине-зеленый с легким фиолетовым отливом». Достаточно просто указать номер в палитре Пантон и всем всё становится ясно.
Таким образом, веб-мастер упрощает всем и себе, в том числе, работу с колористикой его будущего дизайна сайта. Речь не идет о том, что Pantone важен только для полиграфии, для создания визиток и прочего. Нет, в веб-дизайне использовать цветовую палитру вполне можно.
Приведем пример. Компания заказывает вам дизайн сайта, но в колористике их визиток, логотипа и пр. Разумеется, что ваша задача правильно подобрать цвет. Вам могут показать брошюры в PDF или картинки логотипов, а вы уже Пипеткой в Photoshop подцепляете нужный цвет. Но как раз тут и могут возникнуть мелкие неточности и затем, когда вы установите картинку логотипа на сайт, могут быть заметны небольшие различия в тональности. Файл при сохранении все равно теряет часть цвета и пипеткой можно подхватить как раз ту часть (тот пиксель), что был изменен. Чтобы такого случайно не произошло, удобнее узнать у заказчика точные цвета палитры Pantone, что использовались при создании их полиграфии. Тогда дизайн по колору будет совпадать 100%.
Особенность цветов в палитрах Pantone – они положительно воспринимаются людьми. Краски не раздражают, не выглядят аляповатыми. А поскольку дизайн сайта создается не для того, чтобы сайт был «где-то там в интернете», а для посетителей, для того, чтобы они возвращались на сайт и им было удобно пользоваться им, то и цвета должны быть приятны глазам, взору. Pantone, как раз, и уделяет этому фактору особое внимание.
Pantone и Photoshop
Цветовая палитра Pantone уже присутствует в Photoshop, но поскольку наборов компания создает много и разных, рекомендуется периодически обновлять файлы ASE и дополнять. Так, например, если речь идет о палитре и цвете года, то на страничнике с объявлением на официальном сайте (pantone.com/color-of-the-year-2017) внизу найдется и ссылка на данную палитру в архиве ZIP.
На жестком диске компьютера все цветовые наборы находятся по адресу: Photoshop [номер]\Presets\Color Swatches. Затем в самой программе в меню Окно – Образцы или во вкладке Образцы нажать небольшое меню в правом верхнем углу, и появится список палитр Pantone. Останется только их добавить к существующей и использовать в дальнейшем.
Другой момент особенно важен. Если вы загружаете набор с сайта Pantone, то в архиве вы увидите расширение файлов ASE. Phototshop их не увидит, если решите загрузить. Ему нужны ACO. Но все гораздо проще. Некоторые советуют в интернете использовать бесплатные приложения для просмотра или открывать различными программами от самой Adobe. На деле, просто разархивируйте архивчик, откройте папку и кликните ПКМ по файлу ASE. Затем выберите «Открыть в…» и вашу версию Photoshop. Новая палитра цветов появится во вкладке Образцы автоматически, в конце списка.
Например, мы кликнули ПКМ по Analagous.ase, посмотрели цвета на сайте и увидели их в меню Образцы. Обратите внимание, что название цветов отличаются от основной палитры Pantone, поэтому спутать их будет сложно.
Если возникает необходимость воспользоваться наборами прошлых лет, достаточно открыть соответствующую страничку на сайте pantone.com и выбирать пункт меню «Download Palette for Adobe Applications». Загрузится архив с ASE файлами.
После перезапуска Photoshop цвета сохраняются во вкладке Образцы и не пропадают.
Использование цвета и палитры года Pantone 2017
Как мы сказали в начале, цветом 2017 года Pantone выбрала светло-зеленый цвет. Этот цвет ассоциируется с действиями человека на протяжении всей истории мира, с возможностью идти вперед, творить, не ждать и не сомневаться. В веб-дизайне зеленый более связывают с экологической тематикой сайта, поэтому, если вы решили использовать такой цвет, будьте аккуратны.
Ниже мы предлагаем варианты использования текстур, фонов, иконок и примеры существующих сайтов с использованием светло-зеленого цвета и новой, свежей палитры цветов.
Веб-дизайн
Rollpark
Сайт использует только вкрапления зелёного в изображениях, цвет шрифта заголовков, на некоторых миниатюрах. В целом же при сочетании бело-серого, темно-серого и светло-зеленого получается весьма красиво и ощущения пребывания «в болоте» нет.
Rainforest Foods
Красивое решение использования зеленых, коричневых оттенков, желтых и оранжевых, голубых и белых. Просто прогуляйтесь по нему сами и насладитесь великолепными обработанными уже фотографиями природы.
PrimeIT
Победитель Awwwards за 2016 год. Проект также частично использует зеленый цвет, который не раздражителен и расставляет акценты. Это и фон инфоблоков, и кнопок пользовательского интерфейса, шрифта в заголовках, меню и логотип. Как раз логотип и стал причиной, по сути, использования зеленого.
Утконос и Ricanza
Два сайта разной тематики (интернет-магазин и поставщика тропических фруктов) используют похожие сочетания. Здесь и жёлтый тренд 2017 и зеленый (оба от Pantone), минималистический дизайн и геометрические формы.
Trellisfarm
Сайт продуктов для фермерских и домашних животных, подкормки, еда. Дизайн полностью создан с использованием палитры Pantone 2017 года, но при этом каждый цвет выделяет только что-то свое, тогда как другие были использованы для фона и текстур, шрифтов.
Иконки
Поскольку в палитре года не только зеленый цвет, то, соответственно, и иконки могут быть не только зелеными. Это и сочетание жёлтого и зеленого, черные и зелеными элементами, синими, белыми. На примерах выше можно увидеть примеры.
Текстуры и узоры
Нежные зеленоватые узоры и текстуры также могут использоваться и не превращать весь дизайн сайта в «дикий зеленый лес». Светлые оттенки или красивое сочетание двух цветов придадут Landing Page или секции утончённость и пикантность. Мы уже рассказывали о больших базах по текстурам и фонам для Photoshop, поэтому просто добавьте в поле поиска слово «green» и подбирайте.
Завершение
Таким образом, использование «тренда года» не является чем-то сложным и неординарным. Даже самые обычные дизайны сайтов для небольших компаний или блогов могут обладать цветами из палитры Pantone текущего года, но также они могут использоваться для элементов интерфейса, шрифта, или выделения какой-то важной информации. При таком варианте, «цвет и палитра года 2017» не будут ассоциировать сайт с экологией.
Использовать палитру Pantone удобно и тем, что цвета в ней четкие, красивые и уже подготовленные. Не нужно тратить время самому, подбирая сочетание. Тем более что выбранный цвет все равно описывается цветами RGB. Палитра цветов года и цвет года не означает, что вы должны создавать только все в розовом или зеленом цвете. Нет, на то и есть палитра. Она позволяет сочетать, подбирать и выбирать. Иными словами – творить.