当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 荐 2020-07-16-----web前端开发中用到的PS基础操作（PS取色、PS测量、PS切片）

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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

（PS取色、PS测量、PS切片）

  1. PS的几个区域
    （1）菜单栏
    （2）工具栏
    （3）内容区
    （4）面板，调出信息面板的快捷键是F8或者FN+F8；
  2. PS的几个工具
    （1）移动工具
    （2）矩形选框，用来测量容器大小，文字大小，如果不是矩形工具，右击可以选择矩形；
    （3）切片工具，用来切去页面中的相关图片素材，如果不是切片工具，右击可以选择切片工具；
    （4）色板，用来吸取颜色值的。
    在这里插入图片描述

一、PS取色

用【色板】。打开一张图片，点【色板】，就会出来拾色器，然后光标变成一个小吸管，在要取色的地方点一下，拾色器的右下角就会出现吸取的颜色值，直接复制粘贴到代码里即可。
在这里插入图片描述

二、PS测量

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

三、PS切片

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网