Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Illustratorи верстальщикМихаил Баранов
Не про Illustrator•2007 — Ольга Алексашенко. «Как воспитать дизайнера»       web-standards.ru/articles/coder-vs-designer/•...
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/
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Illustrator и верстальщик. м. баранов. зал 3
Próxima SlideShare
Cargando en…5
×

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

768 visualizaciones

Publicado el

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

  1. 1. Illustratorи верстальщикМихаил Баранов
  2. 2. Не про Illustrator•2007 — Ольга Алексашенко. «Как воспитать дизайнера» web-standards.ru/articles/coder-vs-designer/•2009 — Вадим Макеев. «С ножом против паровоза» pepelsbey.net/2009/02/with-knife-against-train/•2009 — Артём Шитов. «Индизайн как инструмент рисования сайтов» leprosorium.ru/comments/590309
  3. 3. 1999
  4. 4. Сайт, как многополосное издание
  5. 5. Макет листовки в фотошопе
  6. 6. Макет журнала в фотошопе?
  7. 7. Ок, без холивара• Иногда лучше в фотошопе• Но многие макеты в Illustrator получаются качественне
  8. 8. Дизайнер начинает думать
  9. 9. Дизайнер начинает думать по другому
  10. 10. Чем Illustrator лучше?
  11. 11. Чем Photoshop!
  12. 12. Всё – объект (почти ООП)• Форма• Контур• Заливка (любая)• Эффекты
  13. 13. Осталось дождаться CSS3
  14. 14. Всё объект• Направляющие• Слайсы• Сетка
  15. 15. Текст — это просто буквы<font color="#eb4120" size="3" face="verdana"> Текст глазами Photoshop</font>
  16. 16. Стили для блоков текста• Paragraph Styles• Character Styles• Если дизайнер про них знает
  17. 17. Window > Type > …
  18. 18. Paragraph Styles → CSS Styles
  19. 19. Swatches — только нужные цвета
  20. 20. Swatches — только нужные цвета• Промерять все цвета пипеткой• Взять какой-нибудь SASS• Profit!
  21. 21. Сохраняются с документом• Swatches• Brushes• Symbols• Можно импортировать в любой документ
  22. 22. Символы• Элементы макета для повторного использования• 9-Scaling
  23. 23. Все макеты — в одном файле• Мы это видели в Photoshop
  24. 24. Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла
  25. 25. Все макеты — в одном файле• Мы это видели в Photoshop• Долго ждали открытия файла• А потом путались в слоях
  26. 26. Все макеты — в одном файле• Общие элементы — в символы• Все страницы — на плоскости, а не в стопке• У каждой — своё имя
  27. 27. Как с этим работать?• Измерения• Настройки• Резка• Проверка качества
  28. 28. Измерить всё• Размеры• Цвет• Позиция• Прочее
  29. 29. Размеры• Габариты объекта• Относительно Artboard• Обводка не учитывается• Эффекты не учитываются
  30. 30. Object > Expand Appirance• Разрушение эффектов• Реальные размеры• Необратимо
  31. 31. Линейка• Хитро спрятана• Не «прилипает»• Нет Measurement Log
  32. 32. Прямоугольник как линейка• Прилипает к объектам• Может прилипать к пикселам• Размеры — в Transform
  33. 33. Цвет• Пипетка• Window > Color• Window > Color Guide• Swatches
  34. 34. Window > Color• Grayscale• RGB• HSB• CMYK• Web Safe Color
  35. 35. ColorGuide — гармония в цифрах
  36. 36. Настройки Illustrator• Изначально он всё-таки для полиграфии• Но входит в Adobe Web Premium• Ctrl+K (Edit > Preferences)
  37. 37. Цвет• Никаких внедрённых профилей• Только RGB
  38. 38. Save For Web
  39. 39. Всех разрэжу• Есть Slice Tool• Есть отличное меню Object > Slice…
  40. 40. Object > Slice > Make• V• Left Click• Alt, O, S, M
  41. 41. Save For Web• Всё как в Photoshop• Интерфейс от CS4• + SVG
  42. 42. Проверка качества• Правильная цветовая модель• Правильные размер• Привязка к пикселам• Отсутствие «мусора»
  43. 43. Проверка привязки к пикселам• Визуально-ручная• Положитесь на робота
  44. 44. Визуальная проверка• View > Pixel Preview Alt+Ctrl+Y
  45. 45. Поиск «мусора»• Неиспользуемые Swatches• Неиспользуемые символы
  46. 46. Никаких обводок• Обводка идёт «на полпиксела»• Правильно — Offset Path в Appereance
  47. 47. Ctrl + A
  48. 48. Глобальные отличия от PS• Нет History• Зато отмена бесконечна• Слои почти не используются• Каждый объект — как слой
  49. 49. Дизайнера нужно вырастить
  50. 50. Illustrator’u нужно научиться
  51. 51. Спасибо! Михаил Баранов mikhail.baranov@gmail.com http://designnotfound.ru/

×