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

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

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

Звучит парадоксально, но делать нужно именно так. Только такой способ растеризации обеспечивает результат, в точности соответствующий тому, что мы видим в векторном исходнике. Подробнее об этой странной особенности Adobe Illustrator я писал в нашем блоге 7 лет назад: Растрирование в Adobe Illustrator 10 и CS. Как это ни удивительно, в целом ситуация с тех пор не поменялась.
Шаг третий: экспортируем. В результате получаем PSD, картинка в котором в мельчайших деталях совпадает с исходной картинкой в AI.
Вот и всё.
Связанные записи
Категории
- Adobe Illustrator (15)
- Adobe Photoshop (4)
- Basecamp (3)
- iPhone (2)
- Будущее (4)
- Визуальный стиль (4)
- Десктоп (2)
- Дизайн иконок (24)
- Инструментарий (14)
- Книги (3)
- Критика (6)
- Маркетинг (2)
- Мастер-класс (21)
- Обзоры (13)
- Организация работы (4)
- Основы (9)
- Проекты (11)
- Скринкасты (7)
- Турбомилк (3)
- Юзабилити (7)
- Юмор (1)
Комментарии
Да, но зачем эти танцы с бумном, если можно все делать Photoshop, так как он тоже позволяет работать с векторными объектами. По сути всегда хочется с делать дизайн и отдать, а не расставлять слои и не дайбог нарезать для программиста :)
Ответить Александр Матюнин, 5 мая 2011
Интерфейсы в люстре делать в разы проще и приятней, чем в Фотошопе. Поэтому небольшие танцы с бубном окупаются
Ответить @brainsuck, 5 мая 2011
Поддерживаю
Ответить Alexey Kletsel, 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. Для этого вам нужно будет авторизоваться на одном из этих сайтов, после чего вы сможете оставлять комментарии.
Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.
Авторизуйтесь при помощи аккаунта Турбомилк. Вы также можете зарегистрироваться на нашем сайте.