Новости IT

Создание вашей сетки в программе Фотошоп

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

первый метод

Первый метод использует плагин GuideGuide от компании Cameron McEfee, который устанавливает вертикальные столбцы. Говорят что этот плагин Фотошопа находится в бета-версии, но из моего опыта работы, с ним все отлично работает, и существует даже обсуждение выпуска плагина GuideGuide 2, который будет включать в себя дополнительные функции. Инструкцию по установке можно найти на страничке GuideGuide. Существует также видео-руководство по его использованию, которое было создано в дуэте с Расселом Брауном из компании Adobe.

Настройка вашей сетки за 5 секунд

1. Определите поля, количество столбцов и ширину. Затем нажмите кнопку “Create Guides”.
2. Если холст для вашего дизайна широкий, подсчитайте так, чтобы запас длины позволял сетке, быть ограниченной в ваших 960 пикселях. Например, если полотно составляет 1200 пикселей в ширину, то левое и правое поля будут иметь размер 120 пикселей каждое.

Пример 12 колонн с 20-пиксельными желобами и полями установлеными в размере 120 пикселей.

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

Расширение основной сетки с помощью Method & Craft

Вот краткий список шагов для создания расширяемой основной сетки.

1. Установите базовые значения сетки, затем создайте шаблон образца. Сетка базовых линий определяется ведущим основным текстом (или высотой строки основного текста). Например, если основная копия вашего дизайна расположена в 13-точках Хелветика, с ведущим в 18 точках, то вы бы создали 18-пиксельную основную сетку.
2. Создайте файл Фотошопа, который является высотой вашей базовой сетки, заполните нижние пиксели, а остальные пиксели оставьте прозрачными. В этом случае размеры холста будут 1 пиксель в ширину и 18 пикселей в высоту.
3. Нажмите “Выделить все”, а затем сохраните это как новый шаблон.Вы можете сделать это, выбрав команду Изменить → Define Pattern …
4. Перейдите к инструменту Adjustment Layer → Pattern, и снова выберите свой недавно созданный образец сетки.
5. Отрегулируйте желаемую непрозрачность.

Пример первого метода с колонками и базовой сеткой.

Преимущества

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

Недостатки

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

Подготовка документа в «Фотошопе»

Размер и разрешение создаваемого документа (Файл > Создать), будут зависеть от цели изготовления будущего календаря (картинка на сайте/блоге, «живой» календарь на стене или столе, календарь-открытка в подарок, карманный календарик и т. д.). Для печати, например, разрешения 72 пикс/дюйм, выставляемого программой по умолчанию, будет недостаточно, а для календаря чаще всего используют размер А4 с разрешением 300 пикс/дюйм, но можно использовать и любой другой размер.

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

Как взаимодействовать с сеткой в Adobe Illustrator

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

1. Shift + ЛКМ – вы сделаете вашу сетку квадратной.
2. ALT + ЛКМ – сделает центр сетки в точке, куда вы кликаете.
3. Пробел + ЛКМ – переносит таблицу в любое свободное место на холсте.
4. ЛКМ + стрелки клавиатуры – увеличивают или уменьшают количество разделительных линий на вашей сетке.

Аналогичным образом вы сможете создать и полярную сетку. Для этого выберите соответствующий инструмент в том же разделе линеек (polar grid tool).

Горячие комбинации для этой сетки такие же, как и в предыдущем случае.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Layout Wrapper

Одна из главных задач дизайнера — презентация работы заказчику. Дополнение делает скриншот открытого файла и добавляет к нему рамку от браузера Safari.

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

Retina, графика, иконки и иконочные шрифты

Все что можно сделать векторным (в том числе и иллюстрации) — должно быть векторным. Векторные элементы лучше передать отдельными файлами.

Все иконки без сложных эффектов (градиенты, тени) должны быть векторными и без проблем эскпортироваться в svg. Такие иконки следует рисовать шейпами в Photoshop или в Illustrator, вставляя в макет также шейпами (shape). Вставленные смарт-объектами иконки приходится по-отдельности открывать в Illustrator и сохранять оттуда, что замедляет работу.

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

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

Всё, что может быть слито в единую форму, должно быть слито.

Избегайте наложения эффектов и трансформаций.

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

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

Если ипользуются иконки с icomoon.io, flaticon.com и подобных сервисов и вы скачиваете их оттуда в виде архива с SVG-файлами, приложите используемые к макету.

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

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

Контентные элементы (фото, баннеры и т. д.) готовятся под ретину по согласованию с заказчиком и разработчиком. При поддержке retina-экранов и для контента весь макет рисуется в двукратном размере.

Не стоит использовать иконочные шрифты из-за проблем с кроссплатформенностью и возможных дефектов отрисовки.

Статьи по теме

Полезные видео

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

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

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

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

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

Онлайн-курс с поддержкой автора – надежная инвестиция в будущую профессию.

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