Создание обложки электронного учебника «Типографика и вёрстка»

Издательство Артёма Горбунова выпустило первую книгу — практическое руководство по типографике и вёрстке. Для книги придумали обложку, которая иллюстрирует основное содержание книги, из чего она состоит.

Эскиз обложки

Главные герои книги — схемы вёрстки, поэтому покажем их на обложке. Хочется показать схемы, висящие в воздухе. Вдохновляемся примерами:

В постановочной фотографии больше жизни, деталей и кайфа — выбор очевиден.

Постановочная фотосъёмка требует много времени и предварительной подготовки. Время — невосполнимый ресурс. Не видя чёткого конечного результата мы рискуем потратить очень много времени на корректировку или полную пересборку постановки, не говоря про ретушь.

Начинаем с эскиза, прикидываем, как могут располагаться схемки. Фон красим фирменным красным цветом школьной дисциплины по типографике и вёрстке. Чтобы различать варианты расположения схем, между собой называем их «карусель» и «фронтальный»:

Примеряем название, уменьшаем количество схем, укрупняем, ищем расположение заголовка, подбираем формат книги:

Выбираем два варианта и подправляем пропорции книги:

Параллельно делаем тестовый снимок, пристреливаемся, ставим свет, смотрим тени на подопытной открытке:

На этом этапе важно понять масштаб — какого размера будут схемки, как они будут зависать в воздухе и на чём будут крепиться.

В книге используются модифицированная сетка Ван де Граафа — двенадцатичастная. Синхронизируем поля с обложкой, уплотняем схемы и приводим их к единому виду:

Тонкие текстовые строки всё ещё слишком чёрные — высветляем. Поправляем разделители и рамки, приводим в порядок весь набор схем:

Финальные штрихи — исправляем сомнительные места и расстояния:

Приступаем к съёмке.

Фотосъёмка

Думаем над конструкцией, выбираем материалы — пенокартон в качестве основы конструкции, проволоку и нитки:

Проволока — гнётся, слишком непредсказуемая. Легко погнуть и очень сложно выпрямить, поэтому берём нитки.

Раскладываем схемки, прикидываем габариты будущего кадра:

Думаем, на каком расстоянии друг от друга и фона должны располагаться схемы и какое фокусное расстояние объектива выбрать, чтобы соответствовать эскизу:

Собираем конструкцию из пенокартона и натянутых : размечаем «потолок» и «пол», через проделанные отверстия протягиваем нитки. Натягиваем нитки, потолок крепим к верхнему краю деревянного планшета с фоном, пол прижимаем грузом:

Конструкция готова — пора вешать схемы. Чтобы правильно повесить схемы и добиться глубины как на картинке, подбираем фокусное расстояние и дистанцию от камеры до постановки.

Сначала вешаем центральную колонку, в которой схемы стоят рядом и находятся в одном «глубинном» слое. Затем вешаем остальные схемы относительно центральной колонки. Периодически поглядываем в объектив и сверяемся с эскизом.

Ставим свет, ищем направление и характер теней:

Смягчаем тени: вешаем на лампу рассеиватели — кальку и бумагу. Свет, отражённый от интерьера, используем как заполняющий — он подсвечивает тени:

Пробуем развесить схемы с поворотами и наклонами:

Не подходит, возвращаем фронтальные схемки:

Поднимаем карточку, чтобы улетала за пределы обложки, пробуем другую:

Вдобавок, у карточки всё ещё нет ощущения полёта. предлагает развернуть карточку в пространстве, чтобы создать эффект свободной левитации.

Переснимаем постановку с летающей карточкой, правим вёрстку:

разной дальности слоёв со схемками получается искажение размеров. Дальний и средний слой практически одинаково затенены и визуально сливаются в один слой, а разная ширина колонок выглядит как случайная ошибка. Немного корректируем постановку, переносим средний слой на дальний:

: Фотка ракурса реально взрывает мозг. Очень хочется передать эту крутизну на обложке

анимацию из фотографий:

Выглядит круто, но как это показать на самой обложке?

предлагает сделать голограмму — вместе с поворотом книги поворачивается и композиция, словно мы посмотрели сбоку.

Очевидно, что — слишком долго, на очистку и ретушь каждого кадра уйдёт много времени, а результат может обмануть ожидания.

На помощь приходит . Чтобы сразу увидеть результат собираем тестовую сцену в 3ДМаксе и рендерим варианты анимации поворота:

Придумываем анимацию с открытием обложки электронной книги:

даёт добро. Миша Нозик даёт корешок книжки. Разбираем фотографию по слоям, отдельно переснимаем чистый фон, а падающие тени забираем из 3Д реконструкции:

Собираем слои и отдаём программисту. Миша экспериментирует с тестовыми наработками программиста:

Эффектно! Превращаем эксперимент в картинку для главной страницы бюро.

Пишем рассказ о создании обложки. Перечитываем и понимаем — когда превращали фотографию в обложку, схемки и фон стали хуже, пропала «живость» фотографии. Сравниваем:

Откатываемся на шаг назад и меняем схемки и фон на всех обложках. Готово.