Что такое верстка макета
Верстка сайта: инструкция для начинающих
Что такое вёрстка сайта
Вёрстка – это структура всех элементов на странице документа, сайта или другого информационного носителя. Такими элементами могут быть изображения, заголовки, подзаголовки, таблицы, инфографика и сам текст.
Изначально понятие вёрстки было применимо к издательской деятельности. Книги, газеты, журналы содержат структурированную информацию. В них есть чёткая сетка, блоки, в которых текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Сейчас актуальность вёрстки для издательств сохраняется, но к ним также примкнула и сфера веб-дизайна.
В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь.
В контексте создания сайтов есть два вида разработки:
Вёрстка относится к front-end. Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования.
Вёрстку веб-страниц невозможно представить без HTML. Если говорить простыми словами, то HTML — это единый стандарт отображения всех элементов веб-страницы. Это язык разметки, с помощью которого браузеры показывают нам порядок, размер, формы и шрифт текста. С его тегами знакомы все, кто занимался созданием сайтов, например:
Верстка макетов для печати
Верстка включает в себя поэтапные работы, начиная от разработки дизайна полиграфии, заканчивая созданием макета и отправки тиража на печать.
21 Июль 2015 
Что такое полиграфическая верстка? Это один из важнейших этапов допечатной подготовки любой полиграфической продукции. Верстка включает в себя поэтапные работы, начиная от разработки дизайна полиграфии, заканчивая созданием макета и отправки тиража на печать.
Какие этапы работы включает в себя верстка полиграфической продукции?
В нее входит:
Постраничная верстка занимает примерно 60% времени, требуемого для допечатной подготовки макета многополосных изданий. Она позволяет подготовить тираж к выводу на печать. Дизайн и верстка выполняются специалистами с помощью специального программного обеспечения. Это позволяет расположить текстовое наполнение на каждой странице макета будущего издания поверх растрового или векторного дизайна, в зависимости от конкретных требований издания полиграфической продукции, способа, которым будет осуществляться печать.
Чаще всего полиграфический дизайн и верстка выполняются в векторных программах Adobe illustrator, Corel Drow, Indesign. Такой выбор определяется тем, что текстовая составляющая верстаемой полосы требует выполнения именно в векторном виде. Это позволяет обеспечить четкие грани текста, благодаря чему он не размывается, не сливается с дизайном, становится пригодным для чтения.
Услуги полиграфической верстки зависят от различных факторов:
Программное обеспечение для полиграфической верстки
Все программы, используемые для полиграфической верстки, позволяют создавать многостраничные документы, связывать несколько документов в один, обеспечивать оригинальное расположение графики на полосе и многое другое. Для облегчения верстки могут также использоваться специальные скрипты.
В процессе подготовки печатного издания изображения обрабатываются в графических редакторах, позволяющих обеспечить их высокое качество. Текстовая наполняющая может быть обработана как в сторонних программах, так и непосредственно внутри редактора программ для издательской верстки. Такое разделение определяется тем, что текст в процессе работы над оригинал-макетом может несколько раз подвергаться изменениям. Например, изменения в текст могут вноситься после каждой вычитки и корректуры.
Сложность, которой отличается полиграфическая верстка, в том, что она требует профессионального подхода. Заказывая верстку специалистам, вы гарантировано получите качественный результат. Верстка вашего издания будет выполнена в полном соответствии с вашими пожеланиями и требованиями к верстаемому изданию.
_____
Многочисленные « подводные камни», с которыми приходится сталкиваться верстальщику, может обойти только опытный, квалифицированный специалист. Некачественная верстка может привести к тому, что материал будет плохо восприниматься. В худшем случае можно получить обрезанный макет или полностью нечитаемый текст.
Вёрстка простого макета
С чего обычно начинается процесс верстки? Начинается он с изучения макета или макетов будущего сайта. Чаще всего эти макеты создаются в программе Adobe Photoshop, поэтому вы, как верстальщик, должны уметь пользоваться этой программой, а именно уметь вырезать изображения из макета, измерять отступы между элементами, вычислять размеры и параметры различных компонентов будущей веб-страницы и т.д. Первым делом давайте произведем настройку рабочего пространства в программе Adobe Photoshop для удобства работы.
Настройка рабочего пространства в программе Adobe Photoshop
Все примеры будут показаны в программе Adobe Photoshop CS5, с интерфейсом на английском языке.
Открыв программу Adobe Photoshop, вы увидите примерно следующее:
Нам нужно настроить набор дополнительных панелей. Для начала зайдите в меню Window – New Workspace:
Введите имя для нового рабочего пространства, например, my workspace, и нажмите Save. Теперь нам нужно выбрать необходимые панели для работы. Заходим в Window и ставим галочки напротив History, Info, Layers, Navigator, Options, Tools. С остальных панелей можете снять галочки, если они установлены.
Теперь нам нужно эти панели закрепить. Для этого кликнете по верхней части панели, и перетащите ее в нужное место, чтобы в итоге ваше рабочее пространство выглядело таким образом:
При появлении голубой прозрачной полоски, отпустите курсор, чтобы закрепить панель в этом месте:
Чтобы закрыть ненужные вкладки, кликнете по иконке в правом верхнем углу вкладки, и в выпадающем меню выберите пункт Close:
Первый макет, который мы будем с вами верстать называется simple_text.psd, находится он в папке templates. Откройте его в программе Adobe Photoshop, для этого зажмите клавиши Ctrl+O (или через меню File – Open), и выберите файл.
Включите линейку при помощи горячих клавиш Ctrl+R или через меню View – Rulers:
Теперь кликните два раза по линейке и откройте вкладку Units & Rulers, чтобы настроить единицы измерения. Выберите в блоке Units для Rulers и Type единицы измерения пиксели:
Теперь все готово, можно начинать верстать макет.
Что такое верстка?
Вы знаете, как в старину создавали ваш макет для печати?
Чтобы заказать макет, вам пришлось бы прийти в мастерскую. Открыв деревянную дверь, вы вошли бы в небольшое помещение пропахшее деревом. И увидели, как мастер вручную, точными и выверенными движениями, создающими иллюзию простоты, вырезает на деревянной пластине макет вашей страницы.
И поверьте, у вас даже не возникло бы желание отвлечь или поторопить мастера. Потому что если он ошибется, всю работу ему придется начать с самого начала.
Сейчас все стало проще. Все изменилось (неизменными остаются только глубокие знания и профессионализм мастера работающего над вашим макетом). Компания Apple впервые изобрела настольную издательскую систему. Компания Adobe написала программы для обработки графической и текстовой информации.
Верстка макета выполняется в правильно освещенном офисном помещении. Специалист по верстке делает ваш макет за обычным рабочим столом, на котором установлены два монитора (один большой для изображения, а второй поменьше для меню программы). Любую ошибку можно исправить в течение нескольких секунд (ничего не придется начинать с самого начала).
Для согласования макета вам не нужно никуда идти. Макет сам придет к вам в виде файла на вашу электронную почту.
Верстка в полиграфии
Верстка — это создание макета полиграфического издания.
Верстка — общее название, объединяющее в себе много направлений. Как и лес, когда мы его видим из далека. Но когда приближаемся поближе, ощущаем его чарующий воздух. Видим, что он состоит из множества различных деревьев (больших и маленьких), собранных природой вместе на ограниченном пространстве.
Если рассмотреть верстку более детально, вы увидите, что верстка специализируется на создании макетов для различной полиграфической продукции.
Например, при верстке каталогов макет создается из фотографий, текстов, элементов навигации, облегчающих быстрый поиск необходимой информации.
Когда идет работа над годовым отчетом, в макете размещается большое количество таблиц, графиков, диаграмм и текста.
Медицинский справочник создается совершенно по другом. Он не похож на годовой отчет или каталог. В нем много специально созданных графических иллюстраций, помогающих понять, о чем говорится в тексте, химических формул и таблиц.
Информация в медицинском справочнике выстроена так, чтобы врачи, фармацевты и другие специалисты могли быстро найти нужную информацию, и им было удобно работать с ней.
Вы видите, что у каждого направления верстки есть свои особенности и своя специфика.
Где расположен этап верстки в технологическом процессе?
Материалы передают на верстку после того, как улеглись страсти по выбору главной идеи создаваемого полиграфического издания.
Завершились все споры, какие материалы войдут в макет, а какие нет. Вы согласовали дизайн обложки, цветовую гамму макета и дизайн внутреннего разворота издания.
Отобраны все фотографии. Нарисованы все графические иллюстрации. Написаны, проверены и отредактированы тексты. Составлен план макета в электронной таблице (или в текстовом файле).
Все готово, можно приступить к верстке — созданию макета будущего издания.
Есть ли место творчеству при версте макета?
Специалист по верстке — это технический специалист, который работает по предоставленному ему плану в соответствии с утвержденным вами дизайном.
На верстке не работают с дизайном. Невозможно попросить специалиста по верстке добавить куда-нибудь еще один элемент, изменить композицию или добавить еще одну фотографию.
Работа специалиста по верстке очень похожа на работу токаря. В начале рабочего дня токарь получает задание (какую деталь ему нужно изготовить), заготовку, необходимые инструменты (например резцы), чертеж и технологическую карту.
Токарь не может выдумать новую деталь. С помощью его творчества, знаний и опыта он превращает обычный кусок металла в высокоточное изделие. Изделие созданное в строгом соответствии с чертежом и параметрами точности изготовления.
Никто не вмешивается в процесс изготовления детали. В этом процессе и проявляется творчество мастера. Он знает, какие приемы нужно применить. Какие моменты обязательно учесть. На каких режимах изготавливать различные элементы детали.
Аналогично специалист по верстке создает макет в строгом соответствии с планом и утвержденным дизайном. В плане четко указаны, какие элементы должны быть размещены на каждой странице издания.
Дизайн внутреннего разворота задает общее графическое оформление страниц.
Творчество специалиста по верстке проявляется в правильном размещении всех элементов в макете и установке для них необходимых параметров в программе.
Это очень важно. Потому что после завершения верстки макет перейдет на стадию допечатной подготовки (pre press). На стадии допечатной подготовки сверстанный макет будет подготовлен к печати в соответствии с требованиями выбранной вами типографии.
В чем особенность этапа верстки?
Подойдя к этапу верстки, вы точно знаете, сколько времени у вас осталось до даты отгрузки вашей полиграфической продукции.
Дата отгрузки полиграфической продукции (в большинстве случаев) согласована заранее. Полиграфическую продукцию выпускают для представления на мероприятии (совете директоров, выставке, годовом собрании акционеров) и т.д.
Дату мероприятия изменить нельзя.
Время печати полиграфической продукции определятся типографией.
Типография (полиграфическое производство) — это выстроенный технологический процесс. Последовательность операций производства задана главным технологом.
Время прохождения технологических операций известна. Время каждой технологической операции зависит от физических величин (например, от времени полного высыхания краски на бумаге).
Никто не может приказать краске высохнуть за пять минут, если для закрепления на бумаге ей необходимо несколько часов. Краска нас не послушает.
Если мы нарушим технологию, то испортим нашу продукцию. И все придется повторить еще раз. Повторная печать приведет к потери времени и денег (бумагу и другие расходные материалы придется приобрести повторно).
Подойдя к процессу верстки, вы точно знаете сколько осталось времени до начала мероприятия. За это время необходимо выполнить верстку, подготовить макет к печати, отпечатать и доставить готовую продукцию на мероприятие. С этим уже ничего сделать невозможно.
Из полученного временного отрезка вы вычитаете время печати.
Потому что время печати сократить не получится. Можно сократить время ожидания до начала производства вашего заказа. Но ускорить процесс полиграфического производства основанного на физических принципах, к сожалению, не получится.
Стало известно сколько времени осталось на верстку. За это время нужно успеть сверстать макет и подготовить его к печати, чтобы получить полиграфическую продукцию вовремя.
Сколько времени есть на верстку?
Каждый проект индивидуальный. Ваш проект отличается от любого другого. Поэтому мы подходим индивидуально к каждой работе, находим то единственное решение, которое подойдет вам именно для сейчас.
На верстку полиграфической продукции у вас может быть от нескольких часов до нескольких месяцев (если вы все делаете заранее, не спешите и никуда не торопитесь).
Можно ли ускорить процесс верстки без потери качества?
Да, можно! Скорость выполнения верстки можно изменять. Можно сделать макет как за несколько дней, так и за несколько часов без потери качества.
Здесь нет никакой магии и волшебства. Все зависит от организации процесса верстки и количества специалистов работающих над вашим Проверено правописание первой тысячи слов макетом одновременно.
Если у вас большой запас по времени, вы никуда не торопитесь, то скорость работы может быть минимальной.
Над вашим макетом будет работать один специалист. Заказу будет присвоен минимальный приоритет (это будет похоже на электричку, которая идет до пункта назначения со всеми промежуточными остановками). Ваша работа будет пропускать вперед срочные и обычные заказы, но при этом ежедневно будет продвигаться к завершению и гарантированно выполнена точно в установленный срок.
Если запас времени небольшой (пять семь рабочих дней) на верстку макета. Заказу будет присвоен обычный приоритет. Он будет пропускать вперед только срочные заказы. Им будет заниматься один специалист.
На полиграфическом производстве может быть большая загрузка (в полиграфии есть сезонное увеличение загрузки, например, перед приближением нового года) и срок печати увеличится. Времени на верстку станет меньше. Для сокращения сроков верстки специалисту придется задерживаться после окончания рабочего дня и поработать над вашим макетом в выходные дни.
Если времени на верстку осталось совсем мало (от нескольких часов до нескольких дней), одному специалисту с такой задачей не справится при всем желании.
Заказу будет присвоен высший приоритет. Ваш заказ будут пропускать все заказы (кроме таких же срочных). И над его выполнением будет работать собранная команда специалистов.
Макет будет разделен на части. Каждый специалист будет работать со своим фрагментом макета.
Не переживайте. Разделение работы на части не окажет негативного влияния на качестве сверстанного макета.
Можете быть уверены, что все отдельные части будут собраны в единое целое так, что никто и никогда не поймет (после окончательной сборки), что над макетом работала группа специалистов по верстке одновременно.
Одновременная работа над разными частями макета ускоряет процесс верстки.
Количество специалистов по верстке, одновременно работающим над макетом, определяется наличием времени и сложностью создаваемого макета.
Чем больше частей будет в макете, тем больше специалистов будут работать одновременно. К нужному времени подготовленный к печати макет гарантированно будет направлен вам на согласование.
Почему у вас не получится сдать материалы на верстку и забыть о процессе верстки?
В процессе верстки макета всегда возникают вопросы. Нужно уточнить какие-то детали. Например, принять решение о фотографии, качество которой не соответствует минимальным техническим требованиям для печати. Происходит постоянный процесс общения между специалистами по верстке и представителем заказчика.
Что происходит после того, как у специалиста по верстке возникает вопрос?
Когда у специалиста по верстке возникает вопрос, он приостанавливает выполнение данной операции. Пишет письмо представителю заказчика. И при возможности, переходит в выполнению над другими страницами макета.
Когда вы никуда не торопитесь, времени достаточно. Можно подождать пока придет ответ.
Но когда до окончания работы остаются считанные часы, ситуация в корне меняется.
Чтобы все успеть, работы выполняются в вечернее и ночное время. Включая выходные дни. Мы помним что дату начала мероприятия перенести нельзя, ускорить печать невозможно. Мы можем управлять только временем создания макета.
Что произойдет, когда сложности начинаются в пятницу вечером (а так бывает чаще всего). Или поздним вечером или даже ночью.
Моментально специалист по верстке сформулирует трудность. Напишет вам (или назначенному вами ответственному за проект) свой вопрос. Приостановит данную работу и будет ждать ответа.
Если вопрос пришел в пятницу вечером, перед самым окончанием рабочего дня (такое случается очень часто), а ответ на него придет утром в понедельник.
Потеряно два дня работы (суббота и воскресенье). За это время должно быть сделано очень много. И не факт, что в понедельник эту потерю времени можно будет наверстать без увеличения количества специалистов, работающих над макетом.
Вы не сможете забыть о работе по подготовке вашего макета.
Вам нужно будет быть постоянно на связи или назначить ответственного, который будет на связи двадцать четыре часа в сутки. Оперативно отвечать на все вопросы и решать все трудности, которые встретятся на пути верстки макета.
Как формируется цена на верстку макета?
Как вы видите, работа по верстке макета может быть организована различными способами. Но при любом варианте вы гарантированно получите вовремя качественный макет.
Минимальная стоимость макета возможна при работе одного специалиста в обычном рабочем режиме с девяти до восемнадцати часов с часовым перерывом на обед.
Если работу нужно ускорить, специалисту нужно задержаться на работе после ее окончания и выйти поработать в выходные дни. Это отразится на стоимости. Стоимость будет выше. Никто не захочет просто так задерживаться и провести выходные на работе.
В критической ситуации, когда над макетом работает группа специалистов, работа организована в круглосуточном режиме, включая выходные дни. Стоимость будет еще больше. Потому что каждому специалисту необходимо оплатить выполненную работу.
Каждый проект уникальный. В каждом заказе есть свои особенности.
После того, как будут определены все детали по организации работы, будет понятна сложность создаваемого макета и его дизайн. Мы увидим, в каком виде будет предоставлен материал. Будет известен срок, за который необходимо сделать макет и подготовить его к печати. Возможно, подойти к вопросу стоимости его изготовления.
Макет сайта: как сделать дизайн и передать исходники верстальщику
Удалить скрытые слои, настроить отступы, экспортировать иконки и приложить шрифты: что нужно сделать дизайнеру, чтобы разработчик не запутался в макет
Чтобы стать опытным дизайнером, нужно сделать несколько больших проектов и понять, как всё устроено изнутри. Если времени на проекты нет, то все нюансы передачи макетов разработчикам и правильном общении с ними можно узнать на нашем курсе.
Зачем приводить всё в порядок
Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.
Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:
Скорее всего, это происходит потому, что дизайнер плохо подготовил макет для вёрстки.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Для чего нужен макет
Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создаёт макет сайта, затем передаёт исходники разработчику.
Макет сайта — это эскиз, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте.
При работе над макетом в графическом редакторе у дизайнера нет ограничений. Если выбранный шрифт не подходит, его можно поменять в один клик. Если кнопка выглядит неудачно, можно легко изменить её цвет и размеры.
Разработчик получает от дизайнера макет в графическом формате. Затем с помощью HTML и CSS, языка для разметки страниц и таблицы стилей приводит макет в такой вид, который понимают браузеры.
Правила создания макета
Верстальщик постоянно сверяется с исходными файлами, которые получил от дизайнера. Смотрит отступы и расстояния, копирует текст, задаёт нужные стили.
Важно! Часто дизайнер в спешке отправляет макет разработчику и при этом забывает проверить работу на ошибки. А верстальщик тоже может не заметить проблем и опубликовать это всё на сайте.
Обычные ошибки дизайнера:
Чтобы это происходило реже, необходимо соблюдать основные правила создания макета и взаимодействия с верстальщиком.
1. Договоритесь о формате файлов
Начинающие дизайнеры часто не знают, в какой программе можно сделать макет. Изучают разные графические редакторы, выбирают удобный для себя.
Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.
Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.
Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?
2. Следуйте требованиям интерактивного дизайна
Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.
3. Избавляйтесь от дробных расстояний
Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми чётными числами. Не используйте нечётные числа и дроби.
4. Наведите порядок в слоях и артбордах
Во время работы над макетом дизайнер располагает слои в хаотичном порядке, не переименовывает их, скрывает неподходящие варианты. С таким макетом сложно работать верстальщику и другим специалистам, в нём нет структуры.
Чтобы создать порядок в слоях: