怎么查无线网密码:【第三十课】ps切片工具详解及其运用 - PS新手学堂

ps新手学堂所有教程专辑索引

切片是做什么的？许多网页为了追求好的视觉效果，常常采用较大幅图来做布局，但浏览器在加载图片时速度往往会及其慢，。那么，采用切片将可以解决这一点，将大图切成若干个小图，提高浏览速度。用切片,我们还可以在PS中做出网页的某个部分,为后面DW中的操作打基础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) ~切片工具：就是用来对图片进行切片，其主要用途划出每个切片块的大小,规划总体切片的布局
7 l7 V8 L, e- ~( u% j- }9 `" E0 h+ J
切片选取工具：用来编辑切片块，对切出的每个小块进行设置! 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.状态栏中 样式分为正常、固定长宽比、固定大小$ Z5 o8 X4 w+ Q; l  T
下载 (12.71 KB)
2010-4-29 21:525 u4 [# e% o/ g! R
7 U+ y0 {6 ^6 m/ r0 m* |
3.当前样式为正常时，宽度、高度都是暗的，这个时候切片的大小是自定的，无限制
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! T
4.当前样式为固定长宽比时， 这个时候切片块的宽和高成 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 o
5.固定大小后，切片的大小是不变的，我们只需要在图片的某个坐标点上按住鼠标左键轻轻拖动一下，固定大小的切片就会自动出现
: 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 j

9 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.状态栏中“基于参考线切片”这一项一直是暗的，为咐？画布中没有参考线，视图——标尺（ctrl+R），按住鼠标，在画布边的标尺上拖一下拉参考线，参考线拉多了怎么办？选择移动工具，鼠标停在参考线上，按住左键，拖回标尺上# 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
左键单击选中，对切片块可以进行拉大缩小操作，按住鼠标左键，可移动切片位置
; o8 C; Q" J5 m; t% G 下载 (56.56 KB)
2010-4-29 21:52
' {$ B6 `* @- M' K/ |' }) D* M9 U! K' ]& D
状态栏的属性为：切片块的层次顺序、切片选项、提升到用户切片、划分切片、隐藏自动切片
: ~, 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:切片选项
9 s# W# |6 g7 f7 \# j; F) a这一项是对切片块进行细致的设置,切片类型分为图像和无图像8 K3 _$ Y( |8 I
下载 (25.92 KB)
2010-4-29 21:523 _2 i# D9 c( K2 u, g5 O* ]9 b+ N
1 Z! D$ @: a% y( d
图像，表示这个切片块为原图，就是显示这个切片块原来的图像
' g; R  ~. h( w. D+ U0 O7 t; o名称：这个块的名字
) w; G7 v! C8 K/ U  W. p. t2 \URL：单击这个块时它所链接的网址
; ^* d" F3 N/ Z; M+ x  U2 l: j2 S5 k目标：表示是在原窗口打开链接，还是在新窗口中打开链接7 E5 ^: l5 e3 v2 }: C& ?
信息文本：鼠标移到这个块时浏览器左下角显示的内容
0 h7 ~. v7 Y+ O8 _; _Alt标记：图片的属性标记，鼠标移到这个块时显示在鼠标旁的文本信息，当图片不能正常显示时可告诉浏览者这个图片的信息
( y7 D+ s+ r+ e5 E尺寸:设置块的x，y轴坐标，W,H块的精确大小，这个用于需要设置十分精确的切片块/ k' }: J: ~& V/ g4 T# @, K1 o' P
切片背景类型:切片块的背景信息设置+ l1 D1 S$ `% w% U0 O

* a9 F0 C# b; I7 W无图像,显示的不是切片块的原图，若不设置方本或背景色就是空白7 N1 s' H, `& U1 O" M% Y. {: @
下载 (21.96 KB)
2010-4-29 21:52
2 _, Z; }7 h0 L' v5 m
8 S5 r- K& O' J/ c! U. m, h显示在单元格中的文本:显示在这个块的文本信息; M0 i5 t7 u3 {3 x/ P$ b
; y% y' F" n/ s- {9 c7 _; E5 l: l
尺寸:设置块的x，y轴坐标，W,H块的精确大小，这个用于需要设置十分精确的切片块
6 h  H5 z' S  a4 r7 X2 C9 Z+ E3 B" [' K! t; X1 g
切片背景类型:切片块的背景信息设置
0 K, A) m! z+ l2 R, w' W3 D
: x& B# N( w' v8 t: e% t& G# _1 ~  K. u) J6 j
C：提升到用户切片  ?; f5 r* r, ~) s, W1 n
图片中暗的切片块是我们切片时自动生成的，左键单击选中，单击“提升到用户切片”可以让它变亮，变成用户切片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" F

4 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:隐藏自动切片
+ M" ^4 I. L, O% }把不是用户手动切片的块隐藏起来  c0 L- l* u  C: K( K2 I! C
. u5 G# w4 @* g! U
: @5 s# @- g- h5 l- ^; z
若某个切片块我们不需要，单击右键——删除切片，或选中切片，delete清除
3 @# h9 F/ U, D, n. E! x# X. W! U! W3 O  w! }
将图片存储，命名为你想显示在标题栏的名字，如果做图时已经命名好此步可略
- |3 L6 \0 \9 {& A( C4 _3 w0 Y% }+ x( {- o/ F& V. n

1 d+ B4 d2 K0 _5 n. M& D% v( l将切片导成网页效果; G+ d- |* Q- \1 a( X5 `" ?: x/ w

4 T4 t  j4 u7 @0 \& J对图像进行编辑(可直接右击进入编辑)+ K4 a: H* E+ Z+ `5 w& R0 Q$ J" g
下载 (19.62 KB)
2010-4-29 21:52
# W8 H" o* M8 ?% ?/ t
4 F, U' K& `, Q这个图像名字命为PS_01 , 主页链接到论坛，在新窗口中打开，这一项不填则表示在原窗口中打开，文本信息为“PS论坛吧 首页”( }" r1 W& _! K2 W6 k* v
状态栏显示“PS论坛吧”，其它暂不作设置
  c# w' e# ]# G2 k 下载 (41.05 KB)
2010-4-29 21:52
) \. |& ]8 D! _
0 X& C0 D# ~/ ]) ^博客这个块的图像选无图像，并输入“我的博客”，其它暂不作设置
0 L8 a: s, g/ Z( A: u 下载 (38.16 KB)
2010-4-29 21:52& N" L# {# V/ k7 r
5 {& s: j8 U' p+ K- o" f) T9 ?
生成的图片信息在这里设置,设置好后_存储( 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
新建一个文件夹，存储
* 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
打开自动生成的images文件夹,当前切片生成图像时和切片名字一样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文件,允许弹出,察看刚刚设置的地方,再点主页，进入论坛
: 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
目标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 }
自动生成的imaegs文件夹不能移出PS文件夹，文件夹中自动生成的任何文件都不能删除或重命名，否则网页会因为找不到相应路径而出现天窗，就是大红X" H, _* R' n4 J2 L& j" X1 H
3 \' T: ~5 D  c9 Z* W
& P* _% @( k. s, ^

" w* O# \+ _5 c实例: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中打开素材图，然后点工具栏中的PS图标，转入PS/ l$ M/ s  S3 F$ F2 _& x9 P
下载 (24.39 KB)
2010-4-29 22:10, A' j4 l, ^! f$ C" Z
4 E! N7 f7 z( v' q, l2 m7 N  q- y% d
选切片工具，视图——标尺 ，拉一根参考线，然后基于参考线切片: 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 _再点工具栏的IR图标，转入IR9 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
文件——将优化结果存储为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
找到存储位置，自动生成了一个images文件夹9 p( p% K. ]2 M7 W8 g" O$ O5 s9 V# Z
下载 (1.95 KB)
2010-4-29 22:106 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
1 z1 P! i; N4 l- P" w4 m 下载 (2.91 KB)
2010-4-29 22:10