- •Физиологические основы восприятия.
- •Угол зрения
- •Типы и архетипы.
- •Архетипы.
- •Прототип
- •Дизайн в разных типах.
- •Стиль на веб-сайте
- •Основные элементы стиля сайта Логотип Модульная сетка Шрифты Цвета Иллюстративный ряд (приемы обработки изображений)
- •Какими же качествами должен обладать логотип?
- •Логотип.
- •Имитация рисунка на компьютере.
- •Живопись традиционными средствами.
- •Живопись масляными красками.
- •Живопись темперой, гуашью и акварелью.
- •Имитация живописи компьютерными средствами.
- •О будущих статьях на эту тему.
- •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 иллюстраций на белом и цветном фоне.
- •Использование картинки в качестве фона страницы.
- •Смысловая суть картинки-фона.
- •Как выбрать цветовую гамму для дизайна странички или просто цвет фона
- •Ремувер растров.
- •Линия - это уже много...
- •Напомню об основных изобразительных средствах.
- •Свойства линии на уровне задач.
- •Немного психофизиологии.
Backgrounds (фоны)
Вообще-то на эту тему написано много хорошего и полезного. Но я постараюсь взглянуть немного иначе на это дело. Есс-но, речь пойдет о психологии восприятия и некоторых моментах, возникающих из этого аспекта.
Начнем с самого простого. Кодовые фоны, получаемые при помощи bg color... Самый простой и естественный фон - белый. Он напоминает цвет листа бумаги, помогает в полной мере выявить цвета и тона фотографий, иллюстраций, подчеркнуть особенности применямых вами шрифтов.
Но даже в таком, самом простом случае есть некоторые тонкости, как технические, так и психофизические. Первая - это просто забывчивость некоторых веб-мастеров в определении БГ страницы. Если в настройках тест-броузера по умолчанию стоит белый фон, то и при такой забывчивости он тоже будет белым. А у посетителя defoult bg может оказаться и просто серым (что страшно, в общем-то в основном для общей идеи вашего дизайна, и ваших картинок, которые могут оказаться немного чуждыми другому фону), а может оказаться и совсем другим, ну мало ли... Поэтому цвет фона страницы лучше всего задавать принудительно.
Второй важный момент относительно белого фона страницы - цвет шрифта. Если текст не очень велик, да еще рассредоточен на блоки с помощью пауз и иллюстраций - то вроде бы и нормально. Но на больших текстах (150 кб и более) глаза начинают уставать, так как задан наибольший контраст. Это происходит даже при длительном чтении с бумаги, а ведь бумага светит только отраженным светом в отличие от монитора... Простой выход - уменьшить контраст между шрифтом и фоном, сделав шрифт не чисто черным, а немного сероватым. Впечатление останется тем же, а напряжение на глаза немного уменьшится. Такой прием я применил на сайте журнала "День и Ночь", имеющего достаточно внушительные размеры печатаемых в нем повестей и рассказов. Как мне кажется - прием себя полностью оправдал.
Снизить контраст можно и за счет фона (ввести слегка серый или подцвеченный фон). Этот вариант используется настолько часто, что примеры на виду в больших количествах. Проблемой может стать илишне активный цвет фона, так называемый "открытый" цвет. Чисто желтый, ярко-красный, да и практически любой другой открытый цвет (если это не обусловлено дизайнерскими задачами, но в таких случаях обычно не бывает больших текстовых объемов). Решение давно найдено - слегка подцвеченные фоны, более благородно, снижает контраст и не утомляет глаза.
Использование битовых заголовков и gif-transparent иллюстраций на белом и цветном фоне.
Если вы используете картинку-заголовок или Gif-картинку с прозрачным фоном, следует обращать внимание на благополучный контакт края видимого изображения с фоном (так называемая антиалиасинговая зона). Как эта зона образуется, и как этим пользоваться?
При выполнении графического заголовка с включеным antialiased Photoshop производит полупрозрачный переход от контура символа до нуля через несколько пикселов, образуя тем самым мягкий переход от тона к фону. На цветном фоне (картинка 1) полупрозрачные пикселы принимают цвет фона, и при сохранении в gif-transparent остаются цветными. На странице с фоном того же цвета они обеспечивают тот самый мягкий переход, но если эту же картинку-заголовок поместить на фон другого цвета - они выделятся в самостоятельную зону без связи с фоном (картинка 2). Поэтому лучше графический заголовок выполнять сразу на нужном фоне, а потом при сохранении в Gif фон можно сделать прозрачным (картинка 3). Приходится выбирать между универсальностью и качеством (я бы выбрал качество :o). Особенно этот прием пригодится в том случае, когда в качестве БГ вы применяете паттерн или просто картинку на весь экран.
