做网页如何用ps切图(前端Zero系列PS切图-切图步骤)

哪些是需要切出来的呢?!一般分为两类:

  • 内容性的(一般用在img标签)

Banner、广告图片、文章中的配图(若服务器中的数据,可以不切图,只占位);

通常存为jpg格式(颜色比较丰富,当然会做些压缩,保证图片不要太大)。

  • 修饰性的(一般用在background属性)

图标、logo、特殊效果按钮等、非纯色的背景;

一般存为PNG24(IE6不支持半透明,需兼容)、PNG8,二者都支持全透明;但PNG24支持半透明,PNG8不支持。


切图步骤

(1)隐藏文字只留背景(若文字上有特殊效果,无法用代码写出,则把文字和背景一起切出)

  • 若文字为独立图层,则隐藏文字(使用移动工具找到文字图层,去掉眼睛)
  • 文字和背景合并,平铺背景覆盖文字

[ 适应于背景可以拉伸平铺 ] 矩形选框工具 自由变换Ctrl T,拉伸背景覆盖文字,回车或双击。

[ 背景有纹理,不可以拉伸 ] 矩形选框工具在背景上画一个小框,移动工具 Alt来复制当前图层,一次次按下方向键

或用鼠标移动(鼠标移动时,按住shift可保证图层按直线移动)。

(2)移动工具选中所需图层(ctrl 点击图层的矩形区域),出现蚂蚁线

(3)合并图层< ctrl e >(可选) // 勾选自动选择,然后将需要的多个图层合并

(4)复制图层< ctrl c > -- 新建文件< ctrl n >,点击确定 -- 粘贴图层< ctrl v >


应用:如何开始切图

(1)去掉所有文字,只留背景

青岛中新(83837777.com)

(2)保存图片

将去掉文字的图片保存起来。一般情况下内容性图片保存为jpg格式,图标类型的保存为png格式。

做网页如何用ps切图(前端Zero系列PS切图-切图步骤)(1)

青岛中新(83837777.com)

(3)构思页面的具体表现

划分页面的结构,具体的实现方式。

(4)一边编写HTML代码,一边测量、取色

根据构思号的页面结构,开始编写HTML代码,并开始进行测量和取色。


做网页如何用ps切图(前端Zero系列PS切图-切图步骤)(2)

青岛中新(83837777.com)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页