Комментарии 155
Как по мне то рисовать интерфейсы надо в Fireworks, рисовать иллюстрации в Illustrator, а фотки в фотошопе.
И никогда — слышите, ни-ког-да не забивать гвозди микроскопом?
согласен. индизайн надо рисовать в индизайнере а автерэффектсы — в афтерэффектсе!
А у вас есть опыт рисования интерфейса в Fireworks? Я пытался попробовать последний Fireworks, но это реально какой-то тихий ужас. Мне кажется со времен macromedia в нем меняют только название. Например настройка надписей или антиалязинг просто ужасные и не сравнимы другими продуктами линейки CS6.
Согласен с вами. И макет резать не удобно когда несколько страниц
Несколько видов сглаживания и набор остальных необходимых настроек, в чём ужас?
Возможно, со шрифтами не все окей. В своих проектах ничего особо критичного в этом плане не проявлялось. А вот интерфейс и функционал у Fireworks весьма приличный. В Illustrator'е чувствую себя очень неуютно. Пробовал перейти, когда закупали Adobe Design Standart. В итоге — докупил и Fireworks, в нем и работаю в основном.
Не кидайте камень в огород Fireworks, так вот надо сказать спасибо Adobe, что она не зарубила один из лучших проектов Macromedia, как сделала это с Freehand. Работа с векторами в Fireworks самая лучшая — вроде рисуешь вектор, а сразу видишь растр. Кто не разобрался с альясингом: выбирайте объект и нажимайте Ctrl+K, и увидите как он расставляет точки точно по узлам пиксельной решетки.
Альясинг текста есть более точный (Custom).
Опять же CSS теперь автоматом можно получить, с округлостями, тенюшками, градиентами и прочей тряхомудией.
Альясинг текста есть более точный (Custom).
Опять же CSS теперь автоматом можно получить, с округлостями, тенюшками, градиентами и прочей тряхомудией.
На вкус и цвет…
Я Вам могу заявить тоже самое, но про про Фотошоп. Для меня рисовать сайты в Фотошопе — просто нелепость! Да и зачем? Когда есть НАМНОГО более удобный инструмент именно для этой задачи — Fireworks!
Я Вам могу заявить тоже самое, но про про Фотошоп. Для меня рисовать сайты в Фотошопе — просто нелепость! Да и зачем? Когда есть НАМНОГО более удобный инструмент именно для этой задачи — Fireworks!
Так говорят все, пока дело не доходит до серьезной крупной работы. Он sic! коряво отображает то что создаётся, я уж не говорю про тормоза при больших объемах текста и очень неряшливые контуры и тени
Мне повезло научиться векторной графике раньше, чем растровой. Поэтому людей, которые во что бы то ни стало все делают в фотошопе, я не понимаю. Особенно дики люди, которые верстают в фотошопе _журналы_ на диплом…
Вот сами и верстайте потом своё AI
Я думаю многие сталкивались с забавной ситуацией, когда макет сайта присылали в кореле О_О
НЛО прилетело и опубликовало эту надпись здесь
Макет сайта — куда ни шло. В картинку-то оно умеет экспортировать. Я вот лет 10 назад работал в допечатке, там нужен вектор, а корел (по крайней мере тогда) не умел нормально eps экспортировать. Все эти тени и прочие гей-эффекты отлетали. И с CMYK проблемы были, насколько я помню.
Ну и присылали нам модули рекламные в кореле. Сначала мы перерисовывали в AI. А потом забили и тупо RGB-картинку вставлять начали. Шрифты размыты в нафиг, цвета отъехали? Ну извините, у вас корел.
Ну и присылали нам модули рекламные в кореле. Сначала мы перерисовывали в AI. А потом забили и тупо RGB-картинку вставлять начали. Шрифты размыты в нафиг, цвета отъехали? Ну извините, у вас корел.
10 лет назад было много проблем… потому и пошли требования к макетам перед отправкой в типографию. Не понимаю я почему шрифты мылятся в растре ( достаточного разрешения ), если в любом случае машина работает по координатам с файла. А координаты — теже пиксели.
Растровые шрифты в полиграфии мылятся по следующей причине:
Чтобы вывести растр, фотонабору (принтеру который печатает картинку на пленку) надо рисовать кружочки разного размера. Разрешение кружочков называется линиатурой и составляет примерно от 70lpi для газет до 150lpi для журналов.
Максимальный LPI зависит от бумаги — на газетной бумаге краска расплывается кляксой, маленький кружочек сделать нельзя.
Разрешение самого фотонабора — что-то порядка 8000dpi. И вектор весь, включая шрифты, рисуется именно с таким разрешением.
Это все прекрасно видно невооруженным глазом если открыть любую газету.
В вебе такой проблемы нет — там везде все равно на выходе RGB-растр.
Чтобы вывести растр, фотонабору (принтеру который печатает картинку на пленку) надо рисовать кружочки разного размера. Разрешение кружочков называется линиатурой и составляет примерно от 70lpi для газет до 150lpi для журналов.
Максимальный LPI зависит от бумаги — на газетной бумаге краска расплывается кляксой, маленький кружочек сделать нельзя.
Разрешение самого фотонабора — что-то порядка 8000dpi. И вектор весь, включая шрифты, рисуется именно с таким разрешением.
Это все прекрасно видно невооруженным глазом если открыть любую газету.
В вебе такой проблемы нет — там везде все равно на выходе RGB-растр.
Получается если макет растра принесли бы вам в 8000dpi то не будет мыла у шрифтов?
Ну если в картинке растр прям кружочками уже — то наверное да. Картинка нужна при этом с однобитным цветом. Фотонабор ведь не делает полутона — печатная машина не умеет сделать 50% цвета в каком-либо месте.
Но я не знаю можно ли так.
Просто полутоновая картинка с большим разрешением не решит проблему — надо будет все равно понижать разрешение и рисовать растр.
Короче проблема в том, что нужно отделять области где растр и где шрифт — они рисуются по-разному.
Там технология вообще много тонкостей диктует. Например у тебя черный текст поверх картинки. Текст будет на одной черной плашке векторный, а картинка будет снизу растровая. Тексту ставят «оверпринт», и через это в других цветах под текст дырки не будет. Черный цвет, в отличии от cyan/magenta/yellow, непрозрачный и закроет картинку. Если же в картинке резать дырки, то малейшее несовпадение цветов оставит белые дырки вокруг текста. А несовпадения («броски») всегда случаются, печатная машина — она механическая и имеет свои погрешности.
Короче бывает что области вектора и растра разные для разных цветов.
В общем в допечатке все сильно хитрее чем в вебе. И растр там юзают только где он нужен.
Но я не знаю можно ли так.
Просто полутоновая картинка с большим разрешением не решит проблему — надо будет все равно понижать разрешение и рисовать растр.
Короче проблема в том, что нужно отделять области где растр и где шрифт — они рисуются по-разному.
Там технология вообще много тонкостей диктует. Например у тебя черный текст поверх картинки. Текст будет на одной черной плашке векторный, а картинка будет снизу растровая. Тексту ставят «оверпринт», и через это в других цветах под текст дырки не будет. Черный цвет, в отличии от cyan/magenta/yellow, непрозрачный и закроет картинку. Если же в картинке резать дырки, то малейшее несовпадение цветов оставит белые дырки вокруг текста. А несовпадения («броски») всегда случаются, печатная машина — она механическая и имеет свои погрешности.
Короче бывает что области вектора и растра разные для разных цветов.
В общем в допечатке все сильно хитрее чем в вебе. И растр там юзают только где он нужен.
Разрешение самого фотонабора — что-то порядка 8000dpi. И вектор весь, включая шрифты, рисуется именно с таким разрешением.
Вы не поверите, обычно разрешение фотонаборных аппаратов привязано к неким историческим «стандартам» типа 300 dpi, и 10 лет назад стандартным разрешением фотонаборов было 2400 dpi. 3600 использовалось для стохастических или иррациональных растров.
Опять же, 10 лет назад уже появились приличные газетные бумаги, спокойно вытягивающие 100 lpi, журналы же и прочую цветную фигню уже тогда на 175 lpi печатали
Вы были в неправльной допечатке :-) Те, кому приходилось работать в Corel'е 10 лет назад, находили версию 9 Heidelberg Color Edition, в которой хейдель прикрутил свою систему управления цветом и все было с CMYK более чем хорошо. Да и мозг при создании макета в Corel нужно было всегда (насчет теней и гей эффектов). Как и в Иллюстраторе впрочем. Примерно к 12 версии корел таки глобально исправил eps экспортер (ну и PDF заодно). И в настоящее время экспортит в eps/pdf все шоколадно, включая mesh-fills, которые открываются иллюстратором как родные.
P.S> не ради холи вара — ИМХО Corel Draw прекрасный инструмент для быстрой, очень быстрой разработки или правки макета в условиях недостатка времени именно пре-прессерами, а не дизайнерами. Связано конечно это с более инженерным складом ума тех самых пре-прессеров. И Corel имеет в этом смысле более техический подход ко всему внутри себя.
P.S> не ради холи вара — ИМХО Corel Draw прекрасный инструмент для быстрой, очень быстрой разработки или правки макета в условиях недостатка времени именно пре-прессерами, а не дизайнерами. Связано конечно это с более инженерным складом ума тех самых пре-прессеров. И Corel имеет в этом смысле более техический подход ко всему внутри себя.
Самое ужасное — это растровый логотип в кореле.
Был на вашем докладе. Как раз тогда подумал, что презентация в духе хабра сделана.
Отличная, откровенная статья. Уже года три как знаю, что некоторые дизайнеры неплохо делают макеты в AI, но сам им пользоваться боюсь/не хочу/не умею/не хочу страдать. А после такой подробной статьи теперь я выделю время на то, чтобы познать азы, почитать литературу и в целом повысить свой скилл в веб-дизайне. Спасибо.
Вот чего чего, а такого вот извращения я не понимаю, как бы не старался.
Все это похоже на оправдание почему пришлось все это делать в AI если все можно было сделать в PSD БЕЗ МИНУСОВ.
Вероятно, вы видите только то, что сами хотите увидеть. Я думал, что вступление к статье про более чем 10 летний опыт рисования в фотошопе намекнет читателям, что иллюстратор — переход на новый уровень.
Да, я знаю, что это все можно сделать в фотошопе. Но делаю в иллюстраторе. И раскрываю причины.
Да, я знаю, что это все можно сделать в фотошопе. Но делаю в иллюстраторе. И раскрываю причины.
Это не переход на новый уровень, а переход в иную плоскость. Вектора — не панацея.
а можно вопрос?
как вы наводите порядок в панельке слоев и наводите ли вообще? просто когда артбордов много и все объекты в одном слое находятся, то найти что-то бывает довольно сложно. а уж манипуляции вроде «Object → Arrange → Send to Back» и вовсе пугают глубиной этого самого Back…
я попробовал справиться с этим путем группировки объектов в пределах артборда и последующей работе в isolation mode. но вдруг есть какой-то более другой и более удобный способ?
как вы наводите порядок в панельке слоев и наводите ли вообще? просто когда артбордов много и все объекты в одном слое находятся, то найти что-то бывает довольно сложно. а уж манипуляции вроде «Object → Arrange → Send to Back» и вовсе пугают глубиной этого самого Back…
я попробовал справиться с этим путем группировки объектов в пределах артборда и последующей работе в isolation mode. но вдруг есть какой-то более другой и более удобный способ?
А я не вижу никакой разницы.
Хочешь рисовать в Одоб Элюстро сайты? Да пожалуйста.
Хочешь рисовать кнопки в Фотошопе? Никаких проблем.
Нравится Индизайн? Ок, фигач.
Файерворкс? Класс, расскажешь потом — как оно и какие есть фичи.
Хочешь рисовать в Одоб Элюстро сайты? Да пожалуйста.
Хочешь рисовать кнопки в Фотошопе? Никаких проблем.
Нравится Индизайн? Ок, фигач.
Файерворкс? Класс, расскажешь потом — как оно и какие есть фичи.
Я лет 10 назад занимался версткой, правда в полиграфии. Для меня дико слышать что людей надо вот так вот убеждать пересесть на AI с фотошопа. Реально что ли это все — кнопочки эти выпуклые и стрелочки — рисуют сейчас в фотошопе в основном?
НЛО прилетело и опубликовало эту надпись здесь
Вы написали, что при сохранении в .PSD
Если честно, не помню такого. Но чтобы наверняка, можно сохранять в PNG прямо из Иллюстратора.
Если честно, не помню такого. Но чтобы наверняка, можно сохранять в PNG прямо из Иллюстратора.
Кстати в AI есть очень нужная галочка «pixel preview». Показывает как оно в растре будет выглядеть.
Плюс еще вопросик: чтобы квадратик с рамкой в 1px встал ровно по пикселям, мне приходилось делать ему нечетную ширину и добавлять полпикселя к координатам. Можно это как-то проще сделать?
Плюс еще вопросик: чтобы квадратик с рамкой в 1px встал ровно по пикселям, мне приходилось делать ему нечетную ширину и добавлять полпикселя к координатам. Можно это как-то проще сделать?
Я вот сам программист, сам себе верстальщик и иногда рисовальщик. И что меня бесит что в AI, что в фотошопе — так это save for web этот. Конкретно то, что когда рисуешь один квадратик — он лепит еще кучу вокруг (ну, чтобы типа покрыть всю поверхность). Почему было нельзя разрешить просто налепить квадратных областей как угодно? Может этот искусственный интеллект как-то можно вырубить?
можно выбрать нужные квадратики и указать save selected
Не хочется выбирать каждый раз. Я делаю правки, сохраняю, и сразу смотрю в браузере. Эти лишние квадратики отключаются в диалоге «save for web», и он это запоминает. Но вот эта вся мишура поверх все равно рисуется и раздражает.
Какие вы правки там делаете по 10 раз пересохраняя?) Вообщем то сейчас резать то на блоки ничего не нужно. Чего вы там по таблицам распихиваете какие блоки для резины?)
Много спорных аргументов, вообщем такую же статью можно и про фотошоп, тут чисто дело привычки и кому как удобнее.
Вот вы такой большой, серьёзный, пост написали, все дела, а картинки с тектосм: farm8.staticflickr.com/7218/7266949626_61b1e78bc0_c.jpg в JPG с ореолом вокруг букв сохранили.
Есть предположения почему так получилось?
Подсказка: оригинал слайда, залитый на flickr — www.flickr.com/photos/kortunov/7266949626/sizes/o/in/set-72157629889106666/
Подсказка: оригинал слайда, залитый на flickr — www.flickr.com/photos/kortunov/7266949626/sizes/o/in/set-72157629889106666/
Это фликр, если вставите сюда оригинал на 1000px, я думаю будет ок.
может лучше перезалить картинки на habrastorage.org?
Решение вам предложили ниже, и решение на 101% рабочее: habrastorage.org/
связано с оптимизацией картинки. Обычно во время ужатия такое можно наблюдать, когда качество выставлено не на максимум.
Это не автор сделал, а сам фликр (который по хорошему не для иллюстраций совсем) при ресайзе.
Недавно перешли на вектор для разработки игр, не знаем бед. Сначало делаем болванки в 3D, потом обрисовываем в люстре. Вышел iPad 3 с ретина дисплеем, портирование заняло 4 часа, и это вместе со склейкой новых спрайтов и правок в коде.
Кнопочки в фотошопе чаще всего делают шейпами со всякими эффектами. Изменить размер — совсем не проблема. Делать верстку в иллюстраторе — тоже сомнительная идея. Специально для этого же индизайн, вроде. Так и не понял, в чем преимущество иллюстратора.
Полностью согласен. Я с самого начала учился работать именно так. Теперь практически любой мой макет — это куча шейпов с примененными стилями. Фотошоп свежих версий замечательно работает с вектором, а растр использую в основном для теней извращенной формы и фото.
Верстку многостраничного текста — однозначно делать в индизайне. Разложить для веба картинки и обозначить где будет текст (он же все равно будет в html) — отлично делается в иллюстраторе.
А как вы обошли проблему с шрифтами? Я не пробовал делать сайты в AI, но когда печатку делаю жутко раздражает как отображаются шрифты в масштабе меньше 100%.
Хотя когда сайт или уи, то и масштаб не нужно менять…
Хотя когда сайт или уи, то и масштаб не нужно менять…
Честно говоря, никакой проблемы со шрифтами мы не испытали. Работают также, как в фотошопе.
Насколько я помню, иллюстратор рисует шрифты без хинтинга, просто как вектор. Он же для допечатки придуман, в допечатке хинтинг не нужен, а вот видеть все максимально близко к результату — нужно. Через это шрифты и в 100% смотрятся не айс. Но их же не в картинку в результате вставлять — в печати все будет ок, и в html все будет как браузер нарисует.
я решил проблемы ручной сменой рендеринга, ставлю на strong или crisp
1) Считаю абсолютно не верным рисовать в Иллюстраторе полноцветную графику. Вектор — это ограничение по определению. Дальше инструментов илла вы никуда не уедите, все что там есть это формы и прозрачные градиенты. Тени псевдовекторные — экспортируемые только через растр. А дальше у кого какого умения хватит что-то из этого сообразить. Да, кого это устраивает нет проблем. Но по мне пример с калькулятором жжжжуткий геморрой, который в шопе отрисовывается на ура без каких то ограничений, построений. Причем калькулятор есть куда точить, он не законченный. Тени от листков не натуральны. В шопе этого добиться можно очень просто — 30 секунд с сохраненим файла.
Попробуйте добавить эффектов каустики на экран, отобразите на нем отражение клавиатурки, Опа!, а вот это проблемка для Илла. Чем сложнее вектор, тем меньше контроля над ним. Тем больше тормозов.
2) Многостраничный документ. Упаси боже!) Сколько он весит? сколько илл его рендерит на среднем компе верстальщика? Верстальщик разберется в экспорте форм в сложнейшей иерархии векторных объектов?
Какой его уровень должен быть?
Артборды? А чем плохи PSD в папке открытые через Bridge?
3) В растре руки полностью развязаны. Здесь тебе и сложные тени, и сложные блики, и те же векторные формы если так приспичит. И куча фильтров и кистей и текстур. Рисуй, здесь все от рук. Ограничений нет.
4) По поводу Retina Display — ваш пример построен на css, неверно его приводить как преимущество векторного интерфейса. Вектор в вебе очень плохо приживается. Не говорю уже что сложные иконки дадут огромную нагрузку на браузер. ДА и где там вектор… SVG? Опять ограничения?
5) считаю не верным экономию времени по отрисовке элементов в илле. Это не так. В илле вы запросто упретесь в миллион созданных вами слоев, и начнете думать об оптимизации этого объекта. Нельзя там взять и слить слои.
Так что простота и скорость работы — это результат ограничения векторной среды в принципе, из которой что-то не минималистское и не одноцветное выбить ой как не просто!
6) Стили текста появились в CS6 Фотошопе тоже. Была бы там кнопка у этого списка «экспорт в css» цены бы не было.
7) Хранить макеты PDF? Да вы че… А не потеряется ли способность к редактированию в дальнейшем? Или же там такой примитив, что не требует привязки к стандартному родному формату AI?
PDF создан для того, чтобы придя к соседу, при печати не поехал заголовок.
Я не злой, просто удивленный, кажется что недостатков несоизмеримо больше.
Попробуйте добавить эффектов каустики на экран, отобразите на нем отражение клавиатурки, Опа!, а вот это проблемка для Илла. Чем сложнее вектор, тем меньше контроля над ним. Тем больше тормозов.
2) Многостраничный документ. Упаси боже!) Сколько он весит? сколько илл его рендерит на среднем компе верстальщика? Верстальщик разберется в экспорте форм в сложнейшей иерархии векторных объектов?
Какой его уровень должен быть?
Артборды? А чем плохи PSD в папке открытые через Bridge?
3) В растре руки полностью развязаны. Здесь тебе и сложные тени, и сложные блики, и те же векторные формы если так приспичит. И куча фильтров и кистей и текстур. Рисуй, здесь все от рук. Ограничений нет.
4) По поводу Retina Display — ваш пример построен на css, неверно его приводить как преимущество векторного интерфейса. Вектор в вебе очень плохо приживается. Не говорю уже что сложные иконки дадут огромную нагрузку на браузер. ДА и где там вектор… SVG? Опять ограничения?
5) считаю не верным экономию времени по отрисовке элементов в илле. Это не так. В илле вы запросто упретесь в миллион созданных вами слоев, и начнете думать об оптимизации этого объекта. Нельзя там взять и слить слои.
Так что простота и скорость работы — это результат ограничения векторной среды в принципе, из которой что-то не минималистское и не одноцветное выбить ой как не просто!
6) Стили текста появились в CS6 Фотошопе тоже. Была бы там кнопка у этого списка «экспорт в css» цены бы не было.
7) Хранить макеты PDF? Да вы че… А не потеряется ли способность к редактированию в дальнейшем? Или же там такой примитив, что не требует привязки к стандартному родному формату AI?
PDF создан для того, чтобы придя к соседу, при печати не поехал заголовок.
Я не злой, просто удивленный, кажется что недостатков несоизмеримо больше.
Чего одни layer styles в фотошопе стоят)
PDF — это давно родной внутренний формат AI, как раньше им был EPS
Артборды? А чем плохи PSD в папке открытые через Bridge?
А можете рассказать по подробнее, никогда Бриджем не пользовался.
Кстати, насчёт п.5 — можно группировать объекты, по сути то же слияние слоёв, только из разгруппировать можно.
А в целом согласен с вами и вообще пока браузеры не будут рендерить вектор, как в люстре, всё будет коряво выглядеть (видно очень резкие лесенки на непрямых объектах)
Из за того что в windows очень плохо с превьюшками файлов различных форматов, adobe подсуетился и сделал adobe bridge — довольно ресурсоемкий файловый менеджер, тот же проводник но от адобчика.
Тот что внизу — mini bridge. Довольно удобно, не нужно пользоваться диалогом open или перетаскивать файлы из проводника. По сути если ты в папке с проектом то это почти артбоард, у которого проблема в том, что если много этих бордов, то файл становится тяжеловесный для подправки какой нибудь мелочи в дальнейшем.
Версия фотошопа CS6. Я уже с парой серьезных багов встретился.
1) не очищаются с экрана линии трасформации при работе со слоями
2) не работает trim для нерастрированного текста. Тупо его не видет и режет полотно по другим пикселям.
3) Глюки со шрифтами. Пробел часто не работает. Часто ставит индикатор набора текста в начале блока а не там куда мышкой ткнул.
Сыроват он…
Тот что внизу — mini bridge. Довольно удобно, не нужно пользоваться диалогом open или перетаскивать файлы из проводника. По сути если ты в папке с проектом то это почти артбоард, у которого проблема в том, что если много этих бордов, то файл становится тяжеловесный для подправки какой нибудь мелочи в дальнейшем.
Версия фотошопа CS6. Я уже с парой серьезных багов встретился.
1) не очищаются с экрана линии трасформации при работе со слоями
2) не работает trim для нерастрированного текста. Тупо его не видет и режет полотно по другим пикселям.
3) Глюки со шрифтами. Пробел часто не работает. Часто ставит индикатор набора текста в начале блока а не там куда мышкой ткнул.
Сыроват он…
Сетка какая интересная :)
Да действительно «тяжёлая» штука Бридж, вообще не привычно пользоваться, а для превью PSD есть в сети несколько библиотек, например, вот.
Тоже пользуюсь CS6, вроде пока не сталкивался с такими багами, но всё допилят думаю через пару апдейтов.
Тоже пользуюсь CS6, вроде пока не сталкивался с такими багами, но всё допилят думаю через пару апдейтов.
А по скорости проблем не заметили? Я вот переплевался на больших файлах, субъективно раза в три медленнее. К примеру, перетаскивание папки слоев какого-нибудь блока в макете.
Друзья! Не путайте пожалуйста работу с вектором в редакторе и вектор в браузере!
Недостатков много, но и достоинств тоже богато. Я бы особо выделил недеструктивное редактирование. Да — в фотошопе тоже можно что-то подвинуть и поправить, но не всегда и не везде.
Не стоит также недооценивать инструменты векторных редакторов. Какой-нибудь mesh gradient позволяет делать весьма сложные штуки. Типа вот: th01.deviantart.net/fs8/PRE/i/2005/361/2/9/Steps_Angel_by_I_evermind.jpg
А уж тень-то как у тебя на картинке точно можно сделать. Да, в фотошопе ее делать быстрее и прямолинейнее. В AI — вероятно дольше и хитрее, зато один раз и навсегда — делаешь стиль и лепишь потом в один клик.
В общем вектор и растр — разные инструменты, решать вам.
Не стоит также недооценивать инструменты векторных редакторов. Какой-нибудь mesh gradient позволяет делать весьма сложные штуки. Типа вот: th01.deviantart.net/fs8/PRE/i/2005/361/2/9/Steps_Angel_by_I_evermind.jpg
А уж тень-то как у тебя на картинке точно можно сделать. Да, в фотошопе ее делать быстрее и прямолинейнее. В AI — вероятно дольше и хитрее, зато один раз и навсегда — делаешь стиль и лепишь потом в один клик.
В общем вектор и растр — разные инструменты, решать вам.
Отдельное спасибо за «Вы не станете более лучшим дизайнером»
Все взрослые люди должны понимать, что не существует супер-героев. Не бывает единого наилучшего способа или инструмента решения ряда разнообразных задач. Денис просто делится опытом. Для некоторых задач в проектировании UI действительно более практичным будет использование Illustrator. Кому-то, конечно, это покажется бесполезным. Но хотя-бы знать о существовании альтернатив − никому еще не мешало. Никто не собирается отговаривать вас от использования Photoshop, смотрите на мир ширше.
Царь Соломон, перелогиньтесь.
Спасибо за комментарий. Честно говоря, тоже смотрю на другие комментарии и диву даюсь как другие люди не желают помотреть на мир шире. Хотя бы в той области в которую влазят. К сожалению, с этим сталкиваюсь постоянно, но сегодня, видно, день такой — что на работе, то и на Хабре :-)
Вот именно — под каждую задачу свой инструмент. Может кто не знает, но и до 1999 был Web. И на Photoshop 3 приходилось работать, только его портированная версия под Windows жутко нестабильная была и файл в 30М был неподъемным, а Corel справлялся, хотя растр в нем, для меня, править было неудобно. Да, и портирование в Web в Corel раньше, чем в Adobe появилось. А вот вектор в Corel до сих пор делаю. Одно время Adobe на Illustrator совсем забил и в Corel все верстали. Кстати, комбинированные документы, когда в векторе растр вставлен, Adobe до сих пор не научился нормально печатать. Все норовит один цветовой профиль применить ко всему. В Corel — без проблем. И с градиентами в Corel минимум с 6 версии все нормально.
Вот именно — под каждую задачу свой инструмент. Может кто не знает, но и до 1999 был Web. И на Photoshop 3 приходилось работать, только его портированная версия под Windows жутко нестабильная была и файл в 30М был неподъемным, а Corel справлялся, хотя растр в нем, для меня, править было неудобно. Да, и портирование в Web в Corel раньше, чем в Adobe появилось. А вот вектор в Corel до сих пор делаю. Одно время Adobe на Illustrator совсем забил и в Corel все верстали. Кстати, комбинированные документы, когда в векторе растр вставлен, Adobe до сих пор не научился нормально печатать. Все норовит один цветовой профиль применить ко всему. В Corel — без проблем. И с градиентами в Corel минимум с 6 версии все нормально.
Так это вы не хотите шире смотреть на комментарнии) люди если пишут тут, то знают о чем, это не просто «фу мы так не привыкли» это конретные вопросы. Не думайте что кто-то конкретно сидит на разных пакетах и кидаются друг в друга помидорами. Наработки в часах в этих пакетах примерно схожи и есть о чем подискутировать)
Для меня вектор тоже более удобен при создании сайтов и интерфейсов. И особо удобен при верстке — верстка из PSD у меня занимает на 20-30% больше времени из-за слоев, которые не объекты.
Только, в моем случае, вектор это не AI, а Xara. Спасибо за статью — узнал несколько полезных вещей.
Только, в моем случае, вектор это не AI, а Xara. Спасибо за статью — узнал несколько полезных вещей.
А могут ли артборды в иллюстраторе быть разных размеров?
Ведь у всех веб-страниц разная высота.
Ведь у всех веб-страниц разная высота.
Конечно могут, сам задаешь размер.
Ага, все верно. Вот тут хорошо видно разные артборды: www.flickr.com/photos/kortunov/7266950404/
Да, спасибо, раньше была необходимость только в одинаковых, поэтому задавал размер при создании файла. Сейчас посмотрел, оказывается для них и отдельный инструмент есть =)
Могут.
Я уже не в первый раз удивляюсь выгнутым теням от листочков на ваших слайдах.
www.flickr.com/photos/kortunov/7266949910/ — вот тут особенно, попытка понять форму плоскости на которой лежат бумажки взрывает мозг.
www.flickr.com/photos/kortunov/7266949910/ — вот тут особенно, попытка понять форму плоскости на которой лежат бумажки взрывает мозг.
В плюсы Иллюстратора можно добавить наличие 9-сегментного масштабирования (кажется это из Файрворкса перешло).
Символ делится на девять частей с наложением, напоминающим сетку. Каждая из этих девяти областей масштабируется независимо от остальных. Для поддержания визуальной целостности символа углы не масштабируются, в то время как остальные области изображения увеличиваются или уменьшаются (в противоположность растягиванию) по мере необходимости.
НЛО прилетело и опубликовало эту надпись здесь
Давайте я тоже напишу.
Мне кажется, что люди, которые рисуют сайты на основе фотоманипуляций и рисунка кистью, должны делать их в Фотошопе — ну кто в здравом уме будет сшивать текстуры, как на «самом глубоком сайте», в Иллюстраторе? Кто же ориентируется на векторные объекты, тем удобнее будет оставаться в векторном редакторе.
Вот, собственно, у меня на этом мысль и закончилась, всем спасибо.: )
Мне кажется, что люди, которые рисуют сайты на основе фотоманипуляций и рисунка кистью, должны делать их в Фотошопе — ну кто в здравом уме будет сшивать текстуры, как на «самом глубоком сайте», в Иллюстраторе? Кто же ориентируется на векторные объекты, тем удобнее будет оставаться в векторном редакторе.
Вот, собственно, у меня на этом мысль и закончилась, всем спасибо.: )
Неоспоримый плюс вектора в том, что он остаются редактируемым на протяжении всего проекта. Вставляете .ai файл в индизайн, при необходимости вносите правки — и он динамически обновляется.
Спасибо вам за популяризацию иллюстратора, приучайте людей к хорошему, поскольку этот гребаный Корел просто выводит из себя.
Спасибо вам за популяризацию иллюстратора, приучайте людей к хорошему, поскольку этот гребаный Корел просто выводит из себя.
Можете сказать чем вам Корел не угодил (кроме верстания в нём сайтов, он не для этого).
Корел очень плохо интегрируется со всей адобовской линейкой. Файл иллюстратора можно вставить в любую другую адобовскую программу (фотошоп, афтеры, премьер, индиз), и он будет висеть так как ссылка с возможностью правки оригинала.
Корел мне кажется не логичным. В нем намеренно спрятаны фичи, которые могут вызвать умственный напряг у пользователя. Например, в кореле практически никто не пользуется слоями, вместо этого используя вложенные группы.
Макеты для печати, выполненные в кореле, часто имеют сложный черный цвет, потому что корел не акцентирует на этом внимание. Я работал в типографии и могу утверждать это смело. С проектами из иллюстратора такого не было.
Большинство пользователей (и сам корел) не знают, что такое оверпринт. Иллюстратор определяет его автоматом. Я, наоборот, не понимал проблему оверпринта, пока не столкнулся с корелом.
В кореле ужасная тень, построенная на векторных алгоритмах, а в иллюстраторе — мягкая, растровая.
Поскольку порог входа в корел крайне низок, многие все корел-дизайнеры наплевательски относятся к правилам и нормам верстки. Получив корел-файл, я почти наверняка уверен, что шрифты будут не в контурах, а файлов шрифтов нет; и что надо будет проверить все черные объекты на состав цвета и оверпринт.
Корел мне кажется не логичным. В нем намеренно спрятаны фичи, которые могут вызвать умственный напряг у пользователя. Например, в кореле практически никто не пользуется слоями, вместо этого используя вложенные группы.
Макеты для печати, выполненные в кореле, часто имеют сложный черный цвет, потому что корел не акцентирует на этом внимание. Я работал в типографии и могу утверждать это смело. С проектами из иллюстратора такого не было.
Большинство пользователей (и сам корел) не знают, что такое оверпринт. Иллюстратор определяет его автоматом. Я, наоборот, не понимал проблему оверпринта, пока не столкнулся с корелом.
В кореле ужасная тень, построенная на векторных алгоритмах, а в иллюстраторе — мягкая, растровая.
Поскольку порог входа в корел крайне низок, многие все корел-дизайнеры наплевательски относятся к правилам и нормам верстки. Получив корел-файл, я почти наверняка уверен, что шрифты будут не в контурах, а файлов шрифтов нет; и что надо будет проверить все черные объекты на состав цвета и оверпринт.
Ну на то она и «линейка», что все программы интегрированы. В принципе Корел сохраняет файлы в *.ai, *.pdf и *.eps вполне сносно, что их можно открывать адобовскими программами.
Насчёт слоев: когда есть работа с объектами и группами, слои вообще очень редко нужны. Даже в Иллюстраторе можно без них обходиться.
Что вы подразумеваете под «сложным» чёрным? Составной цвет (не 0/0/0/100)? Разве это не проблема того, кто делал? Я знаю что Корел отображает чистый чёрный цвет светлее, чем составной. Не знаю почему. С версии Х4 в настройках цвета можно поставить галочку Rich Black, тогда отображаться будет одинаково.
Про оверпринт знаю, что есть какие-то галочки при сохранении. Но есть еще момент — ни в одной типографии в требованиях вообще не рассказывается, что это и как можно все правильно сохранить (ведь можно).
Да, согласен с эффектами в Кореле туго.
Вы знаете, я знаю и людей работающих в фотошопе, которые не знают правил верстки. Думаю это зависит от человека. Вот всякие типографские штуки, типа лигатур, появились только в Кореле Х6.
Про отсутствие шрифтов, опять же, в Кореле есть даже опция собрать все файлы макета в одну папку (как в индизайне), но мало кто ей пользуется, потому-то не знают, а просвещать их никто не хочет. Хотя во всех типографиях, пишут что надо «кривить» текст (некоторые даже пишут как)
Насчёт слоев: когда есть работа с объектами и группами, слои вообще очень редко нужны. Даже в Иллюстраторе можно без них обходиться.
Что вы подразумеваете под «сложным» чёрным? Составной цвет (не 0/0/0/100)? Разве это не проблема того, кто делал? Я знаю что Корел отображает чистый чёрный цвет светлее, чем составной. Не знаю почему. С версии Х4 в настройках цвета можно поставить галочку Rich Black, тогда отображаться будет одинаково.
Про оверпринт знаю, что есть какие-то галочки при сохранении. Но есть еще момент — ни в одной типографии в требованиях вообще не рассказывается, что это и как можно все правильно сохранить (ведь можно).
Да, согласен с эффектами в Кореле туго.
Вы знаете, я знаю и людей работающих в фотошопе, которые не знают правил верстки. Думаю это зависит от человека. Вот всякие типографские штуки, типа лигатур, появились только в Кореле Х6.
Про отсутствие шрифтов, опять же, в Кореле есть даже опция собрать все файлы макета в одну папку (как в индизайне), но мало кто ей пользуется, потому-то не знают, а просвещать их никто не хочет. Хотя во всех типографиях, пишут что надо «кривить» текст (некоторые даже пишут как)
Макеты для печати, выполненные в кореле, часто имеют сложный черный цвет
Это потому, что говнодизайнеры, привыкшие херачить баннеры в шопе вообще не знают различий между RGB & CMYK и делают RGB Black, который конвертитсяв CMYK в соответствии с настройками цветоделения. В Шопе кстати так же.
Большинство пользователей (и сам корел) не знают, что такое оверпринт. Иллюстратор определяет его автоматом. Я, наоборот, не понимал проблему оверпринта, пока не столкнулся с корелом.
Если леливо смотреть в нижних правый угол, где у overprint объекта на заливке стоит значек оверпринта, можно и нужно включить опцию Simulate OverPrints в меню View.
пример хорошо оформленной статьи
читал с удовольствием
читал с удовольствием
Есть и глупые вещи, которые раздражают и переодически заставляют делать проекты в PS:
— Если забыть включить привязку к пикселям при создании документа, потом не включить
— Вставленные из буфера обмена объекты (с другой точной опоры) при повторном открытии файла съезжают с места на сотые доли пикселя
— Тяжело работать с тектурами
— Переодические падения, особенно при работе со шрифтами, когда большие объемы текста
— Негибкие эффекты теней
Самая прогрессивные вещи в AI — артборды и стили
— Если забыть включить привязку к пикселям при создании документа, потом не включить
— Вставленные из буфера обмена объекты (с другой точной опоры) при повторном открытии файла съезжают с места на сотые доли пикселя
— Тяжело работать с тектурами
— Переодические падения, особенно при работе со шрифтами, когда большие объемы текста
— Негибкие эффекты теней
Самая прогрессивные вещи в AI — артборды и стили
Попробуйте файрворкс. Там этих недостатков нет. Векторные инструменты тоже хороши.
Стили теперь есть и в фотошопе. Аналог символов — смарт объект из группы. Артборды — да, любопытно, но не такой уж регулярно нужный инструмент. Можно и без него вполне обойтись. все остальное — есть в фотошопе практически в полном объеме, и даже удобнее и проще.
Попробуйте Corel Draw. Изначально продукт создавался как чертежный и проблем со съехавшими пиксилами с роду не было. Честно говоря, когда последний раз пробовал AI, то лишний раз удостоверился, что Adobe в векторе не силен. И по вашему комментарию вижу, что ничего не изменилось.
Хорошая статья, грамотная…
И на вектора так или иначе надо переходить, только совсем погружаться в иллюстратор — несколько не айс. Причин тут три: плохие возможности по работе с фотографиями, чудовищные сложности (по сравнению с фотошопом) по созданию и редактированию масок и не самый удобный инструментарий (те же апиарансы — скорее, костыли, чем нормальная логическая структура работы над объектом).
В связи с выходом CS6 вообще довольно сомнительным становится создание сайтов в иллюстраторе. Вполне все то же самое можно делать и в привычном фотошопе. Артборды при желании можно заменить лэйеркомпами или последовательно включаемыми группами слоев (согласен, что альтернатива весьма условная, но в ряде случаев вполне годится). Вся основная векторная инструменталистика давно затащена в фотошоп, и там не составляет труда держать практически все в шейпах (или сделать сложный шейп можно в иллюстраторе и втащить в фотошоп или затянуть его как смарт-объект). В фотошопе CS6 теперь у шейпов может быть настраиваемая обводка — не столь круто, как в иллюстраторе, но вполне мощная. А если использовать эту функцию и добавлять еще и обводку из эффектов — можно и вовсе получить любой желаемый вариант. В панели Properties можно задать растушевку шейпу — что также добавляет потрясающих возможностей. Ну и панели Paragraph Styles и Character Styles в обновленном фотошопе ничуть не хуже иллюстраторовских.
Иными словами, если для CS5 использование иллюстратора как замену фотошопу еще как-то можно было рассматривать, то в случае CS6 эт оуже не кажется столь привлекательным. Поскольку пошустревший, потемневший, поудобневший и помощневший фотошоп — отличная машина для создания сайтов. С привычным и вполне удобным инструментарием. Без костылей.
И на вектора так или иначе надо переходить, только совсем погружаться в иллюстратор — несколько не айс. Причин тут три: плохие возможности по работе с фотографиями, чудовищные сложности (по сравнению с фотошопом) по созданию и редактированию масок и не самый удобный инструментарий (те же апиарансы — скорее, костыли, чем нормальная логическая структура работы над объектом).
В связи с выходом CS6 вообще довольно сомнительным становится создание сайтов в иллюстраторе. Вполне все то же самое можно делать и в привычном фотошопе. Артборды при желании можно заменить лэйеркомпами или последовательно включаемыми группами слоев (согласен, что альтернатива весьма условная, но в ряде случаев вполне годится). Вся основная векторная инструменталистика давно затащена в фотошоп, и там не составляет труда держать практически все в шейпах (или сделать сложный шейп можно в иллюстраторе и втащить в фотошоп или затянуть его как смарт-объект). В фотошопе CS6 теперь у шейпов может быть настраиваемая обводка — не столь круто, как в иллюстраторе, но вполне мощная. А если использовать эту функцию и добавлять еще и обводку из эффектов — можно и вовсе получить любой желаемый вариант. В панели Properties можно задать растушевку шейпу — что также добавляет потрясающих возможностей. Ну и панели Paragraph Styles и Character Styles в обновленном фотошопе ничуть не хуже иллюстраторовских.
Иными словами, если для CS5 использование иллюстратора как замену фотошопу еще как-то можно было рассматривать, то в случае CS6 эт оуже не кажется столь привлекательным. Поскольку пошустревший, потемневший, поудобневший и помощневший фотошоп — отличная машина для создания сайтов. С привычным и вполне удобным инструментарием. Без костылей.
Один раз послушался таких советов, и решил нарисовать один проект в Индизайне.
В итоге завалил все мыслимые сроки, сделал всё в два раза хуже чем от меня ожидали, верстальщик меня проклял, в итоге пришлось уволиться с работы, дальше ушла жена, умер кот, впредь советую относиться к таким мануалам с осторожностью.
В итоге завалил все мыслимые сроки, сделал всё в два раза хуже чем от меня ожидали, верстальщик меня проклял, в итоге пришлось уволиться с работы, дальше ушла жена, умер кот, впредь советую относиться к таким мануалам с осторожностью.
а как делать crop из иллюстратора? Вы хоть раз верстали вообще макеты?
Ежедневно пользуюсь иллюстратором, но ненавижу перо и карандаш. Блин, насколько эти инстурменты просто отстали от жизни. Плагины помогают, но не совсем. Например если зажать shift то линия не станет прямой. Все добавляют какие-то хрени не нужные, а простейшие инструменты не могут улучшить…
Из плюсов иллюстратора это поддержка dwg. Ну и теперь он 64 бита…
Из плюсов иллюстратора это поддержка dwg. Ну и теперь он 64 бита…
Заочно ненавижу макеты отрисованные в илюстраторе, благо ещё не приходилось верстать HTML из таких макетов, вообще не представляю что за ад будет. Если когда нибудь принесут такой и скажут сверстай, отправлю переделывать в PSD или PNG или пошлю лесом.
Еще в люстре очень удобный эффект Transform.
Например таблицы и списки делать удобно.
Ну и если кнопка не в один слой, то создание символа с 9-Slice Scaling удобно.
Сам люстру использую в основном для прототипирования. Экономит кучу времени.
Например таблицы и списки делать удобно.
Ну и если кнопка не в один слой, то создание символа с 9-Slice Scaling удобно.
Сам люстру использую в основном для прототипирования. Экономит кучу времени.
Особенность в том, что экраны небольшие, но их очень много. А теперь представьте, что это были бы 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/, проливающей свет на многие важные тонкости использования фотошопа, о которых не знают даже некоторые опытные дизайнеры с метким глазом и прекрасным портфолио.
Если вы будете рисовать интерфейс в Photoshop векторными шейпами, то никакой пикселизации при увеличении не будет.
А Illustrator не очень удобный инструмент для UI.
А Illustrator не очень удобный инструмент для UI.
Работаю в Photoshop CS2…
Давно хочу переехать на Ai. Такой вопрос: помогут ли знания рисования векторных иконок в фотошопе?
P.S. Заранее извиняюсь за, может быть, глупый вопрос :)
Давно хочу переехать на Ai. Такой вопрос: помогут ли знания рисования векторных иконок в фотошопе?
P.S. Заранее извиняюсь за, может быть, глупый вопрос :)
А что за приложение такое красивое вы разрабатываете (первый скрин, «Все экраны веб-интерфейса в одном файле»)? Оно еще не выпущено? Можно ссылочку, если вышло?
Спасибо!
Спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Всё это, конечно, круто, но мы просто-напросто охренеем это верстать.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
UI-Ai: Рисуем интерфейс в Adobe Illustrator