SlideShare a Scribd company logo
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.com
   http://designnotfound.ru/

More Related Content

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

Mihail Korepanov
Mihail KorepanovMihail Korepanov
Mihail Korepanov
yaevents
 
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
Yandex
 
инструменты проектирования интерфейсов
инструменты проектирования интерфейсовинструменты проектирования интерфейсов
инструменты проектирования интерфейсовOleg Karapuzov
 
модуль 1. основы работы в illustrator 2. работа с объектами
модуль 1. основы работы в illustrator 2. работа с объектамимодуль 1. основы работы в illustrator 2. работа с объектами
модуль 1. основы работы в illustrator 2. работа с объектами
Ed Solovey
 
Paper prototyping
Paper prototypingPaper prototyping
Paper prototyping
Agile Base Camp
 
Бумажное прототипирование
Бумажное прототипированиеБумажное прототипирование
Бумажное прототипированиеMaxim Gaponov
 
Stanfy Fireworks Conf
Stanfy Fireworks ConfStanfy Fireworks Conf
Stanfy Fireworks Conf
Тима Пожитонов
 
Павел Худяков: Работа с макетом
Павел Худяков: Работа с макетомПавел Худяков: Работа с макетом
Павел Худяков: Работа с макетомYandex
 
Правильные инструменты в работе аналитика
Правильные инструменты в работе аналитика Правильные инструменты в работе аналитика
Правильные инструменты в работе аналитика
Igor Yamshanov
 
Растровая и векторная графика
Растровая и векторная графикаРастровая и векторная графика
Растровая и векторная графика
Sergey Kolodin
 
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
NaZapad
 
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
MoscowJS
 
Cайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системамCайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системам
Fresh IT
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
ir_556
 
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Ontico
 
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TKConf
 
4.5 Веб-дизайн
4.5 Веб-дизайн4.5 Веб-дизайн
4.5 Веб-дизайн
IT Academy Project EU
 

Similar to Illustrator и верстальщик. м. баранов. зал 3 (20)

Mihail Korepanov
Mihail KorepanovMihail Korepanov
Mihail Korepanov
 
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
Михаил Корепанов "Скорость рендеринга страниц: исследования, замеры, автомати...
 
инструменты проектирования интерфейсов
инструменты проектирования интерфейсовинструменты проектирования интерфейсов
инструменты проектирования интерфейсов
 
Graphing.ru
Graphing.ruGraphing.ru
Graphing.ru
 
модуль 1. основы работы в illustrator 2. работа с объектами
модуль 1. основы работы в illustrator 2. работа с объектамимодуль 1. основы работы в illustrator 2. работа с объектами
модуль 1. основы работы в illustrator 2. работа с объектами
 
Paper prototyping
Paper prototypingPaper prototyping
Paper prototyping
 
Бумажное прототипирование
Бумажное прототипированиеБумажное прототипирование
Бумажное прототипирование
 
Stanfy Fireworks Conf
Stanfy Fireworks ConfStanfy Fireworks Conf
Stanfy Fireworks Conf
 
Павел Худяков: Работа с макетом
Павел Худяков: Работа с макетомПавел Худяков: Работа с макетом
Павел Худяков: Работа с макетом
 
Правильные инструменты в работе аналитика
Правильные инструменты в работе аналитика Правильные инструменты в работе аналитика
Правильные инструменты в работе аналитика
 
Растровая и векторная графика
Растровая и векторная графикаРастровая и векторная графика
Растровая и векторная графика
 
Little Service in 2h
Little Service in 2hLittle Service in 2h
Little Service in 2h
 
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
Презентация Игорь Баньковский (Depositphotos) для NaZapad 3
 
404fest
404fest404fest
404fest
 
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
Как я перестал бояться и полюбил SVG -- Руслан Каймаков -- MoscowJS 17
 
Cайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системамCайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системам
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
Разработка Rich Text Editor: проблемы и решения / Егор Яковишен (Setka)
 
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.TК°Conf. Организация разработки Frontend. Виталий Слободин.
TК°Conf. Организация разработки Frontend. Виталий Слободин.
 
4.5 Веб-дизайн
4.5 Веб-дизайн4.5 Веб-дизайн
4.5 Веб-дизайн
 

More from rit2011

классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2rit2011
 
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2rit2011
 
как объяснить заказчику, что он не прав. денис тучин. зал 3
как объяснить заказчику, что он не прав. денис тучин. зал 3как объяснить заказчику, что он не прав. денис тучин. зал 3
как объяснить заказчику, что он не прав. денис тучин. зал 3rit2011
 
классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2rit2011
 
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1Kpi разработчика vs kpi разработки. евгения фирсова. зал 1
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1rit2011
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....rit2011
 
что и почему вы должны программировать на Erlang.максим лапшин. зал 4
что и почему вы должны программировать на Erlang.максим лапшин. зал 4что и почему вы должны программировать на Erlang.максим лапшин. зал 4
что и почему вы должны программировать на Erlang.максим лапшин. зал 4rit2011
 
I pv6 малоизвестные подробности. андрей пантюхин. зал 2
I pv6   малоизвестные подробности. андрей пантюхин. зал 2I pv6   малоизвестные подробности. андрей пантюхин. зал 2
I pv6 малоизвестные подробности. андрей пантюхин. зал 2rit2011
 
безопасность веб приложений сегодня. дмитрий евтеев. зал 4
безопасность веб приложений сегодня. дмитрий евтеев. зал 4безопасность веб приложений сегодня. дмитрий евтеев. зал 4
безопасность веб приложений сегодня. дмитрий евтеев. зал 4rit2011
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4rit2011
 
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...rit2011
 
выращиваем интерфейс своими руками. ольга павлова. зал 3
выращиваем интерфейс своими руками. ольга павлова. зал 3выращиваем интерфейс своими руками. ольга павлова. зал 3
выращиваем интерфейс своими руками. ольга павлова. зал 3rit2011
 
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2rit2011
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
rit2011
 
Ie9 и ie10. алекс могилевский. зал 2
Ie9 и ie10. алекс могилевский. зал 2Ie9 и ie10. алекс могилевский. зал 2
Ie9 и ie10. алекс могилевский. зал 2
rit2011
 
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...rit2011
 
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...rit2011
 
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...rit2011
 
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2rit2011
 

More from rit2011 (20)

классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2
 
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2
Chef. кто на кухне хозяин. концепция devops. а,титов. зал 2
 
как объяснить заказчику, что он не прав. денис тучин. зал 3
как объяснить заказчику, что он не прав. денис тучин. зал 3как объяснить заказчику, что он не прав. денис тучин. зал 3
как объяснить заказчику, что он не прав. денис тучин. зал 3
 
классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2классификация Ddos. александр лямин, артем гавриченков. зал 2
классификация Ddos. александр лямин, артем гавриченков. зал 2
 
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1Kpi разработчика vs kpi разработки. евгения фирсова. зал 1
Kpi разработчика vs kpi разработки. евгения фирсова. зал 1
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
ускорение Front end разработки с помощью haml, sass и compass. андрей ситник....
 
что и почему вы должны программировать на Erlang.максим лапшин. зал 4
что и почему вы должны программировать на Erlang.максим лапшин. зал 4что и почему вы должны программировать на Erlang.максим лапшин. зал 4
что и почему вы должны программировать на Erlang.максим лапшин. зал 4
 
I pv6 малоизвестные подробности. андрей пантюхин. зал 2
I pv6   малоизвестные подробности. андрей пантюхин. зал 2I pv6   малоизвестные подробности. андрей пантюхин. зал 2
I pv6 малоизвестные подробности. андрей пантюхин. зал 2
 
безопасность веб приложений сегодня. дмитрий евтеев. зал 4
безопасность веб приложений сегодня. дмитрий евтеев. зал 4безопасность веб приложений сегодня. дмитрий евтеев. зал 4
безопасность веб приложений сегодня. дмитрий евтеев. зал 4
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
 
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
 
выращиваем интерфейс своими руками. ольга павлова. зал 3
выращиваем интерфейс своими руками. ольга павлова. зал 3выращиваем интерфейс своими руками. ольга павлова. зал 3
выращиваем интерфейс своими руками. ольга павлова. зал 3
 
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2
распределенное файловое хранилище (Nginx, zfs, perl). перепелица мамонтов. зал 2
 
от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4от Flash к html5. александр бацуев. зал 4
от Flash к html5. александр бацуев. зал 4
 
Ie9 и ie10. алекс могилевский. зал 2
Ie9 и ie10. алекс могилевский. зал 2Ie9 и ie10. алекс могилевский. зал 2
Ie9 и ie10. алекс могилевский. зал 2
 
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
сотни серверов, десятки компонент. автоматизация раскладки и конфигурирования...
 
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
полмиллиона юзеров в онлайне без падений оптимизация высоконагруженной Server...
 
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...
рисуем тз. эффективный способ коммуникации в веб проектах. артем вольфтруб. з...
 
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2
типология личности и прогноз отношений по а. афанасьеву. сергей котырев. зал 2
 

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