ui切图技巧 (ui切图工具设计教程)

步骤

①用photoshop打开自己的PSD,本次演示切割样图的对号按钮。

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

②下面为大家介绍一下在photoshop中主要用到的工具

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图 这个工具是切刀,是我们要切割图片的工具

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图  这个是选择工具,主要功能是选择图层用的,选择自己要切的图层和要隐藏掉的图层。

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图看到这个图片,就知道是用来放大缩小用的,用于精细化切割。

③隐藏掉不需要的图层。

1.去掉灰色背景

首先鼠标点击我们的选择工具,然后再灰色背景上点击一下。点击后,在photoshop界面的右端就会自动高亮选择你点及的图层(如图),然后,点击左边眼睛图标(图中红色圈住的),就把灰色背景图给隐藏掉了。

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

2.按照步骤1把不需要的图层都隐藏掉。如图

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

3.用放大工具把图调到合适(自己看着舒服就行),然后点击切刀工具,把要切的图圈住(如图),然后复制(windodws下ctrl + c,Mac 下面Cammand + c)。圈的大点也无所谓,在复制的时候ps会自动计算你圈图片的宽高。

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

4,点击 文件--》新建,然后点击确定。

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

5.在我们新建的图层上,把我们刚刚复制的图层粘贴上去。如图:

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

6.点击文件--》存储,把文件格式选择为自己需要的名字、格式和文件存放路径,然后点击确定。确定

ui教程02学习ui设计的正确姿势,ps做ui界面怎么切图

结束语:

更多文章可以添加我的个人微信:WorksYang