Компания
50,97
рейтинг
29 мая 2012 в 11:41

Разное → UI-Ai: Рисуем интерфейс в Adobe Illustrator

На презентации Adobe CS6 в Самаре я делал доклад о том как мы в компании Parcsis используем Adobe Illustrator для создания веб- и мобильных интерфейсов. Хочу поделиться этим докладом с вами в виде слайдов с комментариями.

Рисуем интерфейс в Adobe Illustrator

Когда показываешь свои работы, зачастую начинающие дизайнеры задают вопрос «А в чем это нарисовано?» Опытные дизайнеры спрашивают такое реже, так как понимают, что одно и тоже можно сделать с помощью разных графических редакторов. Тем не менее, расскажу свою историю…


Рисуем интерфейс в Adobe Illustrator

Где-то в 99 году мне пришло осознание, что я дизайнер и, вероятно, некоторое время буду что-то рисовать. Тогда как раз вышел фотошоп пятой версии, где были такие поражающие воображения мощнейшие фичи для веб-дизана:
— Текстовые слои. Подумать только — текст в виде текста, а не растра!
— Многоуровневое Undo! Раньше можно было отменить только последнее действие.

Потом вышел еще более мощный фотошоп версии 5.5, где появился Save for Web — очень важная штука для веб-дизайна…
Рисуем интерфейс в Adobe Illustrator

Шли годы, версии фотошопа сменяли друг друга. Но я рисовал веб-сайты и интерфейсы в фотошопе. Да, появились некоторые удобности, даже векторные объекты. Но основа была в растре, а главный инструмент — слои.
Рисуем интерфейс в Adobe Illustrator

Но около года назад случилось так, что вся наша команда дизайнеров, которые занимаются интерфейсами, перешла на Adobe Illustrator. Будучи консервативным человеком, сначала я сильно страдал. Все было очень неудобно и непривычно. Но потом постепенно до меня начало доходить, что кое-какие преимущества есть.
Рисуем интерфейс в Adobe Illustrator

На самом деле, я немного недоговариваю. Уже довольно давно, мы использовали Иллюстратор для того, чтобы рисовать иконки. Поэтому большую часть стресса я уже пережил, когда переучивался рисовать иконки в векторе.
Рисуем интерфейс в Adobe Illustrator

Зачем рисовать веб-сайты и интерфейсы в векторном редакторе? Что мы за это получим?
Рисуем интерфейс в Adobe Illustrator

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

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

В ближайшее время должны появиться настольные компьютеры или мониторы с высоким разрешением. Ваш дизайн нужно будет как-то оптимизировать, чтобы отображать на таких экранах. Ведь, если взять, например, iMac 27 и увеличить его разрешение вдвое, то получится почти 15 мегапикселей. Даже боюсь представить сколько будет занимать графический файл, который полностью заполнит экран.

Выход один — в интерфейсах надо переходить на вектор и оставить пиксели только для фотографии.
Рисуем интерфейс в Adobe Illustrator

Что же изменится в вашей жизни и карьере дизайнера, если вы начнете делать веб- и интерфейсы в векторном редакторе?
Рисуем интерфейс в Adobe Illustrator

Начнем с минусов…
— Во-первых, вы будете страдать. Многое будет непривычно и вообще придется думать иначе.
— Вы не станете более лучшим дизайнером. Качество ваших работ никак не вырастет. Вы будете делать все тоже самое, но немного иначе. Первое время.
— Вам будет очень не хватать некоторых растровых возможностей. Придется подумать, чтобы сделать некоторые элементарные для фотошопа вещи.
Рисуем интерфейс в Adobe Illustrator

Но есть и хорошие новости:
— Во-первых, главный и самый ценный ресурс для любого дизайнера (да и вообще любого человека) — это время. Зачем что-то делать два дня, если это можно сделать за 4 часа?! Как правило, мысль обычно идет быстрее, чем рисуют руки. Иллюстратор очень сильно помогает экономить время.
— Во-вторых, векторные файлы намного проще исправлять. Что-то передвигать, изменять размер и так далее. Идеология «Объект, а не слой» дает существенный прирост производительности.
— Ну и самый важный пункт. К вам начинает приходить Понимание с большой буквы чем именно вы занимаетесь. Ну то есть вы что-то делаете день изо дня. А потом до вас доходит! С большой буквы доходит. Что важно, а что нет.

Например, лично до меня дошло, что современные интерфейсы не рисуют. Их верстают. Идеология «панели управления» отходит. Интерфейс становится больше похож на журнальную верстку. Большое значение приобретают такие вещи как типографика и интерактивность. А какие-то pixel-perfect штуки уже не так много значат.
Рисуем интерфейс в Adobe Illustrator

Одно из самых важных и приятных вещей, которые появились с переходом на Иллюстратор, это конечно же арт-борды. Дико удобная штука.
Рисуем интерфейс в Adobe Illustrator

Раньше в фотошопе была идеология: «один файл — одна страница». Но современные интерфейсы и веб-сайты очень редко состоят из одного экрана.
Рисуем интерфейс в Adobe Illustrator

Иллюстратор позволяет иметь много экранов в одном файле. Это очень удобно. В папке проекта на порядок меньше файлов. Все файлы всегда под рукой. Ну нужно открывать новые файлы. Плюс, экономится память, что немаловажно.
Рисуем интерфейс в Adobe Illustrator

Новые артборды можно создавать по ходу работы или сделать сразу несколько зон при создании документа. Как видите, иллюстратор стал ориентирован не только полиграфию, но и содержит пресеты для экранной графики.
Рисуем интерфейс в Adobe Illustrator

Вот как это выглядит. Кстати, есть довольно удобная фича: если один и тот же элемент есть на всех экранах, то его можно нарисовать только в одном месте, а потом скопировать и воспользоваться функцией «вставить во все артборды»
Рисуем интерфейс в Adobe Illustrator

Вот пример одного из интерфейсов, которые мы разрабатываем. Все экраны веб-интерфейса в одном файле. Причем, этот файл занимает не так много места — удобно потом передавать его потом разработчикам.
Рисуем интерфейс в Adobe Illustrator

Приложение для iPhone. Особенность в том, что экраны небольшие, но их очень много. А теперь представьте, что это были бы PSD-файл и вам нужно было бы исправить какую-то кнопку, которая встречается на нескольких экранах. Пришлось бы открывать много файлов и следить за версиями.
Рисуем интерфейс в Adobe Illustrator

Изначально родной формат файлов иллюстратора это AI. Но мы храним все макеты в формате PDF.
— Сохраняются все данные. Ничего не теряется и нормально отображается, если при сохранении не забывать нажимать галочку — «сохранить возможность редактировать в Иллюстраторе»
— Главное удобство в том, что PDF можно открыть на любой платформе с помощью бесплатных приложений. В мак ос есть стандартное приложение Preview или можно воспользоваться Acrobat Reader. Да, возможно не все эффекты отобразятся корректно, но в целом картина ясна.

Еще момент Finder на маке отображает делает иконку файла в виде такой брошюры. И из-за отогнутого листочка виден второй артборд. Когда я увидел это ми-ми-ми, то чуть не прослезился от умиления.
Рисуем интерфейс в Adobe Illustrator

Сетка важна для любого макета. В иллюстраторе есть свои особенности.
Рисуем интерфейс в Adobe Illustrator

Мы не испольуем направляющие, которые Guides, а рисуем прямо по сетке, которая Grid. В основном используем сетку с размером шага 10 пикселей. Для мобильных приложений берем сетку помельче — 8х8. Мы размещаем объекты так, чтобы они все стояли на сетке.
Рисуем интерфейс в Adobe Illustrator

В настройках просто выбираем размер блока в 100 пикселей и включаем 10 делений. В итоге и получается квадратики 10х10. Для сетки 8х8 мы используем параметры 64 и 8 делений блока.
Рисуем интерфейс в Adobe Illustrator

Чтобы полностью насладиться удобством иллюстратора, нужно включить режим «прилипание к сетке». В таком случае при создании или перемещении объекта он будет стремиться «встать на сетку». Это залог аккуратного макета.
Рисуем интерфейс в Adobe Illustrator

Еще один мощнейший инструмент Иллюстратора — это Appearance. В фотошопе есть похожая штука — эффекты слоя. Но аппиранс намного мощнее. К каждому векторному объекту можно применять векторные и растровые эффекты в любой последовательности, которые в реальном времени пересчитываются, если вы меняете объект.
Рисуем интерфейс в Adobe Illustrator

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

Самый нижний слой это тень, которая не тень вовсе, а блик. Выше лежит голубая градиентная заливка. К которой применен эффект «иннер шадоу», чтобы было понятно, что объект как бы вдавлен. Далее лежит заливка в виде черного полосатого паттерна с 5-процентной прозрачностью.
Рисуем интерфейс в Adobe Illustrator

А вот кнопочка, которая сделана особенно хитро, чтобы ровнять её по сетке. Снизу эффект тени, который делает блик. Далее подряд идут подряд три градиентных заливки, к которым применены эффекты Offset Path, которые делают меньше объект на заданное число пикселей. Ко всему этому применен эффект «Round Corners», чтобы закруглить края. И на самом верху эффект который уменьшает кнопку так, чтобы она вставала на сетку.

Чтобы сделать кнопку из другого объекта, нужно просто перетащить на него этот аппиренс или ткнуть в кнопку инструментом «Пипетка».
Рисуем интерфейс в Adobe Illustrator

Как вы заметили, основной вид заливок в интерфейсных элементах — это градиенты. Пару версий назад в иллюстраторе переделали механизм работы с градиентами и сделали его очень удобным. Теперь там наконец-то появилась возможность работы с прозрачностью. И вот эти быстрые столбики, которые появляются поверх объекта.
Рисуем интерфейс в Adobe Illustrator

Но не будем забывать, что пиксели пока никуда не пропали. И рано или поздно макет будет растрирован и отображен на экране.
Рисуем интерфейс в Adobe Illustrator

Иллюстратор знает не только физические метры, сантиметры и дюймы, но и пиксели. Перед тем как работать с экранной графикой, укажите в настройках, что вы хотите работать с пикселями.
Рисуем интерфейс в Adobe Illustrator

Первое время у вас будет проблема с тем, что границы объектов размываются, так как включается анти-алиасинг. Чтобы этого не происходило, нужно чтобы вертикальные и горизонтальные линии попадали в пиксели. Вам нужно следить, чтобы координаты и размеры объектов были целыми значениями.
Рисуем интерфейс в Adobe Illustrator

В иллюстраторе есть еще одна очень удобная штука для автоматического выравнивания. Вам не нужно самому следить за координатами. Особенно это удобно для сложных объектов, которые вы хотите чтобы выглядели четко. Фича крутая, но мы ей не пользуемся. Так как она глючит! Когда в группе есть объект с включенным «align to pixel grid», то эта группа начинает неправильно прилипать к сетке и координаты плывут.
Рисуем интерфейс в Adobe Illustrator

У иллюстратора есть и слабые стороны. Совсем отказаться от растрового редактора у вас не получится.
Рисуем интерфейс в Adobe Illustrator

Например, вам не обойтись без фотошопа для работы с (сюрприз-сюрприз) фото! Если в макетах есть фотографии, то желательно не резайзить их в иллюстраторе, а вставлять сразу «размер в размер».
Рисуем интерфейс в Adobe Illustrator

А вот тут неожиданный поворот. Но изначально векторные иконки желательно сначала растеризовать, а потом уже вставить в таком виде в фотошоп.
Рисуем интерфейс в Adobe Illustrator

Еще пару слов про сильные стороны иллюстратора, которыми я не пользуюсь, но возможно начну.
Рисуем интерфейс в Adobe Illustrator

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

У меня это до сих пор в голове не укладывается. HTML-верстальщики используют векторный редактор.
Рисуем интерфейс в Adobe Illustrator

Допустим, в макетах у вас есть один и тот же элемент. Например, кнопка. Вы можете сделать из неё символ и использовать. Зачем так делать? Потому что, если вы исправите эту кнопку, то она исправится и в других местах.

Удобно. Но пока я использую это не так часто. Так как абсолютно одинаковые элементы встречаются не так часто. Вероятно, скоро для этого что-то придумают.
Рисуем интерфейс в Adobe Illustrator

Еще одна штука, которую пока используем мало, но продолжая популяризацию идеологии журнальной верстки, уверен, что она пригодится. Это такие же стили текста, как в ворде. В макете вы размечаете текст не параметрами, а логикой его использования. Потом, вам, например, захочется изменить все стили заголовков. Нужно будет поменять только в одном месте.
Рисуем интерфейс в Adobe Illustrator

За сим раскла… Спасибо, что читали. Если есть вопросы или вы рисуете иначе — пишите в комменты.
Автор: @kortunov
Turbomilk
рейтинг 50,97

Комментарии (155)

  • +8
    Как по мне то рисовать интерфейсы надо в Fireworks, рисовать иллюстрации в Illustrator, а фотки в фотошопе.
    • 0
      И никогда — слышите, ни-ког-да не забивать гвозди микроскопом?
    • +27
      согласен. индизайн надо рисовать в индизайнере а автерэффектсы — в афтерэффектсе!
      • +4
        И в Дримвивере обязательно надо дримвиверить, иначе чуда не будет!
    • +6
      А у вас есть опыт рисования интерфейса в Fireworks? Я пытался попробовать последний Fireworks, но это реально какой-то тихий ужас. Мне кажется со времен macromedia в нем меняют только название. Например настройка надписей или антиалязинг просто ужасные и не сравнимы другими продуктами линейки CS6.
      • +1
        Согласен с вами. И макет резать не удобно когда несколько страниц
      • –1
        Несколько видов сглаживания и набор остальных необходимых настроек, в чём ужас?
      • 0
        Возможно, со шрифтами не все окей. В своих проектах ничего особо критичного в этом плане не проявлялось. А вот интерфейс и функционал у Fireworks весьма приличный. В Illustrator'е чувствую себя очень неуютно. Пробовал перейти, когда закупали Adobe Design Standart. В итоге — докупил и Fireworks, в нем и работаю в основном.
      • +1
        Не кидайте камень в огород Fireworks, так вот надо сказать спасибо Adobe, что она не зарубила один из лучших проектов Macromedia, как сделала это с Freehand. Работа с векторами в Fireworks самая лучшая — вроде рисуешь вектор, а сразу видишь растр. Кто не разобрался с альясингом: выбирайте объект и нажимайте Ctrl+K, и увидите как он расставляет точки точно по узлам пиксельной решетки.
        Альясинг текста есть более точный (Custom).
        Опять же CSS теперь автоматом можно получить, с округлостями, тенюшками, градиентами и прочей тряхомудией.
      • 0
        На вкус и цвет…
        Я Вам могу заявить тоже самое, но про про Фотошоп. Для меня рисовать сайты в Фотошопе — просто нелепость! Да и зачем? Когда есть НАМНОГО более удобный инструмент именно для этой задачи — Fireworks!
    • 0
      Так говорят все, пока дело не доходит до серьезной крупной работы. Он sic! коряво отображает то что создаётся, я уж не говорю про тормоза при больших объемах текста и очень неряшливые контуры и тени
  • +5
    Мне повезло научиться векторной графике раньше, чем растровой. Поэтому людей, которые во что бы то ни стало все делают в фотошопе, я не понимаю. Особенно дики люди, которые верстают в фотошопе _журналы_ на диплом…
    • 0
      Вот потому вы их и не понимаете что выучили вектор раньше растра) А смысл в скорости работы, кто где умеет, если верстают журналы на диплом в шопе, это уже отлично, хоть не в ворде.
      • 0
        На диплом, может, и сверстает, а реальный журнал… шоп загнется раньше по памяти.
  • 0
    Вот сами и верстайте потом своё AI
    • +3
      Я думаю многие сталкивались с забавной ситуацией, когда макет сайта присылали в кореле О_О
      • +4
        Я сталкивался с забавной ситуацией, когда ВСЁ делали в кореле. Любые документы, рефераты, всё что угодно.
        • 0
          Ну корел не так уж и плох, почти как делать в Иллюстраторе. Всё равно не совсем профильный редактор.
          • 0
            По-крайней мере сделав один раз в векторе, не будет потребности перерисовывать все под разные разрешения и потребности в будущем.
        • +1
          Реально! ))) Мне клиенты присылали текст для сайта в Кореле (чтобы я опубликовал).
          • +1
            Мне клиенты присылали рекламный аудиоролик, чтобы я с него контакты и информацию взял.
      • –2
        Макет сайта — куда ни шло. В картинку-то оно умеет экспортировать. Я вот лет 10 назад работал в допечатке, там нужен вектор, а корел (по крайней мере тогда) не умел нормально eps экспортировать. Все эти тени и прочие гей-эффекты отлетали. И с CMYK проблемы были, насколько я помню.

        Ну и присылали нам модули рекламные в кореле. Сначала мы перерисовывали в AI. А потом забили и тупо RGB-картинку вставлять начали. Шрифты размыты в нафиг, цвета отъехали? Ну извините, у вас корел.
        • 0
          10 лет назад было много проблем… потому и пошли требования к макетам перед отправкой в типографию. Не понимаю я почему шрифты мылятся в растре ( достаточного разрешения ), если в любом случае машина работает по координатам с файла. А координаты — теже пиксели.
          • +1
            Растровые шрифты в полиграфии мылятся по следующей причине:

            Чтобы вывести растр, фотонабору (принтеру который печатает картинку на пленку) надо рисовать кружочки разного размера. Разрешение кружочков называется линиатурой и составляет примерно от 70lpi для газет до 150lpi для журналов.

            Максимальный LPI зависит от бумаги — на газетной бумаге краска расплывается кляксой, маленький кружочек сделать нельзя.

            Разрешение самого фотонабора — что-то порядка 8000dpi. И вектор весь, включая шрифты, рисуется именно с таким разрешением.

            Это все прекрасно видно невооруженным глазом если открыть любую газету.

            В вебе такой проблемы нет — там везде все равно на выходе RGB-растр.
            • 0
              Получается если макет растра принесли бы вам в 8000dpi то не будет мыла у шрифтов?
              • +2
                Ну если в картинке растр прям кружочками уже — то наверное да. Картинка нужна при этом с однобитным цветом. Фотонабор ведь не делает полутона — печатная машина не умеет сделать 50% цвета в каком-либо месте.

                Но я не знаю можно ли так.

                Просто полутоновая картинка с большим разрешением не решит проблему — надо будет все равно понижать разрешение и рисовать растр.

                Короче проблема в том, что нужно отделять области где растр и где шрифт — они рисуются по-разному.

                Там технология вообще много тонкостей диктует. Например у тебя черный текст поверх картинки. Текст будет на одной черной плашке векторный, а картинка будет снизу растровая. Тексту ставят «оверпринт», и через это в других цветах под текст дырки не будет. Черный цвет, в отличии от cyan/magenta/yellow, непрозрачный и закроет картинку. Если же в картинке резать дырки, то малейшее несовпадение цветов оставит белые дырки вокруг текста. А несовпадения («броски») всегда случаются, печатная машина — она механическая и имеет свои погрешности.

                Короче бывает что области вектора и растра разные для разных цветов.

                В общем в допечатке все сильно хитрее чем в вебе. И растр там юзают только где он нужен.
                • +1
                  Конечно все там сложнее. Знаю ибо на полиграфии учился)
            • 0
              Разрешение самого фотонабора — что-то порядка 8000dpi. И вектор весь, включая шрифты, рисуется именно с таким разрешением.


              Вы не поверите, обычно разрешение фотонаборных аппаратов привязано к неким историческим «стандартам» типа 300 dpi, и 10 лет назад стандартным разрешением фотонаборов было 2400 dpi. 3600 использовалось для стохастических или иррациональных растров.

              Опять же, 10 лет назад уже появились приличные газетные бумаги, спокойно вытягивающие 100 lpi, журналы же и прочую цветную фигню уже тогда на 175 lpi печатали
              • 0
                Давно это было, цифры забыл уже.
        • +1
          Вы были в неправльной допечатке :-) Те, кому приходилось работать в Corel'е 10 лет назад, находили версию 9 Heidelberg Color Edition, в которой хейдель прикрутил свою систему управления цветом и все было с CMYK более чем хорошо. Да и мозг при создании макета в Corel нужно было всегда (насчет теней и гей эффектов). Как и в Иллюстраторе впрочем. Примерно к 12 версии корел таки глобально исправил eps экспортер (ну и PDF заодно). И в настоящее время экспортит в eps/pdf все шоколадно, включая mesh-fills, которые открываются иллюстратором как родные.

          P.S> не ради холи вара — ИМХО Corel Draw прекрасный инструмент для быстрой, очень быстрой разработки или правки макета в условиях недостатка времени именно пре-прессерами, а не дизайнерами. Связано конечно это с более инженерным складом ума тех самых пре-прессеров. И Corel имеет в этом смысле более техический подход ко всему внутри себя.
          • 0
            Ну вот тогда у нас не было этого color edition, corel тогда не умел eps нормально, а 90% макетов были с тенями и прочим. Через это вот сложились неприятные воспоминания о кореле.
      • 0
        Самое ужасное — это растровый логотип в кореле.
  • +2
    Был на вашем докладе. Как раз тогда подумал, что презентация в духе хабра сделана.
  • +2
    Отличная, откровенная статья. Уже года три как знаю, что некоторые дизайнеры неплохо делают макеты в AI, но сам им пользоваться боюсь/не хочу/не умею/не хочу страдать. А после такой подробной статьи теперь я выделю время на то, чтобы познать азы, почитать литературу и в целом повысить свой скилл в веб-дизайне. Спасибо.
    • 0
      Познакомьтесь лучше с Fireworks! И страдать почти не будете…
  • +1
    Вот чего чего, а такого вот извращения я не понимаю, как бы не старался.
  • +7
    Все это похоже на оправдание почему пришлось все это делать в AI если все можно было сделать в PSD БЕЗ МИНУСОВ.
    • +3
      Вероятно, вы видите только то, что сами хотите увидеть. Я думал, что вступление к статье про более чем 10 летний опыт рисования в фотошопе намекнет читателям, что иллюстратор — переход на новый уровень.

      Да, я знаю, что это все можно сделать в фотошопе. Но делаю в иллюстраторе. И раскрываю причины.
      • +3
        Это не переход на новый уровень, а переход в иную плоскость. Вектора — не панацея.
      • 0
        а можно вопрос?
        как вы наводите порядок в панельке слоев и наводите ли вообще? просто когда артбордов много и все объекты в одном слое находятся, то найти что-то бывает довольно сложно. а уж манипуляции вроде «Object → Arrange → Send to Back» и вовсе пугают глубиной этого самого Back…

        я попробовал справиться с этим путем группировки объектов в пределах артборда и последующей работе в isolation mode. но вдруг есть какой-то более другой и более удобный способ?
        • 0
          Я очень редко пользуюсь слоями. Зато использую группировку объектов. Оснвой инструмент — именно sent to back и bring to front. Да, идеологически криво, но в большинстве случаев это удобно.
  • +1
    А я не вижу никакой разницы.

    Хочешь рисовать в Одоб Элюстро сайты? Да пожалуйста.
    Хочешь рисовать кнопки в Фотошопе? Никаких проблем.
    Нравится Индизайн? Ок, фигач.
    Файерворкс? Класс, расскажешь потом — как оно и какие есть фичи.

    • 0
      Спасибо, кэп! В этой статье я рассказываю о своем практическом опыте. Буду рад, если кому-то поможет.
  • +1
    Я лет 10 назад занимался версткой, правда в полиграфии. Для меня дико слышать что людей надо вот так вот убеждать пересесть на AI с фотошопа. Реально что ли это все — кнопочки эти выпуклые и стрелочки — рисуют сейчас в фотошопе в основном?
    • +1
      Да, абсолютно большинство сайтов и интерфейсов делается в фотошопе.
      • 0
        Мда. А если надо кнопочку поширше или стрелочку подлиннее — это вот прям руками в растре делается? Или туда уже вектор запихнули пока меня не было?
        • 0
          Вектор запихнули. Наиболее продвинутые дизайнеры используют только векторные объекты в фотошопе. Но это реально странно.
          • 0
            Наиболее продвинутые, кстати, ещё и смарт обджекты юзают, чтобы не таскать изменения из файла в файл.
  • 0
    Огромное спасибо за эту статью. Было очень интересно читать. Всегда нравился Иллюстратор, но руки не доходили до его освоения. Теперь точно попробую сделать себе сайт визитку в иллюстраторе. Один вопрос. Как с версткой дела обстоят. Вы написали, что при сохранении в .PSD некоторые эффекты могут отобразиться «некорректно». Можно про это чуть подробнее. Что делать если элемент отобразился совершенно не таким каким он был задуман.
    • 0
      Вы написали, что при сохранении в .PSD

      Если честно, не помню такого. Но чтобы наверняка, можно сохранять в PNG прямо из Иллюстратора.
      • 0
        Он очепятался и имел ввиду .PDF :) Что делать, если эффект отображается некорректно при сохранении в .pdf?
        • 0
          На самом деле, это оказались просто мои страхи, надуманная проблема. Если выбирать свежую версию PDF, то никаких проблем не возникает.
    • 0
      Кстати в AI есть очень нужная галочка «pixel preview». Показывает как оно в растре будет выглядеть.

      Плюс еще вопросик: чтобы квадратик с рамкой в 1px встал ровно по пикселям, мне приходилось делать ему нечетную ширину и добавлять полпикселя к координатам. Можно это как-то проще сделать?
  • 0
    Я вот сам программист, сам себе верстальщик и иногда рисовальщик. И что меня бесит что в AI, что в фотошопе — так это save for web этот. Конкретно то, что когда рисуешь один квадратик — он лепит еще кучу вокруг (ну, чтобы типа покрыть всю поверхность). Почему было нельзя разрешить просто налепить квадратных областей как угодно? Может этот искусственный интеллект как-то можно вырубить?
    • +2
      можно выбрать нужные квадратики и указать save selected
      • 0
        Не хочется выбирать каждый раз. Я делаю правки, сохраняю, и сразу смотрю в браузере. Эти лишние квадратики отключаются в диалоге «save for web», и он это запоминает. Но вот эта вся мишура поверх все равно рисуется и раздражает.
        • 0
          Какие вы правки там делаете по 10 раз пересохраняя?) Вообщем то сейчас резать то на блоки ничего не нужно. Чего вы там по таблицам распихиваете какие блоки для резины?)
          • +1
            Я делал грид на яваскрипте. Там много мелких элементов, которые весьма нестандартно ставятся в html, и всячески еще анимируются. Надо было экспериментировать с размерами и прочим.
            • 0
              можно, например, оформить ваши картинки в smart layer, они по двойному щелчку открываются в новм документе откуда можно экспортуть ее без резки в принципе.
  • 0
    Много спорных аргументов, вообщем такую же статью можно и про фотошоп, тут чисто дело привычки и кому как удобнее.
  • 0
    Вот вы такой большой, серьёзный, пост написали, все дела, а картинки с тектосм: farm8.staticflickr.com/7218/7266949626_61b1e78bc0_c.jpg в JPG с ореолом вокруг букв сохранили.
    • 0
      Есть предположения почему так получилось?

      Подсказка: оригинал слайда, залитый на flickr — www.flickr.com/photos/kortunov/7266949626/sizes/o/in/set-72157629889106666/
      • 0
        Это фликр, если вставите сюда оригинал на 1000px, я думаю будет ок.
      • 0
        может лучше перезалить картинки на habrastorage.org?
      • 0
        Решение вам предложили ниже, и решение на 101% рабочее: habrastorage.org/
      • 0
        связано с оптимизацией картинки. Обычно во время ужатия такое можно наблюдать, когда качество выставлено не на максимум.
    • 0
      Это не автор сделал, а сам фликр (который по хорошему не для иллюстраций совсем) при ресайзе.
  • 0
    Недавно перешли на вектор для разработки игр, не знаем бед. Сначало делаем болванки в 3D, потом обрисовываем в люстре. Вышел iPad 3 с ретина дисплеем, портирование заняло 4 часа, и это вместе со склейкой новых спрайтов и правок в коде.
    • +2
      Вы только результат покажите векторных персонажей
      • 0
        Возможно через пару месяцев покажу, как все будет готово.
  • +1
    Кнопочки в фотошопе чаще всего делают шейпами со всякими эффектами. Изменить размер — совсем не проблема. Делать верстку в иллюстраторе — тоже сомнительная идея. Специально для этого же индизайн, вроде. Так и не понял, в чем преимущество иллюстратора.
    • +2
      Полностью согласен. Я с самого начала учился работать именно так. Теперь практически любой мой макет — это куча шейпов с примененными стилями. Фотошоп свежих версий замечательно работает с вектором, а растр использую в основном для теней извращенной формы и фото.
    • 0
      Верстку многостраничного текста — однозначно делать в индизайне. Разложить для веба картинки и обозначить где будет текст (он же все равно будет в html) — отлично делается в иллюстраторе.
  • 0
    А как вы обошли проблему с шрифтами? Я не пробовал делать сайты в AI, но когда печатку делаю жутко раздражает как отображаются шрифты в масштабе меньше 100%.

    Хотя когда сайт или уи, то и масштаб не нужно менять…
    • 0
      Честно говоря, никакой проблемы со шрифтами мы не испытали. Работают также, как в фотошопе.
    • 0
      Насколько я помню, иллюстратор рисует шрифты без хинтинга, просто как вектор. Он же для допечатки придуман, в допечатке хинтинг не нужен, а вот видеть все максимально близко к результату — нужно. Через это шрифты и в 100% смотрятся не айс. Но их же не в картинку в результате вставлять — в печати все будет ок, и в html все будет как браузер нарисует.
      • 0
        именно про хинтинг и говорю. Как по мне — сильно мешает работать, а сайты и интерфейсы — это 90% текстовая информация и требует повышенного внимания к шрифтам
        • 0
          Т.е. мешает внешний вид шрифтов без хинтинга, при том что один хрен браузер иначе отрисует?
    • 0
      я решил проблемы ручной сменой рендеринга, ставлю на strong или crisp
      • 0
        а где это делается в AI? В PS я использую исключительно strong и smooth.
        • +1
          в панели шрифотовой: image
          • 0
            круто, спасибо!
  • +11
    1) Считаю абсолютно не верным рисовать в Иллюстраторе полноцветную графику. Вектор — это ограничение по определению. Дальше инструментов илла вы никуда не уедите, все что там есть это формы и прозрачные градиенты. Тени псевдовекторные — экспортируемые только через растр. А дальше у кого какого умения хватит что-то из этого сообразить. Да, кого это устраивает нет проблем. Но по мне пример с калькулятором жжжжуткий геморрой, который в шопе отрисовывается на ура без каких то ограничений, построений. Причем калькулятор есть куда точить, он не законченный. Тени от листков не натуральны. В шопе этого добиться можно очень просто — 30 секунд с сохраненим файла.


    Попробуйте добавить эффектов каустики на экран, отобразите на нем отражение клавиатурки, Опа!, а вот это проблемка для Илла. Чем сложнее вектор, тем меньше контроля над ним. Тем больше тормозов.

    2) Многостраничный документ. Упаси боже!) Сколько он весит? сколько илл его рендерит на среднем компе верстальщика? Верстальщик разберется в экспорте форм в сложнейшей иерархии векторных объектов?
    Какой его уровень должен быть?
    Артборды? А чем плохи PSD в папке открытые через Bridge?

    3) В растре руки полностью развязаны. Здесь тебе и сложные тени, и сложные блики, и те же векторные формы если так приспичит. И куча фильтров и кистей и текстур. Рисуй, здесь все от рук. Ограничений нет.

    4) По поводу Retina Display — ваш пример построен на css, неверно его приводить как преимущество векторного интерфейса. Вектор в вебе очень плохо приживается. Не говорю уже что сложные иконки дадут огромную нагрузку на браузер. ДА и где там вектор… SVG? Опять ограничения?

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

    Так что простота и скорость работы — это результат ограничения векторной среды в принципе, из которой что-то не минималистское и не одноцветное выбить ой как не просто!

    6) Стили текста появились в CS6 Фотошопе тоже. Была бы там кнопка у этого списка «экспорт в css» цены бы не было.

    7) Хранить макеты PDF? Да вы че… А не потеряется ли способность к редактированию в дальнейшем? Или же там такой примитив, что не требует привязки к стандартному родному формату AI?
    PDF создан для того, чтобы придя к соседу, при печати не поехал заголовок.

    Я не злой, просто удивленный, кажется что недостатков несоизмеримо больше.
    • 0
      Чего одни layer styles в фотошопе стоят)
    • –1
      PDF — это давно родной внутренний формат AI, как раньше им был EPS
      • 0
        Еще скажите и с редактируемыми шрифтами
        • +1

          видимо эта галочка включает в PDF все возможности для редактирования.
        • +1
          Видимо. Там все редактируется.
    • 0
      Артборды? А чем плохи PSD в папке открытые через Bridge?

      А можете рассказать по подробнее, никогда Бриджем не пользовался.

      Кстати, насчёт п.5 — можно группировать объекты, по сути то же слияние слоёв, только из разгруппировать можно.

      А в целом согласен с вами и вообще пока браузеры не будут рендерить вектор, как в люстре, всё будет коряво выглядеть (видно очень резкие лесенки на непрямых объектах)
      • 0
        Из за того что в windows очень плохо с превьюшками файлов различных форматов, adobe подсуетился и сделал adobe bridge — довольно ресурсоемкий файловый менеджер, тот же проводник но от адобчика.



        Тот что внизу — mini bridge. Довольно удобно, не нужно пользоваться диалогом open или перетаскивать файлы из проводника. По сути если ты в папке с проектом то это почти артбоард, у которого проблема в том, что если много этих бордов, то файл становится тяжеловесный для подправки какой нибудь мелочи в дальнейшем.

        Версия фотошопа CS6. Я уже с парой серьезных багов встретился.
        1) не очищаются с экрана линии трасформации при работе со слоями
        2) не работает trim для нерастрированного текста. Тупо его не видет и режет полотно по другим пикселям.
        3) Глюки со шрифтами. Пробел часто не работает. Часто ставит индикатор набора текста в начале блока а не там куда мышкой ткнул.
        Сыроват он…
        • +1
          Сетка какая интересная :)
          • 0
            черт, не спрятал) просто для 1000px + отступ от нее +центр + неубранная лишняя…
        • 0
          Да действительно «тяжёлая» штука Бридж, вообще не привычно пользоваться, а для превью PSD есть в сети несколько библиотек, например, вот.

          Тоже пользуюсь CS6, вроде пока не сталкивался с такими багами, но всё допилят думаю через пару апдейтов.
        • 0
          А по скорости проблем не заметили? Я вот переплевался на больших файлах, субъективно раза в три медленнее. К примеру, перетаскивание папки слоев какого-нибудь блока в макете.
          • 0
            После установки 12 гигов памяти в iMac, я забыл что такое тормоза в Иллюстраторе. Вся процедура обошлась в $50 за два модуля по 4 гб.
            • 0
              Я о фотошопе. У меня комплектация также довольно мощная, но замедления налицо. Об иллюстраторе и файрворкс речи нет.
          • 0
            мм… с папками… нет у меня хорошо вроде с этим все.
            • 0
              Я не так выразился. Перетаскивание группы слоев на полотне, от 15 штук.
              • 0
                Подтверждаю. В сильно в фоне работает кодирование видео, с использованием шифта выделять слои в группы все виснет.
      • 0
        Друзья! Не путайте пожалуйста работу с вектором в редакторе и вектор в браузере!
    • 0
      Недостатков много, но и достоинств тоже богато. Я бы особо выделил недеструктивное редактирование. Да — в фотошопе тоже можно что-то подвинуть и поправить, но не всегда и не везде.

      Не стоит также недооценивать инструменты векторных редакторов. Какой-нибудь mesh gradient позволяет делать весьма сложные штуки. Типа вот: th01.deviantart.net/fs8/PRE/i/2005/361/2/9/Steps_Angel_by_I_evermind.jpg

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

      В общем вектор и растр — разные инструменты, решать вам.
  • 0
    Отдельное спасибо за «Вы не станете более лучшим дизайнером»
  • +6
    Все взрослые люди должны понимать, что не существует супер-героев. Не бывает единого наилучшего способа или инструмента решения ряда разнообразных задач. Денис просто делится опытом. Для некоторых задач в проектировании UI действительно более практичным будет использование Illustrator. Кому-то, конечно, это покажется бесполезным. Но хотя-бы знать о существовании альтернатив − никому еще не мешало. Никто не собирается отговаривать вас от использования Photoshop, смотрите на мир ширше.
    • +3
      Царь Соломон, перелогиньтесь.
    • 0
      Спасибо за комментарий. Честно говоря, тоже смотрю на другие комментарии и диву даюсь как другие люди не желают помотреть на мир шире. Хотя бы в той области в которую влазят. К сожалению, с этим сталкиваюсь постоянно, но сегодня, видно, день такой — что на работе, то и на Хабре :-)
      Вот именно — под каждую задачу свой инструмент. Может кто не знает, но и до 1999 был Web. И на Photoshop 3 приходилось работать, только его портированная версия под Windows жутко нестабильная была и файл в 30М был неподъемным, а Corel справлялся, хотя растр в нем, для меня, править было неудобно. Да, и портирование в Web в Corel раньше, чем в Adobe появилось. А вот вектор в Corel до сих пор делаю. Одно время Adobe на Illustrator совсем забил и в Corel все верстали. Кстати, комбинированные документы, когда в векторе растр вставлен, Adobe до сих пор не научился нормально печатать. Все норовит один цветовой профиль применить ко всему. В Corel — без проблем. И с градиентами в Corel минимум с 6 версии все нормально.
      • 0
        Так это вы не хотите шире смотреть на комментарнии) люди если пишут тут, то знают о чем, это не просто «фу мы так не привыкли» это конретные вопросы. Не думайте что кто-то конкретно сидит на разных пакетах и кидаются друг в друга помидорами. Наработки в часах в этих пакетах примерно схожи и есть о чем подискутировать)
  • 0
    Для меня вектор тоже более удобен при создании сайтов и интерфейсов. И особо удобен при верстке — верстка из PSD у меня занимает на 20-30% больше времени из-за слоев, которые не объекты.
    Только, в моем случае, вектор это не AI, а Xara. Спасибо за статью — узнал несколько полезных вещей.
  • 0
    А могут ли артборды в иллюстраторе быть разных размеров?
    Ведь у всех веб-страниц разная высота.
    • 0
      Конечно могут, сам задаешь размер.
      • 0
        Ага, все верно. Вот тут хорошо видно разные артборды: www.flickr.com/photos/kortunov/7266950404/
      • 0
        Да, спасибо, раньше была необходимость только в одинаковых, поэтому задавал размер при создании файла. Сейчас посмотрел, оказывается для них и отдельный инструмент есть =)
    • 0
      Могут.
  • 0
    Я уже не в первый раз удивляюсь выгнутым теням от листочков на ваших слайдах.

    www.flickr.com/photos/kortunov/7266949910/ — вот тут особенно, попытка понять форму плоскости на которой лежат бумажки взрывает мозг.
    • 0
      Не берите в голову, это стандартное оформление картинок в Keynote, который использовался для создания презентации. Вероятно, они этим хотели сказать, что картинка как-бы чуть-чуть согнута.
      • 0
        То есть это к Эпплу? Тогда извините.
  • +1
    В плюсы Иллюстратора можно добавить наличие 9-сегментного масштабирования (кажется это из Файрворкса перешло).
    Символ делится на девять частей с наложением, напоминающим сетку. Каждая из этих девяти областей масштабируется независимо от остальных. Для поддержания визуальной целостности символа углы не масштабируются, в то время как остальные области изображения увеличиваются или уменьшаются (в противоположность растягиванию) по мере необходимости.
  • 0
    Я хоть к дизайну имею крайне мало отношения, но хочу отметить, что было бы ещё офигенно, если бы, рассказывая про иконки и показывая их, вы крепили бы картинки в PNG, на этот же jpg всматриваться противно. Сразу невольно думаешь: это у тебя проблема со зрением, или автор опять выложил картинки в жпг?.. А статья хорошая. Спасибо.
  • 0
    Давайте я тоже напишу.

    Мне кажется, что люди, которые рисуют сайты на основе фотоманипуляций и рисунка кистью, должны делать их в Фотошопе — ну кто в здравом уме будет сшивать текстуры, как на «самом глубоком сайте», в Иллюстраторе? Кто же ориентируется на векторные объекты, тем удобнее будет оставаться в векторном редакторе.

    Вот, собственно, у меня на этом мысль и закончилась, всем спасибо.: )
  • 0
    Неоспоримый плюс вектора в том, что он остаются редактируемым на протяжении всего проекта. Вставляете .ai файл в индизайн, при необходимости вносите правки — и он динамически обновляется.
    Спасибо вам за популяризацию иллюстратора, приучайте людей к хорошему, поскольку этот гребаный Корел просто выводит из себя.
    • 0
      Можете сказать чем вам Корел не угодил (кроме верстания в нём сайтов, он не для этого).
      • +1
        Корел очень плохо интегрируется со всей адобовской линейкой. Файл иллюстратора можно вставить в любую другую адобовскую программу (фотошоп, афтеры, премьер, индиз), и он будет висеть так как ссылка с возможностью правки оригинала.

        Корел мне кажется не логичным. В нем намеренно спрятаны фичи, которые могут вызвать умственный напряг у пользователя. Например, в кореле практически никто не пользуется слоями, вместо этого используя вложенные группы.

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

        Большинство пользователей (и сам корел) не знают, что такое оверпринт. Иллюстратор определяет его автоматом. Я, наоборот, не понимал проблему оверпринта, пока не столкнулся с корелом.

        В кореле ужасная тень, построенная на векторных алгоритмах, а в иллюстраторе — мягкая, растровая.

        Поскольку порог входа в корел крайне низок, многие все корел-дизайнеры наплевательски относятся к правилам и нормам верстки. Получив корел-файл, я почти наверняка уверен, что шрифты будут не в контурах, а файлов шрифтов нет; и что надо будет проверить все черные объекты на состав цвета и оверпринт.
        • 0
          Ну на то она и «линейка», что все программы интегрированы. В принципе Корел сохраняет файлы в *.ai, *.pdf и *.eps вполне сносно, что их можно открывать адобовскими программами.

          Насчёт слоев: когда есть работа с объектами и группами, слои вообще очень редко нужны. Даже в Иллюстраторе можно без них обходиться.

          Что вы подразумеваете под «сложным» чёрным? Составной цвет (не 0/0/0/100)? Разве это не проблема того, кто делал? Я знаю что Корел отображает чистый чёрный цвет светлее, чем составной. Не знаю почему. С версии Х4 в настройках цвета можно поставить галочку Rich Black, тогда отображаться будет одинаково.

          Про оверпринт знаю, что есть какие-то галочки при сохранении. Но есть еще момент — ни в одной типографии в требованиях вообще не рассказывается, что это и как можно все правильно сохранить (ведь можно).

          Да, согласен с эффектами в Кореле туго.

          Вы знаете, я знаю и людей работающих в фотошопе, которые не знают правил верстки. Думаю это зависит от человека. Вот всякие типографские штуки, типа лигатур, появились только в Кореле Х6.

          Про отсутствие шрифтов, опять же, в Кореле есть даже опция собрать все файлы макета в одну папку (как в индизайне), но мало кто ей пользуется, потому-то не знают, а просвещать их никто не хочет. Хотя во всех типографиях, пишут что надо «кривить» текст (некоторые даже пишут как)
          • 0
            Насчёт тени, никто не мешает её растрировать в нужном размере одной кнопкой.
        • +1
          Макеты для печати, выполненные в кореле, часто имеют сложный черный цвет


          Это потому, что говнодизайнеры, привыкшие херачить баннеры в шопе вообще не знают различий между RGB & CMYK и делают RGB Black, который конвертитсяв CMYK в соответствии с настройками цветоделения. В Шопе кстати так же.

          Большинство пользователей (и сам корел) не знают, что такое оверпринт. Иллюстратор определяет его автоматом. Я, наоборот, не понимал проблему оверпринта, пока не столкнулся с корелом.


          image

          Если леливо смотреть в нижних правый угол, где у overprint объекта на заливке стоит значек оверпринта, можно и нужно включить опцию Simulate OverPrints в меню View.
  • +1
    пример хорошо оформленной статьи
    читал с удовольствием
  • 0
    Есть и глупые вещи, которые раздражают и переодически заставляют делать проекты в PS:
    — Если забыть включить привязку к пикселям при создании документа, потом не включить
    — Вставленные из буфера обмена объекты (с другой точной опоры) при повторном открытии файла съезжают с места на сотые доли пикселя
    — Тяжело работать с тектурами
    — Переодические падения, особенно при работе со шрифтами, когда большие объемы текста
    — Негибкие эффекты теней

    Самая прогрессивные вещи в AI — артборды и стили
    • +1
      Попробуйте файрворкс. Там этих недостатков нет. Векторные инструменты тоже хороши.
    • 0
      Стили теперь есть и в фотошопе. Аналог символов — смарт объект из группы. Артборды — да, любопытно, но не такой уж регулярно нужный инструмент. Можно и без него вполне обойтись. все остальное — есть в фотошопе практически в полном объеме, и даже удобнее и проще.
      • 0
        На сколько я помню там есть страницы это не тоже самое что артборды?
    • 0
      Попробуйте Corel Draw. Изначально продукт создавался как чертежный и проблем со съехавшими пиксилами с роду не было. Честно говоря, когда последний раз пробовал AI, то лишний раз удостоверился, что Adobe в векторе не силен. И по вашему комментарию вижу, что ничего не изменилось.
      • 0
        под мак, если не ошибаюсь, последняя версия CD 9 была… и в нем нет pixel preview, для интерфейсов незаменимо
  • +1
    Хорошая статья, грамотная…
    И на вектора так или иначе надо переходить, только совсем погружаться в иллюстратор — несколько не айс. Причин тут три: плохие возможности по работе с фотографиями, чудовищные сложности (по сравнению с фотошопом) по созданию и редактированию масок и не самый удобный инструментарий (те же апиарансы — скорее, костыли, чем нормальная логическая структура работы над объектом).
    В связи с выходом CS6 вообще довольно сомнительным становится создание сайтов в иллюстраторе. Вполне все то же самое можно делать и в привычном фотошопе. Артборды при желании можно заменить лэйеркомпами или последовательно включаемыми группами слоев (согласен, что альтернатива весьма условная, но в ряде случаев вполне годится). Вся основная векторная инструменталистика давно затащена в фотошоп, и там не составляет труда держать практически все в шейпах (или сделать сложный шейп можно в иллюстраторе и втащить в фотошоп или затянуть его как смарт-объект). В фотошопе CS6 теперь у шейпов может быть настраиваемая обводка — не столь круто, как в иллюстраторе, но вполне мощная. А если использовать эту функцию и добавлять еще и обводку из эффектов — можно и вовсе получить любой желаемый вариант. В панели Properties можно задать растушевку шейпу — что также добавляет потрясающих возможностей. Ну и панели Paragraph Styles и Character Styles в обновленном фотошопе ничуть не хуже иллюстраторовских.
    Иными словами, если для CS5 использование иллюстратора как замену фотошопу еще как-то можно было рассматривать, то в случае CS6 эт оуже не кажется столь привлекательным. Поскольку пошустревший, потемневший, поудобневший и помощневший фотошоп — отличная машина для создания сайтов. С привычным и вполне удобным инструментарием. Без костылей.
  • +2
    Один раз послушался таких советов, и решил нарисовать один проект в Индизайне.

    В итоге завалил все мыслимые сроки, сделал всё в два раза хуже чем от меня ожидали, верстальщик меня проклял, в итоге пришлось уволиться с работы, дальше ушла жена, умер кот, впредь советую относиться к таким мануалам с осторожностью.
  • –2
    а как делать crop из иллюстратора? Вы хоть раз верстали вообще макеты?
    • 0
      В иллюстраторе есть Crop Mask.
  • 0
    Ежедневно пользуюсь иллюстратором, но ненавижу перо и карандаш. Блин, насколько эти инстурменты просто отстали от жизни. Плагины помогают, но не совсем. Например если зажать shift то линия не станет прямой. Все добавляют какие-то хрени не нужные, а простейшие инструменты не могут улучшить…

    Из плюсов иллюстратора это поддержка dwg. Ну и теперь он 64 бита…
  • 0
    Заочно ненавижу макеты отрисованные в илюстраторе, благо ещё не приходилось верстать HTML из таких макетов, вообще не представляю что за ад будет. Если когда нибудь принесут такой и скажут сверстай, отправлю переделывать в PSD или PNG или пошлю лесом.
    • 0
      Любой ai-файл растрируется в фотошопе на ура.
      • 0
        кроме того, можно AI-файл сохранить в формат PSD — тогда еще и некоторая разбивка по слоям будет присутствовать…
        • 0
          Ага видели мы вашу разбивку, верстали…
      • 0
        На ура это когда на самом деле режим наложения у слоя мультиплай, а в шопе показывает нормал?
  • +1
    Еще в люстре очень удобный эффект Transform.
    Например таблицы и списки делать удобно.


    Ну и если кнопка не в один слой, то создание символа с 9-Slice Scaling удобно.

    Сам люстру использую в основном для прототипирования. Экономит кучу времени.
    • 0
      Да, есть такая фича. Я раньше трансформом тоже много чего делал. Но потом перестал. Так как неудобно редактировать.
      • 0
        А еще вопрос: в Illustrator нет Inner Shadow (Inner Glow это не то). Как вы делаете внутреннюю падающую тень? Например светлый однопиксельный блик на кнопке. Или внутреннюю тень со смещением в инпуте.
        • 0
          Если однопиксельная тень, то трансформом, если мягкая тень то физером
  • 0
    Насчет элементов которые встречается на нескольких экранах (в фотошопе файлах) есть статья о переменных в фотошопе. И там же есть комментарий в котором описана утилита которая в этом поможет.
  • +1
    Особенность в том, что экраны небольшие, но их очень много. А теперь представьте, что это были бы PSD-файл и вам нужно было бы исправить какую-то кнопку, которая встречается на нескольких экранах. Пришлось бы открывать много файлов и следить за версиями.

    Не могу пройти мимо этого утверждения, показывающего ваше слабое знание фотошопа, хоть вы и работаете дизайнером 10 лет. В фотошопе есть два мощных инструмента: Layer Compositions и Templates.

    Layer Comps — это замена артбордам в иллюстраторе. Один layer comp — это заданное состояние видимости всех слоёв в документе. Чтобы проиллюстрировать, как выглядит один и тот же экран в разных состояниях, достаточно сделать видимыми нужные слои, отключить лишние, и сохранить получившееся состояние как layer comp, назвав его подходящим именем (скажем, photogallery_add_photo__step_2). Чтобы другой человек мог посмотреть каждый экран вашего многоэкранного интерфейса, достаточно передать ему PSD–файл, в котором слои грамотно разбиты на layer comps.

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

    Я ни в коем случае не осуждаю ваш векторный подход и соглашаюсь с некоторыми преимуществами рисования сайтов в AI (сам я пробовал и PS, и AI, а разок даже в индизе промо-сайт собрал), но фактические ошибки в описании инструментов обязательно нужно устранять.

    Этот топик будет неполон без ссылки на photoshopetiquette.com/, проливающей свет на многие важные тонкости использования фотошопа, о которых не знают даже некоторые опытные дизайнеры с метким глазом и прекрасным портфолио.
  • 0
    Если вы будете рисовать интерфейс в Photoshop векторными шейпами, то никакой пикселизации при увеличении не будет.
    А Illustrator не очень удобный инструмент для UI.
  • 0
    Работаю в Photoshop CS2…
    Давно хочу переехать на Ai. Такой вопрос: помогут ли знания рисования векторных иконок в фотошопе?

    P.S. Заранее извиняюсь за, может быть, глупый вопрос :)
  • 0
    А что за приложение такое красивое вы разрабатываете (первый скрин, «Все экраны веб-интерфейса в одном файле»)? Оно еще не выпущено? Можно ссылочку, если вышло?
    Спасибо!
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Всё это, конечно, круто, но мы просто-напросто охренеем это верстать.
    • 0
      Мне кажется, верстать из вектора даже проще, чем из растра. Немного привычки и дело пойдет. А уж если брать в расчет верстку для экранов повышенной четкости и всяие css- и векторные штуки, то макет в векторе — подарок любому верстальщику.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          А если он прав?

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

Самое читаемое Разное