Вадим Макеев "С ножом против паровоза 2. Оптимизация и нарезка графики для профессиональной вёрстки"
Post on 16-Jun-2015
454 Views
Preview:
DESCRIPTION
Transcript
Вадим Макеев
1
С ножом против паровозаЯндекс.Субботник — 25 апреля ’09
С ножом против паровозаЯндекс.Субботник — 25 апреля ’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,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От мольберта к фрезеровочному станку
Горячие клавиши
2.Отражение слоя
FlipHorizontal—Cmd+Opt+H
FlipVertical—Cmd+Opt+V
13
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
2.Отражение слоя
FlipHorizontal—Cmd+Opt+H
FlipVertical—Cmd+Opt+V
3.Отражение холста
FlipCanvasHorizontal—Cmd+Shift+H
FlipCanvasVertical—Cmd+Shift+V
14
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
4.Поворот холста
90°CW—Cmd+Shift+C(почасовой)
90°CCW—Cmd+Shift+Opt+C(противчасовой)
15
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
4.Поворот холста
90°CW—Cmd+Shift+C(почасовой)
90°CCW—Cmd+Shift+Opt+C(противчасовой)
5.Размер изображения и холста
ImageSize—Cmd+Opt+I
CanvasSize—Cmd+Opt+C
16
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
6.Работа со стилями слоя
CopyLayerStyle—Ctrl+Cmd+C
PasteLayerStyle—Ctrl+Cmd+V
ClearLayerStyle—Ctrl+Cmd+X
17
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
7.Дублирование слоя
DuplicateLayer—Cmd+Shift+D
18
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
7.Дублирование слоя
DuplicateLayer—Cmd+Shift+D
8.Создание слоя для экспорта
NewLayerBasedSlice—Cmd+Shift+L
19
Особенности укрощения PsОт мольберта к фрезеровочному станку
Горячие клавиши
7.Дублирование слоя
DuplicateLayer—Cmd+Shift+D
8.Создание слоя для экспорта
NewLayerBasedSlice—Cmd+Shift+L
9.Ваше любимое действие…
20
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое…
21
22
23
24
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
25
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
2.Остальное—повешенонагорячиеклавиши
26
Особенности укрощения PsОт мольберта к фрезеровочному станку
Инструменты и панели
1.Подрукойтолькосамоенеобходимое
2.Остальное—повешенонагорячиеклавиши
3.Всенастройкисохраняютсявпрофиль(Workspace)
27
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож…
28
29
30
31
32
33
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
34
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
2.Настройкиэкспорта…
35
36
37
38
39
40
41
42
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
2.Настройкиэкспорта
43
Особенности укрощения PsОт мольберта к фрезеровочному станку
Эффективный экспорт
1.Диалог«SaveforWeb&Devices»+Нож
2.Настройкиэкспорта
3.Теперьправилаваши…
44
45
46
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.Любимыеграбли
47
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.Любимыеграбли
2.Простоерешение?
48
Особенности укрощения PsОт мольберта к фрезеровочному станку
Цветовые профили
1.Любимыеграбли
2.Простоерешение?
3.Ну,несовсемпростое:)
49
Особенности укрощения PsЦвет в профиль и анфас
Теория
1.Стандартноецветовоепространстводлявеба—sRGB
50
Особенности укрощения PsЦвет в профиль и анфас
Теория
1.Стандартноецветовоепространстводлявеба—sRGB
2.Средняягаммаприравниваетсякзначению2.2
51
Особенности укрощения PsЦвет в профиль и анфас
Теория
1.Стандартноецветовоепространстводлявеба—sRGB
2.Средняягаммаприравниваетсякзначению2.2
3.ГаммаWindows—2.2
52
Особенности укрощения PsЦвет в профиль и анфас
Теория
1.Стандартноецветовоепространстводлявеба—sRGB
2.Средняягаммаприравниваетсякзначению2.2
3.ГаммаWindows—2.2
ГаммаMacOSX10.5Leopard—1.8
53
Особенности укрощения PsЦвет в профиль и анфас
Теория
1.Стандартноецветовоепространстводлявеба—sRGB
2.Средняягаммаприравниваетсякзначению2.2
3.ГаммаWindows—2.2
ГаммаMacOSX10.5Leopard—1.8
ГаммаMacOSX10.6SnowLeopard—2.2
54
Особенности укрощения PsЦвет в профиль и анфас
Теория
4.WindowsXP,VistaиLinuxиспользуютдля
изображенийбезпрофиляsRGB
55
Особенности укрощения PsЦвет в профиль и анфас
Теория
4.WindowsXP,VistaиLinuxиспользуютдля
изображенийбезпрофиляsRGB
5.MacOSXиспользуетдляизображенийбезпрофиля
цветовойпрофильмонитора
56
Особенности укрощения PsЦвет в профиль и анфас
Теория
4.WindowsXP,VistaиLinuxиспользуютдля
изображенийбезпрофиляsRGB
5.MacOSXиспользуетдляизображенийбезпрофиля
цветовойпрофильмонитора
6.Браузерынеиспользуютпрофиливообще *
57
Особенности укрощения PsЦвет в профиль и анфас
Идеальным веб-дизайнерам
1.Калиброватьмониторсгаммой2.2
58
Особенности укрощения PsЦвет в профиль и анфас
Идеальным веб-дизайнерам
1.Калиброватьмониторсгаммой2.2
2.ВкачестверабочегопрофиляиспользоватьsRGB
Кпримеру—Europe Web/Internet
59
Особенности укрощения PsЦвет в профиль и анфас
Идеальным верстальщикам
1.Калиброватьмониторсгаммой2.2
2.ВкачестверабочегопрофиляиспользоватьsRGB
Кпримеру—Europe Web/Internet
60
Особенности укрощения PsЦвет в профиль и анфас
Идеальным верстальщикам
1.Калиброватьмониторсгаммой2.2
2.ВкачестверабочегопрофиляиспользоватьsRGB
Кпримеру—Europe Web/Internet
3.Иещёкое‐что…
61
62
63
64
65
66
67
Особенности укрощения PsЦвет в профиль и анфас
Несчастным верстальщикам
1.РабочийпрофильsRGB,Гамма2.2
68
Особенности укрощения PsЦвет в профиль и анфас
Несчастным верстальщикам
1.РабочийпрофильsRGB,Гамма2.2
2.Вдиалогеонесовпадениицветовыхпрофилей…
69
70
71
72
73
74
Особенности укрощения PsЦвет в профиль и анфас
Несчастным верстальщикам
1.РабочийпрофильsRGB,Гамма2.2
2.Вдиалогеонесовпадениицветовыхпрофилей…Гм.
75
Особенности укрощения PsЦвет в профиль и анфас
Несчастным верстальщикам
1.РабочийпрофильsRGB,Гамма2.2
2.Вдиалогеонесовпадениицветовыхпрофилей…Гм.
3.Вчёмжеправда,брат?
76
Особенности укрощения PsЦвет в профиль и анфас
Решение
1.ВсемработатьвsRBGинеиметьпроблем
77
Особенности укрощения PsЦвет в профиль и анфас
Решение
1.ВсемработатьвsRBGинеиметьпроблем
2.Вособыхслучаях—конвертироватьврабочийпрофиль.
Ноконвертироватьосторожно,без дизеринга.
78
Особенности укрощения PsЦвет в профиль и анфас
Решение
1.ВсемработатьвsRBGинеиметьпроблем.
2.Вособыхслучаях—конвертироватьврабочийпрофиль.
Ноконвертироватьосторожно,без дизеринга.
3.Использоватьнеадекватныйцветовойпрофиль.
Идапоможетвамбог…
79
Особенности укрощения PsЦвет в профиль и анфас
Решение
1.sRBG,ProofColors,ConverttosRGB
2.sRGB,ProofColors,ConverttosRGB
ConverttotheWorkingSpace,UseDither
3.sRBG,ProofColors,ConverttosRGB,
Usetheembeddedprofile
80
Особенности укрощения PsЦвет в профиль и анфас
Решение
p.s.ОтдельноеспасибоАлександру Шуваеву
81
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
82
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
2.Использованиевещейпоназначению
83
Приёмы кунфуБыстрее, выше, сильнее
При чём тут холодное оружие?
1.Экономиявремени
2.Использованиевещейпоназначению
3.Примеры…
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
Cmd + Shift + Left
99
Cmd + Alt + H
100
Cmd + Shift + Down
101
Cmd + Alt + V
102
103
104
Приёмы кунфуБыстрее, выше, сильнее
Торт слоёный
1.Выходиздвумерногопространства
105
Приёмы кунфуБыстрее, выше, сильнее
Торт слоёный
1.Выходиздвумерногопространства
2.Дискретность…
106
107
wtf.jpg
108
109
wtf.gif
110
wtf.jpg
111
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
112
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
2.AlphaImageLoaderдляIE6—проклятиенавека
113
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
2.AlphaImageLoaderдляIE6—проклятиенавека
3.Авсегда лионнужен?
114
Приёмы кунфуБыстрее, выше, сильнее
Проще говоря
1.PNG‐24—этоотлично
2.AlphaImageLoaderдляIE6—проклятиенавека
3.Авсегда лионнужен?Ответ—не всегда.
115
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush, optipng, jpegtran
116
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush, optipng, jpegtran
2.PngThing, PngCrusher (MacOSX)
117
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush, optipng, jpegtran
2.PngThing, PngCrusher (MacOSX)
3.ImageOptim…
118
119
120
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush, optipng, jpegtran
2.PngThing, PngCrusher (MacOSX)
3.ImageOptim
121
Изображения на диетеБыть умнее Паровоза
Экономим на спичках
1.pngcrush, optipng, jpegtran
2.PngThing, PngCrusher (MacOSX)
3.ImageOptim
4.SmushIt…
122
123
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
124
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
2.Мгновеннаяотрисовка
125
Изображения на диетеБыть умнее Паровоза
Спрайты
1.Экономиянаhttp‐запросах
2.Мгновеннаяотрисовка
3.От28‐мидо1‐й…
126
127
128
129
130
131
Изображения на диетеБыть умнее паровоза
Спрайты
1.http://webo.in(по‐русски)
2.http://yuiblog.com/blog(по‐английски)
132
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
133
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
2.Макетонарезочныеавтоматы
134
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1.Photoshopнетолькодля«эффектакрасныхглаз»
2.Макетонарезочныеавтоматы
3.Смертьоформительскойграфики…
135
Что дальше?Развитие — ключ к успеху
Не верстальщик, но веб-технолог
3.Смертьоформительскойграфики
box‐shadow
border‐radius
border‐image
text‐shadow
Подробнее—http://css3.info
Вадим Макеев — http://pepelsbey.net
Спасибо!
С ножом против паровозаЯндекс.Субботник — 25 апреля ’09
136
top related