Павел Худяков: Работа с макетом
TRANSCRIPT
![Page 1: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/1.jpg)
Лекция «Работа с макетом»— Оценка макета
— Работа с макетом в Photoshop
— Графика для веба
— Взаимодействие с дизайнером
Павел Худяков · [email protected]
Разработчик интерфейсов, Яндекс
1
![Page 2: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/2.jpg)
ОпределениеДизайн — это сознательные и интуитивные усилия по созданию
значимого порядка.
— Виктор Папанек, промышленный дизайнер
2
![Page 3: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/3.jpg)
Оценка макета
![Page 4: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/4.jpg)
Вы получили макет— "новый файл (копия 12).jpg"
— maket.png
— maket.pdf
— ... ai? cdr? xls?!
— sitename_pagename.psd
4
![Page 5: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/5.jpg)
Вы получили макет— "новый файл (копия 12).jpg"
— maket.png*
— maket.pdf*
— ... ai? cdr? xls?!
— sitename_pagename.psd*
5
![Page 6: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/6.jpg)
СлоиСлои — графическая аналогия наложения блоков
6
![Page 7: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/7.jpg)
Photoshop — промышленный стандарт
7
![Page 8: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/8.jpg)
Признаки хорошо организованногомакета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои
8
![Page 9: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/9.jpg)
Признаки хорошо организованногомакета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои
3. Цветные папки
9
![Page 10: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/10.jpg)
Признаки хорошо организованногомакета
1. Наличие слоёв
2. Папки, в которые сгруппированы слои
3. Цветные папки
4. Использование Layer Comps
(Window → Layer Comps)
10
![Page 11: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/11.jpg)
Работа с макетомв Photoshop
![Page 12: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/12.jpg)
Настройкаокружения
![Page 13: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/13.jpg)
Горячие клавиши
13
![Page 14: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/14.jpg)
Горячие клавиши— Shift
— Ctrl
— Alt
— ⌘
— ⌘/Ctrl+Z — "Undo State Change"
— ⌘/Ctrl+Alt+Z — "Step forward"
14
![Page 15: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/15.jpg)
Панели
15
![Page 16: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/16.jpg)
Панели
Tab
16
![Page 17: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/17.jpg)
Панели
17
![Page 18: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/18.jpg)
Info Panel
18
![Page 19: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/19.jpg)
Web Color
19
![Page 20: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/20.jpg)
Layer Panel Option
20
![Page 21: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/21.jpg)
Layer Panel Option— Thumbnail Contents позволяет
показывать в превью слоя не весь
слой целиком, а только контент.
— Expand New Effects. Все
добавляемые эффекты по-
умолчанию скрыты.
21
![Page 22: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/22.jpg)
Move tool
22
![Page 23: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/23.jpg)
Работа с макетомв Photoshop
![Page 24: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/24.jpg)
Открываем макет...
24
![Page 25: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/25.jpg)
Первым делом
— Отключить дизайнерские направляющие: ⌘/Ctrl+H
25
![Page 26: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/26.jpg)
И вот мы видим макет
26
![Page 27: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/27.jpg)
И вот мы видим макет: о чём думать?1. О структуре будущей вёрстки (кому-то помогают скетчи на бумаге)
2. Об абсолютно независимых блоках
3. О деградации
4. О реальных данных
5. О шрифтах
27
![Page 28: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/28.jpg)
Оформительскаяграфика умерла!
![Page 29: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/29.jpg)
Оформительская графика умерла
Градиенты CSS!
29
![Page 30: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/30.jpg)
Оформительская графика умерла
Бордер-радиус CSS!
30
![Page 31: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/31.jpg)
Оформительская графика умерла
Прозрачность CSS!
31
![Page 32: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/32.jpg)
Оформительская графика умерла*— Графика может понадобиться для деградации
— Графика бывает не только оформительской
— Нарезку графики никто не отменял
32
![Page 33: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/33.jpg)
Демонстрация
![Page 34: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/34.jpg)
Проблемы с градиентами
34
![Page 35: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/35.jpg)
Проблемы с градиентамиНаш ответ — smoothness 0%!
«О чём ещё говорят верстальщики», Олег Мохов · clck.ru/8t8GD
35
![Page 36: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/36.jpg)
Художественное наложение слоёвПоведение инструментов отличается от стандартного —
проверить способ наложения слоя/папки.
36
![Page 37: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/37.jpg)
"Save for Web & Devices..."
Горячая клавиша: ⌘+Alt+Shift+S / Ctrl+Alt+Shift+S
37
![Page 38: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/38.jpg)
Графика
![Page 39: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/39.jpg)
Общие понятия— Графика растровая и векторная
— Человек различает 10 000 000 оттенков
— Полноцвет 2^24 = 16 777 216
— Битовая глубина (кол-во цветов находящихся в палитре изображения)
— Индексированная палитра: меньше цветов — меньше вес файла
39
![Page 40: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/40.jpg)
Три кита растровой веб-графики— GIF : Graphics Interchange Format
— JPEG : Joint Photographic Experts Group
— PNG : Portable Network Graphics
40
![Page 41: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/41.jpg)
GIF— GIF87a/GIF89a
— Анимации!
— Однобитовая прозрачность!
— Индексированная палитра с 256 цветами*
41
![Page 42: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/42.jpg)
GIF
Техногрет, работа с изображениями · clck.ru/8t8ED
42
![Page 43: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/43.jpg)
JPEG— Опубликован в 1991 году
— 24-битные полноцветные изображения (full-color images)
— 8-битные черно-белые полутоновые изображения (grayscale images)
— Подходит для хранения фотографий
— Теряет в качестве при каждом сохранении
43
![Page 44: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/44.jpg)
JPEG
0% 100%
44
![Page 45: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/45.jpg)
JPEGОригинальное изображение: 52 917 байт.
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009
45
![Page 46: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/46.jpg)
JPEGНовое изображение (Save for Web, 100%): 53 767 байт
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009
46
![Page 47: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/47.jpg)
JPEGDiff изображений.
Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009
47
![Page 48: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/48.jpg)
JPEG
Техногрет, работа с изображениями · clck.ru/8t8ED
48
![Page 49: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/49.jpg)
"Save for Web & Devices..."
Горячая клавиша: ⌘+Alt+Shift+S / Ctrl+Alt+Shift+S
49
![Page 50: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/50.jpg)
"Save for Web & Devices..."Методы оптимизации JPEG
1. Стандартный — наихудшая степень сжатия, обычно не используется.
2. Optimized — меньший размер файла, грузится сверху вниз по мере
поступления данных.
3. Progressive — выводится как последовательность наложений,
изображение "улучшается" по мере поступления данных.
50
![Page 51: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/51.jpg)
JPEG: 22 года
51
![Page 52: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/52.jpg)
PNG— Опубликован в 1995
— «PNG is Not GIF»
— Greyscale, indexed-colour и truecolor.
— Альфаканал
— PNG сжимается без потерь, используя продвинутые алгоритмы
— ...не подходит для хранения фотографий
52
![Page 53: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/53.jpg)
PNGСжимает и горизонтальные, и вертикальные одноцветные области
Техногрет, работа с изображениями · clck.ru/8t8ED
53
![Page 54: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/54.jpg)
PNG
54
![Page 55: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/55.jpg)
ICO— Наследие MS Windows (форматов BMP и CUR)
— Это контейнер
— Полноцвет
— Альфаканал
— icoformat.8bi
55
![Page 56: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/56.jpg)
SVGScalable Vector Graphics
— Опубликован в 2001 году
— Открытый стандарт
— SVG — подмножество XML
— Совместимость с CSS
— Анимация
56
![Page 57: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/57.jpg)
SVG
57
![Page 58: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/58.jpg)
SVG: Поддержка
58
![Page 59: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/59.jpg)
Инструментарийimgo
— github.com/imgo/imgo
svgo
— github.com/svg/svgo
«SVGO: оптимизатор SVG», Кир Белевич · clck.ru/8t8Gh
59
![Page 60: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/60.jpg)
SVG
SVGO
60
![Page 61: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/61.jpg)
41.4%!
![Page 62: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/62.jpg)
Другие форматы— Форматов много
— Выживает поддерживаемый
Новые форматы— WebP
— Динамический канвас
— «Возвращение ножа и паровоза», Вадим Макеев · clck.ru/8tDeN
62
![Page 63: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/63.jpg)
JPEG и ретина— Стандартный подход: сохранение изображение 1:1 с уровнем качества
в районе 80%.
— Другой путь: сохранить изображение x2 с уровнем качества 20%.
Размер меньше, качество… не хуже!
63
![Page 64: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/64.jpg)
Взаимодействие сдизайнером
![Page 65: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/65.jpg)
Доверяй и проверяй— Cложность реализации дизайна и целесообразность
— Дизайн это не только макет, но и ТЗ
— Экзотический дизайн и гайдлайны
65
![Page 66: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/66.jpg)
Чеклист дизайнера— плохо видят
— ничего не помнят
— не целятся
— постоянно отвлекаются
— ничего не читают
— игнорируют вашу систему
66
![Page 67: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/67.jpg)
Помогай!
![Page 68: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/68.jpg)
Связность, асинхронность, состоянияНе нарисовано какое-то состояние кнопки?
— Заметил это? Не бросай, реализуй сам.
Получаешь асинхронные данные?
— Задумайся над прелоадером.
68
![Page 69: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/69.jpg)
Взаимодействуй!— Не нарисовано много состояний?
— Как правило попиксельной вёрстки не требуется, но просить
дизайнера подробный макет это нормально
— [Пользователи] игнорируют вашу систему
69
![Page 70: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/70.jpg)
Так почему нужно и важновзаимодействовать с дизайнером?
— Дизайнер делает макет для вас, вы — следующее звено в цепочке
— …кроме как от вас о недочётах дизейнер не узнает ни от кого
— Вы работаете над одним продуктом
— Быть командой = взаимодействовать
— Накопление знаний
70
![Page 71: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/71.jpg)
Ссылки
![Page 72: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/72.jpg)
Графика— Техногрет, работа с изображениями · clck.ru/8t8ED
— Сергей Чикуёнок, работа с графикой · clck.ru/8t8EM
— Оптимизация PNG и JPEG без потери качества · habr.ru/p/119009
— github.com/imgo/imgo
— github.com/svg/svgo
72
![Page 73: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/73.jpg)
Доклады— «О чём ещё говорят верстальщики», Олег Мохов · 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
73
![Page 74: Павел Худяков: Работа с макетом](https://reader034.vdocuments.site/reader034/viewer/2022042518/55a16bf51a28ab3a088b45eb/html5/thumbnails/74.jpg)
Спасибо