Выяснять сетка в Adobe иллюстратор

Выяснять сетка в Adobe иллюстратор

657

От переводчика
Привет, %юзернэйм%!
Этот перевод как бы дополняет мою предыдущую статью о пикселя, без которой она была бы неполной, тем наиболее, что уникальная статья о пикселя относится к уникальной статье этого перевода.
Материал расчитан на начинающих, и незначительно ведает о 2-ух вещах:
Как избежать трудности, где у вас есть макет, чтоб расстояние меж элементами либо проводниками начинает включать дробную часть пикселя;
Как применять сетку для сотворения прототипов в Adobe Photoshop и Adobe иллюстратор.
Потому, надеюсь, что облегчит чью-то жизнь, публикуя этот перевод. Меня все это интересует с той точки зрения, что я был бы чрезвычайно признателен, раз в начале моей работы в качестве дизайнера интерфейсов, которые я когда-или говорил о пиксельной сетке.
Один мой знакомый товарищ откомментировал предшествующей статье, так что, естественно, материал забавнй, но он есть эскиз’eat, и все это есть из коробки. Позвоните Габриэлы поделиться своими мыслями, и инструменты, которые вы используете при разработке мешей, может быть, некие остальные редакторы. Поведайте, чем пользуетесь вы? Как и в прошедший раз, одна из целей, почему я пишу эту статью на Хабр (но не ограничиваются, к примеру, перевод в Татс+) — компиляция опосля передачи нужных ссылок по теме.
Кстати, хотя в статье речь идет о програмке Adobe Illustrator в програмке Adobe Photoshop может быть применен и пиксельной сетки, и привязать к пикселям, и свои собственные сетки.
Резюме

Чтоб включить/отключить сетку в Adobe Иллюстраторе/фотошопе, нажмите Ctrl + ‘
Чтоб включить/Выключить направляющие в Adobe Иллюстраторе/фотошопе, нажмите Ctrl + ;

Ну, тут мы идем.
Выяснять сетка в Adobe иллюстратор

Это таковая большая программа, и раз вы новичок, это может занять достаточно много времени, раз вы будет вникать в то, что на ту либо иную клавишу либо вариант ответа. Сейчас программа Adobe Illustrator является одним из популярнейших векторных редакторов.
Вот и выходит, что некие функции упускают из виду новенькие, и я желал бы поделиться с вами одним из их. Лично я был бы чрезвычайно рад, раз я когда-нибудь говорил о данной теме в то время, когда я была на первом курсе.
Да, я собираюсь поведать для вас о сетке.
Что такое Грид? Раз мы обратимся к онлайн-словарь merriam-Webster словарь, сетка-это сеть умеренно расположенных вертикальных и горизонтальных линий(к примеру, для позиционирования точек на карте). Как и в исследовании хоть какой иной вопросец, давайте поначалу дадим определение мотивированной срок.
Сетка также употребляется, чтоб выстроить дела меж разными графическими элементами, к примеру, чтоб найти размер либо размещение разных частей относительно друг друга либо относительно полотна. Наиболее полное определение можно отыскать в Википедии, поэтому что там это лишь пока, беря во внимание с точки зрения графического дизайна: «сетка в пространстве (традиционно двумерное), который состоит из ряда пересекающихся прямых (вертикальные, горизонтальные либо угловые) либо направляющие кривые, которые употребляются для упорядочивания Контента. Сетка служит основой, с помощью которых дизайнер может включать в макет разные графические элементы (образы, знаки, абзацы) в правильном порядке так, чтоб они прекрасно смотрелись на макете, просто читается.
Раз для вас необходимы кривые либо некие остальные наиболее сложные сетки, вы сможете сделать их с помощью гидов-экскурсоводов, это на самом деле достаточно просто. Кстати, сетка в Adobe иллюстратор состоит лишь из строго вертикальных и горизонтальных линий.

Но для чего ей вообщем воспользоваться? Раз повторить коротко, в сетке-это то, что помогает нам позиционировать элементы относительно друг друга и выставлять связь меж размерами и расположений объектов. Мы дали общее представление о том, что такое сетка. Сетку, похоже, предложить нам правила, по которым мы можем располагать объекты на макете, и самое основное-структурировать содержание. Почему познание таблицы принципиально?
Не считая того, сетка как инструмент помогает дизайнерам создавать пикселя изображения, что чрезвычайно принципиально (на мой взор так вообщем непременно) при разработке изображений для различных устройств с различными экранами.
До этого чем углубляться в рассказ о том, как сетка помогает создавать вправду качественные точные изображения, я желал бы выложить некие главные моменты, которые различает два типа образов — цифровые изображения на экране и написанных изображений.
Набросок против печати
Ни для кого не секрет, что цифровые изображения на экранах много различаться от печатного изображения на бумаге. Все это делает разницу в том, как эти два типа образов, в частности, метод, в котором получают изогнутые, изогнутые полосы. Каждый Тип изображения имеет свою свою цветовую схему (RGB в цифровые изображения и на печать CMYK изображения), и каждый Тип имеет свое разрешение выходного сигнала (Разрешение экрана и Разрешение печати).
Цифровые экраны имеют разрешение и сетка пикселей (на любом экране квадратные пикселы, расположенные одна за иной в серии). Это означает, что чтоб сделать изогнутую линию, мы просто делаем некие полупрозрачные пиксели (Альфа) на этих участках искривлений, и это именуется сглаживание, которое искусственно помогает нам воссоздать на экране Кривой.

Это происходит поэтому, что принтер может печатать точки на бумагу в несколько слоев, т. е. принтер нет необходимости хитрить с прозрачностью пикселей, в отличие от экрана электронного устройства. Принтер, в свою очередь, зависит от размера бумаги и ее разрешение при печати, что значит, что раз вы подвержены Разрешение печати, принтер будет печатать отлично вас Кривой.
Раз вы используете привязки, вы говорите иллюстратор’have выровнять ваши объекты на холсте вашей сетки либо сетки пикселей. Внедрение привязок
Один из самых увлекательных вопросцев, который может быть поднят в данной теме.
Сейчас, когда вы понимаете в чем разница меж печатных изображений с цифровых отображаться на экране, пришло время рассказать о том, что является на мой взор главной роли сетки. Помните, что я не так давно упоминал пикселя изображения?
Он либо она просто связал всех объектов к пиксельной сетке и создавать каждый элемент с целочисленными значениями пикселей размеры! Лично мне постоянно было любопытно, как создателю удалось получить такие точные полосы? Я уверен, что вы уже наверное лицезрели разные иллюстрации на dribbble либо behance, которые с супер-точное изображение. Как оказалось, в этом нет ничего необыкновенного!
Объяснить, что под целочисленные значения, я имею в виду численные значения без дробных частей, т. е. к примеру раз мы желаем нарисовать прямоугольник, мы будем рисовать с шириной 200 пикселей и высотой 100 пикселей и не 200.84 пиксель на 99.8 пикселей.
Я уверен, что для вас понравится. Расширенное понятие сетке
Картина стоит тыщи слов. Давайте создадим пошаговый метод, который вы будете делать каждый раз при разработке новейшего проекта в Illustrator. Разрешите мне попробовать показать для вас на примере, как настроить сетку.
Давайте откройте иллюстратор и сделайте новейший документ со последующими опциями: Шаг 1
При запуске хоть какого новейшего проекта в Illustrator, мы постоянно начинаем с опции новейшего документа.

Количество полотен: 1
Ширина: 800 пикселей
Высота: 800 пикселей
Единицы измерения: пиксели
На вкладке «дополнительно» опций:

Цветовой режим: RGB Сид
Разрешение при растеризации: 300 пикселей на дюйм
Приравнивать новейших объектов к пиксельной сетке: отмечено

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

Шаг 3
Чтоб осознать, как сетка работает, давайте поглядим на это. Откройте меню «Просмотр» > «Показать сетку» (либо нажмите сочетание кнопок Ctrl + «), и сходу на экране возникает обычное сетки сек.

Давайте попробуем двигаться в небольшой квадрат с помощью стрелок на клавиатуре и поглядеть, что происходит. Шаг 4
На данный момент мы лицезреем в сети, но как это работает?
Ничего не происходит, поэтому что мы не включили опцию «привязать к сетке». Наш маленький площади будет двигаться несколько пикселей с каждого клика, ничего особого.
Давай отменим наши крайние шаги, вернуть коробку на место, и идем в меню вид → привязка к сетке (сдвиг + сочетание кнопок Ctrl + Y в), а потом опять opprobium к operatewith нашем учреждении.

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

Интервалы меж линиями сетки: скриншот 1000px
Деления снутри сетки: 4

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

е. Поэтому что наш холст имеет размеры 800х800 пикселей (т. на сто процентов здоров, 3-х квадратов сетки по 250 пикселей и еще 50 пикселей), привязка будет срабатывать на верхней и левой стороне этого места, которое умещается в 1000 х 1000 пикселов. А снизу и справа от места на полосы шириной 200 пикселей, выделены красноватым цветом, остается невостребованным.
Раз Темный квадрат был размером 250 × 250 пикселей, это заполнило бы целую ячейку сетки, и будет прыгать конкретно в один из 16 малых сот. Сейчас раз мы вернемся к нашей малеханькой темной площади, мы увидим, что он прилипает лишь к линиям сетки, которые размещаются в 250 пикселей друг от друга, невзирая на то, что квадрат 100х100 пикселей.

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

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

Скорое прототипирование с внедрением сетки
Выполним маленькое упражнение и попробовать сделать стремительный макет интернет-веб-сайта с внедрением сетки через каждые 800 пикселей поделить на 4 ступени на холст размером 800 х 800 пикселей.
Да, я знаю, что малый размер по умолчанию для интернет-веб-сайта в наши дни является Размер 960 пикселей, но я желаю показать для вас маленький пример, как мы можем применять сетки для скорого прототипирования.
Шаг 1
Сделайте прямоугольник размером H точек и иметь его на наш холст, нарисовать его цветом #191919. Сейчас берем инструмент «текст» и подписать этот элемент в качестве заголовка нашего веб-сайта.

Примечание: раз у вас есть маленькие предметы, которые не должны быть привязаны к сетке, в нашем примере текстов-заглавия прямоугольников, выделите их, перейдите в вид и снимите флаг ‘привязать к сетке’.
Этот элемент также должен подписать, это будет Контент. Шаг 2
Сделайте маленький прямоугольник размером сек пикселей и цветом #191919 и испытать расположить его при помощи клавиш на клавиатуре в левой части холста, чуток ниже крышки.

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

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

Грубо говоря, всего несколько секунд мы были в состоянии набросать макет веб-сайта. Большой, чтоб растрачивать их на такие вещи, так не достаточно времени, не так ли?
Двойная вязка
До этого чем кидаться экспериментировать с сетью, я желал бы поведать для вас о разнице меж неотклонимыми настраиваемая сетка и привязка к пиксельной сетке.
В этом случае вариант оснастки, чтоб применить к сетке, настроить, и сетки зависит от значения, данного в параметрах. вы видите вектор, как он есть, не rastrirovano). е. (И. Это значит, что то, что вы создаете-это то, что вы видите. По умолчанию, при разработке новейшего документа подготовительный просмотр режим традиционно устанавливается в Положение по умолчанию.
Когда режим привязки включен на пиксели, при каждом нажатии клавиши со стрелками, будет двигаться Ваш объект на фиксированное число пикселей, которые устанавливают Клавиатура приращения. Раз вы включите пиксель подготовительного просмотра (меню вид → подготовительный просмотр пикселей) и будет подступать к виду, иллюстратор покажет для вас пиксели, из которых состоит векторное изображение.
Эта функция находится в меню «редактирование» > «установки» > «главные» > » Клавиатура приращения. Примечание: Да, вы сможете включить клавиатуру приращение на хоть какое число пикселей, которое комфортно для вас.

Главная разница меж 2-мя методами связывания заключается в том, что раз вы каким-то образом сделал объект с нецелочисленные значения размеров, к примеру 200.Сек.40 пикселей, пиксель замыкание поменять его, и она будет автоматом круглых значений.
В данном случае, к тому времени как он окончил работать над вашим дизайном вы получаете резкое качество изображения, и для вас не придется решать какие-то трудности. Я рекомендую для вас, раз вы создаете объекты в режиме привязки к сетке, постоянно переключиться в режим пиксель PrevieW и проверить, традиционно раз объекты, внедренные в Пиксельной сетке.
Полезные ресурсы

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