Что такое PSD-шаблон и как его правильно верстать

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

Что такое PSD-макет сайта

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

Многие команды работают в Figma, однако PSD-файлы тоже поступают на верстку.

Слои поддерживают и другие форматы: PSB, XCF, документы Figma и Sketch.

Каким должен быть PSD-макет, удобный для верстки

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

Смарт-объект может содержать как векторное, так и растровое изображение. Само наличие значка смарт-объекта не гарантирует бесконечное масштабирование.

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

Не объединяйте слои в рабочем исходнике ради удобства просмотра. Сохраните копию PSD перед изменениями: она позволит восстановить исходное оформление.

Чем открыть PSD-файл

Photoshop подходит для изучения документа в родном формате. Photopea дает браузерный вариант работы, GIMP – настольную альтернативу. Для сложного PSD попросите у дизайнера контрольное изображение всей страницы.

Откройте копию документа через диалог открытия файлов редактора. В Photopea перетащите PSD в пустую рабочую область браузера. Если документ уже открыт, перетаскивание в основную область вставит файл смарт-объектом. После загрузки проверьте список слоев и видимость групп.

Сравните документ с контрольным изображением дизайнера.

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

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

Как снять с макета размеры, цвета и шрифты

Ведите небольшую таблицу параметров рядом с рабочим кодом. Запишите ширину контейнера, интервалы, цвета и текстовые стили. Повторяющиеся значения затем удобно перенести в CSS-переменные.

Размеры и расстояния в Photoshop

1. Выберите нужный элемент в панели слоев. Поочередно отключите и включите его видимость: на холсте должен исчезать именно этот элемент.
2. Посмотрите ширину и высоту выделенного объекта в панели свойств. Для измерения геометрии используйте пиксели, а не сантиметры.
3. Снимите координаты левого верхнего угла объекта. Координаты внутри монтажной области сравнивайте с координатами той же области.
4. Вычислите расстояние до соседнего блока по его координатам. Из начала второго блока вычтите конец первого.
5. Проверьте размер по прямоугольному выделению на холсте. Числа ширины и высоты выделенной области помогают измерять растровые элементы.

Например, первый блок начинается на X = 100 px и имеет ширину 240 px. Соседний блок начинается на X = 364 px. Расстояние между ними составляет 364 − (100 + 240) = 24 px.

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

Учитывайте масштаб холста: визуальный размер на экране не равен размеру документа.

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

Цвет и параметры текста

1. Выберите пипетку и щелкните по ровному участку заливки. В образце цвета появится выбранный оттенок.
2. Откройте образец цвета и скопируйте HEX-значение. Например, значение 336699 превращается в CSS-цвет #336699.
3. Выберите текстовый слой, затем выделите нужный фрагмент инструментом текста. Это важно, если внутри слоя встречаются разные начертания.
4. Прочитайте параметры в панели символов. Запишите семейство, начертание, размер, интерлиньяж и трекинг.
5. Сопоставьте текст с контрольным изображением после подключения шрифта. Одинаковый размер не исправляет ошибочно выбранное начертание.

Пипетка на полупрозрачном объекте снимает результат смешивания с фоном.

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

Если размер текста указан в пунктах, учитывайте разрешение документа. Формула перевода: px = pt × ppi / 72. Например, при 72 ppi размер 18 pt соответствует 18 пикселям документа.

Единица rem зависит от размера шрифта корневого HTML-элемента. При корневом размере 16 px значение 24 px соответствует 1,5 rem.

Трекинг Photoshop делится на 1000: значение 20 дает letter-spacing: 0.02em.

.title {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #336699;
}

В этом примере интерлиньяж составляет 30 px при кегле 24 px. Безразмерный line-height: 1.25 сохраняет отношение при изменении размера текста.

Измерения в Photopea

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

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

Параметры текста смотрите при выделенном текстовом фрагменте в панели символов.

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

Как экспортировать картинки и иконки из PSD

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

Подготовка и экспорт отдельного элемента

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

1. Откройте Photopea с пустой рабочей областью, без других документов. Перетащите туда копию PSD и дождитесь появления холста и списка слоев.
2. Отключите видимость посторонних групп значками глаза рядом с ними. На холсте должен остаться только нужный элемент со своими эффектами.
3. Выберите инструмент кадрирования со значком рамки на панели инструментов. Обведите элемент, оставляя место для теней, и подтвердите кадрирование клавишей Enter.
4. Откройте «File» → «Export As» в верхнем меню редактора. Выберите PNG или JPG.
5. Задайте ширину и высоту выходного файла в пикселях. Для элемента 300 × 200 CSS-пикселей подготовьте также вариант 600 × 400 пикселей.
6. Нажмите кнопку сохранения в окне экспорта. Браузер скачает файл или предложит выбрать папку для него.
7. Откройте полученный файл в браузере и проверьте края, фон и размеры. Переименуйте увеличенный вариант, например в cover@2x.png.

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

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

Увеличение маленького растра не добавляет настоящей детализации.

Для варианта @2x используйте исходное изображение достаточного разрешения. Векторный элемент можно растрировать сразу в нужном увеличенном размере.

Как получить WebP из PNG или JPG

Браузер может преобразовать подготовленную картинку через Canvas без загрузки на сервер. Создайте текстовый файл convert.html, вставьте код и откройте файл в браузере.

<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<title>Преобразование в WebP</title>
<label>Выберите PNG или JPG:
  <input id="source" type="file" accept="image/png,image/jpeg">
</label>
<p id="status">Файл пока не выбран.</p>
<a id="result" hidden>Скачать WebP</a>
<script>
const input = document.getElementById('source');
const status = document.getElementById('status');
const result = document.getElementById('result');
let resultURL;

input.addEventListener('change', async () => {
  result.hidden = true;
  if (resultURL) URL.revokeObjectURL(resultURL);
  const file = input.files[0];
  if (!file) return;
  status.textContent = 'Преобразование…';
  let bitmap;
  try {
    bitmap = await createImageBitmap(file);
    const canvas = document.createElement('canvas');
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    canvas.getContext('2d').drawImage(bitmap, 0, 0);
    const blob = await new Promise(resolve =>
      canvas.toBlob(resolve, 'image/webp', 0.85)
    );
    if (!blob || blob.type !== 'image/webp') {
      throw new Error('Браузер не создал WebP. Откройте файл в Chrome или Firefox.');
    }
    resultURL = URL.createObjectURL(blob);
    result.href = resultURL;
    result.download = file.name.replace(/\.[^.]+$/, '') + '.webp';
    result.hidden = false;
    status.textContent = `${canvas.width} × ${canvas.height} px; ` +
      `${Math.round(blob.size / 1024)} КБ; ${blob.type}`;
  } catch (error) {
    status.textContent = error.message;
  } finally {
    bitmap?.close();
  }
});
</script>
</html>

Нажмите поле выбора файла и выберите экспортированный PNG или JPG. Когда появятся размеры и тип image/webp, нажмите «Скачать WebP». Откройте скачанный файл и сравните его с исходником.

Код сохраняет размеры и прозрачность, но применяет сжатие с потерями. Значение 0.85 задает качество кодирования: попробуйте 0.75 или 0.9. После изменения кода перезагрузите страницу и снова выберите исходник.

SVG и оптимизация веса

Для иконки сначала проверьте содержимое слоя или смарт-объекта. Если внутри есть векторный оригинал, получите SVG из этого оригинала. Когда экспорт SVG недоступен, запросите векторный файл у дизайнера. Для временной растровой замены подготовьте прозрачный PNG нужной плотности.

Не оборачивайте PNG в SVG ради расширения файла: такая упаковка сохраняет ограничения исходного растра.

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

Верстка по макету: от сетки до адаптива

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

Один смысловой блок может объединять десятки слоев макета.

Опишите шапку тегом <header>, навигацию – <nav>. Основное содержимое поместите в <main>, дополнительные материалы – в <aside>. Для подвала используйте <footer>.

Двухколоночная страница на Grid

Создайте рядом файлы index.html и styles.css. Поместите разметку в первый файл, стили – во второй. Пример использует текстовый логотип и системный шрифт, поэтому дополнительных ресурсов не требует.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Страница по макету</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header container">
    <a class="logo" href="/">Студия</a>
    <nav aria-label="Основная навигация">
      <a href="#contacts">Контакты</a>
    </nav>
  </header>

  <div class="layout container">
    <main>
      <h1>Дизайн и разработка</h1>
      <p>Создаем понятные сайты для небольших компаний.</p>
    </main>
    <aside aria-labelledby="aside-title">
      <h2 id="aside-title">Наши услуги</h2>
      <p>Проектирование, дизайн и верстка.</p>
    </aside>
  </div>

  <footer class="footer container" id="contacts">
    <p>Напишите: hello@example.com</p>
  </footer>
</body>
</html>

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #202530;
}

.container {
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin-inline: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
}

.logo { font-weight: 700; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 2rem;
}

main, aside {
  min-width: 0;
  padding: 1.5rem;
  background: #f1f4f8;
  border-radius: 0.75rem;
  overflow-wrap: anywhere;
}

h1, h2 { margin-top: 0; }

img {
  max-width: 100%;
  height: auto;
}

.footer { padding-block: 2rem; }

@media (max-width: 48rem) {
  .layout { grid-template-columns: 1fr; }
}

Откройте index.html в браузере. На широком экране контент и боковая панель образуют две колонки. При сужении окна до 48 rem или меньше панель переместится под контент.

Контейнер ограничивает ширину через max-width, сохраняя боковые поля. Grid распределяет доступное пространство между колонками в отношении 3:1. Flexbox выравнивает логотип и навигацию внутри шапки.

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

Значения 72 rem и 48 rem здесь служат учебным примером.

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

Шрифты, картинки и промежуточные ширины

Подключите согласованный шрифт через @font-face или Google Fonts. Локальный файл размещайте только при наличии подходящей веб-лицензии. Для каждого используемого начертания укажите соответствующий font-weight.

Например, разместите файл шрифта в fonts/project-regular.woff2 рядом с index.html. Добавьте в начало styles.css правило @font-face, заменив путь своим:

@font-face {
  font-family: "Project";
  src: url("fonts/project-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Затем найдите существующий блок body в основном примере CSS. Замените в нем строку font-family: system-ui, sans-serif; следующей:

font-family: "Project", sans-serif;

Остальные свойства body оставьте прежними; второй блок создавать не нужно.

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

Для растровой картинки подготовьте обычный и удвоенный варианты. Например, файлы 300 × 200 и 600 × 400 пикселей описываются так:

<img src="images/cover.jpg"
     srcset="images/cover.jpg 1x, images/cover@2x.jpg 2x"
     width="300" height="200"
     alt="Рабочее место дизайнера">

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

Для изображений переменной ширины используйте дескрипторы w вместе с sizes.

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

Как проверить верстку на соответствие макету

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

Наложение макета в браузере

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

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

const picker = document.createElement('input');
picker.type = 'file';
picker.accept = 'image/png';
picker.addEventListener('change', () => {
  const file = picker.files[0];
  if (!file) return;
  const overlay = document.createElement('img');
  overlay.src = URL.createObjectURL(file);
  overlay.id = 'psd-overlay';
  Object.assign(overlay.style, {
    position: 'absolute', top: '0', left: '0',
    width: 'auto', height: 'auto', maxWidth: 'none',
    opacity: '0.5', pointerEvents: 'none',
    zIndex: '2147483647', margin: '0', padding: '0',
    border: '0', transform: 'none'
  });
  overlay.onload = () => URL.revokeObjectURL(overlay.src);
  document.body.append(overlay);
});
picker.click();

Установите ширину viewport равной ширине экспортированной монтажной области. Верните масштаб браузера к 100%, прокрутите страницу в начало. При совпадении геометрии границы блоков почти не будут двоиться.

Если макет экспортирован в масштабе @2x, сначала уменьшите его размеры вдвое.

Для проверки полной страницы используйте PNG всей монтажной области. Код размещает изображение от начала документа и прокручивает вместе со страницей.

Чтобы убрать наложение, выполните document.getElementById('psd-overlay')?.remove().

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

Проверка адаптива и текстовых расхождений

1. Включите эмуляцию устройств в DevTools кнопкой со значком телефона и планшета. Введите ширину мобильной монтажной области в поле ширины viewport.
2. Сравните порядок блоков, боковые поля и размеры изображений. На узком экране боковая панель примера должна оказаться под основным содержимым.
3. Плавно меняйте ширину между контрольными значениями. Ищите переполнение, неудачные переносы и наложение соседних элементов.
4. Добавьте в карточку длинный заголовок и дополнительный абзац. Блок должен увеличиться по высоте, сохранив читаемость текста.
5. Пройдите по ссылкам и полям клавишей Tab. Фокус должен оставаться заметным, а порядок переходов – понятным.

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

Универсального допуска в пикселях для всех проектов нет.

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

Ошибки при верстке из PSD

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

• Текст экспортирован картинкой. Пользователь не сможет нормально выделять, искать и увеличивать надпись. Перенесите содержимое в HTML и настройте типографику через CSS.
• Простое оформление нарезано изображениями. Растровые скругления, тени и однотонные фоны усложняют изменение размеров. Используйте border-radius, box-shadow и background.
• Ширина страницы зафиксирована. Контейнер шире viewport создает горизонтальную прокрутку. Ограничивайте максимальную ширину, сохраняя возможность сужения.
• Текстовым блокам задана жесткая высота. Дополнительная строка выходит за границы карточки. Разрешите блоку расти вместе с содержимым.
• Для плотного экрана взят маленький растр. Изображение теряет четкость при увеличении. Подготовьте ресурс @2x из достаточно крупного исходника либо используйте вектор.
• Файл шрифта принят за разрешение на использование. Наличие файла не заменяет веб-лицензию. Получите подходящее разрешение или согласуйте другой шрифт.
• Мобильное поведение придумано без согласования. Десктопный макет не объясняет все перестроения. До верстки уточните меню, порядок блоков и состояния формы.

Если PSD хорошо организован, начинайте с измерений и семантической разметки. Если текст растрирован или отсутствуют исходники, сначала запросите недостающие материалы. Такой порядок сокращает переделки после первого сравнения с дизайном.

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