33 коровы – Скинование — работа не для ленивых! - RIA разработка, Flex, Action Script, AIR, Eclipse, Monkey script

Скинование — работа не для ленивых!

July 29, 2008 – 6:12 am

Исходные данные:

  • PSD файл, в котором 20 скинов аккуратно нарисованы, разложены по слоям, слои названы красивыми именами.
  • Нужно использовать 9-slice scaling — скины имеют различные украшения

Цель: За короткий промежуток времени превратить PSD файл в CSS файл для flex приложения, используя минимум усилий.

Процесс. Замкнутый круг:

  1. Первый вариант — который мне пришел на ум это экспорт в флеш. Вариант прекрасный, на первый взляд. Все аккуратненько превращается в правильно названые мувиклипы, расставляем 9-slice scaling и получаем болт. А все потому, что нужно помнить, что 9-slice scaling не работает для битмап, только для вектора. В качестве бонуса придется еще писать CSS файл ручками.
  2. Попытка экспортировать из фотошопа скины по-слоям в виде PNG. Как это нормально сделать я так и не нашел. Во-первых по умолчанию фотошоп просто не поддерживает экспорт в PNG, для этого мне добрые люди посоветовали скрипты. Но эти скрипты экспортируют слой размером равным высоте и ширине исходного файла, кроме того уродливо именуют файлы (работу по переименованю выполнить всеравно придется). Дорабатывать эти скрипты напильником у меня небыло ни времени, ни желания. Даже если я нашел бы в себе силы это сделать, то все равно пришлось сочинять CSS файл и вручную считать/подгонять 9-slice scaling.
  3. Безумная попытка достать PNG файлы. Попытка выглядела так: фотошоп – флеш – софтник декомпилер. Она почти увенчалась успехом, были сохранены PNG и BMP:( файлы, естественно имена были image1, image2… вобщем я не стал разбираться почему часть была PNG часть в BMP. От извращений отказался.

Как я решил проблему:

Ни одна(!) из 3х попыток не привела к успеху. Оптимизировать процесс почеловечески не удалось. Поэтому я ручками сохранил и назвал каждый скин, правда делал я это из флеша — экономил на обрезку в фотошопе :). Затем ручками посчитал 9-slice scaling для каждого и вбил его в файл со стилем. Вобщем не самый рациональный способ, но другого я на то момент невидел.

Какие еще есть варианты?

  • Использовать экстеншин к фотошопу для создания и экспорта скинов. Но там обязательно редактировать нужный шаблон. Если вы только начали, что рисовать то советую смотреть в сторону этого шаблона. В качестве недостатка — это огромнейшее количество файлов которые нужно потом ручками вбить в стиль (ну или найти где украсть подобный css-файл, я ненашел:), вернее украсть его можно здесь, спасибо Росту за наводку).
  • Нарисовать все сразу в векторе например во флеше используя все тот же экстеншин и опять все вбить ручками.
  • Нанять человека который за еду сделает это за вас.

Если не хочется вбивать все ручками можно попробовать истользовать редактор стилей в Flex Builder 3. Но: он не подхватывает заэмбеженые шрифты (говрит немогу и не переключается в визуальный редактор стилей), при выборе файла прописывает полный путь к нему, нельзя задать произвольные 9-slice scaling для разных состояний кнопки, ну иногда попросту задрачивает (попробуйте задать скины для табов у таб навигатора).

Выводы:

В нашем современном мире так и не научились ценить информацию, каждую крупицу информации, не говоря уже об ее больших объемах. Разработчики, вернее проектировщики, гоняться за галочками, но не хотят думать об удобстве обычных смертных. Они заставляют людей делать тупую рутинную работу, которую по определению просто обязан делать компьютер. Но иногда до проектировщиков долетает крик отчаяния людей и тут они пытаюсться сделать что-то полезное:).

Прежде чем браться за скинирование 3 раза подумайте как вы это будете делать. И только потом начинайте процесс генерирования скина. Иначе придеться делать очень много рутинной работы вместо “просто много”. 🙂

У меня такое впечатления что я, что-то упустил в этой жизни. Если это так то поделитесь своими секретами скинования, как оптимизировать процесс так чтобы нужно было совершать минимум телодвижений. Ну или хотя бы управлять процессом силой мысли.

Берем попкорн, ждем Термо…

  1. 13 Responses to “Скинование — работа не для ленивых!”

  2. Тоже интересует скинование. Тем более флексом только начал заниматься. Кроме как ручками, более оптимального не нашел.

    P.S. В фотошопе сохранение в png делается через File/Save for web. И порезку мне все же удобнее делать в фотошопе.

    By Andy on Jul 29, 2008

  3. >В фотошопе сохранение в png делается через File/Save for web

    Сохранение по одной картине — это безумно не спортивно. Речь идет об автоматизации процесса.

    By Ilja on Jul 29, 2008

  4. Да, в текущем состоянии скинования, остается только посоветовать, заказывать скины сразу во fla, с прописанными и проверенными scale9grid. А если уж заказчик предоставил только такой вариан, дешевле будет отдать на аутсорс с четким тз 🙂

    By FSB on Jul 29, 2008

  5. Мне тоже весьма интересна тема скинования. Я столкнулся с проблемой задания titleIcon для Panel через CSS и так и не нашёл рабочего примера.

    Вкратце условие задачи:
    – пищем css
    – создаём проект
    – добавляем два тега:

    – ctrl+f11
    – лицезреем панельку с иконкой (положительный результат)

    Повторюсь что у меня не получилось сделать такую css чтобы отрабатывалась последовательность действий с положительным результатом. Может кто-нить так-же сталкивался с подобной задачей/проблемой или видел примеры, где такое уже реализованно?

    By vova on Jul 29, 2008

  6. теги к предыдущему посту

    mx:Style source=”myStyle.css”
    mx:Panel

    By vova on Jul 29, 2008

  7. to Ilja

    почему по одной? Slice’ом отметил и сохранил за раз все картинки …или почти все. (если я правильно понял мысль.)
    А вот чтобы полностью автоматизировать… ну, или почти полностью… не представляю 🙁

    By Andy on Jul 29, 2008

  8. Скинировал во Флексе.
    Всё было в ПСД, экспортил всё отдельно.
    Подтверждаю, скучно это.

    P.S.:На досуге надо будет покопаться с этим.

    By _bkt on Jul 31, 2008

  9. Хм… Сохраняем PSD файл со всеми скина один под другим, а на самом верху рисуем scale9grid прямоугольник.
    Запускаем Fireworks CS3 >> open >> *.psd >> export as >> png32.
    Далее открываем Flash/Flex/FDT импортируем класс Skin и ScaleBitmap и.. О, чудо ! Все заскинилось ! Все битмапки с scale9gridом и тянутся !

    By Jloa on Aug 20, 2008

  10. Можно написать скрипт для Gimp, который будет делать это за вас.

    By Datagreed on Sep 21, 2008

  11. С гимпом я не дружу, как-то из за него день потерял т.к. он неверно отображал псд файл.

    Путем долгих извращений было выяснено что главное в скиновании с самого начала организовать и именовать ассеты, будь-то флеш, или фотошоп
    (правда 9-slice scaling всеравно нужно будет ручками устанавливать для фотошопа)

    By Ilja on Sep 21, 2008

  12. Ребят, не надо плакаться :))) adobe photoshop – полностью скриптуемое приложение – посмотрите js-референс, доступ еcть практически ко всему. Ну разве что рисовать кисточкой он за вас не будет. :))

    Тот же самый екстеншн, который используется для экспорта скина – ничто иное как два довольно простеньких js-скрипта. один создает шаблон, второй его разбирает.
    Никто не мешает Вам организовать собственный экспортер, так как это вам удобно и в соответствии с теми правилами, которые вы примете для подачи макетов скинов от дизайнера. Из-за одно- двух- разовой работы, конечно, морочить голову не стоит, но если это систематическая работа, то я бы задумался… :))
    О чем говорю – знаю. Потому, что примерно года полтора назад писал кое какие расширения для фотошопа для одной фотостудии, чтобы облегчить ее макетчикам работу с типовыми шаблонами продукции. (процесс аналогичный, разобрать файлы со слоями, распихать фото из определенных папок в определенные места, загрузить из текстового файла определенные данные, добавить тексты, применить стили и получить на выходе кучку картинок в определенном формате).
    Совсем без телодвижений конечно не обходиться, но жесткий контроль входных данных и алгоритмизация процесса, позволяют свести тыканья мышкой к минимуму.

    By Андрей Скорик on Oct 25, 2008

  13. upd:
    вы бесспорно правы – самое главное здесь это самого начала организовать и в соответствии с неким принципом именовать ассеты.
    Если есть унифицированные данные, есть и поле для автоматизации :))

    By Андрей Скорик on Oct 25, 2008

  14. Проблема в том, что очень много вариантов как отскиновать, но если немного свернул с тропинки в начале то тебе обеспечено множество лишней работы.

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

    By Ilja on Oct 25, 2008

Sorry, comments for this entry are closed at this time.



]]> rss о RIA от 33 Коровы
Забадать RSS!
]]>
~~~~~~