- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Аспекты логотипа
Нам остается рассмотреть особенности применения в логотипах основных дизайнерских материалов (стр. 77). Положительные рекомендации, которые можно дать желающему попробовать себя в создании логотипов, немногочисленны и весьма общи. С другой стороны, жанр этот налагает на дизайнера немало конкретных и довольно жестких ограничений, которые удобнее всего классифицировать по перечисленным в гл. II аспектам дизайн-композиции.
Форма
Как я уже говорил, форма в логотипе — главный носитель информации как в художественном, так и в смысловом ее аспектах. Форма графики в логотипе, как правило, должна быть заметно проще очертаний расположенных в том же знаке букв текста; «скрытый смысл» знака, хотя и не должен сразу же бросаться в глаза, не может прятаться в тех особенностях формы,
(а)
Microsoft
(б)
Рис. 63
Чисто графические (а) и чисто текстовые (6) логотипы, как правило, не богаты «скрытым смыслом», но некоторые из них становятся важной частью окружающего нас дизайн-ландшафта благодаря неутомимой деятельности их владельцев
270
которые обнаруживаются только с помощью линейки или транспортира. Важно также помнить о принципе ограничения пропорций сверху (стр. 83) — принципе, особенно актуальном именно для логотипов, которым приходится работать в разных, в том числе и очень мелких, размерах.
Это не значит, конечно, что в логотипе не должно быть нюансировки (стр. 171), — наоборот, нюансы, компенсирующие всевозможные иллюзии восприятия, необычайно важны именно для логотипов, которые обязаны оставаться безупречно правильными и при беглом взгляде, и при сколь угодно долгом рассматривании. Более того, в особо ответственных случаях приходится делать версии одного логотипа с разными наборами нюансов, предназначенные для разных размеров или разных цветовых решений. Так, логотип AT&T (рис. 67 на стр. 275) существует в нескольких вариантах для разных размеров и для позитивного (темным по светлому) и негативного (светлым по темному) начертаний; эти варианты отличаются количеством и формой горизонтальных полосок, из которых складывается изображение шара.
По адресу www.att.com/identity/stantlards/graphic/ сама фирма AT&T дает всем заинтересованным дизайнерам очень детальные и поучительные инструкции: как выбрать один из вариантов логотипа, какие схемы его раскраски допустимы, как правильно разместить знак на странице, и даже — какие ошибки типичны для дизайнеров, работающих с этим логотипом...
Хотя абстрактность (в достаточно широком понимании) для логотипа обязательна, она не ведет к ограниченности репертуаром фигур школьной геометрии. Поскольку набор таких фигур и их комбинаций невелик и почти исчерпан, приметой современности стали логотипы, смело отбрасывающие каноны прямолинейности и геометрической простоты и стремящиеся вместо этого к простоте психологической, которая прекрасно уживается с аморфностью (стр. 100). Так, логотип фирмы Lucent Technologies (рис. 64) представляет собой, несмотря на всю натуралистическую экспрессию и далекую от идеального круга форму «мазка кистью», не менее абстрактную реализацию идеи круга, чем самый что ни на есть математически правильный круг.
Конечно, далеко не любая аморфность способна быть носителем абстрактного начала. Более того, не случайно
Lucent Technologies
Рис. 64
«Красное колесо» фирмы Lucent призвано символизировать оригинальность и новаторский дух ее разработок
271
Рис. 65
Эмблемы олимпийских игр всегда были характерными представителями дизайна своего времени
именно бесформенность в сознании непрофессионала выступает как прямая противоположность традиционно понимаемой геометрической символике. Рискну предположить, что единственное свойство, позволяющее подчеркнуто антигеометричной аморфной фигуре выполнять функцию абстрактного символа, — это рукотворность, безошибочно опознаваемая искусственность, «след руки» художника. Рукотворная аморфность всегда несет привкус небрежности, торопливости, особой грубоватой эстетики. Но до тех пор, пока в характере формы рукотворная экспрессия доминирует над безлично-натуральными проявлениями расплывчатости, размытости или разбрызгивания, простота этой формы определенно работает на общее ощущение символизма. Можно сказать, что искусство логотипа, повторяя в общих чертах эволюцию других изобразительных искусств, прошло за последние десятилетия путь от барокко вензелей и виньеток, через аскетизм раннего авангарда («Черный квадрат» Малевича), к свободе и нарочитой небрежности абстрактного экспрессионизма (полотна Поллока и Ротко).
Пожалуй, единственная форма, удовлетворяющая требованию рукотворности и притом достаточно интересная визуально, — это имитация мазка грубой кистью, образец которой мы и видим в логотипе Lucent. Менее удачный пример — лепестки цветка на официальной эмблеме Олимпиады в Нагано (рис. 65), несущие явственный элемент аморфности и хаотичности, но именно из-за отсутствия рукотворного начала едва вытягивающие на роль логотипа. Формы эти не есть абстракция цветка, а лишь в какой-то мере стилизованное его изображение. Обратите также внимание, что аморфность формы ни в коем случае не должна распространяться на текстурный аспект графики: если геометрически более простые формы допускают использование двух и более цветов, то аморфные объекты обязаны компенсировать сложность очертаний строгой одноцветностью, а нелинейность их контура не должна сочетаться с какой бы то ни было размытостью или неоднородностями внутри поверхности. С этой точки зрения серые тени под разноцветными лепестками в эмблеме Нагано хотя и не пользуются размытостью, как подобало бы падающим теням, тем не менее ведут к еще большему «дребезжанию» композиции, делая ее едва ли пригодной на роль знака.
272
Шрифт
Требование цельности и простоты делает практически невозможным создание логотипа с участием двух и более разных шрифтов. Единственное исключение — чисто текстовый логотип, в котором отсутствие графики позволяет сконцентрироваться на сложных отношениях пары контрастирующих шрифтов (как в заголовке журнала «Internet», см. рис. 36, а на стр. 137). В то же время разные части текста знака могут противопоставляться по цвету или начертанию одного и того же шрифта; обычно отношения между элементами текста как-то координируются с отношениями внутри графической части знака. Как вы уже знаете, самая естественная вариация начертания — изменение насыщенности рубленых (стр. 125), и именно пара начертаний обычной и повышенной насыщенности одного рубленого шрифта — одно из самых употребительных шрифтовых решений в современных логотипах.
Хотя у рубленых шрифтов есть важное преимущество читабельности в малых кеглях и хорошей сочетаемости с любой графикой, вполне приемлемы в логотипах и простые по рисунку и прозрачные для восприятия (стр. 129) шрифты с засечками. Нужно лишь учитывать, что эти последние налагают более суровые ограничения на графическую часть знака: чтобы контраст между текстом и графикой звучал достаточно отчетливо, форма не должна содержать сложных криволинейных контуров и мелких деталей (рис. 66). С рублеными же шрифтами требование это не столь категорично, и нередко можно видеть даже примеры «перевернутого» контраста, когда формы графической части кажутся явно сложнее очертаний рубленых букв (как в логотипе Lucent на рис. 64, в котором из-за насыщенности графики мелкими деталями никакой шрифт с засечками не смог бы ужиться).
Что же касается декоративных шрифтов (стр. 125), которые, казалось бы, просто созданы для логотипов, те же самые законы единства заставляют пользоваться ими с большой осторожностью — и, скорее всего, только для чисто текстовых логотипов, в которых особенности начертаний букв могут стать единственным графическим мотивом, отчасти заменяющим отсутствующую графику. Если же необычный шрифт сопровождается графическими формами, эти последние не должны быть
Рис. 66
Использование в логотипе шрифта с засечками требует от графической части особой лаконичности
ни сложными, ни простыми, а должны в точности соответствовать по характеру рисунка самому шрифту, буквально «вырастать» из него. Удачные примеры логотипов с декоративными шрифтами крайне немногочисленны — даже при тщательном соблюдении единства стиля графики и текста результат, скорее всего, на современный взгляд будет казаться несколько вычурным и нарочитым.
В употреблении строчных и заглавных логотипы следуют общей тенденции — стиль «все строчные» в большинстве случаев выглядит более современно, чем выделение заглавной первой буквы названия и тем более первой буквы каждого слова. Стиль «все заглавные» выглядит на этом фоне привлекательной золотой серединой, особенно если учесть, что благодаря отсутствию выносных элементов надпись заглавными буквами легче стыкуется с графикой. Из других параметров набора текста изредка применяются вариации кернинга, чаще всего тесное сближение и даже частичное наложение букв друг на друга. Все сказанное на стр. 139 о недопустимости изменений пропорций текстовых строк в полной мере относится и к логотипам. Помните, что в этом жанре у вас есть шанс создать нечто гораздо более долговечное, чем обычная дизайн-композиция, — так что стоит ли соблазняться дешевыми приемами?
ет. Я уже упоминал, что хороший логотип не должен существенно зависеть от цветового аспекта. Нельзя, конечно, требовать, чтобы знак хорошо смотрелся при любой взятой с потолка раскраске, но во всяком случае он должен сохранять узнаваемость и художественные достоинства не только с подобранным дизайнером цветовым решением, но и в серой шкале, а в идеале и в двухцветном черно-белом варианте.
Большинство логотипов используют только один цвет на все элементы или же два цвета, один из которых — черный или белый. Существенно реже встречаются композиции с двумя контрастирующими или поддерживающими друг друга «цветными» цветами (стр. 110). В логотипах нельзя пользоваться неочевидными оттенками — слишком темными, слишком светлыми или слабо насыщенными, так как их характерные особенности вряд ли выживут при многочисленных трансформациях, через которые придется пройти вашему логотипу.
274
Наконец, нужно также учитывать цветовой охват модели CMYK (стр. 63) — даже если вы делаете логотип для веб-сайта, вполне вероятно, что заказчик захочет потом распечатать его, безнадежно испортив слишком яркий и насыщенный цвет, принципиально невоспроизводимый на бумаге.
Но и это не все. Еще одно цветовое ограничение носит, пожалуй, субъективный характер, однако не становится от этого менее серьезным. Логотип, который должен быть по возможности замкнутым и самодостаточным объектом, отторгает многие тона цветового спектра из-за их открытости, обращенности к зрителю, явственно ощущаемого потенциала развития и, следовательно, неустойчивости. Это относится в первую очередь к теплым тонам, которые у большинства зрителей ассоциируются с объектами живыми, органическими и потому противостоящими тому абстрактному началу, которое лежит в основе любого логотипа. Собственно говоря, при строго традиционном подходе к выбору цвета допустимым оказывается лишь один-единственный цвет — синий и его ближайшие соседи по цветовому кругу.
Конечно, никто не мешает вам попробовать для вашего логотипа какой-нибудь необычный, подчеркнуто «несиний» цвет. Однако предлагать этот цвет в качестве окончательного можно лишь в том случае, если вы знаете, что вы сами будете работать с этим логотипом на страницах сайта и, следовательно, сможете позаботиться об активной поддержке цвета знака в цветовой гамме всей композиции. Кроме того, приготовьтесь к возражениям со стороны заказчика, которые почти наверняка вызовет у него любой цвет, кроме синего. Я бы рекомендовал поэтому отложить цветовое решение до окончательного согласования формы знака, а для первоначального представления заказчику ваших вариантов пользоваться только шкалой серых и синими тонами.