首页 > 代码库 > 一个切图仔的工作日常

一个切图仔的工作日常

2024-09-11 03:45:37   215人阅读

1.拿到公司设计师给的PSD图（PC端给的是1920px的设计稿，移动端给的750px的设计稿）。

2.自己新建一个项目目录（默认有css，js,images文件夹以及一个index.html文件）。

3.分析设计图，使用PS切图工具进行切图（分析哪些内容需要切成图片，设计稿的图标，可以向设计师要这些图标的SVG图，或者到http://www.iconfont.cn/阿里巴巴矢量图网站找相应的图标svg）。

4.切的图片需要透明的选择png-24格式，颜色多样且不需要透明的选择jpg品质60，切出来的全部图片在https://tinypng.com/网站上进行PNG和jpg的图片压缩。（PNG-8和PNG-24的区别，PNG-8适合颜色比较单一的图片如纯色，logo，图标相对图片大小比较小；PNG-24适合颜色比较丰富的图片相对图片大小比较大,现在几乎选用png-24）。

5.html文件

　PC端为主的响应式网站模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>网站标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="Keywords" content="网站关键字">
    <meta name="Description" content="网站描述">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/common.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css">
    <!--[if lt IE 9]>
        <script src="http://www.mamicode.com/js/vendor/html5shiv.js"></script>
        <script src="http://www.mamicode.com/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!--[if lt IE 9]>
<p class="browserupgrade">您的浏览器版本过旧，请到<a href="http://browsehappy.com/">这里</a>更新，以获得最佳的体验</p>
<![endif]-->
　　<!--网站主体内容-->
    <script type="text/javascript" src="http://www.mamicode.com/js/vendor/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/vendor/jquery.placeholder.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/vendor/fastclick.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/common.js"></script>
</body>

</html>

　移动端为主的模板(微信，支付宝)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=750">
    <script type="text/javascript" src="http://www.mamicode.com/js/vendor/mobile-util.min.js"></script>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/common.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css">
</head>

<body>
    <!-- 主体内容 -->
    <script src="http://www.mamicode.com/js/vendor/zepto.min.js"></script>
    <script src="http://www.mamicode.com/js/index.js"></script>
</body>

</html>

6.css文件（重置样式：normalize.css，公共样式：common.css，页面样式：index.css）

7.js文件（依赖js:vendor文件夹--jq，zepto,fastclick,mobile-util,jquery.placeholder,html5shiv,respond;公共js：common.js，页面js：index.js）

8.根据设计稿，

　　---书写html主体结构

　　---CSS书写（盒子模型，定位，flex布局，百分比，圆角，行高，背景图片）

　　---JS书写（jq插件使用，click，导航切换，show,hide,for,length,tap,find,addClass,removeClass,text,indexOf,parseFloat,split,hasClass,Number,toFixed）

9.完成所有html，css,js后，对css和js进行压缩。

10.项目打包交付给后端人员。

一个纯静态页面产出的切图仔（不涉及数据交互，不需要写ajax）

一个切图仔的工作日常


联系
我们