Psd макеты для начинающих верстальщиков: PSD макеты сайтов для новичков во вёрстке

Экспорт параметров и графики из PSD‑макетов — HTML Academy

Описание навыка

Профессиональная задача:

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

Зачем нужен этот навык:

Входные данные для вёрстки сайта — обычно макет, часто в формате PSD. Верстальщик самостоятельно открывает макет в графическом редакторе Photoshop, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать. Графический редактор Photoshop — один из самых распространённых на рынке, он работает на Windows и MacOS и более десяти лет используется дизайнерами для создания макетов.

Расположение относительно других навыков:

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

Минимальные требования для освоения:

Пройдено три главы курса Знакомство с HTML и CSS:

• Ссылки и изображения,
• Основы CSS,
• Оформление текста.

Состав навыка

Подготовительный материал

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

Углублённая теория

3 раздела углублённой теории общим объёмом 16 страниц.

Включает следующую информацию:

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

Инструкция по работе с макетами

Методики получения данных о тексте, определения цвета элементов, работы с эффектами, измерения расстояний и экспорта графики общим объёмом 40 страниц.

Демонстрационные кейсы

Два демонстрационных кейса, по одному для лёгкого и сложного уровня.

Показывают как применять описанные выше инструкции по работе с макетами.

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

Так выглядят некоторые страницы кейсов:

Пошаговые разборы кейсов

Один разбор для каждого демо-кейса.

Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и премерами кода.

Так выглядит один из шагов разбора кейса лендинга «Yes»:

Тренировочный материал

Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.

Шесть тренировочных кейсов: 2 лёгкого уровня, 3 среднего уровня и 1 сложного уровня.

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

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

Так выглядят некоторые страницы кейсов:

Графические редакторы | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Изучение верстки — это не только познание способов стилизации элементов, но и верстка макетов. Чтобы начать верстать макеты, их нужно как-то увидеть и понять, как с ними работать.

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

1. Adobe Photoshop. Самый старый редактор, который был стандартом много лет. Сейчас же отступает на второй план ввиду своей сложности в освоении. Перегрузка различными функциями также не красит его — многие функции просто не нужны для верстальщика, но память устройства они благополучно съедают. Редактор доступен на системах под управлением Microsoft Windows и macOS. Официальной версии под системы Linux сейчас нет.
2. Gimp. Аналог Photoshop для систем Linux. Имеет схожий функционал и может корректно открывать некоторые файлы в формате Photoshop. Но не стоит надеяться, что он может стать полноценной заменой. Если дизайнер присылает исходники в Photoshop, то нет полной уверенности в корректном открытии файла через Gimp. Так же, как Photoshop, Gimp не является специализированным инструментом для веб-дизайнеров, поэтому многие функции не нужны.
3. Sketch. Специализированный редактор для проектирования мобильных и веб интерфейсов. Это является большим плюсом, так как разработчики ориентируются именно на удобное проектирование интерфейсов. Для верстальщиков здесь множество плюсов: удобный просмотр макета, размеров, отступов и другой информации, которая поможет при переносе макета. Главным минусом редактора является поддержка одной операционной системы — macOS.
   Разработчики ориентированы на работу только с этой системой, и переноса редактора на другие ОС не ожидается.
4. Figma. Редактор, который работает в браузере. Просмотр макетов в нем доступен с любого устройства, которое имеет браузер и выход в интернет. Если ваша кофемолка умеет это, то можно верстать и с ее помощью. Редактор, как и Sketch, ориентирован на создание интерфейсов, что положительно сказывается на удобстве работы с ним. Именно этот редактор используется для проектов и некоторых испытаний, где вам дается макет для верстки. Также является бесплатным для личного пользования.

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

В этом уроке мы рассмотрим базовые действия при работе с редактором Figma.

Установка

Как и было сказано выше, Figma не требует установки. Ее работа осуществляется через браузер. Достаточно перейти на сайт figma.com и зарегистрироваться.

Помимо этого есть возможность поставить отдельное приложение. Это скорее вопрос удобства, так как вместо вкладки вы получите отдельное окно для работы с редактором. Сейчас приложение доступно для операционных систем Windows и macOS. Скачать их вы можете на странице загрузки Figma.

Для систем Linux есть специальные варианты установки под разные типы систем. Их можно найти на GitHub.

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

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

В этом разделе посмотрим на основные действия при работе верстальщика с редактором. В качестве примера будет использован шаблон испытания Hero Section курса CSS: Flex.

1. Зарегистрируйтесь в сервисе Figma. Это позволит вам удобно просматривать элементы макета.
2. Откройте макет испытания Hero Section.

Окно работы с Figma можно разбить на 4 функциональные области:

Шапка

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

Слои

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

Слои можно объединять в различные группы. Так удобно разделять слои различных частей макета. В макете Hero Section есть следующие группы:

• Left Side
• Right Side

Инспектор

Самая полезная секция для верстальщика. Инспектор позволяет увидеть все настройки выбранного элемента в секции «Слои».

Сейчас выбран текст «Фронтенд программист». Какие параметры можно получить об этом элементе:

• Properties
  • Ширина текста: 580px
  • Высота: 141px. Обратите внимание, что это значение именно текста, а не блока, в котором он лежит
  • Значения top и left. Это значения относительно левого верхнего края макета. Чаще всего эти значения бесполезны, но бывают ситуации, когда есть смысл присмотреться к этим значениям
• Content
  • Здесь находится тот контент, который расположен внутри слоя. Этот пункт актуален для текста. Если кликнуть по контенту, то он автоматически копируется
• Typography
  • Font: название шрифта. Определяется свойством font-family
  • Weight: насыщенность шрифта. Определяется свойством font-weight
  • Style: стиль шрифта. Определяется свойством
    font-style
  • Size: размер шрифта. Определяется свойством font-size
  • Line height: межстрочный интервал. Определяется свойством line-height
• Colors
  • Здесь можно увидеть цвет элемента. При клике можно скопировать значение цвета
• CSS
  • Здесь находится автоматически сгенерированный CSS для выбранного элемента. Не стоит полагаться на эти значения, так как многие свойства используются некорректно. Например, значения позиционирования

Окно просмотра макета

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

Если выбрать слой «Узнать больше», зажать клавишу Alt или cmd для macOS и навести на соседний элемент, то Figma автоматически подскажет расстояние между элементами.

По этому изображению можно сразу узнать несколько параметров элемента:

1. Размер элемента «Узнать больше» — 127×40 пикселей.
2. Расстояние от текста до элемента «Узнать больше» — 16 пикселей.

---

Самостоятельная работа

Используя примеры из урока, узнайте все доступные свойства основного текста:

1. Параметры шрифта

2. Цвет шрифта

3. Расстояние от текста до заголовка «Фронтенд программист»

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

шаблонов Photoshop | Холст заказчика

• 8 минут на чтение

Холст клиента может импортировать шаблоны из файлов PSD. В результате он преобразует их во внутренний формат .st на основе JSON. В большинстве сценариев вам не следует работать с файлами .st напрямую, поэтому, вероятно, проще думать об этом как об «открытии» PSD-файлов в редакторе дизайна.

Примечание

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

Действительные шаблоны PSD

Вы не можете загрузить произвольный PSD-файл на холст клиента. Однако какие файлы PSD вы можете открыть?

Редактор дизайна работает с многослойными PSD-файлами, содержащими изображения, текст, фигуры и смарт-слои. Цветовой формат должен быть RGB, CMYK или оттенки серого. Он не должен содержать причудливых эффектов слоя — вы должны сгладить их, когда это возможно.

Текстовые слои могут содержать следующие настройки шрифта:

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

И следующие параметры пункта:

• Выравнивание
• Отступ первой строки, отступ слева и отступ справа
• Пробел перед и пробел после

Другие параметры игнорируются.

Холст заказчика поддерживает текстовые слои точек и абзацев. Эти текстовые слои могут быть ориентированы вертикально или горизонтально. В точечном тексте у вас всегда есть одна позиция, которая указывает, где находится текст (в зависимости от выбранного режима выравнивания, который определяет левое, центральное или правое положение слоя), в то время как текст абзаца определяет границы.

Если текст выходит за пределы этого поля, он обрезается.

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

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

Теперь давайте попробуем создать шаблон PSD, совместимый с Canvas клиента.

Учебник: первый шаблон

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

Если мы собираемся печатать наши визитки с разрешением 300 DPI и размером визитки 3х5 дюймов, то будем использовать фоновое изображение размером 900х1500 пикселей. Откройте это изображение в Photoshop.

Теперь давайте создадим текстовый слой. Чтобы создать слой Point Text, щелкните Type Tool на панели Tools , а затем щелкните в том месте, где вы хотите разместить текст. Введите образец текста, чтобы пользователи знали, какие данные они должны вводить.

Чтобы вставить логотип, просто найдите образец логотипа и вставьте его как слой изображения.

В результате должно получиться что-то вроде этого:

Чтобы открыть шаблон в Редакторе дизайна, поместите его в папку \assets\designs\ и инициализируйте продукт, используя имя шаблона. Вы должны увидеть что-то вроде этого:

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

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

Чтобы пометить фон как нередактируемое изображение, дважды щелкните имя соответствующего слоя в Photoshop и добавьте к нему. Нет никакой разницы, в какой позиции вы поставите маркер — в начале имени, в конце или где-то внутри строки. Более того, вы можете оставить только маркер, если хотите.

Аналогичным образом можно зафиксировать положение текста. Дважды щелкните имя текстового слоя и добавьте маркеры и , чтобы запретить перемещение текста по горизонтали и вертикали.

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

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

Подготовка шаблонов из существующих файлов PSD

Легко поддерживать совместимость PSD-файлов с Canvas клиента, когда вы создаете их с нуля. Однако что, если у вас уже есть несколько PSD-файлов, созданных дизайнером, прежде чем он узнает, как системы работают вместе? Если вы загрузите эти файлы в редакторе дизайна, они могут выглядеть не так, как вы ожидаете.

Вот список наиболее распространенных взаимодействий с PSD-файлами и рекомендации по их устранению.

Сбой рендеринга пробных изображений с исключением

Photoshop CC 2020 представил инструмент Enhanced Warp Tool . Если вы разработали предварительный 3D-макет, вы, скорее всего, применили преобразование деформации к смарт-объектам. Однако Canvas клиента не может считывать преобразования, созданные этим инструментом.

Решение . Избегайте использования преобразования деформации в Photoshop CC 2020.

PSD-файл не открывается

Причин этому может быть несколько, но, скорее всего, это как-то связано с необычным цветовым пространством или лишними каналами. Холст заказчика работает с изображениями RGB, CMYK или в оттенках серого, а глубина цвета должна составлять 8 бит на канал.

Решение : Преобразуйте изображение в формат RGB или CMYK и удалите все лишние каналы. Если у вас по-прежнему возникают проблемы с загрузкой этого файла, отправьте его нашей технической команде.

Невидимые слои видны

Редактор дизайна игнорирует флаг видимого слоя.

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

Параметры слоя игнорируются

Canvas клиента игнорирует параметры слоя, такие как Lock , Fill , Opacity и т. д.

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

Без визуальных эффектов

Холст клиента не может считывать информацию о визуальных эффектах (свечение, сатин и т. д.).

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

Слои корректировки, эффекта и заливки игнорируются

Холст заказчика поддерживает растровые слои (изображения), векторные фигуры, смарт-объекты и текстовые слои.

Решение : Примените или сведите все эти слои перед импортом шаблона на холст клиента.

Некоторые настройки шрифта/абзаца не применяются

Холст заказчика считывает только следующие параметры шрифта:

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

И следующие параметры пункта:

• Выравнивание
• Отступ первой строки, отступ слева и отступ справа
• Пробел перед и пробел после

Шаблон загружается слишком медленно

Это происходит, если в шаблоне много слоев, особенно слоев изображений. Рекомендуется оптимизировать шаблоны перед их импортом в Customer’s Canvas.

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

Невидимые слои должны быть удалены или, по крайней мере, должны быть установлены соответствующие маркеры.

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

Что касается текстовых слоев, рассмотрите возможность использования одного многострочного текстового слоя (Point Text) вместо нескольких одиночных строк. В большинстве случаев удобнее заполнять один текстовый блок, и Редактор дизайна может быстрее обрабатывать эти поля. Однако не обращайте внимания на этот совет, если вам действительно нужно разделить слои, например, если вы предварительно заполняете некоторые поля из базы данных.

Что-нибудь еще?

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

Новый макет направляющих в Photoshop CC

Старый способ добавления направляющих в Photoshop

Прежде чем мы узнаем все о новой функции макета направляющих, давайте быстро рассмотрим «старый способ» добавления направляющих. Традиционно мы начали бы с включения линеек Photoshop, поднявшись до отметки 9.0007 Просмотрите меню в строке меню в верхней части экрана и выберите Rulers :

Перейдите в меню «Просмотр» > «Линейки».

Это помещает линейки вдоль верхней и левой стороны документа:

Теперь линейки видны сверху и слева.

Чтобы добавить вертикальную направляющую, мы щелкнули внутри линейки слева и, удерживая нажатой кнопку мыши, перетащили направляющую с линейки в документ:

Перетаскивание вертикальной направляющей из линейки слева.

Чтобы добавить горизонтальную направляющую, мы щелкаем внутри линейки вверху и, снова удерживая нажатой кнопку мыши, перетаскиваем направляющую вниз с линейки в документ:

Перетаскивание горизонтальной направляющей из линейки вверху.

Этот способ добавления направляющих путем перетаскивания их с линеек по-прежнему работает даже в последних версиях Photoshop, но в Photoshop CC есть способ получше, а именно использование параметра «Новый макет направляющей». Давайте посмотрим, как это работает.

Новый вариант макета направляющей

Чтобы получить доступ к опции «Новый макет направляющей», перейдите в меню View в верхней части экрана и выберите New Guide Layout . Опять же, это доступно только в Photoshop CC:

.

Переход к просмотру > новый макет направляющей.

Откроется диалоговое окно «Новый макет направляющей». Из этого диалогового окна мы можем легко добавить любое количество строк и столбцов в наш макет. Мы можем указать точную ширину для столбцов или точную высоту для строк, или позволить Photoshop распределить их одинаково для нас! Мы можем добавить желоб между направляющими и добавить поля сверху, слева, снизу и справа нашего документа. Мы даже можем сохранить наш пользовательский макет в качестве предустановки, чтобы быстро загрузить его в следующий раз, когда он нам понадобится!

Если вы ранее не использовали функцию «Новый макет направляющей», появится диалоговое окно с настройками по умолчанию, которые добавляют в документ восемь столбцов, каждый из которых разделен отступом в 20 пикселей. Строки не добавляются с настройками по умолчанию, но позже мы увидим, как легко добавлять строки:

Диалоговое окно «Новый макет направляющей».

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

Компоновка направляющих по умолчанию плюс две исходные направляющие.

Очистить существующие направляющие

Чтобы удалить все предыдущие направляющие и оставить только новый макет направляющих, выберите параметр Очистить существующие направляющие в нижней части диалогового окна:

Выбор «Удалить существующие направляющие».

А теперь эти предыдущие руководства исчезли, оставив мне только новую раскладку из восьми столбцов:

Предыдущие руководства удалены.

Изменение количества столбцов

Чтобы изменить количество столбцов в макете, просто измените значение в поле Число . Я уменьшу значение с 8 до 4 :

Уменьшение количества столбцов с 8 до 4.

Photoshop мгновенно обновляет макет, изменяя количество столбцов и равномерно распределяя их слева направо:

Макет теперь содержит четыре равноотстоящих столбца вместо восьми, с отступом в 20 пикселей между каждым.

Вариант предварительного просмотра

Если вы не видите предварительный просмотр своих изменений в реальном времени, убедитесь, что параметр Предварительный просмотр в диалоговом окне включен (отмечен флажком):

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

Замена желоба

Пространство между столбцами (и строками) известно как желоб . Чтобы увеличить или уменьшить желоб, измените значение в поле Gutter . Размер поля по умолчанию составляет 20 пикселей, что добавляет 20 пикселей пространства между каждым столбцом. На самом деле я собираюсь полностью удалить желоб, выделив значение Gutter с помощью мыши и нажав Backspace (Win) / Удалить клавишу (Mac) на моей клавиатуре. Это очистит значение желоба и оставит поле пустым:

Удаление пространства между столбцами путем очистки значения Gutter.

При пустом поле Gutter столбцы больше не разделяются пробелами:

Пространство между столбцами удалено.

Указание ширины столбца

По умолчанию Photoshop автоматически изменяет размер столбцов таким образом, чтобы они были равномерно распределены по всему документу слева направо, но мы можем установить ширину самостоятельно, введя значение в поле 9.0007 Ширина поля . Например, я введу ширину для своих столбцов 150 px :

.

Ввод определенной ширины столбцов.

Photoshop снова обновляет макет, на этот раз устанавливая ширину каждого столбца ровно на 150 пикселей:

Макет после указания ширины столбцов.

Центрирование колонн

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

Включение опции «Центрировать столбцы».

Если флажок «Центрировать столбцы» установлен, столбцы снова центрируются в макете:

Макет после центрирования столбцов.

Добавление строк

Чтобы добавить строки в макет, сначала выберите параметр Rows (по умолчанию он отключен):

Включение рядов.

Затем просто введите необходимое количество строк в Поле номера . Вы можете ввести определенную высоту для каждой строки в поле Высота или оставить его пустым и позволить Photoshop распределить их одинаково. Вы также можете ввести значение Gutter , чтобы добавить пространство между каждой строкой.

В моем случае я собираюсь установить количество строк на 3 , а также изменить количество столбцов на 3 . Я оставлю поле «Ширина» для столбцов и поле «Высота» для строк пустыми, чтобы позволить Photoshop распределить их одинаково, и я также оставлю пустыми поля Gutter:

Установка для столбцов и строк значения 3.

Это быстрый и простой способ создания стандартной сетки 3 на 3, которую я, возможно, захочу использовать, чтобы упорядочить и скомпоновать различные элементы в моем документе, используя «правило третей»:

Стандартная сетка 3 на 3 легко создается с помощью функции «Новый макет направляющей».

Добавление полей

Чтобы добавить поля по краям документа, сначала выберите параметр Margin , чтобы включить его, затем введите количество места, которое вы хотите добавить, в поле Верхняя , Левая , Нижняя и Правая коробки. В моем случае я установлю все четыре значения на 20 px :

.

Добавление полей к макету.

Это добавляет 20 пикселей пространства вокруг внутренних краев моего документа. Photoshop автоматически изменяет размеры столбцов и строк соответственно:

Тот же макет 3 на 3 с добавленными полями.

Мы можем даже добавить отрицательные поля, просто введя отрицательные значения. Отрицательные поля могут быть полезны при добавлении элементов в документ или при выборе элементов, размер которых превышает видимую область документа (холст). Я изменю каждое из четырех значений (сверху, слева, снизу и справа) на 9.0007 -20 пикселей :

Добавление отрицательных полей к макету.

Это дает мне те же поля шириной 20 пикселей, но перемещает их за пределы видимой области документа. И снова Photoshop автоматически изменяет размеры столбцов и строк:

.

Поля теперь располагаются вне области документа, а не внутри.

Сохранение пользовательского макета направляющей в качестве предустановки

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

Нажатие на поле выбора Preset.

Это открывает меню с несколькими встроенными предустановленными макетами на выбор (8 столбцов, 12 столбцов, 18 столбцов и 24 столбца), но нам нужен вариант Сохранить пресет :

Выбор параметра «Сохранить предустановку».

Когда появится диалоговое окно «Сохранить», введите описательное имя для нового пресета в поле «Сохранить как ». Я назову свой «cols-3-rows-3-margins-neg20px». Затем нажмите Сохранить кнопка:

Присвоение имени и сохранение нового пресета.

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

Пользовательская предустановка теперь отображается в списке.

После создания нужного макета направляющей нажмите OK , чтобы закрыть диалоговое окно «Новый макет направляющей»:

Нажмите OK, чтобы принять новый макет.

Скрытие и очистка направляющих

Чтобы временно скрыть макет направляющей из документа, перейдите в меню View , выберите Show , затем выберите Guides . Сделайте то же самое еще раз, чтобы снова включить его. Или просто нажмите Ctrl+; (Победа) / Команда+; (Mac) на клавиатуре для включения и выключения направляющих:

Перейдите в «Вид» > «Показать» > «Направляющие», чтобы включить или выключить макет.