Макеты для верстки для новичков: PSD макеты для вёрстки сайтов

пример нарезки макета для верстки – Zencoder

В Интернете существует (на момент написания статьи) мало материалов с примерами как нарезать макет в Photoshop. Для новичков-верстальщиков этот факт является камнем преткновения.

И хотя на форумах, посвященных web-дизайну, много говориться о том, что … да там все просто — нечего учитьcite>, … в сети полно информации по этому вопросу

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

Итак, у нас имеется psd-макет, созданный неким “гением” web-дизайна:

Как и положено, макет представлен в формате psd (в исходном коде) со всеми слоями так, как нарисовал его дизайнер.

Нам необходимо вырезать логотип будущего сайта. В данном случае это красивая цветастая напись POLO360.

Вот нам и предстоит задача вырезать его. Первым и самым трудным делом является нахождение всех слоев, отвечающих за прорисовку логотипа. Для этого нужно выбрать инструмент “Move Tool (V)”. В панели инструментов Photoshop необходимо проверить, что стоит галочка в разделе “Auto — Select”:

Это необходимо для того, чтобы при выделении объекта на макете в Палитре слоев автоматически выделились все слои, отвечающие за отрисовку данного объекта. Другими словами — так проще искать нужные слои при нарезке.

Теперь начинается самое интересное. Если дизайнер человек ответственный и пунктуальный, то перед передачей макета на верстку он рассортирует все слои по папкам. Каждая из папок будет однозначно указывать и содержать в себе все слои, отвечающие за отрисовку только одного объекта. И жизнь верстальщика значительно упрощается.

Но такое бывает редко и слои разбросаны по палитре как попало. нам необходимо методом “научного тыка” найти нужные нам.

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

Когда все слои найдены, картина в “Палитре слоев” будет примерно такой:

Теперь объединяем отмеченные нами слои. Для этого держим зажатой клавишу Ctrlkbd> и выделяем каждый из слоев одинарным щелчком мыши. Получаем следующую картину:

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

Видим такую картину:

Несколько слоев слились в один. Все, теперь мы готовы к нарезке.

Выбираем в панели инструментов “Rectangular Marquee Tool(M)” и обводим логотип произвольным прямоугольником:

Теперь копируем выделенную нами область — нажимаем на клавиатуре комбинацию клавиш

Создаем в Photoshop новый документ — нажимаем Ctrl+N. Откроется новая вкладка с диалоговым окном настройки создаваемого документа:

Здесь самым важным является поле “Preset”. В его значении должно стоять “Clipboard (Буфер обмена)”. Если все было сделано правильно, то Photoshop автоматически создаст новый документ с размерами той области, которую мы скопировали. Размеры программа возмет из “Буфера обмена”, куда была помещена выделенная нами область. Остальные параметры для нас неважны. Нажимаем ОК.

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

Нам осталось вставить в этот документ выделенную область, которая все еще находится в “Буфере обмена”. Для этого нажимаем на клавиатуре Ctrl+V. Результат:

Как видим, Photoshop автоматически обрезал изображение так, чтобы не было пустых областей вокруг него (ведь при выделении мы создали произвольный прямоугольник — лишь бы выделить логотип).

Однако, белый фон остался. А он нам совсем не нужен. Это делается очень просто. Переводим взгляд на “Палитру слоев”” и видим там всего два слоя: “Layer 1” и “Background”. Слой “Layer 1” — это вставленная нами область, а “Background” — фоновое изображение. Щелкаем мышью на значке “глазика” напротив слоя “Background”:

Само изображение в окне Photoshop изменилось — вместо белого фона появилась шахматная “доска”. Это говорит о том, что фоновый слой у нас теперь прозрачный.

Теперь нам осталось только сохранить отредактированное изображение. Переходим в меню “File — Save for Web”:

Здесь нам нужны два поля.

Верхнее — для выбора формата сохраняемого файла. В Интернете имеются подробные описания, как выбрать нужный формат. На самом деле все просто. Формат GIF имеет поддержку прозрачного фона, но не имеет поддержки передачи градиентов. Формат JPEG наоборот, хорошо передает плавные переходы цветов (градиент), но у него отсутствует прозрачный фон. Формат PNG-8 очень похож на GIF, только имеет лучший алгоритм сжатия. Формат PNG-24 имеет как поддержку градиентов, так и прозрачный фон (по другому называется — прозрачные пиксели). В нашем случае нам нужен как градиент, так и прозрачный фон, поэтому выбор однозначен — PNG-24.

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

Все, сохраняем файл с выбранными настройками и задаем ему имя — logo.png.

На этом обзор примера нарезки макета в программе Photoshop заканчиваю. Думаю, он был достаточно полным и понятным.

верстка — определение, правила процесса, подходы и типы

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

Правила процесса верстки

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

• Как будет выглядеть готовый сайт. Можно нарисовать очень красивый дизайн в Photoshop или Figma, но его нужно еще правильно перевести в HTML и CSS, чтобы хотя бы структура страницы была такой, как это изначально задумал дизайнер.
• Скорость загрузки сайта. Использование передовых стандартов HTML-верстки позволяет сильно сократить время загрузки страниц и контента на сайте. Пускай пользователи с хорошим интернет-соединением и не заметят особого прироста в скорости, это отметят поисковые роботы, что повлияет на ранжирование сайта в поисковых системах.
• Качество отображения контента в разных браузерах. Задача верстальщика сделать так, чтобы готовый макет выглядел практически идентично для всех популярных веб-обозревателей, если, конечно, перед ним не была поставлена противоположная задача.
• Адаптивность внешнего вида страниц под другие устройства. Здесь, как и с браузерами, задача верстальщика сделать так, чтобы сайт можно было комфортно просматривать на любых экранах и устройствах.
• Адаптация под требования поисковых систем. В процессе верстки нужно указать специальные теги для прописывания заголовков, ключевых слов, описаний, плюс, правильно расположить их на странице. Также нужно не забывать об оптимизации скорости загрузки, адаптацию под разные браузеры и устройства — это тоже сильно влияет на продвижение ресурса.

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

Валидность верстки

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

Валидность страницы определяется:

1. Корректностью отображения блоков с контентом. Элементарно, если блоки верстки съезжают без какого-либо постороннего воздействия (изменение размера окна, разрешения), то это значит, что верстка невалидна. Вам требуется пересмотреть HTML-каркас или поработать со стилями, если проблема появилась после использования CSS-стилей.
2. Адаптивностью под браузеры и разные размеры экрана. Если какой-то из блоков съезжает, не отображается или ведет себя странно при изменении размера окна, то означает, что ваша верстка невалидна. В идеале, у вас должен быть дизайн макет под мобильные устройства от дизайнера, с которым вы будете сверяться для определения корректности верстки.
3. Наличие SEO-тегов и атрибутов. Их нельзя проверить при внешнем осмотре готовой страницы, но они должны присутствовать, если сайт в дальнейшем будет продвигаться в поисковиках. К таковым относятся различные мета-теги и атрибуты.

Стандартный шаблон расположения элементов в верстке

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

Правила валидности верстки

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

1. Верстка должна корректно отображаться во всех основных браузерах и на разных устройствах или размерах окон. Это мы уже рассмотрели.
2. Всегда заключайте атрибуты тегов в кавычки.
3. Прописывайте основные заголовки исключительно с помощью тегов h2, h3 и так далее. При этом помните, что на странице должен быть только один тег h2, то есть заголовок самой страницы. Использование специальных заголовков необходимо для дальнейшего SEO-продвижения.
4. Необходимо адаптировать верстку под использование через основные CMS. Исключение может быть в том случае, если заказчик не требует в дальнейшем подключение CMS к готовому сайту или в ТЗ уже прописана CMS, которая будет использоваться. В последнем случае нужно приложить все усилия, чтобы верстка корректно работала с выбранной CMS.
5. Максимальное соответствие дизайн-макету. Обычно не требуется верстать “пиксель в пиксель”. Из-за погрешностей в размерах экранов или окон и особенностей программ для работы с дизайном допускаются небольшие расхождения с макетом. Однако они не должны быть заметны при беглом просмотре.
6. CSS-стили нужно выносить в отдельный документ. Если проект сильно большой, то придется использовать сложную структуру из CSS-файлов. Прописывать стили прямо в HTML-структуре можно, но делать это не нужно.
7. Если в дизайне предусмотрено размещение логотипа сайта в верхнем меню и/или в подвале, то его нужно делать в виде ссылки на главную страницу проекта. Исключение допускается только в случае с одностраничными сайтами.
8. Рекомендуется давать понятные имена классам и идентификаторам в верстке, соответствующие их назначению или другим характеристикам. Это упростит и вам работу, и другим разработчикам, если над проектом трудится команда.
9. Прописывайте комментарии к большим кускам кода. По аналогии с предыдущим пунктом так будет проще работать и вам, и коллегам.
10. Придерживайтесь единого стиля оформления кнопок — надписи везде должны быть либо строчными, либо заглавными буквами, размер отступов, цветовая заливка, толщина обводки, реакция на наведение курсора и клик должны тоже быть примерно одинаковыми.
11. Используйте одинаковые единицы измерений в таблицах стилей. Это тоже делает дальнейшую поддержку верстки более удобной.
12. По возможности минимизируйте количество HTML и CSS кода. У вас не должно быть пустых классов, блоков, ненужных повторений стилей.

В идеале ваша верстка должна соответствовать всем указанным условиям.

Структура проекта

Помимо соблюдения основных правил валидной верстки важно соблюдать иерархию файлов и папок в проекте. Здесь можно выделить несколько рекомендаций:

• главная страница всегда верстается в файле index.html. Вам, конечно, ничего не мешает назвать его иначе, но в среде веб-разработки уже крепко закрепилось правило называть главный html-документ в проекте названием index;
• разделяйте HTML-каркас, CSS-стили и JS-скрипты по отдельным файлам. Об этом уже писалось выше. В теории, и скрипты, и стили можно писать прямо в HTML-файле, но такую верстку будет крайне сложно поддерживать;
• для больших проектов может потребоваться несколько файлов со стилями и скриптами. В таком случае в корневой папке проекта рекомендуется создать отдельную папку для CSS, JS или даже для стилей или скриптов отдельных страниц;
• изображения хранятся в папке img или images. Внутри этой папки могут быть другие папки для более лучшей разбивки, например, папка с иконками, фонами и так далее;
• создайте резервные копии. Этот совет больше актуален для крупных проектов.

Пример структуры файлов и папок в небольшом проекте

Подходы и типы верстки

Подходы к верстке определяют общее поведение сайта. Их существует несколько:

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

Пример фиксированной верстки

• Резиновый. Блоки могут менять свою ширину в зависимости от размера окна, через которое просматривается верстка.

Пример резинового макета

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

Пример адаптивного макета

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

Пример поведения отзывчивой верстки

Типы же верстки стоит рассмотреть более подробно. Их выделяют всего три.

Табличный тип

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

Пример табличной верстки

Свои позиции этот тип верстки сохраняется по следующим причинам:

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

Однако, если бы все было так хорошо, то от табличной верстки никто не отказывался бы до сих пор:

1. Во время прогрузки страницы пользователь видит всю таблицу. Если интернет у пользователя плохой, то стили таблицы могут и вовсе не загрузится.
2. Табличная верстка требует соблюдение строгой иерархической структуры, что делает код более громоздким и влияет на качество его поддержки, расширения и скорость загрузки страницы.
3. Поисковые роботы хуже индексируют контент в табличной верстке.

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

Блочный тип

Здесь уже в качестве основной структуры выступают секции и блоки — теги section и div. Сейчас это самый распространенный тип верстки. Стили для каждого блока прописываются отдельно в CSS файле, что, конечно, может создавать некоторые сложности при адаптивной верстке.

Пример блочной верстки

У блочного типа верстки выделяют следующие весомые преимущества:

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

Благодаря своим преимуществам блочная верстка является стандартом HTML-верстки. Конечно, у нее есть некоторые минусы, но они незначительны:

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

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

Верстка слоями

Такое решение появилось недавно и пока еще не сильно распространено. Помимо знаний HTML и CSS здесь потребуются углубленные познания в JavaScript, поэтому данный тип верстки не подойдет новичкам. Он позволяет быстро реализовывать самые разнообразные дизайн-идеи и эффекты. Пока технология только обрабатывается.

У верстки с помощью слоев выделяют такие преимущества:

• еще более быстрая обработка страниц браузером;
• можно указывать расположение элементов на странице с высокой точностью;
• позиционирование слоев позволяет сделать интересную анимацию страниц.

Так как верстка слоями это пока еще новое направление, у него имеются свои недостатки:

• сложность в освоении — помимо HTML/CSS потребуется на хорошем уровне знать JS и различные библиотеки;
• могут быть проблемы с отображением контента в старых версиях даже популярных браузеров, некоторые нововведения могут вообще не поддерживаться текущими версиями браузеров;
• такой сайт сложнее поддерживать и расширять.

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

Заключение

Задача HTML-верстальщика перенести разработанный дизайн-макет в понятный для браузера интерактивный вид. Помимо знаний самого HTML верстальщику будет не выжить без знаний CSS. Также очень желать освоить JavaScript хотя бы на самом базовом уровне.

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

Что должен уметь верстальщик — Блог HTML Academy

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

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

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Верстальщический вундерлист

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

• SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
• Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
• БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
• Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
• PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
• Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей.
• Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
• Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
• jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
• Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что там с Фотошопом и Иллюстратором

Некоторые ребята говорят, что их всерьёз кто-то использует.

Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

А портфолио откуда брать?

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

Что об этом всём думают в индустрии?

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

По опыту: нужно точно, быстро и адаптивно.

Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.

Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.

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

Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

Катя Иванова, перевела бабушку на React.

Что ещё?

Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.

Новая профессия не за горами

Мы перезвоним и расскажем всё о том, как стать верстальщиком.

Нажатие на кнопку — согласие на обработку персональных данных

Программа для верстки книг: какое ПО выбрать

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

Из нашего материала вы узнаете, какая программа для верстки книг сегодня наиболее популярная, можно ли ее успешно заменить бесплатным аналогом, а также получите несколько полезных советов по подбору ПО для верстки.

Требования к верстке книги

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

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

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

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

Выполнение всех перечисленных требований и составляет процесс верстки.

Рекомендации по выбору программы для верстки книг

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

• Приложение Adobe InDesign возглавляет список программ для верстки книг благодаря своей популярности и многозадачности. Недавно вышла шестая версия продукта – InDesign CS6. Программа идеально подходит для сложноструктурированной верстки иллюстрированных книг и журналов, газет с колонками и многочисленными изображениями. Продукт достаточно просто освоить, он отличается богатым функционалом и удобными в работе сочетаниями горячих клавиш. Направляющие, квадратные и прямоугольные рамки и шаблонные полосы приложения значительно облегчают работу с текстовым массивом и иллюстрациями. Дополнительно при верстке могут быть использованы уже известные родственные приложения Adobe, как то Illustrator и Photoshop последних версий. Помимо разнообразных функций в Adobe InDesign есть опция Liquid Layout, что можно перевести как «жидкий» или «текучий» макет, которая открывает еще более широкие возможности в верстке разноформатных блоков. Перечисленные преимущества объясняют все большую популярность приложения не только в издательском бизнесе, но и у разработчиков сайтов.

  Рекомендуем

  «Верстка и дизайн книги: весь процесс от а до я» Подробнее
• В семействе продуктов Adobe есть еще одна программа для верстки книги для печати – это Adobe Pagemaker. Она используется в индустрии уже не одно десятилетие и в сравнении с InDesign может считаться несколько устаревшей, тем более что производитель давно прекратил ее обновление, переключившись на InDesign. Несмотря на почтенный возраст, Pagemaker все еще широко используется, его системные требования ниже, чем у его навороченного «потомка», и позволяют в верстке обойтись не самыми мощными компьютерами, да и само приложение остается надежным и привычным инструментом с хорошим интерфейсом, удобными горячими клавишами и достаточным функционалом.
• Если в верстку попадают технические издания и документы, изобилующие таблицами, формулами и графиками, то решить задачу оформления текста и сложных компонентов помогут такие приложения, как TeX, Framemaker или Ventura Publisher.
• При верстке цветной графической продукции – афиш, буклетов, объявлений и прочей рекламы – ради качества печати специалисты снова возвращаются к проверенным временем редакторам CorelDraw или Photoshop, они лучше всего работают с графикой, рядом с которой текст находится на втором месте. Правда, в случае с многостраничными каталогами, журналами или буклетами разумнее будет отдельно обработать всю графику в CorelDraw или Photoshop, а окончательную верстку издания по полосам уже выполнить в более подходящих для этого программах, в том же InDesign, например.
• За неимением специализированных программ или же навыков работы с ними верстку можно сделать даже в Microsoft Word, так сказать, «на коленке». В общем, это тоже вариант, если в книге в общей сложности страниц восемь, включая обложку. Надо только отдавать себе отчет в том, что это, в первую очередь, непрофессионально, а во вторую, не приведет к качественному результату. MS Word существует исключительно для набора текста и его последующего редактирования, а программы для верстки журналов и книг предназначены именно для работы верстальщика.

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

2 бесплатные программы для верстки книг

Как правило, верстальщик работает с комплексом приложений – InDesign или QuarkXpress для верстки, потом CorelDraw или Illustrator для работы с векторными изображениями и Photoshop для растровых. Это самые известные в России программы, и все они стоят довольно дорого. Если нет возможности купить профессиональный софт, можно рассмотреть работу с бесплатными программами. Расскажем о некоторых из них:

1. Inkscape. Бесплатный редактор для векторных изображений. Самая свежая доступная версия – Inkscape 0.49.2. Работает на компьютерах с Windows, Mac, Linux и другими системами. Есть версия на русском языке. Скорость обработки файлов и набор опций немного меньше, чем у CorelDraw, но вполне пригодна для работы с приложением. Поддерживает CMYK и CDR.
2. GIMP. Растровый редактор. В подготовке растровых изображений и фотографий к верстке способен заменить Photoshop, но не по всем параметрам. Для решения специфических задач все же придется пользоваться Photoshop. Рабочая версия GIMP 2.8.22, вскоре ожидается выход версии 2.10.0. Поддерживает русский язык и работает в среде Windows, Mac, Linux.

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

1. Scribus. Начнем с приложения более высокого технического уровня. Scribus имеет открытый код и свободно для использования. При создании оно было рассчитано на работу в среде Linux, к настоящему времени адаптировано и для других ОС – Windows, Mac, OS X, OS2.

   В Scribus можно подготовить макеты на профессиональном уровне, уже готовые к печати и не требующие дополнительной обработки. Приложение обладает большим набором функций – все самое необходимое и много дополнительных опций – цветовые профили ICC, разделители, поддержка CMYK, создание PDF и многое другое плюс возможность импорта и экспорта данных для пакета Open Office, эффективного аналога Microsoft Office. Процесс верстки в нем похож на работу в GIMP (об этом бесплатном приложении мы рассказали ранее, оно довольно широко известно).

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

2. PagePlus Starter Edition.

   Далее рассмотрим PagePlus Starter Edition (PagePlusSE) – продукт компании Serif, ранее выпустившей популярный бесплатный графический редактор PhotoPlus. PagePlusSE – это облегченный и бесплатный вариант программы PagePlus X8. Да, в бесплатной версии не представлен полный функционал коммерческого собрата, но того, что есть, вполне достаточно для создания макетов объявлений, листовок, небольших лифлетов, используемых в работе благотворительных фондов и не очень больших компаний. Относительная простота приложения является даже преимуществом, оно станет удобным и понятным инструментом для верстальщика, пока не имеющего большого опыта и выполняющего базовые задания.

   Рекомендуем

   «Верстка фотокниги: правила очевидные и не очень» Подробнее

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

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

Начало графического дизайна: верстка и композиция

Урок 3: Макет и композиция

/ en / начало-графический-дизайн / цвет / содержание /

Что такое состав?

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

Почему композиция так важна? Короче говоря, это способ организации вашего контента .Неважно, работаете ли вы с текстом, изображениями или элементами графики; без продуманного, хорошо составленного макета ваша работа развалится.

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

Пять основных принципов

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

Вблизи

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

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

Белое пространство

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

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

Выравнивание

Мировоззрение — это то, с чем вы постоянно сталкиваетесь, даже если вы этого не осознаёте. Каждый раз, когда вы вводите электронное письмо или создаете документ, текст выравнивается автоматически .

При выравнивании объектов самостоятельно (например, изображений или отдельных текстовых полей) сделать это правильно может быть непросто.Самое главное, чтобы соответствовал .

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

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

Контрастность

Контрастность просто означает, что один элемент отличается от другого . В макете и композиции контраст может помочь вам во многих вещах, например, привлечь внимание читателя, создать акцент или привлечь внимание к чему-то важному.

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

Иерархия

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

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

Повтор

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

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

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

Собираем все вместе

Можно сказать, что макет и композиция — это невоспетых героев дизайна. Их роль легко не заметить, но они являются частью всего, что вы делаете.

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

Надеемся, вам понравилось изучать основы композиции!

Обязательно ознакомьтесь с остальными нашими темами о графическом дизайне, в том числе:

/ ru / begin-graphic-design / images / content /

Макет в масштабе HO для начинающих из одного листа фанеры

(Из статьи «Три схемы пути для одного листа фанеры» из августовского 2008 г. Railroader )

  
 Я люблю свою кошку 


  
 Покупайте корм для кошек. 
  
 Упражнение 
  
 Поднимите настроение, друг 


 Конец! 
  

  .wrapper {
  дисплей: гибкий;
}
  

  

  
 Один 
  
 Два 
  
 Три 

  

  .wrapper {
    дисплей: гибкий;
}

.wrapper> div {
    гибкость: 1;
}
  

  

    
 Один 
    
 Два 
    
 Три 

  

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 1fr 1fr;
    сетка-шаблон-строки: 100 пикселей 100 пикселей;
    сетка-пробел: 10 пикселей;
}
  

  

    
 Один 
    
 Два 
    
 Три 
    
 Четыре 
    
 Пять 
    
 Шесть 

  

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 1fr 1fr;
    сетка-шаблон-строки: 100 пикселей 100 пикселей;
    сетка-пробел: 10 пикселей;
}

.box1 {
    сетка-столбец: 2/4;
    сетка-ряд: 1;
}

.box2 {
    сетка-столбец: 1;
    сетка-ряд: 1/3;
}

.box3 {
    сетка-ряд: 2;
    сетка-столбец: 3;
}
  

  

    
 Один 
    
 Два 
    
 Три 

  

   
 Пример простого числа с плавающей запятой 
 

 Плавающий 

 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa в порту. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicleula tellus neque, ac ornare ex malesuada et.In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius Commodo et a urna. Ut id ornare felis, eget fermentum sapien. 

  

  .box {
    плыть налево;
    ширина: 150 пикселей;
    высота: 150 пикселей;
    поле справа: 30 пикселей;
}
  

   
 Расположение 
 

 Я элементарный элемент базового уровня.
 Я базовый элемент уровня блока. 
 Я базовый элемент уровня блока. 
  

  body {
  ширина: 500 пикселей;
  маржа: 0 авто;
}

п {
    цвет фона: rgb (207,232,220);
    граница: 2px сплошной rgb (79 185 227);
    отступ: 10 пикселей;
    маржа: 10 пикселей;
    радиус границы: 5 пикселей;
}
  

  .positioned {
  положение: относительное;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  .positioned {
  положение: относительное;
  фон: rgba (255,84,104, .3);
  граница: 2px сплошной rgb (255,84,104);
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  .positioned {
  позиция: абсолютная;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  .positioned {
    позиция: абсолютная;
    фон: rgba (255,84,104 ,.3);
    граница: 2px сплошной rgb (255,84,104);
    верх: 30 пикселей;
    слева: 30 пикселей;
}  

   
 Фиксированное позиционирование 
 

 Исправлено 

 Пункт 1. 
 Пункт 2 
 Пункт 3 
  

  .positioned {
    положение: фиксированное;
    верх: 30 пикселей;
    слева: 30 пикселей;
}  

  .positioned {
  положение: липкое;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  <форма>
  
 Прежде всего, сообщите нам свое имя и возраст. 
  

     Имя: 
    
  
  

     Фамилия: 
    
  
  

     Возраст: 
    
  
  

  html {
  семейство шрифтов: без засечек;
}

форма {
  дисплей: таблица;
  маржа: 0 авто;
}

form div {
  дисплей: таблица-строка;
}

метка формы, ввод формы {
  дисплей: таблица-ячейка;
  нижнее поле: 10 пикселей;
}

form label {
  ширина: 200 пикселей;
  отступ справа: 5%;
  выравнивание текста: вправо;
}

form input {
  ширина: 300 пикселей;
}

form p {
  display: table-caption;
  caption-side: bottom;
  ширина: 300 пикселей;
  цвет: # 999;
  стиль шрифта: курсив;
}  

  

     
 Многоколоночный макет 
 

    
 Пункт 1. 
    
 Пункт 2 


  

  .container {
        ширина столбца: 200 пикселей;
    }  

 @media screen и (min-width: 480px) {

  .содержание {
    плыть налево;
  }

  .social_icons {
    дисплей: нет
  }

  // и так далее...

}