Экспорт параметров и графики из PSD‑макетов
Нужно получить из макета всё необходимое для стилизации: параметры шрифтов, размеры и отступы, параметры теней и скруглений и так далее. Также нужно экспортировать всю графику, в оптимальном формате и оптимальном соотношении качество/вес.
Зачем нужен этот навык:
Входные данные для вёрстки сайта — обычно макет, часто в формате PSD. Верстальщик самостоятельно открывает макет в графическом редакторе Photoshop, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать. Графический редактор Photoshop — один из самых распространённых на рынке, он работает на Windows и MacOS и более десяти лет используется дизайнерами для создания макетов.
Расположение относительно других навыков:
Это стартовый навык, который является фундаментом для остальных навыков. В дереве навыков он находится на самом верху, а значит осваивать его можно сразу после получения базовых знаний по HTML и CSS.
Минимальные требования для освоения:
Пройдено три части тренажёра Знакомство с HTML и CSS:
- Ссылки и изображения,
- Основы CSS,
- Оформление текста.
Состав навыка
Подготовительный материал
Дополняет базовые знания, полученные в курсах для новичков, всем необходимым для начала отработки кейсов.
Углублённая теория
3 раздела углублённой теории общим объёмом 16 страниц.
Включает следующую информацию:
- Обзор интерфейса и основных функций Фотошопа, которые нужны для работы верстальщика.
- Инструкция по настройке программы для корректной работы.
- Словарик с кратким списком терминов и их значениями.
Инструкция по работе с макетами
Методики получения данных о тексте, определения цвета элементов, работы с эффектами, измерения расстояний и экспорта графики общим объёмом 40 страниц.
Демонстрационные кейсы
Два демонстрационных кейса, по одному для лёгкого и сложного уровня.
Показывают как применять описанные выше инструкции по работе с макетами.
В каждом кейсе в качестве входных данных мы получаем дизайн-макет. Затем, используя предложенную методику, пошагово извлекаем необходимые параметры и графику. На выходе получаем список параметров и папку с изображениями. Все шаги детально описаны.
Так выглядят некоторые страницы кейсов:
Пошаговые разборы кейсов
Один разбор для каждого демо-кейса.
Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и премерами кода.
Так выглядит один из шагов разбора кейса лендинга «Yes»:
Тренировочный материал
Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.
Шесть тренировочных кейсов: 2 лёгкого уровня, 3 среднего уровня и 1 сложного уровня.
В качестве входных данных вы получаете дизайны страниц, на выходе должны получиться снятые параметры макетов и графика.
Для тренировочных кейсов разборы более компактные и включают эталонное решение от авторов, которое можно сравнить со своим.
Так выглядят некоторые страницы кейсов:
Фотошоп для верстальщика (программиста)
Статья-руководство будет полезна для новичков и для тех, кто ещё не перешел на новые/альтернативные инструменты для вёрстки макетов сайтов. А также для тех, кто читает правила «каким должен быть псд-макет», которые о слоях, папках подсвеченных и правильно названных, но в реальной жизни с такими макетами не сталкивающихся.
Итак, начнем (под катом длинная статья и много картинок).
Создание нового файла
Происходит по нажатию клавиш Ctrl + N или как на рисунке ниже (у меня версия на русском языке, пусть простят меня, те кому больше по душе англоязычная версия):
После чего появляется окно с настройками нового документа:
Красной рамкой обведены самые важные пункты для верстальщика: размер новой рабочей области и единицы измерения этих размеров. Ширину и высоту можно задавать вручную, а при копировании изображения из другого макета или вставки скриншота экрана размеры устанавливаются автоматически. В качестве единиц измерения стоит использовать пикселы.
Также размеры рабочей области и размеры изображения можно задать с помощью меню «Размер изображения» (Alt + Ctrl + I) и «Размер холста» (Alt + Ctrl + C)
При помощи меню «Размер изображения» изменяется весь размер изображения, т. е. изображение шириной в 400 px можно уменьшить, к примеру, до 100 px. При включенном чекбоксе «Сохранять пропорции» размеры изображения будут уменьшать пропорционально.
При помощи меню «Размер холста» изменяется размер рабочей области, т. е. рабочую область изображения в 400 px можно уменьшить до 100 px, при этом изображение останется тех же размеров и часть изображения скроется за пределами уменьшенной рабочей области. В блоке «Расположение» можно задавать с какой стороны будут удаляться или добавляться пикселы (при установленном фокусе в центре квадрата пикселы будут удаляться или добавляться со всех сторон равномерно).
Какие блоки должны быть включены обязательно
Панель инструментов. Не требует особых объяснений, так как переключение между основными функциями для верстальщика находятся на ней.
Навигатор. Для быстрого изменения размера макета.
История. Для быстрого возврата в макета в нужное состояние, а так же в состояние в котором макет отдал дизайнер.
Слои. Папки и слои макета, на этой панели их можно скрыть, переместить, удалить.
Инфо. Показывает текущие координаты на макете и размеры выделенной области. Необходимо настроить для отображения размеров в пикселах и цветов в RGB.
Линейки и наводящие. По ним выстраиваются направляющие (с помощью которых дизайнер определяет сетку макета), а так же они дают примерное понимание ширины макета или выделенных областей
Панель Инструментов
Инструмент «Перемещение» — один из самых полезных инструментов (надеюсь о нём знает большинство опытных верстальщиков). При включенных чекбоксах и выбранном правильном меню в селекте позволяет при клике на слой выделить слой в панеле Слоев, что ускоряет работу с макетом (а также сохраняет нервы при работе с макетами, в которых слои больше напоминают мусорную корзину, а не структуру документа)
Инструмент «Прямоугольная область». Выделенную область можно копировать, вырезать, удалить, трансформировать, кадрировать по ней макет.
Кстати, копирование с помощью Ctrl + C скопирует все изображения/тексты только с выделенного слоя. Потому если изображение состоит из нескольких слоев надо использовать копирование совмещённых данных Shift + Ctrl + C
При зажатой клавише Shift можно добавить область выделения, к уже существующей на макете, При зажатой клавише Alt — удалить часть текущей выделенной области.
Также с помощью выделенной области можно кадрировать макет, что означает уменьшение рабочей области макета до размеров выделенной области с обрезкой всего, что выходит за рамки выделенной области.
Инструмент «ластик». Используется для удаления содержимого выделенного слоя.
Инструмент «Заливка». Используется для заливки слоя или выделенной области цветом или градиентом.
Инструмент «Лупа». Используется для увеличения или уменьшения макетов (Zoom).
Инструменты «Пипетка» и «Выбор цвета». Используются для получения цвета по клику на макете или на палитре цветов. При нажатии на выбор цвета внизу панели инструментов, инструмент «пипетка» включается автоматически.
Инструмент «текст». Используется для создания/редактирования текста в макете, а также для получения информации о набранном тексте.
С помощью меню в верхней плашке можно получить информацию о шрифте, размере и начертании шрифта, а также цвет текста.
Сохранение изображений
Макет или какую-то его часть можно сохранить в виде изображения. Для этого используется сочетание клавиш Alt + Shift + Ctrl + S или меню «Сохранить для Web»
В появившемся окне видно превью изображения, можно выбрать формат изображения (в правом верхнем углу окна) и после сохранить изображение
PS. Я использую фотошоп версии CS6, потому не знаю, как происходит сохранение в изображения в более новых версиях, потому, если кто знает, напишите в комментах, я добавлю в статью.
Дополнительная глава. Работа с PSD-макетом
После того, как дизайнер заканчивает свой этап работы, он передает верстальщику PSD-макеты сайта. Что же такое PSD-макет?
PSD-макет — это дизайн сайта, состоящий из самостоятельных элементов — слоев. Обычно такие макеты создаются с помощью программы Adobe Photoshop.
В центральной части окна отображается сам макет, в правой части — сгруппированные слои, в левой части — панель с инструментами, вверху — основное меню и параметры активного инструмента.
Давайте теперь детальнее разберем основные функции и возможности программы, которые потребуются при работе с макетом.
Панель со слоями
В данной панели находятся все слои, из которых состоит дизайн.
Что мы можем понять, взглянув на этот пример. Во-первых, дизайн состоит из нескольких смысловых разделов, такик как «Blog». Во-вторых, секция «Blog » состоит из текстовых слоев, изображения для поста и группирированных слоев. Теперь детальнее рассмотрим слои.
Текстовый слой обозначается символом «Т». Если рядом с ним расположен знак предупреждения, то это показывает, что блок имеет нестандартный шрифт, который нужно установить. А в дальнейшем подключить, используя сайт Google Fonts.
Слой с изображением новости включает в себя картинку, которую верстальщику требуется вырезать и сохранить в формате JPG.
Панель инструментов
При работе с макетом вам также потребуется панель с инструментами.
Для вас я отметил основные инструменты, которые необходимы при работе. Теперь рассмотрим их подробнее.
“Рамка”
В случаях, когда вам нужно обрезать края у изображения или вырезать его часть, вы можете использовать этот инструмент.
“Пипетка”
Этот инструмент необходим для захвата цвета. Выделив инструмент «пипетка» и нажав на любой элемент макета, его цвет отобразится в инструменте “Активный цвет”. Нажав на данный инструмент, появится окно.
В данном окне вы можете узнать цвет в формате RGB или в шестнадцатеричном формате.
“Заливка”
Когда вам необходимо залить фон, то это можно сделать, используя данный инструмент. Но надо учесть, что фон зальется активным в данный момент цветом.
“Горизонтальный текст”
При работе с текстовыми слоями вам потребуется этот инструмент. Для этого нужно выделить нужный текстовый слой и выбрать инструмент. Сверху отобразятся параметры шрифта.
“Рука”
При работе с макетом часто приходится перемещаться по нему при увеличенном масштабе. Это будет удобнее сделать благодаря инструменту “Рука”.
“Масштаб”
При верстке маленьких элементов макета, требуется увеличить масштаб файла. Вы можете сделать это, используя данный инструмент.
Мы рассмотрели основные инструменты в панели, но также есть дополнительные, которые можно использовать. Чтобы их увидеть, нужно нажать правой кнопкой мыши по иконкам. Мы рассмотрим 2 дополнительных инструмента — “Линейка” и “Раскройка”.
“Линейка”
Для того чтобы измерить ширину и высоту элементов, используют данный инструмент.
“Раскройка”
Данный инструмент очень похож на инструмент “Обрезка”. Но в отличии от него, “Раскройка” вырезает часть изображения, которую вы можете сохранить в отдельном слое или документе.
Мы рассмотрели инструменты, и теперь мы можем приступить к работе. Но, для начала нам требуется настроить программу.
Требуемые настройки
Первым, что мы сделаем — установим флажок «Авто-выбор» (Auto-Select) в верхнем левом углу.
Теперь при клике на визуальном представлении в панели слоев откроется соответствующий слой. Во-вторых, мы настроим единицы измерения. Для этого нужно выбрать пункт меню «Редактирование» (Edit) и в пункте «Настройки» (Preferences) выбрать «Единицы измерения и линейки» (Units&Rulers). Появится окно, в котором вам требуется установить параметры.
Горячие клавиши
ctrl + TAB — переключение вкладок; Alt + колесико — увеличение/уменьшение масштаба (инструмент “Масштаб”); Зажатый пробел — перетаскивание (инструмент “Рука”); ctrl + S — сохранить; ctrl + Z — отмена; ctrl + alt + Z — шаг назад (многократный); ctrl + shift + Z — шаг вперед (многократный); ctrl + shift + Alt + S — сохранить изображение для Web; M — инструмент “Прямоугольная область”; ctrl + D — отмена выделения; I — инструмент “Пипетка”; C — инструмент “Рамка”; Shift + C — инструмент “Раскройка”; T — инструмент “Горизонтальный текст”.
Работа с изображениями
Теперь мы вернемся к нашему макету и продолжим с ним работу. У нас есть изображение «новости». Для верстки, нам нужно сохранить его в отдельном JPG файле. Для этого делаем следующие действия.
Первое, выберем слой “notebook3_1200x800” и нажмем правой кнопкой мыши. Появится контекстное меню.
В данном меню выбираем «Создать дубликат слоя» (Duplicate layer) и нам откроется окно, в котором нужно установить следующие параметры.
У нас сохранится изображение в новом документе. Но размеры документа будут равны размерам макета, что для нас излишне. Теперь нам требуется обрезать лишнее пространство вокруг картинки. Для этого в меню выбираем пункт «Изображение» (Image), а в нем «Тримминг» (Trim).
Далее появляется окно, в котором нужно выбрать следующие параметры.
Все готово! Теперь нам нужно сохранить изображение для Web. Для этого нажимаем сочетание клавиш ctrl + shift + Alt + S.
Я рассмотрю два случая, когда нам нужно сохранить изображение в формате PNG и JPG.
Сохранение в формате PNG
После нажатия, у нас откроется окно с настройками. Для вас я уже установил нужные значения.
Нам нужно установить формат изображения PNG-24. Далее в поле «Метаданные» (metadata) установить значение «Не показывать» (None). Это необходимо для того, чтобы в изображении не сохранилась метаинформация.
Сохранение в формате JPG
Для того чтобы сохранить изображение в формате JPG, в поле «Формат» нужно выбрать «Высокое качество JPEG» (JPEG High). Также, необходимо установить параметры «Качество» и «Метаданные», как показано на изображении.
results matching » «
No results matching » «
Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?
Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.
Как вырезать и сохранять картинки?
Простые картинки, которые состоят из геометрических фигур, лучше всего описывать посредством CSS. Такой метод не будет нагружать сайт, а значит скорость загрузки не пострадает.
Если такой возможности нет, нам потребуется вырезать картинки из макета. Но стоит помнить, что некоторые картинки стоит сохранять по одной, а другие — лучше вывести в отдельный спрайт. Например, социальные иконки. Их я советую размещать в одной картинке. Выглядеть это будет примерно так:
Итак, чтобы вырезать картинку из макета, надо, во-первых, найти слой с картинкой.
Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».
Картинку перенесет в пустой документ по длине и ширине схожим с размерами прошлого макета. Искать в ней картинку бывает довольно проблематично, особенно, если она прозрачная. Чтобы этого не делать достаточно зажать Ctrl и кликнуть по иконке нужного слоя с картинкой. Он выделится пунктиром.
Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.
Жмем Enter. Наша картинка готова.
Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web
Как правило, картинки сохраняют в JPEG и PNG-24.
Сохранение SVG картинок в Photophop
Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»
Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.
Информация о font-family, font-size, line-height, color
Чтобы найти данные по этим трем компонентам, достаточно дважды кликнуть на слой с текстом, чтобы он стал активным. Как правило, информацию о font-family и font-size можно найти в верхней панели, а данные о line-height в окне «Символ». Обычно он располагается в правой части, но если его пока там нет, достаточно открыть его через Окно -> Символ.
Информация о margin и padding
Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент «Прямоугольная область» и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.
Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.
Информация об opacity
Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности. Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна «Слои». На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%. Следовательно, в css следует записать следующее: opacity: 0.9
Горячие клавиши Photoshop для верстака
В процессе верстки я применяю «горячие клавиши», которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:
Ctrl + «-« — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»
P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.
Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю: