Вадим Макеев — Возвращение ножа и паровоза
DESCRIPTION
Как нарезать графику для вашей вёрстки и не порезаться? Плёвое дело: узнать поближе Фотошоп, посмотреть на альтернативные редакторы графики, разобраться в растровых и векторых форматах и методах экспорта, оптимизации и сборки, приготовиться реализовать всё на чистом CSS, сделать красиво для ретины и предложить фолбеки для старых браузеров.TRANSCRIPT
Возвращениеножа и паровоза
Графика
Растровая
1. GIF скоро стукнет 30, PNG и JPG — 20 лет.
2. SVG ещё молодой, всего 15 лет.
3. WebP всего 3 года и 40% поддержки.
4. Динамический растр Canvas и его 83%.
Важность правильного выбора формата сложно переоценить.
3
SVG
Шаблон
<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
WebP
MIFMagic Image Format
Редакторы
Не надо
Фотошоп
Жаба
За пакет Ежемесячно Сейчас
RUR 60 000 5 000 1 500
UAH 15 441 1 286 386
16
sRGB
Скетч2000 ₶
Утилиты
xScope
xScope
ColorSnapper
CSS Hat
Enigma64
Slicy
Оптимизация
Умная и тупая
Умная оптимизация
— Оптимизация JPEG в 3 частях.
— Оптимизация PNG в 4 частях.
— Комбинаторика.
48
ImageOptim JPEGmini
Спрайты?
dataURI
SPDY
Рисуем стилями
Рисуем стилями
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
border-image
Рисуем стилями
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
clip:rect
Читать дальше
— С ножом против паровоза
— Коллективный .PSD
— Discovering Sketch
74
Спасибо!
Вопросы?