Правила для верстальщиков

Верстальщик

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

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

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

Среди верстальщиков много выпускников технических вузов, хорошо разбирающихся в компьютерной технике. В небольших изданиях наряду с версткой такой специалист берет на себя и техническое обслуживание компьютерного парка . Cпециалисту известно, что, начиная с некоторого количества страниц (15-20), с документом проще работать не в общеизвестном редакторе Word, а в другом — например, в PageMaker . Существует некий «джентльменский» набор программ, которым должен владеть специалист по компьютерной верстке : издательские системы QuarkPress,Adobe PageMaker и графическая программа Adobe Illustrator . Надо отметить,что работы для полиграфии делаются обычно на компьютерах платформы Мac (Macintosh ), а не РС, с которыми привыкли работать большинство пользователей . Специалисту должны быть хорошо знакомы межплатформенные манипуляции.

www.rabotka.ru

Верстальщик в полиграфии

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

Особенности профессии

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

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

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

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

Рабочее место

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

Важные качества

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

Знания и навыки

Обязательным является владение компьютерными программами: Adobe InDesign, Illustrator, Photoshop, а в некоторых случаях и QuarkXPress, знание основ типографики (науки компоновки текстовых элементов издания), особенностей композиции многостраничных изданий и их структуры.

Циклы теоретических и практических занятий по верстке многостраничных изданий входят в программу специализированных средне специальных учебных заведений, таких как Московский государственный издательско-полиграфический колледж им. И.Федорова, а также ВУЗов, дающих знания в области полиграфии, например МГУП им. И.Федорова или любых институтов, имеющих факультет дизайна. Но гораздо быстрее и качественнее вы сможете освоить эту специальность, пройдя курсы по работе с компьютерными графическими редакторами (иначе – настольными издательскими системами), то есть с Adobe InDesign, Illustrator и Photoshop (особый акцент сделайте на Adobe InDesign), а также прочитав несколько книг по типографике и верстке (особо рекомендуется книга Джеймса Феличи «Типографика: шрифт, верстка, дизайн», содержащая в себе огромное количество полезнейшей информации для верстальщика), и применив все эти знания на практике под руководством опытного верстальщика, готового передавать свои знания младшим сотрудникам.

www.profguide.ru

K i t i c h

  • Не доступно
  • 7 заповедей CSS-верстальщика

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

    На самом деле, тогда я многому научился, а именно, как делать правильно. Узнал, что есть стандарты и они нужны :), что есть такая вещь, как XHTML и многое другое. И с тех пор я следую им (практически) безотступно. Со временем пришло понимание, зачем это нужно, и теперь я следую им с умом, время от времени нарушая в тех местах, где считаю нужным.

    Так вот, с первым же заказом в направлении вёрстки получил я хитрый документик с требованиями, текст которого привожу тут безо всяких изменений:

    Правила выполнения технического задания для Web-верстальщиков (XHTML):

  • Настоятельно рекомендуется использовать редактор кода Zend Studio Client (версия 5.1 и выше).
  • В исходных файлах не должно быть символов табуляций. Один символ табуляции заменяется на 4 пробела.
  • Файл шаблона – index.html.
  • Файл CSS-стиля для браузера — /_css/main.css.
  • Файл CSS-стиля для печати — /_css/print.css.
  • Тип документа – XHTML 1.0 Transitional.
  • Пример правильного XHTML-кода: http://mwprograms.com/work/bridge/xhtml.
  • Меню – тег UL, пункты меню – LI.
  • В верстке сначала идет логотип, затем меню, затем контент-наполнение, а только потом дополнительные блоки.
  • В браузерах Internet Explorer 6.0, 5.5, 5.0, Mozilla Firefox 1.0-1.6, Opera 8 сайт HTML-шаблон должен отображаться один в один, пиксель в пиксель. Если будут определены малейшие расхождения – задание выполнено не верно.
  • Для логических заголовков в контенте использовать теши H1 и H2.
  • Переопределить стиль тегов H1,H2,STRONG в CSS стиле, чтобы нигде и никогда не было дурни типа


    Запрещенная дурня:

    … Увижу такое – не заплачу.

  • В print-стиле печататься должно только контент-наполнение.
  • Все рисунки, которые не относятся к контенту (кроме логотипа) должны быть прицеплены через CSS-стиль, т.е., тег img нигде в шаблоне встречаться не должен.
  • Подсветка на кнопках также через псевдоселектор тега в CSS-стиле, никаких JavaScript.
  • Meta-теги оставлять пустыми.
  • Использовать резиновую HTML-верстку.
  • Корректность кода будет проверена CSS и HTML-валидаторами W3.org. Допускаются только мелкие погрешности типа «забыли про alt для img».
  • При невыполнении любого из условий оплата за задание приравнивается к нулю.
  • Помимо этого требовалось строго соблюдать спецификацию XHTML, все названия файлов и папок строго регламентировались и к «Правилам» прилагался свёртанный макет, демонстрирующий, как должен выглядеть html-файл со всеми необходимыми заголовками.

    Вот так вот. Некоторые пункты можно считать бредовыми, но в целом это были жёсткие условия 🙂

    А теперь модернизирую эти правила с учётом приобретённого с тех пор опыта:

    1. Свёрстанный макет должен соответствовать спецификациям XHTML + CSS. Для проверки кода использовать валидаторы w3c. Да, я считаю, что HTML недостаточно строг и противоречит спецификации родительского формата XML.
    2. Структура папок основного макета должна быть постоянной, названия файлов тоже, всё названо в одном регистре – детали каждый выбирает для себя. На самом деле это просто приучает к какому-то порядку, макет выглядит чистым и опрятным.
    3. Сами файлы .html и .css должны быть написаны в соответствии с правилами оформления кода и именования идентификаторов. Правила можно скопипастить с любого языка программирования, например PHP; со временем у вас могут выработаться свои стандарты, с которыми вам будет удобно работать. Это нужно для порядка и для того, чтобы код оставался читабельным для вас и других спустя даже годы после создания.
    4. Страница должна корректно и одинаково отображаться во всех распространённых браузерах: IE 6-7, FF 2-3, Opera 8-9. Думаю, сюда стоит включить и Safari, а также FF1 и, вскоре, IE8. Совпадение пиксель в пиксель – это фанатизм, но различия должны быть минимальны и целосность восприятия сайта нарушаться не должна.
    5. В CSS должны быть полностью определены все элементы дизайна, т.е. вариантов типа типа

    действительно быть не должно. Иначе зачем нужен собственно CSS? И что вы будете делать через полгода, когда решите не писать больше заголовки жирным – чистить всю базу данных?
  • Также в CSS должны быть определены все теги и конструкции, применяемые для логического форматирования контента страницы, такие как списки, изображения, ссылки (4 псевдостиля) и заголовки всех уровней, даже если они не используются непосредственно в верстаемом макете. Всё же контент на сайте будет добавляться без вашего участия и мало ли что может внезапно понадобиться?
  • Все изображения, не несущие смысловой нагрузки, должны вставляться исключительно с помощью CSS. То есть все элементы дизайна должны быть «фоном». На странице могут остаться логотип, иконки/кнопки (хотя тоже нежелательно) и иллюстрации в контенте. То же касается остальных тегов — все они должны использоваться по прямому назначению.
  • Помимо этого есть ещё ряд приятностей, вроде таблицы стилей для печати, но самое важное, кажется всё включил в свои «7 заповедей».

    kitich.com

    Даты проведения: с 14 июня по 8 июля 2018

    Продолжительность курса: 48 учебных часов

    Стоимость обучения: 25 000 рублей

    Дни занятий: по договоренности с группой

    Контакты: 8 (495) 608-23-29,
    8 (929) 971-74-22;
    с[email protected]

    Дизайнер-верстальщик (технический редактор, метранпаж)

    Интенсивный курс!

    Верстка печатных изданий в программе InDesign

    Программа:

    Раздел 1. Знакомство с программой Adobe InDesign.
    1.1. Изучение панели инструментов. Загрузка текста и графического блока.
    1.2. Форматирование основного текста. Шесть основных параметров текста.

    Раздел 2. Книжная верстка.
    2.1. Оформление колонтитулов и колонцифр.
    2.2. Виды иллюстраций. Практическая работа № 1.
    2.3. Верстка издания с несколькими ступенями соподчиненности заголовков и оглавлением. Практическая работа № 2.
    2.4. Правила и способы оформления дополнительного текста (сносок, эпиграфов, подрисуночных подписей, примечаний). Практическая работа № 3.
    2.5. Верстка издания с боковиками и «фонариками». Практическая работа № 4.
    2.6. Верстка многоколонного подарочного издания. Практическая работа № 5.

    Раздел 3. Журнальная верстка.
    3.1. Верстка журнальной полосы с абреже. Практическая работа № 6.
    3.2. Верстка журнальной полосы по шаблону. Практическая работа № 7.

    Раздел 4. Газетная верстка.
    4.1. Верстка газетной полосы по шаблону. Практическая работа № 8.

    Раздел 5. Акциденция малых форм.
    5.1. Верстка рекламного модуля по шаблону. Практическая работа № 9.
    5.2. Создание визитной карточки с собственным дизайном. Практическая работа № 10.

    Дни занятий по договоренности с группой

    Запись на курс:
    Тел. +7(495) 608-23-29
    Моб. +7(929) 971-74-22
    e-mail: с[email protected]

    Наш адрес: м.Сухаревская, ул.Садовая-Спасская, д.6, офис 400

    mgup.ru

    Взаимодействие дизайнера и верстальщика

    Любви, взаимопонимания и травм мягких тканей пост

    26 апреля 2013 г.

    Пару месяцев назад я начал преподавать html‑вёрстку в Школе интернет‑технологий EpicSkills. Нижеследующий текст – часть занятия, посвященного взаимодействию веб‑дизайнера и html‑верстальщика (в группе по веб‑дизайну). Источник материала – моя 13‑летняя (на момент написания этого текста) практика верстки и анализ тематических материалов, найденных в сети.

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

    Все ли можно сверстать?

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

    Работа дизайнера и работа верстальщика

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

    Зачем налаживать взаимодействие

    Работа по созданию сайта в команде подразумевает несколько этапов, любое обращение к исполнителю предыдущего этапа – непрофессионализм (чаще всего, непрофессионализм того, К КОМУ обращаются), потеря времени и денег.

    Причины непонимания

    Макет предоставлен не в PSD

    Нет большой проблемы, когда макет сделан в AI, если это, действительно, макет сайта. Лично мне, как‑то раз, предоставили макет следующего вида: огромный (пиксельные размеры 10000+ пикс. по обеим сторонам) EPS‑файл, в котором сетка 5×4 – прямоугольной формы «макеты» разных страниц, пиксельная нерезкость на ВСЕХ горизонтальных и вертикальных линиях, неизвестные размеры шрифтов и множество других прелестей.

    Макет предоставлен не в North America Web/Internet → sRGB

    Это цветовое пространство по умолчанию и именно оно используется в веб. Если у дизайнера оно отличается, это почти гарантия неверных цветов в вёрстке. Несколько раз я получал макеты в CMYK. Это даже комментировать не хочется. Критично.

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

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

    Отсутствуют hover‑, active‑ и focus‑состояния для ВСЕХ интерактивных элементов. Применительно к навигационным элементам, дополнительно, active‑состояние

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

    Макет сделан не веб‑дизайнером

    Атипичная ширина, не соблюдено правило «‑24 пикс.», состоящее, что ширина макета должна быть уже, чем та ширина экрана, под которую делается макет – 24 пикселя. Если макет для экранов 1024 пикс, то ширина макета должны быть 1000 пикс. и менее. Критично.

    МоДУЛЬная сетка и ее отсутствие

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

    Общие проблемы со слоями

    1. Отсутствие структуры папок и цветового разделения папок, неинформативные названия папок,
    2. часть слоев слиты,
    3. часть слоев скрыты без к‑л пояснений (любые всплывающие элементы страницы),
    4. нечёткие пиксельные границы вертикальных и горизонтальных линий,
    5. наложение, отличное от Normal КРИТИЧНО. Ни в коем случае нельзя допускать иные способы наложения!
    6. слои со сведенными эффектами,
    7. изменение цвета при помощи прозрачности блока/текста,
    8. внедрены иконки из веб‑шрифта (из webhostinghub. com/glyphs, например), но не указаны их классы или иные способы найти соответствующие им символы в шрифте.
    9. Проблемы с блоками

    10. Не предусмотрено переполнение блоков – самая частая проблема, иногда, критично (фигурные границы, нелинейный градиент, изображение в фоне (без запаса по ширине)),
    11. однотипные блоки имеют разное оформление (цвета, шрифты, отступы),
    12. изображение в фоне блока, нуждающегося в растяжке, не имеет паттерна повтора.
    13. Проблемы со шрифтами и текстом

    14. не‑веб‑безопасные шрифты (и отсутствующие на google. com/fonts), или не предоставлены шрифты, или использованные шрифты – коммерческие, а лицензия на их использование не куплена,
    15. сглаженные шрифты (условная проблема, частично уже ушедшая в прошлое),
    16. более 3‑х разных шрифтов на странице при необходимости их подключения,
    17. размер 15,23 пикс. и интерлиньяж 146 % (всегда указывайте размер и интерлиньяж в пикселях или пунктах),
    18. кернинг/спейсинг 146 %,
    19. разные отступы у однотипных элементов (параграфов, например) в пределах одного логического блока или группы однотипных блоков,
    20. текстовые эффекты (градиент, обводка, внутренняя тень) – кроме тени от текста,
    21. изменение пропорций шрифта, Критично.
    22. латинская «рыба» вместо текста,
    23. наличие переносов внутри слов в тексте,
    24. нет показанного типографического оформления контентного текста, иногда, критично

    ОС‑зависимые элементы интерфейса отрисованы самостоятельно

    Имеется в виду скролл и некоторые элементы форм: флажки, радиокнопки, элементы типа file. Все это можно сверстать, но это ощутимо увеличивает стоимость и время верстки – нужно дважды спросить себя: «действительно ли необходимо, чтобы эти элементы отличались от типичных в ОС посетителя?».

    Резюме: требования к PSD‑макету сайта

    Обязательные

  • Цветовое пространство North America Web/Internet → sRGB.
  • Макет должен выглядеть так, как должна выглядеть свёрстанная страница (скрытые слои не будут сверстаны, если это не оговорено в ТЗ ).
  • Каждый элемент (текст, изображение) в отдельном слое (тексты – в текстовых слоях, не растеризированы).
  • Все слои не имеют прозрачности (за исключением сливаемых в единое изображение, вроде картинок‑фонов слайдера).
  • Все слои имеют режим наложения Normal.
  • Все однотипные блоки имеют одинаковую стилизацию (в т. ч. стилизацию внутренних элементов).
  • Использованы веб‑безопасные шрифты, или шрифты с google. com/fonts, или приложены использованные шрифты.
  • Размер шрифтов и интерлиньяжа указан в пикселях, целыми значениями.
  • Контентный шрифт не масштабирован.
  • Отсутствие переносов внутри слов.
  • При внедрении иконок из иконочного шрифта, названия слоев с иконками должны соответствовать css‑классам иконок.
  • Крайне желательные

  • Ширина, соответствующая ширине предполагаемых устройств просмотра.
  • Пиксельная резкость границ графических элементов (допустимы исключения).
  • Показанные hover‑, active‑ и focus‑состояния интерактивных элементов (лучше отдельным PSD‑макетом).
  • Наличие модульной сетки.
  • Структура папок в панели слоев, понятные имена папок и слоев.
  • Эффекты слоев не сведены.
  • Кернинг и спейсинг не изменены.
  • Шрифты не масштабированы.
  • Использован текстовой контент, близкий к предполагаемому на сайте (а не латинская типографская «рыба»).
  • Показано типографическое оформление текста (заголовки 1‒6 уровней, контентный шрифт, списки, таблицы) и оформление html‑элементов (горизонтальная линия, элементы форм).
  • ОС‑зависимые элементы (скролл, флажки, радиокнопки и пр.) предполагается оставить такими, какие они по умолчанию.
  • © Николай Громов. Внутренняя Монголия, вечность, лето.

    nicothin.pro