1. 1
Лекция «Работа с макетом»
— Оценка макета
— Работа с макетом в Photoshop
— Графика для веба
— Взаимодействие с дизайнером
Павел Худяков · axlerk@yandex-team.ru
Разработчик интерфейсов, Яндекс

2. 2
Определение
Дизайн — это сознательные и интуитивные усилия по созданию
значимого порядка.
— Виктор Папанек, промышленный дизайнер

3. Оценка макета

4. 4
Вы получили макет
— "новый файл (копия 12).jpg"
— maket.png
— maket.pdf
— ... ai? cdr? xls?!
— sitename_pagename.psd

5. 5
Вы получили макет
— "новый файл (копия 12).jpg"
— maket.png*
— maket.pdf*
— ... ai? cdr? xls?!
— sitename_pagename.psd*

6. 6
Слои
Слои — графическая аналогия наложения блоков

7. 7
Photoshop — промышленный стандарт

8. 8
Признаки хорошо организованного
макета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои

9. 9
Признаки хорошо организованного
макета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои
3. Цветные папки

10. 10
Признаки хорошо организованного
макета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои
3. Цветные папки
4. Использование Layer Comps
(Window → Layer Comps)

11. Работа с макетом
в Photoshop

12. Настройка
окружения

13. 13
Горячие клавиши

14. 14
Горячие клавиши
— Shift
— Ctrl
— Alt
— ⌘
— ⌘/Ctrl+Z — "Undo State Change"
— ⌘/Ctrl+Alt+Z — "Step forward"

15. 15
Панели

16. 16
Панели
Tab

17. 17
Панели

18. 18
Info Panel

19. 19
Web Color

20. 20
Layer Panel Option

21. 21
Layer Panel Option
— Thumbnail Contents позволяет
показывать в превью слоя не весь
слой целиком, а только контент.
— Expand New Effects. Все
добавляемые эффекты поумолчанию скрыты.

22. 22
Move tool

23. Работа с макетом
в Photoshop

24. 24
Открываем макет...

25. 25
Первым делом
— Отключить дизайнерские направляющие: ⌘/Ctrl+H

26. 26
И вот мы видим макет

27. 27
И вот мы видим макет: о чём думать?
1. О структуре будущей вёрстки (кому-то помогают скетчи на бумаге)
2. Об абсолютно независимых блоках
3. О деградации
4. О реальных данных
5. О шрифтах

28. Оформительская
графика умерла!

29. 29
Оформительская графика умерла
Градиенты CSS!

30. 30
Оформительская графика умерла
Бордер-радиус CSS!

31. 31
Оформительская графика умерла
Прозрачность CSS!

32. 32
Оформительская графика умерла*
— Графика может понадобиться для деградации
— Графика бывает не только оформительской
— Нарезку графики никто не отменял

33. Демонстрация

34. 34
Проблемы с градиентами

35. 35
Проблемы с градиентами
Наш ответ — smoothness 0%!
«О чём ещё говорят верстальщики», Олег Мохов · clck.ru/8t8GD

36. 36
Художественное наложение слоёв
Поведение инструментов отличается от стандартного —
проверить способ наложения слоя/папки.

37. 37
"Save for Web & Devices..."
Горячая клавиша: ⌘+Alt+Shift+S / Ctrl+Alt+Shift+S

38. Графика

39. 39
Общие понятия
— Графика растровая и векторная
— Человек различает 10 000 000 оттенков
— Полноцвет 2^24 = 16 777 216
— Битовая глубина (кол-во цветов находящихся в палитре изображения)
— Индексированная палитра: меньше цветов — меньше вес файла

40. 40
Три кита растровой веб-графики
— GIF : Graphics Interchange Format
— JPEG : Joint Photographic Experts Group
— PNG : Portable Network Graphics

41. 41
GIF
— GIF87a/GIF89a
— Анимации!
— Однобитовая прозрачность!
— Индексированная палитра с 256 цветами*

42. 42
GIF
Техногрет, работа с изображениями · clck.ru/8t8ED

43. 43
JPEG
— Опубликован в 1991 году
— 24-битные полноцветные изображения (full-color images)
— 8-битные черно-белые полутоновые изображения (grayscale images)
— Подходит для хранения фотографий
— Теряет в качестве при каждом сохранении

44. 44
JPEG
0%
100%

45. 45
JPEG
Оригинальное изображение: 52 917 байт.
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009

46. 46
JPEG
Новое изображение (Save for Web, 100%): 53 767 байт
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009

47. 47
JPEG
Diff изображений.
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009

48. 48
JPEG
Техногрет, работа с изображениями · clck.ru/8t8ED

49. 49
"Save for Web & Devices..."
Горячая клавиша: ⌘+Alt+Shift+S / Ctrl+Alt+Shift+S

50. 50
"Save for Web & Devices..."
Методы оптимизации JPEG
1. Стандартный — наихудшая степень сжатия, обычно не используется.
2. Optimized — меньший размер файла, грузится сверху вниз по мере
поступления данных.
3. Progressive — выводится как последовательность наложений,
изображение "улучшается" по мере поступления данных.

51. 51
JPEG: 22 года

52. 52
PNG
— Опубликован в 1995
— «PNG is Not GIF»
— Greyscale, indexed-colour и truecolor.
— Альфаканал
— PNG сжимается без потерь, используя продвинутые алгоритмы
— ...не подходит для хранения фотографий

53. 53
PNG
Сжимает и горизонтальные, и вертикальные одноцветные области
Техногрет, работа с изображениями · clck.ru/8t8ED

54. 54
PNG

55. 55
ICO
— Наследие MS Windows (форматов BMP и CUR)
— Это контейнер
— Полноцвет
— Альфаканал
— icoformat.8bi

56. 56
SVG
Scalable Vector Graphics
— Опубликован в 2001 году
— Открытый стандарт
— SVG — подмножество XML
— Совместимость с CSS
— Анимация

57. 57
SVG

58. 58
SVG: Поддержка

59. 59
Инструментарий
imgo
— github.com/imgo/imgo
svgo
— github.com/svg/svgo
«SVGO: оптимизатор SVG», Кир Белевич · clck.ru/8t8Gh

60. 60
SVG
SVGO

61. 41.4%!

62. 62
Другие форматы
— Форматов много
— Выживает поддерживаемый
Новые форматы
— WebP
— Динамический канвас
— «Возвращение ножа и паровоза», Вадим Макеев · clck.ru/8tDeN

63. 63
JPEG и ретина
— Стандартный подход: сохранение изображение 1:1 с уровнем качества
в районе 80%.
— Другой путь: сохранить изображение x2 с уровнем качества 20%.
Размер меньше, качество… не хуже!

64. Взаимодействие с
дизайнером

65. 65
Доверяй и проверяй
— Cложность реализации дизайна и целесообразность
— Дизайн это не только макет, но и ТЗ
— Экзотический дизайн и гайдлайны

66. 66
Чеклист дизайнера
— плохо видят
— ничего не помнят
— не целятся
— постоянно отвлекаются
— ничего не читают
— игнорируют вашу систему

67. Помогай!

68. 68
Связность, асинхронность, состояния
Не нарисовано какое-то состояние кнопки?
— Заметил это? Не бросай, реализуй сам.
Получаешь асинхронные данные?
— Задумайся над прелоадером.

69. 69
Взаимодействуй!
— Не нарисовано много состояний?
— Как правило попиксельной вёрстки не требуется, но просить
дизайнера подробный макет это нормально
— [Пользователи] игнорируют вашу систему

70. 70
Так почему нужно и важно
взаимодействовать с дизайнером?
— Дизайнер делает макет для вас, вы — следующее звено в цепочке
— …кроме как от вас о недочётах дизейнер не узнает ни от кого
— Вы работаете над одним продуктом
— Быть командой = взаимодействовать
— Накопление знаний

71. Ссылки

72. 72
Графика
— Техногрет, работа с изображениями · clck.ru/8t8ED
— Сергей Чикуёнок, работа с графикой · clck.ru/8t8EM
— Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009
— github.com/imgo/imgo
— github.com/svg/svgo

73. 73
Доклады
— «О чём ещё говорят верстальщики», Олег Мохов · clck.ru/8t8GD
— «SVGO: оптимизатор SVG», Кир Белевич · clck.ru/8t8Gh
— «С ножом против паровоза», Вадим Макеев · clck.ru/8tDdj
— «Возвращение ножа и паровоза», Вадим Макеев · clck.ru/8tDeN
PSD
— ilovepsd.ru
— Коллективный .PSD · clck.ru/8t8Ft
— Собранные требования к psd-макету веб-сайта · habr.ru/p/197588

74. Спасибо