Взяв вместо примера одну из страниц, сверстанных для журнала "Компьютеры + Программы", попробуем освоить технологию компьютерного макетирования (верстки).


Для позапрошлого выпуска журнала мне пришлось макетировать рекламную страницу, посвященную нескольким новым продуктам компании Xerox. Именно эта страница была выбрана для статьи потому, что на ее примере хорошо видны основные приемы макетирования, которые при верстке журнала приходится применять чаще всего. Основной инструментарий, используемый в этом примере: QuarkXPress, Adobe PhotoShop, Adobe Illustrator.

 

Ноты на пюпитре

 

После редактирования на верстку поступил материал о четырех принтерах компании Xerox для малого и среднего офиса. Организован текстовый материал достаточно просто: заголовок, аннотация, названия принтеров с небольшим слоганом возле каждого, их технические характеристики, список партнеров компании — все в формате DOC. Вместе со статьей — пять рисунков (три TIF и два JPG; рис. 1).


 

Рис. 1. Исходный материал для страницы

 

Настроим инструменты

 

Даже не задумываясь о характере верстки, первым делом пришлось привести все рисунки к необходимому размеру, формату и, по возможности, к примерно одинаковому цветовому звучанию (в этом случае — серо-голубоватому). При ближайшем рассмотрении оказалось, что все изображения хорошего качества, но представлены не совсем “в формате” — вместо требующихся 300 dpi у некоторых было 180 dpi (сняты цифровой камерой), зато они велики: 217 x 145 мм, поэтому преобразовать их в необходимый формат было несложно. На двух из этих фотографий — изображение одного и того же принтера, поэтому вариант с менее удачным ракурсом был забракован. Пульт управления одного из приборов показалс мне немного смазанным — пришлось его выделить и сделать контрастнее. Последний шаг — перевод всех картинок в цветовой режим CMYK и сохранение в формате TIF. Сделано!

 

Часть 1. Allegro

 

Поскольку на рекламной странице крайне желательно присутствие логотипа рекламируемой компании, разработка страницы началась с его поиска в издательской базе логотипов. Так как окончательный размер логотипа на будущей странице пока неизвестен, из нескольких вариантов сразу же был выбран векторный в формате AI Adobe Illustrator, который в данном случае удобен тем, что его можно как угодно масштабировать без потери качества. Именно этот формат приемлем еще и благодаря “прозрачности” областей, не входящих в собственно изображение. Загрузив файл в графический фрейм QuarkXPress, я увидел вместо красных букв логотипа серый прямоугольник с надписью PostScript Picture... Пришлось еще раз “сходить” в Illustrator и конвертировать файл в формат EPS. С логотипом все в порядке. Второе действие при подготовке этой страницы к верстке — изготовление подложки. Дело в том, что все вышеперечисленные текстовые блоки вполне удобно компоновать. За исключением списка технических характеристик — здесь мы сталкиваемся со строками разной длины, необходимостью выделять часть строки полужирным и прочими мелкими дизайнерскими неприятностями.

 

Предвидя, что края текста будут неровными, я решил поместить под весь материал какую-нибудь подложку, которая, вдобавок к цветовому эффекту, зрительно “скрепляла” бы все компоненты. Иде цвета и фактуры подложки пока еще слишком расплывчата. Одно ясно: пора идти в PhotoShop... В PhotoShop’е, в соответствии со всем правилами создания изображения для применения в полиграфии, создаю “пустой” файл величиной 215 x 297 мм (размер страницы до обрезки) и разрешением 300 точек на дюйм в первоначальном режиме RGB. Некоторое врем “любуюсь” его объемами в мегабайтах — 25,5 (а в режиме CMYK будут все 34!) и прикидываю, сколько времени у меня уйдет на предварительную распечатку такой страницы. Прикинув, уменьшаю разрешение до 150 dpi — для подложки в данном случае приемлемо, а на печать уйдет вчетверо быстрее. Да и работать с меньшим файлом “веселей”.


Рис. 2. Фактура подложки (предварительный и окончательный варианты)

 

Поразмыслив, заполняю фон файла не очень резким “шумом” (Filter > Noise > Add Noise) с параметром Amount = 116. К получившемуся фону применяю один из своих любимых (сегодня) стандартных фильтров: Filter > Artistic > Colored Pensil. Здесь приходитс повозиться с параметрами Pencil Width (ставим на максимум), Stroke Pressure (8, чтоб не слишком грубо) и Paper Brightness (9 — пока поконтрастнее. В случае чего контраст уменьшу потом). Через некоторое время, достаточное, чтобы выпить небольшую чашку кофе (даже при объеме файла в 6 Мб), получилс файл с такой фактурой, как на рис. 2а. 


Рис. 3. С логотипом
 

Она не показалась мне удачной, поэтому последнюю процедуру пришлось отменить и повторить еще раз... Примерно к пятому разу (воздадим должное клавишам Ctrl+Z) удалось добитьс приемлемого вида фактуры. Далее подкладываю внизу изображения еще один слой, заливаю его белым цветом, а нашей фактуре устанавливаю процент прозрачности (33%). Работая инструментами Hue/ Saturation и Brightness/Contrast, выделяю из цветового шума желтый оттенок, добиваясь результата, представленного на рис. 2б. Выбранный тон должен приятно контрастировать с красными буквами логотипа, ненавязчиво оттеняя легкую синеву изображений рекламируемых принтеров. Во время работы над фоном мне в голову пришла идея: поскольку в статье описываются четыре прибора, а один из видов логотипа компании представляет собой большую букву “Х”, неплохо бы поместить ее в центре страницы, заполнив пустоты между элементами буквы (которых тоже четыре) текстом и изображениями. Во исполнение идеи с подходящего документа сосканирован и перенесен на подложку новый вариант логотипа (рис. 3).

 

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

 

Часть 2. Moderato

 

Пора переходить к работе в Quark’e. Загружаю в программу макет страницы с предустановленным форматом, полями, наборами абзацных стилей и т. п. Сначала удобно забросить на околостраничное пространство все будущие компоненты страницы — подложку, логотип, текст, изображения. Теперь можно колдовать... Но... Сразу становится ясно, что над картинками еще придется потрудиться, потому что некоторые из них расположены на фоне интерьеров, совершенно не относящихс к делу. Приходится снова уйти в глубокий PhotoShop и n-ное количество времени потратить на “обтравку” всех четырех изображений и их сохранение с “обтравочным” контуром (Path). Не очень приятная, но необходимая операция. В QuarkXPress 4-й версии с такими обтравочными контурами можно работать в формате TIF — очень удобно. Теперь наши изображения выглядят аккуратно вырезанными и хорошо смотрятся на любом фоне (рис. 4). Кроме того, поступает очередное пожелание: убрать с изображени одного из принтеров (см. рис. 1) наклейку New. Это не сложно: копирую кусочек принтера с правого края, монтирую его слева и немножко “подгоняю” по оттенку. Кто теперь скажет, что там была наклейка? Ну, теперь уж осталось самое легкое — сверстать. Работу по компоновке начинаю с заголовка. Логотип по традиции ставлю в правом верхнем углу, а слева помещаю текст ““Продукты2000” от компании Xerox”, назначив ему стиль, используемый для заголовков в журнале.


 

Рис. 4. Один из принтеров с обтравочным контуром

 

Два слова Xerox, одно над другим, режут глаз. Солнцезащитные очки не спасают, и приходится жертвовать одним из Xerox’ов, ставя логотип в название. Звучит лучше, но выглядит мелковато... Решение нахожу не сразу. Разбив заголовок на две строки (блоками) и выделяя его ключевые слова кеглем крупнее (рис. 5а, б, в), тщательно подбираю величину слов. Ниже в отдельный фрейм вставляю аннотацию, применив к ней стиль аналогичного названия. Синий цвет букв, применяемый для аннотаций в нашем журнале, меняю на черный — пестрота здесь ни к чему. Теперь лучше перейти... к концу страницы. Смысл этого тактического приема — сначала расставить по местам блоки попроще, а оставшееся пространство распределить между компонентами, требующими более детальной проработки. Текстовый фрейм “Наши партнеры” легко расположился внизу страницы, текст неожиданно удачно распределился в три колонки. Учитывая внутреннюю смысловую структуру (перечень должен идти только в таком порядке и каждая колонка должна начинаться с названия города), иначе чем приятной случайностью это не назовешь.


 

Рис. 5. Вариации на тему заголовка

 

Поздравляю себя с маленькой удачей и работаю дальше. Идея прежняя: в центре страницы, возле пересекающихс частей буквы Х, вкруг расположить изображения, возле каждого из которых разместить соответствующий текст. Должно получиться интересно. Будет смотреться как хоровод: достаточно свободно и четка структура сохранится — заголовок с аннотацией и нижний блок хорошо “держат” полосу набора... ...И вот тут-то идею, можно сказать, срубили под корень: вдруг узнаю, что на соседней странице будет расположена реклама той же компании! (рис. 6).


 

Рис. 6. Соседняя страница

 

Два одинаковых логотипа размером почти со страницу, расположенные на развороте, выглядят странно... К тому же желтый цвет подложки слишком контрастирует с более спокойной тональностью рекламы... Скрепя сердце, от хоровода пришлось отказаться. Посетовав на превратности жизни, перестраиваюсь на ходу: убираю букву Х, прожившую яркую, но недолгую жизнь на нашей подложке, а оставшийся фон сохраняю в формате Grayscale, решив “раскрасить” его средствами Quark’а. После обновлени графических файлов наша страничка принимает такой вид, как на рис. 7.


 

Рис. 7. Очередной вариант

 

Теперь, уходя от скоплени изделий в центре, на фирменной рекламе, наоборот — размещаю принтеры по краям страницы, стремясь в их шахматном расположении сохранить “симметрично организованный беспорядок”. После этого размещаю оставшийся текст. Провозившись более получаса и сделав несколько дополнительных стилей, понимаю, что если все четыре продукта и поместятся на страницу, то тексты будут не более чем 4-м кеглем. Чтобы прочесть его, к каждому журналу придется прилагать увеличительное стекло. Без крайних мер не обойтись. После недолгих совещаний с отделом рекламы и согласования с заказчиком принято радикальное решение: убрать из рекламы один из четырех аппаратов. Жить стало лучше, но, как часто бывает, решение этой проблемы породило другую: о симметрии на странице придется забыть. Разместить три таких блока в прямоугольном пространстве (обычная дл газетных дизайнеров ситуация) можно только двумя способами (рис. 8).


 

Рис. 8. Немного упражнений по геометрии

 

А принимая во внимание величину блоков и будущее расположение заголовков, остаюсь tet-a-tet с единственным тяготеющим к симметрии вариантом, который и применяю. Работа над каждым блоком информации кропотлива, требует много времени, но большого интереса не представляет: найти оптимальный размер кегля для подзаголовка, слогана и основного текста при шрифте FrizQuadrata, чтобы как можно плотнее заполнить оставшееся пространство; найти приемлемое решение для подзаголовка “Технические характеристики”, который все норовит затеряться среди основного текста; “раскрасить” некоторые слова полужирным; проверить абзацы: нет ли “повисших” предлогов и цифр(* По правилам корректуры и верстки нежелательно, чтобы строка заканчивалась одно-трехбуквенным предлогом, особенно стоящим в начале предложения. Нельзя также отделять (при переносе из одной строки в другую) цифры от последующих слов. — Прим. ред.); потщательнее “подогнать” изображени к тексту; уменьшить кегель шрифта в аннотации, чтобы текст хорошо “лег” в строки и т. д., и т. п. Далее, чтобы визуально разделить три блока, решено отказаться от линеек между ними в пользу белых рамочек с закругленными углами (поскольку цвет белый, толщину даем побольше — 1,5 пункта). Так оказалось гораздо интереснее — принтеры, имея обтравочный контур, изящно выступают за границы рамок. Не забываю закрасить нашу подложку в едва заметный бледно-зеленый тон. Справившись с последней трудностью — рамка одного блока “наползает” на рамку другого — и в который раз нажав Ctrl+S, отправляю страницу на печать. Наконец-то есть время немного посмотреть в окно...

 

Часть 3. Andante. Coda

 

Даже на предварительной распечатке сразу видны огрехи, незаметные на экране из-за особенностей дисплеев (ограниченное пространство, разрешение). Поэтому после вычитки, исправив опечатки и внес добавления, исправляю и некоторые ошибки компоновки. Последние штрихи: добавляю осветленную (50%) подложку под блок “Наши партнеры” внизу страницы, подчеркиваю названия городов, чтобы смотрелись четче. А заключительный аккорд — прочерчивание вверху страницы тонкой (0,4 пункта) черной линии, упирающейся во все ту же роковую букву Х, — ставит общий заголовок на место.

 

Аплодисменты?

 

Работа сделана. Разумеется, на этой страничке (рис. 9) есть еще поле для экспериментов. Можно, например, поместить на подложку тени (темные или светлые) от изображений, поработать над рельефностью нижнего блока, но все это требует времени. Ведь это только одна из восьмидесяти, и притом не самая сложна страница ежемесячного журнала “Компьютеры + Программы”... 


Рис. 9. Готовая страничка

 

От редакции

 

Сегодня, в пору расцвета всяческих курсов “компьютерной грамотности”, старожилы ИТ часто не без гордости говорят: “Ну а мы это сами осваивали…”. Оставив пока в стороне дискуссию о том, как (и чему) нужно учиться в наше “компьютеризованное” время, отметим лишь, что, говоря “сами осваивали”, в большинстве случаев не подразумевают “борьбу” с компьютером один на один. Чаще всего кто-то рядом уже умел работать и неоценимую помощь в освоении оказывали не только (а быть может, и не столько) его консультации, сколько возможность наблюдать за тем, как работает уже освоивший технологию человек. Чаще всего, просто подглядев, что можно сделать, и побродив по Help’ам, уже несложно понять, как это сделать. И вот сегодня нашим читателям представляется возможность “заглянуть из-за плеча” на работу опытного верстальщика. Думается, это будет полезно даже тем, кто не собираетс заниматься версткой: ведь так или иначе готовить документы на компьютере приходится большинству из “племени” пользователей ПК (разве что совсем юные “геймеры” избавлены от этого). Представление о том, как готовитс печатная страница, поможет и создавать свои “творения”, и понять, где граница, за которой к работе должны приступать профессионалы.

 

Автор выражает признательность И. Л. Щуру за многочисленные консультации при работе и нечаянную подсказку идеи написания этой статьи.

2004.11.05
19.03.2009
В IV квартале 2008 г. украинский рынок серверов по сравнению с аналогичным периодом прошлого года сократился в денежном выражении на 34% – до $30 млн (в ценах для конечных пользователей), а за весь календарный год – более чем на 5%, до 132 млн долл.


12.03.2009
4 марта в Киеве компания Telco провела конференцию "Инновационные телекоммуникации", посвященную новым эффективным телекоммуникационным технологиям для решения задач современного бизнеса.


05.03.2009
25 февраля в Киеве компания IBM, при информационной поддержке "1С" и Canonical, провела конференцию "Как сохранить деньги в условиях кризиса?"


26.02.2009
18-19 февраля в Киеве прошел юбилейный съезд ИТ-директоров Украины. Участниками данного мероприятия стали ИТ-директора, ИТ-менеджеры, поставщики ИТ-решений из Киева, Николаева, Днепропетровска, Чернигова и других городов Украины...


19.02.2009
10 февраля в Киеве состоялась пресс-конференция, посвященная итогам деятельности компании "DiaWest – Комп’ютерний світ" в 2008 году.


12.02.2009
С 5 февраля 2009 г. в Киеве начали работу учебные курсы по использованию услуг "электронного предприятия/ учреждения" на базе сети информационно-маркетинговых центров (ИМЦ).


04.02.2009
29 января 2009 года в редакции еженедельника "Computer World/Украина" состоялось награждение победителей акции "Оформи подписку – получи приз!".


29.01.2009
22 января в Киеве компания "МУК" и представительство компании Cisco в Украине провели семинар для партнеров "Обзор продуктов и решений Cisco Small Business"

 

 
 
Copyright © 1997-2008 ИД "Комиздат".