Павел Худяков: Работа с макетом

Лекция «Работа с макетом»— Оценка макета

— Работа с макетом в Photoshop

— Графика для веба

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

Павел Худяков · axlerk@yandex-team.ru

Разработчик интерфейсов, Яндекс

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

Спасибо