- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Пластмассовый призрак
Как и фотографика, генерируемые компьютером изображения трехмерных объектов служат дешевым и неисчерпаемым источником особой разновидности текстур. «Трехмерные» текстуры родственны фотографическим, но из двух характерных признаков последних — изобилия плавных переходов цветов и размытых цветовых границ — трехмерная графика заимствует только первый. В типичном трехмерном изображении нет недостатка в светотеневых градиентах, но столь характерная для фотографии «глубина резкости» (расфокусированность на слишком близких и слишком далеких от наблюдателя объектах) отсутствует напрочь. В сочетании с характерной гладкостью и «пластмассовостью» самих виртуальных объектов эта особенность трехмерной графики становится ее основным недостатком с точки зрения как профессиональных дизайнеров, так и просто людей, не лишенных художественного вкуса.
Отсутствие фотографической «мягкости» и трудоемкость моделирования аморфных, органических по форме объектов сильно ограничивают творческий потенциал этого графического жанра. Разумеется, недостатки эти не непреодолимы, и очевидно, что сейчас трехмерные графические программы развиваются прежде всего в направлении моделирования все более сложных органических форм. Пока же мы с вами являемся свидетелями подзатянувшейся паузы, когда первоначальное увлечение трехмерностью как технологическим феноменом прошло, а принципиально новых средств
293
выражения, которые бы позволили придать этому жанру привкус творческой, а не только технической новизны, еще не появилось. Более того, современный дизайн, похоже, движется в совершенно противоположном направлении, все больше входя во вкус плоскоцветных форм, выразительной рукотворной аморфности (стр. 270) и живописных текстур (стр. 289).
Помимо всего прочего, трехмерные изображения в роли декораций плохо сочетаются с насыщенными информацией элементами дизайна. Осмысленного противопоставления трехмерной графики и двумерного текста не получается — глаз отказывается воспринимать обычную плоскую графику как нечто «лишенное» одного измерения и потому противостоящее расположенной рядом объемной графике. Вместо контраста мы получаем разнобой, только усиливающийся из-за того, что источником большинства трехмерных кнопок, иконок и прочих украшений на любительских страницах служат бесплатные коллекции веб-графики (стр. 153), нещадно эксплуатирующие трехмерную моду и вносящие в нее неизбежный компонент эклектики и безвкусицы.
Скульптура или барельеф
Кроме «настоящей» трехмерной графики, генерируемой специальными программами по описанию формы объекта и условий его освещения, на многих страницах можно встретить гораздо более скромную по запросам и простую по исполнению «подделку» под трехмерность в виде бликов и падающих теней у букв, заголовков, кнопок, навигационных панелей и т. п. При определенном навыке все эти красоты без труда создаются в любом растровом редакторе (чаще всего в Photoshop), и премудростям этого ремесла посвящено огромное количество книг, статей и сайтов (например, www.cooltype.com ).
Интересно сравнить такого рода «барельефную» трехмерность с висящей в воздухе трехмерностью «скульптурной» (пожалуй, правильнее даже называть ее «архитектурной», так как законы перспективы для нее куда важнее, чем натуральность форм). Оба вида трехмерности с выгодой пользуются широтой цветового диапазона компьютерного экрана — на бумаге невозможно получить такие ослепительные блики (вспомним, что поверхность экрана сама излучает свет) и такую глубокую, бархатную черноту, благодаря которым экранная картинка выглядит намного «стереоскопичнее» по сравнению даже с самой высококачественной печатью на
Рис. 75
«Скульптурная» (а) и «барельефная» (6) разновидности трехмерных изображений
294
бумаге. Однако с точки зрения информационного дизайна скульптурная и барельефная разновидности трехмерной графики демонстрируют весьма различные диапазоны применимости.
В защиту барельефа нужно сказать прежде всего то, что он не игнорирует плоскость страницы — тени всех объектов падают обычно именно на эту плоскость, и все выпуклости и вогнутости отсчитываются от «нулевого уровня», на котором расположен основной текст и графика. Благодаря этому страница с барельефной трехмерностью может иметь вполне приемлемый уровень цельности и единства — выпуклая графика и плоский текст составляют осмысленно контрастирующую пару. Если «скульптуру» выгодно подавать в движении, с применением анимации (в целом противопоказанной информационному дизайну, см. стр. 76), то «барельеф» по определению статичен и потому хорошо работает именно в декоративных, второстепенных по информационной важности элементах.
Как я уже упоминал, в наши дни любая трехмерная графика пользуется необычайной популярностью у дизайнеров-любителей и многочисленных энтузиастов компьютерной графики. Однако если вращающийся «архитектурный» заголовок редко увидишь на хоть сколько-нибудь прилично оформленной странице, «барельефные» эффекты довольно часто встречаются и на страницах профессиональных дизайнеров. К сожалению, даже у очень талантливых художников увлечение бликами и тенями иногда заслоняет другие аспекты дизайна, — ослепленный игрой светотени, автор перестает замечать, сколь бедны и неинтересны цвета и формы в его работах (именно это я имел в виду, говоря о «текстурщине» на стр. 122).
Совет здесь можно дать только один: даже если соблазн «вспучить и подсветить» хоть что-нибудь на странице непреодолим, отложите все эти (растровые по сути) эффекты на самый последний этап работы и не переходите к ним, пока не убедитесь, что страница выглядит безупречно в строго плоскоцветном, векторном варианте. Потратив достаточно времени и сил на поиск и уравновешивание форм, цветов и шрифтов, в конце концов вы, вполне вероятно, придете к выводу, что ваше творение только проиграет от введения каких бы то ни было «барельефов». Не стоит также забывать, что любые сложные текстуры, к которым относится и трехмерная графика, неизбежно
295
раздувают объем графических файлов и, следовательно, увеличивают время загрузки страницы.