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