Как показать сетку в фотошопе: Линейки, сетки и направляющие в Photoshop Elements

Содержание

Модульная сетка в Photoshop

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

Чтобы в окне программы появились линейки, нужно выполнить команды: Просмотр — Линейки (Ctrl + R). В скобках указаны сочетания клавиш, дублирующих эту команду. Линейки могут быть проградуированы в различных единицах: пикс., см, мм, дюйм… Чтобы настроить единицы, открываем окно настроек: Редактирование — Установки — Единицы измерения и линейки

Но гораздо удобнее это сделать другим способом. Нужно просто щелкнуть правой кнопкой мыши (ПКМ) на линейке и из контекстного меню выбрать нужные единицы.

При создании макета web-страницы лучше всего размеры измерять в пикселях.

Теперь о модульной сетке в Photoshop. Чтобы ее показать, выполним команды: Просмотр — Показать  — Сетку (Ctrl + ‘).

Шаг сетки можно настраивать: Редактирование — Установки — Направляющие, Сетка и Фрагменты

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

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

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

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

Теперь вы можете использовать модульную сетку в Photoshop  в своей работе над макетом сайта.

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


Bubble Sky

Пузырчатое небо ждет вас в новой Bubble Sky. Да, это красиво, но все же не так уж практично. Все эти пузырики мешают свету падать на землю, что затрудняет жизнь людей днем. Вам нужно будет постараться избавиться от всех пузырей. Как? Просто стреляйте шариком так, чтобы соприкоснулось три или более шариков. Лишь после этого они смогут лопнуть. Очистим небо, вперед!

Использование сетки (Grid) в Photoshop. Как сделать сетку в фотошопе Как сделать мелкую сетку в фотошопе

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

Чтобы в окне программы появились линейки, нужно выполнить команды: Просмотр — Линейки (Ctrl + R). В скобках указаны сочетания клавиш, дублирующих эту команду. Линейки могут быть проградуированы в различных единицах: пикс., см, мм, дюйм… Чтобы настроить единицы, открываем окно настроек: Редактирование — Установки — Единицы измерения и линейки

Но гораздо удобнее это сделать другим способом. Нужно просто щелкнуть правой кнопкой мыши (ПКМ) на линейке и из контекстного меню выбрать нужные единицы.

При создании макета web-страницы лучше всего размеры измерять в пикселях.

Теперь о модульной сетке в Photoshop. Чтобы ее показать, выполним команды: Просмотр — Показать — Сетку

(Ctrl + ‘).

Шаг сетки можно настраивать: Редактирование — Установки — Направляющие, Сетка и Фрагменты

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

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

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

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

Теперь вы можете использовать модульную сетку в Photoshop в своей работе над макетом сайта.

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

Bubble Sky

Пузырчатое небо ждет вас в новой Bubble Sky. Да, это красиво, но все же не так уж практично. Все эти пузырики мешают свету падать на землю, что затрудняет жизнь людей днем. Вам нужно будет постараться избавиться от всех пузырей. Как? Просто стреляйте шариком так, чтобы соприкоснулось три или более шариков. Лишь после этого они смогут лопнуть. Очистим небо, вперед!

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

Принцип работы

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

Просмотр – Привязка ). Привязка к линиям помогает ровно располагать предметы относительно друг друга.

Здесь изображен проект. Слева – без вспомогательных элементов, справа – с ними:

Полосы не сохраняются при выводе изображения или печати. Они сохранятся только внутри документа самой программы (название документа.psd).

Как включить

Для создания сетки необходимо выбрать пункт Просмотр – Показать – Сетку . Либо зажать сочетание клавиш Ctrl + ‘ . Если эти действия не привели к нужному результату и разметка не появилась, следует проверить, включена ли функция

Просмотр – Вспомогательные элементы (комбинация клавиш Ctrl + h ).

Как настроить

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

Ниже будет показана разница между разными настройками параметра «Внутреннее деление на »:

Слева установлено внутреннее деление на 1, по центру – 2, справа – 3.

Как отключить

Выключение сетки происходит по тому же алгоритму, что включение. Повторное нажатие Просмотр – Показать – Сетку

, выключит направляющие.

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

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

Работать с сеткой в Фотошопе очень просто. Ниже рассмотрим, как её можно включить.

Как включить сетку в Adobe Photoshop

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


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

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


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

Как видите, установка и настройка сетки в Фотошопе – это очень простое дело. Используйте эту информацию, чтобы получить максимально точное расположение объектов на ваших изображениях.

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

Вам понадобится

Инструкция

1. Для создания сетки зайдите в раздел View Options и в настройках вида выберите отображение сетки (Show Mesh). Укажите требуемый размер, а также цвет. Позже подтверждения команды на вашем открытом изображении появится сетка с указанными параметрами.

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

3. Сетка может оказать значительную подмога в реконструкции изображения позже того, как с ним были проведены какие-то операции, и оно оказалось искаженным. Откройте инструмент «Reconstruct», он дозволит по желанию отменить метаморфозы, восстановить первичный вид изображения либо напротив применить искажение на другие объекты. Помимо того, искажать объект может раздел Liquify. Сетка дозволит вам отслеживать метаморфозы и искажения в любом сделанном объекте, а также вы можете в всякий момент сберечь сетку с формой преобразованного объекта, дабы позднее дозволено было применить ее на него. Верно так же вы можете сберечь сетку для типичного неискаженного объекта, дабы восстановить его параметры позже неудачных действий.

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

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

Вам понадобится

  • компьютер;
  • фотошоп всякий версии;
  • фантазия.

Инструкция

1. Для календаря нам потребуется сетка, которую дозволено скачать в интернете по соответствующему запросу. Дальше открываем нажатием Ctrl+N новейший документ. В разделе «Комплект» предпочтем формат бумаги А4 с белым цветом фона.

2. На документе вызываем «Линейку» (Ctrl+R) и обозначаем линии. По ним мы будем ориентироваться, размещая изображения, а в конце нашей работы по этим линиям нам легко будет согнуть лист бумаги, дабы получился календарь. Проходим в «Просмотр» –> «Новая направляющая» и выбираем в новом окне опцию «Ориентация» –> «Горизонтальная». Вписываем в «Расположение» 50% и подтверждаем.

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

4. Сделаем две картинки, по одной на всякую сторону нашего календаря. При помощи «Свободной трансформации», нажав Ctrl+T, размещаем на документе узор, после этого применяем «Прямоугольная область» и выделяем место для рисунка. Инвертируем выделение (Ctrl+I) и жмем Del. Слой дозволено немножко подправить, применив к нему размытие.

5. Берем вторую картинку, размещаем на иной стороне документа. Если необходимо, используем «Свободную трансформацию», дабы отразить либо уменьшить изображение.

6. Сейчас дозволено расположить календарную сетку. Дабы было не слишком мелко для чтения, расположим полгода на одной стороне, а вторую половину – на 2-й. С подмогой инструмента «Текст» набираем год. Тут же дозволено шрифт увеличить, поменять непрозрачность либо цвет, изменить расположение. По краям делаем рамочку для красоты.

7. Переходим на вторую сторону, поворачиваем холст на 90о по часовой стрелке 2 раза. Только не отразите его по вертикали, напротив получим зеркальное отражение. С сеткой проделываем то же самое: размещаем вторую картинку, текст и сетку, оформляем прекрасно.

8. В конце концов, дозволено спрятать направляющие и приступить к печати. Для печати выбираем формат А4 и ставим галочку на флажке «Настоящий размер». Это дюже главно. Если мы галочку не поставим, у нас может не вместиться календарь на лист А4. Это все.

Видео по теме

Обратите внимание!
Усердствуйте не трудиться на слое Background, потому что некоторые метаморфозы на нем могут оказаться необратимыми. Неизменно отменнее подстраховать себя новым слоем.

Полезный совет
Если Вы допустили ошибку, неизменно дозволено воспользоваться функцией “History”.

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

Вам понадобится

  • – установленный Adobe Photoshop;
  • – файл изображения.

Инструкция

1. Откройте начальное изображение в Adobe Photoshop, предпочтя пункт “Open…” в меню File. При помощи текстового поля, расположенного в нижней части окна документа, либо инструмента Zoom Tool установите подходящий масштаб просмотра. Он должен разрешать изготавливать манипуляции со каждой областью изображения, предуготовленной для обработки.

2. Сделайте стержневой слой из фонового. В основном меню выберите пункты Layer, New, “Layer From Background…”. Нажмите на кнопку OK в появившемся диалоге Layer.

3. Выделите область изображения, к которой необходимо применить результат «рыбий глаз ». Используйте инструменты Rectangular Marquee Tool либо Elliptical Marquee Tool. Если должно быть обработано все изображение целиком, пропустите данный шаг.

4. Активируйте режим обработки изображения при помощи внесения искажений. В меню ступенчато выберите пункты Edit, Transform и Warp. Позже этого в окне документа отобразится сетка для управления параметрами результата.

5. Измените тип применяемого искажения на «рыбий глаз ». Кликните по выпадающему списку Warp, расположенному в верхней панели инструментов. Выберите элемент Fisheye. Сетка управления в окне документа изменит свой вид (останется только один маркер).

6. Примените результат «рыбий глаз » к обрабатываемому изображению. Перемещайте мышью маркер сетки управления до момента достижения нужного яруса искажения.

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

8. Если это нужно, доработайте изображение с внесенным результатом «рыбьего глаз а». Скажем, инвертируйте нынешнее выделение, нажав Ctrl+I, очистите фон, нажав Del, а после этого залейте его надобным цветом при помощи инструмента Paint Bucket Tool. Произведите кадрирование инструментом Crop Tool.

9. Сбережете итог работы в файл. Воспользуйтесь пунктом “Save As…” либо “Save for Web & Devices…” раздела File основного меню. При сохранении специальное внимание уделите выбору формата и степени сжатия данных. Если с изображением предполагается последующая работа, сбережете его копию в формате PSD.

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

Вам понадобится

  • – Adobe Photoshop;
  • – файл с фотографией для обработки.

Инструкция

1. Откройте фотографию, на которой надобно сделать клыки , в Adobe Photoshop. Выберите “Open…” в разделе File основного меню либо осуществите совместное нажатие клавиш Ctrl+O. Укажите файл в появившемся диалоге. Нажмите «Открыть».

2. Выберите один из зубов, на основе которого будет сформирован клык. Активируйте инструмент Zoom Tool. Установите комфортный для работы масштаб просмотра данного фрагмента изображения.

3. Сделайте область выделения вокруг зуба. Это комфортно делать при помощи Magnetic Lasso Tool либо Polygonal Lasso Tool. Если нужно, скорректируйте выделение в режиме стремительной маски либо с подмогой пунктов раздела Modify меню Select.

4. Скопируйте изображение зуба на новейший слой (параллельно с его созданием). Ступенчато выберите пункты меню Edit, Copy и Edit, Paste. Дозволено также воспользоваться комбинациями клавиш Ctrl+C и Ctrl+V.

5. Активируйте режим деформации изображения. Нажмите клавиши Ctrl+Shift+D либо воспользуйтесь пунктом Reselect меню Selection, дабы восстановить предыдущую область выделения. Ступенчато выберите пункты Edit, Transform и Warp основного меню. Вокруг изображения зуба появится сетка.

6. Сделайте клык из зуба. Перемещайте узлы сетки для достижения требуемой формы. Позже окончания реформирования двукратно кликните мышью в центр сетки либо выберите всякий инструмент на панели и нажмите Apply в диалоге запроса.

7. Осуществите сопряжение изображений трансформированного и начального зубов, находящихся в различных слоях. Активируйте инструмент Eraser Tool. Кликнув по элементу управления Brush в верхней панели, выберите кисть подходящего типа, диаметра и жесткости. Параметр Opacity установите в значение 10-20%. Обрабатывайте инструментом Eraser Tool краевые области изображения верхнего слоя до тех пор, пока между ним и фоновым изображением не исчезнут видимые границы.

9. Сбережете измененное изображение. Нажмите Shift+Ctrl+S либо кликните по пункту “Save As…” в меню File. В диалоге выберите формат и имя файла. Нажмите кнопку «Сберечь».

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

Вам понадобится

  • – программа Photoshop;
  • – фотография.

Инструкция

1. При помощи опции Open меню File откройте фотографию в графическом редакторе. Снимок, сделанный на одноцветном фоне без фактуры, шума и затененных участков, находящихся неподалеку от фигуры, которую вы собираетесь исправлять, разблокируйте опцией Layer from Background группы New меню Layer.

2. Картинке с больше трудным фоном понадобится иная подготовка. При помощи инструмента Lasso выделите фигуру с небольшим числом фона. Воспользуйтесь опцией Layer via Copy группы New для копирования выделенной области на новейший слой. При деформации изображения при помощи инструментов фильтра Liquify участки фона, расположенные неподалеку от тех, с которыми вы трудитесь, могут оказаться измененными. Позже окончания работы вы восстановите их из начальной картинки.

3. Опцией Liquify меню Filter откройте окно фильтра и поставьте галочку в чекбоксе Show Mesh. Появившаяся сетка даст вам вероятность отслеживать ход трансформации.

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

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

6. Параметр Brush Pressure управляет скоростью метаморфозы картинки. Присвойте этому параметру малое значение, дабы иметь вероятность следить за процессом трансформации. Разместите центр кисти на выбранную деталь фигуры, зажмите левую кнопку мыши и дождитесь надобной степени метаморфозы снимка.

7. Для сужения фигуры вам может понадобиться инструмент Forward Warp Tool, тот, что смещает пиксели, попавшие под влияние кисти, в сторону ее движения. Настройки этого инструмента сходны с параметрами Pucker Tool. Подгоните размер Forward Warp Tool под длину отрезка, тот, что хотите сдвинуть, установите центр кисти на край фигуры и сместите изображение.

8. Отключите видимость сетки. Если на одном из участков фотографии коррекция оказалась непомерной, восстановите начальный вид этого фрагмента при помощи Reconstruct Tool.

9. Для поправления фона, окружающего фигуру, сделайте маску на слое, к которому был применен фильтр, нажатием на кнопку Add layer mask. Уберите поврежденный фон, закрасив его черным цветом по маске с подмогой инструмента Brush Tool.

10. Продублируйте слой с начальным снимком опцией Duplicate Layer меню Layer и замаскируйте на нем фрагменты фигуры, которые показались из-под слоя с «похудевшим» изображением. Это дозволено сделать инструментом Clone Stamp Tool.

11. Опцией Save As меню File сбережете отредактированное фото в файл jpg.

Видео по теме

Есть инструмент, с которым редактировать графику будет гораздо проще. Это сетка. Она помогает при создании изображений и складывании коллажей. По ней можно оценить размер и расстояние, прикинуть, как будут располагаться объекты относительно друг друга, сделать разметку. Сориентироваться, куда поместить ту или иную часть рисунка. Это полезное средство, если уметь им пользоваться. Узнайте, как включить сетку в Фотошопе, как настроить её атрибуты и как её убрать.

Сетка помогает вам более точно и симметрично расставить элементы в композиции

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

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

Её можно увидеть только в программе. Она не отобразится при печати. В цифровой версии рисунка клеток тоже не будет. Это не часть изображения, а инструмент для редактирования.

Не стоит путать его и пиксельную сетку. Последнее — это разбиение картинки на точки. Пригодится для детального редактирования. Её также можно включить и настроить.

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

Как включить?

  1. Откройте любой графический файл или создайте новый.
  2. В строке меню нажмите на кнопку «Просмотр» («View»). Обычно она находится между «3D» и «Окно».
  3. Наведите курсор на пункт «Показать» («Show»).
  4. В выпавшем меню кликните на «Сетку» («Grid»). Она появится на слое.
  5. Также можно нажать клавиши Ctrl+’ (в русской раскладке Ctrl+Э).

Как настроить?

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

  1. Откройте меню «Редактирование» на верхней панели .
  2. Наведите мышь на пункт «Установки». Он в самом низу списка.
  3. Нажмите на «Направляющие, сетка и фрагменты».
  4. В открывшемся окне задайте нужный размер ячеек. Это можно сделать в поле «Линия через каждые…». Доступны разные единицы измерений: дюймы, миллиметры, пункты и так далее.
  5. В разделе «Стиль» укажите, как должна отображаться сетка: сплошной полосой, пунктирной или точками. Это не столь важно, так как разметка будет видна только при редактировании рисунка.
  6. В пункте «Цвет» выберите заливку. Настройку можно использовать, когда таблица сливается с фоном.

Как убрать?

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

  1. Перейдите в Просмотр — Показать.
  2. Уберите галочку с соответствующего пункта.
  3. Или используйте сочетание клавиш Ctrl+Э.

Пиксельная сетка

Пиксельная сетка заметна только вблизи. Чтоб её увидеть, надо увеличить картинку и изменить масштаб. Но при работе с графикой она может мешать. Вот как её вставить или убрать:

  1. Откройте меню Просмотр — Показать.
  2. Кликните на «Пиксельная сетка».

Линейки

Ещё один метод измерения в Фотошопе — линейки. Они находятся снаружи рисунка. С этим инструментом можно оценить длину и ширину объектов и изображения в целом. Активировать линейки можно в меню «Просмотр». Чтобы выбрать их параметры, перейдите в Редактирование — Установки — Единицы измерения и линейки.


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

Если Вы допустили ошибку, всегда можно воспользоваться функцией «History».

Источники:

  • Как сделать календарь в фотошопе

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

Вам понадобится

  • — установленный Adobe Photoshop;
  • — файл изображения.

Инструкция

Откройте исходное изображение в Adobe Photoshop, выбрав пункт «Open…» в меню File. При помощи текстового поля, расположенного в нижней части окна документа, или инструмента Zoom Tool установите подходящий масштаб просмотра. Он должен позволять производить манипуляции со всей областью изображения, предназначенной для обработки.

Создайте основной слой из фонового. В главном меню выберите пункты Layer, New, «Layer From Background…». Нажмите на кнопку OK в появившемся диалоге Layer.

Выделите область изображения, к которой нужно применить эффект «рыбий глаз ». Используйте инструменты Rectangular Marquee Tool или Elliptical Marquee Tool. Если должно быть обработано все изображение целиком, пропустите этот шаг.

Активируйте режим обработки изображения при помощи внесения искажений. В меню последовательно выберите пункты Edit, Transform и Warp. После этого в окне документа отобразится сетка для управления параметрами эффекта.

Измените тип применяемого искажения на «рыбий глаз ». Кликните по выпадающему списку Warp, расположенному в верхней панели инструментов. Выберите элемент Fisheye. Сетка управления в окне документа изменит свой вид (останется только один маркер).

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

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

Если это необходимо, доработайте изображение с внесенным эффектом «рыбьего глаз а». Например, инвертируйте текущее выделение, нажав Ctrl+I, очистите фон, нажав Del, а затем залейте его нужным цветом при помощи инструмента Paint Bucket Tool. Произведите кадрирование инструментом Crop Tool.

Сохраните результат работы в файл. Воспользуйтесь пунктом «Save As…» или «Save for Web & Devices…» раздела File главного меню. При сохранении особое внимание уделите выбору формата и степени сжатия данных. Если с изображением предполагается дальнейшая работа, сохраните его копию в формате PSD.

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

Как настроить сетку макета в фотошопе

Функция Grid в Photoshop — это отличный инструмент, который поможет вам с дизайном макетов, будь то дизайн для Интернета или для печати. Добавление «Snap» позволяет очень точно выровнять объекты по линиям сетки. И вместо того, чтобы создавать новую сетку каждый раз, когда вы проектируете, вы можете настроить предпочтения сетки, которые можно использовать повторно.

Создание сетки
1. Создайте новый документ. Если вы проектируете монитор с разрешением 1024 x 768 пикселей, настройте новый документ на 960 пикселей в ширину и 768 в высоту.

2. Чтобы добавить сетку, выберите «Просмотр»> «Показать»> «Сетка». Вы сразу увидите сетку, наложенную на ваш новый документ. Сетка, которую вы видите, не печатается, она просто для вашей пользы и справки.

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

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

Чтобы открыть настройки сетки, выберите «Редактирование»> «Установки»> «Направляющие, сетки и фрагменты и счет». Это открывает диалоговое окно Preference, которое вы можете увидеть ниже. (Примечание: я использую CS3, более ранние версии могут выглядеть немного иначе, но будут иметь аналогичные параметры для сеток.)

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

По-прежнему в настройках Grid, если вы хотите иметь сетку из двенадцати столбцов в 960-пиксельном документе, установите опцию «Gridline every» на 80 пикселей. Я оставляю количество подразделений в 4. Нажмите OK, и это ваша сетка на месте.

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

Когда вы закончите проектирование, просто выберите View> Show> Grid или Ctrl +; (шт) или Cmd +; (Mac), чтобы скрыть сетку и восхититься вашим прекрасным дизайном.

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

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, например, к фондам Photoshop .

Комментарии к этой статье закрыты. Есть вопрос о фотошопе? Почему бы не спросить об этом на наших форумах ?

Модульная сетка в Photoshop на видеокурсе от Loftblog

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

Модульная сетка и ее преимущества

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

1) Ускорение работы: это более удобный способ выравнивать объекты относительно друг друга. Мы не тратим лишнего времени на поиск геометрического места элемента в макете.

2) Сбалансированность и пропорциональность: объекты в макете соизмеримы и пропорциональны между собой.

3) Ускорение и подгон под шаблон, единообразность элементов: разработав модульную сетку, мы делаем основу для решений на будущее.

Давайте рассмотрим несколько ресурсов с модульными сетками и научимся создавать свою.

Модульная сетка с сайта 960 Grid System

Откроем сайт 960 Grid System — это сайт, где содержится множество модульных сеток. Вы можете выбрать и скачать ту сетку, которая вам понравится. На сайте применяется система из 16 либо 12 колонок, но существует и 24-х колоночная система, которая в практике редко встречается.

Мы рассмотрим 12-ти колоночную систему, в которой контент располагается в 3 столбца. В ней нет необходимости высчитывать ширину картинки, легко настраивается расположение элементов друг с другом и отступы между ними.

Модульная сетка фреймворка Twitter Bootstrap

Рассмотрим один из СSS-фреймворков Twitter Bootstrap, который также использует модульную сетку — http://getbootstrap.com/. На этом сайте есть раздел “CSS” с подразделом “GRID SYSTEM”, где содержится гибкая мобильная модульная сетка, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или экрана.

На нашем канале есть курс по этому фреймворку, в котором вы сможете создать необходимую модульную сетку для вашего проекта, а также посмотрите цикл уроков по адаптивной верстке CSS3 BUTTON GENERATOR

Собственная модульная сетка

Ну и наконец, мы разберем пример, где вы сможете сами понять, как создать собственную модульную сетку с помощью CSS. Скачаем один из плагинов для Photoshop — http://guideguide.me/. Создаем документ шириной 960рх и высотой 1050рх и открываем в меню Окно->Расширения->Grid System. Создаем сетку из 12 колонок, ширина колонки 20рх, отступы между колонками по 10рх. Нажимаем кнопку Make grid и строим нашу модульную сетку.

Создадим новый слой и с помощью кнопки Rectangular marquee/Прямоугольное выделение выделяем первый столбец и выполним заливку красным цветом или любым другим. Размножим нашу заливку с помощью копирования слоя горячими клавишами Ctrl+J. Выделим все слои и выполним выравнивание по горизонтали, выставим непрозрачность на 10%. Объединим наши слои – Сtrl+E и назовем слой GRID. Модульная сетка готова! На этом все.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Ссылки на сайты из данного урока:
1. 960 Grid System — http://960.gs/
2. Twitter Bootstrap — http://getbootstrap.com/
3. Плагин для Photoshop — http://guideguide.me/
4. Цикл уроков по bootstrap — https://www.youtube.com/playlist?list=PLY4rE9dstrJwP_JUTts9AtMVtJlJVGxWK
5. Цикл уроков по адаптивной верстке — https://www.youtube.com/playlist?list=PLY4rE9dstrJyJEghRkl7qfqdAdlyvaOVQ

Рекомендуемые курсы

включение, настройка и дальнейшая работа

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

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

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

Включение направляющих, первый способ

Существует как минимум два способа того, как включить направляющие в «Фотошопе». В первом случае нужно работать при включенном режиме «Линейки». Далее действуем так:

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

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

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

Включение направляющих — второй способ

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

  • В главном меню нужно выбрать снова пункт «Просмотр» и далее — «Новая направляющая».
  • Таким образом вызывается соответствующее диалоговое окно. В нем нужно выбрать, какую именно линию нужно создать — вертикальную или горизонтальную.
  • Затем в окошке опции «Значение» нужно вбить необходимое число. Допустим, это «Горизонтальная, 1,2 см». В этом случае горизонтальная линия появится на расстоянии 1,2 см от верхнего края рисунка. Либо «Вертикальная, -1,2 см». Так можно нарисовать вертикальную направляющую на рабочей области, на расстоянии 1,2 см от левого края изображения.

Дальнейшая работа с направляющими в «Фотошопе»

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

  1. Их можно передвигать. Для этого поставьте указатель мыши на направляющую, нажмите левую кнопку мыши и потяните линию в нужную сторону.
  2. Их можно убирать. В этом случае нужно таким же способом вытянуть линию на линейку — направляющая исчезнет. Удалить все линии можно, выбрав команду «Удалить направляющие» в пункте меню «Просмотр».
  3. Их можно временно отключать. Это необходимо, когда они мешают оценить изображение. Если это необходимо, нажмите сочетание клавиш Ctrl + ;, и направляющие перестанут отображаться. Повторное нажатие этих же клавиш снова вызовет ранее нарисованные направляющие. Также они снова отобразятся, если нарисовать любым из описанных выше способов новую линию.

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

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

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

Случаи, когда направляющие необходимы

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

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

Эти линии удобны также при выравнивании объектов относительно друг друга или относительно деталей иллюстрации.

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

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

От правильного расположения объектов на фотографии зависит многое. Если объекты расположены вкривь и вкось – снимок уже нельзя назвать качественным. Самый простой способ сравнять объекты – нарисовать прямую линию, вдоль которой и будут расположены объекты фотоснимка.

Adobe Photoshop позволяет добавлять горизонтальные и вертикальные линии, с помощью которых происходит выравнивание фотоснимка. Называются они очень просто – направляющие.

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

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


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

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

После создания направляющих, у вас появляются следующие возможности:

1. Возможность привязки объектов к направляющим, активировав функцию привязки в Photoshop. Данная функция может заметно облегчить процесс выравнивания объектов, т.к. когда объекты приближаются к направляющей, они начинают притягиваться к ней подобно магниту. Для активации данной функции перейдите в меню «Просмотр» – «Привязать к» – «Направляющим». Как только объект будет выровнен по направляющей, его можно перемещать вдоль этой линии, чтобы привязать к определенной позиции. Если вы не хотите привязывать объект к определенной направляющей, просто зажмите его левой кнопкой мыши и перенесите на некоторое расстояние от линии, после чего объект будет отвязан.

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

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

4. Вы можете также удалить сразу все направляющие. Для этого перейдите в меню «Просмотр» – «Удалить направляющие».

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

Сетка документа.


В случае если вам необходимо провести быструю работу по выравниванию объектов, при этом не теряя времени на создание и размещение направляющих, вы можете отобразить сетку. Для ее создания перейдите в меню «Просмотр» – «Показать» – «Сетку» или нажмите сочетание клавиш Ctrl+’. По умолчанию сетка разделена на линии, которые располагаются на расстоянии дюйм друг от друга, при этом каждый дюйм еще разделен на четыре ячейки. Вы можете изменить эти параметры, перейдя в меню «Редактирование» – «Установки» – «Направляющие, сетка и фрагменты».

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

Быстрые направляющие.

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

В прошлой статье был урок Photoshop по применению для создания макета сайта. А сейчас разберемся с еще одним очень полезным инструментом – направляющими и разберемся, как включить направляющие в Фотошопе.

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

Как расставить направляющие? Это можно сделать двумя способами.

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


2 способ, используя меню: Просмотр — Новая направляющая .

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

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

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

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

Направляющие в Photoshopможно закрепить. Чтобы случайно не переместить в процессе работы над рисунком. Для этого используются команды: Просмотр — Закрепить направляющие .

Изучить все тонкости программы Adobe Photoshop вам поможет курс Евгения Карташова «Photoshop CS5 от А до Я» . Курс содержит 100 видеоуроков, созданных на практических примерах. Выполнение этих уроков сделает вас уверенным пользователем программы Adobe Photoshop.

Какие уроки Photoshop вас интересуют. Напишите в комментариях.

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

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

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

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


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

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

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

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

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

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

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

Для того чтобы избавиться от ненужной голубой линии достаточно перетащить её в область линейки и она исчезнет.

Удалить все направляющие линии можно с помощью функции «Просмотр — Удалить направляющие» .

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

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

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

Создается этот инструмент в меню «Просмотр — Показать – Сетка» . Также можно зажать комбинацию CTRL+’ .

В обычном режиме сетка представляет собой направляющие, расстояние между которыми дюйм, поделённый на четыре части. Изменить расстояние между направляющими можно в меню «Редактирование — Установки — Направляющие, сетки и фрагменты» .

Сетка сможет выручить Фотошоп-мастера в том случае, если уравнивать необходимо большое количество объектов, к примеру, текстовые объекты.

Режим быстрых направляющих

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

Данные направляющие демонстрируют пространство между объектами на композиции. Такие направляющие будут изменять своё положение соответственно траектории перемещения объекта. Чтобы активировать эту полезную и удобную функцию, следует перейти в меню «Просмотр — Отобразить — Быстрые направляющие линии» .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы удалить направляющие, заходите в меню Просмотр — Удалить направляющие . Также можно удалить направляющие перетаскиванием за пределы изображения.

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

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

Сетка в фотошопе

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

Для того, чтобы появилась сетка, выбираете в меню Просмотр — Показать — Сетку . Размер сетки регулируется в настройках программы Adobe Photoshop CS5. Чтобы зайти в настройки. выбираете в меню Редактирование — Установки — Направляющие , сетка и фрагменты . В настройках Вы можете указать. как часто будут размещены линии сетки, с помощью пунктов Линия через каждые , и Внутреннее деление на , которые регулируют частоту основных и вспомогательных линий сетки.

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

Чтобы убрать сетку, заходите в Просмотр — Показать , и убираете галочку с пункта Сетка .

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

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

Рекомендуем также

Как использовать сетки и направляющие в Photoshop // (Подробное руководство)

(последнее обновление 18 ноября 2021 г.)

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

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

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

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

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

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

Поворотные решетки и направляющие

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

При размещении направляющей первое, что нам нужно сделать, это включить линейки.Выберите «Просмотр»> «Линейки», и вы должны заметить, что измеренные линейки появятся сверху и сбоку от рабочей области. Эти линейки не только помогают измерять направляющие и сетки, но и применять их.

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

При использовании метода перетаскивания вы можете инвертировать и привязать направляющие с помощью простых ярлыков.Чтобы создать вертикальную направляющую при перетаскивании вниз с горизонтальной линейки, просто удерживайте Option / Alt при перемещении вниз. Чтобы создать направляющую, которая будет привязана к отметкам линейки, удерживайте Shift при перетаскивании направляющей.

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

Вы также можете включить так называемые быстрые направляющие, выбрав «Просмотр»> «Быстрые направляющие».Это предоставит дополнительную информацию и направляющие для выравнивания, которые появятся при перемещении слоев вокруг других объектов и слоев. Эта функция отлично подходит для того, чтобы ваши измерения были прямыми, не глядя постоянно на линейки.

А теперь поговорим о сетках. Хотя простую сетку можно включить с помощью View> Show> Grids, вам могут не понравиться результаты или иметь в виду определенное формирование сетки. Чтобы настроить сетку, вам нужно перейти в меню «Правка»> «Настройки»> «Направляющие, сетка и фрагменты», если вы являетесь пользователем Windows, или Photoshop> «Настройки»> «Направляющие, сетка и фрагменты», если вы работаете на Mac.

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

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

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

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

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

Одно из очевидных применений сеток — создание пиксельной графики. Пиксель-арт основан на ограниченном цветовом формировании сетки для создания различных персонажей, объектов и настроек. Он имеет ретро-привлекательность для воспроизведения 8-битной и 16-битной эпох графики видеоигр.

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

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

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

Сетки

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

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

Сетки

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

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

Использование направляющих в Photoshop Направляющие

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

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

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

Руководства

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

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

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

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

Направляющие

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

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

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

Те, кто работает в Photoshop над созданием композиций или изображений, которые появляются на пленке, должны помнить об этих ограничениях. Непонимание может привести к тому, что вы отправите кадр 1080i для фильма, снятого с разрешением 1080p. Поэтому последнее, что вам нужно, — это дизайн, который не придерживается правильных границ.

Направляющие

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

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

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

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

Использование смарт-направляющих в Photoshop Умные направляющие

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

Когда вы включаете Smart Guides, вам нужно всего лишь использовать несколько клавиатурных команд, чтобы активировать их. Пока вы перетаскиваете слой, удерживайте кнопку Option / Alt. Вы заметите, что Photoshop теперь показывает, какое расстояние вы разместили между слоем и его предыдущим положением.

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

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

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

Умные направляющие

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

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

Заключение Сетки и направляющие

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

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

Сетки

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

Умные направляющие

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

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

Часто задаваемые вопросы Как добавить направляющие сетки в Photoshop?

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

Как установить подробные направляющие в Photoshop?

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

Как включить умные направляющие в Photoshop?

Умные направляющие можно включить так же, как и направляющие. Просто перейдите в Photoshop и выберите «Просмотр»> «Умные направляющие». Умные направляющие будут включены, когда вы перетащите слой и удерживаете клавишу Option / Alt, отображая выравнивание вашего слоя или формы применительно к другим объектам.Кроме того, вы можете удерживать Cmd / Ctrl и навести указатель мыши на слой, чтобы просмотреть измерения, не перетаскивая объект.

Что такое направляющие в Photoshop?

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

Марк Макферсон работает видеоредактором и автором контента более десяти лет. Его опыт начинался с анимации и редактирования видео, а затем перешел в сферу веб-разработки. Он также занимался написанием контента для различных онлайн-изданий. Марк является экспертом в области редактирования видео, написания контента и 2D / 3D анимации.

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

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

Выберите File> Open , чтобы открыть любое изображение, или выберите File> New , чтобы создать новое.

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

Видео: как создать сетку и направляющие в Photoshop.

Посмотрите видео с подробными инструкциями и используйте письменные инструкции для быстрого ознакомления. Если вам понравилось это видео, я настоятельно рекомендую вам подписаться на мой канал Youtube — PhotoEffect .

1. Создайте сетку

Размер изображения в этом примере составляет 3000 пикселей в ширину и 2000 пикселей в высоту.

Как сделать сетку в фотошопе?

Сделать сетку в Photoshop довольно просто.

Чтобы добавить сетку, выберите View> Show> Grid (Ctrl + ’) .

Чтобы добавить сетку, выберите «Просмотр»> «Показать»> «Сетка» (Ctrl + ’).

Откройте настройки сетки, выберите Правка> Настройки> Направляющие, сетка и фрагменты .

Откройте настройки сетки, выберите «Правка»> «Настройки»> «Направляющие, сетка и фрагменты».

Откроется диалоговое окно настроек.

Откроется диалоговое окно настроек.

Выберите цвет и стиль линий сетки.

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

Выберите цвет и стиль линий сетки.

Я установлю для параметра «Gridline every» значение 500 пикселей, а для параметра «Subdivisions» значение 1.

Я установлю для параметра «Линия сетки каждые» значение 500 пикселей, а для параметра «Подразделения» — значение 1.

Выберите «Вид »> «Привязать» и «Вид »> «Привязать к сетке» , чтобы включить привязку, которая поможет вам выровнять любые объект (включая форму), который вы хотите.

Выберите «Просмотр»> «Привязка и просмотр»> «Привязать к сетке», чтобы включить привязку, которая поможет вам выровнять любой объект (включая форму) по вашему желанию.

Выберите View> Snap To> Grid .

Выберите «Просмотр»> «Привязать к»> «Сетка».

Вот результат:

Как создать сетку в Photoshop.

2. Создание направляющих

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

Размер изображения в этом примере составляет 3000 пикселей в ширину и 3000 пикселей в высоту.

Мы создадим направляющие в положениях 0, 750, 1500, 2250 и 3000 пикселей.

Если линейки не видны, выберите «Просмотр»> «Линейки» (Ctrl + R) .

Если линейки не видны, выберите «Просмотр»> «Линейки» (Ctrl + R).

Если вы хотите выбрать цвет и стиль для линий направляющих, просто откройте настройки направляющих, выбрав Правка> Настройки> Направляющие, сетка и фрагменты .

Если вы хотите выбрать цвет и стиль для линий направляющих, просто откройте настройки направляющих, выбрав «Правка»> «Настройки»> «Направляющие, сетка и фрагменты».

Создайте первую вертикальную направляющую.

Выберите View> New Guide .

Выберите «Просмотр»> «Новое руководство».

В диалоговом окне выберите «Вертикальная ориентация», введите положение 0 пикселей и нажмите «ОК».

В диалоговом окне выберите «Вертикальная ориентация», введите положение 0 пикселей и нажмите «ОК».

Повторите этот шаг для положения 750, 1500, 2250 и 3000 пикселей.

Повторите этот шаг для положения 750, 1500, 2250 и 3000 пикселей.

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

Выберите View> New Guide .

В диалоговом окне выберите «Горизонтальная ориентация», введите положение 0 пикселей и нажмите «ОК».

В диалоговом окне выберите «Горизонтальная ориентация», введите положение 0 пикселей и нажмите «ОК».

Повторите этот шаг для положения 1000, 2000 и 3000 пикселей.

Повторите этот шаг для позиции 1000, 2000 и 3000 пикселей.

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

Инструмент «Перемещение».

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

Если вы хотите удалить одну направляющую (с активным инструментом «Перемещение»), наведите указатель мыши на направляющую, а затем перетащите направляющую за пределы окна изображения.

Если вы хотите удалить одну направляющую (с активным инструментом «Перемещение»), наведите указатель мыши на направляющую, а затем перетащите направляющую за пределы окна изображения.

Чтобы удалить все направляющие, выберите «Просмотр»> «Очистить направляющие».

Чтобы удалить все направляющие, выберите «Просмотр»> «Очистить направляющие».

Если вы не видели направляющих, выберите «Просмотр»> «Показать»> «Направляющие» (Ctrl +;) .

Если вы не видели направляющих, выберите «Просмотр»> «Показать»> «Направляющие» (Ctrl +;).

Если вы хотите заблокировать все направляющие, выберите «Просмотр»> «Заблокировать направляющие» (Alt + Ctrl +;) .

Если вы хотите заблокировать все направляющие, выберите «Просмотр»> «Заблокировать направляющие» (Alt + Ctrl +;).

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

Выберите View> Snap , чтобы включить привязку, которая поможет вам выровнять любой объект (включая форму) по вашему желанию.

Выберите «Просмотр»> «Привязать», чтобы включить привязку, которая поможет вам выровнять любой объект (включая форму) по вашему желанию.

Убедитесь, что установлен флажок View> Snap to> Guides .

Убедитесь, что установлен флажок «Просмотр»> «Привязать к> направляющим».

Вот результат:

Направляющие.

3. Сохраните документ

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

Выберите Файл> Сохранить (или Ctrl + S ), чтобы сохранить файл проекта.

В диалоговом окне «Сохранить как» перейдите к папке, в которой вы хотите сохранить файл.

Введите имя в текстовое поле «Имя файла» и оставьте формат Photoshop по умолчанию (* .PSD; *. PDD).

Нажмите «Сохранить», чтобы сохранить изображение.

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

Как создать сетку с правилом третей в Photoshop CS6

О правиле третей:

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

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

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

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

Давайте начнем обучение в следующем разделе — начиная с этапа настройки.

ПРИМЕЧАНИЕ: Если вы используете сетку для других целей, сделайте снимок экрана с вашими настройками или запишите их перед внесением изменений. Вы также можете попробовать наложение на основе слоев или реализацию на основе действий.

Предварительные шаги: Диалоговое окно Photoshop CS6 с настройками направляющих, сетки и фрагментов.
  1. Запустите Photoshop.
  2. Откройте диалоговое окно настроек сетки, выбрав Правка -> Настройки -> Направляющие, сетка и фрагменты… в меню.Диалоговое окно Photoshop CS6 показано выше.
  3. Посмотрите на поле области сетки. Выберите цвет с помощью переключателя цвета справа или в раскрывающемся списке. Я обычно использую значение по умолчанию для цветных фотографий. Если вы много работаете с черно-белыми изображениями, вы можете развлечься, используя красивый голубой или пурпурный цвет, чтобы ваше руководство по правилу третей отображалось в Photoshop.
  4. Далее вы можете выбрать линии, пунктирные линии или точки. Выберите тот, который поможет вам сосредоточиться на работе и не будет слишком отвлекать.
  5. Лучший способ визуально разделить изображение Photoshop на вертикальные и горизонтальные трети, независимо от разрешения или соотношения, использовать процентное соотношение (33,33%) и деление на единицу. Нажмите OK .
  6. Наконец, сетка должна быть включена / выключена, чтобы использовать ее. Мы рассмотрим, как этого добиться, на этапах производства в следующем разделе.

Этапы производства:
  1. Теперь, когда все настроено, давайте попробуем этот метод на изображении.Мне нравится это делать, выясняя целевое соотношение и разрешение. Давайте создадим новое изображение, нажав Файл -> Новый… или нажав Ctrl + N .
  2. Установите соотношение 3: 2 и 300 точек на дюйм. Таким образом, это будет что-то вроде 1800 × 1200 пикселей при 300 dpi для макета фотографии 6 ″ x 4 ″. После того, как вы все настроите в диалоговом окне, вы можете нажать ОК . Появится новое пустое изображение, которое может содержать линии сетки, а может и не содержать.
  3. Если линии сетки не отображаются по умолчанию, переключите линии сетки, чтобы они отображались, нажав View -> Show -> Grid или нажав Ctrl + ‘.
  4. Откройте исходное изображение. Перетащите слой на новое изображение.
  5. Измените размер / расположите изображение слоя ( Ctrl + T ), если оно слишком маленькое, и перемещайте его по мере проверки окончательного положения. Позаботьтесь о том, чтобы выровнять интересующие вас точки на одном или нескольких пересечениях сетки. Подождите, чтобы применить трансформацию, когда вы будете удовлетворены композицией. Применение преобразования будет вызывать повреждение передискретизации каждый раз при его выполнении, поэтому убедитесь, что эти преобразования сведены к минимуму! Более поздние версии Photoshop (CS6 или новее) по умолчанию открывают изображения как смарт-объекты в зависимости от ваших настроек.В таких случаях не так важно заботиться о процессе изменения размера. Поэтому проверьте, есть ли у слоя индикатор смарт-объекта в палитре слоев.
  6. Если вы выполнили преобразование, нажмите Enter, чтобы применить. В противном случае, когда все будет составлено по вашему вкусу, вы можете сохранить и экспортировать изображение.

Относится к правилу третей в Photoshop:

Иногда в ваших композициях могут требоваться квинты, седьмые или девятые и т.д. -рабочий раздел с 20% на пятых, 14.29% для седьмых или 11,11% для девятых. Эти и другие проценты можно вычислить, умножив желаемую долю на 100. (например, пятые: 100 x (1/5) = 20 (%))

Дополнительная информация о правиле третей.

Как создать сетку в Photoshop — Strange Hoot

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

Пять основных шагов создания сетки в Photoshop

  1. Создание нового документа
  2. Создание нового макета сетки
  3. Создание фигур
  4. Свяжите созданные вами изображения и фигуры
  5. Сохраните проект

Как создать сетку в Photoshop за 5 простых шагов

Создание сетки в Photoshop — довольно простая процедура. Создайте этот удобный гаджет, выполнив следующие пять простых шагов.

Шаг 1. Начните с создания нового документа.

Необходимо запустить Photoshop и создать новый документ в качестве отправной точки. На этом этапе вам нужно будет настроить пиксели. Если вы создаете дисплей с разрешением 1024 x 768 пикселей, мы предлагаем вам установить ответ вашего документа на 960 x 768 пикселей.

Шаг 2. Создайте новый макет сетки на своем компьютере.

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

Шаг 3. Создание фигур

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

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

Шаг 4: Создайте ссылку

Начните с выбора слоя, на который вы хотите поместить изображение, а затем нажмите «Файл» и «Поместить» на клавиатуре.

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

Шаг 5. Сделайте резервную копию ваших данных.

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

При нажатии Cmd / Ctrl + S открывается окно сохранения. Теперь вы можете дать своей сетке имя и прикрепить ее к определенному формату файла — изображения наиболее часто используются в форматах .PSD и .TIF.

Создание светящихся линий на сетке в Photoshop, аналогичных эффектам в Tron

Шаг 1. Начните с создания нового документа.

Как и в предыдущих шагах, вы начинаете с открытия Photoshop и создания документа с нужными параметрами.

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

Шаг 2. Конфигурация

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

Перейдите к «Редактировать», а затем выберите «Обводка.Ширина штриха должна быть равна единице, а «Местоположение» должно быть установлено внутри штриха.

Шаг 3. Создайте резервную копию .

Чтобы иметь возможность вернуться к шаблону позже, сохраните его, выбрав «Редактировать», а затем нажав «Определить шаблон». Назовите путь и нажмите кнопку «Сохранить».

Шаг 4. Используйте свой индивидуальный шаблон

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

Выбрав «Правка», а затем «Заливка», вы можете добавить узор на страницу. Вы сможете найти свой дизайн в разделе содержания книги.

Шаг 5. Воспользуйтесь инструментом Transform Tool, который предоставляется бесплатно.

После этого вы захотите использовать бесплатный инструмент преобразования, к которому можно получить доступ, набрав Ctrl / Cmd + T на клавиатуре.

Щелкните правой кнопкой мыши и выберите «Перспектива» из раскрывающегося меню. Затем вы можете перетащить рамку с картинки в желаемое место.

Шаг 6: Добавьте немного сияния

Чтобы завершить процесс, перейдите в «Стили слоя» и выберите «Внешнее свечение». К настоящему времени вы успешно создали намеченный эффект Трона.

Добавление направляющих в документ Photoshop

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

Шаг 1. Установка линейки.

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

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

Шаг 2: Указывает направления

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

Вы также можете оставить их на месте. Выбрав «Просмотр», а затем «Заблокировать направляющие», вы можете закрепить линейки в их текущем положении.

Шаг 3. Сделайте снимок

Привязка — еще одна полезная функция Photoshop, которую вы можете использовать в своих учебных пособиях. Привязка относится к тому факту, что когда вы помещаете элемент в свою сетку, он немедленно «защелкивается» на месте. Этот инструмент удобен при выравнивании слоев, текста или чего-то еще.

Выберите «Просмотр»> «Привязка», чтобы сделать его доступным для использования, чтобы сделать его доступным для использования, в зависимости от того, с какой версией Photoshop или Photoshop CC вы работаете.

Убедитесь, что установлен флажок рядом с «Направляющие и сетка», а также флажок рядом с «Просмотр» в меню «Просмотр». Когда вы нажимаете на сетку, размещенные вами элементы автоматически фиксируются на месте.

Шаг 4 — Снимите и скройте направляющую.

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

Заключение

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

Как применить эффект числовой сетки к изображениям в Photoshop

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

Настроить сетку

Откройте диалоговое окно настроек Photoshop, используя команду K (Mac) или Ctrl K (Win). В разделе «Направляющие, сетки и фрагменты» установите для линии сетки значение каждые 20 пикселей. Вы не хотите, чтобы в этой сетке были какие-либо подразделения, поэтому установите для параметра Subdivision значение 1.

Посмотреть сетку

Используйте пункт меню «Вид»> «Показать сетку» для просмотра сетки. Эффект будет намного лучше, если ваше изображение точно соответствует сетке, поэтому убедитесь, что вы установили размер холста на количество пикселей, кратное 20.

Больше после прыжка! Продолжайте читать ниже
Пользователи Free и Premium видят меньше рекламы! Зарегистрируйтесь и войдите в систему сегодня.

Введите числа

Используйте инструмент «Текст», чтобы растянуть текстовое поле того же размера, что и холст. Введите случайную строку из единиц и нулей. Вам не нужно печатать, чтобы заполнить весь холст; гораздо быстрее набрать пару десятков цифр, а затем несколько раз «Выбрать все», «Копировать» и «Вставить», чтобы заполнить пустое пространство.

Установить размер текста

При активном текстовом поле выберите «Выделить все», чтобы выбрать весь тип, а затем откройте панель «Символ». Установите интервал ровно 20 пунктов, чтобы соответствовать сетке, и размер шрифта около 22 пунктов (в зависимости от выбранного шрифта). Расстояние между символами, известное как «отслеживание», необходимо установить так, чтобы каждое число точно соответствовало квадрату сетки. Это также зависит от вашего шрифта: с Myriad Bold SemiCondensed, который я использовал здесь, значение 310 работает хорошо, но вам нужно будет поэкспериментировать, чтобы получить точную цифру.Для этого полезно увеличить масштаб до 100%.

Раскрась цифры

Выберите цвет для своих номеров — я выбрала темно-зеленый. Выделив числовую сетку (но не щелкнув по ней), используйте Option или Alt и Backspace, чтобы заполнить числа цветом переднего плана. Затем нажмите D, чтобы выбрать черный и белый цвета по умолчанию, выберите фоновый слой и используйте ту же комбинацию клавиатуры, чтобы заполнить фон черным.

Добавить фото

Скройте сетку и выберите изображение (лучше всего подойдет черно-белое изображение).Я выбрал это изображение Мэрилин Монро. Откройте «Фильтр»> «Пикселизация»> «Мозаика» и выберите размер ячейки 20. Это будет точно соответствовать фоновой сетке.

Постеризовать фото

Используйте «Изображение»> «Коррекция»> «Постеризация», чтобы уменьшить количество оттенков серого в изображении. Значение 4 уровня работает хорошо.

Изменить режим слоя

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

Учебное пособие по эффекту сетки с номерами матриц и иллюстрации

Посмотрите видеоверсию этого руководства ниже и получите ссылку для загрузки оригинального изображения на https://www.2minutephotoshop.com/matrix-style-number-grid/

Создайте узор диагональной сетки в Photoshop

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

Приступим к созданию диагональной сетки.

Примечание. Если вы запутаетесь в какой-либо момент, начните снова с шага 1.

Шаг 1

Откройте Photoshop и создайте новый документ.

Файл> Новый

Ярлык

Windows : ctrl + n
Mac : cmd + n

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

Шаг 2

Увеличьте масштаб до 3200%, чтобы мы могли видеть, что мы делаем.

Windows : ctrl + + (знак плюса)
Mac : cmd + + (знак плюс)

Шаг 3

Выберите цвет переднего плана, я выбрал черный (# 000000)
Возьмите инструмент «Линия» и нарисуйте линию от верхнего левого угла к нижнему правому углу.
Затем проделайте то же самое с другим углом (от верхнего правого угла до нижнего левого угла).

Примечание: не забудьте удерживать shift при перетаскивании линии, чтобы получить идеальную линию под углом 45 градусов.

У вас должно получиться изображение, напоминающее «X».

Шаг 4

Перейдите в Edit> Define pattern

Шаг 5

Дайте шаблону подходящее имя. Я предпочитаю всегда указывать размер сетки позади названия моего паттерна. Таким образом, я не запутаюсь, если у меня будет 5 разных шаблонов «диагональной сетки».

Шаг 6

Создайте еще один новый документ. Я сделал свой размер 500 на 500 пикселей.

Шаг 7

Перейдите в Edit> Fill

Ярлык

Windows : shift + backspace
Mac : shift + return

Шаг 8

В раскрывающемся меню «Содержание».Выберите Pattern.

Выберите созданный нами узор. По умолчанию всегда будет использоваться последний шаблон в поле. Нажмите ОК.

Конечный результат

Очевидно, что цвета можно изменить на любые цвета, которые вы предпочитаете.
Вы можете изменить цвета, если хотите.

Создайте свою собственную систему сеток в Photoshop

Сетевые системы — важная часть процесса проектирования.Сетки помогают лучше организовать контент на странице и сбалансировать дизайн, создавая пропорции по отношению к размеру сетки. Это создаст единообразный вид в ваших проектах, позволяя отображать контент в более удобочитаемом виде.
В этом уроке мы создадим нашу собственную систему сеток на основе Bootstrap в Photoshop.

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

Самые популярные CSS-фреймворки, использующие систему сеток, имеют систему сеток из 12 или 16 столбцов: Foundation, Bootstrap, 960 Grid System, Skeleton и другие.

Базовая сетка создает вертикальный ритм в вашем дизайне и строится с учетом размера шрифта содержимого. Обычно размер шрифта составляет 14 или 16 пикселей. Чтобы рассчитать базовый размер сетки, вы должны использовать эту формулу: размер шрифта * 1,5 = размер шрифта или размер шрифта * 1,4 = размер шрифта .Я предпочитаю первую формулу. Это означает, что для размера шрифта 16 пикселей базовая линия будет 24 пикселя.

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

Пример содержимого, выровненного с сеткой

Basehold.it — ​​это полезный инструмент для отображения вашей базовой сетки при создании сайта в браузере. Он отобразит наложение базовой линии, что позволит вам легко структурировать и упорядочивать контент.

Правила сетки столбцов

Мы построим нашу систему сеток на популярном CSS-фреймворке Bootstrap и создадим сетку для устройств с большим разрешением, не менее 1200 пикселей в ширину.

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

  • размер контейнера, в котором будут размещены 12 столбцов, составляет 1170 пикселей шириной
  • один столбец ширина 70 пикселей
  • Используется 12 столбцов
  • расстояние между столбцами (ширина желоба) составляет 30 пикселей
Это то, что мы будем строить

Скачать шаблон

Создание нашей сетки столбцов в Photoshop CC или новее

Если вы используете Photoshop CC или более новую версию Photoshop, вы можете легко создать сетку с помощью инструмента New Guide Layout .Вам не понадобится внешний плагин, например GuideGuide, и вам не придется создавать руководства вручную.

Шаг 1

Начните с создания нового файла ( CTRL + N или File> N ) и установите ширину документа 1280px , высоту 500px и имя « 1170 Template by AcasA Programming ». Не стесняйтесь использовать другие настройки или имя.

Диалог создания нового документа

Шаг 2

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

Новые настройки макета руководства

Шаг 3

Теперь мы можем очень легко добавить прямоугольники внутри направляющих, которые будут служить фоном столбцов. Нарисуйте прямоугольник шириной 70 пикселей и высотой 500 пикселей и установите его цвет. Я выбрал красный: ff0000 .
Совместите прямоугольник с левой направляющей. Теперь у нас готова первая колонка.

Шаг 4

Теперь просто продублируйте прямоугольник и совместите его с направляющими. Чтобы дублировать элемент, выберите слой элемента и щелкните его правой кнопкой мыши и выберите Дублировать слой , или нажмите CTRL + J , или более быстрый и наглядный метод — удерживать ALT + SHIFT + Щелкните и перетащите .

Сетка из 12 столбцов с направляющими

Шаг 5

Мы почти закончили. Нам нужно объединить прямоугольники вместе. Чтобы объединить их, выделите все слои прямоугольника и нажмите CTRL + E . Переименуйте новый слой в Grid и уменьшите непрозрачность примерно до 15%.

Окончательный вид сетки Bootstrap

Поздравляем! Теперь у нас есть сетка Bootstrap, которую мы можем использовать для организации наших дизайнов.

Базовая сетка

Теперь, когда мы закончили сетку столбцов Bootstrap, мы можем приступить к построению базовой сетки.Мы собираемся использовать 24 пикселя между горизонтальными линиями.

Шаг 1

Создайте новый документ шириной 1 пиксель и высотой 24 пикселя и прозрачным фоном.

Создайте новый файл шириной 1 пиксель

Шаг 2

Нарисуйте квадрат размером 1 пиксель и залейте его желаемым цветом. Я выбрал синий цвет: # 328ff7 . Поместите квадрат внизу документа.

Шаг 3

Сохраните файл как образец.Для этого перейдите в Edit> Define Pattern . Введите название, например: «Базовая линия 24 пикселя»

. Определение шаблона

Шаг 4

В нашем основном документе создайте новый слой и залейте его белым цветом. Щелкните правой кнопкой мыши слой и выберите Параметры наложения . Перейдите в опцию Pattern Overlay и выберите базовый узор, который мы создали на шаге 3.

Настройки наложения рисунка

Шаг 5

Поместите слой базовой сетки под слой сетки столбцов и уменьшите непрозрачность до 20%.

Окончательный результат и настройки непрозрачности

Построение сетки колонн в старых версиях Photoshop

Шаг 1

Начните с создания нового файла ( CTRL + N или File> N ) и установите ширину документа 1280px , высоту 500px и имя « 1170 Template by AcasA Programming ». Не стесняйтесь использовать другие настройки или имя.

Диалог создания нового документа

Шаг 2

Пришло время добавить направляющие полей.Чтобы добавить новое руководство, выберите «Просмотр»> «Новое руководство». Добавьте новую направляющую на 55 пикселей и направляющую правого поля на 1225 пикселей.

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

Шаг 3

Нет, мы установили поля, мы можем создать прямоугольники, которые будут представлять столбцы.
Нарисуйте прямоугольник шириной 70 пикселей и высотой 500 пикселей и установите его цвет. Я выбрал красный: ff0000 .

Настройки столбца сетки

Совместите прямоугольник с левой направляющей. Теперь у нас готова первая колонка.

Шаг 4

Чтобы создать правый столбец, нам просто нужно выполнить шаг 3. Совместите новый прямоугольник с правой направляющей. У вас должно получиться что-то вроде этого:

Шаг 5

Дублируйте столбец и переместите его на 30 пикселей вправо.

Теперь нам нужно создать еще 10 столбцов. Вы можете либо продублировать столбцы и разнести их на 30 пикселей друг от друга, либо создать 20 новых направляющих с точным расположением пикселей.
Создание (или дублирование) столбцов — более простой и быстрый метод, и я предпочитаю его.

Чтобы дублировать элемент, выберите слой элемента и щелкните его правой кнопкой мыши и выберите Дублировать слой , или нажмите CTRL + J , или более быстрый и наглядный метод — удерживать ALT + SHIFT + Щелкните и перетащите .
Дублируйте первый столбец и разместите его на 30 пикселей от первого. Чтобы легко разместить второй столбец на 30 пикселей, поместите новый столбец прямо рядом с первым, а затем, удерживая клавишу Shift, нажмите стрелку вправо 3 раза.

Шаг 6

Повторяйте шаг 5, пока не получите 12 столбцов.
Совет : вы можете дублировать 2 (или более слоев) одновременно, используя предпочитаемый вами метод.

Дублирование 2 столбцов

Результат:

12 столбцов

Шаг 7

Теперь, когда у нас есть 12 столбцов, мы можем добавить направляющие. Вместо добавления новой направляющей и прямого ввода местоположения пикселя вы можете просто перетащить направляющие с линейок, расположенных в левой части рабочего пространства. Если ваши линейки не отображаются, нажмите CTRL + R , чтобы отобразить линейки.
Добавьте направляющие к левому и правому полям прямоугольников.

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

Сетка столбцов с добавленными направляющими:

Сетка из 12 столбцов с направляющими

Шаг 8

Мы почти закончили. Нам нужно объединить прямоугольники вместе. Чтобы объединить их, выделите все слои прямоугольника и нажмите CTRL + E . Переименуйте новый слой в Grid и уменьшите непрозрачность примерно до 15%.

Финальная форма сетки Bootstrap

Поздравления

Теперь у нас есть потрясающая сеточная система, основанная на популярном фреймворке Bootstrap.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Авторское право © 2024 Es picture - Картинки
top