illustrator и верстальщик. м. баранов. зал 3
Post on 16-Jun-2015
491 Views
Preview:
TRANSCRIPT
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/
top related