Вадим Макеев — Возвращение ножа и паровоза
DESCRIPTION
Как нарезать графику для вашей вёрстки и не порезаться? Плёвое дело: узнать поближе Фотошоп, посмотреть на альтернативные редакторы графики, разобраться в растровых и векторых форматах и методах экспорта, оптимизации и сборки, приготовиться реализовать всё на чистом CSS, сделать красиво для ретины и предложить фолбеки для старых браузеров.TRANSCRIPT
![Page 1: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/1.jpg)
Возвращениеножа и паровоза
![Page 2: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/2.jpg)
Графика
![Page 3: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/3.jpg)
Растровая
1. GIF скоро стукнет 30, PNG и JPG — 20 лет.
2. SVG ещё молодой, всего 15 лет.
3. WebP всего 3 года и 40% поддержки.
4. Динамический растр Canvas и его 83%.
Важность правильного выбора формата сложно переоценить.
3
![Page 4: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/4.jpg)
SVG
![Page 5: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/5.jpg)
Шаблон
<svg xmlns="http://www.w3.org/2000/svg">
<rect
x="100" y="100"
width="550" height="550"
fill="red" stroke="black"
/>
</svg>
01.
02.
03.
04.
05.
06.
07.
5
![Page 7: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/7.jpg)
WebP
![Page 8: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/8.jpg)
MIFMagic Image Format
![Page 9: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/9.jpg)
![Page 10: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/10.jpg)
Редакторы
![Page 11: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/11.jpg)
![Page 12: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/12.jpg)
![Page 13: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/13.jpg)
Не надо
![Page 14: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/14.jpg)
Фотошоп
![Page 15: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/15.jpg)
![Page 16: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/16.jpg)
Жаба
За пакет Ежемесячно Сейчас
RUR 60 000 5 000 1 500
UAH 15 441 1 286 386
16
![Page 17: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/17.jpg)
![Page 18: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/18.jpg)
![Page 19: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/19.jpg)
![Page 20: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/20.jpg)
![Page 21: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/21.jpg)
![Page 22: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/22.jpg)
![Page 23: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/23.jpg)
![Page 24: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/24.jpg)
![Page 25: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/25.jpg)
![Page 26: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/26.jpg)
![Page 27: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/27.jpg)
![Page 28: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/28.jpg)
sRGB
![Page 29: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/29.jpg)
![Page 30: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/30.jpg)
![Page 31: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/31.jpg)
![Page 32: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/32.jpg)
![Page 33: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/33.jpg)
![Page 34: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/34.jpg)
Скетч2000 ₶
![Page 35: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/35.jpg)
Утилиты
![Page 36: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/36.jpg)
xScope
![Page 37: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/37.jpg)
xScope
![Page 38: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/38.jpg)
ColorSnapper
![Page 39: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/39.jpg)
CSS Hat
![Page 40: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/40.jpg)
![Page 41: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/41.jpg)
Enigma64
![Page 42: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/42.jpg)
![Page 43: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/43.jpg)
Slicy
![Page 44: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/44.jpg)
![Page 45: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/45.jpg)
![Page 46: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/46.jpg)
Оптимизация
![Page 47: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/47.jpg)
Умная и тупая
![Page 48: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/48.jpg)
Умная оптимизация
— Оптимизация JPEG в 3 частях.
— Оптимизация PNG в 4 частях.
— Комбинаторика.
48
![Page 49: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/49.jpg)
ImageOptim JPEGmini
![Page 54: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/54.jpg)
Спрайты?
![Page 55: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/55.jpg)
![Page 56: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/56.jpg)
dataURI
![Page 57: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/57.jpg)
SPDY
![Page 58: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/58.jpg)
Рисуем стилями
![Page 59: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/59.jpg)
Рисуем стилями
E {
clip :rect(…);
box-shadow :
0 0 0 10px #FFF, 0 0 0 20px #000;
border-radius :12px;
border-image :url(shadow.png) 199 187 repeat;
}
01.
02.
03.
04.
05.
06.
07.
59
![Page 60: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/60.jpg)
border-image
![Page 61: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/61.jpg)
![Page 62: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/62.jpg)
![Page 63: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/63.jpg)
![Page 64: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/64.jpg)
![Page 65: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/65.jpg)
![Page 66: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/66.jpg)
![Page 67: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/67.jpg)
![Page 68: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/68.jpg)
Рисуем стилями
E {
border:solid 0 transparent;
border-width: 199px 187px ;
-webkit-border-image:url(shadow.png) 199 187 repeat;
-o-border-image:url(shadow.png) 199 187 repeat;
border-image :url(shadow.png) 199 187 repeat;
}
01.
02.
03.
04.
05.
06.
07.
68
![Page 69: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/69.jpg)
clip:rect
![Page 71: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/71.jpg)
![Page 72: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/72.jpg)
![Page 73: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/73.jpg)
![Page 74: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/74.jpg)
Читать дальше
— С ножом против паровоза
— Коллективный .PSD
— Discovering Sketch
74
![Page 75: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/75.jpg)
Спасибо!
![Page 80: Вадим Макеев — Возвращение ножа и паровоза](https://reader031.vdocuments.pub/reader031/viewer/2022020105/5587891bd8b42a47318b4644/html5/thumbnails/80.jpg)
Вопросы?