Конструктор цветовых схем. Генераторы палитр в помощь веб-дизайнеру. Создать свою цветовую гамму онлайн

Про вывод популярных постов в вордпресс я уже рассказывал пару раз. Помнится, на Tod’s Blog был пост про плагин WP-PostViews , который, правда, многие недолюбливают за нагрузку на хостинг. Еще один позволяет добавить элементы для голосования пользователями.

Пришло время написать более актуальную заметку — многие плагины с тех под обновились или наоборот перестали поддерживаться. Поэтому встречайте новую подборку для вывода популярных постов в вордпресс. Всего отобрал 5 плагинов. Конечно, их имеется намного больше, но я выбрал наиболее скачиваемые и актуальные.

Плагин по описанию наиболее простой, как и принцип его работы. Не смотря на рейтинг в 3.8 пунктов скачали его достаточно много раз — более 190 тысяч. Последняя на данный момент версия 2.6.2. поддерживает wordpress от 3.0 до 3.5.2.

Процесс установки плагина Easy Popular Posts традиционный. Вы можете использовать его в блоге через одноименный виджет либо, добавляя функцию в шаблон, либо через шорткод разместить в посте. Шорткод:

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

На странице описания плагина в разделе FAQ имеются параметры для функции thisismyurl_easy_popular_posts, позволяющие сделать то же самое.

— чуть более продвинутый плагин. Скачиваний еще больше — около 620 тысяч раз, оценка 4.1. Поддерживается версия вордпресс от 3.3 до 3.6.1. Использовал его на одном из блогов — отличное решение.

Основные особенности WordPress Popular Posts:

• Поддержка нескольких виджетов данного типа в одном блоге.
• Временные рамки для популярных постов — сутки, 7 дней, 30 дней и т.п.
• Поддержка произвольных типов записей.
• Отображение миниатюр, а также возможность определить свое HTML оформление блоку.
• Статистика в админке.
• Использование шорткодов — .
• Поддержка и совместимость с плагином WP-PostRatings.

Добавлять список популярных постов можно через виджет, где, кстати, есть ну, очень много разных параметров настройки.

Плагин отображает самые популярные посты по комментариям и просмотрам в специальном виджете с табами. Есть возможность фильтрации результатов по дате или категории.

Основные фишки плагина Popular Widget:

• Период популярных постов (по умолчанию год).
• Поддержка анонса постов, миниатюр.
• Отображение последних комментариев.
• Подсчет числа просмотров.
• Фильтр по категории и много других опций.

Выглядит плагин Popular Widget вполне неплохо:

Скачиваний 53 тысячи, поддерживаются версии вордпресс от 3.0 до 3.6.1. Средняя оценка 4.3. В принципе, плагин оставляется положительное впечатление.

Еще один плагин популярных постов — . Версия 1.13 (последняя на момент написания статьи) поддерживает вордпресс от 3.2 до 3.5.2, более 12тыс. загрузок. Для отображения популярных постов можете использовать виджет.

Основные опции Popularity Posts Widget:

• Временные рамки: популярные за сегодня, 7 дней, 30 дней и все время.
• Гибкие настройки отображения: количество, статистика, длина текста для списка.
• Поддержка миниатюр.
• Фильтр по категориям.
• Легкая модификация CSS стилей.
• Поддержка шорткодов .

В принципе, данный плагин Popularity Posts Widget достаточно сильно похож на предыдущей. Хотя в том есть табы, а здесь нет. Выбирайте модуль исходя из своей задачи.

Top 10

Последний в подборке плагин — Top 10 . Он подсчитывает количество просмотров постов и страниц в вордпресс, а затем выводит результаты в сайдбаре. После установки модуля в админ панели найдете много параметров.

Основные возможности Top 10:

• Поддержка пользовательских типов записей.
• Наличие виджета, настаиваемый вывод списка.
• Поддержка миниатюр, отображение числа просмотров.
• Исключение постов или категорий из списка.
• Грамотное удаление плагина с очисткой всех таблиц базы данных.
• Совместимость с : WP-Super-Cache, W3 Total Cache или Quick Cache.

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

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

Недавно вы могли встретить детальную статью про . А чуть ранее я публиковал похожую заметку о инструментах для выбора с обзором Kuler и СolorBlender. Сегодня решил дополнить тему и предоставить чуть больше вариантов выбора палитр цветов для сайта.

ColoRotate

Инструмент ColoRotate позволяет выбирать самые подходящие цветовые схемы из большого числа готовых предложений или создавать собственные. Выбирая цвета в разных местах на вращающейся 3D палитре, можно получать сочетания, построенные на гармонии или на контрасте, работать с оттенками, яркостью, насыщенностью, смешивать разные краски. Можно также извлекать цвета из готовых изображений. Есть версия для iPad, доступна синхронизация с Photoshop. Очень красивый сервис.

Adobe Color CC

Генератор палитр и цветовых схем Adobe Color CC позволяет:

• экспериментировать с комбинациями цветов на интерактивном цветовом кругу (доступно 7 разновидностей цветовых систем);
• генерировать цветовые темы, пользуясь предварительно заданными стилями;
• создавать цветовые схемы, используя цвета с фотографии или любого другого готового изображения;
• делиться своими работами и знакомиться с чужими, черпая в них вдохновение.

Созданные цветовые темы можно сохранять в приложениях для ПК или мобильных устройств, а также в разделе “Мои Темы” на сайте.

DeGraeve

На сайте DeGraeve представлено множество инструментов, в том числе генератор цветовых схем на основе готовых изображений. Достаточно найти в интернете картинку с интересной цветовой гаммой, загрузить URL этого изображения в соответствующую строку на сайте и нажать кнопку генерации палитры. Через несколько секунд программа разложит картинку на 10 основных цветов, 5 приглушенных (dull) и 5 ярких (vibrant), присвоив каждому свой код. Сгенерированную палитру удобно использовать при работе над дизайном сайта, цвета будут отлично сочетаться друг с другом.

Contrast-A

Инструмент Contrast-A со слоганом «Найдите доступное сочетание цветов» предназначен для создания пользовательских палитр в процессе экспериментов с сочетающимися цветами. Программа основана на руководстве о сочетаемости цветов веб-контента (текста и фона). Для работы с ней желательны базовые знания по этой теме.

Сервис позволяет выбирать на палитре 2 цвета, и оценивать, как они будут смотреться вместе, будучи использованными как текст и фон. Причем демонстрируются результаты для нормального цветовосприятия и различных форм цветовой слепоты.

ColorZilla

Приложение ColorZilla для Firefox (есть также версия для Google Chrome) в помощь веб-мастерам и специалистам по графическому дизайну, работающим с цветом. Будет полезно как новичкам, так и продвинутым пользователям. Программа производит цветовой анализ любой точки и любой страницы в браузере, извлекает нужные цвета для использования в других приложениях. Определение цветовой палитры страницы, выбор цветов из предустановленного набора, сохранение в составе пользовательской палитры тех, что чаще всего употребляются,– таков набор ее возможностей.

Pictaculous

Pictaculous — еще один генератор цветовых палитр на базе готовых изображений. Нужно только загрузить на сайт выбранную картинку объемом не больше 500 КБ, и тут же начнется его цветовой анализ. Под результатом с цветовой гаммой изображения выводится еще десяток палитр, но уже созданных вручную, членами сообществ ресурсов Kuler и COLOURLovers. Их тоже вполне можно использовать в качестве цветового решения для разрабатываемого сайта. Доступна пересылка результата себе на почту, и шеринг в социальных сетях.

Если вы знаете еще какие-то генераторы цветовых палитр, делитесь ссылками в комментариях.

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору и . А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.

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

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

1. Ищем вдохновение

Краски природы

Черпайте из окружающего вас мира. Все, что вам нужно – просто осмотреться. Модная одежда, обложки книг, дизайн интерьера… вас окружает так много потрясающих вещей. Но лучшие цветовые сочетания – это краски природы. Запечатлите красивый момент и попробуйте создать собственную подборку на основе конкретного изображения.

Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото

Behance

В популярном сервисе найдете интересные работы, включенные в наилучшие онлайн-портфолио настоящих профессионалов своего дела. Этот сайт – также прекрасный источник вдохновения. Чтобы просмотреть новые достойные примеры проектов, просто выберите нужный цвет.

Dribbble Colors

Dribbble – одна из лучших , которая пригодится при создании пользовательского интерфейса. Если вы желаете визуально понять, каким образом другие специалисты использовали конкретный цвет, откройте страницу по ссылке dribbble.com/colors и укажите нужное значение.

Подбирая цвет для сайта здесь можно задать минимальный его процент — поэкспериментируйте, например, попробуйте поставить 30 % синего.

Попробуйте указать минимальный процент определенного цвета в Dribbble

Designspiration

Designspiration – полезный инструмент в первую очередь тем, у кого уже есть идеи цветовых комбинаций и кто хочет увидеть примеры таких сочетаний. Выберите от 1 до 5 вариантов, и найдете картинки, соответствующие указанным параметрам.

В Designspiration найдете разные примеры цветовых комбинаций

Tineye Multicolr

С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти в идеальной палитре.

Colorzilla

ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания и многое другое.

Расширение ColorZilla доступно в Chrome и Firefox

Shutterstock Spectrum

Один из лучших способов представить, как же будет выглядеть цветовая гамма, – посмотреть соответствующие изображения. Большинство решений, предлагающих выбор цвета для дизайна сайта, включают подобную функцию, но Shutterstock Spectrum располагает невероятно удобным интерфейсом и предварительным просмотром, что действительно может оказаться полезным.

Причем вам не потребуется подписка, поскольку предварительной оценки картинки будет вполне достаточно (даже несмотря на то, что на ней присутствует «водяной знак») .

W3Schools

Недавно в блоге рассматривали подборку от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.

2. Создаем цветовую палитру

Material Design Color Tool

Сервис подбора цветов для сайта Material Design Color Tool позволит создавать цветовые схемы, делиться ими и просматривать приблизительный пользовательский интерфейс для подобранных вами параметров. Одна из полезных его функций – измерение уровня доступности любого сочетания цветов.

Coolors

Coolors – сайт для создания многоцветной палитры. Просто закрепите определенный цвет и нажмите на «пробел». Инструмент хорош также тем, что вы получите не один результат, а можете сгенерировать несколько вариантов, изменив лишь начальные данные.

Цветовая схема в Coolors на основе фото

Adobe Color CC

Сервис подбора цвета Adobe Color CC (ранее Kuler), сейчас довольно популярен. Он находится в свободном доступе в интернете, но существует также и десктор-версия. С помощью данного веб-приложения вы сделаете свою палитру, используя цветовой круг:

А можете получить определенный результат из готового изображения:

Подбор цвета для сайта по картинке

Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:

Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в InDesign, Photoshop и Illustrator.

Paletton

Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса.

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

3. Делаем палитру доступной

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

WebAIM Color Contrast Checker

Одни тона прекрасно сочетаются друг с другом, другие же – совсем наоборот. Огромное количество проектов не проходят тест А/А, и это факт. Очень важно проверять визуальное оформление интерфейса и контрастность тонов, особенно если на странице много текста. Для этих целей используйте при подборе цветов сайта.

WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.

Coolors

О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.

Тип цветовой слепоты в схеме

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

Так человек с протаномалией видит палитру

NoCoffee Vision Simulator для Chrome

С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.

Так выглядит проект CNN для человека с дейтеранопией

Заключение

Все сервисы подбора цвета для сайтов и UX-дизайна, упомянутые в статье, определенно помогут вам в поисках интересной и эффективной гаммы. Но помните: лучший способ научиться создавать удивительные палитры – много практиковаться и экспериментировать.

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

1. Kuler

Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

Вдохновение может возникнуть под влиянием самого неожиданного повода. Например, вы можете наткнуться на красивую фотографию с привлекательной цветовой гаммой. Этот генератор цветовой палитры создан как раз для обработки таких фотографий. Загружаете файлы в форматах JPG или PNG - и получаете подробную раскладку по ключевым цветам. Независимо от того, какую реакцию вы пытаетесь вызвать у ваших посетителей, генератор цветовой палитры поможет создать уникальный внешний вид для любого веб-сайта.

Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

Этот популярный плагин для Firefox позволяет прямо в браузере определить значения отдельных цветов и измерить разницу между ними. Есть «браузер цветовых схем» для выбора отдельных цветов из заранее подобранных наборов. Простой в использовании и чрезвычайно многофункциональный, плагин ColorZilla - словно швейцарский армейский нож среди расширений браузера для веб-дизайнеров и художников.

В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

Когда речь идёт об эффективном веб-дизайне, то говорят об интуитивном пользовательском интерфейсе и макетах, однако цветовые схемы имеют такое же большое значение, а то и бóльшее. Перечисленные здесь инструменты должны направить вас в верном направлении, чтобы выбрать отличную цветовую палитру для сайта с первой попытки. В интернете можно найти и другие полезные инструменты, но именно с этих вы можете начать подбор идеального арсенала, который соответствует вашему персональному стилю. Удачи и счастливого дизайна!