2020-07-16-----web前端开发中用到的PS基础操作（PS取色、PS测量、PS切片）
web前端开发中用到的PS基础操作
（PS取色、PS测量、PS切片）
- PS的几个区域
（1）菜单栏
（2）工具栏
（3）内容区
（4）面板，调出信息面板的快捷键是F8或者FN+F8； - PS的几个工具
（1）移动工具
（2）矩形选框，用来测量容器大小，文字大小，如果不是矩形工具，右击可以选择矩形；
（3）切片工具，用来切去页面中的相关图片素材，如果不是切片工具，右击可以选择切片工具；
（4）色板，用来吸取颜色值的。
一、PS取色
用【色板】。打开一张图片，点【色板】，就会出来拾色器，然后光标变成一个小吸管，在要取色的地方点一下，拾色器的右下角就会出现吸取的颜色值，直接复制粘贴到代码里即可。
二、PS测量
- 测量容器的width和height。
用【矩形选框工具】。打开一张图片，点【矩形选框工具】，一般图片都比较小，直接量会量不准确，最好先把图片放大，放大图片的快捷键是Alt+鼠标滚轮，放大图片之后，如果想看图片的其它地方，则按住空格键，这时光标会变成小手，然后拖动图片，就可以拖动图片，观看图片的其它地方。用矩形选框选中要测量的地方之后，右侧的信息面板就会出现相应的宽高。单位可以改为px，单击【视图】，接着选择【标尺】，这是界面的上方和左方就会出现尺子，右击尺子，选择单位为【像素】，这样右侧信息面板中的width和height的单位就是px。
如果选择矩形选框，选中测量的地方后，矩形选框变为圆角矩形，这时测量的width和height是不对的。你看编辑栏的【羽化】，要把羽化值改为0，再去测量，这时即矩形选框就是矩形的了，不是圆角矩形。羽化：0是直角，数值越大角越大。
- 测量文字的大小
直接测量文字的height值就行，测量出来的height值就是font-size的值。
三、PS切片
- 在【裁剪工具】右击选择【切片工具】，切取所需要的图片就可以了，这个操作也最好放大操作，这样切取的图片更完整一点。切取完所需的图片后，点文件，选择【存储为web所用格式】，如果没有这个选择的话，选择【导出】，再选择【存储为web所用格式】。
- 选择存储为web所用格式之后，会弹出一个框【存储为web和设备所用格式】，然后这个框里的图片看起来是朦胧的，感觉不清晰，这时需要用鼠标画虚线框，点击左上角一直拖动到右下角，松开鼠标会发现图片变清晰了。然后选择所需的图片格式，最后单击【存储】。
- 保存的时候，在【切片】后面的选框选择【所有用户切片】，然后单击保存。保存下来就是所需要的图片，并且这些图片会都放在一个images文件夹里。
4.保存完之后，PS里面的图片里面会有很多切片和参考线，在【视图】里面选择【清除切片】、【清除参考线】即可。
2020-07-16-----web前端开发中用到的PS基础操作（PS取色、PS测量、PS切片）相关推荐
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- 2020年武汉Web前端开发前景怎么样？就业薪资如何？
在过去的2019年,Web前端行业发展势头火热,无论是市场需求还是从业人员薪资,都在不断的增加.那么,2020年武汉Web前端开发前景怎么样?就业薪资如何?下面,我就给大家预测一下. 1.Web前端人 ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
- Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (模拟试题第三套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第三套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第四套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第二套) 附答案
由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git 请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢 ...
- web前端开发（三）—JavaScript基础
目录 一.JS简介 二.JS变量 三.JS数据类型(弱类型) 四.字符串常用方法 五.数组常用方法 六.条件判断 七.循环语句 八.函数 九.浏览器对象 一.JS简介 JavaScript 是属于网络 ...
最新文章
- sersync+rsync数据同步
- CSS设置按钮式超链接
- 熟读《阿里巴巴java开发手册》（五、 MySQL 数据库）
- postman可以测试websocket吗_小海塔罗娱乐测试2021年可以脱单吗？
- 一号团队-团队任务3:每日立会（2018-12-01）
- leetcode - 55. 跳跃游戏
- 神经网络识别车牌字符
- CUDA、MPI和SU混编，MakeFile文件的编写
- canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
- 51Nod-1002 数塔取数问题【DP】
- CentOS Samba服务器的搭建与配置（share共享模式）
- 译: 6. 任务调度(定时执行任务)
- CentOS安装postgresql9.1
- java重置radiobutton的选项_动态添加试题选项按钮 radioButton(一)
- TensorFlow中tf.ConfigProto()配置Sesion运算方式
- 浅谈Android选项卡（二）
- 读 疯狂的程序员 有感
- Qt模仿360系统托盘
- 【JS】JavaScript的事件驱动和处理
- AWS免费服务器申请