Оптимизация и нарезка графики для профессиональной...
TRANSCRIPT
Вадим Макеев
1
С ножом против паровозаЯндекс.Субботник — 31 января ’09
С ножом против паровозаЯндекс.Субботник — 31 января ’09
1.Верстальщикиграфика
2.Рабочийстанок
3.ОсобенностиукрощенияPs
4.Приёмыкунфу
5.Изображениянадиете
6.Чтодальше?
2
Верстальщик и графикаОсобенности профессии
1.Графика—основноевыразительноесредство
3
Верстальщик и графикаОсобенности профессии
1.Графика—основноевыразительноесредство
2.Верстальщик—связующеезвено
4
Верстальщик и графикаОсобенности профессии
1.Графика—основноевыразительноесредство
2.Верстальщик—связующеезвено
3.Форматыграфикииредактор
5
Верстальщик и графикаФорматы графики
1.PSD—отраслевойстандарт
2.PNGслоёный
3.PNGполноцветный(PNG24/32)
4.PNG8‐битный
5.GIF8‐битный
6.JPGполноцветный
6
Рабочий станокТщетные поиски альтернативы
Флагманы
1.AdobePhotoshop2.AdobeFireworks
7
Рабочий станокТщетные поиски альтернативы
Чисто поржать
3.PhotoshopElements4.GIMP
8
Особенности укрощения PsОт мольберта к фрезеровочному станку
Adobe Паровоз
1.Всёсамоегрустноевназвании(Photoshop)
9
Особенности укрощения PsОт мольберта к фрезеровочному станку
Adobe Паровоз
1.Всёсамоегрустноевназвании(Photoshop)
2.Остальное—вменюFilterи3D
10
Особенности укрощения PsОт мольберта к фрезеровочному станку
Adobe Паровоз
1.Всёсамоегрустноевназвании(Photoshop)
2.Остальное—вменюFilterи3D
3.Вруки—напильник…
11
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
1.КонвертациявRGB
RGBColor—Cmd+Shift+R
12
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
1.КонвертациявRGB
RGBColor—Cmd+Shift+R
2.Отражениеслоёв
FlipHorizontal—Cmd+Opt+H
FlipVertical—Cmd+Opt+V
13
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
3.Размеризображенияихолста
ImageSize—Cmd+Opt+I
CanvasSize—Cmd+Opt+C
14
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
3.Размеризображенияихолста
ImageSize—Cmd+Opt+I
CanvasSize—Cmd+Opt+C
4.Отражениехолста
FlipCanvasHorizontal—Cmd+Shift+H
FlipCanvasVertical—Cmd+Shift+V
15
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
5.Поворотхолста
90°CW—Cmd+Shift+C(почасовой)
90°CCW—Cmd+Shift+Opt+C(противчасовой)
16
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
5.Поворотхолста
90°CW—Cmd+Shift+C(почасовой)
90°CCW—Cmd+Shift+Opt+C(противчасовой)
6.Вашелюбимоедействие…
17
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое…
18
19
20
21
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
22
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
2.Остальное—повешенонагорячиеклавиши
23
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
2.Остальное—повешенонагорячиеклавиши
3.Всенастройкисохраняютсявпрофиль(Workspace)
24
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож…
25
26
27
28
29
30
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
31
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
2.Настройкиэкспорта…
32
33
34
35
36
37
38
39
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
2.Настройкиэкспорта
3.Теперьправилаваши…
40
41
42
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.Любимыеграбли
43
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.Любимыеграбли
2.Простоерешение…
44
45
46
47
48
49
50
51
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.View>ProofSetup>MonitorRGB
2.Edit>ColorSettings>MonitorColor,Ask
3.File>SaveforWeb>ConverttosRGB
4.Open…Convertdocumentcolorsto…
52
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
53
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
2.Использованиевещейпоназначению
54
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
2.Использованиевещейпоназначению
3.Примеры…
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
Cmd + Shift + Left
70
Cmd + Alt + H
71
Cmd + Shift + Down
72
Cmd + Alt + V
73
74
75
Приёмы кунфуБыстрее, выше, сильнее
Торт слоёный
1.Выходиздвумерногопространства
76
Приёмы кунфуБыстрее, выше, сильнее
Торт слоёный
1.Выходиздвумерногопространства
2.Дискретность…
77
78
wtf.jpg
79
80
wtf.gif
81
wtf.jpg
82
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
83
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
2.AlphaImageLoaderдляIE6—проклятиенавека
84
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
2.AlphaImageLoaderдляIE6—проклятиенавека
3.Авсегдалионнужен?
85
86
87
88
89
90
91
92
93
94
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png
jpegtran‐copynone‐optimizesrc.jpgdest.jpg
95
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png
jpegtran‐copynone‐optimizesrc.jpgdest.jpg
2.PngThing,PngCrusher(MacOSX)
96
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png
jpegtran‐copynone‐optimizesrc.jpgdest.jpg
2.PngThing,PngCrusher(MacOSX)
97
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png
jpegtran‐copynone‐optimizesrc.jpgdest.jpg
2.PngThing,PngCrusher(MacOSX)
3.Smush.it…
98
99
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
100
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
2.Мгновеннаяотрисовка
101
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
2.Мгновеннаяотрисовка
3.От28‐мидо1‐й…
102
103
104
105
106
107
Изображения на диетеБыть умнее паровоза
Спрайты
1.http://webo.in(по‐русски)
2.http://yuiblog.com/blog(по‐английски)
108
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
109
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
2.Макетонарезочныеавтоматы
110
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
2.Макетонарезочныеавтоматы
3.Смертьоформительскойграфики…
111
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
3.Смертьоформительскойграфики
box‐shadow
border‐radius
border‐image
text‐shadow
Подробнее—http://css3.info
Вадим Макеев — http://pepelsbey.net
Спасибо!
С ножом против паровозаЯндекс.Субботник — 31 января ’09
112