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

Обновлено: 07.07.2024

Сам по себе процесс рисования прямой или изогнутой линии в Photoshop довольно несложный, но начинающему пользователь не помешает изучить некоторые основные методы рисования линии. Из этого урока вы узнаете три основных способа создания линий, чаще всего для этого используются инструменты "Кисть" (Brush Tool), "Перо" (Pen Tool) и инструмент "Линия" (Line Tool) для создания простых прямых линий.

Рисуем линию инструментом "Кисть" (Brush Tool) и "Карандаш" (Pencil Tool)
Проще всего нарисовать линию в Photoshop инструментом "Кисть" (Brush Tool). Выберите круглую кисть, задайте небольшой диаметр, 100%-ную жёсткость и просто проведите курсором по документу. У Вас получится линия.

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

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

Аналогичным образом можно использовать инструмент "Карандаш" (Pencil Tool). Как видите, ничего сложного.

Рисование линии в Photoshop

Но лично я чаще использую два других способа.

Создаём прямую линию инструментом "Линия" (Line Tool)

Другой способом рисования является использование инструмента "Линия" (Line Tool), доступного на инструментальной панели Photoshop:

line tool

Эта линия является векторной формой (Vector Shape), так что в последствии Вы можете легко изменить её форму, цвет и размер без потери качества. Вы также можете использовать клавишу Shift для построения горизонтальных, вертикальных и направленных под углом 45° линий:

создание линии в фотошопе

Ломаная, прямая и кривая линия с помощью "Пера" (Pen Tool)

Третий иp распространённых способов создания лини - использование универсального инструмента "Перо" (Pen Tool):

Pen Tool

Сначала необходимо переключить "Перо" на режим "Контур" (Paths), этот переключатель находится на панели параметров в верхнем левом углу окна программы. Затем кликните в том месте, где должна начинаться линия, это будет начальная точка, потом добавьте вторую точку и т.д.
То же самое правило действует и при нажатии клавиши Shift:

risovanie-linii-v-photoshop

Давайте выполним несложную практическую работу. Сначала выберите инструмент "Кисть", задайте диаметр 3 пикселя,жёсткость 100%, цвет - чёрный.
Затем возьмите "Перо", выберите режим "Контур" и нарисуйте линию с помощью двух точек. Вы можете увидеть созданный контур на панели слоёв во вкладке "Контур" (Path), там наша линия будет добавлена в качестве рабочего контура (Work Path).

Но контур, созданный "Пером", это всего-лишь вспомогательный объект, и при сохранении картинки отображён не будет. Для того, чтобы визуализировать контур, нам следует выполнить его обводку.
При активном инструменте "Перо", кликните правой клавишей мыши по контуру в документе. Откроется контекстное меню, где нажмите на строку "Выполнить обводку контура" (Stroke Path):

как нарисовать линию в Photoshop

Откроется новое окно, где выберите пункт "Кисть" (Brush) и нажмите ОК. Обводка толщиной в 3 пикселя появится:

рисуем линию в 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. После чего рисунок клетки в рабочем документе моментально изменится:

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

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

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

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

Линейки в фотошопе

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

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

Линейки в фотошопе

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

Выбор единицы измерения из контекстного меню

Единицы измерения и линейки

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

Изменение начала линнейки в фотошопе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Окно Новая направляющая

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

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

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

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

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

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

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

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

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

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

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

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

Настройки сетки в фотошопе

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

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

Создавайте линии и стрелки с помощью инструмента «Линия» в Photoshop.

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

Выполните эти быстрые действия, чтобы нарисовать линию.

Выбор инструмента Линия


На панели инструментов щелкните и удерживайте значок группы инструментов Фигура (), чтобы вызвать различные варианты инструмента «Фигура». Выберите инструмент Линия .

Работа с инструментом «Линия»

Настройка ширины линии

Режим «Фигура»

Вес линии фигуры можно регулировать с помощью настроек «Обводка» и «Толщина» на панели «Параметры».

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

Ширина линии

Два способа настройки ширины линии

A. Настройка ширины линии с помощью параметра «Обводка» B. Настройка ширины линии с помощью параметра «Толщина»

Параметры выравнивания обводки

Выберите «По центру» или «Снаружи» в параметрах выравнивания обводки

Режим «Контур» или «Пиксели»

Установите ширину пиксельной линии на панели «Параметры», задав требуемое значение для параметра Толщина .

Режим Пиксели и параметр Толщина недоступны для инструмента Линия в версиях Photoshop 22.0–22.2.

Щелчок и перетаскивание

Щелкните точку на холсте и перетащите в нужное место, чтобы нарисовать линию.Чтобы ограничить угол линии и сделать его кратным 45 градусам, удерживайте клавишу «Shift» при перетаскивании и рисовании линии.

Параметры инструмента «Линия»

A. Можно настроить различные атрибуты и свойства инструмента, выбрав «Параметры обводки». B. Другие параметры

Режим «Линия»

  • Чтобы создать линию, выберите Фигура .

Цвет заливки

  • Выберите цвет из списка или на палитре цветов. Также для выбора цвета можно щелкнуть образец цвета в разделе Внешний вид панели Свойства . Этот цвет будет использоваться для заливки центра стрелки.

Цвет обводки

  • Выберите цвет из списка или на палитре цветов. Также для выбора цвета можно щелкнуть образец цвета в разделе Внешний вид панели Свойства . Этот цвет используется для линии и контура стрелки.

Ширина обводки

Толщина

Дополнительные параметры

  • Набор : выберите сплошную линию, штриховую линию или пунктирную линию, либо щелкните Дополнительные параметры , чтобы создать пользовательский набор линии.
  • Выравнивание : выберите По центру или Снаружи . Толщина обводки не отображается, если выбрано выравнивание Внутри .
  • Концы : можно выбрать одну из трех форм концов линии: Срезанные , Скругленные или Квадратные . Форма концов линии определяет форму начала и конца линии.
  • Штриховая линия : настройте внешний вид штриховой линии, задав количество штрихов и пробелов в повторяющемся мотиве.

Режим «Линия»

  • Чтобы создать линию на основе пикселей, выберите Пиксели .

Режим

  • Выберите требуемый режим наложения. Значение по умолчанию — Обычный

Непрозрачность

  • Установите значение параметра Непрозрачность от 1 до 100 %.

Толщина

    Установите нужную ширину линии в пикселях.


Щелкните по значку шестеренки () на панели параметров инструмента «Линия» и выберите Элементы управления интерактивными фигурами , чтобы включить элементы управления трансформированием холста. Это позволяет поворачивать линии на холсте и изменять их размер. При этом также изменяется размер стрелок.

Также можно настроить параметры «Трансформирование» и «Внешний вид» на панели Свойства . Ее можно вызвать в через главное меню: Окно > Свойства.

панель «Свойства»

панель «Свойства»

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