1. Illustrator
и верстальщик
Михаил Баранов

2. Не про Illustrator
•2007 — Ольга Алексашенко. «Как воспитать дизайнера»
web-standards.ru/articles/coder-vs-designer/
•2009 — Вадим Макеев. «С ножом против паровоза»
pepelsbey.net/2009/02/with-knife-against-train/
•2009 — Артём Шитов. «Индизайн как инструмент рисования сайтов»
leprosorium.ru/comments/590309

4. 1999

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

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

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

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

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

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

13. Чем Illustrator лучше?

14. Чем Photoshop!

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

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

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

20. Текст — это просто буквы
<font color="#eb4120"
size="3"
face="verdana">
Текст глазами Photoshop
</font>

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

22. Window > Type > …

26. Paragraph Styles → CSS Styles

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

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

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

30. Символы
• Элементы макета для повторного
использования
• 9-Scaling

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

59. Save For Web

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

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

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

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

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

68. Визуальная проверка
• View > Pixel Preview
Alt+Ctrl+Y

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

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

79. Ctrl + A

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

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

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

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