Блог: статьи

Правильный экспорт макетов дизайна из AI в PSD

Егор ГилёвАвтор: Егор Гилёв
5 мая 2011

Экспорт макетов дизайна из AI в PSD

В наше время всё чаще можно встретить дизайнеров интерфейсов, которые отказались от использования старого доброго Adobe Photoshop в пользу векторных инструментов. Иными словами, в пользу Adobe Illustrator. Преимущества очевидны: работая с векторным исходником, мы можем лучше контролировать весь процесс, чем работая с растровой картинкой (пусть даже она разделена на слои). В векторном редакторе нарисованный круг остается нарисованным кругом, а в фотошопе — это просто множество закрашенных пикселей. Наконец, в векторном редакторе намного проще делать варианты для экранов с разной плотностью точек (привет, Retina Display!).

Однако, бытует мнение, будто переход дизайнеров на Adobe Illustrator сулит вагон проблем верстальщикам. Верстальщики — люди в большинстве своём консервативные, новые веяния принимают в штыки. Так что принимать исходники макетов дизайна в формате AI они чаще всего отказываются категорически. Такая позиция основывается на двух мифах:

  1. Экспортировать макеты из AI в PSD очень сложно и долго.
  2. При экспорте макетов из AI в PSD сильно страдает качество картинки.

Оба эти утверждения справедливы только в том случае, если действовать «в лоб». Взять исходник в AI, вызвать фунцию «экспорт», получить PSD, после чего пытаться в нём разобрать кашу из слоёв, попутно исправляя мелкие косяки, которых в векторном исходнике не было. Так всё действительно будет долго и мучительно. Как вы уже догадались, мы пойдем другим путём.

Правильный способ экспорта макетов дизайна из AI в PSD состоит из трех шагов:

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

В результате у нас должен получиться относительно небольшой набор понятно названных слоёв:

Экспорт макетов дизайна из AI в PSD

Шаг второй: растрируем. Для всех слоёв, кроме текстовых, применяем эффект Rasterize в режиме Type Optimized.

Экспорт макетов дизайна из AI в PSD

Звучит парадоксально, но делать нужно именно так. Только такой способ растеризации обеспечивает результат, в точности соответствующий тому, что мы видим в векторном исходнике. Подробнее об этой странной особенности Adobe Illustrator я писал в нашем блоге 7 лет назад: Растрирование в Adobe Illustrator 10 и CS. Как это ни удивительно, в целом ситуация с тех пор не поменялась.

Шаг третий: экспортируем. В результате получаем PSD, картинка в котором в мельчайших деталях совпадает с исходной картинкой в AI.

Вот и всё.

Связанные записи

Условия использования

Данные материалы можно использовать в некоммерческих целях, с обязательным указанием автора.

Комментарии

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

Ответить Александр Матюнин, 5 мая 2011

Интерфейсы в люстре делать в разы проще и приятней, чем в Фотошопе. Поэтому небольшие танцы с бубном окупаются

Ответить @brainsuck, 5 мая 2011

В Иллюстраторе есть все те же самые инструменты для экспорта графики, что и в Фотошопе. Что слайсы, что сохранение для веба и устройств. Этим ретроградам от вёрстки нужно просто один раз показать как это делается. Не поленитесь — всем будет проще.

Ответить pepelsbey, 5 мая 2011

В принципе да, но в этом случае первые два шага (наведение порядка и растеризация) все равно понадобятся, если следить за точностью картинки.

Ответить Егор Гилёв, 10 мая 2011

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

Ответить Alexey Kletsel, 5 мая 2011

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

Ответить Егор Гилёв, 10 мая 2011

Можете поделиться опытом экспорта InDesign → Photoshop?

Ответить @nitrolex, 6 мая 2011

Увы, нет, InDesign мы не используем.

Ответить Егор Гилёв, 10 мая 2011

А я делаю основу в Ai, сетку там кнопочки всякие… потом экспортирую через ctrl+c/ctrl-v и smart object в фотошоп. Удобно тем что векторный объект помещенный в Ps можно в любой момент подредактировать в иллюстраторе просто сделав даблклик, в случае если объект закончен его можно легко растрировать в Ps. А можно навсегда оставить векторным, сверху наложить текстуры и прочее…

Ответить Мишин Петр, 11 мая 2011

Во! Я так же делаю. Во первых это удобно, во вторых быстро, экономит кучу времени и нет запарок, что где то появятся ошибки в изображении!

Ответить @sacred_steel, 16 мая 2011

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

Работаю для веба в илюстраторе уже 5 лет — очень удобно.

Ответить Александр Сорокин, 17 мая 2011

Но почему не Fireworks?

Ответить @Suomiomi, 1 августа 2011

Я сам перешел с FW на AI в 2002-м году, потому что в FW мне начало не хватать возможностей для рисования иконок. Для дизайна интерфейсов FW — отличный инструмент, но AI всё таки универсальнее и мощнее.

Ответить Егор Гилёв, 2 августа 2011

Можно вопрос не по теме экспорта?
Как вы обходитесь без стандартного эффекта тени (и внутренней тени) фотошопа? Он же реализуется совсем не так как в иллюстраторе. Спасибо

Ответить skiagraf, 2 февраля 2012

Панель Appearance, дополнительные заливки, эффекты Transform, Convert to Shape, Feather, Blur.

Ответить Егор Гилёв, 5 февраля 2012

Егор, а если поверх текста идет в виде popup какая то плашка и на ней текст, то тогда делаете два текстовых слоя?

Ответить @vladossipov, 16 мая 2012

В таком случае да, два текстовых слоя.

Ответить Егор Гилёв, 24 мая 2012

Егор, у меня текст при экспорте растрируется — это хорошо? или я где то галочку не поставил (весь текст отдельный слой в люстре).

Ответить @maratsalihov, 5 июня 2012

Нет, текст не должен растрироваться.

Ответить Егор Гилёв, 6 июня 2012

Очень актуально. Рисовал приложение для ВКонтакте. Заказчик возжелал и вектор и растр. Куча окон, с кучей элементов – задолбался в псд экспортить. Пробовал данный способ. Как ни странно, застопорился на последнем шаге, непосредственно экспорте. На выходе получил все слои, как и положенно (все красиво и не «поплыло»), но вот в самих слоях все элементы слиты в один этот самый слой. Поведайте неразумному, где оступился и нагрешил, ибо начинаю приложение для iPhone рисовать и тоже буду в илле, чтоб если че… (а то эти из Купертино с разрешениями экранов для своих детищ никак не угомонятся). Жду с нетерпением ответа. Заранее благодарен.

Ответить Nik, 1 августа 2012

Конечно же, если вы растрируете слои, на выходе они получаются «склеенными». Все правильно. Если какие-то элементы должны быть «расклеенными», нужно их размещать на разных слоях.

Ответить Егор Гилёв, 2 августа 2012

Спасибо. Я, в принципе, так и думал (но в глубине души верил, что можно что-то изменить))) И эти сомнения вызвал тот факт, что при применении эффекта Rasterize, все объекты растрировались, но не слились (как если бы я растрировал их через Object > Rasterize), а слились уже непосредственно при экспорте. Все равно метод, на мой взгляд, оптимальный. При обычном «лобовом» экспорте нормально выходит только текст, большинство графических элементов приходится ctrl+c, ctrl+v, а это угнетает.

Ответить Nik, 2 августа 2012

Как верстальщик открою самые большие минусы и негативы илюстратора-все что описано-это конечно хорошо, но почему бы это не делать ДИЗАЙНЕРАМ, т е людям которые дают типа ГОТОВЫЙ макет на верстку, ведь иначе его приходится переделывать,пилить слои и т д. Второе – никто никогда корректно не учитывает время на конвертацию,а у верстаков время играет роль в разы больше чем у дизайнеров. Но дизеры конечно выше этого,что вы… зачем делать лишние движения. Вывод – дизы под иллюстратор,пардон, говно то еще. Да,они качественнее,но чтобы их перегнать в хтмль времени уходит раза в 2-3 больше. Потому что верстаки-не дизайнеры.

Ответить @Vetalka84, 15 августа 2012

Все равно хтмль не поддерживает вектор,и растеризация необходима. Просто клиенты не всегда шарят. И никто им не обьясняет.

Ответить @Vetalka84, 15 августа 2012

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.

Закрыть