Заметки иконщика

Попадаем в пиксели, пикселя и пикселы (а как правильно пишется?)

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

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

Так как же в них попасть? А очень просто, все действия в векторной программе мы привязываем к сетке с шагом в 1 пиксель.

Так как я использую Xara Xtreme покажу на её примере:

1. Идем в меню «Utilities» -> «Options» вкладка «Grid and Ruler» и настраиваем так как на картинке.
Первый параметр это основная сетка в 50 пикселей, второй количество строк и столбцов в большой ячейке, опять же устанавливаем число в 50, чтобы одна маленькая ячейка сетки была равна одному пикселу.

2. И затем просто включаем привязку к сетке сделать это можно через меню:

Желтая строка — Привязать к сетке (Snap to grid)
Голубая строка — Показать сетку (Show grid)
Так же можно использовать горячие клавиши, что намного удобнее в процессе работы быстро переключаться в нужный режим.
Знак апотсрофа (русская «э») — Показать сетку (Show grid)
Клавиша delete на цифровом блоке клавиатуры — Привязать к сетке (Snap to grid)
Весь список горячих клавиш, а также их переназначение в меню: «Utilities» -> «Customize Key short-cuts…»

Ниже покажу более наглядный пример (слева не попали, справа попали):

В процессе работы, постояно приближаешь изображение на 200, 800, 1000 процентов, поэтому чтобы всегда перед глазами находилось изображение с натуральным размером, я включаю второе окно документа со 100 процентным масштабом (в Xara Xtreme «Window» -> «New View»):

Этот мини-урок ориентирован на новичков, котрые хотят научиться делать качественные векторные иконки. Так что кирпичи в меня не кидайте 🙂

Если я где-то ошибся прошу мне сказать 🙂

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

Сообщение добавлено через MovableType API

About 
Дизайнер иконок я :)

12 комментариев

  1. Children of koRn

    01.06.2010 - 18:53

    спасибо за урок 🙂
    как я понял эта проблема касается только прямых линий?
    поставил недавно Xara — понравилось, я пробовал рисовать в кореле, в нём удобно реализованы инструменты для работы, но всё хорошо до экспорта, на экране одно, а после экспорта совсем другое… в илюстраторе обратная картина была для меня, не удобно рисовать..
    Xara пожалуй лучший вариант для рисования в векторе.
    А вы бы не хотели сделать урок про создания иконок, всмысле в формате ico? там же разные размеры нужны, я вот напимер нарисовал 128*128, но при создание ico вижу что 48*48 уже не очень, а 32*32 так совсем плох, вот и хотелось бы увидеть про это урок, я понимаю что наверно надо снижать детализацию и т.п., но всё же, было бы очень интересно для нубов новичков 🙂
    например, я не нашел как ресайзить в программе документ вместе с его содержимым..

  2. GlumShadow

    02.06.2010 - 10:48

    Children of koRn: Я бы сказал не прямых, а любых краёв даже в два-три пикселя, например у маленького круга. Не обязательно прямых, например линия 45 градусов, в один пиксель без сетки не сделать.

    Насчет экспорта не понял. Может изначально не тот формат документа ? Я беру не А4, а 640 pix web page, экспорт в psd или png.

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

    Зачем документ ресайзить ? Выделяем объекты, которые надо уменьшить самым первым инструментом в панели Selector Tool и тянем за рамку границы или даже можно выставить значение цифрами в ячейках W и H.

  3. Children of koRn

    02.06.2010 - 21:03

    про экпорт я говорил в Corel Draw, какая-то ерунда там с маштабом, например создаешь 128*128 маштаб стоит 100% а выглядит в редакторе рисунок на полэкрана, а когда экпортирую получаю лесеньки и все в этом духе.. хотя сглаживание стоит при экспонрте, возможно стоит еще погуглить, с цветовыми профилями я как-то разобрался недавно поискав.
    За ссылки спасибо,  первую не читал (=
    про ресайзить, да, я это видел конечно, просто мне было бы так удобнее, под меньшее разрешение иконки сделать новый документ, путем ресайза из большого, но это уже не проблема, а скорее методы подхода.

  4. GlumShadow

    02.06.2010 - 21:30

    Children of koRn: нормального экспорта можно сказать нет, у всех свои стандарты градиентов и прозрачностей, так что если какой-то эффект не поддерживается корелом, то в нём он будет растром. Я много раз пробовал экспортировать, нормально проходит только с простыми фигурами без обводки и одним цветом, чуть сложнее рисунок и всё разваливается и косячит 🙁

    Одну иконку в разных размерах я обычно делаю на одном листе, потом в фотошопе их разрезаю. Хотелось бы сделать урок и не один, но времени не хватает как всегда 🙂

  5. Евгенiй Игнашовъ

    06.07.2010 - 15:06

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

  6. GlumShadow

    06.07.2010 - 15:17

    Евгенiй Игнашовъ: я не люблю inkscape, уж больно убога и неудобна, планшет там не работает, по крайней мере у меня, самый главный косяк инка для меня, что он не может скопировать объект из одного открытого документа в другой, это вообще ппц.

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

  7. Евгенiй Игнашовъ

    06.07.2010 - 20:13

    Ну у меня вообще планшета нет. Всё мышами решаю. А по части переноса. простым копированием даже не пробовал. Считаю что так качество ещё больше теряется нежели при экспорте. Может и нет конечно, но я привык думать что раз экспорт сделали значит это кому-нибудь нужно.)

  8. GlumShadow

    06.07.2010 - 20:17

    Евгенiй Игнашовъ: не, копирование из одного окна ink в другое окно ink, а не в другие программы 🙂 может в новых версия и есть, но год назад, когда я его пробовал не было.

  9. Mike Miroshnikov

    12.02.2012 - 23:39

    Слушай, я при текущей версии 7 до сих пор сижу на 3.2 — она идеальна. Хотя улучшенная работа с растром подкупает, но я не могу совершенно работать без привязки к сетке! Причем сейчас это очень тупо сделано. Я писал разработчикам на фейсбук, они будто не поняли, о чем я. Записал им видео: http://vimeo.com/31020263

  10. GlumShadow

    12.02.2012 - 23:52

    В последнем обновлении это исправили, версия 7.1.1.17261 стоит у меня и всё работает нормально при растягивании.

  11. denis123

    27.04.2014 - 14:12

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

  12. GlumShadow

    27.04.2014 - 15:11

    @ denis123: хм, если мне нужен png я просто выделяю всю иконку и делаю Export PNG… Для фотошоп делаю экспорт в psd с настройками по умолчанию 96dpi, png вроде тоже в 96dpi по умолчанию, может в этом проблема ?

Leave a Reply

 

Ваш e-mail не будет опубликован. Обязательные поля помечены *