Потребовалось вот нарисовать десяток примитивных масштабируемых иконок.
Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx?
Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
Здравствуйте, α, Вы писали: α>Потребовалось вот нарисовать десяток примитивных масштабируемых иконок. α>Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx? α>Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
toolbar
По подписи находите Rectangle Tool. Рисуете прямоугольник. Его размер при рисовании будет отображаться. Прямоугольник отделен от всего остального и векторный, но с размером, завязанным на пиксели.
layers
Тут надо Fill поставить в 0%. Именно его, а не Opacity, т.к. эффекты (слоевые стили) нам будут нужны. На картинке он задизейблен, потому, что выделен слой-задник. У вас должен быть выделен слой-прямоугольник. Заодно там же:
0. Если при создании иконки был выбран задник сплошного цвета (по умолчанию), goto 2. Иначе goto 1.
1. Щелкаете ПКМ по слою нового прямоугольника и выбираете Rasterize (для прямоугольника векторность не важна, а вот наличие растрового слоя позволить выполнить п. 2 — кто не верит, попробуйте опустить этот пункт, а кто каждый день рисует, тот знает).
2. Щелкаете ПКМ по слою Backgrounds и выбираете Delete. Сплошной фон заменится прозрачным.
Затем заходите в меню Layers->Layer Style...
stroke
Ставите все, как на рисунке, начиная с галок слева, там же выбираете нужный tab (Stroke). Только белый цвет на картинке меняете на то, что нужно. У вас он по дефолту должен быть черный.
И все, можете сохранять в png.
***
Альтернативный способ — задать свойства самого прямоугольника. Это происходит на горизонтальном верхнем тулбаре, когда вы рисуете Rectangle Tool'ом. По ряду причин я предпочитаю слоевые стили (Stroke), но не упомянуть об этом способе нельзя, т.к. он самый легкий, чтобы создать dashed- и dotted-рамку.
***
Но что потом? Векторные иконки это саморастягиваемые? SVG? Я б лучше отрастрировал под все размеры. И еще: или осваивайте нормальный инструмент, или скачайте подходящие дешевые metro-material картинки, или закажите художникам. Эрзац-редкаторы — путь в никуда.
Здравствуйте, 0BD11A0D, Вы писали:
BDA>По подписи находите Rectangle Tool. Рисуете прямоугольник. Его размер при рисовании будет отображаться. Прямоугольник отделен от всего остального и векторный, но с размером, завязанным на пиксели. BDA>2. Щелкаете ПКМ по слою Backgrounds и выбираете Delete. Сплошной фон заменится прозрачным.
Большое пасиба. Оно в теории-то понятно, но на практике что-то этот фотошоп просто вымораживает
BDA>Но что потом? Векторные иконки это саморастягиваемые? SVG? Я б лучше отрастрировал под все размеры. И еще: или осваивайте нормальный инструмент, или скачайте подходящие дешевые metro-material картинки, или закажите художникам. Эрзац-редкаторы — путь в никуда.
Ага, лучше всего SVG.
Зачем кстати растрировать под все размеры, если иконка векторная? Как я понял, том-то и прелесть, что вектор не нужно растировать под все размеры.
С утра поэкспериментировал с Inkscape, вроде что-то начало получаться.
Делаю SVG документ 32*32px, рисую что мне надо, оно само нормально масштабируется как в 16*16, так и в 256*256, в общем все хорошо кроме рендеринга текста. То ли у Inkscape проблемы со шрифтами, то ли у IE.
Здравствуйте, α, Вы писали:
α>Делаю SVG документ 32*32px, рисую что мне надо, оно само нормально масштабируется как в 16*16, так и в 256*256, в общем все хорошо кроме рендеринга текста. То ли у Inkscape проблемы со шрифтами, то ли у IE.
Перед публикацией всю графику нужно преобразовывать в кривые, в особенности текст. Причём эта практика не только в Inkscape, а в любом векторном редакторе. В противном случае будут происходить искажения при публикации на сайте, печати в типографии и так далее. В итоге получится исходный файл, который можно редактировать текущим редактором используя параметрические объекты и публикуемый, который содержит лишь векторную графику в том виде, в котором она не может быть искажена при выводе.
α>Делаю SVG документ 32*32px, рисую что мне надо, оно само нормально масштабируется как в 16*16, так и в 256*256, в общем все хорошо кроме рендеринга текста. То ли у Inkscape проблемы со шрифтами, то ли у IE.
В реальности оно так не работает.
Из-за отсутствия хинтинга стоит делать отдельные иконки как минимум для небольших разрешений.
На крупных иконках огрехи с выравниванием будут менее заметны, но детализация должна быть выше.
Текст лучше преобразовывать в path.
Проблем у Inkscape вагон и маленькая тележка, качество рендеринга не особо.
Говорить дальше не было нужды. Как и все космонавты, капитан Нортон не испытывал особого доверия к явлениям, внешне слишком заманчивым.
Здравствуйте, velkin, Вы писали:
V>Перед публикацией всю графику нужно преобразовывать в кривые, в особенности текст. Причём эта практика не только в Inkscape, а в любом векторном редакторе.
О заработало
А зачем с текстом такие сложности?
Шрифт же сам по себе штука device-independent?
Здравствуйте, α, Вы писали:
α>А зачем с текстом такие сложности? α>Шрифт же сам по себе штука device-independent?
Текст это параметрический объект, то есть хранится текстовая строка, шрифт, которым она должна быть выведена и прочие параметры. В итоге получается обработка на стороне клиента. Нет гарантии, что шрифты там вообще есть, или именно такие, как в редакторе на текущем компьютере, плюс разные системы вывода графики. Inkscape выведет файл векторного формата одним образом, IE другим, Firefox третьим, какой-нибудь Corel Draw четвёртым.
А если шрифта не окажется, то он ещё и заменится другим, и браузер уж точно спрашивать ничего не будет. Нет гарантии одинакового вывода на разных клиентских машинах даже одним и тем же редактором, о разных и говорить нечего. В противоположность кривые всегда выводятся одинаково, во всяком случае пользователь уж точно не заметит разницы. Из-за этого у тех же типографий есть требование переводить все объекты в кривые, и это может быть не только текст.
Здравствуйте, α, Вы писали:
α>Зачем кстати растрировать под все размеры, если иконка векторная? Как я понял, том-то и прелесть, что вектор не нужно растировать под все размеры.
Как и любая серебрянная пуля, эта идея автоматически должна настораживать.
1. Зачем перекладывать в рантайм то, что может происходить в дизайнтайме? Стоит добавить мощный мультипликатор типа анимации контейнера вашей иконки и разницу в производительности блиттинга и рендеринга можно будет увидеть невооруженным взглядом. Бывает, что рендеринга у клиента не избежать, но надо же четко понимать, ЧЕГО РАДИ.
2. Даже если вы знаете, каким движком будет рендериться вектор, в новой версии движка все может сильно поменяться. Если не знаете, тем более. Если вас устраивает, что внешний вид может непредсказуемо меняться и вы не контролируете user experience, не морочьте себе голову и лепите что угодно и как бог на душу положит: это не дизайн.
3. Делая иконки, которые реально на всех нужных вам размерах выглядят сколько-нибудь качественно, вы потратите столько же времени, сколько на растрирование под каждый размер + шлифовку. То есть, время вы так не выиграете. А если не проверять и не дотачивать, то см. конец второго пункта.
Вообще, векторные иконки это в чистом виде идея опен-сорца, с ее плюсами и минусами. Отдадим каждому конечному юзеру набор компонентов, а как оно там у него соберется, не наша проблема. Прагматичному девелоперу вполне достаточно, если исходники вообще будут. У него, у девелопера (в смысле, не потеряются). Под исходниками я имею в виду либо тот же pure вектор, либо фотошоповский растрово-адаптированный вектор (он скейлится без проблем и искажений, но эксплиситно задать размер в физических единицах AFAIK нельзя), либо очень большой кусок растра, который даунскейлится и причесывается.
Здравствуйте, α, Вы писали:
α>Потребовалось вот нарисовать десяток примитивных масштабируемых иконок. α>Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx? α>Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
— Рисуешь все что надо в Adobe Illustrator
— Copy & Paste всего что необходимо в Adobe Photoshop
Здравствуйте, α, Вы писали:
α>Потребовалось вот нарисовать десяток примитивных масштабируемых иконок. α>Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx? α>Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
Здравствуйте, α, Вы писали:
α>Потребовалось вот нарисовать десяток примитивных масштабируемых иконок. α>Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx? α>Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
Прежде всего, нужно понять, какие будут размеры иконок, и для каких разрешений/масштабов экрана.
Самые популярные сейчас — это 100%, 200% (мак с ретиной), а также, в меньшей степени, 125%, 150% и 175% (винда 8 и 10 умеет, и использует как на планшетах, так и на экранах высокой чёткости).
Отсюда совет номер раз. Желательно, чтобы опорные точки были на сетке 4*4, а размеры иконок, соответственно, кратны 4.
Иначе на винде это всё размылится.
И совет номер два — определиться со стратегией рисования.
Как это делает гугл. Основную иконку сделать для 200% масштаба, т.е. для ретины, и затем посмотреть, во что она превращается при уменьшении масштаба. Если во что-то непотребное с мылом, то сделать рядом вторую версию упрощённую, по мотивам первой.
Проектировать в обратную сторону, т.е. 100% и посмотреть, во что превратится при увеличении, — может смотреться аляповато на экранах высокой чёткости.
Хотя, в случае "десятка примитивных", может быть, именно от 100% и следует начинать. Фигак-фигак-продакшен в стиле материального дизайна, упрощённый цикл разработки и поддержки.
Теперь про векторные редакторы.
Хорошие редакторы позволяют не только рисовать мышью или планшетом, но и руками редактировать параметры.
А координаты и толщины линий для иконок должны быть целочисленными (иначе будет мыло при растеризации). Ну разве что координаты выносных точек в сплайнах. Приклеивание к сетке спасает далеко не всегда.
Поэтому после визуального рисования не ленись залезть в свойства всех объектов и руками там округлить.
У InkScape можно ковыряться напрямую в SVG, а что там Adobe Illustrator, Sketch или CorelDraw умеют, тут я не знаю. Сто лет в них не играл.
Ну и если ты растровый джедай, — то нарисуй растровую иконку и используй её как эскиз для вектора
Здравствуйте, α, Вы писали:
α>Потребовалось вот нарисовать десяток примитивных масштабируемых иконок. α>Существует ли какой-нибудь векторный редактор, который внешне выглядит как растровый mspaint или icofx? α>Векторные редакторы не понимаю от слова "совсем", нарисовать в фотошопе прямоугольник с краями толщиной 1px я генетически не способен, там как-то все слишком сложно.
Перекуём баги на фичи!
