В чем рисовать сайты
Инструментов для макетирования, как водится, великое множество: Фотошоп, Индизайн, Иллюстратор, Омни графайл, Визио. Что там еще? А, Файрворкс. Еще что-нибудь? Корел дро. Флеш. Пейнт... :-)
Что из этого? Отвечу сразу и без заигрываний — Adobe Illustrator CS4. Я подчеркиваю, не CS3, не CS2, не еще какой-нибудь, именно CS4.
Почему? Потому что ЦС4-й Иллюстратор умеет делать несколько (до ста) рабочих полей в одном документе, причем, разного размера. А это влечет довольно серьезные последствия (читай, кучу удобств), которые мы обсудим ниже.
Почему Иллюстратор ЦС4
Давайте притворимся, будто мы еще не знаем, в чем нам лучше проектировать сайт, и зададимся вопросом, что мы хотим от программы? Какова должна быть программа для проектирования сайта? Такая, чтобы в ней можно было нарисовать макет, более-менее близким к конечному дизайну. Какими качествами она должна обладать?
Ну во-первых, в ней должны существовать стили текста, чтобы можно было сразу сделать стили заголовков, и не проставлять их потом вручную везде и всюду. Типа как CSS, только в рисовальной программе. Согласны?
Далее, было бы неплохо, если бы программа поддерживала библиотеки графических элементов. Как бы склад, в котором валяются кнопочки, инпут-боксы и прочие элементы интерфейса и откуда их можно быстро и удобно доставать и использовать.
Чуть не забыл, что программа должна быть векторной. Это в дальнейшем упростит нам работу с закругленными уголками, плашечками и всем остальным, что требует масштабирования. Плюс, здесь удобнее назначать цвета обектам, работать с текстом и прочие плюшки.
Сразу отпали Фотошоп, Файрворкс (он хоть и полувекторный-полурастровый, но у него куча недостатков и для рисования прототипов он не катит) и, слезы-слезы, Пейнт.
Программа должна уметь работать с несколькими страницами. Это очень удобно для просматривания и сравнивания разных вариантов дизайна, и здесь Индизайн был вне конкуренции, пока не появился Иллюстратор ЦС4.
Прелесть нового Иллюстратора в том, что в документе, как я уже говорил, вы сможете разместить рабочие поля разных размеров. А это значит, что рядышком у вас будут лежать макеты для узкого и широкого экранов, формы, баннеры, элементы интерфейса и любая требуха, какая может понадобиться. Все это будет в поле зрения, доступно в мгновение ока без лазания по папочкам и отрывания файлов и легко экспортируемо в гифы, джипеги, пдфы.
Пример нескольких рабочих полей в одном документе, взятый с сайта Adobe
Кроме того, размер рабочего поля настолько легко и просто изменяется, что если узкий дизайн вышел длиннее широкого, продлить рабочее поле для него вниз — дело одного клика и одного движения мышкой. Ну ладно, двух кликов и одного движения. Зайдите посмотрите видео на Адобе-ТВ. Там в самом начале показывают создание документа с несколькими рабочими полями.
В общем, эта фича и исправление некоторых других существенных недостатков прошлой версии программы сделала для меня выбор однозначным. Прощай, Корел. Бай-бай, Визио. Пока, Индизайн. Омни тоже отправляется отдыхать.
О фичах я расскажу в следующих статьях, где мы последовательно разберем все аспекты макетирования в Иллюстраторе. А пока, если я вас убедил, добывайте и устанавливайте именно ЦС4, а я пошел писать статью про настройку программы под вебдизайн.
На подготовку цикла материалов по Иллюстратору муня вдохновии две статьи: Wireframing With InDesign and Illustrator и Wireframing Part II: Illustrator Basics. К сожалению, они были написаны до появления ЦС4-й версии и не учитывают ее возможностей. Так что не бросайтесь сразу исполнять тамошние советы, дождитесь продолжения ;-)
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 48
RSSВообще все чаще складывается ощущение, что авторы временно.нет исписались и плодят статьи "лишь бы что написать". Про "выпуски" "Каллиграфия и типографика" я вообще молчу - безполезные подборки. Их можно за 30 минут наплодить 750 выпусков.
Насчет выпусков каллиграфии — это посты для вдохновения, дизайнерам они полезны как нам кажется. Можешь сделать 750 выпусков за 30 минут? Тогда возьми и сделай, а не сотрясай воздух.
Но не понял почем вот так сразу фотошоп отпал? Никто не мешает в шопе работать с векторами имхо.. Но спасибо, возьму на заметку.
немного оффтоп: Кстати, есть еще одна здоровская векторная рисовалка: Xara Xtreme
Для примера приведу урок уважаемого мной тех. дизайнера Ракутина Андрея — рисует кота в ней
А про библиотеки графических элементов расскажете?
Жду продолжения.
2Женя, трудно писать о средствах, так как в основном выбор сводится к решению конкретной задачи или же просто привычке автора в чём-то работать.
Обязательно расскажу. И чем Файворкс мне не нравится, расскажу. И сравнение Фотошопа и Иллюстратора напишу. И еще кучу разных плюшек, которыми давно хочется поделиться.
Почему отпал Фотошоп? Ну если вкратце:
1) нет текстовых стилей
2) нет библиотек граф. элементов
3) рабочую поляну изменять дольше и неудобнее. к тому же она одна.
4) при работе в Фотошопе требуется гораздо большее количество слоев. В Иллюстраторе упорядочивать все легче
5) нет такой развитой системы выравнивания
6) неудобно редактировать текст: чтобы выйти из текстового поля, приходится браться за мышку и тыкать. В Иллюстраторе просто жмешь эскейп.
7) с векторными объектами удобнее работать — двигать их, перекрашивать, изменять размер
Таких мелочей, как номер шесть, на которы теряешь время и клики, наберется штук 20-30. В сумме они уже дают солидную разницу по удобству и скорости.
Кому что нравится))
В Fireworks тоже можно создавать стили текстам. Загруленные уголки, плашечки и т.п. делаются одним нажатием мышки и при масштабировании все прекрасно сохраняется. Вполне удобно работать с текстом.
Насчет нескольких рабочих областей конкретно применительно к сайтам - сомневаюсь что уж такая полезная это вещь - для полиграфии и баннеров как на скрине к статье возможно да, но для макетов сайта то зачем? практического применения при разработке дизайн-макета я в этом почему-то не вижу. Ждем след.статей =) с разъяснениями
1) нет текстовых стилей
Да это может быть и полезно.
2) нет библиотек граф. элементов
Это фигня, у меня и у многих других есть файлы где собраны все нужные элементы. Да и многие элементы типа форм, многие часто рисуют заново под определенный проект(форма, цвет, размер)
3) рабочую поляну изменять дольше и неудобнее. к тому же она одна.
3мя кликами умеличивается размер канваса, если надо сравнивать несколько макетов, окткрываешь их и cntl+tab в помощь
4) при работе в Фотошопе требуется гораздо большее количество слоев. В Иллюстраторе упорядочивать все легче
несогласен, в фотошопе можно создавать сколько угодно папок и все упорядочивать как вздумается
5) нет такой развитой системы выравнивания
Что эт оза система рывавнивания такая? в фотошопе имеются, помойму все необходимые виды выравнивания
6) неудобно редактировать текст: чтобы выйти из текстового поля, приходится браться за мышку и тыкать. В Иллюстраторе просто жмешь эскейп.
В фотошопе просто жмешь cntl+Enter (вы не представляете скока еще в фотошопе есть интересного:))
7) с векторными объектами удобнее работать — двигать их, перекрашивать, изменять размер
Опять же не согласен, как мне нарисовать в люстре реалистичную тень от кнопки, от иконки , от кубика, шарика? с градиентмешом будешь мин 5 возиться. В фотошопе же, при правельно заточеных руках, хватит несколько раз мазнуть кистью в нужных местах.
Как в люстре быстро фотографию растровую обтравить? Или вы предлагаете все растровые работы делать в фотошопе а потом это все тащить в люстру изза того что там есть формочки и чекбоксы встроеные?
Одно точно -- Иллюстратор очень силен дизайне интерфейсов. Все сайты и иконки на www.kletsel.com сделаны в Иллюстраторе. Кое-какие сделаны еще в Иллюстраторе 8.
satantx
Я например использую и иллюстратор и фотошоп, но рисую конечно в шопе.
Абсолютно тот же подход. Макетирование, этот самый wireframing (в смысле, каркас, прототип, более-менее близкий к реальности) — в Иллюстраторе; техдизайн, иллюстрации, тенюшки, цветопереливы — Фотошоп.
Я поэтому в статье и написал «Такая, чтобы в ней можно было нарисовать макет, более-менее близким к конечному дизайну», то есть не конечный.
А использовать стандартные элементы - это бред помоему :)
И опять вследствие того, что я говорю о прототипировании, краешком залезающем в дизайн, не согласен с тобой. В прототипировании главнее всего скорость разработки (с отсылкой на книгу Влада Головача http://uibook2.usethics.ru/). А уж как застайлить элементы управления, решать, по уму (тут отсылка на памятку веб-дизайнеру http://habrahabr.ru/blogs/web_design/50497/), надо после того как определились с географией страницы, расставили блоки, то, сё. В этом ракурсе, согласись, использование наборов элементов оправдано, ведь оно повышает скорость.
Вообще, теперь я уже понимаю, что нужно было объяснить всю эту идеологию, которой я следую и под которую, выходит, подбирал себе инструмент. Ну ничего, какие наши годы. Еще научусь писать статьи быстро и при этом внятно :-)
Saint_Gog
Сэйнт, вот смотри, что я имею в виду: не полный отказ от Фотошопа в пользу Иллюстратора, а перенос в Иллюстратор процесса моделирования макета. Не конечный дизайн, а по возможности близкий к дизайну прототип.
За cntl+tab спасибо! Я этого не знал. Вообще, кинь мне письмо на kirillov@bk.ru. На следующей неделе напишу статью Photoshop vs Illustrator, пришлю тебе, и обсудим вместе. Моя цель таки не Иллюстратор продвинуть, а выдать полезный материал сообществу.
Граф элементы... ну ты же понимаешь, дело в скорости и удобстве. Из библиотеки брать удобнее и быстрее.
Слои... вследствие того, что площадь экрана ограничена и мы не очень-то жаждем разворачивать палистру слоев простыней на весь экран, думаю, все же удобнее, когда слоев пять, а не шестьдесят пять. Доступ к объектам ускоряется, а это для меня основной параметр.
Ну и конечно никаких градиент-мешей не предполагается. Почти все доводки напильником — в растре, а прототипирование — в векторе.
Алексей Клецель
Много ли сайтов в Иллюстраторе сделал автор материала? Думаю что не очень.
Хм. Пошли выебоны. Ну тем веселее :-) Значит, люди живы не только интеллектуально, но и эмоционально.
Алексей, отвечу без утайки, на Иллюстратор я пересел 5 сайтов назад. До этого немного порисовал в Индизе. Думаю, пять сайтов вполне достаточно, чтобы составить мнение об инструменте. Нет?
Народ, чем больше мы будем спорить в комментах, тем выше будет качество материалов. Я очень благодарю авторов всех комментов и всех призываю спорить и отстаивать свое мнение, если вы в чем-то не согласны со мной. Это только повысит качество статей на нашем сайте.
А сам я за фаерворкс. Он и был изначально создан для прототипирования. Многое конечно приходится отрисовывать и в других программах, но для интерфейса использую только его. Надо бы глянуть иллюстратор ещё раз, несколько раз бросал его по каким-то неведомым причинам.
Не верите мне, зайдите сюда http://www.usethics.ru/lib/. Это сборник статей Влада Головача, довольно авторитетного человека в мире дизайна интерфейсов.
Ведт мнение на то и есть, чтобы его высказывать. А вы в ответ сразу начинаете все опротестовывать. Ведь действительно каждому свое.
А еще очень радует когда авторы временно.нет обзаются друг с другом в комментариях к своим статьям. Это вызывает такое умиление, прям слов нет.
Человек из турбомилка молодец, неплохая у него статья.
2. Рисование - фотошоп.
3. ???
4. PROFIT!
Немного авторских уроков для начинающих, добро пожаловать - http://firenet.ru
А в остальном опыт работы с Фотошопом перекрывает возможные фишки Иллюстратора. Выше комментаторы правильно говорили о использовании папок слоев, горячих клавиш и сборников типичных элементов
Всю жизнь делаю сайты в Фотошопе и совершенно не понимаю людей, делающих это где-либо еще (особенно - в Кореле).
С нетерпением жду продолжения. Иллюстратор готов к работе.
А вообще-то для того что-бы решить в чем рисовать сайты нужно сначала понять чем web - дизайн отличается от дизайна для полиграфии. Каринка которую человек видит на экране монитора состоит из пикселей, следовательно это растровая графика и сайт нужно делать в редакторе предназначенном для растровой графики, например Фотошоп, а Иллюстратор - это векторная графика которая используется для других целей. Вы ведь это знали конечно?
Я например не вижу смысла делать сайт в векторном редакторе, что-бы потом все в растр переводить. Это все равно что логотипы делать в фотошопе а потом их в векторе отрисовывать.
Да и еще вы описали только достоинства Иллюстратора, а о недостатках ничего не сказали.
Например в дизайне сайтов часто приходится обрабатывать фото к чему иллюстратор не приспособлен.
А те преимущества о которых вы пишете трудно назвать преимуществами.
Вобщем не согласен абсолютно со статьей. Дизайн сайтов - только Фотошоп =)
И еще ужасный select с двумя стрелками, которого в HTML просто нет, но который так любят запихивать в интерфейс "продвинутые" дизайнеры.