Как в Adobe Ilustrator получить идеальное изображение с точки зрения пикселей

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

Цели

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

Полезный приём №1: Установление изображения в базовом документе

Шаг 1

Откройте Illustrator и создайте новый документ (Ctrl+N)

Шаг 2

Нажмите на выпадающее меню Units и выберете в нем Pixels, где указаны выбранные единицы измерения. В настоящее время поля Ширина и Высота можно преобразовать в пиксели. Как правило, используется десятичная система. Так, 100 мм преобразуются в 283.46 пикселей, что не очень хорошо в том случае, если вы хотите получить документ с идеальным изображением, хотя бы потому, что нет такого понятия как «46% пикселя». Мы можем получить либо 0%, либо 100%. Итак, давайте изменим это значение вручную, чтобы получить абсолютно точную величину. Так, в вышеприведенном примере, это будет 283 пикселей, а не 283,46.

Шаг 3

Если окно еще не расширено, кликните по маленькой стрелке слева от Advanced. Появится 3 дополнительных поля, которые были скрыты, они позволят нам создать документ, ориентируясь на пиксели.

Шаг 4

Под полем Color Mode необходимо выбрать RGB. Как вы, должно быть, знаете, изображение на экране всегда использует RGB (красный, зеленый, синий). Для печати же используется CMYK (голубой, пурпурный, желтый и черный).

Шаг 5

Следующее поле под Advanced называется Raster Effects, оно устанавливает три основных эффекта документа, такие как Drop Shadow, Feather и Glow. Поскольку мы работаем с информацией, выведенной на экран, нет необходимости устанавливать эффекты выше 72ppi, поскольку это лишь затруднит получение эффектов.

Шаг 6

Следующее поле под Advanced носит название Preview Mode, в нем три подпункта, один из которых Default, он уставлен в Illustrator по умолчанию. Следующий пункт – это Overprint, он показывает, как будет выглядеть документ при печати. Но, как вы могли догадаться, пункт, который нас интересует, называется Pixel.

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

Шаг 7

Наконец, вы увидите флажок в нижней части окна, он читается как Align New Objects to Pixel Grid. Выбор этой опции будет привязывать все новые объекты, нарисованные в Illustrator, к пиксельной сетке. Хотя эта опция применима только для новых объектов, остальные объекты можно вставлять документ из других мест.

Полезный приём №2: Привязка к пикселям при трансфрмировании объектов

В заключительном шаге предыдущей техники я упоминал, что параметр Align New Objects to Pixel Grid работает только для вновь созданных объектов, нарисованных в документе, например, если вы используете инструмент Rectangle Tool и растягиваете прямоугольник на холсте, это выровняет форму ближайшего пикселя на холсте (не половину пикселей) и задаст высоту и ширину изображения в ближайших абсолютных значениях пикселей (без использования десятичной системы).
Однако, если позже вы захотите изменить фигуру, то вы рискуете «рассогласовать» эту новую фигуру с сеткой; так же и в случае, если вы скопируете и вставите в ваш документ векторную фигуру из другого источника, она не согласуется с пиксельной сеткой автоматически (на это есть стоящая причина)
Решение этого вопроса находится не в контекстном меню, или в Align tool palette, где этого можно было бы ожидать, а в Transform Tool.

Шаг 1

Сначала убедитесь, что у вас открыто окно Transform (Window>Transform)

Шаг 2

Выберите один из объектов, нарисованных в Illustrator, или вставьте из другого источника.

Шаг 3

Вы должны заметить вкладку, обозначенную как Align to Pixel Grid в появившемся окне. Вам нужно выбрать этот пункт, если он еще не выбран. Если ваше изображение было нарисовано в Illustrator и уже согласовано по пиксельной сетке, то какие-либо преобразования, которые вы делаете сейчас при помощи Transform Tool, не будут нарушать расстановку.

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

Полезный приём №3: Преобразовать существующий документ для пикселей

Все эти техники хороши в тех случаях, если вы начинаете новый документ и планируете рисовать новые объекты в нем или вставлять их из других источников. Но что, если у вас уже есть документ, например, такой как веб-сайт или отдельный символ, которые вы хотите сделать в технике «pixel perfect», не выходя из Illustrator? Просто следуйте этим шагам, чтобы преобразовать существующий по умолчанию документ в пиксельный документ Illustrator.

Шаг 1

Во-первых, если ваш документ в настоящее время не использует пиксели, т.е они не являются единицей измерения по умолчанию, то дважды щелкните по линии документа (ctrl+r, чтобы появилась линейка) или зайдите на File > Document Setup… (ctrl+alt+p) и измените единицу измерения на Пиксели.

Шаг 2

Теперь, давайте обратимся к предварительному просмотру, для этого перейдите на View > Pixel Preview. Теперь, когда мы зум превышает 100% , мы можем видеть отдельные пиксели, а не гладкие векторные линии и формы, как уже упоминалось в технике под номером 1, это единственный способ получить конструкцию «pixel perfect», чтобы реально увидеть пиксели.

Шаг 3

Для изменения Document Raster Effects Settings вы можете найти настройки под меню Эффекты. Изменить Разрешение на 72ppi, и так как мы работаем с изображениями для использования на экране, а не для печати, то больше никаких действий производить не нужно.

Шаг 4

Сейчас мы успешно изменили наш документ и преобразовали его в пиксели, но наш уже существующий документ пока еще не согласован с нашей новой пиксельной сеткой. Не бойтесь, это несоответствие мы можем исправить одним махом.
Откройте окно Transform (Window>Transform), если вы этого еще не сделали, и непременно убедитесь, что все поля являются видимыми, и не блокированы. Затем выберите Select All (ctrl+a), а затем вариант Align to Pixel Grid в окне преобразования.
Прежде, чем сделать это, вы, наверное, захотите ещё раз осмотреть ваш документ, прежде чем поставить галочку. Как по мановению волшебной палочки, вы должны увидеть, как ваш документ мгновенно станет более резким и четким, поскольку он присоединится к пиксельной сетке и избавит вас от надоедливой десятичной системы значений.

Заключение

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

via

Кстати, можете посмотреть урок Шапка для сайта в фотошопе — автор делиться своими навыками создания дизайна хедера сайта.

Читателям также нравится:

Обратите внимание!

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

Комментарии

  1. 25 Сен
    japancassette

    Про Pixel Preview я знал, но раньше почему то не видел где же находится Align to Pixel Grid ) Теперь все стало на свои места.
    Спасибо!

  2. 11 Янв
    Андрей

    спасибо!! По существу. Полезно!

  3. 26 Авг
    Ira

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

  4. 14 Ноя
    Татьяна

    Спасибо! Очень доходчивый ответ на интересующий вопрос!

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1