22 декабря 2015
6 мая 2009
64
В чем рисовать сайты
Инструментов для макетирования, как водится, великое множество: Фотошоп, Индизайн, Иллюстратор, Омни графайл, Визио. Что там еще? А, Файрворкс. Еще что-нибудь? Корел дро. Флеш. Пейнт... :-)
Что из этого? Отвечу сразу и без заигрываний — Adobe Illustrator CS4. Я подчеркиваю, не CS3, не CS2, не еще какой-нибудь, именно CS4.
Почему? Потому что ЦС4-й Иллюстратор умеет делать несколько (до ста) рабочих полей в одном документе, причем, разного размера. А это влечет довольно серьезные последствия (читай, кучу удобств), которые мы обсудим ниже.
Почему Иллюстратор ЦС4
Давайте притворимся, будто мы еще не знаем, в чем нам лучше проектировать сайт, и зададимся вопросом, что мы хотим от программы? Какова должна быть программа для проектирования сайта? Такая, чтобы в ней можно было нарисовать макет, более-менее близким к конечному дизайну. Какими качествами она должна обладать?
Ну во-первых, в ней должны существовать стили текста, чтобы можно было сразу сделать стили заголовков, и не проставлять их потом вручную везде и всюду. Типа как CSS, только в рисовальной программе. Согласны?
Далее, было бы неплохо, если бы программа поддерживала библиотеки графических элементов. Как бы склад, в котором валяются кнопочки, инпут-боксы и прочие элементы интерфейса и откуда их можно быстро и удобно доставать и использовать.
Чуть не забыл, что программа должна быть векторной. Это в дальнейшем упростит нам работу с закругленными уголками, плашечками и всем остальным, что требует масштабирования. Плюс, здесь удобнее назначать цвета обектам, работать с текстом и прочие плюшки.
Сразу отпали Фотошоп, Файрворкс (он хоть и полувекторный-полурастровый, но у него куча недостатков и для рисования прототипов он не катит) и, слезы-слезы, Пейнт.
Программа должна уметь работать с несколькими страницами. Это очень удобно для просматривания и сравнивания разных вариантов дизайна, и здесь Индизайн был вне конкуренции, пока не появился Иллюстратор ЦС4.
Прелесть нового Иллюстратора в том, что в документе, как я уже говорил, вы сможете разместить рабочие поля разных размеров. А это значит, что рядышком у вас будут лежать макеты для узкого и широкого экранов, формы, баннеры, элементы интерфейса и любая требуха, какая может понадобиться. Все это будет в поле зрения, доступно в мгновение ока без лазания по папочкам и отрывания файлов и легко экспортируемо в гифы, джипеги, пдфы.
Пример нескольких рабочих полей в одном документе, взятый с сайта Adobe
Кроме того, размер рабочего поля настолько легко и просто изменяется, что если узкий дизайн вышел длиннее широкого, продлить рабочее поле для него вниз — дело одного клика и одного движения мышкой. Ну ладно, двух кликов и одного движения. Зайдите посмотрите видео на Адобе-ТВ. Там в самом начале показывают создание документа с несколькими рабочими полями.
В общем, эта фича и исправление некоторых других существенных недостатков прошлой версии программы сделала для меня выбор однозначным. Прощай, Корел. Бай-бай, Визио. Пока, Индизайн. Омни тоже отправляется отдыхать.
О фичах я расскажу в следующих статьях, где мы последовательно разберем все аспекты макетирования в Иллюстраторе. А пока, если я вас убедил, добывайте и устанавливайте именно ЦС4, а я пошел писать статью про настройку программы под вебдизайн.
На подготовку цикла материалов по Иллюстратору муня вдохновии две статьи: Wireframing With InDesign and Illustrator и Wireframing Part II: Illustrator Basics. К сожалению, они были написаны до появления ЦС4-й версии и не учитывают ее возможностей. Так что не бросайтесь сразу исполнять тамошние советы, дождитесь продолжения ;-)
Вообще все чаще складывается ощущение, что авторы временно.нет исписались и плодят статьи "лишь бы что написать". Про "выпуски" "Каллиграфия и типографика" я вообще молчу - безполезные подборки. Их можно за 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 просто нет, но который так любят запихивать в интерфейс "продвинутые" дизайнеры.
Не люблю Индизайн и Иллюстратор, не потому что они плохие, а потому что они всем на кой то фиг (пардон) надо, но только непонятно зачем. Почему непонятно? Потому что если человек (например я) привык работать в определенной программе (например ФШ) то ему там самая малина. Не знаю в чем по мнению многих заключается неудобство работы с ФШ.. по моему он идеален (до, я сюда зашла именно похвалить любимчмка!). Мне лично например вот тот просмотр страниц в одном окне никогда не нравился, с первого дня знакомства с Иллюстратором. Экран то не на всю стену, а проматывать вниз страницу, что бы найти нужный элемент что там затерялся - ужасть.
Монитор ведь не резиновый! В CS4 шопе например очь удобно прыгать по страницам, ибо они просто все вряд как вкладки в браузере =)) о как!
Использовать готовые элементы предпочитаю в крайнем случае, и все равно даже готовые перекраиваю под свой лад. С ФШ это сделается настолько быстро, что порой поражаюсь как это умудрилась собрать сайт за две ночи.. о.О может это не рекорд для кого то, но как по мне довольно сжатые сроки для готового шаблона (а вот собрать это все в DW другой вопрос =))
Тааак.. что там еще? стили для текста? эм.. а собсна на кой это надо, если как ни крути будет прописан цсс? картинками то весь сайт не сделаешь.. да и сколько там того текста на странице, что пишется в графике, а не от руки админом? о.О в общем моя в шоке
Многослойность никак не мешает работе, а делает ее аккуратной!Потому что есть возможность видоизменять свой шаблон до неузнаваемости. Если канеш все на разных слоях))
Что еще?... ай, лан, пока писала уже забыла, а новую статью тут катать не буду.
Все вышеизложенное личное имхо, вы так нафлудили, что прям не удержалась вставить свое "фе" =))
А вообще спасиба всем, так как все еще сторонюсь Иллюстратора и Индизайна (а о других прогах я вообще не слышала! что это?) то много интересного тут узнала, всем спасиба за вклад в сию статью. Она кстати нисколько не плохая, интересная и не занудная, как обычно можно встретить в сети =)
А можно увидеть результаты Вашей работы в иллюстраторе?
Я конечно же про сайты.
Спасибо!
Заходи на www.kirillov.name, все сайты, которые там есть, кроме Книги желаний и Холдинга-СПб, нарисованы в иллюстраторе.
заготовки то чем вам не угодили? может вы ещё и шейпы с кистями под каждый сайт рисуете сами а? и градиенты со стилями новые придумываете каждый раз?
короче говоря бредите вы местами :)
почему то я не слышал отзывов о GIMP'e
кстате DW заточен почему-то именно под FW oO мне лично FW не очень понравился... IL понравился почти сразу, но на тот момент мне не нужна была векторная графика.
Не флеш, илюстратор. фотошоп. Желательно маленькая.
Да если на сайте имеется только 1 картинка которая выполняет роль главного элемента, то отрисовал, подготовил ее и плэйснул в люстру и верстай, а если на сайте куча имэйджов то не удобно прыгать.
Так что тут вывод скорее такой, что если сайт имеет одну или 2 основных картинки, то люстра да, если много и пока не определено что куда, то шоп.