舟客 / ps新手学堂教程 / 【第三十课】ps切片工具详解及其运用 - PS...

分享

   

【第三十课】ps切片工具详解及其运用 - PS新手学堂

2011-01-18  舟客

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 01.jpg


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 I
2.状态栏中 样式分为正常、固定长宽比、固定大小$ Z5 o8 X4 w+ Q; l  T
02.jpg
5 u4 [# e% o/ g! R
7 U+ y0 {6 ^6 m/ r0 m* |
3.当前样式为正常时,宽度、高度都是暗的,这个时候切片的大小是自定的,无限制
5 Z, ]3 Y+ N( u2 i- C 03.jpg
: ~! |- ]( O5 X$ A7 Y% O/ J

" ^# ?4 v/ P+ ^ 01.jpg
: ?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$ ~ 04.jpg
/ N6 [7 U* j: r& `
6 X$ R* a% J8 ]- [4 O1 ?
02.jpg

5 |6 j5 u. k6 U3 _  q4 _) U+ `' W& m3 d2 I9 o
5.固定大小后,切片的大小是不变的,我们只需要在图片的某个坐标点上按住鼠标左键轻轻拖动一下,固定大小的切片就会自动出现
: F: C+ \2 T3 I3 Y,不要放开左键,将完成的切片拖到你要切的地方
# _+ _1 B6 b+ [ 05.jpg
! ?3 k" [4 h# N* Y( a: k+ `# R6 j

9 A2 m$ m4 h2 D2 N" |5 p 03.jpg

# \+ 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* ~# ] 06.jpg
% S" T* S+ Y: R7 D7 W
) M" |, x/ ?4 J/ K/ A* w
07.jpg

$ r" T; k4 R  G$ e' D
# v6 V- W, t/ c" g9 g 08.jpg

: 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 09.jpg

' {$ B6 `* @- M' K/ |' }) D* M9 U! K' ]& D
状态栏的属性为:切片块的层次顺序、切片选项、提升到用户切片、划分切片、隐藏自动切片
: ~, n3 L* s! R+ i  Q: J$ V 10.jpg
. 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
11.jpg
3 _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. {: @
12.jpg

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- }
13.jpg

/ 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 14.jpg

% 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
15.jpg

# 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 16.jpg

) \. |& ]8 D! _
0 X& C0 D# ~/ ]) ^博客这个块的图像选无图像,并输入“我的博客”,其它暂不作设置
0 L8 a: s, g/ Z( A: u 17.jpg
& N" L# {# V/ k7 r
5 {& s: j8 U' p+ K- o" f) T9 ?
生成的图片信息在这里设置,设置好后_存储( d& @5 Y& s( h; L& ]) ?
18.jpg
/ ^; q( X: |  Y. E9 Z

$ T& N! ]% F) ?# t 19.jpg

2 ?$ R5 h6 d3 U  g0 J1 m$ A0 Q) {9 V. {" L
新建一个文件夹,存储
* s  S3 T3 o) L% q8 M; n. g 21.jpg

( B& Z' |7 v; }; b. b: r/ Q# q' l" l+ \7 u. o. c
打开刚才新建的文件夹,里面生成如下文件
; M$ D9 _$ e& F4 E 22.jpg

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
24.jpg
" 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' \ 23.jpg
+ N  e! D) r1 p4 k- v! z% u
  e- m+ V; b: {! V" Y
目标URL为1,因此在新窗口中打开该链接- \. t; T, z2 ~2 c/ ?5 Y
300.jpg

! 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
1241k31j510-6094g.gif

9 b& G7 e: Z, `: B$ y! S! S# B在IR中打开素材图,然后点工具栏中的PS图标,转入PS/ l$ M/ s  S3 F$ F2 _& x9 P
250.jpg
, A' j4 l, ^! f$ C" Z
4 E! N7 f7 z( v' q, l2 m7 N  q- y% d
选切片工具,视图——标尺 ,拉一根参考线,然后基于参考线切片: S3 ^5 @, `5 d
260.jpg
: 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
270.jpg

- u' ~8 P3 R6 i( b9 s* P1 K, T3 `/ j
文件——将优化结果存储为Web所有格式# y, D; R7 i# e. m" T% }
280.jpg
下载 (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
290.jpg
6 r* b3 N3 Z  \, b2 t
$ V9 z0 V9 d; u6 S8 K
效果图:9 x: b6 O9 U2 D' R, I
1241k31j510-6094g_01.gif

1 z1 P! i; N4 l- P" w4 m 1241k31j510-6094g_02.gif

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>