切图并转DIV+CSS你花了多长时间？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4457 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景：新闻站
页面：首页、列表页、内容页

小生刚接触HTML+CSS，不知道作为一个新手（老手），老总才感觉到工作效率高？

问2：切图有什么讲究和技巧？

切图

CSS

HTML

23 条回复 • 1970-01-01 08:00:00 +08:00

Sivan

2012-10-15 16:58:22 +08:00

不能只追求速度，将来还要维护啊亲。

smallcolor

2012-10-15 17:18:27 +08:00

推荐一个小步快跑的方式：
拿到设计稿，先把文件全部过一遍，然后写 HTML 和大致的框架，就可以先转给开发了；
稍后再补充 CSS/JS/images 给他们。

vison

2012-10-16 13:51:09 +08:00

是div+css，亲，楼上的技巧是必须的，我做了div+css两年多了，像你说的首页，列表页，内容页，如果是我切的话，半天之类搞定吧，你前期做不要太追求速度，不然后期维护会很麻烦的。
还有，我不知道你用ps里面的那个工具切图，我反正是用虚线框，目前我觉得是最快的。

luin

2012-10-16 14:09:29 +08:00

1. 举个例子， http://www.cntv.cn/index.shtml 这样的页面大概2个小时。但老总觉得快不快我不知道，质量才是最重要的啊。
2. 我常用Photoshop的(C)切图。

cisier

2012-10-16 14:41:43 +08:00

切图并转DIV+CSS工具有什么推荐的么！

xtrs

2012-10-16 15:58:02 +08:00

好的工具只有人脑+电脑，没啥好推荐的，只靠工具自动输出，图片和人性化命名会乱得一塌糊涂，给你一堆零乱的图片与CSS，累死。

Keinez

2012-10-17 04:53:42 +08:00

切图最快的办法是导出为智能对象然后保存。切片工具很废，半透明部分经常切不下来；眼拙少切几个像素设计师还会弄死你。

半个设计+半个重构路过。

liuyao729

2012-10-17 13:26:28 +08:00

多花点时间都OK 一定要和设计稿一样

hpyhacking

2012-10-17 22:51:04 +08:00

我的經驗是一個好的流程應該是開發人員根據設計稿，告訴設計人員應該怎麼切。

Air_Mu

2012-10-17 22:56:42 +08:00

我擦。。原来还有工具。。前几天我对着一张图做个网页摸黑硬用CSS写的，花了五个小时。。

PrideChung

2012-10-17 23:27:10 +08:00

无论你切多快，老总永远不会觉得你工作效率高，你一天切一个他就会希望你一天切两个，你一天切两个他就会希望你一天切四个，要不怎么剥削剩余价值。

Julyyq

2012-10-17 23:32:52 +08:00

@luin 那样一个页面你只需要2个小时？？？搞笑呢吧！~

Julyyq

2012-10-17 23:33:08 +08:00

@Air_Mu 你走弯路了啊

Air_Mu

2012-10-17 23:38:44 +08:00

@Julyyq 一般应该怎么做，用到什么工具呢

Julyyq

2012-10-17 23:43:55 +08:00

@Air_Mu 拿着设计稿，先把图片什么的都先扣出来呗。

chada

2012-10-18 00:02:30 +08:00

大致和 @smallcolor 同学说的那样，时间长短根据工作量大小不一样吧。

CMS这种类型基本在出原型的时候就可以开始写DIV+CSS，出设计图后相应的背景文本颜色等细节进行填充和调整。没有原型直接出设计图的，拿到图后先写基本框架，然后再根据需要的地方进行加工。

这楼上好像没有同学提到用Firework切图？我记得 @sofish 写过一篇切图大法，可以到他博客找找。我用Photoshop的C，只切我需要的部分。

sofish

2012-10-18 00:04:19 +08:00

@chada 理论上不是我写的。现在一般都是设置师帮我们切好，做成 sprite 图 - -～

chada

2012-10-18 00:10:53 +08:00

@sofish 是有印象你有提过，且用Firework切图。我之前带的项目也是让设计师输出给前端同学，这样省不少时间。

westoy

2012-10-18 00:37:47 +08:00

切图还是前端自己弄比较好，尤其在设计师没有前端经验的情况下

bombless

2012-10-18 00:53:05 +08:00

切图用PS的那个自动切块。。生成TABLE的
然后再自己在编辑器换成div的
有时候比较简单的那种块的话直接批量替换，剩下不少功夫。。

ajason

2013-03-08 16:08:11 +08:00

@Keinez 说的对啊，直接转化为智能对象多快啊……

Keinez

2013-03-09 08:03:48 +08:00

@ajason 但是这对设计师有不低的理解元素的要求而不仅仅是把图形堆叠在一起。
那些不写代码的设计师他们基本是把矢量图形堆砌起来，而不是运用图层特效来添加效果，所以自然只能用切片……我自己做转成智能对象比切片快无数倍。

p2hcn

2013-09-30 10:05:08 +08:00

所谓的网页切图就是将psd格式的设计稿通过div/css/jquery技术制作成html的网页格式的过程，并且兼容ie6,ie7,ie8,firefox,chrome主流浏览器，所以又叫psd转html，可切网络始于05年，p2h.cn旗下网站，拥有300多客户建立至今，超过1000多个项目。是最早的网页切图服务商，要切图找可切 http://qietu.keqie.com