@gto6120

Насколько удобно создавать макеты сайтов в illustrator?

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

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

В иллюстраторе:

Жутко геморройно расставлять направляющие по пикселям, раздражало, что направляющие показываются в окне слоев. Совсем не понятно, если я рисую в масштабе 1:1, то сталкиваюсь с проблемой, что мелкие элементы (~ менее 10 пикселей) нарисованные в этом же масштабе потом плохо масштабируются в большую сторону, начинаются проблемы с толщиной обводки, к примеру, когда элмент скэйлится, а обводка - нет. Рисовать изначально в большем масштабе, а потом вставлять из другого файла, может так нужно делать? Но при таком подходе удобство теряется. Растровый фон - совсем беда, хорошо если масштаб 1:1 в пискельном выражении, а если нет? Если изначально взят другой масштаб или совсем не привязывался к пикселям, а только к пропорциям, а потом необходимо воткнуть растр, который в большую сторону не скейлится. Как вообще строить рабочий процесс в иллюстраторе???

В фотошопе

Достало лазать за веторными объектами в люстру, копировать, вставлять, позиционировать и т.д. Опять же масштаб. Если выбрал 1:1, встает вопрос, как потом графику нарезать для ретины? Если больший, то насколько? Так чтобы на ту самую ретину хватило? Но тогда как работать с растром, ведь зачастую нет фотоматериалов хорошего качества и приходится использовать бэкграунд шириной 1400 пикселей на экраны 1920 пикселей шириной, а если масштаб еще увеличенный скажем x1.5, тогда этот фон в макете начнет размываться при растяжении.

Я совсем запутался, ни одна из программ не подходит хорошо под мои нужны, а тут орут еще всякие - давай в индизайн, а вот у нас в скетче и т.д. Мака у меня нет, на вирталке работать убого, индизайн пробовал, не смог понять как там простейшие вещи сделать необходимые для дизайна макета, muse тоже пробовал, понял, что подойдет только для ограниченных макетов вроде лендингов, а когда будет серьезный ui, придется выкинуть и остаться без инструмента.

Крик души - помогите разобраться. Задавайте вопросы, я отвечу.

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

Пользуясь случаем, хочу спросить про то, как люди отрисовывают макеты для адаптивного сайта, отдельно по макету для каждого разрешения учитываемого? Это же жутко неудобно, может есть более простые пути? Тут конечно вне конкуренции muse, но ... как говорил раньше, программа не подойдет для сложных макетов.
  • Вопрос задан
  • 2307 просмотров
Решения вопроса 2
pozZzitiv
@pozZzitiv Куратор тега Adobe Illustrator
Дизайнер и перфекционист
насколько удобно и возможно ли вообще работать веб-дизайнеру в illustrator при создании макета сайта.

Работать возможно и вполне удобно. Проблема в другом — верстальщики не жалуют т.к. плагины и утилиты, облегчающие вёрстку под Фш есть, а под Аи нет. Это не раз обсуждалось даже здесь, на Тостере. Поищите.

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

Не согласен. Лично мне ни капли не сложно поставить новую направляющую с привязкой к пиксельной сетке в Аи. Не сложнее, чем в Фш. А если не нравится, что направляющие среди элементов дизайна, так вынесите их на отдельный слой и всё.

мелкие элементы (~ менее 10 пикселей) нарисованные в этом же масштабе потом плохо масштабируются в большую сторону

Очередная странность, никогда не было таких проблем. Это же вектор, его можно масштабировать как душе угодно. Смотрите какие настройки выставлены, возможно, «сложности» из-за этого.

начинаются проблемы с толщиной обводки, к примеру, когда элмент скэйлится, а обводка - нет.

Достаточно поставить «галочку» и обводка будет масштабироваться (панель Transform). И никаких «взять в бОльшем масштабе, а потом уменьшить» не нужны. Так что эта «проблема» лишь из-за незнания функционала программы. Советую изучить тщательнее Аи, посомтреть все возможные настройки в панелях, посмотреть уроки и т.п.

С растром тоже не вижу проблем. Если в макете его очень уж много, то что мешает сделать его (растр) в Фш? Инструменты надо подбирать исходя из задач и совсем не обязательно чтобы это был строго только Фш, только Аи или только какая-то другая программа.

А уж если растр всего лишь в виде превью картинок в макете, то вставить их для презентации также легко как и в Фш. Причём, на вёрстку отдавать уже можно и без них. Т.е. не проблема сделать интерфейс, например, в Аи, а растровую графику (фоны и прочее) положить отдельно. Не забыть только пояснить верстальщику где и как всё это должно располагаться. Или наоборот, сделать макеты в Фш, а все элементы (иконки, кнопки и т.п.) отдельно в svg положить (и не надо париться с кучей размеров).

Достало лазать за веторными объектами в люстру, копировать, вставлять, позиционировать и т.д.

Не существует программы, которая сделает работа за дизайнера :) Лень по Alt+Tab переключаться между программами? Ну идите в копирайтеры, там одного Word'a хватит))

Если выбрал 1:1, встает вопрос, как потом графику нарезать для ретины? Если больший, то насколько? Так чтобы на ту самую ретину хватило?

В Фш есть assets, также есть куча сторонних плагинов — выбирай что удобнее. Инструкций, статей и обзоров, благо, хватает. По поводу размеров для Ретина и прочих также существует масса статей с инструкциями (не считая гайдлайнов), вы их легко найдёте.

Но тогда как работать с растром, ведь зачастую нет фотоматериалов хорошего качества и приходится использовать бэкграунд шириной 1400 пикселей на экраны 1920 пикселей шириной, а если масштаб еще увеличенный скажем x1.5, тогда этот фон в макете начнет размываться при растяжении.

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

Если ни одна программа не идеальна, то логично сделать выбор об использовании более одной программы в работе ;)
Индизайн не для веба, хоть в нём, порой, и удобно сделать даже такой макет (например, сделать скелет, а затем продолжить работу в Фш; особенно, если в макете основа это текст). Всякие Muse и прочие полуавтоматические или автоматические инструменты тоже могут быть использованы — всё зависит от конкретной задачи. Для таких как вы сделали еще Affinity designer, но если и он не нравится, то прям не угодишь. Ждите полнофункциональную версию Adobe XD под Win.
Будете ограничивать себя одной программой — будете вечно ныть, что где-то неудобно.

Успешно работают люди и в Аи, и в Фш, и в Скетчах и т.п. И каждый из них когда-то чего-то не знал, чего-то не умел и не понимал. Всё придёт с опытом и вместо того чтобы искать единственный универсальный инструмент лучше бы изучали возможности разных и учились применять это на практике. Сейчас, многие умеют создавать практически идентичный результат не зависимо от того растровый это или векторный редактор. Разница лишь в навыках специалиста.

Про макеты для адаптивного тоже не раз уже обсуждали здесь. Кто-то привык делать только одним способом, кто-то исходит из ситуации. Я отношусь ко вторым и на практике бывало разное:
а) делаются макеты под каждое разрешение (список обсуждается с клиентом/верстальщиком) - дольше и дороже, но некоторые верстальщики предпочитают такой подход;
б) делается один основной макет и текстовое описание поведения блоков и элементов, часть графики может готовиться дополнительно - подходит для несложных дизайнов, где логика поведения интерфейса может быть описана словесно и когда нужно немного сэкономить;
Иногда можно просто блок-схемами показать поведение интерфейса.
в) делается один макет и всё - чаще если клиент экономит и/или еще нет конкретного верстальщика и клиент не знает нужны ли доп макеты; тут либо верстальщик потом сам мучается над адаптивом, либо клиент возвращается за доп макетами.
Не могу выделить какой-то самый популярный из вариантов т.к. все они бывают примерно в равном соотношении.

Бюджет мал — делайте один, бюджет позволяет и/или клиент хороший — делайте по максимуму, если вам важно чтобы сайт выглядел как вы задумали при разных разрешениях экрана.
Ответ написан
@Jenish
Жутко геморройно расставлять направляющие по пикселям, раздражало, что направляющие показываются в окне слоев.

Направляющие очень удобные в AI. Можно задавать координаты вручную в полях трансформации (в этих полях даже арифметические операции можно делать + - * /). Также можно наклонять направляющие под любые углы (И быстрые направляющие тоже можно настроить под разные углы). Можно настроить привязку к пиксельной сетке. Даже объекты можно превратить в направляющие. Да и вообще, направляющие в АИ это по сути и есть почти полноценные объекты, в отличие от фотошоповских. И, как было сказано выше, направляющие лучше объединить в один отдельный слой. Так что в АИ с этим все норм. Есть еще куча плагинов для выстраивания сетки. Можно самому создать набор направляющих в 12 колонок, предварительно выровнять их и объединить в группы, а потом копировать и накладывать на макеты - вот вам и адаптивная сетка.
По началу - да. Макетирование сайтов в АИ может показаться геморным, Но если разобраться в принципе работы инструментов и вообще всей логики работы в программы, то можно очень удобно настроить под себя.

Совсем не понятно, если я рисую в масштабе 1:1, то сталкиваюсь с проблемой, что мелкие элементы (~ менее 10 пикселей) нарисованные в этом же масштабе потом плохо масштабируются в большую сторону, начинаются проблемы с толщиной обводки, к примеру, когда элмент скэйлится, а обводка - нет.

Этот момент решается одной галочкой в настройках, как уже было сказано. Scale strokes and effects. Scale corners. Scale patterns. Есть еще 9png

Растровый фон - совсем беда, хорошо если масштаб 1:1 в пискельном выражении, а если нет?

Растровый фон помещается в АИ, а редактировать можно в фотошопе. Причем не надо перетаскивать постоянно. Просто в панели вверху выбираете Edit и автоматически открывается фотошоп. Сохраняете там - обновляется в иллюстраторе. И растр также можно быстро и удобно заменять просто меняя линки Relink.

В пользу иллюстратора еще могу добавить такие фишки, как работа с символами. Создав, например, символ кнопки, можно отредактировав один экземпляр сразу отредактировать и все кнопки на макете. Или навбар и футер. Причем экземпляры символов можно масштабировать как 9пнг, в отличие от смарт-объектов в фотошопе. Это удобно, когда страниц много. И еще в иллюстраторе можно задавать глобальные цвета. Тоже очень удобно, когда надо "поиграть с цветами" интерфейса - изменяешь глобальный цвет в палитре и все объекты с этим цветом тоже меняют цвет.
Для экспорта х1,5 х2 х3 есть плагины.
В общем если всерьез и с усердием взяться за изучения AI и PS - то вместе они очень мощная сила. А если еще освоить и Muse или хотя бы панель Timeline в фотошопе, то можно и анимацию отдельных элементов интерфейса забабахать для наглядности, чтобы верстальщик лучше понимал что и как должно действовать.
Да и вообще AI и PS с каждым обновлением становятся все лучше и лучше, удобнее и удобнее. Сейчасс юзаю CC 2017. Там есть хорошие усовершенствования и нововведения.
Скоро должен выйти полноценный Adove XD для Windows. Хотя бета версию уже можно опробовать абсолютно БЕСПЛАТНО, но при условии, что у вас стоит Win10 anniversary edition (build #14393). И, надо сказать, что бета-версии УЖЕ ДОСТАТОЧНО, чтобы делать годные макеты :)
Успехов!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ttone
@ttone
Design / AE / Nuke
Нужен именно универсальный солдат.

Если только Веб-дизайн, попробуйте affinity designer

отдельно по макету для каждого разрешения учитываемого?

По мне - это просто и удобно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы