Используем Adobe Illustrator для создания макета страницы

Автор оригинала: Jonathan The Brave
  • Перевод
Данное руководство создано для тех, кто уже умеет пользоваться Adobe Illustrator, но пока не знает всех тонкостей работы с ним и хочет познакомиться поближе.

Товарищ CurlyBrace уже сверстал представленный здесь макет, спасибо ему!

Для начала посмотрите на то, что мы будем стараться сделать:





Шаг первый


Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта, у большинства из них немаленькие мониторы.

Не забудьте выставить Color Mode в RGB.



Шаг второй


Чёрные границы на картинке ниже обозначают размеры создаваемого нами документа (область между ними ещё называют artboard). Мне нравится помещать скриншот с чистым окном браузера в качестве подложки: гораздо легче воспринимать страницу такой, какой она должна получиться.



Шаг третий


Следуюший шаг очень важен. Вы, разумеется, можете выбрать произвольный масштаб (Zoom) и даже изменять его в процессе работы, но имейте в виду, что текст на странице должен быть удобочитаемым при масштабе 100% (1:1). Для изменения масштаба вы можете использовать отмеченное ниже поле.



Шаг четвёртый


Вы можете скрывать и отображать границы рабочей области тогда, когда вам это нужно. Для её сокрытия вам нужно выбрать команду View > Hide Artboard. Есть только одна проблема: такая операция занимает слишком много времени. Поэтому, советую вам использовать специальное сочетание клавиш для этого: Command + Semicolon (;).



Шаг пятый


Чтобы легко разметить иерархию документа и сбалансансировать её, вы можете, для начала, разметить страницу серыми прямоугольниками, как это сделал я. Тонкие длинные прямоугольники — это будущий текст.



Шаг шестой


Когда вы будете уверенным в разметке страницы, вы можете удалить прямоугольники, заменив их направляющими (Guide lines).



Шаг седьмой


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



Шаг восьмой


Доведите шапку страницы до совершенства, добавив в неё изображения, иконки.



Шаг девятый


Я решил добавить голубого цвета в шапке.



Шаг десятый


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



Шаг одиннадцатый


Существует несколько способов подготовки дизайна для WYSIWYG-редакторов (например, Adobe Dreamweaver). Первый предполагает использование слайсов (Slice). Их можно создать с помощью тех же направляющих или выделением. Сделаем с помощью направляющих: перетащим и расположим их вокруг каждого элемента-ссылки на странице. В нашем примере, все четыре иконки являются ссылками: ведут на отдельные страницы на нашем сайте.



Шаг двенадцатый


Когда вы разметите направляющими нужные блоки на странице, можно превратить их в настоящие слайсы. Для этого используем команду Object > Slice > Create from Guides. Я заметил, что Illustrator может не сделать соответствующие слайсы по первому требованию, поэтому я повторяю эту операцию три или четыре раза. Когда всё будет готово, появятся чёрные пронумерованные блоки.



Шаг тринадцатый


Для сохранения сделанных слайсов, используйте File > Save for Web & Devices.... Выделяйте с помощью Slice Select Tool (k) нужные для сохранения слайсы. Вы можете выбрать несколько таких блоков, зажав Shift. На панели справа выберите нужные вам параметры сохранения изображений. JPEG, например, больше подходит для изображений с несколькими цветами, GIF — для изображений с маленьким числом цветов и большими однотонными областями, а PNG — для сохранения прозрачности в изображениях (однако же, вам предстоит встретиться с чудаком по имени Internet Explorer в случае использования последней). Выберите нужное вам качество (можете поиграться с настройками) и нажимайте Сохранить.



Шаг четырнадцатый


Выберите место для сохранения файлов. Я выбрал Рабочий стол. Не забудьте выставить в поле Format значение Images Only.



Шаг пятнадцатый


На вашем рабочем столе появится папка с именем Images. Внутри — слайсы, которые теперь стали изображениями.



Шаг шестнадцатый


Очистите все направляющие командой View > Guides > Clear Guides. Далее, нарисуйте направляющие вокруг тех объектов, которые вы намерены разрезать сейчас. При наведении указателя на меню, оно должно менять свой цвет. Вам нужно разрезать его для всех используемых вами оттенков.



Шаг семнадцатый


Выберите слайсы, которые вы хотите сохранить. Навигация в моём примере как раз подходит для сохранения в GIF (не содержит изображений и большого количества цветов). Если вы хотите использовать обычные шрифты, то вам следует оформить нафигацию с помощью HTML.



Шаг восемнадцатый


Назовите изображения как вам угодно. Если вам не хочется этого делать, их имена будут выбраны автоматически.



Шаг девятнадцатый


При сохранении изображений в ту же папку, что и в прошлый раз, она будет содержать и новые, и старые изображения. Не забудьте повторить шаги 16-18 для других состояний кнопок навигации.



Шаг двадцатый


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

Другой метод создания слайсов заключается в выделении объекта и выполнении команды Object > Slice > Create from Selection. Вы можете использовать любой способ для создания слайсов, какой больше нравится.



Шаг двадцать первый


В определённых случаях вам не понадобится написанный прямо в Illustrator текст, поэтому вы его можете спокойно удалить (до экспорта слайсов).



Шаг двадцать второй


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



Крайний шаг



Посмотрите ещё раз на то, что у нас получилось.



Я уверен, что вы почувствовали лёгкость при работе с Adobe Illustrator. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.
Поделиться публикацией

Комментарии 159

    +27
    До сих пор ни одного Спасибо?? Странно :) Значит буду первым :)
      +1
      Отличная статья, тоже самое делаю, только в Corel Draw. (это уже дело вкуса:)
      Делать макет гараздо легче (в Corel или AI) чем в Photoshop-e :)
      И материал хорошо представлен. Спасибо+
        +7
        А в фотошопе вам что мешает? «Нарезка» осуществляется аналогичным способом. Так же есть составляющие и те же инструменты для работы с ними (в версиях до CS2 все это было вынесено в Имеджреди), так же есть необходимый минимум для работы с векторными объектами. К тому же для веба нет разницы в механизме хранения и отрисовки графики, при отсутствии необходимости в маштабировании результата, в растре или векторе не имеет значения, а инструментарий примерно одинаков (есть редкие исключения как Бленд, патерны или пространственная трансформация, которые, в контектсе статьи, не важны).

        Мне действительно интересно, какие качества делают для вас Корел и Илюстратор более продуктивными, для подготовки макета сайта, в сравнении с Фотошопом? Просто я сам, по выше означеным причинам, никакой разница, в контексте поставленой задачи, не вижу.
          0
          Насчёт Иллюстратора сомневаюсь, а вот в Индизайне гораздо (ГОРАЗДО) проще работать с текстовым контентом и цветами-стилями. Речь идёт, разумеется, об информационно-насыщенных сайтах.
      +4
      супер! спасибо тебе огромное!
        +9
        Наконец то появились обучающие дизайн-топики, ура товарищи!
          +17
          Я бы добавил, что аналогично все делается и в Photoshop.
            +8
            Адоб линейка «коренного» софта… как обычно, хороша…
            А в нашей «дыре»… некотрые до сих пор присылают баннеры в Кореле… ) «пожалуйста, вставтье на сайт»…
              +1
              Это потому, что у вас, в данной области, в основном работает «старшее покаление». А причина проста, Корел первый на постсоветском пространсве дал адекватный инструментарий для цветоделения и потому долгое время являлся стандартом в полиграфии. По этой же причине, до сих пор, в акридетованых государством вузах у нас в стране, на факультетах дизайна основной упор делается на работе именно в Кореле. Преподаватели представители упомянутого «старшего поколения». Ситуация изменилась а перестроились не все, дабы использовать появившиеся плюсы.
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Inkscape будет удобнее только для людей макетирующих страницу и в последствии ее верстающих. Сзязано это с наследственностью HTML и SVG от их прородителя XML.

                Из опенсорсного для макетирования и верстки текста больше подходит www.scribus.net/
              +8
              Очень понравилась мысль добавлять подложку в виде окна браузера.

              Ну и как обычно: VOTE Dinamyte! [x]
                0
                Ты уже готовишь сюрприз Хабрапользователям? ;-)
                  –1
                  готовлю, готовлю…
                  0
                  Да, верно, так и заказчику превьюшки делать проще.
                    0
                    Только добавлять приходится не интерфейс Сафари и не Оперы с Файрфоксом, а IE 6. К сожалению.
                    0
                    и здесь пг-агитация?
                      0
                      Тссс…
                        0
                        Извините, вырвалось © :-)
                      +1
                      Почему не сделать хтмл файл с картинкой? гораздо наглядней.
                      +3
                      Плюс за верстку в векторе. Хотя конкретно Illustrator как инструмент верстки я не перевариваю, т.к. привык к другому, двумя руками за использование векторных редакторов в качестве инструмента верстки веб-макетов.
                        +4
                        мне вот Fireworks приглянулся больше…
                        правда у меня первое впечатление
                          +2
                          Пробовал, но отказался, т.к. лично мне не удобно. Хотя, если по логике и возможностям пакета — Fireworks должен лучше все подходить.
                            –3
                            Dreamweaver?
                              +1
                              Вопрос о чем? Dreamweaver — редактор кода
                                0
                                Ступил конечно, извините.
                              0
                              На Fireworks сижу уже давно, когда показываю народу, который в ФШ делают сайты как это делается в FW — пересаживаются, привыкают потом.
                                0
                                вполне может так оно и есть, ведь FW создавался как редактор для Мультимедиа и веб, а в Photoshop это всего-лишь одна из функций.

                                Лично я предпочитаю работать в векторе… хотя, возможно и надо попробовать последние версии FW — моежт понравиться.
                                  0
                                  В FW есть немного от векторного редактора, а может и много, за и люблю его, за универсальность. Единственное что смущает, так это тормознутость PNG-формата, особенно когда много слоев и элементов.
                              0
                              Мне в своё время пришлось отказаться от Fireworks'а, как инструмента верстальщика т.к. он не полностью поддерживает формат PSD от Photoshop CS3. Хотя имено для управления slice'ми он, imho, подходит куда больше.
                                +1
                                а я решил для себя эту проблему экспортом в PNG. ведь обычно все слои при верстке не нужны и их можно объединить в несколько групп которые затем экспортируются в PNG и собирются в кучу в FireWorks (это если нужно какие-то слои скрывать при шинковке, а иногда можно и одной PNG-шкой обойтись). а шинкую всеравно в FireWorks, имхо каких бы усилий по подготовке оно не требовало, обычно они оказываются меньше затрачиваемых на шинковку в Photoshop :")
                                  +1
                                  Тоже вариант :))
                                  Я же просто вернулся в ImageReady (тем более, что в Linux'е ветка CS3 пока нормально не работает)
                                    0
                                    o_0
                                    про ImageReady я как-то совсем забыл :") а ведь он есть и вроде как для этого и придуман был… а я все «фотошоп, фотошоп...» просто еще с 5.5 его невзлюбил и никогда не ставил. надо бы посмотреть что-ли…
                                      0
                                      а я по старинке 8-м FireWorks пользуюсь, CS-редакция fireworks у меня оргазма не вызвала при беглом осмотре… а вот фотошопа вызвала, за сим оный юзаю из CS3 :)
                                  0
                                  не знаю… если мне надо что-то нарисовать то Photoshop + Corel Draw (в былые времена я с ним очень плотно работал, поэтому для меня он удобнее)
                                  а вот нарезать и оптимизировать графику всегда перебираюсь в FireWorks, в нем работа с кусками лично мне кажется гораздо удобнее… взять хотя бы возможность для каждого слайса указать имя — все под рукой, добраться — одно движение мышкой (жаль хоткея для этого нет, ну или я не в курсе). как задать имя в фотошопе (кроме как через контекстное меню, Edit Slice Options) я не знаю :")
                                  ну и еще куча мелочей… в общем удобнее инструмента для шинковки я пока не знаю :)

                                  З.Ы.: а рисовать в нем лично мне не удобно. возможно это из-за странной смеси растра с векторами которую мой мозг не в состоянии осилить. имхо, удобнее вектор править в векторном редакторе а растр в растровом :)
                                    +1
                                    Двойной клик в ФШ имя задает
                                      0
                                      спасибо :")
                                  –1
                                  Почему вёрстка? Не будет ли более логичным назвать процесс прототипированием макета? Вёрстка — это манипуляции с кодом-разметкой среди всего прочего.
                                    0
                                    Вёрсткапроцесс формирования страниц (полос) издания путём компоновки текстовых и графических элементов ()

                                    Протипированиеэто быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом

                                    Когда рисуется весь макет, а не его набросок — это верстка
                                      0
                                      Я согласен с вами в части определения вёрстки для печати. Но в данном случае речь идёт об интернете и ваш аргумент в контексте сайтоствроения неприменим.

                                      Если у вас верстальщик рисует в иллюстраторе, то кто же занимается собственно вёрсткой — html-кодом и шаманством с css? И что тогда делает дизайнер?
                                        0
                                        Верстальщики ничего не рисуют Они лишь вертсают заранее определенный макет. Однако, дизайнеры могут верстать, если делается макет.

                                        Уходить в спор желания нет. Скажу лишь две вещи:

                                        — Многим не нравиться называть создание макетов дизайна страниц версткой, т.к. большинство использует для этого программы «графические редакторы» для рисования.

                                        — Прототипирование можно отнести только к созданию черновой «рыбы» сайта.
                                          +1
                                          В части прототипирования полностью с вами согласен.

                                          В отношении дизайна/вёрстки я могу сказать, что как раз и отношусь к тем людям, которые отделяют макетирование от вёрстки. Даже не в силу используемого инструментария, сколько по результату на выходе. Я имел удовольствие достаточно долгое время работать в полиграфии, чем и обусловлено такое мнение. Возможно, оно в некоторой мере догматическое, но уж точно не является основанием для спора, как вы совершенно справедливо заметили.
                                          0
                                          Как-то беседовал с полиграфическим дизайнером из одной компании про процесс создания сайта. Он ФШ вообще не открывал ни разу. Чот мы друг друга не понимали, и тока потом доперло, что он верстальщиками называет веб-дизайнеров, создателей макета. Тут, видимо, такой же случай.
                                          0
                                          Прототипирование вы опять же в процесс разработки дизайна притягиваете за уши из контекста разработки ПО. Тем не менее, согласен с вами в части того, что в описанном случае делается готовый продукт, а не прототип
                                      –25
                                      fotoshop forever :)
                                        +19
                                        Grammar forever!
                                          –5
                                          лишь бы придраться…
                                            +1
                                            Ну что вы, ни в коем случае. Кому-то нравится Fotoshop, кому-то грамматика… ))
                                              0
                                              с просоня не грех и ошибиться…
                                                +1
                                                Судя по тому что вы и сейчас ошиблись — вы и сейчас дремлете ))
                                                  –5
                                                  нет, просто в школе по русскому тройка была…
                                        +2
                                        Эх, как я мечтал о книге с подобными примерами в начале своего веб-пути ))

                                        Уверен что тем, кто только начинает знакомится с веб-дизайном и версткой топик будет очень полезен,
                                        т.к. раскладывает процесс по полочкам
                                          +1
                                          Semicolon — это точка с запятой, а не запятая, как у вас написано в четвертом шаге.
                                            +1
                                            Спасибо. Рука дрогнула, когда печатал. ;-)
                                            0
                                            очень красиво получилось, спасибо!
                                              +3
                                              Fireworks forever
                                                +4
                                                Напишите пожалуйста подобную статью, как это сделать в Fireworks :) Вот тогда будет точно Forever!
                                                +1
                                                Замечательное руководство. Спасибо.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    +3
                                                    предлагаешь использовать графический редактор Adobe Photoshop?
                                                      +4
                                                      а что насиловать?
                                                        0
                                                        Он предлагает использовать программы согласно их специализации. В данном контексте для верстки ИнДизайн или Кварк, так как в них для этого гораздо больше возможностей и делается соответственно быстрее и проще.
                                                          +1
                                                          акститесь,
                                                          для вэб макетов кварк? оО
                                                            –1
                                                            Для макетирования как такового. Для примитивного макета разницы в производительности не будет, но при макетировании крупных проектов выгода на лицо. Причем дело именно в объеме рнабот, а не в сфере. Для верстки визитки или корпоративного бланка так же нет необходимости во всем функционале Кварка, Индизайна и иже с ними.

                                                            Косательно же веба и именно макетирования простых страниц (причем 1 или 2, а не большого их колличества с разнящейся структурой). Лично я вообще использую только SciTE из програмного обеспечения. В моем случае, это помимо удобства в работе приносит дополнительный доход при тех же временных затратах.
                                                              0
                                                              подумав соглашусь по поводу кварка…
                                                              а вот последний тезис не поясните?)
                                                                +1
                                                                Поясню конечно =) Я не только создаю дизайн сайта, но и верстаю его. Так сложилось исторически (хочешь чтобы было хорошо сделано — сделай это сам). Как следствие — отсутствие этапа графического макетирования. Придумываю концепцию, составляю перечень необходимых на странице элементов, на листах бумаги проектирую их расположение на будущей странице, рисую иллюстрации и иконки и сразу приступаю к верстке шаблона для чего пользуюсь SciTE (простенький текстовый редактор, вроде виндового «блокнота», но кросплатформеный, с корректной поддержкой UTF-8, и подсветкой синтаксиса). Как видете стадия создания картинки «так это должно смотреться в браузере» пропущена за ненадобностью.
                                                      +1
                                                      спасибо, согласен с предыдущим постом. Для того что здесь было показано, есть фотошоп, в котором это делать удобнее. а скетч получился визуально достаточно приятным :)
                                                        +1
                                                        хотя каждый сам выбирает себе, что ему удобнее.
                                                        +6
                                                        Еще несколько мини советов по работе в Illustrator
                                                        1) Масштабируем свой макет с помощью горячих клавиш ctrl + и ctrl — 2) Используем инструмент Align для выравнивания элементов:
                                                          +1
                                                          Если два текстовых блока с разным размером шрифта, то ничего хорошего из такого выравнивания не выйдет, нужно в кривые переводить.
                                                            0
                                                            … приимбедить картинки и отправить в типографию )))
                                                          +1
                                                          Forever forever! =)
                                                            +2
                                                            «Создадим новый документ длиной 960px» Откуда у документа длина? ))
                                                            Такого понятия нет. Исправьте на ширину.
                                                            Пользуйтесь словарем!
                                                            Не путайте новичков в этом вопросе.
                                                              +1
                                                              Будь по вашему!
                                                              +3
                                                              Illustrator — для продвинутого рисования иллюстраций в векторе.
                                                              Photoshop — обработка изображений и коллаж, растровая (пиксельная) графика, основные возможности вектора, порезка и оптимизация изображений.

                                                              Исходя из этого, как ни крути, но фотошоп — намного более подходящий инструмент для создания макетов веб-страниц, а в статье учат на болиде Формула-1 перевозить мебель. ИМХО.
                                                                +3
                                                                Добавьте сюда еще и Fireworks — и будет законченая картина! На самом деле, для разработки дизайна страницы Фотошопа тоже «много». В Фотошопе есть смысл готовить отдельные сложные элементы дизайна. А вот именно в Fireworks'e все заточено под веб макеты, причем многостраничные, с установкой Master Page, с расшариванием лаеров по страницам и много многое другое…

                                                                Дело в том, что многие коллеги просто уже очень давно привыкли работать в Фотошопе. И для них не было особого смысла обращать внимание на слабенький продукт от Macromedia. Теперь же, все сбалансировано и интегрировано, взаимная поддержка лаеров и эффектов и т.д.

                                                                Ну а что касается вебмакетирования в Иллюстраторе — простите, но это как минимум, непрактично. Хотя, имеет смысл для тех, кто не владеет ничем, кроме Иля, но очень хочет нарисовать сайт! ;-)
                                                                  0
                                                                  C Fireworks не знаком, но обязательно познакомлюсь, пасиб )))
                                                                    0
                                                                    Хм. Буду ставить и пробовать. Спасибо.
                                                                      0
                                                                      С появлением в торрентах Master Collection CS4, думаю, подсаживание народа на фворкс — вопрос времени ;)
                                                                        0
                                                                        да вообще то еще с версии MX от Macromedia проблем не было…
                                                                        0
                                                                        я уже много лет им пользуюсь. Заказчики довольны :)
                                                                          0
                                                                          да заказчикам вообще-то без разницы каким инструментом вы пользуетесь — главное результат!
                                                                      0
                                                                      не могу голосовать, так что тут напишу_) СПАСИБО!
                                                                        –7
                                                                        На 11-м шаге закончил чтение. Ибо в WYSIWYG-редакторах верстают только мудаки.
                                                                          0
                                                                          WYSIWYG — отличная штука. Никто не заставляет верстать в Design Mode. Но всегда удобно иметь возможность что-то поправить, не копаясь в коде. Ну и так далее.
                                                                            +1
                                                                            а мне в DreamWeaver'е сплит нравится… в дизайне мышом ткнул куда надо в коде оно само отыскалось не надо лишний раз бегать туда сюда глазами и скроллить в поисках интересующего куска кода. да и вставки примитивных тэгов/структур удобнее… ну лень иногда ради выделения жирным или разбиения на параграфы в код лезть. и заголовки удобнее хоткеями расставлять в дизайне нежели H1 — /H1 ручками набивать…
                                                                            +1
                                                                            Вы так хорошо знакомы со спецификациями HTML (XHTML), чтобы не допускать ошибок в структурной разметке? WYSIWYG- редакторы как раз и служат для этого, чтобы не путать, например,
                                                                            с
                                                                            там где это необходимо.
                                                                              0
                                                                              забыл что html здесь работает
                                                                              <br> c <br />
                                                                                +1
                                                                                Ну XHTML 1.0 подразумевает закрывание даже одиночных тегов, поэтому однозначно.
                                                                                Если не использовать презентационные теги, то все достаточно просто.
                                                                                А использование WYSIWYG для подсветки синтаксиса — это забивание гвоздиков любимым микроскопом.
                                                                                  0
                                                                                  Как вы собрались WYSIWYG-редактором подсвечивать синтаксис? он собственно и предназначен, для того, чтобы этот самый синтаксис не видеть =)

                                                                                  не подумайте, что я придираюсь, просто похоже мы говорим о несколько разных вещах
                                                                                    –1
                                                                                    Собственно, использование WYSIWYG — это практически то же самое, что ремонт автомобиля, не открывая капота. Отвалился глушитель? Нет проблем! Мы его на проволочку, выглядеть будет как новый!
                                                                              +5
                                                                              по-моему верстать можно в чем угодно, зависит от цели.

                                                                              А вот штампованные фразы «виндовс-сакс, линь рулит» лепят только мудаки.
                                                                                +6
                                                                                Это не вёрстка, это нарезка.

                                                                                А ещё — это  п е р е в о д…
                                                                                0
                                                                                А где ссылка «скачать»? ;)
                                                                                Хорошая работа :)
                                                                                видоподкаст был в тему!
                                                                                  +1
                                                                                  Для макетов посложнее придется переключаться в фотошоп (например растровые иллюстрации), но для простых сайтов вполне себе инструментарий. Особенно, если используются рисованные вектором элементы дизайна.
                                                                                    0
                                                                                    для того что бы слепить шкурку для фордпреса за 20 минут, да подойдет))))
                                                                                      +1
                                                                                      Мне показалось, что статья ни о чем. Зачем тут иллюстратор так и не понял.

                                                                                      А вот это:
                                                                                      > вы можете полностью контролировать процесс создания макета страницы.
                                                                                      простите, ппц полный.
                                                                                      Сразу представился редактор со злобным ИИ, который мешает в работе :)
                                                                                        +2
                                                                                        Такс
                                                                                        во первых иллюстратор это программа не для создания макетов, создавать макет в иллюстраторе мягко говоря бред… из пушки по воробьям стрелять…
                                                                                        Во вторых )) по поводу "> вы можете полностью контролировать процесс создания макета страницы." — согласен с tema_sun на стотыщмильонов процентов ))))

                                                                                        в третих )))
                                                                                        Видно то что это написано не проффесионалом, так как фраза типа «что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.» сразу показывает то что, человек не хочет/знает о сетке))

                                                                                        Про визивиг ))) это еще то

                                                                                        Вобщем не проффесионально, безполезно, неправильно.
                                                                                          –1
                                                                                          абсолютно согласен, мягко говоря удивили первые комментарии после статьи и их оценки, имхо
                                                                                          0
                                                                                          И еще нельзя забывать о том, что дизайнер, работающий над макетом, должен иметь возможность ВИДЕТЬ как графика будет выглядеть после растеризации в виде битмапа при зуме 100%. В Иллюстраторе же, работая с векторной графикой, вы можете только об этом гадать…

                                                                                          И все почему — потому что Иллюстратор создан совершенно для других задач!
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                              +2
                                                                                              Вообще согласен, но в иллюстраторе есть режим работы с просмотром растерезированной графики (т.е. при >100% ты видишь отрендеренные пиксели, хотя и продолжаешь работать с вектором)
                                                                                                0
                                                                                                прошу прощения, не знал! Спасибо!
                                                                                                  +1
                                                                                                  Только-что проверил:
                                                                                                  называется Pixel Preview
                                                                                                  Viev -> Pixel Preview (Alt-Ctrl-Y)
                                                                                              0
                                                                                              Время от времени сам использую Люстру для веб-макетов. Может быть, это сугубо индивидуально, но скорость выполнения некоторых операций возрастает (по сравнению с Фотошопом). Думаю, это происходит за счет того, что в одном слое может быть несколько элементов (блоки, текст, линии), которые можно выделять одним кликом непосредственно на макете, а в Фотошопе с этим все проблематичнее, как правило, на один объект нужен один слой, и управляется он опосредованно, через субменю.

                                                                                              Но есть и минусы. Среди них:
                                                                                              — невозможность выбора режима отображения текста без сглаживания (из-за этого утрачивается связь с реальным видом страницы в браузерах);
                                                                                              — невозможность автоматически подчеркнуть выделенный текст для обозначения ссылок, приходится городить линии, что несколько затрудняет и замедляет работу.
                                                                                              — какую-то навороченную графику зачастую удобнее делать в том же Фотошопе, но, опять же, это может быть индивидуально.
                                                                                                +2
                                                                                                «невозможность автоматически подчеркнуть выделенный текст для обозначения ссылок, приходится городить линии, что несколько затрудняет и замедляет работу.»

                                                                                                Я, может быть, неправильно понял, но текст в иллюстраторе можно подчеркнуть (нажать ctrl+T, и в появившейся палитре внизу слева будет значок подчеркивания. Если нет, нужно в опциях панельки выбрать show options)
                                                                                                  0
                                                                                                  Благодарю! Просто по старинке использовал 10-ю версию, а не CS3
                                                                                                  +1
                                                                                                  > невозможность выбора режима отображения текста без сглаживания (из-за этого утрачивается связь с реальным видом страницы в браузерах)

                                                                                                  тут половина негативных коментариев про иллюстратор написаны людьми, которые, мягко говоря, совершенно себе не представляют его возможностей…

                                                                                                  для того чтобы убрать антиалиасинг с текста нужно выделить текстовый блок, зайти в меню Effects, выбрать Rasterize, разрешение 72 ppi и в меню Anti-aliasing — No (кстати, на маке и линуксе «реальный вид страницы» как раз со сглаживанием :-)

                                                                                                  для того же подчеркивания и т. п., то есть для форматирования текста можно задавать стили (есть, кстати, и графические стили)

                                                                                                  для того чтобы посмотреть макет в реальном разрешении страницы, нужно нажать Ctrl + 1

                                                                                                  а вообще, рекомендую осваивать индизайн
                                                                                                  (на заметку: для правильного отображения прозрачностей нужно в меню Edit > Transparency Blend Space нужно выбрать Document RGB, и не забудте использовать именно RGB цвета)

                                                                                                  P. S. Глядя на то как люди работают в Иллюстраторе захотелось написать учебник.
                                                                                                  Это кому-нибудь интересно? Можно сделать цикл статей на Хабре и осветить там именно то, что может помочь в веб-дизайне. Хотя я тут недавно, и еще некоторое время, наверное, кармы не хватит на топик…
                                                                                                  +1
                                                                                                  Мде… Некоторые забыли что это топик-перевод…
                                                                                                    0
                                                                                                    Ну и я вместе с вами: InDesign forever!
                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                      0
                                                                                                      Сайты и индизайн — то-же, что векторная графика и 3д макс.
                                                                                                      О чём вы?
                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                          0
                                                                                                          Территория InDesign — бумажная вёрстка. С нерезиновым размером листа, подключаемыми шрифтами, полями, обрезами, разворотами, фолдами, многоколоночной вёрсткой, обтеканием текста, колонтитулами, буквицами, оглавлением, врезками, лидами, блидами, цветовым делением… (я могу долго так продолжать :)

                                                                                                          InDesign вообще к вебу отношения не имеет никакого.

                                                                                                          И даже, если предположить, что в нём можно делать наброски будущих веб-страниц, то это просто потеря времени. Тем более, для больших сайтов.
                                                                                                            0
                                                                                                            InDesign вообще к вебу отношения не имеет никакого.

                                                                                                            а мужики-то и не знали…

                                                                                                            Adobe® InDesign® CS4 software breaks down the barriers between online and offline publishing.
                                                                                                              0
                                                                                                              не верьте рекламе (с) :)

                                                                                                              Речь идёт либо о банальном pdf, либо о совершенно несерьёзной функции «export to dreamweaver».
                                                                                                              Всё, что этим можно добиться — выплюнуть голый контент в html, обёрнув блоки дивами. И всё. Без всяких стилей, позиционирования, css вообще!

                                                                                                              Другими словами, Microsoft Word в таком случае — в стопицот раз более мощный инструмент для веб-вёрстки. ;)
                                                                                                              0
                                                                                                              Наоборот, большие сложные сайты и интерфейсы в индизайне делать удобнее — как сказали выше, это гибкая работа с текстовым контентом и большой упор на стили-шаблоны-наследование. Опять же, очень удобная система наследуемых друг от друга мастеров — закинуть туда хедеры-футеры, основную разметку, а на страницах менять лишь информационное наполнение и иллюстрахи.

                                                                                                              Я говорю прежде всего об информационных ресурсах, а не про промо-сайты.
                                                                                                                0
                                                                                                                Постойте. Вы видели индизайн?
                                                                                                                Для создания интерфейсов там вообще нет ни одного инструмента.

                                                                                                                Поймите, абстракция индизайна — это лист бумаги. Конечного размера. Со всеми вытекающими.

                                                                                                                Не верите, попробуйте сами.
                                                                                                                  0
                                                                                                                  Эмм… Ну это смотря что вы под «интерфейсами»и что под инструментами подразумеваете :) Я кагбэ последние пару лет занимаюсь созданием сложных биржевых интерфейсов: прототипирую в нём (вне конкуренции!) и потихонечку переползаю на навешивание рюшечек в нём же. Мне — удобно, но я на истину в последней инстанции не претендую, да.

                                                                                                                  Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
                                                                                                                  img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
                                                                                                                    0
                                                                                                                    Эмм… Ну это смотря что вы под «интерфейсами»и что под инструментами подразумеваете :) Я кагбэ последние пару лет занимаюсь созданием сложных биржевых интерфейсов: прототипирую в нём (вне конкуренции!) и потихонечку переползаю на навешивание рюшечек в нём же. Мне — удобно, но я на истину в последней инстанции не претендую, да.

                                                                                                                    Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
                                                                                                                    img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
                                                                                                                      0
                                                                                                                      Прототипы и скетчи — да, вне конкуренции, согласен! Я вообще считаю индиз лучшим продуктом у Adobe. Но мы же изначально говорили о веб-вёрстке, или я вас неправильно понял?
                                                                                                                        0
                                                                                                                        Нет, я говорю про создание эскиза как такового, особенно если речь идёт про что-то многостраничное или часто обновляемое. Далее всё это щастье отдаётся фронт-енд разработчику, который нарежет всё как ему надо, сверстает и т.п. Я не думаю, что профессиональнгый фронт-енд использует фотошопный слайсинг, разве что в очень ограниченых случаях, а дизайнеру оно нужно по-моему ещё реже.

                                                                                                                        Я вообще слабо понимаю последнюю часть статьи, где идёт речь про нарезку на файлы с именами типа «website_copy_21.jpg» :)
                                                                                                                          0
                                                                                                                          Да. Я с вами вполне солидарен. Просто эта ветка началась со слов:
                                                                                                                          Замечу, что верстку больших сайтов удобнее делать в InDesign (на то она и верстка).
                                                                                                                          ну да ладно, не будем больше оффтопить.
                                                                                                                            0
                                                                                                                            оки :) видимо, «вёрстку» здесь употребили в полиграфическом контексте, что оказалось чревато.
                                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                0
                                                                                                                                Товарищь! Сверстайте пожалуйста, что-нибудь несложное, для примера. Буквально 3-4 параграфа. В индизайне. И дайте ссылку на получившийся html.

                                                                                                                                Потому что, либо я идиот, либо вы говорите о том, чего никогда не делали.
                                                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            +1
                                                                                                            Блин, а только я один предпочитаю нарезать макет в процессе работы, а не сразу на много файлов?)
                                                                                                              +2
                                                                                                              Это кому как нравиться. Я вообще «режу» картинки вручную без всяких слайсов. Но только потому, что мне так удобнее.
                                                                                                                0
                                                                                                                Ну да, я вот тоже без слайсов, в ручную =)
                                                                                                                Просто прочитал топик, подумал, может я что-то вопиюще не правильно делаю =)
                                                                                                                  0
                                                                                                                  Я об этом уже давно не думаю, т.к. перепробовал различные подходы и сейчас использую единственно-удобный для себя.
                                                                                                                    0
                                                                                                                    Слайсы очень полезны, когда вёрстка рутинная (например, огромное количество однотипных элементов / в однотипных макетах). В остальных случаях, особенно на этапах обучения верстке, полезно повырезать элементы вручную, чтобы научиться держать в голове варианты наложений слоёв и увидеть все возможные варианты нарезки макета (часто за рутиной можно обнаружить более удачный вариант)
                                                                                                                  –1
                                                                                                                  Честно говоря, это менее продуктивно. На мой взгляд, лучше сразу нарезать и не дёргаться потом стотыщ раз.
                                                                                                                  0
                                                                                                                  а вот зачем? если есть фотошоп
                                                                                                                    0
                                                                                                                    Сайты бывают разные.
                                                                                                                    Зависит от необходимости в пиксельной точности.
                                                                                                                    Собственно, в последнее время бытовая необходимость в ней всё падает и падает…
                                                                                                                    С другой стороны, при первом уклоне в «фотографический дизайн» макет должен плавно перекочевывать в шоп и алиаситься уже там.
                                                                                                                      +1
                                                                                                                      не стоит даже начинать, тут нет ничего такого что нельзя или проще сделать чем в шопе
                                                                                                                        0
                                                                                                                        Например, направляющие в илле — объекты, которые можно группировать, перемещать на разные слои. Много чего там ещё удобнее. Те-же банальные скругления углов…
                                                                                                                          0
                                                                                                                          фотошоп уже миллион лет поодерживает скругление углов. на выходе — shape который масштабируется и редактируется легко и понятно.
                                                                                                                    0
                                                                                                                    спасибо!
                                                                                                                    а теперь бы следующий шаг, для друпала)
                                                                                                                      +1
                                                                                                                      Точно! Даёшь плагин для фотошопа с однокликовой вёрсткой темы для друпала!

                                                                                                                      (и модуль для друпала с переброской любой темы в фотошоп?)

                                                                                                                      ;)

                                                                                                                      PS: А если серьезно, что, такая статья и правда нужна? Какой именно темный движок интересует?
                                                                                                                      +1
                                                                                                                      Мое личное мнение — для каждой задачи свой инструмент. Создание макетов сайта — FireWorks!!!
                                                                                                                        +1
                                                                                                                        Файрворкс, да.
                                                                                                                        Использовать для создания скетчей не для того созданные монстры типа Illustrator или Photoshop — либо маразм, либо незнание.

                                                                                                                        Если бы Адоб FW ещё отдельно от CS раздавал. Впрочем, спасибо Адобу, что не загубил.
                                                                                                                          0
                                                                                                                          ну я даже не знаю… пробовал CSы но вернулся на 8-й :")
                                                                                                                          видимо это всё из за злобных привычек… у меня один знакомый до сих пор предпочитает работать во FreeHand'е если есть такая возможность (не веб, под бумагу) хотя уже много лет работает с AI…
                                                                                                                          0
                                                                                                                          Я уже как-то заплутался в чем лучше макет делать.
                                                                                                                          Раньше думал, что фотошоп для всего подходит.
                                                                                                                            0
                                                                                                                            Фотошоп подходит для сборки макета. Вообще не суть в чем делать. Главное — чтобы удобно было и привычно.

                                                                                                                            В Фотошоп, без проблем, всякие векторные объекты из Иллюстратора можно переносить как SmartObject. Все прекрасно работает…

                                                                                                                            Да и вообще не стоит запариваться где НАДО делать, важно другое — где УДОБНО делать :)
                                                                                                                            0
                                                                                                                            Сборка макета в Illustrator во многом быстрее аналогичной работы в Photoshop. Однако требуется особая тщательность и аккуратность, особенно при работе с линиями.

                                                                                                                            В частности, необходимо вот таким вот образом установить метку привязки в палитре Align (прошу прощения, если об этом уже говорили):


                                                                                                                            кроме того, в том Illustrator CS3, что гуляет по России есть баг с перетаскиванием слайсов, а так же мега-баг: при создании файла с указанием размера в пикселах, мы видим Crop Area нужного нам размера, но при этом ArtBoard принимает чудовищные размеры 14400х14400 пикселов. В результате Illustrator отказывается выполнять команду Save for web. Лечится просто — идём в File > Document Setup и ставим нормальные значения для Artboard.

                                                                                                                            Итого: для собственных работ, которые и верстаем самостоятельно Illustrator очень даже может пригодится, а вот при вёрстке чужими руками стоит десять раз подумать.
                                                                                                                              0
                                                                                                                              Отличный совет, как пересесть с фотошопа на иллюстратор. Стоит задуматься
                                                                                                                                +1
                                                                                                                                На выходе мы должны получить растровые изображения, глупо для этого использовать векторный редактор.
                                                                                                                                  0
                                                                                                                                  Не обязательно. SVG никто не отменял. Кроме того, вектор дает большую свободу при масштабировании.
                                                                                                                                  0
                                                                                                                                  Не могу понять, чем не устраивает растр.
                                                                                                                                    0
                                                                                                                                    О, дабы тема развивалась, вспомню, что один раз использовал Кварк 7.0 для «скелетного» макетирования будущего большого сайта. В принципе, остались неплохие впечатления
                                                                                                                                      0
                                                                                                                                      Уже год, как бросил рисовать сайты в фотошопе, и переехал на иллюстратор. (Хотя что значит переехал… в любом случае копипастный экспорт туда обратно использую и много пнг-гифов разных через фотошоп готовлю)… но это технология… работаю под движки, а там как правило мало картинок — много верстки.

                                                                                                                                      Могу сказать свое имхо мнение. Для сайтов — «большая картинка и три ссылки» — проще полностью в фотошопе, зачем заморачиваться. Сайты с заметным текстово-ссылочным объемом ЗАМЕТНО удобнее рисовать в AI. В Индизайне я бы стал делать проекты, где заказчик требует отрисовать до полного финиша большое количество страниц. Но в любом случае… Фотошоп для картинок тоже нужен ))) почти всегда. А АИ для вектора… так что спор несколько… «что лучше — плоскогубцы или напильник».

                                                                                                                                      И я например в иллюстраторе часто тект пишу-редактирую.

                                                                                                                                      Так что для меня расклад такой:

                                                                                                                                      Маленький «красывый» сайт: Фотошоп
                                                                                                                                      Средний «почитать» сайт: Фотошоп — Илюстратор
                                                                                                                                      Большой «мэга-портал» сайт: Фотошоп — Илюстратор — Индизайн (или кварк или...)

                                                                                                                                      Ну и TopStyle + UltraEdit + FireBug + Drupal
                                                                                                                                        0
                                                                                                                                        И все это — вы один? Ну вообще — вы Ас!
                                                                                                                                        p.s. Можно пример сайта
                                                                                                                                        0
                                                                                                                                        Диву даюсь. Как вы векторные редакторы используете для растровой графики? На слайсы порезать и растрировать две задачки такие разные слегка. Хочу сказать, что если верстать по-хорошему то нужно со всеми картинками работать в индивидуальном порядке. Имеются в виду закгругленные уголки, прозрачные всякие слои на странице, градиенты на прозрачность.

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

                                                                                                                                        В любом случае финальный растровый результат следует в растровом редакторе делать. FW/PS.

                                                                                                                                        Что до меня, то векторную графику я оптимизирую и растрирую через фильтры в АИ и импортирую в ФШ как смарт-объекты.

                                                                                                                                        Tschüss.
                                                                                                                                          0
                                                                                                                                          Мы меня конечно же простите, но то, что описано выше, ерунда полная. Я бы даже сказал, издевательство над самим собой. Есть конечно куча способов выкопать яму, первый. это лапатой, второй ложкой. так вот, строители копают лападами, автор же взял почему-то ложку. Нарезку слайсов и прочий вектор умеет отлично делать фотошоп.
                                                                                                                                            0
                                                                                                                                            Наш дизайнер юзает фотошоп и все довольны пока что были)
                                                                                                                                            Можете зайти сюда — оценить наш сайтик, также сайты клепаем.

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

                                                                                                                                            Самое читаемое