Adobe Photoshop Dlja Web

Adobe Photoshop
WEB
. .
4
Adobe Photoshop
Web

[004.731.12:004.92](075.4)
32.973.202-018.278-1
21
1
21 Adobe Photoshop Web : . . .: [, ] /

. . . . ..: , 2005. 224 .: .
ISBN 5-93673-048-4.
I. , . ., .
CIP
Adobe Photoshop
Adobe ImageReady Web. -
.
, Web- Web-, , ,
HTML- Web-.
, , , ,
, - !
- : www.3st.ru
E-mail: post@triumph.ru
ISBN 5-93673-048-4
, 2005
, 2005
, 2005
1. Web- ................................ ....6

2.1)
Adobe ftiofoshop CS
AdobeImageReadyCS.........................................
. Web-
4. ^)
Adobe ImaejeReady CS

1. Web-cmpaim..

Web-

?

6
6
9
10
13
14
HTML-
19
28
...
29
35
36
2.floe)T01flO&K3
Adobe fliotoshop CS Adobe Imageready OS
38
48
52
'.
61
65
71
77
87
91
97
107
...
120
123
131
133
144
Web
148
151

...... ............................ ........ . ............................................................. 171
................................... .-
............................................................................
779
.................................... . ....... . ......... . ........................ ........................ 180

.... ........................................................ , .......................................... 18J
- ....................................... 183
" .............................. . ......................................................... 197
.
GIF89a .................................................................. .... .......................... 206
GIF- ..................................................... . ............................. . ...... 207
4.
Adobe Imageready 5
............... ... ............................... .................... 209
........................... , .............. ..................................................... 212
........................................................ 214
, ........... . ............. 217
....... . ................ . .......................................... 220
1.
Web-
, Web-, ,
, , ,
.

, ,
, . -
picture element ( ). , , , ,
, .
,
, , , . , , . ,
. 15-
SVGA 800 600 ; , ,
800x600 - 1600* 1200 - .
,
, . ,
800x600,
, . , 72 120 .
:
.

(ppi). ,
. , 1x1 72 ppi
5184 - 72 72 = 5184.
, 300 ppi, 90000
Web-
.
,
.
, . ,
,
. , ,
, , , ,
, .
, ,
, ()
(). , , .
. ,
1 1 200 ppi
, 100 ppi.

. , .
.
: . , Macintosh 72 .
(dpi), a PC-
, 96 dpi.
. , , .
, 144 ppi 72 ppi , 72 144 .
120 dpi ,
120 144 .
Adobe Photoshop Web

,
- , . , .
,
. , ,
, - : .
8 28, 256
. 24 234, 16,7
. , , 16,7
, . ,
1 48 /.

. , , ,
. RGB - Red, Green, Blue (,
, ) - 24 ( 8
), 16,7 .
, RGB - , .

. :
, , . ,
, - .
', 255, . ,
, .
, ,
, . ,
- 1
24 , , ,
.
, , , :
F = (A/25,4xB/25,4)xD2xC/8,
F - ;
- ;
- ;
Web-
D - dpi;
- .
, Web- 10x15 150 dpi 24 ,
1569378 1,49 .
Web-
Web- . , 800x600. ,
, 790x430 . , ,
Windows 32x32 .
Web-,
, . 700 400 .

. ,
256 . 24- ,
16,7 ,
.
, , ,
, 8-
, 256 . , , , , ,
, .
. Web-
RGB. Web- , , , WYSIWIG - What You See Is
What You Get ( , ). ,
.
?,
Web, . ,
, , 14,4 /, .
1
1 , 30
30 .
9
Adobe Photoshop Web

: ,
, ?
,
. ,
, ,
60 .
,

. .
, - , . ,
. Web-
JPEG, GIF PNG.
JPEG (Joint Photographic Experts Group - ) -
. JPEG ,
100 , , .
: 5 15 . ,
, , . JPEG- , .
:
, .
JPEG, JPEG
(p-JPEG). JPEG ,
, ,
. JPEG 24 /.
JPEG 32- , .
, , JPEG
, .
JPEG ,
JPEG- ,
. JPEG
, ,
, .
10
Web-
GIF (Graphics Interchange Format - ) CompuServe
1987 . , .
, : , .. GIF.
_ ,
, ,
. Web-, 40-50 , ' -
, .
Web- ,
,
. GIF, ,
World Wide Web. GIF
JPEG.
, GIF - ,
; - BMP, PCX, TIFFxH
. GIF - , , . , GIF- ,
.
-,
GIF ,
. GIF
, , , - ,
, , , , - , .
JPEG,
, GIF . , JPEG
GIF
16 , GIF 256- .
1989 , GIF,
.
, GIF ,
: 8-, 4- ..,
11
Adobe Photoshop Web

. ,
, ,
.
- . (interlaced). GIF-,
, , . GIF ,
.
, GIF89a - GIF87a,
, , , , , GIF-
, - , , .
, t3IF89a
-
. ,
, .
, HTML- . , , - GIF, - .
1994 , Unisys
, GIF,
, . GIF
. GIF PNG. GIF : GIF-
.
PNG (Portable Network Graphics - ) , , Netscape Navigator,
4, . , , GIF
, , ; ,
48 .
12
'
'
'
'
Web-
PNG .
, , ,
PNG , GIF,
- , ,
.
PNG
-. PNG, ,
: - ,
.
,
, , , PNG
, . ,
-
-.
PNG- .
PNG - MNG (Multiple Network Graphics - ). PNG PNP (Portable Network Photography -
), ,
.
?
, , ,
. , ,
256 , JPEG, GIF. .
. ,
, GIF. , JPEG , ,
, GIF . ,
. , 10 ,
. , 256,
256 ,
.
13
Adobe Photoshop Web

, , , - GIF JPEG ,
.
.
, :
,
, JPEG.

, JPEG .
,
GIF.

, GIF.
, (interlaced) GIF JPEG, , , , , .
, GIF - . - , . GIF , . . GIF
, ,
.. ,
,
, , ,
. .
GIF -
, , ,
. GIF
, , Adobe Photoshop.

Web-, ,
, , ,
. - , ,
.
' *' \
14
Web-
JPEG 24 . , , :
;
.
, .
, . ,
,
, .
, ,
. ,
. JPEG
,
.
. Photoshop .
. -
- JPEG.
,
. Adobe Photoshop .
, , Photo- Paint PaintShopPro, 1 255.
-? ,
.
, , . ,
,
, . .
GIF JPEG .
256 LZW,
-.
, :
;
;
15
Adobe Photoshop Web

;
;
;
;
.
. , , 256. ,
. , GIF
256 . '
2 256, , 45 99.
: 2, 4, 8, 16, 32, 64,
128, 256. ,
, 1 8 . ,
, , 97 , -
7 ,
128 . .
. 256 ' 32,
2 .
. , .. 256
, , .
, .
. . , ,
, , . ,
, , . ,
,
- 16 256.
,
. , , , .
16
Web-
, ,

. , , , .
, .
, ,
.
,
. -
(dithering). , ,
, . ,
.
, . - , . , 16 , .
, . , . .
.
. ,
- , .
GIF.
LZW, , ,
, - ,
. , .
Web-, Netscape Navigator Microsoft Internet Explorer,
. -, , . 256 , . -, . ,
. ,
,
17
Adobe Photoshop Web

- ,
.
,
, . ? ,
, . , 216 ,
Netscape Navigator,
Internet Explorer, Windows, Macintosh.
, ,
, , .
(browser-safe palette). .
, .
,
, , , .
Adobe Photoshop.
.
, ,
. ,
, . , ,
, 256 .
. . ,
,
. , ,
100x100 .
, .. 1x1
, GIF , , HTML-,
, 100x100. ,
, .
, , , . ,
GIF.
, ,
.
.
, HTML- ,
.
18
Web-
. , , .
,
. . , ,
8 16 ,
256 JPEG.
, , 2-3, . ,
, . ,
10, ,
.
. . GIF
. , GIF - - -
.
, , , . , (anti-aliasing) GIF,
, GIF ,
, .
, ,
GIF, .
. GIF89a . , , ,
8 , 4, 2, ,
, . Web , ,
. .
6 1^)
Web-
,
. - ,
, .
19
Adobe Photoshop Web
www.3st.ru/book/web/ex.zip. -
, , Web.
> index.html
.
(! .).
|3 My Computer
^1
. 1.1.
.
geoton.html.
> . geoton.html. Web ! ..
> (Notepad), (Start) (Taskbar) *
* (Programs * Accessories * Notepad).
> (Notepad) geoton.html Web.
HTML-.
, Web- :
<img src=CLOUD.GIF border=l>
20
Web-
,

,
"1| !|
12
. 1.2. Web- geoton.html

Web-
<img> src, . ,
, ..
geoton.html. ,
Web-, CLOUD.GIF ,
geoton.html.
:
<img
src=images\CLOUD.GIF border=l>
, images,
, geoton.html.
, <border>
. 1 1 .
HTML
</> href, .

URL-. :
< href= I I spisok.html"ximg src=CLOUD.GIF border=lx/a>
, CLOUD.GIF
spisok.html.
<centerx/center>,
Web-.
21
Adobe Photoshop Web

Windows
, Unix
, ,
. Web :
. ,
cloud.gif, CLOUD.GIF.
.
, , HTML, , .. ,
. , .. , Web . , HTML- geoton.html
CLOUD.GIF, Web
, - .
>- (Notepad) geoton.html Web.
<img>, Web-, src, src=CLOUD.G!F, URL- ,
.
> <img> geoton.html ,
src CLOUD.GIF, , :
src="http: / /www .inysite. ru/CLOUD. GIF".
, URL- WWW - http://,
, , www.mysite.ru - CLOUD.GIF,
/.
. ,
:
src="http:/ /www. 3st.ru/book/web/CLOtID. GIF"
*'
> geoton.html,
(Notepad) (File * Save).
> geoton.html Web
(. 1.3).
, ,
. ,
border. ,
.
22
Web-

!
,

,
| My Computer
. 1.3.

v , .
> , , |[ - (Refresh)
Internet Explorer (Reload Current Page) Netscape.
CLOUD.GIF.
, , , .
,
, :
. , - , - , - .
,
, . GIF , .
>. .
, Web-, <img>
src .
> (Notepad) geoton.html,
CLOUD.GIF :
<img src=CLOUD.GIF border=l>
, , HTML <img> alt, , . 23
Adobe Photoshop Web

, . alt
,
, Web-.
, .
, , .
<img> geoton.html alt "
",
. alt .
,
.
> geoton.html, <img> CLOUD.GIF, Web , alt=" " , ,
, :
<centerxa
href=spisok.htmlximg
src=CLOUD.GIF
alt="O6nacTb "//^>
border=l
, CLOUD.GIF, Web ,
.
> ,
fo. ,
alt (. 1.4).
- Microsoft Internet Explorer - [Working Offline]
Die
Hdit
View
Favorites
l-Bnds * "* Asiare[fiC:WDb\Buolon,tiliBl
Jools
JJelp
tBFnviirlles <jHislory |
j <Go j Links
/,

,
Q Da
-Compuler
. 1.4,
24
Web-
, , alt
. ,
.
, , .
.
v Internet Explorer *
(Tools * Internet Options). (Internet Options).
> Internet Explorer
(Advanced), .
Internet Explorer (Show
pictures). ,
(. 1.5).
| '
:
0
(

^
0 "
0 ( )
0 -
121 -
0 -
-
Q
0
@ HTTP 1.1
0 HTTP 1.1
] HTTP 1.1 -
IT.
OK
| )
. 1.5. Advanced () Internet Options

( ) Internet Explorer
> Internet Explorer (Apply).
> (Internet
Options) (Preferences).
, , , .
25
Adobe Photoshop Web

> ,
. ,
, alt (. 1.6).
-l-Back * - & ( {(Search & Favorites OMislory

!
I I
,

,
JJDone
ijljll My Computer
. 1.6. ,
width () height () <img>
, .
, .
<img> width=613 height=60, . , ,
Adobe Photoshop. .
> geoton.html <img>,
, :
<centerxa href =" spisok.html "ximg src=CLOUD.GIF alt="
" border=l width=613 height=60x/ax/center>
*B , , ,
, width () height
() (. 1.7).
> Web.
, ,
width height. , . .
26
Web-
* '" & (
QSearch
CSFovoritoe
^History
l&
,

,
My Computer
. 1.7.
> HTML, <img>, : width=102 height=10 ,
:
<centerxa href = "spisok.html"ximg src=CLOUD.GIF !="
" border=l width=102 height=10x/ax/center>
, ,
. 1.8.
<1^111|111111 - (Working OlHirml

tiki
.dil
VKJW
Favorites
lools
Mlfi
J-Back ''* - ffli I ttSeorch Favorite GJHiMoiy | 81"

'i [Q C:\WabViBolon.hlinl

!
^

,
) Dorve
. 1.8.
,
width height
27
Adobe Photoshop Web

, . . . ,
width height

. ,
,
, .

Web-
. , , , , .
BG.JPG , , .
geoton.html, Web-.
> geoton.html, (Notepad),
<body>
HTML:
<img src=BG.JPG>
> geoton.html .
> .
, ,
, Web- (. 1.9),
CLOUD.GIF .
. 1.9.
28
Web-
JPEG, , GIF89a, .
.
JPEG, , ,
. ,
, .
,
. ,
.
, ,
Web-, ,
, , :
< href="_11></>
-
.
, , , ..
JPEG, - . . , JPEG .
.
' , JPEG ,
.
- HTML-,
. , .
, , . , GIF, ,
2-3 .

Web-, ,
<body> bgcolor.
, .
, ,
29
Adobe Photoshop Web

GIF, JPEG NPG.
<body> background, -
URL- .
geoton.html Web- BG.JPG,
Web .
> geoton.html, (Notepad),
HTML- <img src=BG. JPG>.
> <body> background=BG. JPG
, <body> :
<body bgcolor=blue text=yellow link=white vlink=yellow
alink=red
background=BG.JPG>
HTML geoton.html
. 1.10. ,
, , , BG.JPG. ,
, Web-.
CLOUD.GIF (. 1.11).
, bgcolor <body>. ,
<body> - bgcolor background - background, ,
, bgcolor.
|, geoton -
5
<ntml>
<head>
tle>KoMnaHM* rcoTOH</t1tle>
</head>
<body bgcolor-blue text-yellow link-white vllnk-yellow slink-red
background-Be.JPG>
<hl al1gn-center>flo6po !</hl>
<centerxa href-"sp1sok.html"x1mg src-CLOUD.Gir alt-"
" border-1 wldth-102 height-10x/ax/center>
<p style-"font-weight: bold; font-style: Italic; font-size: 150*;
text-align: center > < href-"sp1sok.html">o
</>,
npoH3BOAHM</px/body>
</html>
. 1.10. geoton.html
30
Web-
* fl I ^Search 31 Favorite OHisloiy | %~ S
. 1.11.
- CSS. , Web .
, BG.JPG
Web- ,
spisok.html. .
,
Web- <head>.. .</head>
<style>. HTML- .
<style> type= n text/css",
CSS. , <style>.. .</style> / :
<style type="text/css">
</style>
HTML spisok.html.
> spisok.html <title>4eM
?</title> <stylex/style>, . HTML Web-,
<head>... < /head>, :
<head>
31
Adobe Photoshop Web

<title>4eM 3aHMMaeMCH?</title>
</style>
</head>
, - HTML.
:
_ { : },
_ - HTML-, , hi, p, body, -
. , , ,
<>...</> Web-,
150% , :
<style type= 1 I text/css">
p { font-weight: bold; font-style: italic; font-size: 150%;
text-align: center }
</style>
, <>... </> Web- - geoton.html - style.
<>.. . </>.
,
<>.. .</> .
, . Web. <style> body background-image, URL-
.
url : url("BG.JPG n ). , body
<style> :
body { background-image: url("BG.JPG") }
> <style> </style> ,
body.
HTML <style>... </style> :
body { background-image: url("BG.JPG") }
</style>
32
Web-
> spisok.html -. ,
BG.JPG
.
v , text -:body>, , <body text="black">.
, , , . 1024x768
, . ,
,
.
, .. .
background-repeat no-repeat: background-repeat: no-repeat.
> HTML spisok.html ,
<style> </style> :
body { background-image: ur1("BG.JPG"); background-repeat:
no-repeat }
</style>
. , , , , , .
background-repeat :
repeat - , ; ;
repeat- - ;
repeat- - .

background-position. , - top
(), center ( ), bottom () - - left (),
center ( ), right ().
. , background-position: center center
, .
33
2 - 6645
Adobe Photoshop Web

> body spisok-html
background-position: center center. <style>...</style>
:
body { background-image: u r l ( " B G . J P G " ) ; background-repeat:
no-repeat; background-position: center center }
</style>
, , 1024x768
, .
> , , , .
, , ,
,
. body background-attachment fixed: background-attachment: fixed.
> body.
<style> </style> HTML- spisok.html :
<style type=text/ess">
body { background-image: u r l ( " B G . J P G " ) ; background-repeat:
no-repeat; background-position: center center;
background-attachment: fixed }
</style>
,
, Web- .
, Web-,
background <body>.
Web Web-:
http://www.abcgiant.com/
http://barrysclipart.com/
http://www.arttoday.com/
34
Web-

GIF, 1989 , , .. ,
, . -
, .
- , , . ,
, , .
, .
BG.GIF .
Web- geoton.html .
BG.GIF , BG.JPG,
, GIF ,
.
> (Notepad) geoton.html.
> HTML ,
background <body> BG.GIF
, :
cbody bgcolor=blue text=yellow link=white vlink=yellow
alink=red background=BG.G!F">
> geoton.html .
, , . - , . ,
,
bgcolor.
> (Notepad).
,
GIF. , , .
35
Adobe Photoshop Web

Web-
. , ,

. Web , , , .. . 1.12 .

Web- ,
.
, ,
.
,
,
,
(. 1.13, ).
(anti-aliasing) .

(. 1.13,
). ,
,
, .
,
, .
36
VABANf
. 1.12.

. 1.13.
()
()
2.

Adobe ftiotoshop C5
Adobe ImacjeKeady C5

. -
, Web-,
.
.
, Web; Macromedia Fireworks Adobe ImageReady. Macromedia
Web-,
Macromedia Fireworks, .
Adobe System Incorporated - Adobe ImageReady.
, ,
, Adobe Photoshop.
, Web- , Adobe
Photoshop, World Wide Web.
Adobe Photoshop 5.5 Adobe ImageReady,
, Adobe Photoshop
Web. ,
, Adobe System

- Adobe Photoshop. , , ,
. , - , . . , ,
Web. , ,
, , .
Adobe Photoshop Adobe ImageReady . : , , Web- Adobe
Adobe Photoshop Web

Photoshop, Adobe ImageReady,
, , ..
, Adobe Photoshop ,
.
, , , ,
.

- Adobe Photoshop CS Adobe ImageReady CS. Adobe Photoshop 7.0 Adobe ImageReady 7.0.

i
Adobe Photoshop.
> (Start) (Taskbar) Windows * Adobe Photoshop CS (Programs Adobe * Adobe Photoshop CS).
.
,
(. 2.1).
. 2.1. Adobe Photoshop CS

> Try (). Adobe Photoshop CS (. 2.2 . 2.3).
,
Photoshop Windows -
38
Photoshop ImageReady
Photoshop , ,
(. 2.2).
Adobe Photoshop
i S j You currently have Adobe Photoshop's primary Scratch and Windows'
/ primary paging file on the same volume, which can result in reduced
performance. It is recommended that you set Adobe Photoshop's primary
Scratch volume to be on a different volume, preferably on a different
physical drive.
Puc. 2.2.
Photoshop
Photoshop (Scratch disks) ,
.
Preferences (), Edit *
Preferences Plug-Ins & Scratch Disks ( ) 4- .
.
> , . Adobe Photoshop (. 2.3).
Color settings for Photoshop 6 will be configured usrig default
settings.
Do you wish to customise your color settings new?
. 2.. -
, . ,
, , , . ,
Yes (), No ().
, Edit Color Settings ( * ).
> No (),
. , ,
(. 2.4).
Show this dialog at startup (
), .
39
Adobe Photoshop Web
Tips and Tricks

Tips and Tricks From the Experts
Cotar Management Setup
setting Up Color
What's New
f
New Features At A Glance
New Feature HigHights
What's New Movie (Onlhe)
Puc. 2.4.
> Close (). Photoshop (. 2.5).
|(
C Adobe Photoshop
. 2.5. Adobe Photoshop

40
,
1 I
Adobe Photoshop - .
,
,
, .
: [] - -.
, [] - [] -
.
, . - , - .
(Options
Bar), .
Adobe Photoshop , (Tools) (. 2.6). , . , , [Kf] - Move Tool (V) (
(V)1), [\] - Magic Wand Tool (W) (
(W)) ,
, - Rectangular Marquee Tool (M) ( . 2.6.
()), |^| - Lasso Tool (L) (-
(L)).
(Tools)
.
-
,
, , .
,
,
.
, .
: , (V) -
.
41
Adobe Photoshop Web

: (Brush
Tool ()), (Pencil Tool ()), (Erazer Tool (E)). ,
, , //
(Blur/Sharpen/Smudge Tool (R)), // (Dodge/Burn/
Sponge Tool ()).
Tools :
[]] - Rectangular Marquee Tool () ( ()) .
, :
[] - Elliptical Marquee Tool (M) (
()) - ; Single Row Marquee Tool
( ) Single Column Marquee Tool
( ) - 1 .
[?^| - Lasso Tool (L) ( (L)) -
. (| - Polygonal Lasso
Tool (L) ( (L)),
fW] - Magnetic Lasso Tool (L) ( (L)), .
[]-Crop Tool () ( ()) - , .
[53-Healing Brush Tool (J) ( (J)) - ,
. [] - Patch Tool (J)
( (J)),
, ^ - Color Replacement Tool (J) ( (J)), .
- Clone Stamp Tool (S) ( (S)) - . [] - Pattern Stamp Tool (S) ( (S)),
.
[^| - Erazer Tool () ( ()) - , . \?\- Magic Erazer
Tool () ( ()) - ,
,
(jPy - Background Erazer Tool (E) (
42
()), , ,
.
- Blur Tool (R) ( (R)) -
,
. | ] - Sharpen
Tool (R) ( (R)) , , - Smudge
Tool (R) ( (R)) -
.
1|
-
Selection Tool () ( ()) -
. [W] - Direct
Selection Tool () ( ()),
.
- Pen Tool () ( ()) - .
, ..
- Notes Tool (N) ( (N)) - , .
[] - Audio Annotation Tool (N) ( (N)),
.
[f5]-Hand Tool () ( ()) -
, .
Tools :
[KjT| - Move Tool (V) ( (V)) -
.
[\]-Magic Wand (W) ( (W)) - .
[^]-Slice Tool () ( ()) - . - \^\- Slice Select Tool () ( ()), ,
.
\j/\-Brush Tool () ( ()) -
. \/\ Pencil Tool () ( ()),
.
43
Adobe Photoshop Web

\Sf\ - History Brush Tool (Y) ( (Y)) -

. \3f] - Art History Brush
(Y) ( (Y)), , .
[]-Gradient Tool (G) ( (G)) - .
. [<$] - Paint Bucket Tool (G) ( (G)), .
-Dodge Tool () ( ()) -
. [QJ Burn Tool () ( ()) , [ip] - Sponge Tool (0) ( ())
.
[T]-Horisontal Type Tool () ( ()) - , ,
, .
|Hj-Rectangle Tool (U) ( (U)) - . : |G3j- Rounded Rectangle Tool (U) - , [] - Ellipse Tool (U) - , |QJ - Polygon Tool (U) - , \] - Line Tool (U) ( (U)) -
, [Z|] - Custom
Shape Tool (U) ( (U) -
, .
] - Eyedropper Tool (I) ( (I)) -
.
|t/J - Color Sampler Tool (I) ( (I)), /
|<^| - Measure Tool (I) ( (I)), .
| - Zoom Tool (Z) ( (Z)) -
.
44
(Tools)
.
(Set foreground color), - (Set
background color). t+- Switch Foreground and Background Colors (X)
( (X))
. ft - Default Foreground and Background Colors (D)
( (D))
- .
: - Edit in Standard Mode (Q)
( (Q)) - Edit in Quick Mask Mode (Q)
( (Q)) - ,
.
, : [] - Standard Screen Mode (F) ( (F)), [BJ - Full Screen Mode with Menu Bar (F) ( (F)), [] - Full Screen Mode (F) ( (F)).
(Tools) 'Si>tij - Edit
in ImageReady (Shift+Ctrl+M) ( ImageReady (Shift+Ctrl+M)),
Adobe ImageReady.
, Adobe Photoshop
, .. , .
, ,
.
, Adobe Photoshop Adobe Photoshop CS Settings,
, ,
, .

,
(Palettes). - . Adobe Photoshop ,
:
, , , , , , , ..
45
Adobe Photoshop Web

Adobe Photoshop (Tools) .
, , ,
. ,
Windows, . . [] , - 0. []
, , .

Window ().
,
. Adobe Photoshop .
Navigator (), Info
() Histogram (); - Color (), Swatches
(), Styles (); - Layers (), Channels (), Paths
(), History (), Actions (). .
. , , .
.
.
- .
(Status Bar), , ,
.
.
, Adobe Photoshop, Adobe ImageReady , .
> S>>@ - Edit in ImageReady (Shift+Ctrl+M) (
ImageReady (Shift+Ctrl+M)) (Tools).
Adobe ImageReady, (. 2.7).
, Adobe ImageReady Adobe Photoshop.
(Tools) , Adobe Photoshop.
, , , Adobe Photoshop: [] - Rectangle Image Map Tool (P) (
()) [4fo] - Image Map Select Tool (J)
46
( (J)): P^j]
r
| ^J - Circle Image Map Tool (P) ( ()) |^] - Polygon Image Map Tool (P) (
()) -
.
,
:
-Toggle Image Maps Visibility () (/
());
] -Toggle Slices Visibility (Q) (/ (Q));
tie
Ed
Image
Layer
Slicet
Select
Filler
View
Window
Help
.s,
.
\ a.
umu
-<i i-i o. a i 9
C. 2.7. Adobe ImageReady

]-Rollover Document (Y) ( (Y));
] -Preview in Default Browser (Ctrl+Alt+P) (
(Ctrl+Alt+P)).
- Edit in Photoshop (Shift+Ctrl+M) (

Photoshop (Shift+Ctrl+M)) (Tools)
Adobe Photoshop.
Adobe ImageReady 11
.
47
\
Adobe Photoshop Web
Adobe ImageReady, ,
Adobe Photoshop.
File Exit ( * ). Adobe ImageReady . Adobe Photoshop.
Adobe Photoshop .
, , , - .
, .

: ,
, , .
> File New ( * ) I ctrl l+IPyl. New () (. 2.8).
I
Name: |untitted-l|
" Preset: (clipboard
Width: 1 800
Height:] 600
Q
|| pixels
OK
Reset
Save Preset,,. |
[3
Getete Preset... |
|| pixels
'"" "
Resolution: 1 72
Color Mode: | RGB Cobr
Background Contents: | White
1 1 pixels/inch
[3 1 8 bit
[*j
[]
0
1.37M
$ Advancod
,
Puc, 2.8. New ()

Name ()
. Untitled-1 ( -1).
. , .
Adobe Photoshop
. , ,
. , , , .
- . ,' - GIF JPEG.
48
Web- .
, .
, Internet Advertising Bureau
( ) (http://www.iab.net/) CASTE (The Coalition for Advertising Supported Information & Entertainment) (
), .

468x60
Full Banner ( )
234x60
Half Banner ( )
88x31
Micro Bar ( )
120x90
Button 1 ( 1)
120x60
Button 2 ( 2)
120x240
Vertical Banner ( )
. 125x125
728x90
Square Banner ( )
Leaderboard ( )
, 468x60 .
, ,
.
(Width) (Height). ,
. , . ,
.
Web-.
Adobe Photoshop : (cm), (inches), (pixels) .
,
Width () Height ().
(pixels).
v Width () 468 .
49
Adobe Photoshop Web

> Height () 60 .
Resolution ()
- .
Color Mode ( ) ,
, .. .
RGB Color ( RGB), 24
( 8 ), 16,7
. TrueColor ( ),
.
,
. RGB
16 , .. 48 .
Background Contents ( )
: White (), Background Color
( ) .. , Background Color ( )
(Tools), Transparent ().
> , Background Contents (
) White (),
.
> New (). Untitled-1 ( -1)
- 468x60 .
> Untitled-1 (Tools),
, (. 2.9).
Adobe Photoshop .
.
, - Untitled-1,
, - 66,7%, , - - RGB/8 (RGB, no 8 ). - 66,67% -
(Status Bar).
,
100%.
50
. <*
Layer
Delect
Fitter
Yiew
Window
Ftrihm-i l.tjJM^J C;Anli-aHMd
Help
Siyfoi |N^J
J^ Width: \
~ ... | ** Height: ^^
j I
>---^.
BQI
^^^^ D I
. >.
,7% | Dot! / bylts
^ Draw stltclbn from nt.f or lubtMCt from Kilting Mltction.
PMC. 2.9.
> 66,67% - (Status Bar).
.
> - 100 |[Enter|. ,
,
, .

. . , Windows.
>
, . .
> .
> ,
,
. .
>
51
Adobe Photoshop Web

>
, ,
(. 2.10).
Untitled-1 & W0% (RGB/8)
. 2.10.
- 100% - (Status Bar) : Doc: 82, /0 bytes. 82, - .
. ',
- , , -. , - 0 bytes (0 ).
- .

(Tools).

,
, ,
.
Adobe Photoshop - , , , . .
Adobe Photoshop.
,
[ - Rectangular Marquee Tool () ( ()).
> , (Tools) [[ Rectangular Marquee Tool () ( ()):
. - .
> Untitled-1 . +
> .
52
, ,
.
,
, .
> .
(. 2.11).
ffSUnlitled-1 @ 100% (RGB/8)
. 2.J1.
, , , , .

. , Alt
I I.
,
l shifl l.
. . Adobe Photoshop .
- Swatches ().
> Swatches ()
.
, Window * Swatches ( * ).
,Swatches ()
(. 2.12).
.
2.12.
>
Swatches ()
.
^,
- RGB Cyan ( RGB).
53
Adobe Photoshop Web

> .
(Set foreground color) (Tools).
,
Swatches () I
Alt
I.
R/] - Paint Bucket Tool (G) (

(G)) .
> [] - Gradient Tool (G) ( (G)) (Tools).
, .
> [] - Paint Bucket Tool (G) ( (G)). , .
.
> , , .
> . (. 2.13).
. 2.13.
, ,
Color (), .
> Color () .
Swatches () Color () (. 2.14).

RGB. ,
RGB - , . : R , G - , - .

0 255
54
SEES 9!
. 2.14.
Color ()
. - 0 -
, - 255 - . ,
, .
255, - .
Swatches ()
, Color () , ,
. , , .
, Color (), 255 , .

.
, .
> G () () ,
0 ().
(Set foreground color) (Tools)
Color () .
, ,
, Color ().
, .. , - Default Foreground and
Background Colors (D) ( )
(Tools).

.
> Edit * Stroke
( ).
Stroke () (. 2.15).
Width ()
. 1 (1
) .
I OK |
Width: 1 1 |
Cartel
Color:
1 Inside <s> tenter Outside
Mode: [Normal
QpacitY:| 100 [%
Color () Ereseive Transparency
,
. , Puc. 2.15. Stroke ()
.
55
Adobe Photoshop Web

Location ()
: Inside (), Center (
), Outside ().
Mode () -
.
Opacity ()
. 100% .
> , , Stroke
() .
> Select Deselect ( ,), .
. 2.16.
UnUUed-l @100Z (RGB/81
. 2.16.
.
[ - Elliptical Marquee
Tool (M) ( ()).
.
> [Q| - Rectangular Marquee Tool (M)
( ()) (Tools).
">'
> I Alt 1. [[!],( - Rectangular
Marquee Tool () ( ()).
( - Elliptical Marquee Tool (M) (
()), .
> II Alt I.
, .
i
> ,
.
> .
56
> ,
,
.
> .
(. 2.17).
", Untitled-1 & 100* (RGB/8)
. 2.17.
,
ll s h i f l b

II Alt I.
, .
> (Set foreground
color) (Tools). Color
Picker ( ) (. 2.18).
.

.
- RGB HSB.
IfL,
OS: [
|% : [
: 1
! 12 |
|
' C:[75_J%
R: [
OG: [0_J
: [0
M:[68_J%
} t
Y:[67_j%
: 190 1%
. 2.18. Color Picker ( )

57
Adobe Photoshop Web

HSB -
(Hue), S (Saturation) (Brightness).
- : ( ), S (), (), R (), G (),
(). ( ).

: - ,
- . .
> .
, - .
> S (). 0% 100% .
> .
,
- .
> R (),
. 0 255 - , -
- .
.
.
>
, ,
: , - .
I
Web,
, -
Web-. Web, . .
. , Web 216 , .
58
CMYK, ..
, . CMYK- .
, .
CMYK : (Cyan), (Magenta), (Yellow) (Black).
, .
, RGB. Web,
.. , ,
CMYK .
#
, , RGB.
Only Web Colors ( Web), Web.
Custom () Custom
Colors ( ) (. 2.19), . , .
color name to
select it in the cdor list
Puc. 2.19. Custom Colors ( )

> , Color Picker ( ). Color () (Tools).
Adobe Photoshop Web

.
> Edit Fill ( + ).
Fill () (. 2.20)'.
- Blending
Mode: [Normal
Opacity: [IPO
|%
EJesarve Transparency
Puc. 2.20. Fill ()

Use () ,
: Foreground Color ( ),
Background Color ( ), Black (), 50% Gray (50% ),
White () .
> (Foreground
Color), Fill () . .
.
. , .
> , Select *
Modify Contract ( * * ).
Contract Selection ( ) (. 2.21).
Contract Selection
Contract By: |l
3|
Joixeb
OK
Cancel
Puc. 2.21. Contract Selection ( )

> Contract By ( ) 16 .
> , Contract Selection ( ).
16 .
Select *
Modify * Expand ( * * ).
.
> Edit * Fill ( * ).
Fill ().
v Use () Background Color
( ).
> F i l l (), .
(. 2.22).
"ft Urililled-l @ 100% (RGB/8)
. 2.22.
> || ctn |+|(|. .

Adobe Photoshop , ()
(English (USA)).
. [?^| - Lasso Tool (L) ( (L)),
, .
[^] - Polygonal Lasso Tool (L)
( (L)), . , , , -'
[]- Pen Tool (P)
( ()).

.
, .
, Edit Undo ( * ).
> Edit Undo Deselect ( ) I 1| 1+|Z|.
, .
61
Adobe Photoshop Web

Adobe Photoshop
History (), , .
>
History () .
, Window * History ( ). History ().
> History (),
,
(. 2.23).
. 2.23.
History ()

. .
- Fill () - .
.
> , - Fill () - |_ I - Delete current state (
) History (). ,
History () Contract ().
.
> I ? I - Delete current state ( ) History (). (. 2.24).
Adobe Photoshop
Delete state "Contract"?
. 2.24.
> Yes (), Contract (). ,
History () Fill ().
,
, .
62
> Deselect ( ).
Elliptical Marquee ( ) Fill ()
.
f^F| Eraser Tool () ( ()).
.
.
> \ff\ - Eraser Tool () ( ())
(Tools), .
>
. .
- 13 -
, .
, .
, [^| - Eraser Tool (E) ( ()) (Options Bar), , (. 2.25).
.
Brush () .
'
Brush:
Opacity; % I > I
Flow; I 100%
ft Ers to History
. 2.25. Eraser Tool(E)

( ())
> [j Brush () (Options Bar). (. 2.26).
Master Diameter
Hardnessi
. 2.26.
63
Adobe Photoshop Web

. .
, .
:
, .
.
> Master Diameter ( )
- 50 .
.
Hardness ()
.
.
> 0 .
.
> New Brush Preset ( ).
Brush Name ( ) (. 2.27),
.
. 2.27. Brush Name ( )

.
- Hard Round 50 1 (, , 50 1) -
Name ().
> Name () ,
Brush Name ( ).
Brushes ()
. .
>- ,
.
f^| - Eraser Tool (E) (
()) .
> . ,
- - ,
.
64
> .
> , , .
> , .
, .
.

, ,
, . , ,
, ,
: ,
(. 2.28) .
> Color (), .
2.28.
> Color () (R), (G) () 32,112, 239. Color () (Tools).

, Color () - Warning:
out of gamut for printing (:
), ,
CMYK.
CMYK- . , Web CMYK , Web-
. .

150x50 , .
'
'
> II Alt I. |Q| - Elliptical

Marquee Tool (M) ( ()) (Tools). [] - Rectangular Marquee
Tool () ( ()).
Adobe Photoshop , (Options Bar) (. 2.29).
65
3 - 6645
Adobe Photoshop Web

. .
IftCll
F>b.ri|0p 1 riAnli-li!d
Slylm iNornul
_JHI Width:
**1'
Puc. 2.29. Rectangular Marquee

Tool (M) ( ())
> Style () (Options Bar)
Fixed Size ( ),
.
Width () Height () .
>. Width (),
.
> - 150
(150 ).
> Height () - 50
(50 ),
.
Feather ()
, .
.
Anti-aliased ()

.
,
Anti-aliased (). .
, Info ().
> Info () .
, Window Info (
). Info () (. 2.30).
,
. ,
66
, X Y, W
.
RGB CMYK
> .
, Info () - 255 - RGB 0% - CMYK-, . 2.30. Info
()
.
X Y, .
, X
, Y - .
. , , ,
. .
> 0 Info ()
Palette Options ( ).
Info Options ( )
(. 2.31).
| Info Option:
[.l....^-.-...,,'
Mode: | Actual Color
Mode: | CMYK Color
El
Buler Units: | Centimeters
[]
| .Cancel
Show 16 bit values
Puc. 2.31. Info Options ( )

,
.
Show 16 bit values ( 16- ) , RGB 16
. '
> Ruler Units () Pixels
().
67
Adobe Photoshop Web

> Info Options ( ),
.
,
Info ()
.

.
> ,
Info () : :5, Y:5.
> .
, Info () :
W:150,H:50.
> , [^] - Paint Bucket Tool (G) (
(G)).
> Select Deselect ( * ),
.

140 40 .
; [] - Rectangular
Marquee Tool () ( ()) (Tools). [Q] - Elliptical Marquee Tool
() ( ()),
(Options Bar) .
> , Style ()
(Options Bar) Fixed Size ( ).
> Width () Height ()
(Options Bar) - 140 -
- 40 - .
.
> , Info () :
X:10,Y:10.
> . , Info
().
.
> Edit * Fill ( * ).
Fill ().
> , Use ()
Background Color ( ).
> Fill () .
.
i
> , Select Deselect (
). , . 2.32.
. 2.32.
, , , Web-
2. .
> Select * ( * ).
, .
.
> Edit Stroke ( * ).
Stroke ( ).
> , .
> , I c t r l 1+1|.
, .
, , . , Web Web-: GIF, JPG
PNG.
Adobe Photoshop - PSD, .
.
!
, Web- HTML.
69
Adobe Photoshop Web

> File Save ( ).
Save As ( ) (. 2.33).
| U Web
[Untitled-1
Eoimat
|Pho>Qshop (".PSD/.POD)
Save:
{
[^J
| ]
|
As a Cop*
Snratattor'
Abba Chmneb
Osuptcctos
OLJ
Color:
|*J if ? "
Use Pwof Setup; Waking CMfK

H Iff Profile: SRQB IEC61966-2.1
0 Ihurrtbnjll
0 Use Lower Case Extension
Puc. 2,33. Save As ( )

> , .
> (File name) , , Geoton - .
. .
(Save), Save As ( ). . , Geoton.psd - .
File
Save ( * ) Save As ( )
, .
,
, File Save
As ( ).
File Close
( ) [] .
File
Open ( ) 1^
70

- .
, .
. , ,
I 100% |> |
, ,
FiB: I 100% I > I
.
Layers ().
> Layers
() . , Window * Layers
( * ). Layers
()
(. 2.34).
. .
. 2.34.
Layers ()
, Background (). .
Layers () . .
.
,
.
Layers () , - .
[] - Horisontal
Type Tool () ( ()).
> [] - Horisontal Type Tool () ( ()), .
(Options Bar)
(. 2.35), .
. 2.35. Horisontal Type Tool ()

( ())
[[] - Change the text orientation ( )
.
71
Adobe Photoshop Web

Set the font family ( ) (Options Bar) , Arial.
.
||.
. .
(Options Bar) (. 2.36).
. 2.36. Horisontal Type Tool ()

( ())
> : . , .. , ,
(Options Bar) [SI - Left
align text ( ).
,
.
> |[ shift i.
> [shift], 6 -), .
>- [sJ.
, , .

,
,
.
>
Set the font style ( ) Italic ( ). - .
> Set the font size (

) 18 pt 20 pt .
(Options Bar) : [iE] - Left align text (72
) -
; [] - Center text ( ) - ; [| - Right align text (
) - , .
> [ - Center text ( ) (Options Bar).
.
Set the text color (
) Color Picker ( ),
.
.
Set the anti-aliasing method ( ) (Options Bar)
: None () - ; Sharp () - ; Crisp () -
; Strong () - ; Smooth
() . , .
.
> Set the anti-aliasing method (
) , ,

. ,
, .
|1 - Create warped text ( )
(Options Bar)
, ||| - Togglt the Character
and Paragraph palletes (/
) .
> - Togglt the Character and
Paragraph palletes (/ ) (Options
Bar).
Character/Paragraph (/).
Character () (. 2.37).
f!
,
I T
. 2.37.
Character ()
73
Adobe Photoshop Web

Character ()
Window Character ( ), Paragraph () -
Window Paragraph ( * ).
Character () , (Options Bar),
, , .
, .
Set the leading ( ) .
Set the kerning between two characters (
) .
.
Set the tracking for the selected characters ( )
,
.
Vertically scale ( ) Horizontally scale
( ) .
Set the baseline shift ( )

, . , - .

, , ..
Set the
language on selected characters for hyphenation and spelling (
).
Character (),
, , :
Faux Bold ( ) Faux Italic ( ) - ,
;
Fractional Width ( ).
, .
-
. , 20 , .
Fractional Width ( ) .
74
Paragraph () : ,
, , .
>
Character/Paragraph (/),
[] .
> \\/\ (Options Bar). (. 2.38).

V; Geolon psd C'a \OOZ |f tOTOH. RGB/U)
. 2.38.
[1 Cancel any current ededits ( ).
, |[Enterj \( l+pnter| .
, Layers () ,
, .
- - , , , ..
. , , , .
, Layers ()
. , Adobe Photoshop
. , , .
> 0 Layers () Layer Properties ( ). Layer Properties ( ) (. 2.39).
Name:
Color: |D None
I L
Cancel
. 2.39. Layer Properties ( )

> Name () - Layer 1 ( 1).
75
Adobe Photoshop Web

> OK, Layer Properties ( ). Layers ()
(. 2.40).
Lock: Q
. >. a a
. 2.40.
.
Adobe Photoshop |^| Move Tool (V) ( (V)).
> [KjT| - Move Tool (V} ( (V))
(Tools), .
> , Kj.,
.
> .
> , ,
.
> . (. 2.41).
Geolon.psd @ 100% (Layer 1. RGB/8)
. 2.41.

|[]. 1. |[-]. IFI.
[KJE] - Move Tool (V) (
(V)) .
ffwjtj,
10 .
76
, File * Save ( * ).
(. 2.42),
, Maximize compatibility ( ),
*.psd .
Photoshop Foimal Options
Maximize compatibiGty
Turning off Maximize Compatibility may interfere with the use oF PSD files in
other applications or with Future versions of Photoshop.
Cancel
This diabg can be turned off in PrsFerences > File Handling > Compatibility.
Puc. 2.42.
,
: , , , , .
Free Transform ( ) Transform ()
Edit ().
, , [] , .

?
!, ,
, .
>' [] - Horisontal Type Tool () (
()) . (Tools), .
> , .
. Layers () Layer 2.
> : ?.
> ,
.
> ,
.
> Set the font family ( ) (Options Bar)
.
77
Adobe Photoshop Web

> 16-18 ,
.
> [V] (Options Bar).
. Layers ()
.
- Layer 2 ( 2).
> Layer Layer Properties ( ).
Layer Properties ( ) (. 2.39).
> Name () Layer 2 Layer Properties
( ) .
Layers ().
[1 - Move Tool (V) (
(V))
(. 2.43).
?
. 2.43.
. ,
Layer 2 .
> | | - Create a new Layer ( )
Layers ().
, Layer 3 ( 3). .
[] - Horisontai Type Tool () ( ()) (Tools)

. Layers ()
, Layer 3 - .
> : !
> , ,
, , 20 .
.
78
> Set the text color (
) (Options Bar).
Color Picker ( ).
RGB-.
> R (), .
R () 142.
> ^"1. G ()
.
> G () 90 '. (), .
> () 52.
> Color Picker ( ), .
Set the text color ( )
(Options Bar).
.
> l c t r l l+|[Enter], .
, . Layers () .
> Layer 3 ( 3). Layer
Properties ( )
Layers ()
Layer Properties ( ).
> [*] - Move Tool (V) ( (V))

(. 2.44).
. 2.44. Layer 3

| | - Create new Layer ( ) Layers
(), , :
79
Adobe Photoshop Web

0 Layers () New Layer ( ).
New Layer ( ), Name ()
Layer 4 ( 4) (. 2.45).
'OK
Name: [Layer 4
Q Use Previous Layer to Create Clbping Mask
Cancel "|
Color: |D None
de: [Normal
(No neutral cctor exists for Normal mode.)
Puc. 2.45. New Layer ( )

> , .
,
Layer 4 ( 4).
.
- .
> Layer New * Layer ( * ).
New Layer ( ) (. 2.45),
Name () - Layer 5 ( 5).
> . Layers () Layer 5 ( 5).
.
- , ,
. Layer 5.
> , Layer 5 . Layers ()
.
> | | - Delete layer ( )
Layers (). (. 2.46).
. 2.46.
> Yes (), .
Layers (). Layer 4.
80
. Photoshop ImageReady
Layer 4
(. 2.47), , , ,
.
63x50 ,
.
[]]- Rectangular Marquee Tool (M) ( ()) (Tools),
(Options Bar).
. 2.47.
> Style () (Options Bar)

Fixed Size ( ).
(Options Bar) 63 (63 ) 50
(50 ).
> Info (), .
> ,
X: 400, Y: 5. Info ().
> .
, Info ().
.
.
> |^| - Eyedropper Tool (I) (
(I)), .
> .
> [^1 - Paint Bucket Tool (G) ( (G)) (Tools).
> , <$),
. (. 2.48).
, Geolon.psd & 100% (Layer 4. RGB/8)
. 2.48. Layer 4
> Select * Deselect ( * ),
.
81
Adobe Photoshop Web

-
- 30x40 - .
> [ - Rectangular Marquee Tool (M) (
()) (Tools) (Options Bar).
(Options Bar) 30 40 .
>
,
X: 419, Y: 14-
Info ().
> . .
.
> *}, - Switch Foreground and Background Colors (X)

( (X))
(Tools), .
> [<^ - Paint Bucket Tool (G) ( (G))
(Tools) .
(. 2.49).
. 2.49.
- ,
.
, . - 100% -
(Status Bar). [| - Zoom
Tool (Z) ( (Z)).
> [41 - Zoom Tool (Z) ( (Z))
(Tools), .
> , . <*^.
> .
100% - 200% -
.
82
> |
.
> , .
100%.
:
> I
, ^.
Alt
I. ,
Alt
> I I. .
100%,
(Status Bar).
> !
Alt
I.
> 400%.
>
> 1. , .
>
, , (. 2.50).
Fit* Ed* Image U* 1 Fittci Vi Help
. 2.50.
83
Adobe Photoshop Web

.
Edit * Transform Skew ( * *
). 8 , - (. 2.51).
. .
"
, .
>
, ^.
. 2.51.
> .
> , , .
> . . (. 2.52).
\
: ,
, , Layer 2.
> ,
, (. 2.53).
> ,
(. 2.54).
> [[Enter]. .
.

.
84
. 2.52.

. 2.53.

Window * Tools
( ),
.
-
*}, - Switch
Foreground and Background Colors (X) ( - (X))
(Tools),
.
Edit Stroke ( *
). Stroke
().
. 2.54.

> Outside (), .

> Stroke ().
.
,
.
> 1. .
> R (), G () () Color ()
234, 201 176.

Color () (Tools).
> [<^1 - Paint Bucket Tool (G) ( (G)) (Tools)
, 1.
> , I c t r l I+JD|.
. , - , . [^] - Eyedropper
Tool (I) ( (I)).
> [5]
, , ,
, "|.
.
> [^| - Eyedropper Tool (I) ( (I))
(Tools), .
85
Adobe Photoshop Web

> , f, - .
> . (Tools).
, , |~?] - Pencil Tool () ( ())
1 5-6 .
> II Alt j. \^\ -Brush Tool ()
( ()) (Tools).
\/\ - Pencil Tool () ( ()).
- .

ll s h i f t l.
>
.
> ^".
> ll s h i f | l. .
> Ifs^l. 5-6 .
> .
> |[shiftl. (. 2.55).
. 2.55.

, ,
.
> 100%, [| - Zoom Tool (Z) ( (Z))
^. . 2.56.
"Sb Geolon.psd <> 100% (Lajiei 4. RGB/3)
. 2.56.
86
> , File Save ( ).

, , Background () - Layer 1, Layer 2, Layer 3, Layer 4. ,
.

, .
Background () .
, . Layers ().
> Layers (), , (. 2.57).
, Layers
() . , , Layer 2 .
>
Layer 2 Layers ().
fy.
> .
.
. 2.57. Layers
()
> ,
Layer 4.
.
> . Layer 2 (. 2.58).
? !,
, , , Layer 4 (. 2.59).

. 2.58. Layer 2
-
,
. Layers (),
Indicates layer visibility ( ).
87
Adobe Photoshop Web

"E Geoton.psd & 1002 [Layei 4. RGB/8)
Puc. 2.59.
g> - Indicates layer
visibility ( ) Layers () Layer 2. . ?, Layer 2, (. 2.60).
fCGeoton.psd & 100% (Layer 4. RGB/8)
!
. 2.60. Layer2
> . Layers () -gs, - ?
v
, , ; .
Layer 2 -
Layer 4. Layers () .
. , .
> Background () Layers
(). . , .
.
> ?
ctrl
II I. Kj..
, [^1 - Move, Tool (V) ( (V)) II 1| I .
ctrl . . (. 2.61).
88
> Layer 3.

Layers ().
Layer 2
Background
> II ctrl _
. 2.61.
,
Layers
() , ^ - Indicates painting on layer or layer mask (
-). , . Indicates if layer is linked ( ) - .
,
,
, .
> Indicates if layer is linked (
) Layer 4.
jg, , .
, Layer 3.
> [^] - Move Tool (V) ( (V)), .
> , Kj.,
!
> .
> , . ,
Layer 3
Layer 4. .
> .
> , Edit Undo Move ( ).
, . , .
Layer 3 Layer 4.
> Layer Merge Linked ( * ).
Layer 3 Layer 4 Layer 3,
Layer 4 .
89
Adobe Photoshop Web
>> , ,
Layer 3. ,
! .
?,
Layer 2.
> ,
Layers.
> Edit * Undo Merge Linked (
). Layer 4
Layers ().
Indicates if layer is linked
( ) Layer 4. . .

, (
),
Layer Merge Visible ( ).
Layer 3 , .
> Layer Arrange * Bring to Front ( *
).
. .
Layer 4.
> Layer 4 Layers (),
.
> Layer Arrange Bring to Front (
). Layer 4 .
> , File * Save ( ).
.

Opacity () Layers ().
Opacity () 100%, ..
.
> [] Opacity
() Layers (). .
90
_ Photoshop ImageReady
>>
Opacity () ,
Layer 4
Layer 2.
, Layer 4 .
> Layer 4 Opacity (), 100%.

.
Set the blending mode for the layer ( ) Layers ()
.
, , .
, .
, Darken ( ),
, ,
.
Lock ()
Layers () .
(Lock transparent pixels), (Lock image
pixels), (Lock position), (Lock all).
menu u
, . ,
Adobe Photoshop .
.
Layer 1 .
.
> Layer * Layer Style ( * ).
,
(. 2.62).
, , :
Drop Shadow ( ) - , ;
91
Adobe Photoshop Web

Inner Shadow ( ) - , , ;
Outer Glow ( ) - ,
;
Inner Glow ( ) -
;
Bevel and Emboss ( ) -
,
;
Satin () - , ;
Color Overlay ( ) -
;
Blending Options...
Drop Shadow...
Inner Shadow...
Outer Glow...
Inner Glow...
Bevel and Emboss:.
Satin...
Color Overlay...
Gradient Overlay...
Pattern Overlay...
Stroke...
Copy Layet Style
Paste Layer Slyte
Paste Layer Stylo to Linked
Clear Layer Style
Global Light...
Create Layer
Hide All Effects
Scale Effects...
Puc. 2.62.
Gradient Overlay ( ) - ;
Pattern Overlay ( ) - ;
Stroke () - , ,
. ,
.
Layer 1 Bevel arid Emboss (
).
Layer . Layer Style ( * ) Bevel and
Emboss ( ). Layer Style ( )
(. 2.63).
> , , , .
. - Styles () - Bevel and Emboss
( ). , ,
.

. ,
, , .
92
Styles
Blending Options: Default
Drop Shadow
Bevel and Emboss

Structure '
OK
Reset
Styles [inner Bevel

Technique: |Smooth ~
|~1 Inner Glow
Direction: Up
Soften:
"New Style... I
Inner Shadow
|j Outer Glow
13 Preview
Down
. |o
Ipx
Shading
Angle:
!~ Satin
[7j Use Global Light

Akitude:
Color Overlay
": Gradient Overlay
fj Pattern Overlay
!~j Stroke
Gloss Contour:
Anti-a[iased
Highlight Mode:, [Screen

Opacity:
Shadow Mode: [Multiply
Opacity:
Puc. 2.63. Layer Style ( )

Bevel and Emboss ( )
> , Layer Style ( )
Preview ( ). ,
, .
, , , ,
. ,
, .
(Highlight)
(Shadow), . ,
, (Opacity)
(Mode). , ,
.
Style () .
> ,
Style (), Inner Bevel ( ).
93
Adobe Photoshop Web

> . Technique () , ,
Smooth ().
Depth () .
Size () , Soften () .
> , Depth (),
Size () Soften () .
Up () Down () .
> , Down
(), Up ().
Angle () ,
. Use Global Light (
), ,
. ,
, . Layer Layer Style Global
Light ( * ).
> Angle () ,
. , , .
> Altitude (), ,

.
> , Layer Style
( ).
Layer 1. . 2.64,
. 2.64.

Bevel and Emboss
( )
Layers (), Layer 1 ,

- f , ,
(. 2.65). v,
, . - Bevel and Emboss
( ) - , .
94
Q Bevel and Emboss
BID
1 Bickground
t>. a
. 2.65. Layers ()
.
Layer 1 - Drop Shadow ( ).
Layer Style ( ) .
> 5 - Add a layer style ( )
Layers ()
Drop Shadow ( ). Layer
Style ( ) (. 2.66).
I Layer Style
Styles
I
- Drop Shadow
Blinding Options: Default

1 d Drop Shadow
Inner Shadow
| OK |
Blind Mod.: [Multinlv
ODjcitv: |
_____ 1
fi
Angle! \\ J 1.120
1 [re
|%
| E Use global Light
R] Preview
(jOuttrGlow
Inner Glow
W Bevel and Emboss
Contour
TtJlturt
Csn
* Color Overlay
Contour: ^A'l Anti-aliased

Noise! ;*)
j In
|%
<5rdienl Overlay
Q Layer Knocks Oul Drop Shadow
r"j Pattern Overlay
'
Stroke
..
Puc. 2.66, Layer Style ( )

Drop Shadow ( )
95
Adobe Photoshop Web

Drop Shadow ( )
.
, .
, , .
' Blend Mode ( ) Opacity () . .
. , .
> Blend Mode ( ). Color Picker
( ).
> , ,
.
> - -
. " .
> , ,
. -, ,
, .
> Color Picker ( ), .
Angle () , ,
Distance () - , .
, .
> , Kj.,
, .
> .
> , . . (Angle) (Distance) Layer Style ( ).
> .
Spread () .
> Spread (),
.
96
Size () .
> , , ,
, .
Contour () .
Anti-aliased (), .
Noise () .
> Layer Style ( ), .
Layers () - Drop Shadow ( ), Layer 1. . 2.67.
|<jGeoton psd @ % (Layer 1. RGB/8)
. 2.67. Drop Shadow ( )

v File Save ( ),
.
,
. Geoton.psd .
www.3st.ru/book/web/ex.zip.
> [] ,
.
, , ,
.
.
Web-
.
, , '

spisok.html ,
,
. Adobe ImageReady,
Adobe Photoshop.
97
4-6645
Adobe Photoshop Web

- Edit in ImageReady
> Adobe Photoshop
(Shift+Ctrl+M) ( ImageReady (Shift+Ctrl+M)).
Adobe ImageReady, .
250 100
.
> File * New ( * ).
New Document ( ) (. 2.68).
: |Untitled-l
Size: (Custom
Wjdth: |539
| pixels
tlelght: |15
[ pixels
OK
Cancel
0 White
eackoround Color
transparent
Puc. 2.68. New Document ( ) Adobe ImageReady

Adobe Photoshop.
.
Adobe ImageReady RGB.
> Width () Height () - 250 100 .
> Transparent (), .
> New Document ( ) . ,
(. 2.69).
. 2.69.
98
Layer 1.
;>
,
Swatches ().
v Swatches () , .
v Swatches ()
.
(Set foreground color) (Tools).
[| - Rectangle Tool (U) ( (U)) 230x35 ,
.
v [5] - Rectangle Tool (U) ( (U)) (Tools).
, (Options Bar) (. 2.70), .

DP
n^^Si **"~1 mtf*[0p
StyUl []NJ j*| Modi l)jgMJ_
j,,^! OtMdt! f"lOO% |

;
;
|
. 2.70. Rectangle Tool (U)

( (U))
> Fixed Size ( ), .
> Width () Height () 235 35 .
v [] - Create filled region ( )
(Options Bar), .
, , .
> ,
> .
.
> , ,
-
.
> .
(. 2.71).
99
Adobe Photoshop Web

Layer 1, , Bevel and Emboss
( ), .
> Layers () , , ,
, ,
2 . .
Untilled-1 @ 100% (Original)

^;
. 2.71.
- Add a layer effect ( )

Layers (). .
<] ,
Adobe Photoshop.
> Bevel and Emboss ( ).
Layer Style ( )
Bevel and Emboss ( ) (. 2.72).
[~j Drop Shadow

Inner Shadow
Outer Glow
Style: [inner Bevel

Technique: [Smooth
Depth:
I-I
New Style... I
13 Preview
-0
Direction: Up Dn
Sl
Satin
Soften:
fl
[}
i iiiu-i
Color OwUy
_] Gradient Overlay
Fj Pattern Overlay
-ShadingAngle: ^_^^ 1120

U global Light
Altitude:
Gloss Contour:
It
^A " I Anli-a(iased
Highlight Mode: [Screen

Opacity:
Shadow Mode: | Multiply
Opacity:
[T| ^
inn in. ( . . |?5
Puc. 2.72. Layer Style ( )

Bevel and Emboss ( )
100

:(. 2.73).
Layer Style ( )
.
, , .
, Layers ()
f
, ,
.
. 2.73. Bevel
and Emboss ( )

,
.
,
> Swatches () - ,
.
v [] - Type Tool () ( ()) (Tools). (Options Bar)
- , Adobe Photoshop.
v Set the font family (
) Set the font style ( ) (Options Bar)
.
> .
.
v : .
.
> ,
.
Untitled-1 @100 (Original)
> Set
the font size ( )
(Options Bar)
, .
> \**\ - Move Tool (V)
( (V))
(. 2.74).
. 2.74.
101
Adobe Photoshop Web

Layer 2 ( 2).
Layer Options ( ).
> Layer Options ( )
. Layer Options (
) (. 2.75).
Layer Options
: |
Use Previous Layer to Create Dipping Mask
Options Color: [None

Bend Mode: [Normal
Lock: 0 lrnsp*rency Eosition
Dfil
Puc. 2.75. Layer Options ( )

> Name () Layer Options ( )
, .
> - Layer 2 -
fjnterj. ,
Layers ().
, , .
. ,
Layer 1
.
.
> Layers () ,
Layer 1 , ,
.
> Layer 2 Layer 1,
! Layers ()
Layer 2 Bevel and Emboss ( ).
[\] - Magic
Wand (W) ( (W)),
.
102
> [\1 - Magic Wand Tool (W) (
(W)) , ,
[] - Marquee Tool (M) ( ())
(Tools).
> , \,
.
> .
.
.
f|Untitled-1 @ 100% (Original) HEQE
Original Optimized -LJp 44-Up "
100% -\ /..
. 2.76.
> Image * Crop ( * ).
.
>
(. 2.76).
. , - , ..
Web Content ( Web).
> Web Content ( Web)
. , Window Web Content ( Web). (. 2.77).
. 2.77. Web Content ( Web)

103
Adobe Photoshop Web

Rollover () - , ,
.
.
Web Content ( Web)
Normal (),
, .. .
Layer 1
.
> , Layer 2,
-.
, (Normal) , , .

.
> I | - Creates rollover state
( ) R
Web Content ( Web).

Over
() (. 2.78),

, .
Over ()
. .
>
Over (). (. 2.79).
, Over (), ,
.
. 2.78.
Over ()
Ovei
Down
Selected
Out
Up
Click
Custom...
None
Puc. 2.79.
Down () - , ,
. , .
104
Selected () - , .
Out () - ,
. Normal
().
Up () - ,
.
Over ().
Click () - ,
.
, .
Custom () - .
None () - .
Web-.
v
, Over ().
, Over (), ..
.
.
> Bevel and Emboss ( ),
Layers ()
, .
, Over ().
- Rollover ().
> I I - Creates rollover state ( )
Web Content ( Web). Down ().
Adobe ImageReady , .
, .
105
Adobe Photoshop Web

, .
, .. , Web .
Bevel and Emboss ( ).
> Bevel and Emboss (
) Layers (). Layer Style
( ) Bevel and Emboss (
).
> Down () Bevel and Emboss (
) . Layer Style ( ) ,
, (. 2.80).
.
> [ - Preview Document (Y)
( (Y))
(Tools), .
, . .
. .
9Untitletl-1 @ 1002 (Original)

OrlgtoalXOplMitd -/4-Up^
. 2.80.

> .
.
> . .
> .
.
> , [JS] Preview Document (Y) ( (Y))
(Tools).
> PSD Knopka.psd, File Save ( * ).
, , Rollover
(), - Web-, Web-.
106

-
, Web. - , ,
. , , . Adobe ImageReady .

. , (Original) ,
.
: 992 bytes / 1 sec, , GIF- 314 / 992 bytes
(. 2.81). .
-||
4-,
(?)
100% " 1 [ byi / 1 28.8 .. | I )} byus 9IF
. 2.81.
> Optimized ()
. , (. 2.82).
. 2.82.
107
Adobe Photoshop Web

, 992 . ,
, ,
.

:
(Optimized Information), (Image Dimensions),
(Watermark Strength), (Original in Bytes) (Optimized
in Bytes), (Size/Download Time)
.
> , ,
, Adobe ImageReady,
Original/Optimized File Sizes (/ ).
2-Up (2 )
, .
> 2-Up (2 ) . : - , - (. 2.83).
.J Knopka.psd @ 1002 (2-Up)

100% dither
Selective palette
colors
Puc. 2.83. 2-Up (2 )

> View Hide Optimization Info ( * ). , (. 2.84).
, .
4-Up (4 )
.
108
. 2.84. 2-Up (2 )
v 4-Up (4 ),
(. 2.85).
Vj Knopka psd & 10D% (4 Up)
. 2. S5. 4-Up (4 )

, -
, -
.
, .
,
. , ,
- ,
109
Adobe Photoshop Web

- ,
.
> 2-Up (2 ),
.
> View Show Optimization Info ( *
), .
Optimize () (. 2.86),

.
> ,
Window * Optimize
( * ).
Preset (. 2.86.
) Optimize Optimize ()
()
. , . GIF Color Table ( )
2, 4, 8, 16, 32, 64, 128, 256 ( Dither). JPEG Quality () : Low (),
Medium (), High (), Very High -( ), Maximum (). PNG-8 PNG-24.
,
.
Format () Web: GIF, JPEG, PNG-8, PNG-24 WBMP.
Web-.
, , ,
, .
, , ,
JPEG. ,
, , , GIF PNG-8. GIF. PNG-24 . ,
110
JPEG. PNG-24
, , JPEG. , PNG- Web-.
WBMP , , . WBMP
1- , .. WBMP- -.
> > Color Table (
). Optimize ()
(. 2.87).
Format i [GIF
7Color Table
>Dilh.r
E> Transparency
t>0pli
Puc. 2.87. Color Table ( )

Optimize ()
, v . Optimize (),
Show Options (
), - Hide Options ( ).
GIF PNG-8

. Reduction () Color Table ( ) (. 2.87)
256-.
, , GIF 256 . :
Perceptual () - ,
;
Selective () - , ,
Web-. ;
111
Adobe Photoshop Web

Adaptive () -
, .
, RGB- -
.
, , ,
.
, , , Adobe ImageReady
;
Restrictiwiy (Web) ( (Web)) - Web 216 , Windows , , .
(Web-safe palette);
Custom () - Perceptual (),
Selective.() Adaptive () , ;
Black & White (-);
Grayscale ( ) - 256 ;
Mac OS - 256
Macintosh, RGB- ;
Windows - 256 Windows, , '
, RGB-
.
Color Table ( ).
> Reduction
() Grayscale ( ).
Color Table (
)

Window * Color Table ( * ),
(. 2.88).
. 2.88.
Color Table
( )
Color Table ( ) 256

.
112
> Reduction ()
Optimize () , ,
, ,
(Color Table),
Selective ().
, , , Color Table ( ).
, , Web- .
;
shifl
- ll l.
"1 - Locks /
Unlocks selected colors to prohibit being dropped ( /
) Color Table ( ).
.
Web- - Shifts / Unshifts selected colors to Web palette ( /
Web-) .
.
- , 256 ,
I | - Adds foreground color to palette ( ), - | ffl | Deletes selected colors ( ) Color
Table ( ).
Color Table ( ) Adobe ImageReady
(Select All Colors),
(Select All From Selection), Web-
(Select All Web Safe Colbrs) Web- (Select
All None-Web Safe Colors).
. , ,
, Web- . Color Table ( ) Color Picker ( ) . ,.
, . , Color
Picker ( ) , Web- .
Colors () . , ,
113
Adobe Photoshop Web

. Colors ()
2 256
: 2, 4, 8, 16, 32, 64, 128, 256. , - 1 8 1 .
.
> Colors () , , . ,
16.
, , , .
(Colors), 16.
Web Snap ( Web) Web- , ,
. '
, .
, .

Reduction () - Selective (),
Adaptive () - ,
, .
, ,
, Method () Dither () (. 2.89).
Format: [GIF
> Color Table
<? Dither
Mthodi |Diffusion
Amount! I 100%
/ Transparency
Options
Puc. 2.89. Dither ()

Optimize ()
114
, , (Pattern) ,
. ,
, ,
, . :
No Dither ( ) - . .

;
Diffusion () - , , , - , .
, , . ;
Pattern () - , ;
Noise () - ,
Diffusion (), .
.
Amount () , .
, ,
, .
, , . , ,
.
v > Transparency (). Optimize () (. 2.90).
Formal: (GIF
t> Color Table
l> Dither
^ Transparency
" Transparency
Dither: !
1> Options
Puc. 2.90. Transparency ()

Optimize ()
115
Adobe Photoshop Web

Web-, , , Web-.
.
Transparency (), ,
' , . , , , Matte (). Transparency () ,
Matte ().
Lossy () Options () (. 2.91)
, , ,
. Lossy () 5-10%,
50%, . ,
5-40%. Noise () Pattern (),
Interlaced ( ).
Preset: ([Unnamed]
Format; [GIF
l> Color Table
1> Dither
^ Transparency
VOplioni
Interlaced
Lossy: | 0
Use Unified Color Table

JTi Add Metadata {"settings... |
Puc. 2.91. Options ()

Optimize ()
> Interlaced ( ),
.

, - , - ,
, . . ,
, 992 987 ( 256 ).
116
Use Unified Color Table ( ). Rollover ().
Adobe ImageReady ,
, 8-, 256- . , View
Preview Browser Dither ( * *
) t . 8- - 256 ,
,
Adobe ImageReady
File Preview In ( * )
[] - Preview in Default Browser (Ctrl+Alt+P) (
(Ctrl+Alt+P)) (Tools).
Macintosh Windows
, Windows . Adobe ImageReady , View Preview * Standard Windows
Color ( Windows)
View Preview * Standard Macintosh Color ( * *
Macintosh), , . Adobe ImageReady Info ()
,
,
Color Table ( ), Web-.
Web,
, , spisok.html.
> File Save Optimized ( ). Save Optimized ( ) (. 2.92).
> Web, HTML .
> , (File type)
HTML and Images (*.html) (HTML (*.html)), HTML- . Rollover images, ,
HTML-, .. Web.
117
Adobe Photoshop Web
Sample Piclme.
.!
|Knopka
1 :
[HTML and Images I'.Kmll
Settings:
| Dclaul Sellings
Sices:
|AISfc
PMC. 2.92. Save Optimized ( )

(File name)
Knopka.html. .
>
(Save). Save Optimized ( ) . Adobe ImageReady Knopka.html HTML- .

Web Adobe ImageReady. Adobe Photoshop. Adobe Photoshop . Adobe ImageReady .
> File Exit ( ). Knopka.psd (. 2.93).
Save changes lo document "Knopka.pjd" before quilting?
'
. 2.93. Knopka.psd
,
.
> (No). Adobe ImageReady . Adobe Photoshop.
118
, .
> (Notepad) Knopka.html Web.
JavaScript ,
, . images.
() .
HTML- <head>
</head>, , , - , <body>
</body>.
Knopka.html
spisok.html ,
. :
> spisok.html (Notepad).
> spisok.html , <! ImageReady Preload Script (Knopka.psd)
> .
> <body> spisok.html ONLOAD="preloadimages();",
Knopka.html , :
<body bgcolor=blue text=yellow link=white vlink=yellow
ONLOAD="preloadImages();">
> ,
spisok.html Knopka.html ,
<! ImageReady Slices (Knopka.psd) --> .
> spisok.html A HREF="#" #
geoton.html, :
A HREF="geoton.html"
> spisok.html,
(Notepad) (File Save).
> (Notepad).
, .
> spisok.html Web Web.
> , .
119
Adobe Photoshop Web

, .
>
. .
> , .
.
> . ,
geoton.html.
- , ,
spisok.html.
> , [] .
, , Rollover ()
. . , , , , .
.
Web- , , ,
, . Web
,
CD-ROM, WWW, ,
, .
, , - . ,
, , , ,
- . , ,
.
Web,
Ozero.jpg
Samolet.jpg www.3st.ru/book/web/ex.zip.
> Adobe Photoshop File *
Open ( ) Ozero.jpg (. 2.94).
1
120
, 2.94. Ozero.jpg
, , : , , . , ,
, , . - , ,
, , . , , -
.
Adobe Photoshop Ozero.jpg
. ,
. , , . , , .
,
Adobe Photoshop. , JPEG-, Ozero.jpg, , . ,
, . JPEG- . Adobe Photoshop , , ,
JPEG. PSD.
121
Adobe Photoshop Web

> File * Save As ( ).
Save As ( ).
>
, .
> Format () Photoshop (*.PSD;

*.PDD).
> (File name)
- Ozero.psd.
> (Save). .
.
, .
- Clone Stamp Tool (S) ( (S)).
> [&] - Clone Stamp Tool (S) ( (S))
(Tools). .
(Options Bar)
(. 2.95).
Optdlyi 11 I> I
Ftowi I 100% Fl
Puc. 2.95. Clone Stamp Tool (S)

( (S))
,
, .
,
, - .
> [J Brush ()
(Options Bar), .
, , .
> Soft Round 35 pixels ( 35 ),
.
> .
.
,
, .
122
. , .
,
-: , ..

.
> , 35 , ,
.
> I
11
I. @.
> I. .
>
Alt
I.
, .
II Alt I. [] Adobe Photoshop, .
, , .
> , 35 , , .
> . , .
- .
, , .
,
. , *
, .
&
, ,
.
, ,
. , .
123
Adobe Photoshop Web

, ,
, . .
Ozero.jpg . . - , .
Levels ().
, ,
. , ,

. ,
, , . , 1
, . ,
.
.
> , Layers ()
. Window
Layers ( ).
> Layer * New Adjustment Layer * Levels (
). New
Layer ( ) (. 2.96).
]L
Name: | Levels 1
OK
. Use Previous Layer to Create GiQping Mask | Cancel

Color: |D None
Mode: | Normal
J
|
\*\
\~l
Opacity: 1100 I %
Puc. 2.96. New Layer ( )

Name () Levels 1 ( 1).
. , .
124
Use Previous Layer to Create Clipping Mask (
)
.
Opacity () Mode () .
, .
> New Layer ( ).
Layers () Levels 1 ( 1)
(. 2.97).
. 2.97.
, .
, , ).

Levels () (. 2.98).
Input Levels: 10_ J jjUDOj [255J
. 2.98. Levels ()
> , .
125
Adobe Photoshop Web

Levels (). - . 0 255. 0 ()
, 255 - . , .
, , :
.
.
, .
-: - , - , - .
, - 0 - - 255 Input Levels ( ). -
. - 1.0 - .
,
0 ()
. ,
Input Levels ( ) 50, ,
50 , . .
, 255 . , Input Levels ( )
200, 200
. .
,
, , , - .
,
,
.
.
126
Input Levels ( )
0,1.0,255 .
.
, . ,

. .
,
, . ,
. ,
, , ,
0, 18-20.
.

,
.
.
, , .. ,
,
.
- . ,
.
.
> , Levels () Preview ( ). .
> ,
, .. , Input Levels ( ) 18.
127
Adobe Photoshop Web

0 () ,

, . ,
,
255 . , ,
, , ,
, .
,
.
, .
, ,
. , ,
, .
> . ,
, ,
. 1.30. Input
Levels ( ).
Input Levels ( ) -, ,
. ,
, , - , -
.
.
, , 0 255. 225,
225 255 255.

. ,
.
Output Levels ( )
Levels () .
, - . . Input
128
Levels ( )
, Output Levels ( )
, .
, .
225,
255 225, .
, .
> Levels () . .
. 2.99.
. 2.99.
> Levels ()
Layers (),
.
, , .
> Layer Merge Down ( * ).
Background ().
> Levels (), Image *
Adjustments * Levels ( * ).
129
5-6645
Adobe Photoshop Web

, , , ,
(. 2.100).
II III
*
.
_
Output Levels: [p_j J255J
//J
Ereview
Puc. 2.100.
,
. - . ,
,
.
> , Levels ().
> , File Save ( * ).
Adobe Photoshop, JPEG,
.
, ,
. . Levels ().
Levels (), Adobe Photoshop
. Adobe Photoshop : .
.
, Brightness/Contrast (/) 130

. , 20, .
Curves (), , 16 ,
.

, , , -
. - . , .
, .
Adobe Photoshop Sharpen Tool (R)
( (R)) ; . Filter * Sharpen (
).
>. Filter Sharpen ( *
).
, (. 2.101).
Sharpen
Sharpen Edges
Sharpen More
Unsharp Mask...

.
2 101
Sharpen () Sharpen More (-
-)
," . ,
Sharpen More (*) .
- : . Sharpen Edges ( ) Unsharp
Mask ( ) .
Unsharp Mask ( ) .
,

.
> Unsharp Mask (
). Unsharp Mask ( )
(. 2.102).
131
Adobe Photoshop Web
FJ
100%
[|
Amount: ( %
Threshold: |_
_j levels
PMC. 2.102. Unsharp Mask ( )

,
; - , , . , , . , -
, - .
Amount () .
150% 200%.
Radius () - ,
.
1 2.
Threshold () , , ..
. , , , ,
2 20.
, Threshold () - 0, .
132
> Amount () ,
. 200%.
> Unsharp Mask ( ), .
. 2.103.
. 2.103.
> , File * Save ( * ).
, , Adobe Photoshop
, . ,
-,
, ,
, , .

Adobe Photoshop .
, Adobe Photoshop.
Ozero.psd
, , , , , . , .
133
Adobe Photoshop Web

> He Ozero.psd, Adobe
Photoshop Samolet.jpg (. 2.104).
. 2.104. Samolet.jpg
, , ,
Ozero.psd.
, 300%.
>> [ - Zoom Tool (Z) ( (Z))
(Tools)
Samolet.jpg.
> [ Samolet.jpg. .
> ,
(. 2.105).
. 2.105.
134
> (Tools) , , .
, , ,
- Pen Tool (P) (
()). , Sharpen Edges ( ).
>-. Filter * Sharpen Sharpen Edges ( * ). ,
(. 2.106).
. 2.106. Sharpen Edges ( )

.
> ] - Pen Tool () ( ()) (Tools), .
. , Adobe Photoshop ["]. Paths (), . (. 2.107).
XX 9
. 2.107. Paths ()
, , , , . , , ,
- .
135
Adobe Photoshop Web

. (. 2.108). , . ,
. ; , - . ; S- .
. 2.108. ( )
> Window Paths ( ). Paths () (. 2.107). ,
.
> , .
, .
.
> I a | - Creates new path ( )
Paths ().
,
- Path 1 ( 1) (. 2.109).
I _^^-^ "1111'^-^^^-^^^
-
. 2.109.
.
, ,
, ,
. Adobe Photoshop
.
136
, &<,

.
.
(. 2.110). -
, , - ,
.

,
, .
.
, , 45, \\$*.
. 2.110.

,

. ,
.
>
' (. 2.111).
. 2.111.

> , , ,
.
,
.
'
., ,
, 1*].
. ,
.
, , , ,

( ) (. 2.112).
.
, .
:
137
Adobe Photoshop Web
. 2.112. "
> , ,
.
> , , ,
,
.
> . .
If
45.
si1ift
l. ,
> ,
.
> .
> , .
,
.
> , , , , , , ,
, .
> . ,
, (. 2.113).
. 2.113.
138
I
. . ' - . '
> , .
> , ,
. .
> , , , , , , , ,
.
> . ,
, (. 2.114).
. 2.114.
, , , ,
. ,
.
IP ' t
> I Alt I.
. . .
v
,
, .
> ,
, ,
, .
v
.
, ,
.
> . (. 2.115).
139
Adobe Photoshop Web
. 2.115.
, (JQ (Tools).
, . , (Tools), . , , .
, , , [1 [&*]. (Tools) ,
| & ,|. , , . +. .
, |~|
, . -. . ,
.
[ 1^,|. , ,
|"k"|, ,
.

[~|- [~| . ,
, ; -
. .
, ,
.
140
> |~~1 - Loads path as a selection ( , ) Paths ().
,
.
100%.
> [] - Zoom Tool (Z) (
(Z)) (Tools)
I
.
Alt
I. -
v File * Save As ( > )

Adobe Photoshop - .psd. .,
, .
,
Ozero.psd.
> Edit ( ).
.
> [30 ,
.
Samolet.psd .
> [] , .
Ozero.psd. .
> Edit Paste ( * ).
, (. 2.116).
,
[-1 - Move Tool (V) ( (V)).
, Layers () Layer 1 ( 1), .
Background (),
. , , .
141
Adobe Photoshop Web
. 2.116.

.
.
. .
> Layer Matting * Defringe (
). Defringe ( )
(. 2.117).
. 2.117. Defringe ( )

, . Width ()
,
.
, 1 2 . 1 .
> , Defringe ( ).
, .
142
,
Layer Matting Remove
Black Matte ( * * ),
, Layer * Matting Remove White
Matte ( * ).
, .
> Edit * Transform Scale (
).
, (Options Bar) (. 2.118).
Xi 1229,5 I ||1,5] W; 1100,0% ~\ Hi | 100.0% || 10,0 , |
a HilCM)
| ! 10,0
| I
. 2.118. Transform ()

.
> \ - Maintain aspect ratio ( )
(Options Bar).
> W () (Options Bar) 50
. (),
.
> |>/| (Options Bar),
. .
, .
> [Kji] - Move Tool (V) ( (V))
(Tools) (. 2.119).
, ,
, ..
Background (),
. , ,
, , .
> , .
.
> 0 Layers () Flatten Image ( ).
. Layers () Background ().
143
Adobe Photoshop Web
. 2,119.
> , File * Save ( * ).
, , , .

Web ,
. , , , , . ,
, Web-,
, ,
,
. |1| - Crop
Tool () ( ()).
> [tjT| - Crop Tool () ( ()) (Tools), ..
> , fy,
.
> .
> ,
, .
144
> . ,
. , , ,
.
.

.
, .
|[sl.
. ,
, ,
, . , |[ESC|.
> , ,
,
(. 2.120).
. 2.120.
>
[[inter]. .
Web-.
800x600 ( Web)
. ,
145
Adobe Photoshop Web

.
, , , .
> Image Image Size ( * ). Image Size ( )
(. 2.121).
{image Size
Width: 1 460
1 1 pixels
Height
|| pixels
Width: 1 16,23
||cm
Heiflht:
|[cm
|297
|10,4S
Resolution: |72
OK
0^
1
Reset
| Auto... |
1 1 pixels/inch Q
DScateStite
Constrain Proportions
E3 Resample Image: | Bicubic
Puc. 2.121. Image Size ( )

, Pixel Dimensions
( ) PSD - 400,,
(Width) (Height) .
.
Document Size ( )
(Resolution).
Constrain Proportions ( )
- .
Pixel
Dimensions ( ) - , , , Resample Image (
). , , , . ,
. , , ,
.
146
Adobe Photoshop
, -
.
,
Resample Image ( ).
, ,
, .
> , Resample Image ( ),
.
>
Constrain Proportions ( ).
> Width () Pixel

Dimensions ( ) - 300. Height (),
Document Size ( ).
,
, .
> Image Size ( ), . , .
,
, .
Unsharp Mask ( )
.
> Filter Sharpen Unsharp Mask ( * *
- ). Unsharp Mask (
).
> Amount (),
. 50-60%.
> Unsharp Mask ( ).
.
> , File * Save ( * ).

, , ,
. ,
,
, .
147
Adobe Photoshop Web
Web
, , Web.
> File * Save for Web ( Web).
Save For Web ( Web) (. 2.122).
. 2.122. Save For Web ( Web)

Adobe ImageReady : , ; -
(Color Table) - , GIF PNG-8. , Image Size ( ),
, Image Size ( ), .
Zoom Level (
)
.
148
[QT1 - Zoom Tool (Z) ( (Z)), . [^1 - Hand Tool (H) ( ())
, . Q - Select Browser Menu ( ) ,
.
0, ,
, .
. . (Color Table),
. RGB-
.
- Preview Menu ( ) , Macintosh (Standard Macintosh
Color) Windows (Standard Windows Color), , 8- (Browser Dither). , ,
(Download Rate) .
> 2-Up (2 ), .
> Optimized file format
( )
JPEG.
,
, 24- . PNG-24 ,
.
Compression quality
( ) Quality () . (High, Very High)
(Maximum)
, .
>
, . , Maximum () 80.
149
Adobe Photoshop Web

> , Optimized (). .
.
>
, Progressive ().
Progressive () , ,
,
.
,
. , , .
Blur ()
0 2.0 . 8 . 24
. , .
, ,
. ,
, Gaussian Blur (
). 0.1 0.5.
ICC Profile ( ICC) ICC, . ,
Adobe Photoshop.
,
Matte () Web, .
(Anti-Aliasing), , , . , -,
Image + Mode + Indexed Color ( +
+ ).
150
> Save For Web ( Web), .
Save Optimized As (
), (File name)
- Ozero.
> .
> (Save) Save Optimized As
( ).
.
> Ozero.psd, File Close ( *
). , .
Adobe
Photoshop. , Adobe ImageReady.

, , .
, ,
. ,
.
GIF , ;
, .. .

Samolet.psd.
> Samolet.psd, .
, , , Web , , , .
, ,
, . Paths ().
v Paths () ,
.
151
Adobe Photoshop Web

> Path 1 ( 1) Paths
() .
.
, .
> 0 Paths () Make selection (
). Make selection (
) (. 2.123).
I Make Selection
- Rendering
Feather Radius: |o
1 UK
| pixels
Cancel
|
|
0 Anti-aliased
New Selection
to Selection
Subtract *om Selection
Interact wtth Setectton
Puc. 2.123. Make selection ( )

Feather Radius ( ) .
. .
.
0 () .
.
, Anti-aliased (). ,
.
- , .
> , Make selection (
).
. .
152
. .
> Select * Inverse ( ).
, - . .
> I0*"""!.
(. 2.124) - , .
. 2.124.
1
, , ,
. |[|1] - , . \J?\ - Magic Erazer Tool (E) ( ()) [I?] - Background Erazer Tool (E) ( ()).
GIF- , .
> Help * Export Transparent Image ( * ).
Export Transparent Image Wizard ( )
(. 2.125).
, . .
,
My image is on a transparent background ( ) GIF-
, .
153
Adobe Photoshop Web

This wizard will help you to export an Image with transparency.
Which option best describes your Image?

tH/ tran on a transparent background
I bave selected the area to be made transparent
I need to select the area to be made transparent
Puc. 2.125. Export Transparent Image Wizard

( )
, , I have selected the area to be made transparent ( , ).
.

, I need to select the area to be
made transparent ( ).
.
> I have selected the area to be made transparent ( , ).
> Next (). Export
Transparent Image Wizard ( )
(. 2.126), , : (Print) Web (Online).
port rran&parent Imaqe Wizard
What will this mage be used for?
Erlnt
Online

( )
154
> Online (Web-) Next
(). Export Transparent Image Wizard (
) (. 2.127).
! Imaqe Wizard
Which image format would you Ike?
OENG
r- Description -""-'-'
GIF formit only support* 8 bit color but \t vidtly cctpttd in brovuri.
PMC. 2.727. Export Transparent Image Wizard

( )
, - GIF
PNG. GIF.
. .
> Next (). Export
Transparent Image Wizard ( )
(. 2.128) , GIF 8-
,
Indexed Color ( ).
Export Transparent Image Wiznrti
The GIF format only supports 8 bit images. The next step will be to
reduce the number of colors in your image by using trie Indexed
Color dialog.

( }
> Next (). Indexed Color
( ) (. 2.29).
155
Adobe Photoshop Web

Indexed Coloi
Palette: | Web
h"}
Colors: 217
&reed: | None
Reset
[7| Preview
0 Transparency
tte: | None
Dither: | Diffusion
Umount: [75
El
EJ
_j %
Preserve Exact Colors
Puc. 2.129. Indexed Color ( )

,
256 . Adobe Photoshop , . RGB-,
,
. .

Palette () ,
.
.
Web.
Colors (),
- 2 256.
Forced (), , :
(Black and White); (Primaries) - ,
, , , , , ; Web- (Web);
, (Custom).
Transparency () . ,
,
Matte (), , Matte () None ().
156
, ,
Dither () .
.
Amount () Dither
() . ,
.
Preserve Exact Color ( )
.
> Indexed Color ( ), . ,
.
Save As ( ).
Web,
.
JGIF Options
iLlIOiTZjl
interlaced
~~1
. 2.130. GIF Options

( GIF)
/
(File name)
, - Samolet.
(Save). Save As ( ) .
GIF Options ( GIF) (. 2.130).
Interlaced ( )
. . , Export Transparent Image Wizard (
) (. 2.131) ,
.
Export Transparent Image Wizard
You have now completed the Export Image with Transparency
Wfeard.
Your rnage is now ready to be used online.

( )
157
Adobe Photoshop Web

> Finish (), .
Adobe Photoshop Samolet.gif,
.
Web
.
> Samolet.gif, \\
.
, Web-. Samolet.gif . geoton.html.
> (Notepad) geoton.html Web
</body>
HTML:
<centerximg src=Samolet .gif border=lx/center>

> geoton.html.
, . , Web-.
HTML- border=i,
.
,
. , . , , .
- .
> , ,
, Adobe Photoshop.
(Notepad) .
>
, Select Deselect (
).
,
, .
> Select Color Range ( *
). Color Range ( )
(. 2.132).
158
SeteQt: I f Sampled Colors

Reset
Fuzziness:
Invert
Selection
Selection Preview: [None
Puc. 2.132. Color Range ( )

.
Select ()
, (Sampled Colors).
Selection ()
.
Image (), . , , , , ,
.
'-,',.
'
> ,' ,
^,
. , , .
Color Range ( )
, , , , - , . .
> Invert ( ).
, , , - .
,
Color Range ( ) [] .
159
Adobe Photoshop Web

,
[^] .
\$\ ll s h i f l i. a
\$\ - I Alt I.

Fuzziness ().
> Fuzziness () Color Range ( ),

. 0 ().
Selection Preview ( )
:
None (He ) - ;
Grayscale (-) - ,
- ;
Black Matte ( ) - ;
White Matte ( ) - ;
Quick Mask ( ) - .
.
.
> ,
Selection Preview ( ).
> Color Range ( ), .
.

, - , .
. ,
(Quick Mask).
Adobe Photoshop
, .
160
. ,
- . , .

.
> || - Edit in Quick Mask Mode (Q) ( (Q)) (Tools),
.
, - - ,
, 50 (. 2.133). ,
, - - .
Sarnolel.psd @ 100% (Quick Mask/8)
. 2.133. Quick Mask ( )

- , ,
. : , , . , - .

.
161
6 - 6645
Adobe Photoshop Web

, , , .
> [^] - Zoom Tool (Z) ( (Z)) (Tools), 300%.
> , (]
, ,
(Tools) .
(Tools) .
>- t*. - Switch Foreground and Background Colors
(X) ( )
(Tools), . .
> \J\ - Paintbrush Tool () ( ()) (Tools), .
> Brush () (Options Bar) - Hard Round 3 Pixels ( 3 ).
> , ,
, ,
, , ,
.
.
,
, ,
, .
- , Edit Undo ( )
History ().

, ,
. , ,
. , , , .
162
, - .
> (Tools) [~\ - Pencil Tool ()
( ()),
, , , - ,
. .
, .
> [] - Edit in Standard Mode (Q) ( (Q)) (Tools). .
> , . .
>> [^] - Zoom Tool (Z) ( (Z))
100%.
-.
Adobe Photoshop ,
. ,
RGB : (Red), (Green) (Blue).
. Channels ().
> Channels () . , Window *
Show Channels ( ).
Channels () (. 2.134).
. 2.134. Channels ()
163
Adobe Photoshop Web

Channels ()
. - Red
(), Green (), Blue () -
. ,
- RGB, ,
. Channels ()
,
.
> , , $.
, - ,
. 24- , . -, , ,
.
, . , .
-.
> | ) - Save selection as channel (
) Channels (). - Alpha 1 ( 1) (. 2.135).
. 2.135. -
> Select * Deselect ( * ), .
- .
164
Channels () Indicates channel visibility ( ), Alpha 1, -. ,
, .
Channels () RGB, .
, - (. 2.136).
. 2.136. -
, - , - . GIF89a , -, , - .
> -
, , - Channels ().
RGB.
> ,
Channels () Indicates channel visibility (
) RGB, , Alpha 1.
- .
> Select V Load Selection ( *
). Load Selection ( )
(. 2.137).
165
Adobe Photoshop Web
0 blew Selection
fisH to Selection
Subtract from Selection
Intersect with Setectton
Puc. 2.137. Load Selection ( )

Document ()
; Channel () - -, . Invert (),
-.
v Load Selection ( ), .
.
GIF89a, ,
Web- .
,
, .
> Edit * ( * ).
.
> Layers (), .
> |"~1 - Create new layer ( )
Layers (). - Layer 1 -
.
> Swatches ()
.
> Select ( ),
.
> [^] - Paint Bucket Tool (G) (
(G)), .
> Edit Paste ( ).
Layer 2,
.
166
, ,
. ] - Smudge Tool (R) ( (R)).
Background ().
>> Layer 1 Layer 2, I ffi I Delete current layer ( )
Layers (). Background ().
> , Select Load Selection
(- ) Load
Selection ( ) .
>
300%.
v [^] - Blur Tool (R) ( (R))

(Tools),
- Smudge Tool (R) ( (R)).
. ,
, .
> Brush () (Options Bar) Hard Round 3 Pixels ( 3 ).
> Finger Painting ( )
(Options Bar).
>
, .
, , .
> 100%.
GIF- . , .
,
.
> Edit Paste Into ( ).
Layer 1. Layers ().
> Background () Layers (),
.
167
Adobe Photoshop Web

, Layer 1, , - , ,
.
Layer 1 GEF Save for Web ( Web). , - Background (),
.
> File Save for Web ( * Web).
JPEG .
> Optimized file format (
) GIF.
> Colors ()
, .
>
, Transparency ().
,
.
. ,
, Matte ().
> , Save For Web ( Web).
> Save Optimized As ( ) Web (Save), - Samolet.gif.
> Replace Files ( ) (. 2.138)
Replace (). .
Replace Files
Some of the specified files already exist in the target location. The files marked below will be replaced:
Samolet.gif
Cancel
] |
Replace
Puc. 2.138. Replace Files ( )
168
, , -,
, Color
Range ( ) . , , ,
|'*\| - Magic Wand (W) (
(W)) .

Adobe Photoshop .
.
> Web-,
(Taskbar).
> Web-, .
,
, . : . ,
, Web-.
,
, Web-.
- Web-.
>- , , Q
.

, ,
Web-, . , , ,
. , ,
Web-,
, ,
Web-. , .
> File Save for Web ( Web).
169
Adobe Photoshop Web

, .
Transparency ()
, ,
, Matte ().
, Web- geoton.html.
> Matte (). Color Picker ( ).
> R, G, , , , , 255
Color Picker ( ).
Matte ().
.
> . Save For Web ( Web) .
Save Optimized As ( ).
> Web (Save).
> Replace Files ( ) Samolet.gif Replace ().
.
, Web.
> HTML.
, Web-,
.
> , [] .
> geoton.html , Samolet.gif.
> Samolet.psd Adobe Photoshop,
[] ,
.

. ,
, .
, Web-.
170
ecuio&Hbiu
, Web-
. ,
Web-.
, , . ,
.

WWW. . , .
100
.
> - Default Foreground and Background Colors (D)
( )
(Tools) Adobe Photoshop, .
> ,
*}, - Switch Foreground and Background Colors (X) (
) (Tools). .
> File * New ( ).
New ().
> Width () Might ()
- 100 .
> Color mode ( ) RGB Color
( RGB).
>
Background Contents ( )
Background Color ( ).
> , New ().

Adobe Photoshop 100 100 .
Clouds () Difference Clouds ( ) .
,
, .
171
Adobe Photoshop Web

> Filter Render Clouds ( *
). ,
.
Difference Clouds (
).
> Filter * Render Difference Clouds ( *
* ). .
,
.
1
ctrl
> II l+ll I.
,
- . -
. 2.139.
. 2.139. Difference Clouds

( )
Glowing Edges ( )
Stylize ().

-
. Glowing Edges ( )
, .
> Filter * Stylize Glowing Edges ( ). Glowing Edges ( ) (. 2.140), .
> Edge Width ( ) ,
1.
> Edge Brightness ( )
, 20.
172
. 2.140. Glowing Edges ( )

> Smoothness () 1.
> Glowing Edges ( ), .
. Brightness/Contrast (/)
.
> Image Adjustments Brightness/Contrast ( /).
Brightness/Contrast (/) (. 2.141).
Brightness/Contrast
Brightness:
Contrast:
. 2.141. Brightness/Contrast (/)

> Brightness () ,
+50.
> Contrast () ,
+30.
173
Adobe Photoshop Web

OK, Brightness/Contrast (/).
. 2.142.
. 2.142. Glowing Edges

( )
, , .
> Image Adjustments Hue/Saturation ( * /).
Hue/Saturation ( /) (. 2.143).
. 2.143. Hue/Saturation ( /)
,
.
> , Preview ( ),

.
> Colorize ().
, .
,
, , 174
(. 2.144). : (Hue),
(Saturation) (Lightness).
HSB.

: , , , .. 0 360.
- ,
. 0% - - 100% - . .
' 244~

0% - - 100% - .
RGB CMYK :
, . , . - ,
- . , ,
.
, . .
.
> Saturation ()
, . ,
. -100%.
.
> Hue ( ) , .
.
' '
. I
'
' . : '
'
175
Adobe Photoshop Web

> Hue ( ) - 210.
, ,
, 210.
> , Hue/Saturation ( /). .
> Web, Fon.psd Adobe Photoshop.
. ,
Web- ,
. Adobe ImageReady - Tile
Maker ( ), ,
.
>
- Edit in ImageReady (Shift+Ctrl+M) ( ImageReady (Shift+Ctrl+M))
(Tools). Adobe ImageReady,
Fon.psd.
> Adobe ImageReady Filter Other Tile Maker
( * * ).
Tile Maker ( ) (. 2.145).
Blend Edges
Width: [10
| percent
Resize Tile to Fill Image
Reset
Kaleidoscope Tile
Puc. 2.145. Tile Maker ( )

. Blend Edges ( )
Web-.
Width () , . 5% 15%, 20%.
, , - 10 .
Resize Tile to Fill Image (
), .
,
, Width (), Web-
.
176
Kaleidoscope Tile ()
, ,
.
> Resize Tile to Fill Image (
).
> Tile Maker ( ) .
.
, Web- , ,
,
> File Output Settings Background (
* ). Output Settings
( ) (. 2.146).
Output Settings
Preset: [Default Settings

[Background
View Document As
Image
OK
Caned
Prev
Background
Next
-Background ImageEath: [
| Choose... |
Puc. 2.146. Background ()

Output Settings ( )
> Background (),
Web-.
> Output Settings ( ), .
.
177
Adobe Photoshop Web

> File Preview in ( * ) - Web-.
,
.
, ,
[gji] - Preview in Default Browser (Ctrl+Alt+P) (
(Ctrl+Alt+P)) (Tools).

(Format), (Dimensions), (Size)
(Settings), - HTML-
(. 2.147).
!^^
J) I Jp "f
^ Me
ftapec; |g| CADocunentt and SeUing4Vaily\Locl SellingiUmp\lmaUBReadyVTaia>Pivia3\Fon.hlm
|;J * [ Link
'ormt: OIF
Dimensions: lOOwxlOOh
14
Settings: Selective, 16 Colon, IOC*/. Diffusion Dither, Tnnspuincy on. No Tnnspmncy Dither, Interkced, 0*/. Web Snap
<heml>
body b g c o l o r " " * F F F F F F " leCMrgin"0" topat7in-"0" Mftcginwidth"0" arginhtight a "0" bftckgrouxid"imBgc/Von.
</body>
Puc. 2.147.
> , [] .
Web, Web-.
> 2-Up (2 ) . , .
178
> , , GIF.
> Web Fon.gif,
File Save Optimized ( ).
> Adobe ImageReady Fon.psd,
[] .
, Web-
geoton.html.
> geoton.html Web (Notepad)
<body> background=Fon.gif.
>
geoton.html.
, Web- , . ,
.
i
> Web-.
> HTML- geoton.html background= Fon.gif.
>
(Notepad).

, Clouds () Difference
Clouds ( ).
,
.
.
. ,
.
Adobe Photoshop 100 .

> .
> Add Noise ( ), Filter
Noise Add Noise ( * ) Uniform (), Monochromatic (
) Amount () 400 (. 2.148).
179
Adobe Photoshop Web
. 2.148. Add Noise ( )

> Emboss (),
Filter Stylize Emboss ( * ), :
Angle ()=45, Height ()=2, Amount ()=30 (. 2.149).
. 2.149. Emboss ()
> , Image Adjustments
Hue/Saturation ( * * /).

100 100 .
Add Noise ( ) Gaussian ( ), Monochromatic ( )
Amount () 125 (. 2.150).
. 2.150. Add Noise ( )

Motion Blur ( ),
Filter * Blur Motion Blur ( * * ,
), : Angle ()=-45, Distance ()=100
(. 2.151). .
. 2.151. Motion Blur ( )

180
> Emboss () : Angle ()=45, Height
()=2, Amount ()=35 (. 2.152). , Angle () Motion Blur
( ).
. 2.152. Emboss ()
> , Hue/Saturation ( /), : Colorize
() - , Hue ( )=180, Saturation ()^! , Lightness ()=+20.

> 100 100 .
> Add Noise ( ) Uniform (), Monochromatic ( )
Amount () 120 (. 2.153).
. 2.153. Add Noise ( )

> Emboss () : Angle ()=45, Height
()=1, Amount ()=30 (. 2.154).
. 2.154. Emboss ()
> Channels () Alpha 1,
I | - Create new channel ( ).
181
Adobe Photoshop Web

- Select * All
( ) 3 Select Modify Border ( ).
Select Inverse (
) . .
- Gaussian Blur ( ), Filter * Blur Gaussian Blur ( * * ) Radius ()=2,0 ,
(. 2.155).
. 2.155. -
Layers () Background ()
Lighting Effects ( ),
Filter Render * Lighting Effects (
).
. 2.156. , . 2.157.
_I-J
El On
21
Narrow
92
Wide
,.
Matte
-79
Shiny
Material-
PI*5'!0
68
Metallic
EBp0?V|tr Under
Over
Ambi-ncf Negative
32
Focur
P
aativ
r'
Texture Channel:
E3 Preview
Full
Ne
.|n>fmi>j<-
El White is high
Flat
Height:
jlj
[Alpha 1
50
Positive
JaMountainous
Puc. 2.156. Lighting Effects ( )

182
. 2.157. Lighting Effects ( )
> , Hue/Saturation ( /).

, , Colored Pencil ( ), Sponge (), Grain
(), Craquelure (), Chalk & Charcoal ( ), Mezzotint
(-), Mosaic (), Halftone Pattern ( ), Note
Paper ( ), Pointillize (), Reticulation (),
Glass (), Texturlzer (), Texture (), Ink Outlines
() Mosaic Tile ( ). ,
, , Glass (), .

*~
, Web-,
.
, (slices). , HTML-. , ,
,
, .
, ,
Rollover (). ,
, .
GIF- JPEG,
HTML-. Web- .
, . menu.html, ,
HTML. Adobe ImageReady
.
183
Adobe Photoshop Web

, Adobe Photoshop , Adobe ImageReady,
- Edit in
ImageReady (Shift+Ctrl+M) ( ImageReady (Shift+Ctrl+M))
(Tools).
Adobe ImageReady
RGB- R=0,
G=0, =255 - OOOOFF.
Adobe ImageReady
160x400

Background Color, .. .
isd @ 1002 [Uiimn ..
> .
2.158, ,
.
> menu.psd.
.
] - Slice Tool () ( ()).
> \^\ - Slice Tool () ( ())
(Tools), .
.

-
:
. - . 2.158.
,
HTML-.
,
, ,
HTML-. , .
. . ,
. .
, .
184
> , /,
.
.
- [.
, - - .
.
> ,
,
.
> . -

(. 2.159).
1
} Ori8lnl\OpHmiid Tgjjp\4-IJp ^8
.

-

100% > I
-;..s.i 9 28.8 KM -"I
. 2.159.
01, .
02, .
. , -
, , ,
.
185
Adobe Photoshop Web

,
, \\ Slice Select Tool () ( ()). .
*1"1*! Slices Delete Slice ( * ).
> VL\ - Slice Tool () ( ())
?, -
.
9 (. 2.160).
V j menu ) & 100% (Qiiqin
:
?
03 |
\
'
04
05 !
06 !
07

-
,..':{
. 2.160.
, , ,
.
> [ - Toggle Slices Visibility (Q) (/
(Q)) (Tools).
. .
> , || - Toggle
Slices Visibility (Q) (/ (Q))
(Tools) \^\ \.
186
-
Select Create Selection from Slice (
).
Rollover
() ,
-. . .
> |$] - Slice Select Tool () (
()) (Tools), .
> , jjf,
.
> . .
> Web Content
( Web) , .
> ,
(. 2.161).
Web Content ( Web)

Normal (),
. menu_01 .
.
> | | - Creates rollover state
( )
Web Content ( Web),
Over ().
, Over (), .. .
' -. , '
*'
, - Content ( Web)
Layer 1 "

- .
187
Adobe Photoshop Web

> Select * Create Selection from Slice ( *
). .
> Layers () Background ().
> I I - Create a new layer ( )
Layers (). Background ()
Layer 1.
> - ,
R () G () Color () 00, () - .
> Edit * Fill ( * ) Layer 1.
, Over () Rollover () .
?
> - menu_02,
Web Content ( Web). ? .
, Normal ()
_01 Layer 1
.

[] - Slice Select Tool () ( ()).
> Over (), I s | - Creates new rollover
state ( ) Web Content
( Web).
>
Select Create Selection from Slice ( *
).
> - Layer 2 - Layers () - .
Rollover () .
> , Rollover ()
.
188
Rollover
(), .
HTML.
Adobe ImageReady
HTML-,
.
Slice ().
> |5] - Slice Select Tool ()
( ())
, .
> Window * Slice ( * ). Slice () (. 2.162).
Name () ,
- menu_01,
.
. .
| i SliceXTableX'mage M<?4 '

Type: Image
Name:
URL: |~
~|
rnenujl
.*.!
~ZI -d
() Target;
...... . . .iil
: Image
Alt:
(), No Image (He ) Table t> Dimensions
(). - t Cell Alignment
t> Background
Image (), .. t> Status Bar Message
/
. , ,
, - . 2.162. Slice
No Image (He ).
()
Slice () , ,
Background () Color () (. 2.163). , , . .
HTML-,
,
URL .
> URL geoton.html.
, , ,
, :
menu.html, - .
frame. , Web, Target ().
189
Adobe Photoshop Web

> Target () frame.
Alt () alt
<img>. , , , .
11 Slice XTtbbXImagt ^
> Alt ()
.
> Slice ()
Show Options (
). ,
(. 2.163).
Dimensions
() X
Y , (W) (). - ,
Constrain Proportions ( ).
Typti [b
-J
Name: j menuJH
URLl |gtoton.Nrnl
Target: ||m__
V Dimensions
Xl
Hi
" Constrain Proportions
^- Oil Alionm.nt
Horln
Vrti iDtfauk i
<? Background
Color: I None i
" Status Bar Message
Status Bar Message (

) ; Puc. 2.163.
Slice ()
(Status Bar)

. , ,
URL .

?
v 02 ?, . Slice ()
.
v URL - spisok.html,
.
> Target () frame, spisok.html.
190
> Alt () : ?
, .
,
.
.
, ,
.
> , l s h i t t l.
, .
> II Shitt

Select All Slices ( ).
> Slices Link Slices for Optimization (
).
], . -
. .
.
2-Up (2 ) . , .
> Optimize () GIF.
> Colors () 16.
Web,
. ,
.
> File Output Settings Background (
). Output Settings
( ) (. 2.146).
> Image ().
BG Color ( ) Foreground Color
( ). .
191
Adobe Photoshop Web

> OK Output Settings ( ).
HTML-, ,
.
> , Web menu.html. , HTML-
.
.
> File * Save Optimized ( * ). Save Optimized ( ) (. 2.92).
> Web.
HTML-, - menu - (File name).
HTML ,
(List files of type) HTML and Images (*.html) (HTML (*.html)). ,
, HTML ,
Images Only (*.gif) ( (*.gif)).
Slices () All Slices ( ).
. Selected Slices ( ),
.
> , Other
() Settings (). Output Settings ( ) (. 2.164).

: HTML - HTML;
Saving Files ( ) - ; Slices
() - , Image Maps ( ), Background () - , Saving Files ( ) Metadata () - . , . HTML-.
192
, Output Sellings
OK
Preset: [Custom
[HTML
Cancel
Output XHTML
Formatting
Tags Case: [Lowercase (body)
Attribute Case: [lowercase (rowspan)
Indent: [Tabs
Brev
I
Next
Load...
Save...
Line Endings: [Automatic

Encoding: [Automatic (windows-1251)
Coding
13 Include Comments
0 Always Add Alt Attribute
El Always Quote Attributes
Close All Tags
0 Include Zero Margins on Body Tag
Puc. 2.164. Output Settings ( )

HTML
Tags Case ( ) Attribute Case
( ) HTML:
, , . .
Indent () HTML-:
(Tabs), (Spaces) ,
(None).
Line Endings ( )
: Windows (Win), Macintosh (Mac), Unix.
Include Comments ( ) HTML-.
Always Quote Attributes (
) .
HTML
, .

Slices () (. 2.165) Generate CSS
( CSS), .
193
7 - 6645
Adobe Photoshop Web

Referenced ()
HTML, .
Preset: [custom
MCOl
OK
Erev
jsgxt
Load...
[]
gave...
LU
0 Generate Table
Empty Cete: |GIF, IMG W&H
TD W&H: |Auto
Spacer Cels: [Auto (Bottom)
Generate CSS
Referenced JBy
[j]
3 + [underscore
|none
[] + [none
jj + | layer name or slic p| +

+|
||
Example: MyFle.Ol
. 2.165. Output Settings ( )

Slices ()
HTML Generate Table
( ) TD W&H ,
HTML : Always (), Never
(), Auto (). Empty
Cells ( ) , .
(Image Maps) (. 2.166)
, Placement () - HTML- <>.
.
>
Saving Files ( ).
(. 2.167).
Put Images in Folder (
) ,
, - images. , , HTML-.
194
Preset: [Custom
|*]|
i i
1
&ev
Mext
Load...
Save...
Client-Side
NCSA Server-Side
CERN Server-Side
Client-Side and NCSA Server-Side
dent-Side and CERN Server-Side
_^
Top
Body
0 Bottom
Puc, 2.166. Output Settings ( )

Image Maps ( )
Output Settings
Preset: |custom
[3
0 Put Images in Folder: j triages
Use Long Filename Extensions (Jpeg, .wbmp)

0 Copy Background Image when Saving
| slice name
|J + | hyphen
| underscore
|none
|jj + | trigger name
j + [rolover state
[J + |none
J+[none
[J-f|.ext
&ev
xt
ipad...
gave...
+
P1 +
(Vj
Example: MyStee-MyTrlgger_over.gif
0 Wlxtows
,,.
,
0 Mac OS 9
0 Unix
Puc. 2.167. Output Settings ( )

Saving Files ( )
195
Adobe Photoshop Web

Copy Background Image when Saving (
)
,
Background ().
File Naming ( )
, .
: (doc. name), (slice name),
Rollover (rollover state),
(date), (trigger no.), (.ext),
- (hyphen), (underscore),
(space) . (Example)
.
Filename Compability ( )
Windows, Macintosh
(Mac OS) UNIX.
> Output Settings ( ), .
Save Optimized ( ).
> (Save).
.
V menu.psd , []
.
',.
'
'
; .
,.
.'
"
"- -."
' N
..'."
.:'.*
> Web- index.html Web.

, geoton.html, - - .
> .
.
> ?
spisok.html.
> . geoton.html.
menu.html

/Goton.flii" width*"468" heighc"60"
I End ImageReady Slice* >
</body>
''
My Computer
Puc. 4.16.
> , [] .
,
Adobe Photoshop.
> File * Save ( ). .

Adobe Photoshop,
.
Adobe ImageReady.
, , Web
GIF.
> File Save Optimized ( ). Save Optimized ( ) (. 4.17).
> Web, .
>> , (File name) - Geoton.gif.
> , (List files of type) Images Only (*.gif) ( (*.gif)).
GIF, HTML-.
222
Adobe ImageReady CS
no
)CLOUD
]Fon
iSamolet
^ :
[Geolon
1 :
| Images '.)
Settings:
[ DetauH Sellings
Sleet:
AH Slices
PMC. 4.17. Save Optimized ( )

> Save Optimized ( )
(Save). .
Adobe ImageReady .
> File Exit ( * ).
Geoton.psd.
> No () .
.
v , Web- ,
<img> geoton.html CLOUD.GIF
Geoton.gif.
Adobe ImageReady . ,
, Adobe ImageReady. , Filters ().
223
Adobe Photoshop
Web

( , , , - 3000, 25 )
: (095) 720-07-65, (095) 772-19-56. E-mail: opt@triumph.ru
-: www.3st.ru
-: 125438, ., / 18 . E-mail: post@triumph.ru
:
-
-
-
, .. .
.
.. .
.. .
.
125438, . , / 18.
,
- 23.03.2005 .
70'/|6. . . . 14.
6645.
3 500 .

143200, . , . , 93
www.3st.ru
9ll785936ll73048l
: (095) 720 07 65
E-mail: opt@triumph.ru

Adobe Photoshop Dlja Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Adobe Photoshop Dlja Web

Загружено:

Авторское право:

Доступные форматы

Adobe Photoshop

21 Adobe Photoshop Web : . . .: [, ] /

1. Web- ................................ ....6

Adobe fliotoshop CS Adobe Imageready OS

.................................... . ....... . ......... . ........................ ........................ 180

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

. 1.2. Web- geoton.html

Adobe Photoshop Web

, , HTML <img> alt, , . 23

Adobe Photoshop Web

l-Bnds * "* Asiare[fiC:WDb\Buolon,tiliBl

. 1.5. Advanced () Internet Options

Adobe Photoshop Web

-l-Back * - & ( {(Search & Favorites OMislory

<1^111|111111 - (Working OlHirml

J-Back ''* - ffli I ttSeorch Favorite GJHiMoiy | 81"

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

. 2.1. Adobe Photoshop CS

Adobe Photoshop Web

Tips and Tricks

. 2.5. Adobe Photoshop

Adobe Photoshop Web

Adobe Photoshop Web

Adobe Photoshop Web

C. 2.7. Adobe ImageReady

Puc, 2.8. New ()

Adobe Photoshop Web

Ftrihm-i l.tjJM^J C;Anli-aHMd

^ Draw stltclbn from nt.f or lubtMCt from Kilting Mltction.

Adobe Photoshop Web

Adobe Photoshop Web

R/] - Paint Bucket Tool (G) (

1 Inside <s> tenter Outside

Adobe Photoshop Web

. 2.18. Color Picker ( )

Adobe Photoshop Web

Puc. 2.19. Custom Colors ( )

Adobe Photoshop Web

Puc. 2.20. Fill ()

Puc. 2.21. Contract Selection ( )

Adobe Photoshop Web

. 2.25. Eraser Tool(E)

Adobe Photoshop Web

. 2.27. Brush Name ( )

> Color () (R), (G) () 32,112, 239. Color () (Tools).

> II Alt I. |Q| - Elliptical

Adobe Photoshop Web

Puc. 2.29. Rectangular Marquee

Mode: | CMYK Color

Buler Units: | Centimeters

Show 16 bit values

Puc. 2.31. Info Options ( )

Adobe Photoshop Web