Как нарезать графику для вашей вёрстки и не порезаться? Плёвое дело: узнать поближе Фотошоп, посмотреть на альтернативные редакторы графики, разобраться в растровых и векторых форматах и методах экспорта, оптимизации и сборки, приготовиться реализовать всё на чистом CSS, сделать красиво для ретины и предложить фолбеки для старых браузеров.

1. Возвращение
ножа и паровоза

2. Графика

3. 3
Растровая
1. GIF скоро стукнет 30, PNG и JPG — 20 лет.
2. SVG ещё молодой, всего 15 лет.
3. WebP всего 3 года и 40% поддержки.
4. Динамический растр Canvas и его 83%.
Важность правильного выбора формата сложно переоценить.

4. SVG

5. 5
Шаблон
01. <svg xmlns="http://www.w3.org/2000/svg">
02.
<rect
03.
x="100" y="100"
04.
width="550" height="550"
05.
fill="red" stroke="black"
06.
/>
07. </svg>

6. Мощъ SVG

7. WebP

8. MIF
Magic Image Format

10. Редакторы

13. Не надо

14. Фотошоп

16. 16
Жаба
За пакет
Ежемесячно
Сейчас
RUR
60 000
5 000
1 500
UAH
15 441
1 286
386

28. sRGB

34. Скетч
2000 ₶

35. Утилиты

36. xScope

37. xScope

38. Color
Snapper

39. CSS Hat

41. Enigma64

43. Slicy

46. Оптимизация

47. Умная и тупая

48. 48
Умная оптимизация
— Оптимизация JPEG в 3 частях.
— Оптимизация PNG в 4 частях.
— Комбинаторика.

49. ImageOptim
JPEGmini

50. imgo

51. svgo

52. borschik

53. Compass

54. Спрайты?

56. dataURI

57. SPDY

58. Рисуем стилями

59. 59
Рисуем стилями
01. E {
02.
clip :rect(…);
03.
box-shadow :
04.
0 0 0 10px #FFF, 0 0 0 20px #000;
05.
border-radius :12px;
06.
border-image :url(shadow.png) 199 187 repeat;
07.
}

60. border-image

68. 68
Рисуем стилями
01. E {
02.
border:solid 0 transparent;
03.
border-width: 199px
04.
-webkit-border-image:url(shadow.png) 199 187 repeat;
05.
-o-border-image:url(shadow.png) 199 187 repeat;
06.
07.
187px ;
border-image :url(shadow.png) 199 187 repeat;
}

69. clip:rect

70. shinydemos.com

74. 74
Читать дальше
— С ножом против паровоза
— Коллективный .PSD
— Discovering Sketch

75. Спасибо!

76. sokr.me/ktr

77. @pepelsbey

78. pepelsbey.net

79. Shower

80. Вопросы?