CSS学习系列文章目录

HTML和CSS学习笔记——day01
HTML、CSS学习笔记——day02
css4.2.4参考手册.zip(免费下载)

文章目录

CSS学习系列文章目录
一、PS测量图片和取色
- 1.打开标尺，测量图片像素大小
- 2.对颜色进行取色
- 3.使用总结
二、通过PS进行切图
- 步骤图解
总结

一、PS测量图片和取色

在前端开发中，我们基本都需要用到PS(photoshop)去完成页面的大部分美工效果，比如图片的像素大小、对小icons的切图等等内容，所以学好ps也是十分重要的呢！
以下演示的PS版本为CS6，在实际操作中按照自己的版本来，有些工具可能会有一些出入。

1.打开标尺，测量图片像素大小

快捷键：CTRL+ R
在PS的操作：①点击上方视图菜单栏+②选择标尺

值得一提的是，在打开标尺后默认的单位是厘米(cm)，这个时候就需要你手动去调节单位了，因为我们在网页开发中用的单位是像素单位。点击鼠标右键，即可找到像素单位的选择。(点击四周有尺度的也可以)

2.对颜色进行取色

步骤图解：

3.使用总结

①步骤总结：

②工具总结：

二、通过PS进行切图

步骤图解

提示：素材可以去站长在线这个网站查询素材
①导入PSD格式的图片，点击文件菜单栏中的打开，导入psd文件

②点击窗口，选择我们经常需要使用到的工具

③点击小箭头，切换成图层，一定要勾上自动选择这个勾勾，以便于我们快速定位到图层的位置。

④切换成切片工具

⑤在图片中点击鼠标左键即可新建切片，因为我新建了4个切片区，所以就会有4个切片区。

⑥对切片不满意，可以点击窗口菜单栏，选择清除所有的切片，也可以把鼠标移动到你选择的切片中，右键选择删除切片。

⑦导出图片，这里和原先的版本不一样，不能快速导入图片。首先点击文件菜单栏，选择存储为Web所用格式。

使用建议如下：
1.大图片对色彩还原度要求不高的可采用jpg格式进行存储；
2.小图标，如：logo，Icon 等可使用 gif png8 两种格式进行存储；
3.存在透明度设置，渐变的图标使用png24进行存储，能使得所切图片更好的还原出真实的透明度和色彩。

⑧完成切图，可以在你预设的路径中查找到图片

总结

一天一个小细节，加油冲鸭！
本文中的建议参考自：前端切图过程中所切图片保存格式的选择

CSS学习笔记-—学会用PS切图和取色—day03(基本用法)相关推荐

CSS学习笔记之PS切图 3.1
1.1 常见的图片格式 1.jpg图像格式:对色彩的信息保留较好 2.gif图像格式:常用于一些图片小动画效果 3.png图像格式:结合了GIF和JPEG的优点,保持透明背景 4.PSD图像格式:Ph ...
web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
CSS学习笔记7PS切图与仿学成在线例子
PS切图常见的图片格式 jpg,产品类的图片经常使用 gif,实际经常用于一些图片小动画效果 png,如果想要切成背景透明的图片,请选择png格式 PSD,可以直接从上面复制文字,获得图片,还可以测 ...
【学习笔记】前端开发调试工具与PS切图技巧
[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理 ...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
清除浮动学习和利用PS切图练习
昨天完全不知道哪里写错代码,找了很久的问题!!还练习了很久的浮动布局常见网页布局与网页一样宽无需写宽度只要是通栏的盒子(和浏览器一样) 不需要指定宽度浮动布局的注意点 1.浮动和标准流的父盒 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...

CSS学习笔记-—学会用PS切图和取色—day03(基本用法)