您的位置:首页 > Web前端

在前端开发中Photoshop切片的基本用法

2019-10-26 14:53 1241 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_44049725/article/details/102756651

PS中切片需要的工具、材料、步骤

一、工具:
先给自己的电脑安装一个photoshop的软件,网上一般来说都会有很多的下载资源,可以任意选择,每个版本的使用方式基本是没有什么太大的不同。重点是要学会什么使用它。
二、材料
所谓的材料无非就是需要切片的图片,什么格式的都行,但是最好是psd格式的,这样有利益切出来的图片更好用于开发之中。
三、步骤
1、首先了解ps界面的功能介绍:

2、切片需要用到的这个辅助工具,要在ps的菜单栏中找到“视图”,然后打开里面的“标尺”,也可以用快捷键Ctrl+R;打开标尺之后,在工作区的上方以及左侧都出现了带数据的标尺,当鼠标在标尺上右击会有一些选项,可以选择像素、厘米、英寸、毫米等。如图:
3、打开标尺的作用是为了添加辅助线,当指针滑到标尺上按住鼠标左键不动,接着向需要辅助线的位置拖动即可,如下图:
4、接下来就是要将被辅助线围起来的这块区域切片出来,这个时候就需要用到工具栏中的切片工具,打开方式如图:

5、选中切片工具之后用指针在被辅助线围住的这块区域从左上角向右下角按住鼠标左键不动进行拖动,直到将整个需要切片的部位选中,接着松开鼠标,此时已经完成切片,切记:如果是需要切出透明的图片,那就要将图层的背景色关闭;然后接着就是将切好的图片导出,方法:找到菜单栏中 文件—>导出—> :这个地方看个人,如果是用于web前端开发的图片就直接选择‘存储为web所用格式’即可(快捷键:Alt+ Shift+Ctrl+S),其他用途就选择其他方法;如下图:

6、接着就是配置一下你所需要导出图片的格式,以及路径之类的,完成之后点存储,修改图片名称就可以了:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: