Отправляет email-рассылки с помощью сервиса Sendsay

О веб-дизайне - из личного опыта.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

5.797 подписчиков
-1 за неделю
←   Все выпуски   →

Созданиие цветовых схем с помощью программы ColorImpact


··· Выпуск No 4 ··· 2006-06-08 ··· архив рассылки ···
О ВЕБ-ДИЗАЙНЕ - ИЗ ЛИЧНОГО ОПЫТА

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

... Одно нечаянное наблюдение. Заметил, что в четвёртый раз рассылка выходит в четверг, хотя совершенно никаких объективный предпосылок для предпочтения именно этого дня недели, не существует. Просто совпадение. Или нет?..

ГРАФИКА

Созданиие цветовых схем с помощью программы ColorImpact

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

Маленькая и симпатичная программка ColorImpact предоставляет очень удобные инструменты для легкого и наглядного подбора цветов, которые затем можно будет использовать в оформлении сайта. Саму прогамму можно найти на сайте изготовителя а порывшись немного в интернете, можно разыскать и русификатор и э-э... благотворительную помощь для людей не имеющих пока лишних 60$ на покупку программы

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

Интерфейс программки очень прост и интуитивно понятен, практически с первого взгляда, но по ходу дела у меня возникли подозрения, что при её освоении привычным методом научного тыка, некоторые неочевидные но важные детали остались неизвестными. Поизучав хелп я сделал два глобальных вывода. Первый - иногда действительно стоит заглядывать в руководство, поскольку там можно найти много чего. Второй - весьма полезно знать английский язык, ибо сами понимаете.

Итак, вот пошаговая последовательность действий по созданию цветовой палитры для сайта.

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

Созданиие цветовых схем с помощью программы ColorImpact

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

Созданиие цветовых схем с помощью программы ColorImpact

Вот так всё просто - берите и пользуйтесь и забудьте о подбирании цвета на глазок.

В хелпе описывается подбор цветов не примере схемы "триада", которая, является наиболее часто используемой. Итак, мы выбираем основной цвет, который будет отображаться в центре многоугольника и в его нижнем секторе. Соответственно, два других цвета триады будут отстоять от нижнего сектора на 4 шага в одну и другую стороны. Делайте двойной щелчок по выбранным цветам и вы увидите, как они будут добавлены в ряд на верхней панели.

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

Во многих случаях, трёх цветов в комбинации с чёрным, будет вполне достаточно. Например, для создания логотипа, брошуры, баннера. Однако для создания веб-страниц требуется более расширенная палитра. Поэтому идём дальше.

Открываем следующую вкладку программы - Color Variations (вариации цвета) и выбираем для начала Variation Type (тип вариаций) - Lighter (светлее). Выберем ряд более светлых цветов, кликнем по любому из них правой кнопкой и выберем пункт Add Variations (добавить вариации), после чего три цвета из выбранного ряда будут добавлены в палитру.

Созданиие цветовых схем с помощью программы ColorImpact

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

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

Теперь было бы неплохо добавить более тёмных оттенков - например, для рамок, заголовков и т.п. Для этого ставим тип вариаций Darker (темнее) и выбираем какой-нибудь наиболее симпатичный ряд тёмных оттенков. Добавляем их на верхнюю панель двойным щелчком или перетаскиванием.

На этом подбор цветовой палитры в данном примере можно считать законченным. Разумеется, количество подобранных оттенков может быть гораздо большим. Достаточно сказать, что кроме упомянутых цветовых вариаций Lighter и Darker, существует ещё восемь различных вариантов и экспериментировать с ними можно сколько угодно.

Для того, чтобы перед использованием выбранных цветов, удостовериться, в том, что если поставить их рядом, то результат будет именно таким, о котором мы мечтали, существует панель Test Pattern (тестовые образцы). С ней, думаю и так всё понятно: выбираем образец с нужным количеством квадратов, перетаскиваем не них образцы цветов из палитры, или кликаем на плюс для автоматического заполнения, затем отодвигаемся от монитора и разглядывем полученный результат. Да, кстаим, не забудьте о том, что для самой панели тоже можно назначить фоноввый цвет.

После того, как все цвета подобраны, встаёт вопрос: что со всем этим добром делать? То есть, конечно, понятно что, но вот как? Можно конечно кликать по каждому цветовому образцу правой кнопкой, копировать код цвета и затем вставалять его куда следует (как я и поступал когда-то), но это делеко не самый удобный способ. Программа предоставляет весьма большой выбор гораздо более удобных и разнообразных способов распорядиться подобранной палитрой.

Вот один из них: жмём на Файл->Экспорт и получаем в ответ вот такое окошко.

Созданиие цветовых схем с помощью программы ColorImpact

Извиняюсь, не самом деле здесь изображен скриншот копирования результата в буфер обмена (Edit->Copy Specal). Но они практически идентичны, только при экспорте доступно большее количество форматов.

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

Это конечно довольно удобно, но в большинстве случаев, пожалуй ещё удобнее будет сразу перегнать полученный набор в палитру графического редактора. Для того, чтобы сотворить такое чудо, в выпадающем меню Format, выберите пункт Photoshop Color Palette и нажмите на кнопку Export. Будет созан aco-файл фотошоповской палитры. Затем вы открываете Фотошоп, загружаете этот файл в панель образцов и получаете там всю подобранную ранее палитру в полной боевой готовности.

Те, кто пользуется графическими редакторами Paint Shop Pro, Illustrator, FreeHand - тоже не останутся обиженными, поскольку имеется экспорт и в их палитры. А вот любители Corel Draw - обламываются.

Хорошо, с графикой всё ясно, а если нужно испоьзовать выбранные цвета для создания файла стилей? На этот случай предусмотрена возможность экспорта в css-файл, где каждый цвет будет представлен в двух варипнтах -как color и как background-color. Выбирайте что необходимо, а border-color в случае необходимости вставите уж как-нибудь сами.

На этом последовательность всех необходимых действий можно считать завершенной, но в программе ColorImpact есть ещё некоторые интересные возможности, о которых я возможно напишу как-нибудь в следующий раз. Да и третью версию тое было бы интересно попробовать при случае...

Адрес этой статьи на сайте www.ieroglif.net
Оставьте свой комментарий.

Материал получился довольно большой, поэтому пока им и ограничусь. И пойду готовить следующий выпуск. Буду весьма рад получить отзывы, предложения, вопросы и т.в.т (типа всё такое). Пишите на мэйл dmitry@ieroglif.net или оставляйте комментариина сайте www. ieroglif.net

··· Выпуск No 4 ··· 2006-06-08 ··· архив рассылки ···
В избранное