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网页 

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

2、前端中的命名规范

3Css代码初始化

4、浏览器的兼容性

知识点:
Csshtml代码配合
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,textareapaddingmarginfont-family初始化。
2liulollist-style
3atext-decorationdisplay
4imgborderdisplay
5clearfloat{zoom:1;} 清除浮动
// 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题
3、写页面时注意规范:(可查看前端人员css命名规范)
1)开始页面进行div布局
最好都使用class控制页面元素,还有注意class的命名要规范
1、公共头部<div class="publice-header"></div>
2、导航
3、列表
4、版面
5、公共页脚                                                                            
-Id或者class等的命名,一般使用class进行标识
Id或者class等的命名的时候要注意规范,要有实在的意义,不要用拼音命名
-》对页面用div进行布局
-sublime text3快捷键
ctrl键可以选中5项然后空格一起更改classitem
li*5>atab键即可5项列表

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

1psd中获取网页所需素材
h 手抓图片。
1、选择,自动选择:图层。
2、选中图层后,右键选择:转换为智能对象。
3、框选要选择的那部分图。
4ctrl c    ctrl  n.
ctrl n是新建,会记住选择的宽度、高度等的信息。 Ctrl+v
5ctrl+alt+shift+s存储为png-24
1-2html页面结构整理
2、公共部分的开发
2-1、公共头部和尾部
3psd局部模式开发
3-1、主体部分介绍
3-2banner
3-3menu
3-4、主体pannel结构
3-5tab切换
3-6、图片库
知识点:
psd还原html要保证px为偶数,切图,作图区域及图片尽量用偶数
不能让内联元素和块级元素处于同一层次,所以a初始化displayblock。(块级元素)
public-container有高度所以要加浮动clearfloat
不常更新的图片,如网站的logo,可以作背景,而需要经常更换的图片,需要用img标签展示,像logo这样不常换的图片建议写在css中。
css中不建议对li命名样式的。
<a class="footer-tell" href="tel:718-749-1714">718-749-1714</a>
声明了属性 href="tel:718-749-1714",安装了网络电话可以直接点击打了
为避免窗口缩小时,背景图出现滚动条。
.index-banner-bg {
    overflow: hidden;  
}                             
  1. 当整个页面写好的时候,就检查浏览器兼容问题
  1. 需要进浏览器进行微调然后再源代码
  2. 用其他浏览器打开看有没不兼容的问题,然后再调试代码
展开阅读全文

没有更多推荐了,返回首页