ps切图基础（慕课网切图篇学习）

一、PS切图基础

1、  PS界面设置

1) 新建设置：

Ctr+N（新建快捷键）

预设选定web或自定义，宽1920，高2000像素，背景透明，分辨率72像素/英寸，RGB颜色 8位。

在设置好参数后可以点击存储为预设，以后需要使用直接打开就行了。

2) 移动工具设置：介绍移动工具针对网站前端的设置属性及其快捷键操作。

V（移动工具快捷键）

在PSD中选图层：

1、按ctrl+你点击图中需要的图层，在图层面板中鼠标就会跳到那个图层。记得选中图层而不是选择组。

2、改各个标尺像素。打开视图的显示的只能参考线，标尺Ctrl+R，打开窗口的信息和字符。Ctrl+鼠标左键（你需要的图层），不用选自动选择，图层面板的光标就会跳至你需要的那个图层中，就可自由移动，然后显示一切信息和想要的字符。信息面板，改为RGB颜色，像素，打开文档尺寸。

3)  视图设置：介绍针对前端在视图方面的设置以及设置中的技巧

需要在视图中打开标尺（ctrl+R）和智能参考线（M）。

不需要的面板可以关闭，只打开图层，信息，字符，历史记录。这四大面板。

4)           

5)        在设置好信息面板中的参数之后，会显示图片的信息，如鼠标所在的位置，RGB的值，文档的大小以及分辨率之类的信息。

利用这个定位的功能，对解决前端的绝对定位和固定定位有一定的帮助。

还可以显示选区的大小

 

6)        打开编辑的首选项的单位和标尺，把单位都改为像素。

7)        

8)        最后，打开窗口，工作区，新建工作区，叫web切图。下面框快捷键都可以打勾选。

防止在做的过程中不小心把工作区复位为基本功能，只要再次点击你刚刚工作中所保存的工作区，就可再次回到刚才工作的页面，不会有多余或者少工作面板。

2、  PS基本操作

1)        简单工具操作：介绍PS最基本的工具操作及其技巧

1、第一行是菜单栏，第二行是属性栏。

2、选区工具（M），按住shift键和鼠标左键，变成正方形或圆形。要先放鼠标左键，再放shift键。同时按住shift+Alt键，能以圆心化圆，同理是矩形的中点。按shift键，可以添加选区；按Alt键，可以减掉选区。M键是选区快捷键，按住shift键，再按住M键，可以在选区轮流切换。

3、矩形选框工具四个操作：1新选区，2添加到选区（可同时选中两个选区，选中区域交叉部分自动合并），3从选区中减去－与操作2相反，选中区域从原区域中减去，4与选区交叉－为当前选中区域增加区域

4、选择图层：ctrl+鼠标左键

选区：

1）画正方形、画圆形：shift+鼠标左键拖动

2）画固定圆心的圆：alt+shift+鼠标左键拖动

3）增加选区：shift

4）减去选区：alt

5）删除选区：ctrl+d

6）在工具的扩展中轮流切换：shift+工具的快捷键

放大：ctrl++;

缩小：ctrl+-;

可拖动：space；

快速选择工具：

缩小：[

放大：]

裁剪对应图层，点击Alt并点击图层前面的眼睛（其他图层隐藏只保留这个图层，导出png）

移动（V）、选择（M）、套索（L）、魔棒（W）

alt键+眼睛，只显示当前图层

alt+钢笔，alt可以调整曲线弧度，移动曲线方向（使得选中的路径为自己想要的图案）

H+鼠标左键：缩小，查找,放大局部

2)        图层的原理及操作：介绍PS中图层的基本原理以及结合工具的操作技巧

画五环

1：alt椭圆形选框工具

2：背景色填充：shift+delete

前景色填充：alt+delete

3：右键-变换选区

4：shift+alt+鼠标左键变换选区

5：delet删除中间区域

6：如果圆不合适，ctrl+t变换裁剪图形大小。shift键缩小图形

7：复制图层，移动功能中，alt键拖动图层，可以快速建立第二个圆

8：为了方便可以给每个图层命名

9：快速选择当前图层图形选区，  选择图层-ctrl-图层缩略图单击

10：重复以上步骤

11：ctrl键选中所有图层，拖动全部图案，设置居中

12：选择蓝色，ctrl单击蓝色图层

13：选区工具，在选择黄色图层，alt键选中不需要删除部分，delet删除

 

3)        参考线及其辅助：介绍如何灵活运用参考线做辅助操作

设置默认参考线

视图-新建参考线-默认单位像素或者ctrl+r--标尺当中拖动参考线即可

删除参考线--鼠标拖动即可

横向变竖向参考线快捷键 alt

alt快捷键识别菜单栏，然后再按相应快捷键的字母调出相应的菜单栏 

新建参考线的快捷键：

alt+v+e+v可以快速新建垂直参考线

alt+v+e+h可以快速新建垂直参考线

参考线隐藏ctrl+； ,重新打开ctrl+；

3、  PS传统切图

传统切图

1,切片工具：灰色代表被动切片，蓝色代表主动切片

2,使用参考线切图

3,先使用裁剪工具---再使用参考线切图

4,切图完毕，导出步骤 文件---存储为web所用格式（快捷键：alt+shift+ctrl+s）

5,存储格式png-24

存储为WEB所需格式（快捷键：alt+shift+ctrl+s），预设PNG_24

4、  PS精准切图

1)

单击文件-脚本-将图层导出到文件

文件类型：png-24

透明区域，交错，裁剪图层勾选

注意：比如说要做一个gif动画，如果是ps导出，半透明效果出不来，我们用ps导出一个一个png序列帧，由于命名是很顺的，我们可以在脚本当中引入堆栈，那是非常炫的一个功能.

如果做网页设计把每个图层命名使用网页中合法的命名，就可以不需要导出后再调整名称。

 

2)

1.编辑——首选项—— 增效工具——勾上 启用生成器

2.文件--生成--图像资源

3.直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ，自动导出或删除图片，此方法可替代手工切图

4.200%xx @2x.jpg

5.保存到svg，可获取前端代码。

6.抽出资源，可抽出图层

4.直接在图层上单击右键，选择复制css,可复制图层的css样式代码！

复制css：选择-图层-复制成css样式（非智能对象），可用于自己制作的图片或文字

1.编辑——首选项ctrl+k——勾选启动生成器

2.文件——生成——勾选图像资源【文件夹.assets】

3.文件命名--200%文件名space@/文件名8（尺寸/大小）

4.图层--复制CSS   sublime text2【这个技能不错】

5.图层管理

二、Ps切图将psd转化成一个html网页 

1、Sublime text3 快捷键以及插件的使用

2、前端中的命名规范

3、Css代码初始化

4、浏览器的兼容性

知识点：

Css和html代码配合

Css命名和html标签结构应用

如何用好Photoshop去审视一个设计稿

浏览器兼容性

1、拿到psd之后进行操作的步骤：

1-1、样式和初始化

1、拿到一个psd时

首先对psd进行审视  ：

头部 、尾部 、公共区域 、logo 、（页面的一些元素）、列表

2、 样式文件和初始化

1)新建项目

2)新建首页index.html同时创建文件夹:CSS 、images 、js

3)写页面之前先在CSS中创建三种样式:重置样式reset.css/公共样式common.css/独立样式index.css

3)写页面之前先在CSS中创建三种样式:重置样式reset.css/公共样式common.css/独立样式index.css

重置样式reset.css:

Html的许多标签，网页对他定义有默认样式，通过reset.css文件对一些样式初始化，如margin，padding问题或者a标签的下划线以及等等

公共样式common.css:

一系列页面共用     

独立样式index.css:

在reset.css中可以进行以下初始化：

1.body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,input,fore,a,p,textarea的padding、margin、font-family初始化。

2、li、ul、ol的list-style。

3、a的text-decoration、display

4、img的border、display

5、clearfloat{zoom:1;} 清除浮动

// 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题

3、写页面时注意规范：（可查看前端人员css命名规范）

1)开始页面进行div布局

最好都使用class控制页面元素，还有注意class的命名要规范

1、公共头部

2、导航

3、列表

4、版面

5、公共页脚                                                                            

-》Id或者class等的命名，一般使用class进行标识

Id或者class等的命名的时候要注意规范，要有实在的意义，不要用拼音命名

-》对页面用div进行布局

-》sublime text3快捷键

按ctrl键可以选中5项然后空格一起更改class为item

li*5>a按tab键即可5项列表

5、开始写div内部内容，并在psd中截取素材

1）psd中获取网页所需素材

h 手抓图片。

1、选择，自动选择：图层。

2、选中图层后，右键选择：转换为智能对象。

3、框选要选择的那部分图。

4、ctrl c    、ctrl  n.

ctrl n是新建，会记住选择的宽度、高度等的信息。 Ctrl+v

5、ctrl+alt+shift+s存储为png-24。

1-2、html页面结构整理

2、公共部分的开发

2-1、公共头部和尾部

3、psd局部模式开发

3-1、主体部分介绍

3-2、banner

3-3、menu

3-4、主体pannel结构

3-5、tab切换

3-6、图片库

知识点：

psd还原html要保证px为偶数，切图，作图区域及图片尽量用偶数

不能让内联元素和块级元素处于同一层次，所以a初始化display：block。（块级元素）

public-container有高度所以要加浮动clearfloat

不常更新的图片，如网站的logo，可以作背景，而需要经常更换的图片，需要用img标签展示，像logo这样不常换的图片建议写在css中。

css中不建议对li命名样式的。

718-749-1714

声明了属性 href="tel:718-749-1714",安装了网络电话可以直接点击打了

为避免窗口缩小时，背景图出现滚动条。

.index-banner-bg {

    overflow: hidden;  

}                             

1. 当整个页面写好的时候，就检查浏览器兼容问题

1. 需要进浏览器进行微调然后再源代码
2. 用其他浏览器打开看有没不兼容的问题，然后再调试代码