您还未开通 “高级会员” “VIP” 服务

? 提问题 + 写文章

[交流] PS切片(选择)工具介绍与网页切图应用实操 ...

作者:小七   发表于 2017-06-14 18:35   查看:1839  
裁剪工具里面第三个选项是“切片工具”,这个工具是非常重要的,特别是网页设计的时候,可以用来对设计好的原始效果图进行分解,按照自己的需求切成多个小图片,并可以对切出来的小图片分别进行编辑,同时可以直接输出网页格式,“切片工具”对单页面网页设计是非常实用的,下面我们通过一个案例来加深对切片工具的理解。) F0 D% V, `5 _  q0 |3 v* p; o1 n/ ?! [; Q2 L
. ?6 H& `+ s" s: ~% ?7 d. }( _! `; }( `
这一节我们的演示素材还是会议的背景墙,跟上一节的“透视裁剪工具”的素材用的是同一个,这一节我们对素材进行分解,把素材当做一个效果图,把会议标题“第十六届国际科技博览会”当做Logo并配上超链接,一共切成5个小块,并输出网页格式,制作成一个单页面的网页。
搜外七街 www.SEOwhy7.com ; N9 n* W$ J, |; U( e; ~, h- I. l9 U/ e& M/ S0 C8 z3 J, q3 N7 B) j
第一步:选择“裁剪工具”里面的第三个选项“切片工具”。" _) d+ p/ E2 _% d& P2 o1 w9 u6 b( @+ B$ R* s- Y. G4 C+ ~
4 X3 \) t/ T6 x4 v2 o! x+ g# {3 i% L3 d& \5 J# h! I$ ^% s" }, {, O7 ~5 w2 }+ ]* T
' c3 @! K5 f# C* ?! F; M% s' T2 Z4 t% L$ X# U/ A3 N1 n3 J/ N
4 G( v" r  {, P* _( P+ f. n, ?: D# q! s4 m5 w3 }# Y3 o/ Q: @1 q2 L4 G
第二步:打开素材,鼠标左键按照需求画出5个选区,也就是切成5个小块。$ v. S* U1 n# r, W6 _% e% N% ^8 _0 y( H/ @& ?) e
6 V  S- B6 f. _/ a1 l" |& N8 U) i0 E7 K" Q! r4 K. T" Z! x  \/ A4 U
9 x4 S8 W5 u; N# ?# k/ e8 B4 z3 W3 e5 y8 |4 p" T7 M( ]: F6 r9 v. |
# h9 \- k: M) r0 q# ~9 N1 ^4 K8 t$ r( V3 g1 c. E! j. p, n7 s% p4 }( t3 `
第三步:对第三个切片(编号为03)双击进行属性编辑,选中“裁剪工具”里面的第四项“切片选择工具”,给指定的切片增加超链接等属性,被编辑的切片边框是橙色的,未被编辑的切片是蓝色的。7 c( ^4 A) s  G8 l, {5 Y, U. c$ D; O& a/ f1 t- [, `6 I  u  b
; F" P2 f6 C& K( R% b0 E* L/ A0 b1 t( D
' Y4 B4 t, J. `* R9 d  J1 t8 ]/ Y
5 l+ y6 j0 s) H$ c) O0 ^. K/ s, R- ~; f5 o# J6 O3 c5 D/ l+ W, k5 \3 X, d8 W/ E
$ Z/ [' n3 {5 ~( L6 B2 {* Y  M
& J  P  Q, |# y, Q* Z7 F$ }  }9 M* n$ l: n; Y# y8 F( C9 f7 d
第四步:保存格式选择“HTML和图像”,就可以看到刚才切片的效果,图片单独在一个文件夹,html是另外一个文件,双击打开可以在浏览器看到网页版的效果图。" `7 @/ B6 x. K! k9 i: \' W+ @& s  u2 G
3 I$ V; d9 t+ D4 j9 t1 ~
( g0 b: i; U" {( W& R, V) q' [7 b9 p6 f  N
, v& A# y: {6 o: t7 D7 g% Q
: Q/ S3 c+ v' p5 @, f& H# n% T" S  n3 _, B
, T( J- ^6 M: s  Y/ D2 \. m" b+ U( X& k: o' O& O
" e9 F, Q9 `2 {" J. S$ Y  {( t- _
; @) p0 v( O% ?2 r+ H) e1 W1 U; Q7 @
7 ?0 N# q$ p4 l. _. H& H- b; _+ x8 v, L4 K3 p- B* m9 H5 C+ w" x; x
$ m3 h6 W5 s) s6 T, z8 Y% I7 f/ y4 y: m7 [) `- {& ^
0 W& N7 u- O- b9 `3 c3 ~+ s: k* |9 D# j1 b7 u3 Q0 n4 K
通过查看源代码,我们可以看到刚才输出的静态html代码部分,如果要对页面进行修饰,改变相应的标签样式css即可实现,css在另外一个教程有介绍,这里就不重复了。
搜外七街 www.seowhy7.com   C- W/ i( Z7 r* e5 _2 f: p, u; C7 `4 F8 ]+ i3 F1 S! L/ p
' Q: @+ _6 y8 N2 E4 p- c+ G1 J% X1 `( Y4 ~. O- n1 n) ~7 U3 B% B% V) G# R1 c3 V! J7 L2 P

搜外七街 www.seowhy7.com
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 16 条优质的评论 ,登录后才可以查询更多优质的评论
  • 肖大胖学seo Lv.3 SEO池畔闲人 发表于 2017-06-15 11:44
    不管是收录还是外链,都应该遵循一个原则,那就是围绕着用户去展开,只有用户信任你的站你才能够获得更好的发展。

    评论 使用道具 举报

  • 落痕思 Lv.3 SEO池畔闲人 发表于 2017-06-16 09:30
    选中“裁剪工具”里面的第四项“切片选择工具”,给指定的切片增加超链接等属性,被编辑的切片边框是橙色的,未被编辑的切片是蓝色的。

    评论 使用道具 举报

您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
快速回复 返回顶部 返回列表