NexxDigital - компьютеры и операционные системы

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ 1

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

Способ 2

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

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

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

Примечание

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

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

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очередной урок, посвященный веб-дизайну. Здесь мы покажем, как создаются макеты для сайтов с использованием системы направляющих 960 Grid System. Вы увидите, как при помощи таких приемов макетирования процесс правильного позиционирования становится четким и прозрачным. К тому же по окончанию данного урока у вас получится стильный, аккуратный скин для вашего сайта.

1 Шаг

Начните с создания нового документа в фотошоп шириной 1680px и высотой 1100px, затем залейте фон слабым серым цветом #F9F9F9 .

2 Шаг

В Сети доступно большое количество макетировочных сеток, а также уроков по их созданию. Задачей этого урока будет введение вас в курс дела, если вы никогда не сталкивались с такими сетками ранее. С их помощью процесс макетирования может существенно ускориться и привести к качественным прототипам шаблонов страниц. Скачайте разметку 960 Grid System . Скачав ее по ссылке, распакуйте файл и откройте эту папку. Загрузите сетку “960 12 column grid” в фотошоп.

Теперь нам нужно перенести сетку в наш документ. Выберите группу “12 col Grid”, слейте ее в один слой, а затем перенесите его в главный документ. Сетка по высоте будет немного меньше документа, поэтому вам предстоит ее растянуть по вертикали, чтобы ее концы касались верхнего и нижнего края документа.

Теперь нам нужно еще создать строчную базу. Эта сетка поможет нам правильно расставлять отступы между элементами по вертикали и контролировать интерлиньяж в тексте, между абзацами и логическими блоками. Сначала создайте еще один файл в Photoshop размерами 24?24px, удалите в нем фон и проведите единственную линию в 1px по самой последней линейке рабочей области. Нам необходимо его сохранить, как шаблон (Edit > Define Pattern) и дать ему какое-нибудь выделяющееся имя.

Осталось разметить рабочую область тремя направляющими. Создайте новую вертикальную направляющую: View > New Guide, выберите пункт Vertical и задайте ей позиционирование на отметке 360px. Точно так же создайте еще две направляющих на отметках 840px и 1320px. Так мы выделили область размерами 960px между отметками 360px и 1320px и провели одну направляющую ровно посередине документа.

Если же вы работаете прямо из файла с 960 Grid System, в нем уже настроены удобные направляющие. Просто откройте View > Show > Guides.

3 Шаг

Теперь, когда у нас готов шаблон разметки, можно браться за проектирование структуры сайта. Дизайн страницы будет разделен на 5 блоков: Шапка (Header), Выноска (Callout), Левый блок (Content - Left), Правый блок (Content - Right), Подвал (Footer).

4 Шаг

Первым делом займемся шапкой, так как будем двигаться сверху вниз. Возьмите Rectangular Marquee Tool и выделите им область по всей ширине документа в самом верху высотой 120px (включив видимость своей горизонтальной разметки, высоту в 120px рассчитать более чем легко - это всего 5 строк по 24px каждая). Залейте шапку темно-серым (#2C2C2C ). Шапка будет содержать лого сайта и навигационное меню.

5 Шаг

Теперь в верхний левый угол страницы поместите ваш логотип, выровняв его по второй колонке (что есть отступ в 40px). В качестве логотипа я использовал обыкновенную надпись, состоящую из двух частей шрифтом Century Gothic и кеглем в 50pt. Первая часть надписи имеет светло-голубой оттенок (#ADC7D9 ), вторая - жирное начертание (bold) и белый цвет (#FFFFFF ). Далее я добавил к лого внутреннюю тень (стиль Inner Shadow); понизил непрозрачность (Opacity) стиля до 25% и задал такие параметры: Distance - 2px, Choke - 0%, Size - 5px.

6 Шаг

Здесь оформим навигационное меню. Чтобы сохранить чистоту и порядок на странице, мы будем использовать текстовые ссылки в меню. Выберите шрифт Arial размером 18pt и создайте надписи для ссылок. Закрасьте активную кнопку белым цветом (#FFFFFF ), а остальные - светло-серым (#BBBBBB ). Выровняйте их по вертикали и поместите в средней полосе шапки.

7 Шаг

Этот блок я назвал выноской потому, что все для чего он нужен - донести до пользователя информацию о странице. Повторите тот же процесс, что и с шапкой (выделение инструментом Rectangle Marquee), но на этот раз имейте в виду высоту блока в 240px, залейте выделение тем же светло-голубым (#ADC7D9 ), что и часть логотипа. Нам нужно добавить легкий градиент этому слою, поэтому выполните двойной щелчок по нему, чтобы вызвать панель стилей слоя и выберите стиль Gradient Overlay. Выберите градиент, переходящий к прозрачному цвету, смените режим наложения стиля на Overlay и понизьте его непрозрачность (Opacity) до 30%.

8 Шаг

Поскольку мы назвали свою компанию “Blue grid” - покажем в фоне выноски едва заметные ячейки. Для этого используем ту же технику, которую применяли для создания горизонтальных линий. Сначала создайте новый документ размером 25px на 25px. После этого удалите его фон, чтобы сделать его прозрачным и закрасьте одну нижнюю линейку пикселей толщиной в 1px, и такую же - по одной из сторон. Сохраните этот файл, как шаблон (Edit > Define Pattern).

9 Шаг

Создайте новый слой поверх слоя с выноской и залейте его только что созданным шаблоном (Edit > Fill).

Поверните этот слой на 15 градусов, задайте ему стиль Color Overlay белого цвета и поместите над панелью выноски.

Задайте слою режим наложения Soft Light. Далее выделите панель выноски либо инструментом Rectangular Marquee Tool, либо нажатием Ctrl + Click по слою с ней. После этого, находясь в режиме Rectangular Marquee Tool, кликаем по выделенной области правой клавишей мыши, выбираем пункт Inverse, затем жмем Delete. Сейчас мы удалили ненужную часть сетки, которая выходит за пределы панели выноски.

Следующим шагом будет создание видимости сетки лишь по ширине рабочей области в 960px. Включите направляющие, если они у вас спрятаны (View > Show > Guides), затем добавьте маску к слою с сеткой.

Перейдите в режим маски нажатием соответствующей кнопки в нижней части палитры Layers, затем выберите инструмент Gradient Tool (G) и определите градиент от прозрачного к черному. С помощью градиента и маски мы уберем части сетки, выходящие за рамки центральной области 960px.

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

10 Шаг

Поместим текст на нашу выноску. Возьмите Arial шрифт, кегль 45pt (#2C2C2C ) и напишите какой-нибудь слоган, выделяя значимые слова жирным начертанием. Под ним поместите текстовое введение меньшим по размеру кеглем (17pt) и сдвиньте все это в левую часть панели выноски.

11 Шаг

Сейчас будем готовить область для слайдшоу. Выберите инструмент Rectangular Marquee Tool и нанесите выделение между крайней правой и центральной направляющими. По высоте выделенная область должна составить 8 линеек по горизонтали, оставьте по одной пустой линейке сверху и снизу. Залейте этот прямоугольник темным серым цветом (#2C2C2C ).

Добавьте тень к вашему фону для слайдшоу: выполните двойной щелчок, чтобы вызвать панель стилей слоя, выберите Drop Shadow, смените цвет на #2C2C2C , задайте Distance 1px и Size 10px.

Далее, в качестве слайда, на фон нужно поместить скриншот какого-нибудь сайта - не важно. Я сделал снимок экрана первого попавшегося блога, изменил его размеры ровно по размерам нашего темно-серого фона, а затем сделал отступы шириной в 10px (Select > Modify > Contract 10px, затем инвертировал выделение и удалил его содержимое нажатием Delete).

12 Шаг

Чтобы начать работать с основным разделом, нужно на фон еще добавить легкий градиент. При помощи Rectangular Marquee Tool выделите всю область, находящуюся под выноской, затем выберите Gradient Tool (G) от цвета #F0F0F0 к прозрачному и протяните градиент по направлению вниз. Не заходите чересчур далеко - фон должен переходить в #F9F9F9 к низу страницы.

13 Шаг

Добавьте вводный абзац в левую часть основного блока. Шрифт - Arial, кегль - 18 pt, цвет >#9C9C9C а цвет ссылки сделайте #A3BBCC и задайте ему подчеркивание.

14 Шаг

Добавим список услуг. Для начала оформите заголовок: Arial, 25pt, Bold, цвет #262626 . Список элементов сделайте размером 18pt , шрифтом Arial #9C9C9C . Пункты списка оформите либо с помощью Elliptical Marquee Tool, либо используя альт коды (Alt + 7) с светло-голубым цветом шрифта (#A4BCCD ) и выравниванием по сетке.

Добавьте любую необходимую информацию таким же путем.

15 Шаг

Правый блок основного раздела будет выводить последние новости. Сначала добавьте заголовок в том же стиле, что и предыдущий (Arial, 25pt, Bold, цвет #262626 ) и выровняйте его по секции предоставляемых услуг. Теперь создайте заголовок для одной из новостей шрифтом Arial, 18pt, #A4BDCD , а само содержимое пишите размером 16pt и цветом #9C9C9C . Напишите таким образом 3 новости, а затем поместите под ними ссылку на ленту новостей шрифтом Arial с подчеркиванием, кеглем 16pt и цветом #A4BDCD .

16 Шаг

Нашим последним блоком будет подвал, в котором будет находиться форма для ввода логина и пароля, контакты и несколько ссылок. Выделите нижнюю часть документа c помощью Rectangular Marquee Tool и залейте ее темно-серым (#262626 ).

Сейчас нам нужно добавить форму для ввода логина и пароля. Сначала шрифтом Arial Bold, 20pt, белого цвета сделайте соответствующую надпись в левой части подвала. Затем с помощью Rectangular Marquee Tool создайте два прямоугольника, которые будут служить полями для ввода. Назовите поля, сделав в них надписи шрифтом Arial 16pt, цвета #9C9C9C .

Повторите то же самое для кнопки отправки, только на этот раз используйте Rounded Rectangle Tool (U). Далее добавьте к этим элементам Inner Shadow, понизьте Opacity этого эффекта до 30%, выставьте Spread равным 0 и Distance - 10px. Добавьте ссылку для восстановления потерянного пароля (Arial, 13pt, подчеркнутый стиль, цвет #A4BDCD ).

17 Шаг

Завершим макет добавлением блока контактов в подвале: озаглавьте его шрифтом Arial 20pt, Bold белого цвета (#FFFFFF ) и выровняйте по заголовку формы для авторизации. Затем добавьте информацию для контактов простым Arial 16pt также белого цвета.

18 Шаг

Проверьте баланс и выравнивание. С помощью ваших направляющих и разлинейки проверьте: все ли находится на своих местах, все ли сбалансировано. Если нет - поправьте.

19 Шаг

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

Поделитесь уроком

Правовая информация

Переведено с сайта www.tutorial9.net , автор перевода указан в начале урока.

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

Как включить сетку в фотошопе? Довольно просто. На верхней панели ищем команду «просмотр», в выпадающем меню выбираем «показать» - «сетка». Ну, либо экономим время и вызываем сетку комбинацией клавиш ctrl+’.

Выглядит это примерно так:


Сделать сетку на рабочем документе в 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 в окне стилей слоя.



Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
ПОДЕЛИТЬСЯ:
NexxDigital - компьютеры и операционные системы