Комментарии 26
Может я сейчас глупость скажу, но не проще ли изначально работать в векторном редакторе для дизайна используя фотошоп только для растровых картинок?
Этот скрипт для тех, у кого фотошоп головного мозга)
Небольшие и простые элементы (кнопочка, стрелочка, плашечка) удобнее делать прямо в ФШ, не отходя от кассы, чем постоянно прыгать и экспортировать туда-сюда.
Объемный и сложный вектор, конечно же, нужно изначально делать в Иллюстраторе или чем-то подобном.
Объемный и сложный вектор, конечно же, нужно изначально делать в Иллюстраторе или чем-то подобном.
Я про дизайн в принципе, сайтов например
Так и я про него. Если макет делается в PS (а в большинстве случаев это так), то удобно небольшие векторные элементы делать там же.
Полностью рисовать сайт в AI? Ну как-то это мало распространено. Я пробовал когда-то, мне не очень понравилось — с вектором обращаться немного удобнее, но зато гораздо неудобнее с растром. А хочешь не хочешь, любой сайт это сочетание обоих вещей.
Де факто ситуация на рынке такова, что с вероятностью 99% макет будет либо в psd, либо в скетче. Иллюстратор, корел, файрворкс и пр. — это удел редких маргиналов.
Полностью рисовать сайт в AI? Ну как-то это мало распространено. Я пробовал когда-то, мне не очень понравилось — с вектором обращаться немного удобнее, но зато гораздо неудобнее с растром. А хочешь не хочешь, любой сайт это сочетание обоих вещей.
Де факто ситуация на рынке такова, что с вероятностью 99% макет будет либо в psd, либо в скетче. Иллюстратор, корел, файрворкс и пр. — это удел редких маргиналов.
Видимо мне посчастливилось самому говорить верстальщикам где они будут работать, но как бы обхожусь inkscape и не вижу никаких сложностей, а уж с svg дела проще некуда — копипаст выделенной стрелочки в файловый менеджер, а оптимизировать можно массово позже.
Прошу прощения, как вы из inkscape макета можете выделить один элемент и экспортировать именно его?
Уже пол года гоняю Corel из эмулятора только из-за того что не могу найти в inkscape функцию экспортировать выделенный объект =(
Уже пол года гоняю Corel из эмулятора только из-за того что не могу найти в inkscape функцию экспортировать выделенный объект =(
Выделяю объект — Ctrl+C, открываю файловый менеджер — Ctrl+V, ввожу имя файла.svg. Уточнение — работает в линуксах, про венду, мак не в курсе.
Экспортировать выделенный объект (или объекты, массово) в png — выделить его — Ctrl+Shift+E
Экспортировать выделенный объект (или объекты, массово) в png — выделить его — Ctrl+Shift+E
Дико извиняюсь, выходит оффтоп какой-то…
Если бы я мог описанным вами способом экспортировать отдельные объекты в svg я бы экономил кучу времени, но увы… у меня не выходит (дабы не быть голословным, вот видео: https://youtu.be/Oi1dlL1Iulw)
P.S Файловый менеджер Nautilus, по комбинации клавиш тоже не выходит.
Если бы я мог описанным вами способом экспортировать отдельные объекты в svg я бы экономил кучу времени, но увы… у меня не выходит (дабы не быть голословным, вот видео: https://youtu.be/Oi1dlL1Iulw)
P.S Файловый менеджер Nautilus, по комбинации клавиш тоже не выходит.
Проблема решена — оно работает в kde: https://youtu.be/szuUIBsUvs0
Тоже поофтоплю… что-то мне надоел фотошоп в плане веб-дизайна. Присматриваюсь то к люстре, то к инкскейпу.
Насколько сложные сайты вы делаете, можно посмотреть примеры?
Как работаете с множеством страниц, удобно ли работать с общими элементами (типа кнопок)?
Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали. А было бы удобно нарисовать кнопочки и списочки и сложить их в отдельный документ, а потом ссылаться на них из других документов. Если вдруг понадобится перекрасить, то это можно будет сделать в одном месте.
Какие-нибудь приблуды для экспорта наборов картинок (когда нельзя использовать вектор и надо именно картинки) в разных разрешениях (обычное и x2 под ретину) используете?
Как там с расширяемостью? Знаю, что там можно писать плагины на python, однажды даже заглядывал в исходники примеров, но это было давно и они были куцие. Можно ли сейчас создавать свои инструменты и интерактивные панели (например, выделил что-то, а панель тебе информацию показывает) или как и раньше только диалоговые окна (три параметра, ок и отмена)?
Насколько сложные сайты вы делаете, можно посмотреть примеры?
Как работаете с множеством страниц, удобно ли работать с общими элементами (типа кнопок)?
Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали. А было бы удобно нарисовать кнопочки и списочки и сложить их в отдельный документ, а потом ссылаться на них из других документов. Если вдруг понадобится перекрасить, то это можно будет сделать в одном месте.
Какие-нибудь приблуды для экспорта наборов картинок (когда нельзя использовать вектор и надо именно картинки) в разных разрешениях (обычное и x2 под ретину) используете?
Как там с расширяемостью? Знаю, что там можно писать плагины на python, однажды даже заглядывал в исходники примеров, но это было давно и они были куцие. Можно ли сейчас создавать свои инструменты и интерактивные панели (например, выделил что-то, а панель тебе информацию показывает) или как и раньше только диалоговые окна (три параметра, ок и отмена)?
Это тянет на неплохой такой разбор инкскейпа,
image xlink работает, в том числе на svg файлы, но вставлять придётся руками скорее всего, вставить картинку как ссылку он предлагает только растр, или вставить растр и в редакторе xml поменять ссылку
Выделяешь несколько объектов — Ctrl+Shift+E (или меню — экспортировать в растр), дальше можно выбрать всё вместе или каждый элемент в отдельности, можно выбрать dpi, так же его можно поменять в настройках для растра по-умолчанию
Если набор иконок в разных файлах, то
Не проверял, если честно, лучше сначала искать работающий функционал
Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали
image xlink работает, в том числе на svg файлы, но вставлять придётся руками скорее всего, вставить картинку как ссылку он предлагает только растр, или вставить растр и в редакторе xml поменять ссылку
Какие-нибудь приблуды для экспорта наборов картинок
Выделяешь несколько объектов — Ctrl+Shift+E (или меню — экспортировать в растр), дальше можно выбрать всё вместе или каждый элемент в отдельности, можно выбрать dpi, так же его можно поменять в настройках для растра по-умолчанию
Если набор иконок в разных файлах, то
for file in scalable/actions/*.svg
do inkscape -z --file=$file --export-dpi=720 --export-png=512x512/$(basename $file .svg).png
inkscape -z --file=$file --export-dpi=360 --export-png=256x256/$(basename $file .svg).png
inkscape -z --file=$file --export-png=64x64/$(basename $file .svg).png
doneКак там с расширяемостью?
Не проверял, если честно, лучше сначала искать работающий функционал
или вставить растр и в редакторе xml поменять ссылку
Попробовал. Результат: https://i.imgur.com/MujlTjc.png
Но эта же svg в браузере показывается без проблем. Другая svg-шка из xlink на месте.
Тут наверное дело удобства… я вот долгое время рисовал дизайны страниц в CorelDraw =)
Освоишь inkscape — будет удобно работать и в нём...
Освоишь inkscape — будет удобно работать и в нём...
Помнится, кто-то продвигал дизайн сайтов в InDesign. Но как-то не взлетело, вроде бы.
Последний Photoshop CC и сам сохраняет shape-слои в svg-файлы, без дополнительных скриптов. А ещё и эффекты слоя может предоставить в CSS.
— проверьте, запущен и работает ли Illustrator;
Мда. Я уже понадеялся, что наконец появился способ без использования иллюстратора. Автор, эти скрипты легко гуглятся. Не стоит из-за одного из них писать целый пост.
для прямого экспорта есть плагин www.zeick.com
работает на CC, CC 2014, CC 2015
для него не нужен иллюстратор
работает как с отдельными слоями, так и с группами
не нужны дополнительные манипуляции (дописывать .SVG в имени слоя)
имеет как гуй, так и скрипт, который можно повесить на хоккей
отрабатывает стили слоев (частично)
Из минусов — только цена 19.99 $, но есть бесплатная демо-версия
работает на CC, CC 2014, CC 2015
для него не нужен иллюстратор
работает как с отдельными слоями, так и с группами
не нужны дополнительные манипуляции (дописывать .SVG в имени слоя)
имеет как гуй, так и скрипт, который можно повесить на хоккей
отрабатывает стили слоев (частично)
Из минусов — только цена 19.99 $, но есть бесплатная демо-версия
Там комментатор выше утверждает, что в СС итак есть экспорт в svg. В чем тогда смысл плагина? У меня вот CS6.
Ну во первых зейк вышел раньше чем это появилось нативно, и он честно поддерживает СС,
адобовский появился только в СС 14.1 и выше
не уверен на счет CC 2014 и СС 2015 но у адоба в версии СС были постоянные проблемы с кадрированием SVG при экспорте
к тому же Zeick работает в 1 клик (выделил слои и группы и нажал — кнопку экспорт), а у адоба надо было переименовывать слои, как в скрипте из статьи (в версиях СС точно) в последних вроде если провести предварительную настройку, то стало попроще это делать.
для версий CS5 и CS6 могу порекомендовать вот этот плагин http://glifo.uiparade.com — он собирает шейпы в SVG шрифт стоит 19$
адобовский появился только в СС 14.1 и выше
не уверен на счет CC 2014 и СС 2015 но у адоба в версии СС были постоянные проблемы с кадрированием SVG при экспорте
к тому же Zeick работает в 1 клик (выделил слои и группы и нажал — кнопку экспорт), а у адоба надо было переименовывать слои, как в скрипте из статьи (в версиях СС точно) в последних вроде если провести предварительную настройку, то стало попроще это делать.
для версий CS5 и CS6 могу порекомендовать вот этот плагин http://glifo.uiparade.com — он собирает шейпы в SVG шрифт стоит 19$
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG