1. 首页
  2. 基础教程

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

在1-6节中,主要介绍了photoshop 裁剪工具以及photoshop cs6新增的透视裁剪工具的使用方法及技巧。细心的朋友会发现,在裁剪工具箱下,还有两个工具即切片工具、切片选择工具还未介绍,那么本节就介绍一下这两个工具的使用方法,快捷键为【C】。

接触网页设计的朋友其实就了解,切片工具可以把图片切成若干小图片,故多用于web网页图像文件切片,以提高网页图片打开速度。这个工具在网页设计中运用比较广泛,可以把做好的页面效果图,按照自己的需求切成小块,并可直接输出网页格式,非常实用。

接下来以三人行PS学堂首页头部的切片为例展示切片工具以及切片选择工具的使用方法。

首先打开需要进行切片的图片,然后长按裁剪工具,在弹出的菜单中选择“切片工具”:

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

接着根据切片需要,就像使用矩形选框工具一样,在图片上拖动切片工具,连续地按需要切成一块一块,如图,会分割成一小块一小块有序号的图片:

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

而切片选择工具的作用就是在将图片进行切片处理后,能够很准确地选出被分割的小块内容,直接点击其中某小块的区域则会显示被选中的状态,即边缘会变成褐色,选中后可以更方便地进行编辑操作,如将光标放在被选中对象的边缘则会出现可以拉动的图标,此时可以通过这个图标改变该区域的大小,如图:

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

拉动后可以仔细查看图片的改变,不只是区域变化了,会多出一块切片来,序号为3,整体切片数目也从14变成15了,如图:

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

切片完成后,选择【文件】>【存储为web所用格式】,根据弹出来的界面,可以设置保存图片的格式,图像大小等信息,设置好后,选择存储即可,如图:

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

点击存储后,可以在弹出来的保存对话框中选择格式,网页设计中一般选择HTML和图像格式,点击保存后则会生成一个html文件及一个图片文件夹,双击html文件则可以看到图片已经成功转化成网页了。


1-11 photoshop基础教程-切片工具以及切片选择工具的使用

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

1-11 photoshop基础教程-切片工具以及切片选择工具的使用

如有疑问可通过新浪微博@三人行PS学堂网 参与互动或直接在下方留言。欢迎通过网站提供的微信、QQ群、新浪微博加入三人行PS学堂参与交流!

原创文章,作者:铁木珍,如若转载,请注明出处:https://www.ren3.cn/3263.htm

发表评论

电子邮件地址不会被公开。

评论列表(4条)

  • 老婆欺负
    老婆欺负 2013年6月1日 上午9:27

    很实用,谢谢指导 😉

  • 麦兜
    麦兜 2013年10月30日 上午9:10

    感觉看的不是很懂 😥

  • aikuimail
    aikuimail 2015年3月29日 下午9:35

    您好,感谢您的无私分享,请问这里面的教学素材在哪里可以下载,谢谢

联系我们

181-7282-8533

在线咨询:点击这里给我发消息

邮件:154526627@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code