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

CSS学习系列文章目录

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

一、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进行存储，能使得所切图片更好的还原出真实的透明度和色彩。

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

总结

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