illustrator и верстальщик. м. баранов. зал 3
TRANSCRIPT
![Page 1: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/1.jpg)
Illustrator и верстальщик
Михаил Баранов
![Page 2: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/2.jpg)
Не про Illustrator•2007 — Ольга Алексашенко. «Как воспитать дизайнера»
web-standards.ru/articles/coder-vs-designer/
•2009 — Вадим Макеев. «С ножом против паровоза»pepelsbey.net/2009/02/with-knife-against-train/
•2009 — Артём Шитов. «Индизайн как инструмент рисования сайтов»leprosorium.ru/comments/590309
![Page 3: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/3.jpg)
![Page 4: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/4.jpg)
1999
![Page 5: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/5.jpg)
![Page 6: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/6.jpg)
![Page 7: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/7.jpg)
Сайт, как многополосное издание
![Page 8: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/8.jpg)
Макет листовки в фотошопе
![Page 9: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/9.jpg)
Макет журнала в фотошопе?
![Page 10: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/10.jpg)
Ок, без холивара• Иногда лучше в фотошопе• Но многие макеты в Illustrator получаются
качественне
![Page 11: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/11.jpg)
Дизайнер начинает думать
![Page 12: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/12.jpg)
Дизайнер начинает думатьпо другому
![Page 13: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/13.jpg)
Чем Illustrator лучше?
![Page 14: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/14.jpg)
Чем Photoshop!
![Page 15: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/15.jpg)
Всё – объект (почти ООП)• Форма• Контур• Заливка (любая)• Эффекты
![Page 16: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/16.jpg)
![Page 17: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/17.jpg)
![Page 18: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/18.jpg)
Осталось дождаться CSS3
![Page 19: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/19.jpg)
Всё объект• Направляющие• Слайсы• Сетка
![Page 20: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/20.jpg)
Текст — это просто буквы<font color="#eb4120"
size="3"face="verdana">Текст глазами Photoshop
</font>
![Page 21: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/21.jpg)
Стили для блоков текста• Paragraph Styles• Character Styles• Если дизайнер про них знает
![Page 22: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/22.jpg)
Window > Type > …
![Page 23: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/23.jpg)
![Page 24: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/24.jpg)
![Page 25: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/25.jpg)
![Page 26: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/26.jpg)
Paragraph Styles → CSS Styles
![Page 27: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/27.jpg)
Swatches — только нужные цвета
![Page 28: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/28.jpg)
Swatches — только нужные цвета• Промерять все цвета пипеткой• Взять какой-нибудь SASS• Profit!
![Page 29: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/29.jpg)
Сохраняются с документом• Swatches• Brushes• Symbols• Можно импортировать в любой документ
![Page 30: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/30.jpg)
Символы• Элементы макета для повторного
использования• 9-Scaling
![Page 31: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/31.jpg)
![Page 32: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/32.jpg)
Все макеты — в одном файле• Мы это видели в Photoshop
![Page 33: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/33.jpg)
Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла
![Page 34: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/34.jpg)
Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла• А потом путались в слоях
![Page 35: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/35.jpg)
Все макеты — в одном файле• Общие элементы — в символы• Все страницы — на плоскости, а не в стопке• У каждой — своё имя
![Page 36: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/36.jpg)
![Page 37: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/37.jpg)
Как с этим работать?• Измерения• Настройки• Резка• Проверка качества
![Page 38: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/38.jpg)
Измерить всё• Размеры• Цвет • Позиция• Прочее
![Page 39: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/39.jpg)
![Page 40: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/40.jpg)
• Габариты объекта• Относительно Artboard• Обводка не учитывается• Эффекты не учитываются
Размеры
![Page 41: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/41.jpg)
Object > Expand Appirance• Разрушение эффектов• Реальные размеры• Необратимо
![Page 42: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/42.jpg)
Линейка• Хитро спрятана• Не «прилипает»• Нет Measurement Log
![Page 43: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/43.jpg)
![Page 44: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/44.jpg)
Прямоугольник как линейка• Прилипает к объектам• Может прилипать к пикселам• Размеры — в Transform
![Page 45: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/45.jpg)
Цвет• Пипетка• Window > Color• Window > Color Guide• Swatches
![Page 46: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/46.jpg)
![Page 47: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/47.jpg)
Window > Color• Grayscale• RGB• HSB• CMYK• Web Safe Color
![Page 48: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/48.jpg)
![Page 49: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/49.jpg)
ColorGuide — гармония в цифрах
![Page 50: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/50.jpg)
Настройки Illustrator• Изначально он всё-таки для полиграфии• Но входит в Adobe Web Premium• Ctrl+K (Edit > Preferences)
![Page 51: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/51.jpg)
![Page 52: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/52.jpg)
![Page 53: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/53.jpg)
![Page 54: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/54.jpg)
![Page 55: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/55.jpg)
Цвет• Никаких внедрённых профилей• Только RGB
![Page 56: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/56.jpg)
![Page 57: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/57.jpg)
![Page 58: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/58.jpg)
![Page 59: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/59.jpg)
Save For Web
![Page 60: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/60.jpg)
Всех разрэжу• Есть Slice Tool• Есть отличное меню Object > Slice…
![Page 61: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/61.jpg)
![Page 62: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/62.jpg)
Object > Slice > Make• V• Left Click• Alt, O, S, M
![Page 63: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/63.jpg)
Save For Web• Всё как в Photoshop• Интерфейс от CS4• + SVG
![Page 64: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/64.jpg)
Проверка качества• Правильная цветовая модель• Правильные размер• Привязка к пикселам• Отсутствие «мусора»
![Page 65: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/65.jpg)
![Page 66: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/66.jpg)
![Page 67: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/67.jpg)
Проверка привязки к пикселам• Визуально-ручная• Положитесь на робота
![Page 68: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/68.jpg)
Визуальная проверка• View > Pixel Preview
Alt+Ctrl+Y
![Page 69: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/69.jpg)
![Page 70: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/70.jpg)
![Page 71: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/71.jpg)
![Page 72: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/72.jpg)
![Page 73: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/73.jpg)
![Page 74: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/74.jpg)
![Page 75: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/75.jpg)
Поиск «мусора»• Неиспользуемые Swatches• Неиспользуемые символы
![Page 76: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/76.jpg)
![Page 77: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/77.jpg)
Никаких обводок• Обводка идёт «на полпиксела»• Правильно — Offset Path в Appereance
![Page 78: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/78.jpg)
![Page 79: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/79.jpg)
Ctrl + A
![Page 80: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/80.jpg)
Глобальные отличия от PS• Нет History• Зато отмена бесконечна• Слои почти не используются• Каждый объект — как слой
![Page 81: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/81.jpg)
![Page 82: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/82.jpg)
Дизайнера нужно вырастить
![Page 83: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/83.jpg)
Illustrator’u нужно научиться
![Page 84: Illustrator и верстальщик. м. баранов. зал 3](https://reader033.vdocuments.pub/reader033/viewer/2022050907/557f2f77d8b42ad4798b4b1f/html5/thumbnails/84.jpg)
Спасибо!Михаил Баранов[email protected]://designnotfound.ru/