Как сделать шестиугольную сетку для создания паттернов в Adobe Illustrator. Как включить в иллюстраторе сетку


Разбираемся с сеткой в Adobe Illustrator / Хабр

От переводчика

Привет, %юзернейм%!

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

Материал расчитан на новичков, и немного рассказывает о двух вещах:

  1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
  2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.
Мне этот материал интересен с той точки зрения, что я был бы очень благодарен, если бы в самом начале моей работы дизайнером интерфейсов мне кто-нибудь рассказал о пиксельной сетке. Поэтому, я надеюсь, что облегчу кому-то жизнь, публикуя этот перевод.

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание
  • Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
  • Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator

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

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

Да, я собираюсь рассказать вам о Сетке.

Что такое Сетка?
Как и в изучении любого другого вопроса давайте сначала дадим определение изучаемому термину. Если обратиться к онлайн-словарю Merriam-Webster, сетка — это сеть равномерно расположенных вертикальных и горизонтальных линий(например, для позиционирования точек на карте).

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

Кстати, сетка Adobe Illustrator состоит только из строго вертикальных и горизонтальных линий. Если вам для работы нужны кривые или ещё какие-то более сложные сетки, то вы сможете создать их с помощью гайдов-направляющих, это на самом деле довольно несложно.

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

Кроме того, Сетка как инструмент помогает дизайнерам создавать Pixel Perfect изображения, что очень важно (на мой взгляд так вообще обязательно) при создании изображений для разных устройств с разными экранами.

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

Цифра VS Печать
Ни для кого не секрет, что цифровые изображения на экранах много чем отличаются от напечатанных изображений на бумаге. У каждого типа изображений своя цветовая схема (RGB у цифровых изображений и CMYK у печатных картинок), и каждый тип имеет своё выходное разрешение (разрешение экрана и разрешение при печати). Всё это создаёт разницу в том, каким образом создаются эти два типа изображений, в особенности то, каким образом получаются изогнутые, кривые линии.

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

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

Использование привязок
Один из самых интересных вопросов, который может быть поднят в этой теме. Если вы используете привязки, то вы как бы говорите Illustrator'у выравнивать ваши объекты на холсте к вашей сетке либо пиксельной сетке.

Помните, что недавно я заикнулся о Pixel Perfect изображении? Теперь, когда вы знаете, в чём отличие напечатанных картинок от цифровых, отображаемых на экране, самое время поведать о том, в чём на мой взгляд главная роль Сетки.

Я уверен, что вы ранее наверняка видели различные иллюстрации на Dribbble или Behance с супер-чётким изображением. Лично я всегда удивлялся, как автору удалось вывести такие чёткие линии? Как оказалось, в этом нет ничего необычного! Он или она просто привязывали все объекты к пиксельной сетке и создавали каждый элемент с целыми значениями размеров в пикселях!

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

Расширенное понятие сетки
Картинка лучше тысячи слов. Давайте я попробую показать вам на примере, как настроить сетку. Давайте проделаем шаг за шагом алгоритм, который вы будете проделывать каждый раз при создании нового проекта в Illustrator. Я уверен, вам это понравится.
Шаг 1
При старте любого нового проекта в Illustrator, мы всегда начинаем с настроек нового документа. Давайте откроем Illustrator и создадим новый документ со следующими настройками:
  • Количество холстов: 1
  • Ширина: 800 пикселей
  • Высота: 800 пикселей
  • Единицы измерения: пиксели
На вкладке дополнительных настроек:
  • Цветовой режим: RGB
  • Разрешение при растеризации: 300 пикселей на дюйм
  • Приравнивать новые объекты к пиксельной сетке: отмечено

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

В самом деле, вы в любой момент можете изменить значение PPI, если зайдёте в Effect > Document Raster Effects Settings.

Шаг 2
После того, как вы настроили документ, создайте чёрный квадрат размерами 100х100 пикселей, и разместите его точно в левом верхнем углу Холста, используя палитру Align.

Шаг 3
Чтобы понять, как работает сетка, давйте посмотрим на это. Открываем меню View > Show Grid (или нажимаем Ctrl + „), и тут же на экране появляется стандартная сетка 1000х4.

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

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

Давайте отменим наши последние шаги, вернём квадратик на своё место, и зайдём в меню View → Snap to Grid (Shift + Ctrl + Y), а потом снова оппробуем поперемещать наш объект.

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

Давайте разберёмся, почему Illustrator ведёт себя именно так, попробуем понять устройство Сетки. Как я говорил ранее, есть предустановленные настройки Сетки, вот они:

  • Шаг сетки через каждые: 1000px
  • Деления внутри шага сетки: 4

Что в самом деле означают эти настройки?

Это очень легко, смотрите. Через каждые 1000 пикселей Illustrator будет рисовать клетку, поделенную на 4 части (тем самым внутри клетки появится сетка 2х2), т.е. получатся клетки, каждая из которых размером 1000 х 1000 пикселей, и в свою очередь поделена ещё на 4 клетки размерами 250 х 250 пикселей (1000/4 = 250).

Т.к. наш холст имеет размеры всего лишь 800х800 пикселей (т.е. полностью умещается три квадрата сетки по 250 пикселей и ещё остаётся 50 пикселей), привязка будет срабатывать на верхнюю и левую часть этого пространства, которая умещается в 1000 х 1000 пикселей. А нижняя и правая часть пространства на линии толщиной 200 пикселей, выделенной красным, остаётся незадействованной.

Теперь если мы вернёмся к нашему маленькому чёрному квадрату, то мы увидим, что он прилипает только к линиям сетки, которые располагаются в 250 пикселях друг от друга, при том, что сам квадратик 100х100 пикселей. Если бы чёрный квадрат был размером 250х250 пикселей, то он бы занимал целую клетку сетки, и прыгал бы точно в одну из 16 маленьких клеток.

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

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

Мои настройки сетки такие:

  • Линия сетки через каждые: 1 пиксель
  • Деления внутри шага сетки: 1
Если вы хотите поэксперементировать и настроить Сетку под себя, вам просто нужно зайти в меню Edit > Preferences > Guides & Grid и настроить всё так, как вам хочется.

Быстрое прототипирование с использованием сетки
Давайте выполним небольшое упражнение и попробуем сделать быстрый прототип веб-сайта с использованием сетки через каждые 800 пикселей с разделением на 4 шага на холсте размером 800 х 800 пикселей.

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

Шаг 1
Создаём прямоугольник размером 800х200 пикселей и распологаем его сверху нашего холста, раскрасим его цветом #191919. Теперь возьмём инструмент Текст и подпишем этот элемент как Шапку нашего веб-сайта.

На заметку: Если у вас есть более мелкие элементы, которые не обязаны быть привязаны к сетке, в нашем примере это тексты-подписи к прямоугольникам, просто выделите их, зайдите в меню View и снимите галочку с опции Snap to Grid.

Шаг 2
Создадим небольшой прямоугольник размером 600х400 пикселей и цветом #191919 и попробуем разместить его, используя кнопки на клавиатуре, в левой части нашего холста, сразу под шапкой. Этот жлемент так же следует подписать, это будет Content.

Шаг 3
Давайте создадим объект поменьше размером 200х400 пикселей цветом #B24747 и потом разместим его в правой части, справа от контента, а потом подпишем его Sidebar.

Шаг 4
Завершаем наше прототипирование добавлением последнего элемента 800х200 пикселей и цветом #191919. Расположим этот прямоугольник внизу холста и назовём его Footer.

Грубо говоря, только что за несколько секунд нам удалось набросать макет сайта. Здорово тратить на такие вещи так мало времени, не правда ли?

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

По умолчанию, если вы создаёте новый документ, режим Preview обычно выставлен в положение Default. Это означает, что то, что вы создаёте — это то, что вы видите. (Т.е. вы видите вектор таким, какой он есть, не расстрированным). В этом случае опция Snap to относится к Сетке, которую вы настраиваете, и Сетка зависит от тех значений, которые вы выставите в параметрах.

Если вы включите Pixel Preview (View → Pixel Preview) и приблизите изображение, Illustrator покажет вам пиксели, из которых состоит ваше векторное изображение. Когда режим привязок включен на пиксели, каждое нажатие на стрелки клавиатуры будет перемещать ваш объект на фиксированное число пикселей, которое выставлено в настройках Keyboard Increment.

На заметку: Да, вы можете включить Keyboard Increment на любое кол-во пикселей, которое вам удобно. Эта опция располагается в меню Edit > Preferences > General > Keyboard Increment.

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

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

Полезные ресурсы

  • Чои Вин. Как спроектировать современный сайт. Профессиональный веб-дизайн на основе сетки. б.м.: Питер, 2012. Существует множество книг про сетки. популярные и не очень, но я читал именно эту, поэтому именно её и рекомендую. Здесь по шагам очень подробно описывается процесс разработки универсальной сетки (которая в готом варианте раздаётся много где). Вобщем-то после прочтения точно всё встаёт на свои места, становится понятно что, почему и зачем.
  • 960 Grid System — один из всевозможных готовых наборов сеток. Здесь есть уже созданные шаблоны макетов под все популярные редакторы вроде Photoshop, Illustrator, InDesign и т.д. Список очень большой, ознакомьтесь.
  • GuideGuide и Griddify — плагины для Photoshop для создания сеток.

habr.com

Как сделать шестиугольную сетку для создания паттернов в Иллюстраторе - Советы

 

Цель Урока

 

 

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

 

 

Создание геометрических сеток при помощи плагина Scriptographer

Вы можете быстро создать геометрические сетки при помощи плагина Scriptographer и скрипта Grid Generator, который работает внутри указанного плагина. Этот способ, к сожалению, доступен только пользователям ранних релизов Adobe Illustrator (9 – CS5). Пользователям последних релизов приложения (CS6-CC) придется создавать подобные сетки вручную, и мы поговорим об этом ниже.

Скачайте плагин Scriptographer. Перед установкой плагина ознакомьтесь с инструкцией. Теперь скачайте скрипт Grid Generator и поместите его в папку со скриптами для плагина Scriptographer. На моем компьютере путь к этой папке выглядит следующим образом C:\Program Files\Adobe\Adobe Illustrator CS5\Plug-ins\Scriptographer\Scripts\Examples\Scripts. Запустите Adobe Illustrator или перезапустите приложение, если оно было открыто в процессе установки. Теперь переходим Window > Scriptographer > Show Main Palette, затем находим скрипт Grid Generator и нажимаем на кнопку Play в нижней части панели.

 

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

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

Создание геометрических сеток вручную

Кроме того, что ручные способы подходят пользователям Adobe Illustrator CS6-CC, они обладают большей гибкостью в создании сеток, то есть вы не ограничены четырьмя вариантами, которые нам предлагает скрипт Grid Generator. Рассмотрим ручные способы на примере создания Triangular grid. Это, наверное, самый распространенный вид сетки. Другие варианты строятся по тому же принципу. Создадим шестиугольник при помощи Polygon Tool.

Не снимая выделения с объекта, переходим Object > Transform > Rotate… и устанавливаем угол 90 градусов в диалоговом окне.

Проверьте или у вас включены Smart Guides (View > Smart Guides или комбинация горячих клавиш Cmd/Ctrl +U)

Для большей точности вы также можете включить режим Outline Preview (View > Outline или комбинация клавиш Cmd/Ctrl + Y)

Берем Line Tool (\) и соединяем противоположные вершины шестиугольника так, как это показано на рисунке ниже. При точном совпадении с вершиной появляется надпись "anchor” – это работа умных направляющих.

Выделяем все созданные объекты, затем нажимаем на Divide в панели Pathfinder (Window > Pathfinder).

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

Не смотря на точное позиционирование объектов, иногда мы также можем получить паразитные точки. Поэтому проверяйте панель Layers и удаляйте их, например, так Object > Path > Clean Up….Переместим группу из треугольников вниз и вправо так, чтобы вершина A совпала с вершиной B. Умные направляющие помогут нам сделать это точно. Когда появится надпись "intersect”, вам следует остановиться. Удерживайте во время перемещения клавиши Opt/Alt, что приведет к дублированию группы.

Выделяем обе группы, затем переместим их вправо, удерживая Shift + Opt/Alt. В этот раз мы совмещаем вершины отмеченные буквами C и D и дублируем группы.

Теперь используем комбинацию горячих клавиш Cmd/Ctrl + D требуемое количество раз для последовательного повторения последнего действия (перемещение и дублирование).

Выделяем все созданные объекты и повторяем последние действия в вертикальном направлении. То есть перемещаем вниз, удерживая Shift + Opt/Alt, затем используем комбинацию Cmd/Ctrl + D.

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

Вы также можете использовать эффект Transform для дублирования ячеек сетки. Перед применением эффекта нам потребуется произвести некоторые измерения. Выделим одну из групп с треугольниками. Ее ширина будет равна величине горизонтального перемещения. Эту величину мы можем увидеть в панели Control или в панели Transform.

Для того чтобы определить величину вертикального перемещения нам необходимо измерить расстояние между точками A и B. К сожалению, Measure Tool вообще не пригоден для точных измерений. Но мы можем использовать для этих целей Line Tool (\). Создадим прямолинейный сегмент между точками A и B. Умные направляющие помогут нам идеально точно позиционировать его точки.

Длина сегмента является искомой величиной вертикального смещения.

Если немного подумать, то окажется, что при помощи Line Tool (\) можно было сразу определить величины горизонтального и вертикального смещения. Для этого нужно провести прямолинейный сегмент между точками C и D, как это показано на рисунке ниже.

Ширина этого сегмента равняется величине горизонтального смещения, а его высота соответствует величине вертикального смещения. Так или иначе, все измерения сделаны, приступим к применению эффекта. Выделяем обе группы, затем переходим Effect > Distort & Transform > Transform…. Устанавливаем величину горизонтального смещения и требуемое количество копий, нажимаем OK.

Теперь применим эффект еще раз (Effect > Distort & Transform > Transform…). На этот раз устанавливаем величину вертикального смещения и необходимое число копий.

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

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

Окраска ячеек сетки

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

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

Выделяем сетку и растровое изображение, затем запускаем скрипт rasterColor в палитре Scriptographer.

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

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

Конечно, вы можете окрашивать ячейки сетки, просто выделяя их и окрашивая в нужные цвета, получая при этом интересные узоры. Ячейки сетки можно также окрашивать, используя Live Paint Bucket Tool (K). Этот инструмент позволяет осуществить окраску быстрее.

Только не забывайте после окраски перейти Object > Live Paint > Expand. Бесшовные паттерны, показанные на рисунках ниже, были получены именно таким способом.

Создание бесшовных паттернов

Пользователи последних релизов Adobe Illustrator (CS6-CC) для создания бесшовного паттерна могут использовать функцию Pattern Creation (Object > Pattern > Make). При этом окончательная окраска ячеек сетки, находящихся на краях плитки должна происходить режием Pattern Creation.

Для пользователей более ранних релизов существует несколько способов создания бесшовных паттернов, о которых вы сможете узнать из статьи How to Create a Seamless Pattern in Illustrator.

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

 

ru.vectorboom.com

5 простых советов по работе в Adobe Illustrator

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

 

 

Снимаем привязку к пиксельной сетке

Привязка к пиксельной сетке помогает, когда вы работаете над разработкой какого-нибудь веб-интерфейса. Однако часто она мешает. На начальном этапе вы можете даже не замечать этой опции, однако рано или поздно вы можете столкнуться с ситуацией, в которой вам захочется избавиться от этой привязки. Не путайте ее с привязкой к сетке, которую можно отключить в меню View > Snap to Grid/ Просмотр>Привязка к сетке. Привязка к пиксельной сетке проявляет себя даже когда вводишь конкретные X и Y координаты. Иногда из-за привязки ваши объекты могут немного сместиться. Чтобы отключить эту опцию выделите все объекты и в палитре Transform/Трансформировать выбрать More Options/Больше настроек. Теперь уберите галочку с опции Align to Pixel Grid/Выравнивание по пиксельной сетке.

Выберите 'More Options'  в палитре Transform.

Уберите галочку с опции 'Align to Pixel Grid'.

По умолчанию эта опция в Illustrator включена. Отключайте ее, если вам не нужна привязка

Переключаемся между заливкой и обводкой

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

Скрывайте выделенный контур

Иногда вам нужно скрыть признаки выделения объекта, чтобы лучше видеть как он смотрится при смене цвета или любых других изменениях. В этом вам поможет сочетание клавиш Cmd/Ctrl + H. Объект останется выделенным, однако этого не будет заметно на экране.

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

В Illustrator направляющие не ограничены вертикальными и горизонтальными. Также вы можете создавать например диагональные направляющие. Более того, вы можете превращать в направляющие любые контуры. Выделите контур и в меню выберите View > Guides > Make Guides/Просмотр>Направляющие>Создать направляющие, или просто нажмите Cmd/Ctrl + 5. Вы также можете превратить направляющие обратно в редактируемый объект. Для этого в меню выберите View > Guides > Unlock Guides/Просмотр>Направляющие>Освободить направляющие, выберите направляющую, которую хотите редактировать и выберите View > Guides > Release Guides/Просмотр>Направляющие>Расформировать направляющие (или просто нажмите Cmd/Ctrl + Option/Alt + 5).

Используйте границы просмотра

Когда вы масштабируете объект, который обладает обводкой, манипуляторы трансформирования появляются в центре обводки. Это может мешать точности масштабирования и часто просто раздражает. Вы можете изменить этот момент. Откройте Illustrator > Preferences > General/Иллюстратор > Установки > Основные и поставьте галочку возле опции Use Preview Bounds/Использовать границы просмотра. В этом случае манипуляторы будут появляться вокруг обводки.

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

Автор советов Veerle Pieters

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Создание изометрических сеток в Illustrator CC

Предисловие

Я хотел бы предложить альтернативное решение. Метод SSR, используемый @CAI, является абсолютно правильной технологией преобразования, которая использует вне сеток. SSR на самом деле устанавливает орфографическую матрицу на месте, потому что нет возможности установить ее напрямую (сохранить масштабную последовательность как действие, которое очень полезно). Хотя его одна из вещей, которую вы должны знать, делая орфографическую сетку с другими технологиями строительства, также является базовой конструкцией формы, поэтому хорошо знать.

Альтернативные и более простые методы построения

Основная изометрическая сетка пола - это всего лишь 2 линии в 30 и 150 градусах (разделение на 120 градусов) до основной сетки иллюстратора. Поэтому мы можем просто сделать следующее:

  1. Включите инструмент линии и нажмите на холст.

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

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

  3. Нажмите ctl + d, пока у вас не будет столько копий, сколько хотите.
  4. Выберите 1:
    1. Повторяет шаги с углом 120
    2. Зеркало
    3. Поверните 120 с преобразованием каждый (поворот в левом нижнем углу)
  5. (Необязательно) Выделите все и обрезайте с помощью построителя фигуры (подсказка: сдвиньте и сдвиньте вниз, чтобы удалить квадратные области)

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

Изображение 1 : Быстрое отображение снимков вручную.

Cai♦

Сохранение действий преобразования для каждой плоскости (то есть слева, справа, сверху), безусловно, стоит сделать

joojaa

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

Cai♦

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

askentire.net

Как сделать шестиугольную сетку для создания паттернов в Adobe Illustrator: megaillustrator

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

Создание геометрических сеток при помощи плагина Scriptographer

Вы можете быстро создать геометрические сетки при помощи плагина Scriptographer и скрипта Grid Generator, который работает внутри указанного плагина. Этот способ, к сожалению, доступен только пользователям ранних релизов Adobe Illustrator (9 – CS5). Пользователям последних релизов приложения (CS6-CC) придется создавать подобные сетки вручную, и мы поговорим об этом ниже.

Скачайте плагин Scriptographer. Перед установкой плагина ознакомьтесь с инструкцией. Теперь скачайте скрипт Grid Generator и поместите его в папку со скриптами для плагина Scriptographer. На моем компьютере путь к этой папке выглядит следующим образом C:\Program Files\Adobe\Adobe Illustrator CS5\Plug-ins\Scriptographer\Scripts\Examples\Scripts. Запустите Adobe Illustrator или перезапустите приложение, если оно было открыто в процессе установки. Теперь переходим Window > Scriptographer > Show Main Palette, затем находим скрипт Grid Generator и нажимаем на кнопку Play в нижней части панели.

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

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

Создание геометрических сеток вручную

Кроме того, что ручные способы подходят пользователям Adobe Illustrator CS6-CC, они обладают большей гибкостью в создании сеток, то есть вы не ограничены четырьмя вариантами, которые нам предлагает скрипт Grid Generator. Рассмотрим ручные способы на примере создания Triangular grid. Это, наверное, самый распространенный вид сетки. Другие варианты строятся по тому же принципу. Создадим шестиугольник при помощи Polygon Tool.

Не снимая выделения с объекта, переходим Object > Transform > Rotate… и устанавливаем угол 90 градусов в диалоговом окне.

Проверьте или у вас включены Smart Guides (View > Smart Guides или комбинация горячих клавиш Cmd/Ctrl +U)

Для большей точности вы также можете включить режим Outline Preview (View > Outline или комбинация клавиш Cmd/Ctrl + Y)

Берем Line Tool (\) и соединяем противоположные вершины шестиугольника так, как это показано на рисунке ниже. При точном совпадении с вершиной появляется надпись "anchor” – это работа умных направляющих.

Выделяем все созданные объекты, затем нажимаем на Divide в панели Pathfinder (Window > Pathfinder).

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

Не смотря на точное позиционирование объектов, иногда мы также можем получить паразитные точки. Поэтому проверяйте панель Layers и удаляйте их, например, так Object > Path > Clean Up…. Переместим группу из треугольников вниз и вправо так, чтобы вершина A совпала с вершиной B. Умные направляющие помогут нам сделать это точно. Когда появится надпись "intersect”, вам следует остановиться. Удерживайте во время перемещения клавиши Opt/Alt, что приведет к дублированию группы.

Выделяем обе группы, затем переместим их вправо, удерживая Shift + Opt/Alt. В этот раз мы совмещаем вершины отмеченные буквами C и D и дублируем группы.

Теперь используем комбинацию горячих клавиш Cmd/Ctrl + D требуемое количество раз для последовательного повторения последнего действия (перемещение и дублирование).

Выделяем все созданные объекты и повторяем последние действия в вертикальном направлении. То есть перемещаем вниз, удерживая Shift + Opt/Alt, затем используем комбинацию Cmd/Ctrl + D.

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

Вы также можете использовать эффект Transform для дублирования ячеек сетки. Перед применением эффекта нам потребуется произвести некоторые измерения. Выделим одну из групп с треугольниками. Ее ширина будет равна величине горизонтального перемещения. Эту величину мы можем увидеть в панели Control или в панели Transform.

Для того чтобы определить величину вертикального перемещения нам необходимо измерить расстояние между точками A и B. К сожалению, Measure Tool вообще не пригоден для точных измерений. Но мы можем использовать для этих целей Line Tool (\). Создадим прямолинейный сегмент между точками A и B. Умные направляющие помогут нам идеально точно позиционировать его точки.

Длина сегмента является искомой величиной вертикального смещения.

Если немного подумать, то окажется, что при помощи Line Tool (\) можно было сразу определить величины горизонтального и вертикального смещения. Для этого нужно провести прямолинейный сегмент между точками C и D, как это показано на рисунке ниже.

Ширина этого сегмента равняется величине горизонтального смещения, а его высота соответствует величине вертикального смещения. Так или иначе, все измерения сделаны, приступим к применению эффекта. Выделяем обе группы, затем переходим Effect > Distort & Transform > Transform…. Устанавливаем величину горизонтального смещения и требуемое количество копий, нажимаем OK.

Теперь применим эффект еще раз (Effect > Distort & Transform > Transform…). На этот раз устанавливаем величину вертикального смещения и необходимое число копий.

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

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

Окраска ячеек сетки

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

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

Выделяем сетку и растровое изображение, затем запускаем скрипт rasterColor в палитре Scriptographer.

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

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

Конечно, вы можете окрашивать ячейки сетки, просто выделяя их и окрашивая в нужные цвета, получая при этом интересные узоры. Ячейки сетки можно также окрашивать, используя Live Paint Bucket Tool (K). Этот инструмент позволяет осуществить окраску быстрее.

Только не забывайте после окраски перейти Object > Live Paint > Expand. Бесшовные паттерны, показанные на рисунках ниже, были получены именно таким способом.

Создание бесшовных паттернов

Пользователи последних релизов Adobe Illustrator (CS6-CC) для создания бесшовного паттерна могут использовать функцию Pattern Creation (Object > Pattern > Make). При этом окончательная окраска ячеек сетки, находящихся на краях плитки должна происходить режием Pattern Creation.

Для пользователей более ранних релизов существует несколько способов создания бесшовных паттернов, о которых вы сможете узнать из статьи How to Create a Seamless Pattern in Illustrator.

megaillustrator.livejournal.com

10 инструментов Adobe Illustrator, о которых должен знать каждый дизайнер

Инструменты дизайнера

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

 

Не имеет значения, что именно нужно создать с помощью Adobe Illustrator – без инструментов обойтись не удастся. Они избавляют пользователя от рутинной работы и существенно экономят время. К примеру, если нужно создать некий эффект в иллюстрации, это можно сделать так: начать с самого начала и добиться нужного результата, совершив, допустим, 100 действий. Но если знать, как именно работает тот или иной инструмент, тот же самый эффект можно создать, пару раз кликнув мышкой. Однако в данной статье мы не будем рассматривать разные приемы и хитрости, позволяющие добиться потрясающих эффектов. FreelanceToday предлагает вашему вниманию 10 инструментов Adobe Illustrator, о которых должен знать каждый дизайнер.

 

RULER (ЛИНЕЙКА)

 

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

Инструментарий дизайнера 

По умолчанию линейки в Illustrator не отображаются. Чтобы сделать их видимыми, нужно нажать сочетание клавиш Ctrl+Rили найдя их в меню View>Rulers>Show Rulers(Показать линейки). Появятся две линейки: сверху и слева.

Инструмент линейка 

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

 

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

 

BLEND TOOL

 

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

 

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

Инструмент Переход 

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

 

OFFSET PATH

 

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

 

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

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

 

Найти инструмент можно в разделе Object>Path. Объект при этом должен быть выделен, иначе не появится диалоговое окно для изменения параметров параллельного контура.

 

THE CLIPPING MASK

 

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

 

Что такое обтравочная маска? Это объект, который маскирует ненужные области другого объекта, поэтому в результате видимым остается то, что лежит внутри пределов обтравочного контура. Самое очевидное использование Clipping Mask – это кадрирование изображений, но при достаточных навыках этот инструмент позволяет очень быстро создавать нужные фигуры.

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

 

Инструмент Clipping Mask также находится в разделе меню Object.

 

ARTBOARDS PANEL

 

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

 

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

 

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

 

 

LAYERS PANEL

 

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

 

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

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

 

PATHFINDER PANEL

 

В панели Pathfinder можно найти четыре режима Shape Mode, с помощью которых можно создавать новые фигуры, путем слияния, пересечения или исключения объектов. При достаточном навыке использование любого режима позволяет очень быстро создать объект нужного размера и формы. Как уже говорилось, очень многое в Illustrator можно сделать с помощью инструмента Clipping Mask, обтравочные маски в умелых руках являются очень эффективным средством. Но если нужно создать совершенно новую форму, то это можно легко сделать в панели Pathfinder.

Панель PathfinderПользователю доступны режимы Unite, Subtract, Intersect и Exclude,с помощью которых можно создавать новые интересные формы. Со временем дизайнер выбирает для себя наиболее удобный режим, которым и пользуется в дальнейшем.

 

 

ALIGN PANEL

 

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

 

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

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

 

GRID

 

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

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

Инструмент Сетка 

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

 

SNAP TO GRID / PIXEL GRID

 

Сетка сама по себе является сильным инструментом, но как только нужно создать макет, где объекты должны быть расположены с точностью до пикселя, у новичков могут возникнуть проблемы. Однако в Illustrator есть решение этой проблемы: Snap to Grid / Pixel Grid (Привязка к сетке/пиксельная сетка).

 

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

Инструментарий дизайнера 

 

Благодаря использованию Snap to Grid / Pixel Grid можно создавать невероятно четкие изображения, которые выглядят очень профессионально. В этом нет ничего необычного, так как все объекты привязаны к пиксельной сетке и, что немаловажно, все они создавались, изначально имея заранее определенные размеры в пикселях.

Источник 

freelance.today

Управление градиентными сетками в Adobe Illustrator - Советы

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

Для того чтобы просто оценить возможности этой функции давайте посмотрим на портрет Jack Nicholson by Dion Aoki, который был создан только при помощи градиентных сеток.

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

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

Создание Gradient Mesh

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

Переходим Object > Create Gradient Mesh…, теперь у нас появилась возможность указать количество строк и столбцов в открывшемся диалоговом окне.

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

Вы можете создавать узлы и линии сетки при помощи Mesh Tool (U).  Для этого просто кликните инструментом в месте, где вы хотите создать первый узел.

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

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

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

Выделяем объекты, затем переходим Object > Expand… и выбираем в диалоговом окне опцию Gradient Mesh.

Теперь мы можем продолжить строить сетку при помощи Mesh Tool (U).

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

Вы можете выделять и перемещать точки сетки, а также манипулировать их ручками при помощи Mesh Tool (U) или Direct Selection Tool (A).

Для удаления линии сетки кликните по ней Mesh Tool (U), удерживая Option / Alt.

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

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

Обратите внимание на криволинейные сегменты в верхней и нижней части градиентной сетки. Эти сегменты имеют невидимые точки, которые становятся активными только, если взять Add Anchor Point Tool.

Такой тип точек не может содержать цветовую информацию и ими нельзя управлять напрямую. Создадим новую mesh point при помощи Add Anchor Point Tool.

Такой точкой можно управлять при помощи Mesh Tool (U) или Direct Selection Tool (A), но она также не может иметь цветовую информацию.

Создание градиентной сетки сложной формы

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

Выделяем объект, затем переходим Object > Create Gradient Mesh….

М-да! Об управлении и окраске такой градиентной сетки не может быть и речи. Когда мы создаем градиентную сетку из прямоугольника, то обычно не сталкиваемся со странным поведением линий сетки. Следовательно, для получения хорошо управляемой градиентной сетки сложной формы ее нужно создавать, трансформируя именно прямоугольную сетку. При этом вы можете использовать все доступные инструменты трансформации и выделения, например Rotate Tool (R) и Lasso Tool (Q). На рисунке ниже вы видите этапы преобразования прямоугольной градиентной сетки при помощи этих инструментов.

При помощи этой техники я создал дым от спички в уроке Create a Burning, Vector Match Using Gradient Meshes

Как избежать появления артефактов при окраске градиентной сетки

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

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

Также избегайте наложения ручек двух соседних точек.

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

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

Статья написана для designmodo.com

ru.vectorboom.com