- •Физиологические основы восприятия.
- •Угол зрения
- •Типы и архетипы.
- •Архетипы.
- •Прототип
- •Дизайн в разных типах.
- •Стиль на веб-сайте
- •Основные элементы стиля сайта Логотип Модульная сетка Шрифты Цвета Иллюстративный ряд (приемы обработки изображений)
- •Какими же качествами должен обладать логотип?
- •Логотип.
- •Имитация рисунка на компьютере.
- •Живопись традиционными средствами.
- •Живопись масляными красками.
- •Живопись темперой, гуашью и акварелью.
- •Имитация живописи компьютерными средствами.
- •О будущих статьях на эту тему.
- •1. Выбор сюжета для имитации на качественном уровне.
- •Физиологические основы восприятия.
- •Процесс восприятия окружающей действительности.
- •Этапы восприятия.
- •Пропорции.
- •Часть 1.
- •Линейные соотношения
- •Цветовые соотношения.
- •Закономерности тональных соотношений.
- •Обозначение композиционного центра тоном.
- •Процесс восприятия окружающей действительности.
- •Часть 2.
- •Продолжение повести о логотипах вообще и шрифтах в частности...
- •Приемы и способы акцентирования
- •Пример №1.
- •А теперь о терминах.
- •Пример №2.
- •Пример №3.
- •Пример №4.
- •Материал для размышлений.
- •Отсебятина (вместо поскриптума).
- •Постеры
- •Театральная афиша.
- •Коммерческий плакат
- •Постеры
- •Современный постер.
- •Киноафиша.
- •Спортивный плакат-постер
- •Современый рекламный постер.
- •Какого цвета Любовь? IV
- •Какого цвета Любовь?
- •Техника коллажа. Работа со шрифтами
- •Композиционная работа со шрифтом.
- •Композиция
- •Extremальный DeSign II
- •Extremальный DeSign
- •Идея произведения
- •Новизна идеи произведения
- •Состояние
- •Движение
- •Взаимодействие
- •Сотрудничество.
- •Равновесие (сОразмерность)
- •Формальное равновесие.
- •Динамика равновесия
- •Баланс тона
- •Баланс цвета
- •Баланс между консерватизмом и оригинальностью.
- •От простого к сложному.
- •Техника коллажа. Работа со шрифтами II
- •Принципы цветоведения.
- •Какого цвета Любовь? III
- •7. Фиксированные цветосочетания
- •Какого цвета Любовь? II
- •1. Принцип теплохолодности.
- •2. Дополнительные цвета.
- •3. Гармоничные цветосочетания (консонансные)
- •4. Диссонансные цветосочетания
- •5. Кардинальные цветосочетания
- •Взаимосвязь цвета и тона. Насыщенность цвета.
- •Теория соотношений.
- •Теория соотношений. 2
- •Принцип Единства в композиции.
- •Теория соотношений. 3
- •Движение в композиции.
- •Виды движения.
- •Пластический мотив Движение как пластический мотив.
- •Пластический мотив
- •Продолжим наши беседы о тоне и цвете.
- •Модульные сетки в веб-дизайне.
- •Все сначала и по порядку.
- •Общая конструкция страницы.
- •Технологии загрузки информации в блок и обновления информации.
- •Использование фреймов
- •Декор таблиц.
- •Декоративные свойства таблицы.
- •Декоративные свойства ячейки.
- •Ну а теперь старые песни о главном
- •О декоре элементов таблицы пиксельными изображениями.
- •Композиция в коллаже.
- •Каковы же реально его преимущества и возможности?
- •Использование схем в композиции коллажа.
- •Немного о природе форм (и о форме в природе)
- •Но вернемся к коллажу.
- •1. Четкое определение идеи, постановка задачи.
- •2. Определение формата.
- •3. Выбор собственно самой схемы в зависимости от задач.
- •4. Распределение общих масс.
- •5. Определение и настройка ритмического ряда.
- •Композиция в коллаже.
- •Как владеть вниманием зрителя...
- •Композиционные схемы
- •Для чего нужны схемы?
- •Наличие схем в структуре процесса мышления художника.
- •Как обращаться с цветом и тоном в среде?
- •Размышления о тоне
- •Продолжим наши беседы о тоне и цвете.
- •Как обращаться с цветом и тоном в среде?
- •Размышления о тоне
- •К ак обращаться с цветом и тоном в среде? Цвет
- •Из практики создания логотипов...
- •Вариант ручной графики.
- •Техника фотонабора.
- •Использование компьютерной техники.
- •Конкретный пример.
- •Небольшое портфолио
- •Несколько практических советов из личного опыта работы с клиентами.
- •Backgrounds (фоны)
- •Использование битовых заголовков и gif-transparent иллюстраций на белом и цветном фоне.
- •Использование картинки в качестве фона страницы.
- •Смысловая суть картинки-фона.
- •Как выбрать цветовую гамму для дизайна странички или просто цвет фона
- •Ремувер растров.
- •Линия - это уже много...
- •Напомню об основных изобразительных средствах.
- •Свойства линии на уровне задач.
- •Немного психофизиологии.
Конкретный пример.
Создание логотипа ArtDesign. По многим соображения было принято латинское написание логотипа. Для начала был изучен графемно-ритмический ряд логотипа. Все графемы можно разделить на несколько групп с общими визуальными признаками. Треугольник (А, иногда Л, М, V, W), круг (О, С, Э, Ю -смешанный тип), квадрат или прямоугольник (Ш, Н, П....). Выявив ритмические особенности, вы можете пытаться применить определнные шрифты, ассоциативно подходящие по смыслу. Разные по начертанию шрифты будут давать разный ритмический строй. Ну и другие факторы тоже следует учитывать - динамика логотипа, плотность, активность-пассивность и пр...
Анализ графем, общий ритмический ряд, а так же тема основной деятельности фирмы привели к использованию в качестве основы шрифта AvantGarde. Его строгость, выразительность и соответствие структуре логотипа соответствовали задаче.
Следующим этапом является общая компоновка логотипа, поиск акцентных частей, выразительность через символ основной мысли. В итоге из ArtDesign образовался ARTdesign. Основной акцент ставился на слове ART. Перекомпоновка привела к первому рабочему варианту логотипа.
Следующим этапом является проверка логотипа на масштабируемость. И тут выяснилось, что выразительный в нормальных и крупных начертаниях, этот логотип становился безликим и маловыразительным при сильном уменьшении. (Второй задачей проверки на масштаб является проверка сплайновых кривых на "угловатость" и "излом" линии при сильных увеличениях. Использование логотипа в наружной рекламе иногда требует размера символов до метра и более. И вот тогда все огрехи шрифта и трассирования станут видны невооруженным глазом).
Для исправления маловразительности при сильных уменьшениях было введено дополнительное слово. Трехстрочный логотип сразу ожил. Анализ ритмического строя просто радовал глаз. Вот пример анализа круглых элементов.
Такой вариант логотипа нас вполне устраивал. Но логотип не живет сам по себе. Его окружает определенная среда. Плоскость экрана, буклета, бланка или визитной карточки. Более того, логотип оказывает доминирующее влияние на организацию этой среды, поскольку в большинстве случаев является основным акцентным средством, доминирующим элементом в смысловом и визуальном смысле. И данный логотип со всем этим великолепно справлялся. Но...
Но расширение сферы деятельности фирмы на среду традиционной живописи и графики потребовала от логотипа выражения и этих аспектов. Любое внедрение "живописных" элементов, мазков, пятен в логотип либо разрушало его строгий ритм, либо портило общую композицию и выразительность. Было принято решение сделать новый визуальный вариант. В качестве базового был выбран менее "чертежный" шрифт Didona. Не буду по второму разу расписывать ход работы, думаю - понятно из иллюстраций.
Пример совмещенного использования знака обслуживания и логотипа в единой композиции.
Небольшое портфолио
Несколько практических советов из личного опыта работы с клиентами.
1. При получении заказа необходимо тщательно расспросить заказчика о его видении, пожеланиях по поводу логотипа и всего стиля. Зная свою фирму изнутри, ее особенности, он имеет некий желаемый образ логотипа.
2. Не следует предоставлять заказчику для рассмотрения много вариантов, максимум 2-3, тщательно вами продуманных (даже если вы изготовили 50 вариантов). Это не облегчит (как минимум) процесс выбора лучшего варианта. Заказчик вполне может выбрать весьма посредственный, но чем - то близкий ему вариант.
3. Отвергнутый вариант логотипа - достаточно обыденная и реальная вещь. Не стоит огорчаться по этому поводу. Следует расспросить заказчика о недостатках варианта и исправить их в следующей версии, или попытаться найти кардинально новое решение.
4. Не следует позволять заказчику отвергать логотипы по принципу "нравится - не нравится". Требуйте обоснований. Если заказчик не может обосновать отказ, возможно, он сам не знает, чего хочет. Следует поработать с ним на уровне примеров из своего портфолио и других известных логотипов. Нужно уважать клиента, но так же нужно уважать и свой труд.
5. Если вы не можете придти к компромиссу с заказчиком - возможно, вы не тот дизайнер, который ему нужен. Порекомендуйте ему других известных вам дизайнеров (за уровень и качество работы которых вы можете поручиться.)
6. Бывают заказчики, которые достаточно точно "представляют", чего они хотят. Не следует походя воплощать их видения из простого желания заработать деньги. Помимо гонорара вы работаете еще и на свой имидж дизайнера. ("Береги честь смолоду" :o)
7. Если вы чувствуете, что не можете достойно выполнить заказ (а такое бывает даже с очень маститыми профессионалами, хотя и редко) - объясните клиенту причины ваших затруднений. Совместно вы сможете найти варианты решения проблемы с привлечением других дизайнеров. Не стесняйтесь признаться в своих проблемах. НО НЕ ДЕЛАЙТЕ СВОИ ПРОБЛЕМЫ ЧУЖИМИ!!! - в том смысле, что заказчику нет дела до капризов вашего винта, ваших проблем с транспортом и личной жизнью.
Тема - «Акценты».
Что такое расстановка акцентов на странице, в рекламе, в плакате или другом произведении? Любой поток информации, текстовой, графической или любой другой должен иметь способы разделения информации по темам, блокам, по смыслу, по важности информации или еще по каким другим признакам. В тексте это заголовки, подзаголовки, абзацы, отбивки, выключки и др. В живописи и графике - это средства композиции (пятно, ритм, силуэт и др.) В типографике и веб-дизайне это совместные шрифтовые, текстовые и графико-композиционные приемы.
Акценты в шрифтовых композициях
При построении композиции строится некая иерархическая модель композиции, определяется степень важности того или иного элемента, продумывается логика иерархии. На приведенном выше условном примере можно видеть иерахическую расстановку элементов в первом примере и неоправданное стремление заголовков «поменяться ролями» во втором примере.
Типичной ошибкой при создании шрифтовых композиций и рекламных блоков является неверное акцентирование как размером, так и цветом.
Первая картинка представляет собой пример двойного акцента размером и цветом (в данном случае ошибочного - заголовок разваливается на составные части, которые трудно воспринимать как одно целое. Во второй картинке более грамотное применение тех же приемов. Третья картинка - тональный акцент, когда выделяемый объект по тону значительно светлее (в данном случае), чем все остальные элементы и фон, за счет чего он и выделяется.
Второй пример - это вроде как нарушение адресации акцента. Весьма очевидная ошибка, и тем не менее многократно повторяемая как в рекламе, так и в инете. На второй картинке более предпочтительный вариант. А вообще в подобных случаях нужно четко проанализировать, с каким смыслом вы хотите произнесть в рекламе подобную фразу. Что-то вроде «КАЗНИТЬ НЕЛЬЗЯ ПОМИЛОВАТЬ»...
Какие вообще бывают акценты? Средства выделения главного
Размер. Прием, когда основная мысль дается большим (чем другие части композиции) кеглем. Это как раз тот вариант, для которого и разрабатываются акцидентные и наборные шрифты. Все составляющие упорядочиваются по значению, и каждое акцентируется в свяязи с этм порядком. Попробуйте сделать обычный вариант страницы, а потом продумать и расставить нужным образо акценты. Может, что-то придется и поменять.
Цвет. Прием, когда акцент выполняется активным цветом. Очень часто применяется в логотипах. При применении активного цвета следует соблюдать количественные пропорции активного цвета. Обычно это активное пятно и небольшое дополнение подобного или близкого цвета для поддержки. Удачным бывает прием, когда вся композиция выполнена оттенками одного цвета, а акцент - активным контрастным цветом. Можно вспомнить цветовой круг и противоположные цвета, но не следует применять этот прием механически, потому как на фоне синей гаммы оранжевый акцент смотрится впечатляюще, а вот на зеленом фоне красный акцент может раздражать, если выполнен бездумно.
Ритм. Обычно сложная форма из нескольких изображений или элементов, которая и становится мощным акцентом.
Пятно. Прием, выполняемый как в шрифтовых композициях, так и в коллажах.
Акценты в живописи и графике
Выделение главного. Не может в композиции все быть одинаково важным и доминирующим. Глаза разъедутся в разные стороны. Нужно помочь зрителю понять вашу мысль, вашу идею. А для это надо максимально ее выделить, подчеркнуть ее особенности средствами, доступными вам. В портрете это обычно лицо и руки, на лице - это глаза, реже нос или рот (обычно в шаржированных изображениях, гротескных, а также в карикатуре). Хотя художник может даже в портрете подчеркнуть характер персоны через какой-нибудь изображение шарфика или берета, шляпы. Хотя на самом деле на выражение основной мысли работает обычно целый комплекс средств, и важно не разбить действие этого комплекса на несколько задач, тем самым принизив силу их воздействия.
Вот пример, когда отсутствуют «излишние» детали, могущие сместить акцент или увести мысль в сторону. На первом портрете волосы лишь намечены и только подразумеваются. Большое черное пятно в верхнем левом углу может сместить визуальный центр портрета, и может появиться примерно равное соотношение черного и белого на листе, что нежелательно в данном случае, потому волосы даны полунамеком. Для восприятия понятно, а общее впечатление не разрушает. На втором практически отсутствует светотень, что не мешает «видеть» подразумевающийся объем. Интересно акцентирование на третьем портрете. На холодном фоне черный силуэт головы и плеч, на котором «теплое» лицо. Вспомните из прошлых выпусков - при одинаковых параметрах теплое смотрится ближе холодного. В любом случае лицо и руки реально акцентированы.
Жанровые композиции мы рассмотрим позже, когда более детально будем рассматривать ритм, пятно, силуэт и другие приемы и средства композиции. Реально в вебе подобные приемы могут быть применены в составных и изобразительных коллажах.
Акценты в коллажах и составных композициях
Сложные коллажи, с изображениями и шрифтами, нужно проектировать и анализировать по полной программе. Как картинка, так и шрифт в таких коллажах являются равноправными объектами ( в смысле композиции, а не контента), и расстановка акцентов зависит целиком от вашего желания выделить или подчеркнуть то, что вам нравится, или наиболее полно отвечает вашей мысли. Если вы подразумеваете наличие планов в вашей композиции - то следует сразу определить, какой объект к какому плану соотнесен. Если используете ритм - то следует ритмизировать как объекты в группе, так и группы между собой (и не забыть о планах). Обычно основной девиз на переднем плане, но может с таким же успехом находиться и на среднем плане, и на заднем.
" П с и х о л о ги я в о с п р и я т и я " |
|
|
|
Далее мы продолжим наши разговоры о дизайне. Тема «среда».
Под понятием «среда» я имею ввиду не день недели, а то визуальное пространство, образуемое текстом и оформлением странички. Я умышленно не пишу слово «сайт», потому как все сказанное может относиться и к полиграфии, и другим видам дизайна.
Любая страничка, ограниченная со всех сторон либо собственным обрезом, либо рамками броузера, либо паспарту с красивой рамкой, образует некое пространство, в большей или меньшей степени собственым визуальным пространством или плоскостью. Понятно, что пространство в данном случае - понятие достаточно условное, но взгляните на картины Шишкина, Айвазовского и других - чем вам не окно в мир... в свой мир, организованный мыслью и талантом художника. Так же и ваша страничка может организовывать пространство, создавая свой визуальный мир, свою среду.
Самый простой и доступный вариант организации среды странички - плоскостный, часто употребляемый в полиграфии. Объекты находятся примерно в одной плоскости, чаще всего совпадающей с плоскостью самой странички. Как пример - страничка самого «Сталкера». Иногда визуальная плоскость находится немного позади реальной плоскости, что достигается при помощи определенных композиционных приемов и приемов организации пространства (тон, цвет, светотень, псевдообъемы, силуэт и т.д.). Как всегда, мне проще проиллюстрировать на схемах, чем дословно расписывать суть и придумывать массу никому не нужных определений.
На первой картинке - плоскость фона и плоскость изображения совпадают, на второй - уже видна разница в тоне, а на третьей - явная попытка создать псевдоглубину пространства за счет теней и перехлестывания планов. В третьем случае ддостаточно активно видна попытка картинки-объекта как бы прорвать плоскость, сделать окно в свой мир, в котором и живут эти предметы (как бы на некотором расстоянии за плоскостью листа).
Вторая серия картинок - это связь объекта со средой. Если в первом случае объект принадлежит среде, белой плоскости страницы, как бы естественно принадлежит ей, то во втором он имеет уже более самостоятельное значение, отделен от среды рамочкой, образуя как бы минисреду, свою зону. В третьем случае среда сама уже выделяет объект, подчеркивает его собственный белый фон, добавляя ему самостоятельности, акцентируя его.
По большому счету среду образуют такие понятия, как тон и цвет. Слишком большое и необоснованно темное пятно может образовать «дыру» в плоскости вашего листа (страницы), точно так же излишне насыщенный цвет в среде приглушенных может крикливо бросаться в глаза. Особых мерок и линеек в данном случае нет, только ваше чувство меры, ваш вкус.
Правильно организовать плоскость поможет и такое понятие, как цветовая гамма. Это такое цветовое состояние среды, когда цвета близки друг к другу (слышали, наверное - зеленоватая гамма, оранжевая гамма). Посмотрите на баннер Дмитрия Кирсанова и на обложку его книги. Сдержанная сероватая, очень спокойная гамма с редкими теплыми вкраплениями, объекты близки по тону друг к другу. И только название книги акцентировано (как самый главный элемент в композиции, на который и должно обратить основное внимание).
Как обращаться с цветом и тоном в среде? Об этом мы поговорим в следующий раз.
