前端工程师技能之photoshop巧用系列第二篇——测量篇
前端工程师使用photoshop进行的大量工作实际上是测量。本文是photoshop巧用系列第二篇——测量篇
测量信息
在网页制作中需要使用photoshop测量的信息分为两类，分别是尺寸信息和颜色信息
【1】尺寸信息
尺寸信息主要通过矩形选框工具配合信息面板进行测量，共包括以下项目：
1、宽度、高度
2、内边距、外边距
3、边框
4、定位
5、文字大小
6、行高
7、背景图位置
[注意]测量时，画布放得尽可能大，这样结果才相对更准确
【2】颜色信息
颜色信息主要通过取色器来进行测量，共包括以下项目：
1、边框色
2、背景色
3、文字色
实战
接下来，通过几个实际测量来详细说明使用photoshop测量的要点
【测量图片宽高】
1、测量普通图片宽高
先用矩形选框工具选择一个大的区域，然后再按住alt键，减去多余的部分
|
|
|
2、测量超过1屏的大区域的宽高
先用矩形选框工具在最左边画一个小矩形，按住shift键，在最右边画一个小矩形，信息面板上的宽度信息就是要测量的该区域的宽度信息
|
|
|
|
|
|
【测量文字大小、行高及文字颜色】
1、当文字是单独图层
通过选项面板上的几个面板可以分别得到文字大小、行高及文字颜色信息
|
|
|
[注意]若文字颜色面板选出的颜色与显示的颜色不相符时，可能是因为文字颜色被加入了其他效果的处理，这种情况还是需要吸管工具来吸取颜色
|
|
|
2、当文字已经合并在图层中时，则情况较复杂些
a、字体大小
对于不同字体的文字，字体大小可能是不一样的。一般选择一行中最大的文字进行测量，结果相对较准
[注意]文字右方或下方有时会有1像素的间隙
b、行高
行高的测量实际是一行的测量，从第一行的下面到第二行的下面
c、字体颜色的获取
用吸管工具吸取时要注意，文字放大后有很多锯齿，要吸取颜色较实的部分
|
|
|
|
|
|
【量字母、数字、符号大小】
敲一个字母对比来看。然后将行高和字体大小设置成一致，看字母和上下到底空几格，然后再设置行高
|
|
|
|
|
|
|
|
【设置加粗】
设置加粗后，字母会多一个像素，但仍然按照原来的字体大小计算。加粗之后，原来1个像素的竖线变成2个像素
|
|
|
【确定颜色】
1、确定纯色
当肉眼无法确定一个区域是不是一个纯色时，可以用取色工具帮助。打开取色工具，按住鼠标不松开并移动，当取到的颜色值有变化时就不是纯色
|
|
|
2、确定线性渐变
先用移动工具选择图层，再用魔棒工具点击，若出现的都是横向的长条，则为纵向颜色变化的线性渐变
|
|
|
|
注意事项
【1】量图的时候量到的内容区的宽度，如果有padding，要减去padding的值
【2】当字体类型为字体时，空格为文字大小的一半
【3】中文字符的标点占一个字符的大小，英文字符的标点占半个字符的大小
【4】1个像素的冒号点是宋体英文状态，4个像素的冒号点可能是宋体中文、微软雅黑的中英文
【5】如果两个字符挨得太近，甚至发生重叠，很有可能是letter-spacing为负数
【6】若拉参考线精度不高时，先拉出参考线，鼠标不要松，然后按住ctrl键，可以让参考线以0.1px移动
前端工程师技能之photoshop巧用系列第二篇——测量篇相关推荐
- 前端工程师技能之photoshop巧用系列第一篇——准备篇
前面的话 photoshop是前端工程师无法回避的一个软件,这个软件本身很强大,但我们仅仅需要通过这个工具来完成基本的切图工作即可.本文将开始photoshop巧用系列的第一篇--准备篇 作用 我们为 ...
- php 自动切图,前端工程师技能之photoshop巧用系列扩展篇自动切图
× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...
- 前端工程师技能之photoshop巧用系列扩展篇——自动切图
前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 ...
- 从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- java职业发展路线图_从程序员到CTO的Java技术路线图 JAVA职业规划 JAVA职业发展路线图 系统后台框架图、前端工程师技能图 B2C电子商务基础系统架构解析...
http://zz563143188.iteye.com/blog/1877266在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样 ...
- 高性能网站建设指南---前端工程师技能精髓
题记:无意间在公司图书馆看到这本书,感觉内容写得很不错,很细很有条理.虽然自己并非前端工程师,然而也需要对此有所了解,供以后在架构设计.系统优化时考虑这些因素,特在此将对该书进行摘录,供不时之需.也希 ...
- 前端工程师使用adobe XD软件下载切图和测量距离的方法
在之前公司做前端时,基本都是直接跟蓝湖打交道,UI设计师会将设计好的PS文件,通过蓝湖提供的切图插件进行标记,然后整体画板上传到蓝湖项目中,然后前端通过蓝湖进行查看下载切图和测量间距等,而且蓝湖会自动 ...
- web前端工程师技能总结
编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015) 浏览器: 1 firefox 建议 ...
- 读书笔记《高性能网站建设指南：前端工程师技能精髓》
只有10-20%的最终用户响应时间花在了下载HTML文档上.其余的80-90%时间花在了下载页面中的所有组件上. 规则1.减少HTTP请求 图片地图:将多个图片合并成一个,而后通过css定位显示不同的 ...
最新文章
- [cocos2d-x]图层的旋转缩放效果
- 小工具查看MYSQL数据文件块和类型
- linux locate 用目录,Linux 命令（文件和目录管理 - locate）
- oracle11g imp性能,怎么最快地把本机的oracle11g数据导入xe
- 深入解析Java字节码和字节码操作类库ASM源码解析
- 一些有用的javascript实例分析(二)
- 2021信服云创新峰会：托管云成上云第三种选择
- 实现自适应位置--footer紧贴浏览器底部
- python数值计算速度_提高python数值计算速度
- 解决java:找不到符号办法
- C什么k什么_K线基础——什么是MACD？
- 全球2%高智商天才必测脑力题！却只有1%的人，能在5分钟内全部做对！
- vc6.0中的dsp,dsw,ncb,opt,clw,plg,aps等文件的简单说明
- java如何为图片加水印
- Android图片加载优化方案
- 饱和蒸汽比容计算、 温压补偿系数计算
- 关于SCO Unix 串口通讯
- python爬楼梯问题_用Python解决经典的爬楼梯问题
- 阿里前端工程师面试题+解题思路
- 视频教程-【CVPR2018】3D Pose Estimation and 3D Model Retriev-强化学习