Макет страницы - Page layout

Потребительские журналы спонсируют рекламу и обложки в значительной степени полагаются на профессиональные навыки верстки страниц, чтобы конкурировать за визуальное внимание.

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

Макет страницы высокого уровня включает выбор общего расположения текста и изображений и, возможно, размера или формы носителя. Это требует интеллекта, сообразительности и творчества, и основывается на культуре, психологии, а также на том, что авторы и редакторы документов хотят сообщить и подчеркнуть. Пагинация на нижнем уровне и набор текста - это более механические процессы. С учетом определенных параметров, таких как границы текстовых областей, гарнитура и размер шрифта, предпочтение выравнивания может быть выполнено простым способом. Пока настольные издательские системы не стали доминировать, эти процессы все еще выполнялись людьми, но в современных издательских системах они почти всегда автоматизированы . Результат может быть опубликован как есть (как для внутренней телефонной книги ) или может быть изменен графическим дизайнером (как в случае изысканной и дорогой публикации).

Начиная с ранних иллюминированных страниц в переписанных вручную книгах Средневековья и кончая замысловатыми современными макетами журналов и каталогов, правильный дизайн страниц долгое время считался важным в печатных материалах. С печатных средств массовой информации, элементы , как правило , состоят из типа (текст), изображения (картинки), а иногда и место-держатель для графических элементов , которые не печатаются с чернилами , такой как матрица / лазерной резки , тиснение фольгой или блинтовым тиснением .

История и технологии верстки

Прямая настройка физической страницы

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

При древней печати на ксилографиях все элементы страницы были вырезаны непосредственно на дереве, хотя позже может потребоваться принятие решений по макету, если печать будет перенесена на более крупную работу, такую ​​как большой кусок ткани, потенциально с множественными оттисками блоков.

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

Исходный документ будет рукописной рукописью; если набор был выполнен кем-то, кроме художника по верстке, в рукопись будет добавлена разметка с инструкциями относительно гарнитуры, размера шрифта и т. д. (Даже после того, как авторы начали использовать пишущие машинки в 1860-х годах, оригиналы все еще назывались «рукописями», и процесс разметки был таким же.)

После первого раунда наборного, камбуз доказательство может быть распечатан для того , чтобы корректура должна быть выполнена, либо исправлять ошибки в оригинале, или сделать уверен , что наборщиком скопировал рукопись правильно, и правильно интерпретировать разметку. Окончательный макет будет иметь «форму» или «форму» с использованием кусков дерева или металла (« мебель ») для разнесения текста и изображений по желанию, рамки, известной как погоня , и объектов, которые блокируют рамку. известный как quins . Этот процесс называется наложением и потенциально включает размещение нескольких страниц для печати на одном листе бумаги, который позже будет сложен и, возможно, обрезан. «Доказательство наложения» (по сути, короткий тираж печати) может быть создано для проверки окончательного размещения.

Изобретение горячего металла наборного в 1884 году ускорило процесс наборного, позволяя рабочие , чтобы произвести слизень -entire строк текста- с помощью клавиатуры. Заготовки возникли в результате заливки расплавленного металла в формы, временно собираемые наборной машиной. Однако процесс компоновки остался таким же, как и в случае с холодным металлом: сборка в физические камбузы.

Вставка эпохи

Редакторы работы по производству вопрос о Bild , 1977 в Западном Берлине . Предыдущие первые страницы прикрепляются к стене позади них.

Офсетная литография позволяет ярким и темным областям изображения (сначала снятого на пленку) контролировать нанесение чернил на печатный станок. Это означает, что если одну копию страницы можно создать на бумаге и сфотографировать, то можно будет распечатать любое количество копий. Тип можно было набирать на пишущей машинке , или для достижения профессиональных результатов, сопоставимых с высокой печатью, на специализированной машинке. Композитор IBM Selectric , например, может производить тип различного размера, различные шрифтов ( в том числе пропорциональных шрифтов ), а также с выравниванием текста . С помощью фотогравюры и полутонов физические фотографии могут быть перенесены в печать напрямую, вместо того, чтобы полагаться на гравировку, сделанную вручную.

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

Фотонабор был изобретен в 1945 году; после ввода с клавиатуры символы по одному снимались на фотонегатив, который затем можно было отправить в типографию напрямую или снимать на фотобумагу для наклеивания. Эти машины становились все более изощренными, с компьютерными моделями, способными хранить текст на магнитной ленте.

Компьютерное издательское дело

По мере развития графических возможностей компьютеров их начали использовать для непосредственного рендеринга символов, столбцов, страниц и даже многостраничных подписей , а не для простого вызова фотографического шаблона из заранее предоставленного набора. Электронно-лучевые трубки использовались не только в качестве устройств отображения для операторов компьютеров, но и для визуализации текста для фотонабора. Однако изогнутая природа ЭЛТ-дисплея привела к искажению текста и изображений на экране по направлению к внешним краям экрана. Появление в 1997 году мониторов с «плоским экраном» (LCD, LED и, в последнее время, OLED) устранило проблемы искажения, вызванные старыми ЭЛТ-дисплеями. По состоянию на 2016 год плоские дисплеи почти полностью заменили ЭЛТ-дисплеи.

Принтеры, подключенные непосредственно к компьютерам, позволяли им печатать документы напрямую, в нескольких копиях или в виде оригинала, который можно было скопировать на аналогичную машину или копировальный аппарат . Текстовые процессоры WYSIWYG позволили обычным офисным пользователям и потребителям создавать более сложные макеты страниц, использовать выравнивание текста и использовать больше шрифтов, чем это было возможно на пишущих машинках. Ранней точечной матричной печати было достаточно для офисных документов, но ее качество было слишком низким для профессионального набора. Струйная печать и лазерная печать производили шрифты достаточного качества, поэтому компьютеры с этими типами принтеров быстро заменили фотонаборные машины.

С помощью современного программного обеспечения для настольных издательских систем, такого как флагманское программное обеспечение Adobe InDesign и облачный Lucidpress , процесс макета может происходить полностью на экране. (Подобные варианты макета, которые были бы доступны в профессиональной типографии, делающей макет, поддерживаются программным обеспечением для настольных издательских систем; напротив, программное обеспечение для обработки текстов обычно имеет гораздо более ограниченный набор доступных вариантов макета и типографики, жертвуя гибкостью для простоты использования в более распространенных приложениях.) Готовый документ можно распечатать прямо как готовую для камеры версию, без физической сборки (при наличии достаточно большого принтера). Полутоновые изображения должны быть либо полутоновыми в цифровом виде при отправке на офсетную печатную машину, либо отправлены отдельно в типографию для вставки в отмеченные области. Завершенные работы также могут быть переданы в цифровом виде в типографию, которая может распечатать их самостоятельно, снять непосредственно на пленку или использовать технологию компьютерной печати, чтобы полностью пропустить физический оригинал. PostScript и формат переносимых документов (PDF) стали стандартными форматами файлов для цифровой передачи.

Цифровые носители (не бумажные)

С появлением персональных компьютеров навыки верстки страниц распространились на электронные и печатные носители. Электронные книги , документы PDF и статические веб-страницы относительно близко отражают бумажные документы, но компьютеры также могут добавлять мультимедийную анимацию и интерактивность. Разметка страницы для интерактивных средств массовой информации совпадает с дизайном интерфейса и пользовательского опыта проектирования; интерактивная «страница» более известна как графический интерфейс пользователя (GUI).

Современные веб-страницы обычно создаются с использованием HTML для содержания и общей структуры, каскадных таблиц стилей для управления деталями презентации, такими как типографика и интервалы, и JavaScript для интерактивности. Поскольку все эти языки основаны на тексте, эту работу можно выполнить в текстовом редакторе или в специальном редакторе HTML, который может иметь функции WYSIWYG или другие вспомогательные средства. Для мультимедийного контента могут использоваться дополнительные технологии, такие как Macromedia Flash . Веб-разработчики несут ответственность за фактическое создание готового документа с использованием этих технологий, но за создание макета может отвечать отдельный веб-дизайнер . Данный веб-дизайнер может также свободно владеть веб-разработкой или может просто быть знаком с общими возможностями технологий и просто визуализировать желаемый результат для команды разработчиков.

Прогнозируемые страницы

Проецируемые слайды, используемые в презентациях или развлечениях, часто имеют те же принципы макета, что и печатные страницы.

Фонарь магии и непрозрачная проектор во время лекций в 1800 - х годах были использованы, используя печатный, напечатали, фотографировали, или рисованные оригинал. Два набора фотопленок (одна негативная и одна позитивная) или одна обратная пленка могут использоваться для создания позитивных изображений, которые можно проецировать с проходящим светом. Интертитры широко использовались в самых ранних фильмах, когда звук был недоступен; они до сих пор иногда используются в дополнение к повсеместным косметическим карточкам и кредитам .

Стало популярным использовать прозрачную пленку для презентаций (с непрозрачным текстом и изображениями) с помощью диапроекторов в 1940-х и слайд-проекторов в 1950-х. Прозрачные пленки для диапроекторов можно напечатать на некоторых копировальных аппаратах. Компьютерные программы для презентаций стали доступны в 1980-х годах, что позволило создавать макеты презентации в цифровом виде. Презентации, разработанные на компьютере, можно распечатать на прозрачных пленках с помощью некоторых лазерных принтеров, перенести на слайды или проецировать напрямую с помощью проекционных ЖК-дисплеев . Современные презентации часто отображаются в цифровом виде с помощью видеопроектора , монитора компьютера или телевизора с большим экраном .

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

  • Редактирование представленной информации таким образом, чтобы она либо повторяла то, что говорит говорящий (чтобы аудитория могла обращать внимание на любой из них), либо представляла только информацию, которую невозможно передать устно (чтобы не разделять внимание аудитории или просто читать слайды напрямую)
  • Сделать слайды полезными для дальнейшего использования, если они распечатаны в виде раздаточных материалов или размещены в Интернете.
  • Темп: слайды меняются с удобными интервалами, соответствуют продолжительности выступления, а порядок содержания соответствует ожиданиям докладчика.
  • Предоставление говорящему возможности ссылаться на определенные элементы на странице, например с помощью цвета, словесных меток или лазерной указки.
  • Изменение размера текста и графики таким образом, чтобы их было видно из задней части комнаты, что ограничивает объем информации, которая может быть представлена ​​на одном слайде.
  • Использование анимации для добавления акцента, медленного представления информации или развлечения
  • Использование верхних и нижних колонтитулов или повторяющихся элементов, чтобы сделать все страницы похожими, чтобы они казались связными или указывали на прогресс
  • Использование заголовков для введения новых тем или сегментов

Сетки против шаблонов

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

Сетка представляет собой набор принципов, способный увидеть в процессе разработки и невидимый для конечных пользователей / аудитории, для выравнивания и повторяющихся элементы на странице. Макет страницы может соответствовать этим рекомендациям, а может и не соответствовать, в зависимости от того, сколько повторов или разнообразия требует стиль дизайна в серии. Сетки должны быть гибкими. Использование сетки для компоновки элементов на странице может потребовать столько же или больше навыков графического дизайна, чем то, что требовалось для разработки сетки.

Напротив, шаблон более жесткий. Шаблон включает повторяющиеся элементы, которые в основном видны конечному пользователю / аудитории. Использование шаблона для компоновки элементов обычно требует меньше навыков графического дизайна, чем то, что требовалось для разработки шаблона. Шаблоны используются для минимальной модификации фоновых элементов и частой модификации (или замены) содержимого переднего плана.

Большинство настольных издательских программ позволяют создавать сетки в виде страницы, заполненной цветными линиями или точками, размещенными на заданном одинаковом расстоянии по горизонтали и вертикали. Автоматические поля и линии корешка буклета (желоба) могут быть указаны для глобального использования по всему документу. В любой точке страницы можно разместить несколько дополнительных горизонтальных и вертикальных линий. Невидимые для конечного пользователя / аудитории фигуры могут быть размещены на странице в качестве руководящих принципов для макета страницы и обработки печати. Программные шаблоны достигаются путем дублирования файла данных шаблона или с помощью функций главной страницы в многостраничном документе. Главные страницы могут включать как элементы сетки, так и элементы шаблона, такие как элементы верхнего и нижнего колонтитула, автоматическую нумерацию страниц и функции автоматического оглавления.

Статические и динамические макеты

Статические макеты позволяют лучше контролировать эстетику и тщательно оптимизировать пространство вокруг и перекрывать контент неправильной формы, чем динамические макеты. В веб-дизайне это иногда называют макетом с фиксированной шириной; но весь макет может масштабироваться по размеру, сохраняя при этом исходные пропорции, статическое размещение и стиль содержимого. По сути, все форматы растровых изображений являются статическими макетами, но статический макет может включать в себя доступный для поиска текст путем отделения текста от графики.

Напротив, электронные страницы позволяют создавать динамические макеты с заменой содержимого, персонализацией стилей, масштабированием текста, масштабированием изображения или перекомпоновкой содержимого с переменными размерами страниц, часто называемыми плавным или плавным макетом. Динамические макеты с большей вероятностью отделяют презентацию от контента , что имеет свои преимущества. В динамическом макете весь текст и изображения размещаются в прямоугольных областях строк и столбцов. Поскольку ширина и высота этих областей определяются в процентах от доступного экрана, они реагируют на различные размеры экрана. Они автоматически обеспечат максимальное использование доступного пространства, при этом всегда оставаясь оптимально адаптированными как при изменении размера экрана, так и при ограничениях, установленных оборудованием. Размер текста можно свободно изменять, чтобы обеспечить индивидуальные потребности пользователей в удобочитаемости, не нарушая при этом пропорций данного макета. Таким образом, общее расположение контента на экране может всегда оставаться таким, каким оно было изначально задумано.

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

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

Электронные страницы могут использовать как статические, так и динамические функции макета, разделяя страницы или комбинируя эффекты. Например, раздел страницы, такой как веб-баннер, может содержать статическую или анимационную графику, содержащуюся в области содержимого для обмена. Динамический или живой текст может быть обернут вокруг изображений неправильной формы с помощью невидимых разделителей, чтобы отодвинуть текст от краев. Некоторые компьютерные алгоритмы могут обнаруживать края объекта, которые содержат прозрачность и обтекают контуры.

Фронтенд и бэкэнд

При использовании современных технологий поиска и вывода медиаконтента существует много общего между визуальными коммуникациями ( интерфейс ) и информационными технологиями ( серверная часть ). Публикации большого размера (толстые книги, особенно учебные) и электронные страницы (веб-страницы) требуют метаданных для автоматического индексирования, автоматического переформатирования, публикации базы данных, динамического отображения страниц и взаимодействия с конечным пользователем. Большая часть метаданных ( метатеги ) должна быть вручную закодирована или указана в процессе макета страницы. Это разделяет задачу верстки страницы между художниками и инженерами или задачи художника / инженера делать и то, и другое.

Для более сложных проектов может потребоваться два отдельных дизайна: дизайн макета страницы в качестве внешнего интерфейса и функциональное кодирование в качестве внутреннего интерфейса . В этом случае интерфейс может быть разработан с использованием альтернативной технологии макета страницы, такой как программное обеспечение для редактирования изображений, или на бумаге с помощью методов ручного рендеринга. Большинство программ для редактирования изображений включают в себя функции для преобразования макета страницы для использования в редакторе «Что видишь, то и получаешь» ( WYSIWYG ) или функции для экспорта графики для настольных издательских программ. Редакторы WYSIWYG и программное обеспечение для настольных издательских систем в большинстве случаев позволяют создавать интерфейсный дизайн до внутреннего кодирования. Проектирование интерфейсов и публикация баз данных могут потребовать дополнительных технических знаний или сотрудничества с инженерами информационных технологий во внешнем интерфейсе. Иногда функция серверной части состоит в том, чтобы автоматизировать получение и упорядочение контента на передней панели.

Элементы дизайна и варианты выбора

Макет страницы может быть в большей или меньшей степени предписан домашним стилем, который может быть реализован в конкретном шаблоне настольных издательских систем. Также может быть относительно мало макета по сравнению с количеством страниц (как в романах и других книгах без рисунков).

Типичные решения по макету страницы включают:

  • Определение количества и размера столбцов и желобов (промежутков между столбцами)
  • Размещение намеренного пробела
  • Размер и положение изображений и фигур
  • Размер полей страницы
  • Использование цветной печати или плашечных цветов для акцента
  • Использование специальных эффектов , такие как наложение текста на изображение, отписку и вторжениях, или кровотечение изображения по краю страницы

Конкретные элементы, которые должны быть выложены, могут включать:

При производстве газет окончательный выбор и кадрирование фотографий, сопровождающих рассказы, может быть оставлено на усмотрение редактора макета (поскольку выбор фотографии может повлиять на форму необходимой области и, следовательно, на остальную часть макета), или может быть отдельная фотография редактор. Точно так же заголовки могут быть написаны редактором макета, редактором копий или первоначальным автором.

Чтобы истории соответствовали окончательному макету, можно сделать относительно несущественные настройки копии (например, перефразировать для краткости), или редактор макета может внести небольшие изменения в элементы типографики, такие как размер шрифта или интерлиньяж.

Плавающий блок

Плавающий блок при написании и публикации - это любое изображение, текст, таблица или другое представление, которое не совпадает с основным потоком текста. Использование плавающих блоков для представления изображений и таблиц является типичной чертой академического письма и технического письма , включая научные статьи и книги. Плавающие блоки обычно помечаются заголовком или заголовком, описывающим его содержимое, и номером, который используется для ссылки на рисунок из основного текста. Обычная система делит плавающий блок на две отдельно пронумерованные серии, помеченный рисунок (для изображений, диаграмм, графиков и т. Д.) И таблицу . Альтернативное название рисунка - изображение или графика .

Плавающие блоки называются плавающими, потому что они не фиксируются на странице в определенном месте, а скорее смещаются в сторону страницы. Размещение изображений или других крупных элементов по бокам страниц, а не встраивание их в середину основного потока текста, делает набор более гибким и позволяет избежать прерывания потока повествования.

Например, статья по географии может содержать «Рисунок 1: Карта мира», «Рисунок 2: Карта Европы», «Таблица 1: Население континентов», «Таблица 2: Население европейских стран» и т. Д. . В некоторых книгах помимо оглавления есть таблица с цифрами, в которой централизованно перечислены все фигуры, встречающиеся в работе.

Также могут быть выделены другие виды плавающих блоков, например:

Боковая панель: для отступления от основного повествования. Например, техническое руководство по использованию продукта может включать в себя примеры того, как разные люди использовали продукт в своей работе, на боковых панелях. Также называется интермеццо . См. Врезку (публикация) .
Программа: в статьях и книгах по компьютерному программированию код и алгоритмы часто изображаются на фигурах.
Уравнение: При письме по математике большие блоки математической записи могут быть помещены в пронумерованные блоки, расположенные отдельно от основного текста.

Представляем макеты в стадии разработки

Макет макета может быть создан , чтобы получить раннюю обратную связь, как правило , прежде всего содержание на самом деле готов. Будь то бумажный или электронный носитель, первый набросок макета может быть простым наброском на бумаге и карандашом. Комплексный макет для нового журнала может показать заполнители для текста и изображений, но демонстрирует размещение, типографский стиль, и другие идиомы предназначены для установки шаблона для реальных проблем или конкретного незаконченного вопроса. Сайт каркасный является недорогим способом показать макет , не делая всю работу по созданию окончательного HTML и CSS, и без написания копии или создания каких - либо изображений.

Текст Lorem ipsum часто используется, чтобы избежать смущения, которое может вызвать любой импровизированный образец текста в случае его случайной публикации. Точно так же изображения-заполнители часто помечаются « только для позиции ».

Смотрите также

использованная литература

внешние ссылки