Турбомилк Голосов: 1 Адрес блога: http://turbomilk.ru/ Добавлен: 2008-06-12 20:45:20 блограйдером ZaiSL

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

1970-01-01 03:00:00 (читать в оригинале)

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

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

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

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

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

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

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

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

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

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

Вот и всё.

---

Иконки: Webka

1970-01-01 03:00:00 (читать в оригинале)

Веб-приложение для социальных сетей «Вебка» некоторое время назад стало «миллионером»: больше миллиона людей украсили свои фото игривыми рамочками. Автор приложения — заслуженный флешер Российской Федерации Алексей «Ancle» Федотов решил, что иконка Вебки его уже не радует, и нужно сделать новую.

Дело в том, что моё кроссплатформенное приложение «Вебка» очень нуждается в красивой кроссплатформенной айдентике в виде картинко-иконко-логотипа. Прототип её уже есть, но качество его конечно оставляет желать лучшего. Всего у приложения более 1000000 пользователей и около 60000 уникальных заходов в день. И это без Одноклассников.

Алексей «Ancle» Федотов

Мы решили сохранить преемственность со старой иконкой и оставить в качестве главного действующего лица красную стерео-вебкамеру. Осталось только выбрать композицию:

Клиент решил не мудрить и выбрал первый наиболее простой вариант. Отличный выбор! Мы нарисовали иконку в разных размерах для разных социальных сетей. Правда, в процессе отрисовки игривый горошек был заменен на благородное дерево.

Потом мы немного увлеклись и решили сделать иконки для разных времен года.

Лето

Осень

Зима

Весна

Вы можете воспользоваться Вебкой в Одноклассниках, в Вконтакте и в Mail.ru Мой Мир.