Slice tool в Фотошопе. Направляющие в "Фотошопе": включение, настройка и дальнейшая работа

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

Но как быть, когда, допустим, нужно сделать отступ от верхнего края 50 пикселей? Или, что делать, когда вы размещаете 10 элементов по документу и каждый из них нужно позиционировать относительно друг друга на точно заданных расстояниях? Для решения таких вопросов нужно обратиться к инструментам позиционирования: линейки, сетка и направляющие.

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

Чтобы включить отображение линеек в фотошопе , выполните команду:

Просмотр — Линейки или горячая клавиша Ctrl+R .

По умолчанию единица измерения — пиксели . Но это можно изменить. Возможны следующие способы как это сделать:

Способ 1

Кликните правой кнопкой мыши по шкале линейки. появится контекстное меню со всеми имеющимися в фотошопе единицами измерения: пиксели, дюймы, сантиметры, миллиметры, пункты, пики и проценты.

Способ 2

Для того, чтобы изменить единицы измерения по умолчанию, то следует перейти в следующие настройки фотошопа: Редактирование — Установки — Единицы измерения и линейки . В открывшемся окне, в самом верху, есть пункт Единицы измерения , а в нем Линейки .

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

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

Примечание

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

Направляющие в фотошопе

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

Направляющие — это голубые вертикальные и горизонтальные линии, помогающие создать разметку в документе фотошопа.

Направляющие относятся к вспомогательным элементам, поэтому их будет не видно, когда вы сохраните изображение. Но зато они остаются в PSD-формате.

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

Примечание

Эффект прилипания в фотошопе называется Привязкой . Она включается и отключается в меню Просмотр — Привязка . Проследите, чтобы галочка стояла.

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

Как создать направляющие в фотошопе

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

Теперь нужно их создать. Есть два способа для разных случаев жизни:

Способ 1 Произвольные направляющие

Этот способ подходит, когда нужно быстро создать линию и установить ее в произвольном месте.

Для этого сделайте клик мыши в области шкалы линейки:

• для горизонтальной линии — на верхней линейке;
• для вертикальной линии — не левой линейке.

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

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

Способ 2 С указанием, где должна появится направляющая

Через меню Просмотр — Новая направляющая откроется диалоговое окно. В котором нужно указать в какой плоскости ее создать (горизонтальная или вертикальная), а также поле, в которое нужно ввести значение нужного положения. Например, нужна горизонтальная направляющая, которая появиться в 100 пикселях от верхнего края изображения.

Как изменить положение направляющей

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

Кстати, направляющие можно закрепить, то есть защитить от случайного сдвига. Для этого поставьте галочку в меню Просмотр — Закрепить направляющие .

Как убрать/удалить направляющие

Способ 1 Переместить на шкалу линейки

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

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

Способ 2 Команда меню

Через меню программы: Просмотр — Удалить направляющие . В этом случае пропадут сразу все созданные линии.

Способ 3 Отключить отображение

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

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

Сетка разметки в фотошопе

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

Просмотр — Показать — Сетку

Настройка сетки осуществляется в установках фотошопа: Редактирование — Установки — Направляющие, сетка и фрагменты .

Можно указать какой ширины будут основные (большие) ячейки и из какого количества дополнительных внутренних делений они будут состоять. Например , у меня основные ячейки по 2 сантиметра и делятся дополнительно на 4 поменьше. Таким образом, каждая маленькая клетка составляет 0.5 сантиметра.

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Шаг 1: Подготовка Рабочей области
Создайте новый документ. Ширина документа должна быть 950 пикселей.

Добавьте направляющие по левой и правой границе документа.

Разметка должна быть 950 пикселей. Но нам необходимо дополнительное пространство для комфортной работы. Так что увеличьте ширину документа используя диалоговое окно «Размер Холста». Нажмите Ctrl+Alt+C (Изображение->Размер Холста (Image->Canvas Size)) чтобы открыть окно и ввести значение.

Шаг 2: Создание и Организация Групп Слоев
Очень часто мы сталкиваемся с несколькими сотнями слоев разбросанных по всей палитре и трудно определить отдельно расположенный предмет, особенно когда занимаешься разметкой. Так что планируйте заранее и сохраняйте последовательность. Я классифицировал разметку в несколько групп которые содержат соответствующие элементы. Щелкните на кнопке «Создать новую группу» (Create a New Group), чтобы создать группу. Сделайте двойной щелчок, чтобы переименовать группу.

Шаг 3: Создаем Шапку (Header)
Давайте начнем с Заголовка. Мы собираемся использовать Бумажную текстуру для создания заголовка. Отгройте «Бумажную текстуру 1». Нам нужно изолировать бумагу от фона. Щелкните на черном фоне используя Инструмент «Волшебная палочка» (Magic Wand Tool). Выберется фон, инвертируйте выделение, чтобы выбрать бумагу. Нажмите Ctrl+Shift+I (Выделение>Инверсия (Select>Inverse).

Подгоните выделение используя команду «Уточнить маску», чтобы увеличить контрастность и резкость. Нажмите Ctrl+Alt+R (Выделение>Уточнить маску (Select>Refine Edge)). Отрегулируйте параметры, чтобы детализировать выделение.

Нажмите Ctrl+J (Слои>Новый>Скопировать на новые слои (Layer>New>Layer via Copy)) чтобы отделить выделение.

Перетащите текстуру на наш документ. Поместите ее в группу «Заголовок». Выделите слой и пройдите Редактирование>Трансформирование>90 градусов по часовой стрелке (Edit>Transform>90 degree CCW). Затем используя тоже меню выберите «Отразить по горизонтали» (Flip Horizontal). Поместите ее на место заголовка. Я немного изменил размер (примерно 75%). Выполните все трансформации за один раз.

Нажмите Ctrl+U чтобы загрузить окно «Цветовой фон/Насыщенность» (Hue/Saturation). Уменьшите Яркость до -100. Мы получили приятные очертания текстуры со всеми ее краями.

Добавьте логотип. Используйте шрифт «VTKS Caveirada». Вы можете его скачать бесплатно.

Шаг 4: Текстурирование Фона
Давайте создадим текстуру фона. Перетащите «Бумажную текстуру 3» на ваш файл. Как следует разместите ее. Разместите ее ниже всех слоев на палитре.

Десатурируйте текстуру нажатием комбинации Ctrl+Shift+U. Нажмите Ctrl+M и отрегулируйте яркость и контрастность регулированием кривой.

Шаг 5: Определение области для Основного Контента
Разметим две колонки. Для начала мы определимся с областью для основного контента. Щелкните на группе «Контент» и выберите область использую инструмент «Прямоугольная область» (Marquee Tool). Убедитесь что ширина 600 пикселей. Вы можете использовать окно с информацией, чтобы видеть размеры. Залейте цветом #ffffff.

Установите тонкую обводку в 1 пиксель для области контента.

Теперь установим другую текстуру на область контента. Откройте «Бумажную текстуру 2», выделите и скопируйте среднюю ее чать.

Поместите поверх области контента. Измените размер текстуры.

Нажмите Ctrl+Shift+U, чтобы десатурировать текстуру и отрегулировать яркость используя кривые.

Теперь нажмите Ctrl+левый щелчек мыши на окне контента чтобы выбрать. Затем сожмем выделенную область 3мя пикселями.

В заключении инвертируйте выделение и нажмите клавишу «Delete». Это придаст приятный контраст по краю.

Добавьте Маску слоя (Layer Mask) на слой текстуры. Выберите градиент «черный и белый» и установите на маску, чтобы смешать нижний край текстуры с фоном.

Шаг 6: Добавление Основной Навигации
Выберите группу «Навигация». Создайте Основную навигацию поверх контента. Используя инструмент «Прямоугольная область» (Marquee Tool) создайте кнопку. Используйте заливку для кнопок цветом #000000.

Давайте добавим сложенный край для навигации. Возьмите последнюю кнопку в ряду. Сделайте выделение на краю и выберите Выделение>Свободное трансформирование (Select>Transform Selection). Прокрутите выделенную область на 45 градусов удерживая клавишу Shift. Затем нажмите Enter, чтобы подтвердить Трансформацию.

Нажмите Ctrl+Shift+J (Слои>Новый слой>Скопировать на новый слой (Layer>New>Layer via Copy)). Этим мы отделим кусочек от края. Нажмите Ctrl+T затем правый щелчок мыши и выберите повернуть на 180 градусов.

Осветлите кусочек используя окно «Цветовой фон/Насыщенность».

Шаг 7: Добавляем Контент
Для начала добавьте свободного места для окна контента, это придаст немного свободного места. Удерживая Ctrl кликните на самом нижнем окне контента чтобы его выбрать. Откройте Выделение>Свободное трансформирование. Я хочу добавить 20 пикселей свободного пространства с каждой стороны, в общем 40 пикселей. Вычтем их из ширины окна контента и введем данные в опциональную панель (660-40=620 пикселей).

Продолжение следует...

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

Каждый инструмент, стоит только указать на него курсором, любезно "представится", высветив подсказку, правда, если у вас на вкладке "Интерфейс" в диалоговом окне "Установки" (в меню "Редактирование", внизу) стоит галочка, разрешающая "Показывать подсказки".

Где лежат линейки

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

Редактор "Фотошоп" был бы не "Фотошопом", если бы не мог предложить любую команду выполнить разными путями. Это касается и команды "Линейки" (Rulers) в меню "Просмотр", выбрав которую, мы "приложим" линейки в рабочей области сверху и слева. Если лень тянуться мышкой к меню, можно для вызова линеек нажать Ctrl + R. Этой же комбинацией они прячутся.

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

Единицы измерения и направляющие

По умолчанию нам предложат "сантиметровые" линейки, но, щелкнув правой кнопкой по любой линейке и в любом ее месте, можно выбрать пиксели, миллиметры, дюймы, пункты, пики (в пике 12 пунктов) или проценты.

Из обеих линеек, как из рукава фокусника, можно мышкой вытаскивать в неограниченном количестве направляющие линии, которые можно вызвать и по команде "Новая направляющая" (New Guide…) в меню "Просмотр". Но если линейки при этом не включены, направляющие будут неподвижными. Направляющие не терпят сочетания клавиш Ctrl + H и мгновенно исчезают.

Измерительная линейка с транспортиром

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

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

На панели настроек вверху X и Y - это координаты начальной точки, Ш и В - ширина (расстояние по горизонтали) и высота по отношению к начальной точке,У - угол относительно осевой линии, и L1 - длина отрезка между двумя точками.

Если, нажав Alt, поднести курсор к крестику начальной точки, он примет форму транспортира, указывая, что можно провести линию под углом к растянутой линейке, и этот угол будет определен (L2) на панели настроек.

Курсор над кнопкой "По шкале измерений" вызывает не каждому понятную подсказку "Вычислить данные инструмента "Линейка" по шкале измерений". Пометив галочкой эту функцию, мы подтверждаем использование единицы измерения линеек, выбранной в установках (Редактирование > Установки > Единицы измерения и линейки).

Единицы измерения вы можете выбирать и в параметрах панели на палитре "Инфо", щелкнув по маленькому треугольнику в правом верхнем углу.

Как уже отмечалось, все инструменты в "Фотошопе" можно открывать двумя, а то и тремя способами. В этом смысле и наша "рулетка" не обделена вниманием, так как включить линейку в "Фотошопе" можно, нажав и удерживая Shift + I до появления пиктограммы линейки на кнопке инструмента "Пипетка". Точно так же линейка и спрячется, заместившись на кнопке иконкой следующего ниже инструмента "Комментарий", или уберется крайней справа на панели настроек кнопкой "Удалить".

Как выровнять по линейке

Линейку можно использовать и для выпрямления изображения. Для этого нужно растянуть на картинке линейку, указав для нее горизонт выпрямления, и нажать кнопку "Выровнять слой" с подсказкой "Выровнять активный слой для создания уровня линейки". При этом вы принесете в жертву части изображения, вышедшие за пределы документа ("Фотошоп" их обрежет), но если "Выровнять слой" с нажатой клавишей Alt, все останется на месте, в чем вы убедитесь, нарастив холст (Изображение > Размер холста), или, включив "Перемещение", перетащите спрятанные части в поле зрения.

В CS6 все по-прежнему

По мере модернизации "Фотошоп" постепенно обогащался новыми функциями и возможностями, но такого резкого, качественного скачка, как при переходе от CS5 к CS6 (27 пунктов изменений) не было на протяжении всей истории развития программы. Однако ответ на вопрос о том, как включить линейку в "Фотошопе CS6", остался неизменным. Та же галочка в строке "Линейки" в меню "Просмотр", та же комбинация Ctrl+R, и точно так же можно взяться мышкой за квадрат слева вверху (где линейки сходятся) и, потащив вниз, выбрать на изображении новую точку отсчета. Там, где отпустим кнопку мыши, в том месте и будут нули обеих линеек, а вернуть их "на родину" можно, дважды щелкнув по тому же квадратику в левом углу сверху.

И в заключение - об одном редком, но все же случающемся недоразумении. Иной пользователь, запустив редактор, начинает "раскладывать инструменты", пытаясь достать линейки, но ни одна не будет выполнена, так как включить линейку в "Фотошопе", как и все остальные инструменты, можно, только прежде открыв или создав документ.

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

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

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

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

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

Как сделать направляющие в фотошопе

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

Но я считаю этот способ не очень удобным. Он слишком муторный. Я покажу вам, как это можно сделать с помощью «Линейки» . Для начала нам нужно будет эту линейку активировать. Для этого вы можете идти в меню «Просмотр» — «Линейки» , либо же воспользоваться комбинацией клавиш CTRL+R . Вы заметите, как у вас сверху и с боку появилась измерительная шкала. Это то, что нам и нужно.

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

Дополнительные функции

Использование сетки

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

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

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

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

Практическая работа

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

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

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

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

С уважением, Дмитрий Костин.

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

Итак, начнем с того, что создадим документ формата А4. Теперь комбинацией Ctrl+R вызовем линейку.
От курсора по вертикальной и горизонтальной линейке будут идти направляющие. С помощью данных направляющих создадим две ровные линии.

Берем инструмент кисть диаметром 12 px . Располагаем курсор на пересечении точек (2;4) и ставим в данном месте точку, кликнув мышкой по документу. Далее, удерживая клавишу Shift, переносим курсор на 8 см. вправо и ставим вторую точку (2;12) – эти точки автоматически соединятся прямой линией. Аналогично делаем вторую линию снизу, отступив 2 см.

Теперь при помощи инструмента Marquee выделим эти две линии, добавив сверху и снизу по 1 см. Сохраним данный «узор». Выполняем команды Edit / Define Pattern…

Переходим к самому процессу разлиновки.

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

Вызываем окно стилей слоя, дважды кликнув по слою мышкой. Выбираем из списка Pattern Overlay , находим сохраненный нами узор. Сдвигая джойстик Scale – регулируем размер. При необходимости можно изменить прозрачность и перекрытие. Готово. Мы сделали разлиновку листа в линию.

Теперь поговорим о разлиновке листа в клетку. Аналогичным способом рисуем линии, только теперь две горизонтальные и две вертикальные.

Выделяем их. Постарайтесь по самому краю захватить крайнюю левую и верхнюю линии. Сохраняем узор.

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

Но, если Вам необходим бордюр и ровная клетка, то выбрав в стилях слоя Pattern Overlay , убираем галочку Link with layer. Применяем данный стиль.
Возвращаемся к документу. Ставим галочку на Show Transform Controls. И растягиваем края слоя, так чтобы он шел ровно по клетке. Готово. Если Вам понадобится переместить готовый слой с разлиновкой, верните на место галочку на Link with layer в окне стилей слоя.