ps新手學(xué)堂所有教程專輯索引
切片是做什么的?許多網(wǎng)頁為了追求好的視覺效果,常常采用較大幅圖來做布局,但瀏覽器在加載圖片時(shí)速度往往會(huì)及其慢,。那么,采用切片將可以解決這一點(diǎn),將大圖切成若干個(gè)小圖,提高瀏覽速度。用切片,我們還可以在PS中做出網(wǎng)頁的某個(gè)部分,為后面DW中的操作打基礎(chǔ)
0 \+ s/ @5 V) _雙擊圖片看大圖
5 \$ x6 ?* p% k" v. N/ O C( Q b" m" n教程版本PS8.0' n/ i" J4 n% b+ S3 n切片工具分為切片工具和切片選取工具- s9 B( }+ p9 D5 m/ S
& X+ n8 p+ E7 M- n6 Q) _1 ^; n* p; V3 i" G) ~切片工具:就是用來對(duì)圖片進(jìn)行切片,其主要用途劃出每個(gè)切片塊的大小,規(guī)劃總體切片的布局
7 l7 V8 L, e- ~( u% j- }9 `" E0 h+ J切片選取工具:用來編輯切片塊,對(duì)切出的每個(gè)小塊進(jìn)行設(shè)置
! z9 v+ j5 H* [+ j/ O% [* U, c) M8 C& R 下載 (19.8 KB)
2010-4-29 21:52
8 |! y" G, K) v4 f I8 a7 G0 ?2 I9 n! H0 U) [ W7 V9 l% s4 w1 c切片工具
4 e/ V" J6 \+ G D8 x- o5 I2.狀態(tài)欄中 樣式分為正常、固定長(zhǎng)寬比、固定大小
$ Z5 o8 X4 w+ Q; l T 下載 (12.71 KB)
2010-4-29 21:52
5 u4 [# e% o/ g! R7 U+ y0 {6 ^6 m/ r0 m* |3.當(dāng)前樣式為正常時(shí),寬度、高度都是暗的,這個(gè)時(shí)候切片的大小是自定的,無限制
5 Z, ]3 Y+ N( u2 i- C 下載 (11.78 KB)
2010-4-29 21:52
: ~! |- ]( O5 X$ A7 Y% O/ J" ^# ?4 v/ P+ ^ 下載 (39.54 KB)
2010-4-29 23:28
: ?8 c m' X! p5 C( U8 ]2 R0 v' ]. t, t9 A7 f9 t/ I! T4.當(dāng)前樣式為固定長(zhǎng)寬比時(shí), 這個(gè)時(shí)候切片塊的寬和高成 X :X
; M* j# R- F: o$ G( G2 c5 O, k$ ~ 下載 (11.83 KB)
2010-4-29 21:52
/ N6 [7 U* j: r& `6 X$ R* a% J8 ]- [4 O1 ? 下載 (34.29 KB)
2010-4-29 23:28
5 |6 j5 u. k6 U3 _ q4 _) U+ `' W& m3 d2 I9 o5.固定大小后,切片的大小是不變的,我們只需要在圖片的某個(gè)坐標(biāo)點(diǎn)上按住鼠標(biāo)左鍵輕輕拖動(dòng)一下,固定大小的切片就會(huì)自動(dòng)出現(xiàn)
: F: C+ \2 T3 I3 Y,不要放開左鍵,將完成的切片拖到你要切的地方
# _+ _1 B6 b+ [ 下載 (11.15 KB)
2010-4-29 21:52
! ?3 k" [4 h# N* Y( a: k+ `# R6 j9 A2 m$ m4 h2 D2 N" |5 p 下載 (33.75 KB)
2010-4-29 23:28
# \+ S) t5 U ^( g* W) H. h4 {! r& J; G/ _/ a8 q4 S4 ?& P) \- N0 J8 S) C6 c& R% C# p8 P$ U基于參考紅切片! B3 Q1 S4 E7 o% D( E' } A) O+ v- \6.狀態(tài)欄中“基于參考線切片”這一項(xiàng)一直是暗的,為咐?畫布中沒有參考線,視圖——標(biāo)尺(ctrl+R),按住鼠標(biāo),在畫布邊的標(biāo)尺上拖一下拉參考線,參考線拉多了怎么辦?選擇移動(dòng)工具,鼠標(biāo)停在參考線上,按住左鍵,拖回標(biāo)尺上
# k/ W/ N9 A6 E! G0 T; Z6 w隱藏所有參考線,ctrl+H
7 W+ d$ a6 D5 j* ~# ] 下載 (11.13 KB)
2010-4-29 21:52
% S" T* S+ Y: R7 D7 W) M" |, x/ ?4 J/ K/ A* w 下載 (20.3 KB)
2010-4-29 21:52
$ r" T; k4 R G$ e' D# v6 V- W, t/ c" g9 g 下載 (29.53 KB)
2010-4-29 21:52
: d) K) _5 l" E$ W y2 U# r- R, U# S5 Z: o* T8 {4 q7 ^! Y1 E* U' o5 S9 Q9 K" b# Q$ G& d0 `3 r. r$ y3 }切片選取工具- L, F" A z: F4 w2 w* F3 |" q. X! b3 l& x7 d9 a
左鍵單擊選中,對(duì)切片塊可以進(jìn)行拉大縮小操作,按住鼠標(biāo)左鍵,可移動(dòng)切片位置
; o8 C; Q" J5 m; t% G 下載 (56.56 KB)
2010-4-29 21:52
' {$ B6 `* @- M' K/ |' }) D* M9 U! K' ]& D狀態(tài)欄的屬性為:切片塊的層次順序、切片選項(xiàng)、提升到用戶切片、劃分切片、隱藏自動(dòng)切片
: ~, n3 L* s! R+ i Q: J$ V 下載 (22.55 KB)
2010-4-29 21:52
. v7 ?8 }# X8 M" M( J4 R9 C* C: ~9 f8 t: |( C* s! YA:切片塊的層次順序* f/ \4 \; t. M% { 1,置為頂層
& t# c" }. e h4 o6 k( M8 b 2, 前移一層
* u" T" j: |3 K" U 3, 后移一層
% `$ x* Z( W. l$ F7 `$ W& q 4, 置為底層
1 O3 X$ M6 F9 f- U [; \4 v! I' r n' }8 x `2 U" ^: {' E( LB:切片選項(xiàng)9 s# W# |6 g7 f7 \# j; F) a這一項(xiàng)是對(duì)切片塊進(jìn)行細(xì)致的設(shè)置,切片類型分為
圖像和無
圖像8 K3 _$ Y( |8 I 下載 (25.92 KB)
2010-4-29 21:52
3 _2 i# D9 c( K2 u, g5 O* ]9 b+ N1 Z! D$ @: a% y( d圖像,表示這個(gè)切片塊為原圖,就是顯示這個(gè)切片塊原來的圖像
' g; R ~. h( w. D+ U0 O7 t; o名稱:這個(gè)塊的名字
) w; G7 v! C8 K/ U W. p. t2 \URL:單擊這個(gè)塊時(shí)它所鏈接的網(wǎng)址
; ^* d" F3 N/ Z; M+ x U2 l: j2 S5 k目標(biāo):表示是在原窗口打開鏈接,還是在新窗口中打開鏈接
7 E5 ^: l5 e3 v2 }: C& ?信息文本:鼠標(biāo)移到這個(gè)塊時(shí)瀏覽器左下角顯示的內(nèi)容
0 h7 ~. v7 Y+ O8 _; _Alt標(biāo)記:圖片的屬性標(biāo)記,鼠標(biāo)移到這個(gè)塊時(shí)顯示在鼠標(biāo)旁的文本信息,當(dāng)圖片不能正常顯示時(shí)可告訴瀏覽者這個(gè)圖片的信息
( y7 D+ s+ r+ e5 E尺寸:設(shè)置塊的x,y軸坐標(biāo),W,H塊的精確大小,這個(gè)用于需要設(shè)置十分精確的切片塊
/ k' }: J: ~& V/ g4 T# @, K1 o' P切片背景類型:切片塊的背景信息設(shè)置
+ l1 D1 S$ `% w% U0 O* a9 F0 C# b; I7 W無圖像,顯示的不是切片塊的原圖,若不設(shè)置方本或背景色就是空白
7 N1 s' H, `& U1 O" M% Y. {: @ 下載 (21.96 KB)
2010-4-29 21:52
2 _, Z; }7 h0 L' v5 m8 S5 r- K& O' J/ c! U. m, h顯示在單元格中的文本:顯示在這個(gè)塊的文本信息
; M0 i5 t7 u3 {3 x/ P$ b; y% y' F" n/ s- {9 c7 _; E5 l: l尺寸:設(shè)置塊的x,y軸坐標(biāo),W,H塊的精確大小,這個(gè)用于需要設(shè)置十分精確的切片塊
6 h H5 z' S a4 r7 X2 C9 Z+ E3 B" [' K! t; X1 g切片背景類型:切片塊的背景信息設(shè)置
0 K, A) m! z+ l2 R, w' W3 D: x& B# N( w' v8 t: e% t& G# _1 ~ K. u) J6 jC:提升到用戶切片 ?; f5 r* r, ~) s, W1 n圖片中暗的切片塊是我們切片時(shí)自動(dòng)生成的,左鍵單擊選中,單擊“提升到用戶切片”可以讓它變亮,變成用戶切片
8 ]3 A# Q7 ^. Z+ Z. k- } 下載 (46.82 KB)
2010-4-29 21:52
/ j, B. T% F p. D3 S7 I1 x2 ^3 |+ P% e" F4 W# h6 Z8 W1 T8 pD:劃分切片1 Y0 c5 G8 ]( b: {% g2 y智能切片,如果需要等分圖像,則在切片上右擊后選擇劃分切片
: W# J, J6 I3 z9 {! x 下載 (49.48 KB)
2010-4-29 21:52
% H& h) m) [$ l" Y& j( m! \, m2 a. x8 B# d: c& }5 C" [5 V0 `E:隱藏自動(dòng)切片
+ M" ^4 I. L, O% }把不是用戶手動(dòng)切片的塊隱藏起來
c0 L- l* u C: K( K2 I! C. u5 G# w4 @* g! U: @5 s# @- g- h5 l- ^; z若某個(gè)切片塊我們不需要,單擊右鍵——?jiǎng)h除切片,或選中切片,delete清除
3 @# h9 F/ U, D, n. E! x# X. W! U! W3 O w! }
將圖片存儲(chǔ),命名為你想顯示在標(biāo)題欄的名字,如果做圖時(shí)已經(jīng)命名好此步可略- |3 L6 \0 \9 {& A( C4 _3 w0 Y% }+ x( {- o/ F& V. n1 d+ B4 d2 K0 _5 n. M& D% v( l將切片導(dǎo)成網(wǎng)頁效果; G+ d- |* Q- \1 a( X5 `" ?: x/ w4 T4 t j4 u7 @0 \& J對(duì)圖像進(jìn)行編輯(可直接右擊進(jìn)入編輯)
+ K4 a: H* E+ Z+ `5 w& R0 Q$ J" g 下載 (19.62 KB)
2010-4-29 21:52
# W8 H" o* M8 ?% ?/ t4 F, U' K& `, Q這個(gè)圖像名字命為PS_01 , 主頁鏈接到論壇,在新窗口中打開,這一項(xiàng)不填則表示在原窗口中打開,文本信息為“PS論壇吧 首頁”
( }" r1 W& _! K2 W6 k* v狀態(tài)欄顯示“PS論壇吧”,其它暫不作設(shè)置
c# w' e# ]# G2 k 下載 (41.05 KB)
2010-4-29 21:52
) \. |& ]8 D! _0 X& C0 D# ~/ ]) ^博客這個(gè)塊的圖像選無圖像,并輸入“我的博客”,其它暫不作設(shè)置
0 L8 a: s, g/ Z( A: u 下載 (38.16 KB)
2010-4-29 21:52
& N" L# {# V/ k7 r5 {& s: j8 U' p+ K- o" f) T9 ?生成的圖片信息在這里設(shè)置,設(shè)置好后_存儲(chǔ)
( d& @5 Y& s( h; L& ]) ? 下載 (24.47 KB)
2010-4-29 21:52
/ ^; q( X: | Y. E9 Z$ T& N! ]% F) ?# t 下載 (28.55 KB)
2010-4-29 21:52
2 ?$ R5 h6 d3 U g0 J1 m$ A0 Q) {9 V. {" L新建一個(gè)
文件夾,存儲(chǔ)
* s S3 T3 o) L% q8 M; n. g 下載 (40.94 KB)
2010-4-29 21:52
( B& Z' |7 v; }; b. b: r/ Q# q' l" l+ \7 u. o. c打開剛才新建的文件夾,里面生成如下文件
; M$ D9 _$ e& F4 E 下載 (18.37 KB)
2010-4-29 21:52
3 Y5 t4 M! e& D% g# c2 i; b$ C' C8 T3 e, C: F% m打開自動(dòng)生成的images文件夾,當(dāng)前切片生成圖像時(shí)和切片名字一樣
0 ], `* [2 y4 D$ ]: }6 U, d( X 下載 (58.65 KB)
2010-4-29 21:52
" f4 s2 i4 Z6 I) e* e$ o7 x$ D( l0 X' ?5 b1 [' m S* U5 P& D+ d; S6 R0 d; N打開生成的HTML文件,允許彈出,察看剛剛設(shè)置的地方,再點(diǎn)主頁,進(jìn)入論壇
: S* v9 `; d' \ 下載 (60.52 KB)
2010-4-29 21:52
+ N e! D) r1 p4 k- v! z% u e- m+ V; b: {! V" Y目標(biāo)URL為1,因此在新窗口中打開該鏈接
- \. t; T, z2 ~2 c/ ?5 Y 下載 (47.54 KB)
2010-4-29 22:49
! k @1 S8 j! O9 _- N6 k- O% x1 J3 w/ l" V) W' n6 i7 p4 _2 }自動(dòng)生成的imaegs文件夾不能移出PS文件夾,文件夾中自動(dòng)生成的任何文件都不能刪除或重命名,否則網(wǎng)頁會(huì)因?yàn)檎也坏较鄳?yīng)路徑而出現(xiàn)天窗,就是大紅X" H, _* R' n4 J2 L& j" X1 H
3 \' T: ~5 D c9 Z* W& P* _% @( k. s, ^" w* O# \+ _5 c實(shí)例:9 _1 R. W0 I+ v0 F' C8 s
下載 (12.24 KB)
2010-4-29 22:10
9 b& G7 e: Z, `: B$ y! S! S# B在IR中打開素材圖,然后點(diǎn)工具欄中的PS
圖標(biāo),轉(zhuǎn)入PS
/ l$ M/ s S3 F$ F2 _& x9 P 下載 (24.39 KB)
2010-4-29 22:10
, A' j4 l, ^! f$ C" Z4 E! N7 f7 z( v' q, l2 m7 N q- y% d選切片工具,視圖——標(biāo)尺 ,拉一根參考線,然后基于參考線切片
: S3 ^5 @, `5 d 下載 (36.72 KB)
2010-4-29 22:10
: N; [7 t+ m* K. z6 ~+ n% L$ J" P7 f; k! q; o( \) V4 a7 _再點(diǎn)工具欄的IR圖標(biāo),轉(zhuǎn)入IR
9 l* T$ d' B( y, W- J( P 下載 (24.91 KB)
2010-4-29 22:10
- u' ~8 P3 R6 i( b9 s* P1 K, T3 `/ j文件——將優(yōu)化結(jié)果存儲(chǔ)為Web所有
格式# y, D; R7 i# e. m" T% } 下載 (27.76 KB)
2010-4-29 22:10
+ | z( b0 K! z' D$ u& x3 ~' G' k5 K4 Q# m8 }* b找到存儲(chǔ)位置,自動(dòng)生成了一個(gè)images文件夾
9 p( p% K. ]2 M7 W8 g" O$ O5 s9 V# Z 下載 (1.95 KB)
2010-4-29 22:10
6 r* b3 N3 Z \, b2 t$ V9 z0 V9 d; u6 S8 K效果圖:
9 x: b6 O9 U2 D' R, I 下載 (10.73 KB)
2010-4-29 22:10
下載 (2.91 KB)
2010-4-29 22:10