当前位置:  主页 > 前端培训动态 > 前端开发切图_量字体大小_取颜色_量尺寸

前端开发切图_量字体大小_取颜色_量尺寸

发布日期:2019-10-03

国庆闲暇时间给大家出一套简单的前端切图教程,此教程中包含前端切图设计稿量尺寸设计稿量字体大小设计稿取色

1.准备好 前端设计图PSD文件

2.PS打开PSD文件

 

3.通过ctrl+1 把设计图调到100%的大小,通过按住空格键 来 配合鼠标拖动设计稿的位置

通过ctrl+0把设计稿调到正好放到PS窗口中来查看 设计稿的全部内容

 

4.找到切片工具 并选择这个工具

 

 

5.开始切图:通过切片工具 在要切的图片上 来画选一个蓝色的矩形框,这个表示要切这一张图片

上图表示要切四张图片

6.保存切好的图片步骤:

1】:点击文件----->存储为web所用格式...

2:点击存储---->选择所有用户切片----->保存

 

3】:最终的效果:

 

 

 

PSPNG透明图片:

1. 图层概念:在PS中 图层相当于一张白纸,我们所创造的 图像内容都在图层上,图层是会

叠加的 最上层的图层会把下层的图层给遮住

 

切透明图原理 就是把所有图层全部的隐藏掉 然后把要切那个图片的图层给显示:

 

然后在保存的时候 需要选择png格式

 

PS辅助切图的工具

1.标尺工具:ctrl+r 切换标尺显示与隐藏

2.参考线:鼠标点击标尺不放 向 窗口中拖动 就可以拖出参考线, 使用参考线 可以把要切的图片

围起来,然后再使用切片工具的时候 切片工具选框会自动对齐到参考线上,这样有助于切出来的图

更标准规范

 

 

PS取颜色

1.第一种取颜色方法

2.第二种取颜色方法

 

PS量尺寸

1.第一种量宽高尺寸

1】按住F8 就可以打开信息面板 里面可以看我们量的尺寸

2】通过矩形框来 量尺寸:

3】也可以通过标尺来测量

 

 

 

2.第二种量字体尺寸

 

1.先要配置ps

2】打开字符信息面板

3】测量字体大小


+相关文章推荐+