欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)

程序员文章站 2022-06-28 19:03:45
web前端开发中用到的PS基础操作PS的几个区域(1)菜单栏(2)工具栏(3)内容区(4)面板,调出信息面板的快捷键是F8或者FN+F8;PS的几个工具(1)移动工具(2)矩形选框,用来测量容器大小,文字大小,如果不是矩形工具,右击可以选择矩形;(3)切片工具,用来切去页面中的相关图片素材,如果不是切片工具,右击可以选择切片工具;(4)色板,用来吸取颜色值的。一、PS取色用【色板】。打开一张图片,点【色板】,就会出来拾色器,然后光标变成一个小吸管,在要取色的地方点一下,拾色器的...

web前端开发中用到的PS基础操作

(PS取色、PS测量、PS切片)

  1. PS的几个区域
    (1)菜单栏
    (2)工具栏
    (3)内容区
    (4)面板,调出信息面板的快捷键是F8或者FN+F8;
  2. PS的几个工具
    (1)移动工具
    (2)矩形选框,用来测量容器大小,文字大小,如果不是矩形工具,右击可以选择矩形;
    (3)切片工具,用来切去页面中的相关图片素材,如果不是切片工具,右击可以选择切片工具;
    (4)色板,用来吸取颜色值的。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)

一、PS取色

用【色板】。打开一张图片,点【色板】,就会出来拾色器,然后光标变成一个小吸管,在要取色的地方点一下,拾色器的右下角就会出现吸取的颜色值,直接复制粘贴到代码里即可。
荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)

二、PS测量

  1. 测量容器的width和height。
    用【矩形选框工具】。打开一张图片,点【矩形选框工具】,一般图片都比较小,直接量会量不准确,最好先把图片放大,放大图片的快捷键是Alt+鼠标滚轮,放大图片之后,如果想看图片的其它地方,则按住空格键,这时光标会变成小手,然后拖动图片,就可以拖动图片,观看图片的其它地方。用矩形选框选中要测量的地方之后,右侧的信息面板就会出现相应的宽高。单位可以改为px,单击【视图】,接着选择【标尺】,这是界面的上方和左方就会出现尺子,右击尺子,选择单位为【像素】,这样右侧信息面板中的width和height的单位就是px。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
    如果选择矩形选框,选中测量的地方后,矩形选框变为圆角矩形,这时测量的width和height是不对的。你看编辑栏的【羽化】,要把羽化值改为0,再去测量,这时即矩形选框就是矩形的了,不是圆角矩形。羽化:0是直角,数值越大角越大。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
  2. 测量文字的大小
    直接测量文字的height值就行,测量出来的height值就是font-size的值。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)

三、PS切片

  1. 在【裁剪工具】右击选择【切片工具】,切取所需要的图片就可以了,这个操作也最好放大操作,这样切取的图片更完整一点。切取完所需的图片后,点文件,选择【存储为web所用格式】,如果没有这个选择的话,选择【导出】,再选择【存储为web所用格式】。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
  2. 选择存储为web所用格式之后,会弹出一个框【存储为web和设备所用格式】,然后这个框里的图片看起来是朦胧的,感觉不清晰,这时需要用鼠标画虚线框,点击左上角一直拖动到右下角,松开鼠标会发现图片变清晰了。然后选择所需的图片格式,最后单击【存储】。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
  3. 保存的时候,在【切片】后面的选框选择【所有用户切片】,然后单击保存。保存下来就是所需要的图片,并且这些图片会都放在一个images文件夹里。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)
    4.保存完之后,PS里面的图片里面会有很多切片和参考线,在【视图】里面选择【清除切片】、【清除参考线】即可。
    荐
                                                        2020-07-16-----web前端开发中用到的PS基础操作(PS取色、PS测量、PS切片)

本文地址:https://blog.csdn.net/qq_45021462/article/details/107378475