вторник, 13 декабря 2011 г.

Орнаменты всех времен и стилей


Основные исторические этапы развития и становления орнамента 
Орнамент народов Северного Кавказа и Закавказья
  • Дагестанский орнамент
  • Осетинский орнамент
  • Адыгейский орнамент
  • Балкарский орнамент
  • Кабардинский орнамент
  • Карачаевский и черкесский орнамент
  • Чеченский и ингушский орнамент
  • Калмыцкий орнамент
  • Азербайджанский орнамент
  • Армянский орнамент
Орнамент народов Восточной Европы и Средней Азии
Каллиграфический и типографский орнамент
Разное:

Орнамент: подборки иллюстраций

Алфавиты. Буквицы. Инициалы. Каллиграфический орнамент

суббота, 3 декабря 2011 г.

Дизайн и вёрстка. Подбор гармоничных цветов


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

Цветовой круг
Если спектр свернуть в виде трубки, то полученная фигура будет носить название цветовой круг (рис. 1). С помощью цветовго круга удобно подбирать цвета и манипулировать ими. Круг имеет два основных параметра - оттенок и насыщенность. Оттенок измеряется в градусах, как это ни звучит странно. Ноль и триста шестьдесят градусов соответствует красному цвету, от него и идет отсчет. Насыщенность обозначает видимую яркость, или интенсивность цвета.
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 1. Цветовой круг. А - оттенок; Б - насыщенность; В - яркость; Г - оттенок
Более удобней описать особенности цветового круга с помощью окружности, поделенной на шесть равных сегментов (рис. 2).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 2. Цветовой круг, применяемый в дизайне
Цвета красный, зеленый и синий называются основными. Желтый, голубой и пурпурный - дополнительными или комплиментарными цветами. Вообще-то, правильней использовать английские названия цветов, поскольку в русском языке нет аналогов для описания нужных цветов. Поэтому, по общему соглашению, цвет, который скорее напоминает фиолетовый, принято называть пурпурным.
С цветовым кругом, представленным на рис. 2, связаны следующие особенности:
- цвета расположенные напротив друг друга являются контрастными. При их смешивании получается белый цвет;
- любой цвет можно получить смешиванием близлежащих к нему цветов. Так, желтый цвет получается при сложении красного и зеленого.

Цветовая модель HSB

Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками (рис. 1):
Оттенок (Hue). Оттенком называют лучи света, отраженные от объекта или прошедшим сквозь него. На цветовом круге выражается в градусах от 0° до 360°.
Насыщенность (Saturation). Обозначает видимую яркость, или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность). На цветовом круге показано параметром Б (рис. 1), увеличиваясь от центра круга к краям.
Яркость (Brightness). Зависит в основном от количества световых лучей, отраженных поверхностью данного цвета, что равно его яркости по отношению к другим цветам при данном освещении. Обычно измеряется в процентах от 0% (черный) до 100% (белый).
С помощью Photoshop можно изменять цвет, варьируя значениями этих параметров.

Контрастные цвета

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

Использование модели RGB

1. Выбираем любой нужный цвет, к которому подберем контрастный, например, оранжевый #FFCC33 (255, 204, 51 в RGB).
2. Мы знаем, что контрастные цвета при смешивании образуют белый цвет. Следовательно, если от каждого компонента белого цвета (числа 255) отнять соответствующий компонент выбранного цвета, получим его контрастную пару.
3. В результате математических операций получаем следующие параметры: 0 (255-255), 51 (255-204) и 204 (255-51). После перевода из десятичной системы в шестнадцатеричную имеем цвет #0033CC.
#FFCC33#0033CC
Использование модели RGB неудобно и приведено лишь для примера. Более простой способ подбора контрастных цветом связан с моделью HSB.
Использование модели HSB
1. Выбираем любой нужный цвет (рис. 3), например, все тот же оранжевый #FFCC33 (45, 80, 100 в HSB).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 3. Параметры цвета в модели HSB
2. Первый параметр, обозначенный буквой H, является оттенком цвета или углом на цветовом круге (по поводу цветового круга как-нибудь в другой раз напишу, но поверьте, удобная вещь). Поскольку контрастные цвета расположены на цветовом круге в 180 градусах друг от друга, легко получить нужный цвет прибавив (или отняв) к значению оттенка число 180 (рис. 4).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 4. Изменением одного лишь параметра Hue можно получить контрастный цвет
3. Вводим значение 225 в поле оттенка (45+180) и получаем новый цвет (225, 100, 80 в HSB). Заметьте, что изменяется лишь один параметр, все остальные остаются прежними.
Примечание
Контрастные цвета, хоть и считаются гармоничными, но слишком "резкие" для восприятия. Исключением является пара черный-белый и желтый-синий цвета. В основном, контрастные пары применяются в рекламе для привлечения внимания. На сайте с большим количеством текстовой информации подобные сочетания лучше не использовать.

Нюансовые сочетания

Нюансовыми цветами называются цвета близкие по оттенку, но различающиеся по насыщенности и яркости.
Первый способ подбора цветов заключается в использовании опять же модели HSB.
1. Выбираем любой нужный цвет (рис. 5), например, темно-синий #000080 (240, 100, 50 в HSB).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 5. Оттенки одного цвета можно получать изменяя параметры насыщенности (S) и яркости (B)
2. Двигая ползунки насыщенности и яркости делаем цвет светлее или темнее в зависимости от необходимости. Оттенок обычно оставляют неизменным, но в небольших пределах можно варьировать и его.
3. Получится следующее (рис. 6).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 6. Получение нового нюансового цвета
Пример использования полученных цветов приведен ниже. Чтобы текст лучше воспринимался, его цвет хорошо бы сделать еще светлее.
Для темного фона текст надо делать светлее, чтобы увеличить контраст для повышения его читабельности.
Еще один способ подбора нюансовых сочетаний предоставляют готовые цвета Pantone (рис. 7).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 7. Pantone предоставляет готовые цвета, которые можно использовать для публикаций
Цвета в палитре Pantone или другой аналогичной, подобраны так, что темные и светлые оттенки близких цветов расположены рядом. Нюансовые цвета из-за этого легко выбирать и они хорошо сочетаются друг с другом. Однако учтите, что Pantone предназначен для вывода в CMYK, поэтому некоторые цвета для вывода на монитор в нем просто отсутствуют. Цветовой охват RGB все же больше, нежели у CMYK, это следует учитывать при использовании Pantone.
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 8. Нюансовые цвета можно использовать и в одежде

Подбор трех цветов

Подбор трех и более цветов проводится аналогично двум, при этом оттенки на цветовом круге размещаются на одинаковом расстоянии друг от друга. То есть весь цветовой круг необходимо разбить на три равных сегмента (рис. 9).
Mgraphics.ru: Дизайн и создание веб-сайтов - Хорошее сочитание цветов. Гармоничное сочитание цветов
Рис. 9. Гармоничные цвета расположены на цветовом круге на одинаковом расстоянии друг от друга
Рассмотрим на примере.
1. Первый цвет выбираем самостоятельно, пусть это будет темно-синий #000080 (240, 100, 50 в HSB).
2. Оттенок следующего цвета должен отстоять от первого на 120 градусов. Последнее число получилось путем деления 360° на три, поскольку оттенки, которые, как мы помним, измеряются в градусах, должны отстоять друг от друга на одинаковый угол.
3. Отнимаем от значения HUE нашего синего цвета число 120. Остальные параметры оставляем неизменными. Получаем новый цвет со значениями 120, 100, 50.
4. Еще раз отнимаем 120 у значения HUE, но уже у нового цвета. Получится 0, 100, 50.
5. В итоге имеем следующие цвета.
#000080#008000#800000
H: 240
S: 200
B: 50
H: 120
S: 200
B: 50
H: 0
S: 200
B: 50
Как видно из таблицы, изменением всего лишь одного параметра HUE, мы получаем набор хорошо сочетаемых между собой цветов.
Если необходимо выбрать четыре цвета, точно также мы разбиваем цветовой круг, но уже на четыре части.

Выводы

1. Цветовая модель HSB легка и проста для понимания, так как базируется на хорошо представляемом цветовом круге.
2. С помощью цветового круга легко управлять оттенками и подбирать наборы гармоничных цветов.


вторник, 1 ноября 2011 г.

9 советов: Как стабильно зарабатывать на веб-дизайне.


1. Определить какие дизайны сайтов вы собираетесь делать (корпоративные, сайты визитки, промо-сайты).
2. Определите для кого будете делать дизайны. (для ночных клубов, ресторанов, детских садиков, продуктовых магазинов и т.п.)
3. Если нет работ в портфолио, то сделать бесплатно 5 дизайнов для друзей, коллег, или просто предложите свои услуги на www.free-lance.ru (лучше конечно 10 работ, но не у всех на это хватит времени и сил).
4. Чётко опишите на каких условиях вы работаете. (Сколько времени требуется на создание дизайна, как и когда производить оплату, по какой схеме вы работаете).
5. Самое главное описываете какую человек получит выгоду от того, что закажет дизайн именно у вас. (Это может быть лицензионная графика, не нарушающая авт.права, работа в узкой нише - знание многих мелочей и т.п.)
6. Если нет заказов, то вбейте в www.yandex.ru те слова, которые вы определили в пункте 2 и найдите 100 некрасивых сайтов. Предложить их владельцам редизайн сайта. (1-2 человека вполне могут согласиться, тут всё зависит от того как грамотно будет составлено коммерческое предложение).
7. Не работаете с мудаками. Если человек парит вам мозг и вы чувствуете что он не собирается ничего заказывать, то сразу же прощайтесь с такими, не тратьте своё время. Клиент должен видеть в вас профессионала и доверяться вам, а не указывать как и что делать. Если он говорит знает как и что делать, а это к примеру будет не гармонично - то пусть сам всё и делает. С такими не работайте.
8. В начале карьеры цены ставьте самые низкие чтобы получить первые заказы. Потом когда у вас настанет такое время что клиенты будут друг другу вас рекомендовать и заказов станет слишком много, вы перестанете справляться - то только в этом случае я рекомендую поднимать цены на свои услуги, иначе можно потерять постоянных клиентов и стабильный (хоть и не большой по началу) доход.
9. Ну и последнее - каждый день отведите 1 час на самообучение. Никогда не переставайте учиться у мастеров и через 5-10 лет вы будете стоять рядом с ними. (вдохновляйтесь работами здесь - www.techdesigner.ru)

там же есть бесплатное видео, книги статьи о постановке и достижении целей, планированию и тайм-менеджменту