ps手机版的ps中切片工具怎么使用是怎么使用的

来源：蜘蛛抓取(WebSpider) 时间：2017-02-12 03:04 标签： ps切片工具的使用
怎么用photoshop工具来把图片做成切片效果
对于做网站的人来说，如果一个图片在网页上的图片太大的话，加载的时候就会显示的很慢，尤其是网速慢的时候，有时甚至都显示不出来，那怎么办呢，这个时间很多网站都会把图片做成切片来在网页中显示出来，做成切片的话，每个图片就会很小的，这样的加载网页的时间速度也就快多了！
其实做切片的软件也有很多，我一般做切片用的都是photoshop自带的imageready来做的，这个工具还是不错的，做切片也很方便，以前给公司做大图片的时候经常用到，接下我就来说说如何用photoshop来做切片吧！一起来看看吧！
第一步，先用photoshop打开你要做成切片的图片，如下图，然后在工具栏上选择&在Imageready中编辑&
第二步：在imageready中选择&切片&-&新建切片组&
第三步：然后会出现类似小刀形状，然后在图片上进行切割就可以了，如下图
最后把图片存为html格式的就可以，选择&文件&-&将优化结果存储为&，然后选择保存为html格式就可以了
点击查看更多
(本文来源) /a/jishuyingyong/621.html你的位置：////教你体验Photoshop切片工具保存等分图片技巧
教你体验Photoshop切片工具保存等分图片技巧
扫描二维码随身看资讯
1. 在手机上细细品读~
2. 分享给您的微信好友或朋友圈~
有些朋友喜欢在photoshop中设计好版面再切片刀网页中，这里就要用到切片工具，对于不同的网页模板，对在Photoshop中切片的图片也很讲究，嗟下来，第九软件小编与你一起来体验保存等分图片。
Photoshop切片工具保存的图片，不但可以是等分的，通过保存的方式不同，还可以在不影响图片质量外，节省图片大小的空间。，使之在网页中显示图片的速度加快！！
一起来学习吧，Go &&
如图，打开已经设计好的客服图片
选择【切片选择工具】，右键客服图片，选择【划分切片】，这里我们选择垂直切分为4分，按确定，如图：
可以看到已经平均划分为4等分
接下来是，保存的关键咯，继续加油！
点击【文件&&存储web格式】，如图设置，弹出的对话框按确定，一切完成咯！
回去我们保存的文件夹，查看成果吧！这里我们发现有2个文件，图片就在&imags&文件夹中咯，我们的等分图片就在这咯，我们就用这图片上传到网页模板上即可。
Adobe Photoshop下载：
软件名称：Adobe Photoshop CS5简体中文绿色版
大小：125.35MB版本：CS5简体中文绿色版类别：设计软件
语言：中文使用平台：Win_xp/Win7/Win8/Ubuntu
标签聚合：
相关教程资讯
相关专题推荐
客官，请随便说两句
本栏浏览排行榜
装机热门软件推荐ps切片工具怎么用
来源：不详
作者：顾盼神飞
最近很多人问到切片时为什么会切出分隔符，要不要管它，怎样切才不会出现分隔符，于是特意去各种百度了一下，有的人说分隔符是其骨架，当你切复杂了就会出现，无法避免，有的说是因为切片没对齐没切好才产生的，然后我去实验了一下，得出结论：就是你门丫没切好嘛。。。。
长话短说，简单介绍一下切片要注意的地方和技巧，再分享几个切片的方法和与其相关的代码问题。
看到没，简单粗暴的切片神器
1先在你要切的地方拉好参考线
2切换到&切片工具&
3毫不客气的点击它一下
切好了，有木有，有的同学会问，其中有的我不想切开呀，怎么办？
切换到&切片选择工具&选中你要的合并的切片，选择组合切片
想怎么合就怎么合，切出来的就是没有分隔符
然后选择存储为WEB格式，高版本的ps在这没有全选功能了，但可以缩小后拉框选中全部，此时再看一眼格式是不是你想要的，jpg格式品质60差不多就可以了，牌一个画质好，体积又小的临界点
接着，你可能会遇到以下问题：
问：我图片大，要切的很多呀，这要是一个一个点选去组合，那不是要了亲命嘛！
答：对于切片太多的问题，由于ps的切片选择工具不能框选，那我们可以将其存为psd格式，然后用AdobelmageReady 打开
底版本ps有一键转移功能，大致在这个位置 切好后再转回ps保存为WEB格式（注imageready只能保存为GIF格式）
问：我图片复杂的要命呀，有的已经变态到无法下手的地步了-,-
答：针对于这种变态的布局，我们的方法是：。。。。。用热点。
问：我图片又大又用热点影响加载速度呀喂！！
答：规矩的，简单的，切几刀，然后再加热点。。。
问：我不会这些基础代码呀，怎么办？
然后，分享几个高级刀法：
嵌套刀法：适用于而已看似无规律实则有规律自己惶恐规律
如瀑布流，发现竖向是统一的，横向错开了，那我们可以先不管横向，先把竖向切成六大块，保存为HTML格式，再横向分六次依次把图片切开，然后将此次切开的TABLE标签里的内容放入第一次竖向切好的对应TR标签里，用这种嵌套的方法可以化繁为简而且绝对不会出现扰人的分隔符。
随意落刀法：适合有个别图片相互错开但整体不太乱的布局
不必被图片的边框拘泥，我们只是要把图片切开以便上链接，那一刀下去不小心把另一张图片给切了一点也无妨，只要不太影响另一张图片的点击即可，如果那张图片压根就不用上链接的话，那就肆无忌惮的切切切吧
管你三七二十一刀法：适合乱到没节操，节操粉碎性骨折永久性脱落的布局
太乱了就没必要切了，加热点吧，如果图片太大就切几刀规则的把它切小点再DW里添加热点。
最后，再分享一个贯穿全文的小技巧
在做一些不是太大的图片的时候，我们可以不需要把图片切开，例如做淘宝带导航的店招时，很多同学会把导航每个分类都切一下，然后再用表格或者DIV框起来。
这种方法切的小图整体加起来的体积其实是大于切丰一起的体积的，而且如果在加载的过程中有一张图片破了，那将会影响整体布局，客户体验度将大打折扣
所以我们的方法是将图片在ps里画好切片后，选中所有切片框，右键点击：编辑切片选项。
切片类型选择：无图像
然后在文本中敲上几个空格，务必做这一步否则将出现分隔符
然后我们选择保存为HTML格式，选择图像和HTML的话也只产生一个HTML文件，然后把这个HTML文件用DW打开，你将得到一个没有图片的表格框架，如下图
接着我们给这个TABLE加一张背景图片，就是我们刚刚没有切开的那张图片
最后在设计模式里鼠标占先中对应要添加链接的那个框框，然后到代码模式，鼠标就选中了其相对代码所在的位置，接着把链接地址复制进去就行了。
大家如果仔细观察就会发现，很多大型网站就是用这种方法做的，将一些零散的小图片放在同一张图片里，再用CSS定位显示，可以提高页面的加载速度，提高客户体验，如下图
以不变应万变，找到最适合自己的方法，往往能事半功倍。全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。
打开ps，跟着教程做一遍，做完的图要到这里交作业：
教程有看不懂的地方，可以到论坛发帖提问：
加官方微信，随时随地，想学就能学：ps_bbs，或扫右侧二维码！
关注我们微博：
想学更多的同学，可以订阅我们邮件，每天都有新教程发给你：
看完教程希望大家来这
欢迎投稿原创或转载教程，发表教程除了能跟大家分享交流外，还能加深记忆，也是学习中重要的一环，有兴趣的同学，马上登录投稿中心，发表你的教程吧： 欢迎新手发表入门教程与大家分享交流学习经验，对教程制作的效果有更好方法或完善教程步骤，也可以发表交流。
旧一篇： 新一篇：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
您好、我想切垂直15、水平13。为啥不行啊哈？是不是ps切片最多能切100块？
正为这个问题烦恼，必须顶一下！
[给力]终于找到了，好好学学
[给力]谢谢分享。。
免责声明：除本站原创外，本站文章均收集整理自网络，其版权归该教程原作者或原出处所有！本站转载文章均保留了原出处及作者，如出现资料错误或侵权，请联系修正或删除：photoshop的切片工具怎么使用_入门教程
photoshop的切片工具怎么使用
学习啦【入门教程】 编辑：国柱
　　切片工具在photoshop中就是用来切图的，因为很多图片需要切图再给开发使用。其实这个也不算太难，下面就让小编告诉你photoshop的切片工具怎么使用的方法，一起学习吧。
　　photoshop的切片工具使用的方法
　　打开PS软件，把图片拖入PS中菜单栏--视图&标尺，快捷键Ctrl+R把鼠标放到标尺上，按住鼠标左键拖拽，生成参考线，使用参考线把图片分开，如图：
　　划好参考线线后工具切换到切片工具，如图
　　然后查看工具对应的属性栏，点击上面的基于参考线的切片，如图
　　点击基于参考线的切片之后，会发现图片被切割成了八张图片，如图
　　文件&储存为web所用格式&jpeg文件，如图
　　注意要保存html和图片，切片选择所有切片，点击保存，PS阶段完毕。
　　PS完成切片后，保存桌面会自动生成一个image文件夹，该文件夹盛放的就是分隔开的图片，及时上传到图片空间里。
　　PS完成切片后，查看桌面会保存一个html文件，右击，使用Dreamweaver或者记事本打开。如图
　　打开后，复制里面body之间的内容，如图框选区域，并在后台首页新建一个自定义内容区，选择标题不显示，源码模式，插入该段代码。
　　插入完代码就完事儿了吗?还没有，会发现根本没有图片，图片全部是裂开状态，原因是因为该段代码所引用的是本地图片地址的链接。回到可视化编辑窗口，双击裂开的图片，挨个替换这八张图片，完成操作后预览效
　　这里面有三点需要注意：图片链接复制图片空间中的链接、链向地址复制该宝贝详情页链接、在新窗口打开一定要勾选
看了&photoshop的切片工具怎么使用&的人还看了：
本文已影响 人
[photoshop的切片工具怎么使用]相关的文章
看过本文的人还看了
757人看了觉得好
917人看了觉得好
685人看了觉得好
【入门教程】图文推荐
下一篇：没有了

我要回帖

更多关于 ps切片工具的使用 的文章

 

随机推荐