Опубликовано в Векторная графика | 0 комментариев

Разработка иконок в Illustrator

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

В ходе выполнения урока вам понадобится:

Скрипт Round Any Corner

Рассказывать в этом уроке я буду о создании иконок только относительно небольших размеров: 16×16, 32×32 и 64×64 — это основные значения для компьютерных иконок (бывают еще 24×24, 48×48 и другие, в том числе нестандартные, для современных смартфонов (особенно Apple) они бывают самыми разными).

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

Начну я повествования с пиктограмм, как наиболее простых представителей иконочного семейства. В их задачу закладывается лишь одно — показать определенный предмет или явление узнаваемым образом. Бывают контурными и с заливкой. Основное отличие в том, что контурные имеют только, собственно, контур (как правило белый), который без особых проблем накладывается на любой фон. В последнее время они получили большое распространение (интерфейсы последних версий мобильных операционных систем iOS и Windows Phone тому подтверждение).

post-1120952-1397493526

post-1120952-1397493528

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

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

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

В настоящее время после пиктограмм идут иконки во flat-стиле (называемом у нас «плоским»). Зачастую они имеют long shadow («длинную тень»).

Вот примеры таких иконок:

post-1120952-1397493524

Разработка иконок в Illustrator

Разработка иконок в Illustrator

Мне этот стиль не совсем прельщает (разве что версия с тенью, становящейся постепенно прозрачной), потому он в данном уроке рассмотрен не будет.

Итак, начинаем.

Откройте Illustrator и создайте новый документ со следующими настройками (обязательно снимите галочку с пункта «Aling New Objects to Pixel Grid», иначе эта опция вам будет сильно мешать).

Разработка иконок в Illustrator

Мы создали документ для иконки самого маленького размера. Вы думаете, что для других размеров будут отдельные документы? Нет, это не так. Illustrator позволяет нам создавать несколько десятков монтажных областей – артбордов – в рамках одного документа. Потом их можно удобно сохранять по отдельности. Этой возможностью мы и воспользуемся по ходу урока, но сначала выполните операцию Window> New window. Так мы создадим еще одно окно для того же документа. Расположите его так, чтобы оно всегда было видно. У меня это выглядит вот так:

Разработка иконок в Illustrator *

Не переключаясь на основное окно, нажмите Ctrl+1, чтобы установить масштаб 100%; Ctrl+H, чтобы скрыть отображение выделенных объектов, направляющих, сетки и других вспомогательных элементов; и Shift+Ctrl+H, чтобы скрыть границы артбордов (эту же команду примените и по отношению к основному окну). Теперь можно вернутся к основному окну, а дополнительное при этом останется видимым.

Благодаря этим манипуляция, вы можете рисовать в основном окне, любым образом изменяя масштаб, режим отображения, передвигая рабочие области и совершая любые другие действия, а в дополнительном всё это будет сразу же отображаться в 100% масштабе, что даст вам возможность воспринимать все изменения в реальном размере в «живом» режиме. Бывает, правда, от выделения объектов в дополнительном окне остаются артефакты в виде ограничительной рамки или ее частей, но это решается простым кликом одним из инструментов выделения по пустому пространству в основном окне.

Теперь настроим основное окно. Включите отображение сетки (Ctrl+”) и привязку к ней (Shift+Ctrl+”). В главном меню программы в разделе «Guides & Grid» поставьте по единице в поля «Gridline every» и «Subdivisions». Я также снял галочку с пункта «Grids In Back», чтобы видеть сетку на переднем плане (потому что мне так удобнее), но этот пункт совсем необязателен.

Разработка иконок в Illustrator

В разделе «General» главного же меню проверьте, чтобы смещение при помощи клавиатуры (Keyboard Increment) равнялось одному пикселю.

Разработка иконок в Illustrator

Зачем нам нужна сетка? Все пиктограммы рисуются в технике «pixel perfect» (дословный перевод «идеальный пиксель», более литературный «с точностью до пикселя»). Она означает, что все объекты должны точно попадать в пиксель, иначе изображение будет нечетким. По ходу урока будет пример.

Все приготовления готовы и можно приступать к самому рисованию.

Пиктограммы будут белого цвета и чтобы они не сливались с белым же фоном, который отображается в программе (на самом деле он прозрачен, если не нарисовать дополнительную фигуру), давайте нарисуем квадрат размерами 16×16 пикселей. Выровняем его по центру монтажной области. Затем сразу же определим расположение других артбордов и сделаем фон для них. Создайте квадрат 32×32 пикселя, разместите чуть правее 16×16. Теперь нарисуйте квадрат 64×64. Его расположите еще правее. Сделайте копии последних двух квадратов и сразу же их скройте. Затем выделите оригинальный квадрат 32×32 и выполните операцию Object> Artboards> Convert to Artboards. Проделайте то же для квадрата 64×64. Включите видимость сделанных ранее дубликатов. Сейчас ваш рабочий стол должен выглядеть примерно так:

Разработка иконок в Illustrator

Заблокируйте весь слой с квадратами, чтобы при рисовании случайно их не выделить и не сместить. Я назвал данный слой «artboards bg». Создайте новый слой. Вот на нем мы и будем рисовать.

Чтобы дальше было меньше путаницы, я буду приводить скриншоты иконок в следующем соответствии размера и масштаба: 16×16 – 800%, 32×32 – 400%, 64×64 – 200%. Конечный результат для всех иконок также будет представлен в 100% масштабе. Конечно, это не касается каких-то отдельных частей, где требуется большее увеличение. Рисую же я их все при 800%, а то и больше – хорошо видно все пиксели и не нужно вглядываться.

Пиктограмма монитора

Начнем с монитора — предмет сейчас широко распространенный и имеющий простые формы.

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

Нарисуйте прямоугольник 12×7 пикселей, расположите так, как показано ниже. Заметьте, что я не касаюсь последних пикселей иконки, фактически уменьшая ее длину до 14 пикселей (почему 14 поймете совсем немного позже). Конечно, можно увеличить длину прямоугольника до 14 пикселей, тогда будет занята вся длина иконки (если будете делать так, то не забудьте увеличить и высоту прямоугольника – до 8 пикселей, – чтобы сохранить пропорции). Тут всё зависит от желания.

Разработка иконок в Illustrator

Удалите у прямоугольника заливку и измените цвет обводки на белый, задав ей выравнивание по внешнему краю (Align Stroke to Outside). Вот так и получается указанная выше длина прямоугольника равная 14 пикселям (плюс по два пикселя с каждой стороны).

Разработка иконок в Illustrator

Ниже, по вертикальной середине артборда, добавьте квадрат со стороной 2 пикселя. Это будет ножка монитора.

Разработка иконок в Illustrator

Теперь нарисуйте прямоугольник размерами 6×1 пиксель, разместив его ниже ножки – подставка. Вот иконка и готова.

Разработка иконок в Illustrator

И ее 100% вид:

Разработка иконок в Illustrator

Все три элементы выделите и сгруппируйте (Ctrl+G). Группу именуйте «16» (по размеру иконки; так как здесь квадрат, то для понимания достаточно одного значения от размера). Весь же слой переименуйте в «monitor», чтобы было понятнее что к чему.

Выделите группу «16» и из контекстного меню примените команду Transform> Scale со следующими настройками:

Разработка иконок в Illustrator

По окончании нажмите кнопку «Copy».

Активируйте инструмент Artboard Tool (Shift+O), им выберите монтажную область размерами 32×32 пикселя. Затем выровняйте увеличенную группу «16» относительно центра этой монтажной области. Так мы сразу получили версию иконки размера 32×32 (формально 28×22). Группу соответствующим образом переименуйте.

Разработка иконок в Illustrator

Таким же образом создаем версию 64×64. Не забудьте изменить имя группы.

Разработка иконок в Illustrator

Иконка монитора в трех размерах готова. Как вы видите, здесь использовался максимально простой стиль. Даже элемента, обозначающего кнопку включения или что-нибудь подобное, нет. Чтобы придать большей реалистичности, можно на 32-пиксельной версии уменьшить толщину обводки основной фигуры монитора до 1 пикселя, с соответствующим увеличением длины и ширины фигуры. В 64-пиксельной же версии уменьшить толщину обводки до 2 пикселей. Также укоротить и сделать тоньше подставку. Здесь всё зависит от желания и стиля.

Пиктограмма принтера

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

Нарисуйте прямоугольник размерами 14×7 пикселей. Примените к нему эффект Effect> Stylize> Round Corners с радиусом скругления 2 пикселя. Расположите фигуру как показано ниже.

Разработка иконок в Illustrator

На один пиксель выше инструментом Pen Tool (P) нарисуйте следующую фигуру (привязка к сетке облегчит эту задачу):

Разработка иконок в Illustrator

От вертикальной середины основной фигуры принтера нарисуйте вниз прямоугольник размерами 10×7 пикселей. Его залейте черным цветом и задайте белую обводку толщиной 1 pt с выравниванием по внутреннему краю:

Разработка иконок в Illustrator

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

Разработка иконок в Illustrator

А вот здесь кнопку включения мы добавим, ибо без нее данный образ выглядит не полным. Нарисуйте квадрат 1×1 пиксель:

Разработка иконок в Illustrator

Иконка готова:

Разработка иконок в Illustrator

Увеличенная версия делается так же, как и в прошлый раз – через команду Transform> Scale с указанием 200% масштабирования. Только удалите у полученного дубликата квадратную «кнопку включения» и нарисуйте на ее месте круг диаметром 2×2 пикселя.

Конечный итог выглядит так:

Разработка иконок в Illustrator

И версия 64×64 просто увеличивается от 32×32:

Разработка иконок в Illustrator

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

Пиктограмма iMac

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

Так как основным отличием iMac от обычного монитора является более широкая нижняя часть рамки вокруг дисплея, можно, по идее, воспользоваться уже имеющейся иконкой монитора. Можно, но есть еще одно отличие – скругленные углы у основы дисплея. Если мы просто применим данную операцию к имеющейся фигуре, то и внутренние углы скругляться, что нам не нужно. Можно, конечно, применить скрипт Round Any Corner ко всем четырем внешним углам, но после масштабирования придется производить эту операцию вновь, потому как в версии 32×32 скругление составит 1 пиксель, так же как и в версии 16×16, и только в 64×64 увеличится до 2 пикселей. Поэтому дисплей iMac мы нарисуем чуть по-другому.

Продублируйте группу «16» существующего монитора. Оригинал скройте. Копию группы сразу же переименуйте в «iMac_16», чтобы избежать путаницы. Можно вообще вынести ее на отдельный слой, но я этого делать не стал. Не забудьте проверить отображение нужного слоя в дополнительном окне.

Удалите фигуру дисплея. Нарисуйте на том же месте прямоугольник размерами 14×10 пикселей. Примените к фигуре эффект Effect> Stylize> Round Corners с радиусом скругления 1 пиксель.

Разработка иконок в Illustrator

Внутри этой фигуры нарисуйте прямоугольник размерами 12×7 пикселей. Залейте его черным цветом.

Разработка иконок в Illustrator

Ниже дисплея пером нарисуйте трапецию и ниже нее добавьте прямоугольник 6×1 пиксель.

Разработка иконок в Illustrator

Иконка 16×16 готова. Не забудьте перенести все новые фигуры в группу «iMac_16».

Для пиктограммы 32×32 примените уже знакомую команду Transform> Scale, но снимите галочку с пункта «Scale Strokes & Effects». Получится следующее (этот и следующий скриншот сделаны в масштабе 800%, чтобы лучше были видны производимые изменения):

Разработка иконок в Illustrator

Измените размер дисплея по одному пикселю вверх, влево и вправо. У трапеции подставки сместите нижнюю левую опорную точку на 1 пиксель вправо, правую – влево. Прямоугольник подставки уменьшите до размера 10×1. Должно получиться так:

Разработка иконок в Illustrator

Теперь выделите обе фигуры, отвечающие за подставку, и примените команду «Unite» с панели Pathfinder. Затем выделите две внутренние опорные точки (указаны на изображении ниже синими стрелками) и примените скрипт Round Any Corner с радиусом скругления 1 пиксель. Ссылка на скрипт дана в самом начале урока. Сохраните его на своем компьютере, распакуйте и поместите файл Round Any Corner.js по адресу c:\Program Files\Adobe\Adobe Illustrator CS6 (64 Bit)\Presets\%language%\Scripts\, где %language% – язык интерфейса программы; по умолчанию «en_US». Теперь его можно запускать командой File> Script> Round Any Corner. После данных манипуляций иконка будет выглядеть как показано на второй картинке:

Разработка иконок в Illustrator

Разработка иконок в Illustrator

Добавим абстрактный логотип по центру широкой части рамки дисплея. В качестве него выступит обычный круг 2×2 пикселя.

Разработка иконок в Illustrator

Вот готовая пиктограмма:

Разработка иконок в Illustrator

Масштабируйте версию 32×32. Измените только радиус скругления эффекта Round Corners до 2 пикселей и измените размер плоской части подставки, просто переместив опорные точки. На изображении ниже вы можете видеть эти изменения (было/стало):

Разработка иконок в Illustrator Разработка иконок в Illustrator

Готовая иконка:

Разработка иконок в Illustrator

Иконка текстового файла

Давайте сделаем иконку цифрового «предмета». Их уже существует великое множество вариаций, но в рамках рассматриваемой темы можно сделать еще одну.

Опять начнем с версии 16×16. Здесь немного уйдем от чистых цветов, да и вообще палитра будет чуть богаче.

Нарисуйте пером фигуру, показанную ниже (угол скошенной части равняется 45°). Заливке задайте цвет #fcfcfc. Затем добавьте обводку цветом #cccccc толщиной 1 pt с выравниванием по внешнему краю.

Разработка иконок в Illustrator

В скошенной части добавьте треугольник с заливкой того же цвета, что и основная фигура. Примените к ней эффект Effect> Stylize> Drop Shadow со следующими настройками (цвет тени #cccccc):

Разработка иконок в Illustrator Разработка иконок в Illustrator

Теперь нарисуйте элементы, имитирующие текст. Я также добавил «буквицу» в виду буквы «T». Цвет элементов должен быть немного светлее, нежели использованный для тени. Я применил #d9d9d9. Не забудьте сгруппировать весь «текст», чтобы было удобнее.

Разработка иконок в Illustrator

Готовая иконка:

Разработка иконок в Illustrator

А вот версия 32×32 в данном случае не будет такой простой как в предыдущих. Вот что получится, если увеличить версию 16×16 с включенной опцией «Scale Strokes & Effects». «Текст» крупноват, не так ли? Да и тень странная. Исправим сии недоразумения.

Разработка иконок в Illustrator

«Текст» можно сразу удалить. Проще и быстрее нарисовать новый. Толщину обводки главной фигуры, уменьшите до 1 pt. Измените размер треугольника с тенью до 8×8 пикселей и сдвиньте его вниз на 1 пиксель. Смотрите картинку ниже:

Разработка иконок в Illustrator

Поменяйте настройки имеющегося эффекта Drop Shadow на показанные на левом изображении ниже. Добавьте еще один эффект Drop Shadow (правое изображение). Цвет тени остается неизменным (#cccccc)

Разработка иконок в Illustrator Разработка иконок в Illustrator

Нарисуйте новые «текстовые» элементы. Не забудьте задать им цвет #d9d9d9. И вот готовая иконка. Мне кажется стало лучше:

Разработка иконок в Illustrator

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

Разработка иконок в Illustrator

И иконка готова:

Разработка иконок в Illustrator

Здесь разница в детализированности для разных размеров уже была нагляднее, нежели в предыдущих случаях. Монохромные варианты (или просто с малым количеством цветов, как последний) по реалистичности могут изменяться наличием тех или иных элементов в больших версиях и, соответственно, их отсутствием в маленьких. В многоцветных, реалистичных, иконках присутствуют и другие различия. Для придания той самой реалистичности часто рисуют тень от предметов. Полномасштабная, скажем так, тень на маленькой версии, перенесенная без изменений с большой, будет в прямом смысле слова загрязнять изображение. Поэтому на маленьких версиях тень отсутствует вовсе. Также может отличаться контрастность элементов. Если на большой версии такой элемент будет иметь, к примеру, непрозрачность 50%, чтобы не сильно бросаться в глаза, но в то же время быть заметным, то в версии средних размеров ее непрозрачность возрастет до 60-70%. На маленькой версии этого элемента вообще может не быть, потому как для него просто не хватит места. Конечно, всё зависит от конкретной иконки.

Есть еще один фактор разнящийся в реалистичных иконках — текстуры. Какая же реалистичность без текстур? Иначе это будет просто «нечто деревянного цвета». Маленькие варианты, опять-таки в силу размера, избавляются от текстур, ибо они тоже будут загрязнять изображение и делать его не таким четким. Конечно, здесь пропадет та самая реалистичность, но в размере 16×16 при всем желании ее вы не увидите.

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

Пиктограмма свитка

Про ее создание я расскажу только для одного размера: 32×32 пикселя.

Сначала посмотрите на конечный результат:

Разработка иконок в Illustrator

Выглядит несложно, верно? Но так ли просто ее нарисовать? Давайте посмотрим.

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

Нарисуйте прямоугольник белого цвета размерами 22×28 пикселей.

Разработка иконок в Illustrator

В верхнем левом углу добавьте круг 4×4 пикселя:

Разработка иконок в Illustrator

Сделайте дубликат круга (Ctrl+C, Ctrl+F). Оригинал скройте. Копию выделите вместе с прямоугольником, после чего нажмите кнопку «Minus Front» на панели Pathfinder.

Разработка иконок в Illustrator

Инструментом Delete Anchor Point Tool (-) удалите опорную точку, отмеченную на изображении ниже стрелкой красного цвета. Точку, отмеченную стрелкой синего цвета, сместите на 2 пикселя вправо.

Разработка иконок в Illustrator Разработка иконок в Illustrator

Теперь выделите правую верхнюю и левую нижнюю опорные точки, примените к ним скрипт Round Any Corner с радиусом скругления 2 пикселя. Почему именно 2? Чуть ранее мы рисовали круг диаметром 4 пикселя. Его радиус, соответственно равный 2 пикселям, будет являться, скажем так, углом свертки свитка.

Разработка иконок в Illustrator

Сделайте копию имеющейся фигуры. Пока что ее скройте. К оригиналу же примените команду Object> Path> Offset Path со смещением 1 пиксель. Полученную фигуру залейте черным цветом. Включите видимость дубликата, выделите его вместе с черной фигурой и нажмите кнопку «Minus Front» на панели Pathfinder.

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

Разработка иконок в Illustrator

Обратите внимание на опорную точку, на которую указывает синяя стрелка на изображении выше. Там скрывается две точки. Будьте внимательны при выполнении следующей операции, не удалите ненужную точку. Проще всего выделить одну из них инструментом Direct Selection Tool (A) и сместить в сторону. Скорее всего выделиться та, что принадлежит верхней линии, так что вы сразу же получите доступ к нужной опорной точке. Смещенную же потом вернете на место.

Итак. Вооружитесь инструментом Delete Anchor Point Tool (-). Удалите им опорные точки, отмеченные на изображении ниже красными стрелками. Повторюсь – не забудьте про двойную опорную точку. Затем просто щелкните инструментом Convert Anchor Point Tool (Shift+C) по точкам, отмеченным синими стрелками.

Разработка иконок в Illustrator Разработка иконок в Illustrator

Включите видимость круга, сделанного в самом начала работы над данной пиктограммой. Выделите нижнюю опорную точку и удалите ее. Не снимая выделения с оставшегося полукруга нажмите Ctrl+J, чтобы замкнуть кривую. Получившейся фигуре добавьте обводку черного цвета толщиной 1 pt с выравниванием по внешнему краю. Сразу же примените команду Object> Path> Outline Stroke. Полученную группу отправьте на самый передний план (Shift+Ctrl+]), после чего разгруппируйте. Составлявшие ее фигуры заблокируйте.

Разработка иконок в Illustrator

Заблокируйте также основную фигуру. Теперь будет удобнее выделить нужные опорные точки обводки. Как вы видите на изображении выше, ее левая часть не совпадает с линией, образованной обводкой полукруга. Необходимо сместить ее. Выделите отмеченные ниже опорные точки (можете просто обвести нужный участок инструментом Direct Selection Tool (A) – так будет быстрее, потом как остальные объекты заблокированы) и сместите на 1 пиксель вправо:

Разработка иконок в Illustrator Разработка иконок в Illustrator

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

Разработка иконок в Illustrator

Нарисуйте фигуру, что показана на изображении ниже. Я сделал это пером.

Разработка иконок в Illustrator

Сделайте копию этой фигуры, временно ее скройте. К оригиналу примените операцию Object> Path> Offset Path со смещением 1 пиксель. Залейте эту фигуру черным цветом. Включите видимость дубликата белой фигуры, выделите ее вместе с черной и нажмите кнопку «Minus Front» на панели Pathfinder. После этого удалите отмеченные красным опорные точки, а по помеченной синим кликните инструментом Convert Anchor Point Tool (Shift+C). Будьте внимательны, здесь тоже накладываются две опорные точки, как это было и в случае с основной фигурой свитка.

Разработка иконок в Illustrator Разработка иконок в Illustrator

Получившуюся обводку временно скройте. Сделайте дубликат белой фигуры «завитка». Рядом нарисуйте круг диаметром 6 пикселей. На изображении ниже показано как он должен расположиться (я залил его зеленым цветом для наглядности):

Разработка иконок в Illustrator

Выделите вместе этот круг и дубликат «завитка», затем нажмите кнопку «Intersect» на панели Pathfinder. Полученную фигуру залейте черным цветом. Включите видимость обводки «завитка».

Разработка иконок в Illustrator

Я думаю вы видите, что верхняя граница обводки выступает за предел левой части всего «завитка». Выделите две левые опорные точки обводки и сместите их на 1 пиксель вправо. Белую фигуру «завитка» отправьте на самый передний план. Выделите обе левые ее опорные точки и сместите на 2 пикселя вправо. Нужно это для того, чтобы сама фигура перекрывала небольшой огрех от обводки. Если отключить видимость белой фигуры и включить режим «Pixel Preview», то можно увидеть, что верхняя граница обводки совсем немного попадает на соседний нижний пиксель (это показано на втором изображении ниже). Белая фигура поверх скроет сей недостаток. Еще ниже вы можете видеть разницу в между этими двумя вариантами в 100%.

Разработка иконок в Illustrator

Разработка иконок в Illustrator

Разработка иконок в Illustrator Разработка иконок в Illustrator

Основа пиктограммы готова. В начале она казалась проще, не так ли smile.gif? Осталось растянуть ее до границ монтажной области, просто выделив необходимые опорные точки и сместив. Еще я добавил текст.

Разработка иконок в Illustrator

В большую сторону она прекрасно масштабируется (конечно, можно сделать и самостоятельный вариант с толщиной обводки 1 пиксель, но мне понравился просто увеличенный), а вот версию 16×16 придется делать заново. Я ее сделал и ниже вы можете увидеть и версию 16×16, и 64×64. Рассказал же я о данной пиктограмме потому, что не всегда всё так просто, как может казаться на первый взгляд.

Разработка иконок в Illustrator Разработка иконок в Illustrator

Небольшой бонус: цветная версия иконки свитка во всех трех размерах:

Разработка иконок в Illustrator Разработка иконок в Illustrator Разработка иконок в Illustrator

Реалистичные иконки

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

Взгляните на эти три реалистичных иконки iMac:

Разработка иконок в Illustrator Разработка иконок в Illustrator Разработка иконок в Illustrator

Вот иконка 64×64 в 400% масштабе:

Разработка иконок в Illustrator

Нижнюю части рамки дисплея выделяют два дополнительных элемента: белый с прозрачностью 60% и режимом смешивания Soft Light вверху и черный с прозрачностью 40% и режимом смешивания Soft Light внизу. Режим смешивания во всех случаях меняться не будет.

Давайте уберем эти элементы и посмотрим на результат:

Разработка иконок в Illustrator

Металлическая часть стала плоской, объем пропал. Но в целом иконка всё равно выглядит хорошо. Но и стиль у нас заявлен реалистичный, поэтому в данном случае отсутствие «объемных» элементов не есть хорошо.

Давайте теперь зададим и белой и черной линиям 100% непрозрачность.

Разработка иконок в Illustrator

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

Обратим внимание на другие элементы: черный круг на металлической части рамки дисплея, как и на пиктограмме, обозначает логотип. У него есть белая тень, непрозрачность которой чуть выше, нежели у белой линии. Если эту тень убрать, то объем тоже немного потеряется, но в меньшей степени. В нижней части ножки монитора есть белая линия, дополнительно разграничивающая «плоскую» и «объемную» части ножки. За «плоскую» отвечает градиент выше нее (в то же время формирующий и вертикальную часть ножки), за «объемную» – фигура толщиной 1 пиксель с горизонтальной градиентной заливкой ниже. Всё это вы можете увидеть на увеличенном скриншоте выше.

И ножка и дисплей отбрасывают тень. Давайте сейчас обе уберем и посмотрим как изменится иконка (было/стало):

Разработка иконок в Illustrator Разработка иконок в Illustrator

Согласитесь, чего-то не хватает? Пусть тень еле видно (а так и должно быть, иначе она будет загрязнять изображение даже в таком размере), но она добавляет реалистичности, согласно стилю. Но реализм будет сохранен и без тени, тут уже всё зависит от желания.

Переходим к размеру 32×32. Посмотрите его в 400% масштабе:

Разработка иконок в Illustrator

«Объемные» элементы металлической рамки сохранились. Их непрозрачность увеличилась, так же как и тени, потому что иконка стала меньше и эти элементы должны быть виднее. Давайте сравним вариант с непрозрачностью «объемных» элементов как у версии 64×64 и использованный здесь:

Разработка иконок в Illustrator Разработка иконок в Illustrator

Видите разницу? Поверьте, она есть, просто с непривычки ее довольно трудно увидеть. Непрозрачность белой линии увеличена до 80%, черной до 50%. Всего на 20 и 10 процентов больше соответственно, но и этого достаточно.

Белая линия на ножке исчезла, потому что для нее уже мало места. Но разграничение между частями достаточно заметно и без нее.

Настройки тени от ножки, кстати, остались такими же, что для версии 64×64.

Переходим к версии 16×16. Вот она в масштабе:

Разработка иконок в Illustrator

«Объемные» части исчезли – рамка стала слишком маленькой для этого. Логотип удален – по той же причине. Но осталась тень, при том той же непрозрачности, что и в версии 32×32.

Давайте посмотрим на иконку с тенью и без нее:

Разработка иконок в Illustrator Разработка иконок в Illustrator

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

Разработка иконок в Illustrator

Стало заметнее… и грязнее. Так что ответ: нет, тень на такой маленькой иконке не уместна.

Почему же стоит хоть и незначительно, но увеличивать непрозрачность некоторых элементов? Ответ прост – из-за их размера. Если в версии 64×64 белая линия на металлической рамке дисплея имеет длину 56 пикселей, то в версии 32×32 это уже 28 пикселей. Однако, следует помнить, что при уменьшении размера градиентные фигуры уже становятся контрастнее. Длина, на которую он растягивается уменьшается. Следовательно уменьшается число промежуточных оттенков. У нас – градиент (точнее, линия накладывается на градиент). Поэтому не спешите сразу делать что-то темнее, а что-то светлее. Возможно, вам потребуется какой-то элемент наоборот сделать менее заметным.

Градиентов касается еще одно правило. По причине тех же размеров. Сравните настройки одного из градиентов для вертикальной части ножки дисплея (всего их там два) в версиях 64×64 и 16×16:

Разработка иконок в Illustrator Разработка иконок в Illustrator

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

Еще один небольшой бонус. Иконки iMac с фирменной картинкой на экране:

Разработка иконок в Illustrator Разработка иконок в Illustrator Разработка иконок в Illustrator

Переходим к примеру с текстурами. Есть такая иконка книги. Изначально я ее делал в размере 32×32, его и покажу:

Разработка иконок в Illustrator

И она же в 400% масштабе:

Разработка иконок в Illustrator

Текстура на обложке есть, но при 100% ее особо не видно. Что будет, если ее убрать, оставив только подходящий цвет?

Разработка иконок в Illustrator

Будет вполне хорошо. Увеличим текстуру на 150%…

Разработка иконок в Illustrator

… и даже 200%:

Разработка иконок в Illustrator

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

Увеличим иконку до размера 64×64 пикселя. Получается не самое лучшее зрелище:

Разработка иконок в Illustrator

Многие элементы «убежали» и теперь портят вид. Страницы несколько толстоваты. Хотя, признаться, при разработке я не собирался выходить за рамки размера 32×32 (а создал я эту иконку уже продолжительное время назад).

Вот как будет выглядеть иконка 64×64, если привести ее в порядок:

Разработка иконок в Illustrator

В таком размере текстура смотрится превосходно.

Теперь уменьшим вариант 32×32 до 16×16.

Разработка иконок в Illustrator

Помните, я говорил об «идеальном пикселе»? Это наглядный пример «плохого пикселя». Взгляните на иконку при 800% масштабе:

Разработка иконок в Illustrator

Всё, что раньше занимало один пиксель высоты, теперь занимает лишь по половине. Тень от букв превратилась непонятно по что. Некоторые элементы съехали. А уж текстуру при 100% не видно и подавно.

А вот она же в «чистом» варианте:

Разработка иконок в Illustrator

Здесь, кстати, имеется наглядный пример сказанному ранее про контрастность градиентов. Высота букв всего 4 пикселя и из-за этого верхняя их часть кажется более яркой, нежели в версии 32×32. Можно сделать цвет немного темнее, но я оставил какой есть. Непрозрачность дополнительных элементов (за исключением тени от букв в версии 16×16) на всех версиях одинакова. Можете сравнить и их.

В начале я обещал рассказать о том как же удобно сразу сохранить все три иконки. Сделать сие очень просто: выполните команду File> Export, укажите формат PNG и обязательно отметьте пункт «Use Arbords».

Разработка иконок в Illustrator

В окне настроек формата PNG задайте следующие параметры:

Разработка иконок в Illustrator

После нажатия OK все три иконки сохранятся с исходным именем файла и согласно имени артборда.

Разработка иконок в Illustrator

Заключение

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