Illustrator и верстальщик. м. баранов. зал 3

Illustrator и верстальщик

Михаил Баранов

Не про Illustrator•2007 — Ольга Алексашенко. «Как воспитать дизайнера»

web-standards.ru/articles/coder-vs-designer/

•2009 — Вадим Макеев. «С ножом против паровоза»pepelsbey.net/2009/02/with-knife-against-train/

•2009 — Артём Шитов. «Индизайн как инструмент рисования сайтов»leprosorium.ru/comments/590309

1999

Сайт, как многополосное издание

Макет листовки в фотошопе

Макет журнала в фотошопе?

Ок, без холивара• Иногда лучше в фотошопе• Но многие макеты в Illustrator получаются

качественне

Дизайнер начинает думать

Дизайнер начинает думатьпо другому

Чем Illustrator лучше?

Чем Photoshop!

Всё – объект (почти ООП)• Форма• Контур• Заливка (любая)• Эффекты

Осталось дождаться CSS3

Всё объект• Направляющие• Слайсы• Сетка

Текст — это просто буквы<font color="#eb4120"

size="3"face="verdana">Текст глазами Photoshop

</font>

Стили для блоков текста• Paragraph Styles• Character Styles• Если дизайнер про них знает

Window > Type > …

Paragraph Styles → CSS Styles

Swatches — только нужные цвета

Swatches — только нужные цвета• Промерять все цвета пипеткой• Взять какой-нибудь SASS• Profit!

Сохраняются с документом• Swatches• Brushes• Symbols• Можно импортировать в любой документ

Символы• Элементы макета для повторного

использования• 9-Scaling

Все макеты — в одном файле• Мы это видели в Photoshop

Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла

Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла• А потом путались в слоях

Все макеты — в одном файле• Общие элементы — в символы• Все страницы — на плоскости, а не в стопке• У каждой — своё имя

Как с этим работать?• Измерения• Настройки• Резка• Проверка качества

Измерить всё• Размеры• Цвет • Позиция• Прочее

• Габариты объекта• Относительно Artboard• Обводка не учитывается• Эффекты не учитываются

Размеры

Object > Expand Appirance• Разрушение эффектов• Реальные размеры• Необратимо

Линейка• Хитро спрятана• Не «прилипает»• Нет Measurement Log

Прямоугольник как линейка• Прилипает к объектам• Может прилипать к пикселам• Размеры — в Transform

Цвет• Пипетка• Window > Color• Window > Color Guide• Swatches

Window > Color• Grayscale• RGB• HSB• CMYK• Web Safe Color

ColorGuide — гармония в цифрах

Настройки Illustrator• Изначально он всё-таки для полиграфии• Но входит в Adobe Web Premium• Ctrl+K (Edit > Preferences)

Цвет• Никаких внедрённых профилей• Только RGB

Save For Web

Всех разрэжу• Есть Slice Tool• Есть отличное меню Object > Slice…

Object > Slice > Make• V• Left Click• Alt, O, S, M

Save For Web• Всё как в Photoshop• Интерфейс от CS4• + SVG

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

Проверка привязки к пикселам• Визуально-ручная• Положитесь на робота

Визуальная проверка• View > Pixel Preview

Alt+Ctrl+Y

Поиск «мусора»• Неиспользуемые Swatches• Неиспользуемые символы

Никаких обводок• Обводка идёт «на полпиксела»• Правильно — Offset Path в Appereance

Ctrl + A

Глобальные отличия от PS• Нет History• Зато отмена бесконечна• Слои почти не используются• Каждый объект — как слой

Дизайнера нужно вырастить

Illustrator’u нужно научиться

Спасибо!Михаил Барановmikhail.baranov@gmail.comhttp://designnotfound.ru/