欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

PS切图-基本思路

 

Photoshop是前端工程师无法回避的一个软件,软件本身十分的强大,但我们仅仅需要通过其来完成基本的切图工作即可。

一个完整的项目流程是市场进行需求分析,产品做出项目原型,UI根据项目原型出设计图,前端根据设计图制作页面,后端进行数据相关工作,网站经过测试后上线。

1. 什么是切图?

从UI设计稿中切出网页素材

设计稿(.pdf文件)— 素材切出 —— 产出物(如 .jpg .png文件)

2.为什么切图?

给网页提供图片素材;有时候网页中一些比较漂亮的效果没办法用代码实现(或难以兼容),

then,可以通过引入图片资源的方法来实现这些效果。如:

HTML:img <img src="images/avatar.jpg" alt="头像" />

CSS:background .icon{background-image:url(../images/sprite.png);background-position:0 0;}

3.如何切图?

使用PS工具,使用背景图,图片合并方案,浏览器兼容

PS切图的基本思路:

(1)工具、面板、视图

(2)测量、取色

(3)切图

(4)保存

(5)修改、维护

(6)图片优化与合并

PS切图-基本思路

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50542.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-25 15:50 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。