Как расчертить квадраты в фотошопе

Обновлено: 08.07.2024

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

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

Пуктирная окантовка становится доступна при активном инструменте "Перо" (Pen Tool) и "Свободное перо (Freeform Pen Tool), а также при всех инструментах группы векторных фигур:

Все эти инструменты должны быть переключены в режим "Фигура" (Shape). При работе пером контур замыкать не обязательно.

Итак, как же создать пунктирную линию?
При выборе одного из вышеперечисленных инструментов, на панели задач, которая находится под главным (горизонтальным) меню, появляются опции, показанные на рисунке:

Белый квадратик, перечёркнутый красной полосой (на рисунке обведён красным овалом), означает, что окантовка не включена.

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

Затем можно выбрать тип обводки. При нажатии на кнопку "Задать тип штриха" (Set Shape Stroke Type), на рисунке она обведена красным овалом, открывается окно, где есть три заранее установленных типа штриха - сплошной, точечный и пунктирный. Можно выбрать один из этих стилей, а можно задать и свой собственный. Для этого нажмите на кнопку "Другие параметры" (More options), на рисунке обведена синим:

После клика по кнопке отрывается диалоговое окно настройки контура, где Вы можете сами назначить параметры пунктира. Для того, что бы линия перестала быть сплошной, надо поставить галку в чекбоксе "Пунктирная линия" (Dashed Line). Далее, можно задать длину штриха и пробела в окошках внизу. Photoship CS6 позволяет задать до трёх видов штрихов в одной линии. На примере внизу у меня заданы два вида штриха, отрезок и точка.

В поле выбора "Выровнять" (Align) Вы можете задать расположение обводки относительно контура: внутри, из центра, снаружи (Inside, Center, Outside).
В поле "Концы" (Caps) задают тип конца штриха - стык, круг или квадрат (Butt, Round, Square).
Третье поле, "Углы" (Corners), актуально при обводке фигуры или линии с острыми углами, например, квадрата, с помощью него можно задать отображение штриха на углах. Всего имеется три настройки, срез, круг и фаска (Miller, Round, Bevel).

После того, как Вы ввели необходимые настройки, их можно сохранить, кликнув по кнопке "Сохранить" (Save), теперь Ваша новая настройка будет отображена в окошке "Параметры обводки":

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

Для того, чтобы нам начать создавать направляющие в фотошопе, необходимо включить линейку. Заходим в пункт меню "Просмотр -> Линейки" или нажимаем сочетание клавиш "Ctrl+R".

Линейки, направляющие и сетка в фотошопе

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

Линейки, направляющие и сетка в фотошопе

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

Линейки, направляющие и сетка в фотошопе

Также, направляющие можно создавать через меню "Просмотр -> Новая направляющая".

Линейки, направляющие и сетка в фотошопе

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

Линейки, направляющие и сетка в фотошопе

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

Теперь давайте рассмотрим как убирать направляющие. Убрать их можно или на время или полностью. Чтобы временно отключить их показ или обратно включить нажимаем сочетание клавиш "Ctrl+;". Чтобы убрать их полностью заходим в пункт меню "Просмотр -> Удалить направляющие".

Линейки, направляющие и сетка в фотошопе

Рассмотрим еще два момента, которые могут нам понадобиться. Первый - "Просмотр -> Закрепить направляющие" или сочетание клавиш "Alt+Ctrl+;". Этот пункт позволяет запретить перемещение линий. Второй - "Привязка". Чтобы ее включить нужно зайти в меню "Просмотр -> Привязка". Данный пункт отвечает за прилипание изображения к направляющим или направляющих к изображению. К примеру, вы ведете слой к направляющей и как только он приблизится к ней максимально близко, произойдет прилипание края изображения. Точно также, когда вы ведете направляющую, она прилипнет к краю снимка как только приблизится максимально близко.

Линейки, направляющие и сетка в фотошопе

Теперь давайте пройдемся немного по настройкам. Зайти в них можно если выбрать пункт меню "Редактирование -> Установки -> Направляющие, сетка и фрагменты" или щелкнуть два раза левой клавишей мыши по самой направляющей. Открывается окно, в котором мы можем настроить цвет и стиль наших линий.

Линейки, направляющие и сетка в фотошопе

Идем дальше и на очереди у нас быстрые направляющие - это временные линии, которые служат для выравнивания объектов. Они помогаю разместить объект относительно уже существующих объектов или всего холста. Включить их можно через пункт меню "Просмотр -> Показать -> Быстрые направляющие".

Линейки, направляющие и сетка в фотошопе

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

Линейки, направляющие и сетка в фотошопе

Дальше давайте рассмотрим инструмент "Сетка". Включить его можно в меню "Просмотр -> Показать -> Сетка" или сочетание клавиш " Ctrl+' ". Настроить ее можно также в разделе "Редактирование -> Установки -> Направляющие, сетка и фрагменты". Можно настроить промежуток, через который будут идти основные линии, а также как будут делиться эти промежутки.

Линейки, направляющие и сетка в фотошопе

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

Линейки, направляющие и сетка в фотошопе

Если у вас остались вопросы, то ниже вы можете посмотреть видеоурок на эту тему.

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

Должно быть, со школьных уроков по рисованию вы помните этот чудодейственный метод перерисовывания изображений. Суть в том, что картинка, будь то портрет или «Утро в сосновом бору», расчерчивается на определенное количество равных квадратов, и так же точно размечается чистый лист бумаги (можно пропорционально уменьшить или увеличить размер каждой клеточки), а затем рисунок срисовывается клеточка за клеточкой. Так удобнее, так мы даем глазомеру больше шансов. В то замечательное время чертить квадраты приходилось вручную, сейчас у нас есть компьютеры. Конечно, чистый лист все равно придется размечать карандашом вручную, но как разбить фотографию на квадраты силами программы Photoshop я вам сегодня расскажу.

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

Как разбить изображение на равные квадраты в Photoshop

Открываем портрет в Photoshop. Но сначала мы его трогать не будем, сначала мы создадим еще один новый документ («File» – «New») с размерами 100 на 100 пикселей. В этом документе создаем новый слой. Есть на панели слоев кнопка «Create a New Layer», нажмите ее. Там же есть кнопка «Delete Layer», с ее помощью удалите фоновый слой, он нам не нужен.

Залейте имеющийся слой белым цветом, щелкните на слое правой кнопкой и выберите в меню пункт «Blending Options». В левой части окна есть набор свойств, там нужно выбрать свойство «Stroke» (контур). Справа появятся настройки контура. В выпадающем списке выбираем вариант «Inside» (внутрь), в счетчике «Size» ставим «1», цвет выбираем черный и нажимаем«Ok».

Как разбить изображение на равные квадраты в Photoshop

Снова делаем правый щелчок на иконке слоя и находим пункт «Rasterize Layer Stile». Затем инструментом «Magic Wand» выделяем белый цвет и удаляем, чтобы остался только черный контур. Важно при этом выставить значение «Tolerance» как можно меньше, я поставил «1» вместо «100».

В пункте меню «Edit» выбираем строку «Define Pattern». Даем узору имя и подтверждаем создание нового орнамента.

Возвращаемся к портрету Маши, создаем новый слой, выбираем инструмент заливки «Paint Bucket». Вверху, в свойствах инструмента, меняем вариант в выпадающем списке с «Foreground» на «Pattern» и в выпадающем наборе узоров правее выбираем наш квадрат.

Как разбить изображение на равные квадраты в Photoshop

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

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

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

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

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

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

Давайте рассмотрим этот метод подробнее.

Создаём новый документ Photoshop, например, 700 на 700 пикселей на белом фоне. Берём инструмент "Перо" (Pen Tool), переключаем режим на "Фигура" (Shape), зажимаем клавишу Shift и проводим горизонтальную линию:

параметры линии узора из тетрадной клетки

Подробно о параметрах обводки рассказано в статье "Как создать штрих-пунктирную линию в Photoshop", читать отсюда, кто не в курсе, настоятельно рекомендую ознакомиться.

Теперь давайте займёмся параметрами обводки, чтобы получить параллельные линии. задаём толщину обводки 287,99 пикс., это максимальное значение, открываем окно дополнительных параметров и вводим длину штриха 0,005 от толщины, а расстояние между штрихами 0,04. Вот что получилось:

узор линейка с помощью обводки вектной линии

Собственно, мы уже получили узор из параллельных линий, из него можно сделать, к примеру, тетрадный лист. Но пойдём дальше. Обычно, 287,99 пикс. - слишком малая длина для линий. Давайте их удлиним.
Преобразуем слой в смарт-объект, копируем слой со смарт-объектом нажатием Ctrl+J и перемещаем новый слой вверх строго по вертикали так, чтобы он казался нижним краем исходного:

узор из параллельных линий

Группируем оба смарт-объекта, а полученную группу дублируем:

k

На данный момент у нас активна группа-дубликат. Нажимаем клавиши Ctrl+T для активации инструмента "Свободное трансформирование" и поворачиваем группу на 90°. Результат:

узор в клетку

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

Т.к. наша клетка получена из связанных смарт-объектов, то изменение одного смарт-объекта затронет остальные. Дважды кликаем по миниатюре любого смарт-объекта в панели слоёв, после чего открывается новый документ. Берём инструмент "Перо" и проводим необходимые изменения. Я изменю цвет обводки, уменьшу длину штриха и увеличу расстояние между штрихами:

изменение текстуры тетрадной клетки

Нажимаем кнопку ОК на окне других параметров. Мне осталось только сохранить изменение в смарт-объекте, нажав комбинацию Ctrl+S. После чего рисунок клетки в рабочем документе моментально изменится:

тетрадная клетка

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

Читайте также: