Как включить сетку в фотошопе

Детали сеточного дизайна. Работаем в фотошопе

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

Фон холста зальем светло-серым цветом, затем создадим текстуру, для этого к холсту применим фильтр шум (noise) 3%.

Создадим новый документ 24px 24px, в котором сделаем повторяющийся образец для основы сеточного дизайна. Создадим линию шириной в 1 px между нижними краями, так как показано на рисунке. Это изображение сохраним как образец (Define Pattern).

Этим образцом зальем новый слой и сделаем белый цвет непрозрачным. Также можно отрегулировать непрозрачность у вертикальных линий по желанию. Вертикальную сетку создадим руками, то есть продублируем и сместим вручную. Ширина тонких колонок приблизительно будет равно 21 px, ширина полной колонки равна 139px

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

Все вертикальные линии сгруппируем вместе, в результате у нас получится 6 колонок, которые мы отцентрируем. Затем созданную сетку украсим актуальными декоративными элементами.

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

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

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

Так как наш дизайн является темой к блогу, содержание сделаем в виде типовых постов блога. Первый и последующие посты будут лежать между второй и шестой колонками. К заголовку применим шрифт Georgia, а к тексту для контраста Helvetica. Самостоятельно отредактируйте line-height, так чтобы текст ложился на нашу фоновую сетку.

Первую колонку оставим как запасную, для того чтобы туда можно было поместить информацию о посте (например: дату или категорию). Цвет шрифта в этой колонке сделаем светло-серым, но большого размера. Высоту линии (Line-height) зададим в 24px, чтобы соблюсти симметрию в проекте.

Ссылки, ведущие к тексту, оформим на красном фоне и шрифтом Georgia.

Нижнюю часть проекта сделаем в темно-сером фоне, это нам даст желаемый контраст с основной областью. Также можно добавить шум к фону.

Контент в подвале расположен в виде списков, сперва идет список категорий, затем список ссылок на социальные проекты. Заголовки заданы с помощью Helvetica, а сами ссылки в Georgia с удвоенной line-height.

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

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

Так как проект довольно «легок», число изображений будет не слишком большим. Два изображения с фоном будут различаться только наличием сетки.

Я не стал «заморачиваться» с описанием разделов CSS и HTML, так как исходники можно посмотреть в demo , и там все довольно просто.

Источник line25.com

Линейки

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

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

05.02.2017 28.01.2018

Привет всем посетителям сайта сайт

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

Стоит отметить, что Сетку не видно при сохранении изображения в форматах jpg, png, gif. Так же Сетка «невидима» при печати. Сетка видна только в самой программе фотошоп или если сохранить изображение в формате PSD или TIFF. Если сохранить изображение в формате PSD или TIFF и передать файл другому человеку, он, открыв файл на своем компьютере, сможет увидеть созданную вами Сетку.

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

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

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

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

Как убрать сетку в «Автокаде»

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

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

Итак, знание того, как убрать сетку в «Автокаде», позволит пользователю активировать и дезактивировать эту функцию.

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

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

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

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

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

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

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

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

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

Чтобы отобразить или скрыть направляющие или сетку

Выполните одно из предложенных действий:
Меню View > Show > Grid (Вид > Показать > Сетка)
Меню View > Show > Guides (Вид > Показать > Направляющие)
Меню View > Extras (Меню > Дополнительно). Данная команда также может быть использована для отображения или скрытия: границ выделения, путей (paths), вырезок (slices), заметок. А в ImageReady для: границ выделения, вырезок (slices), границ текста, опорной линии текста и выделенного текста.

Чтобы разместить направляющую

1. Если линейка не отображена, выберите пункт меню View > Rulers (Вид > Линейка). (Заметка: для наиболее аккуратного и красивого просмотра изображения просматривайте изображение в 100% масштабе или используйте палитру Info (Информация).

2. Создайте направляющую одним из способов:
Выберите View > New Guide (Вид > Новая направляющая). В диалоговом окне выберите горизонтальную или вертикальную ориентацию, введите позицию и щелкните ОК.
Выберите View > Create Guides (Вид > Создать направляющие). В диалоговом окне настройте будущую направляющую и щелкните ОК.
Чтобы создать горизонтальную направляющую можно также просто, зажав мышку на горизонтальной линейке, провести вниз-вверх.
Зажмите Alt, и, зажав мышку на вертикальной линейке, проведите горизонтальную направляющую.
Чтобы создать вертикальную направляющую можно также просто, зажав мышку на вертикальной линейке, провести влево-вправо.
Зажмите Alt, и, зажав мышку на горизонтальной линейке, проведите вертикальную направляющую.
Зажмите Shift и, зажав мышку на горизонтальной или вертикальной линейке, создайте направляющую, которая прилеплена по умолчанию к краям линейки.

Курсор меняется на этот — при перемещении направляющей.

Чтобы переместить направляющую:

1. Выберите инструмент Move Tool или зажмите Ctrl, чтобы активировать инструмент (Ctrl не работает с инструментами Hand Tool или Slice Tool ).

2. Поместите курсор над направляющей (курсор превратится в двойную стрелку).

3. Для перемещения направляющей:
Зажав курсор на направляющей, перемещайте еею
Чтобы поменять направляющую с горизонтальной на вертикальную, или наоборот, зажав Alt, кликните на направляющей.
Вдоль направляющей, проходящей по краю линейки, зажав Shift, перемещайте направляющую. Направляющая будет прилепляться к сетке, если сетка видна в данный момент, а также включена опция View > Snap To > Grid (Вид > Привязывать к > Сетка).

Чтобы удалить направляющие с изображения

Выполните одно из перечисленного:
Чтобы удалить одну направляющую, переместите ее за пределы изображения.
Чтобы удалить все направляющие, выберите меню View > Clear Guides (Вид > Удалить направляющие).

Для того, чтобы настроить опции направляющей или сетки:

1. Выполните одно из перечисленного:
Выберите меню Edit > Preferences > Guides, Grid & Slices (Редактировать > Настройки > Направляющие, сетка и слайсы).

2. Цвет. Для сетки, направляющих или вместе взятых. Если вы выберете Custom, щелкните на квадратике с цветом и выберите нужный цвет, щелкните ОК.

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

4. Для Gridline Every выберите значение расстояния между клетками сетки. Для мелких частей (Subdivisions) выберите значение сетки.

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

5. Щелкните ОК.

Перевод: MGraphics.RU

Разместил: ЭртэдОпубликовано: 12.01.2007
Статья «Photoshop — Используем направляющие и сетку» прочтена 44654 раза.

Программа AutoCAD

Это приложение для двухмерного и трехмерного проектирования. Программа была разработана компанией Autodesk. Самым первым продуктом компании стал AutoCAD — 86, выпущенный в 1982 году. Программа моментально стала популярной и уникальной в своем роде. Сейчас компания ежегодно выпускает обновленную версию своего продукта.

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

Как использовать Сетку

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

Изменим сантиметры на пиксели и выставим шаг в 50 пикселей:

Активируем инструмент Прямоугольное выделение
(Rectangular marquee
), горячая клавиша вызова инструмента — M
.

Небольшой совет по использованию сетки в фотошопе:

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

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

Возвращаемся к уроку

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

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

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

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

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

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

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

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

Как использовать Сетку

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

Изменим сантиметры на пиксели и выставим шаг в 50 пикселей:

Активируем инструмент Прямоугольное выделение
(Rectangular marquee
), горячая клавиша вызова инструмента — M
.

Небольшой совет по использованию сетки в фотошопе:

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

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

Возвращаемся к уроку

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

Линейки

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

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