Adobe 65045315 Photoshop Elements Manual - Page 301

Using transparency and mattes, About transparent and matted web images

Page 301 highlights

USING PHOTOSHOP ELEMENTS 10 295 Optimizing for the web More Help topics "Preview an animation" on page 300 "Understanding layers" on page 62 Using transparency and mattes About transparent and matted web images Transparency makes it possible to create nonrectangular images for the web. Background transparency, supported by the GIF and PNG formats, preserves transparent pixels in the image and allows the background of the web page to show through the transparent areas of your image. (Although the JPEG format does not support transparency, you can specify a matte color to simulate the appearance of transparency in the original image.) Web button without transparency (left), and with transparency (right) Background matting, supported by the GIF, PNG, and JPEG formats, simulates transparency by filling or blending transparent pixels with a matte color that matches the web page background. Background matting works best if the web page background is a solid color and if you know what that color is. To create background transparency or background matting in the optimized image, you must start with an image that contains transparency. You can create transparency when you create a new layer or use the Background Eraser, Magic Eraser, or Magic Extractor tools. When working with GIF or PNG-8 files, you can create hard-edged transparency: all pixels that are more than 50% transparent in the original image are fully transparent in the optimized image, and all pixels that are more than 50% opaque in the original image are fully opaque in the optimized image. Use hard-edged transparency when you don't know the background color of a web page, or when the web page background contains a texture or pattern. However, keep in mind that hard-edged transparency can cause jagged edges in the image. GIF without hard-edges transparency (left), and with hard-edged transparency (right) Last updated 1/2/2012

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341

295
USING PHOTOSHOP ELEMENTS 10
Optimizing for the web
Last updated 1/2/2012
More Help topics
Preview an animation
” on page
300
Understanding layers
” on page
62
Using transparency and mattes
About transparent and matted web images
Transparency makes it possible to create nonrectangular images for the web. Background transparency, supported by
the GIF and PNG formats, preserves transparent pixels in the image and allows the background of the web page to
show through the transparent areas of your image. (Although the JPEG format does not support transparency, you can
specify a matte color to simulate the appearance of transparency in the original image.)
Web button without transparency (left), and with transparency (right)
Background matting, supported by the GIF, PNG, and JPEG formats, simulates transparency by filling or blending
transparent pixels with a matte color that matches the web page background. Background matting works best if the
web page background is a solid color and if you know what that color is.
To create background transparency or background matting in the optimized image, you must start with an image that
contains transparency. You can create transparency when you create a new layer or use the Background Eraser, Magic
Eraser, or Magic Extractor tools.
When working with GIF or PNG-8 files, you can create hard-edged transparency: all pixels that are more than 50%
transparent in the original image are fully transparent in the optimized image, and all pixels that are more than 50%
opaque in the original image are fully opaque in the optimized image. Use hard-edged transparency when you don’t
know the background color of a web page, or when the web page background contains a texture or pattern. However,
keep in mind that hard-edged transparency can cause jagged edges in the image.
GIF without hard-edges transparency (left), and with hard-edged transparency (right)