收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 29511|回复: 32

[求助] 如何切图

[复制链接]
发表于 2009-11-5 13:14:05 | 显示全部楼层 |阅读模式
不知道发在这里合适不?若不合适!麻烦超斑帮转移下。
假若美工给你一张PSD图,让你将其排成DIV+CSS形式,这个切图应该怎么来操作。
将图用fireworks打开后,不知道该怎么下手,高手帮分析下  怎么来操作或有多么规律。比如说是不是按图层来切图。。。
或提供下相关资料看看   十分感谢。
发表于 2009-11-5 13:22:11 | 显示全部楼层
不是按图层来切,是按照整个页面的模块来切图的,是你觉得你应该把你的页面分成几个模块,你可以先粗糙的切出大的模块来,然后用div+css写出大框架,然后看是否和美工给你的设计图相似,然后再开始每个模块的细切,这可能速度比较慢,但是对于初学者挺好的。
回复 支持 反对

使用道具 举报

发表于 2009-11-5 13:59:23 | 显示全部楼层
其实切图本身与div+css是无关的。

切图只是将结构框架切出来,按网站界面PSD的不同需求,切成一小块一小块;
div+css则是将这切出来的一小图片,重新定位,重新组装成。。
回复 支持 反对

使用道具 举报

发表于 2009-11-5 14:40:51 | 显示全部楼层
原帖由 [i]ayan2006 于 2009-11-5 13:59 发表
其实切图本身与div+css是无关的。

切图只是将结构框架切出来,按网站界面PSD的不同需求,切成一小块一小块;
div+css则是将这切出来的一小图片,重新定位,重新组装成。。

楼上说得很正确
回复 支持 反对

使用道具 举报

发表于 2009-11-5 14:42:24 | 显示全部楼层
原帖由 [i]yangxiu 于 2009-11-5 14:40 发表

楼上说得很正确

按照psd效果图,该切成图片的就切出来,文字部分就不用
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-5 14:55:28 | 显示全部楼层
谢谢各位的回答
我会慢慢去试的。。
让我又产生了一个问题 就是有时候图片不知道要哪块好  感觉直接用个大块的作为北京最方便  呵呵
回复 支持 反对

使用道具 举报

发表于 2009-11-5 15:02:11 | 显示全部楼层
原帖由 [i]yilubenpao 于 2009-11-5 14:55 发表
谢谢各位的回答
我会慢慢去试的。。
让我又产生了一个问题 就是有时候图片不知道要哪块好  感觉直接用个大块的作为北京最方便  呵呵


人家要你自适应高度或宽度,你咋办
回复 支持 反对

使用道具 举报

发表于 2009-11-5 16:47:33 | 显示全部楼层
弄个 firefox看看别人网站怎么编的 和自己的想法对比下
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-5 17:22:23 | 显示全部楼层
看了 下了一些免费模板
但是觉得好多代码都是多余的  不知道是我不懂 还是老外的布局有问题。。
回复 支持 反对

使用道具 举报

发表于 2009-11-5 18:22:20 | 显示全部楼层

回复 1# yilubenpao [楼主] 的帖子

の。。。。这个问题,你应该先普及一下基础知识,google baidu一下,会有很多,然后看看xhtml+css知识
回复 支持 反对

使用道具 举报

发表于 2009-11-5 21:22:44 | 显示全部楼层
我都是直接看着效果图做布局 然后 根据框架具体切 有时能平铺的就切一个像素就行了 需要以图片出现的 就把那个图片切出来 导入到文档里 这个东西很难一两句话就说清楚的!
回复 支持 反对

使用道具 举报

发表于 2009-11-5 21:39:43 | 显示全部楼层
楼主:发布的地方是没错,这里的人大多数要接触这项工作,但如楼上所言,不是一两句话能讲清楚的。
你最好能找个能手把手教你的人给你演示一次,或看看网上有没有基础的视频教程吧,一开始学习不要切太复杂的页面。

楼上的同学:“有时能平铺的就切一个像素就行了”是不太合适的,渲染要占用资源,最好在保证文件大小的情况下不要平铺太多次。

-------------------
这个问题很勾起回忆啊,嘿嘿,我第一次也是用fw切的,那时候第一次知道原来容器还可以自适应内容,觉得很强大。
回复 支持 反对

使用道具 举报

发表于 2009-11-5 21:54:49 | 显示全部楼层

回复 12# 14px 的帖子

14px哥,平铺渲染占用资源能否详细解释一下,这一块儿我很欠缺!我一直以为让文档尽量大小最小化,才用平铺所见文档体积!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-5 22:09:22 | 显示全部楼层
今天找了个模板照着做  有点叫人抓狂的感觉!不知道怎么下手。可能有时候方法很重要  可能 mrwill 说的就很好  直接看着效果图做布局 然后 根据框架具体切  
像我这样新手  都不知道该切哪块图片好  和切多大  或许先慢慢写div 再写css要用到就去切点
回复 支持 反对

使用道具 举报

发表于 2009-11-6 09:54:11 | 显示全部楼层
只有帮顶的份
回复 支持 反对

使用道具 举报

发表于 2009-11-6 12:39:25 | 显示全部楼层
原帖由 [i]mrwll 于 2009-11-5 21:54 发表
14px哥,平铺渲染占用资源能否详细解释一下,这一块儿我很欠缺!我一直以为让文档尽量大小最小化,才用平铺所见文档体积!


我在看《无懈可击的web设计》中见到作者说到过这个,平铺的图像切了3,4个像素左右,并不是图片切得越小越好,因为1像素的话浏览器就得平铺很多次,涉及到资源占用和渲染速度的问题。如果切得太大了又会增加文件的体积,具体的度怎么把握我也不知道,现在也是习惯随手一切,差不多几个像素左右就行了。
回复 支持 反对

使用道具 举报

发表于 2009-11-7 14:53:08 | 显示全部楼层
布局有那么麻烦吗? 切图感觉哪里需要用 就切哪块就是。
回复 支持 反对

使用道具 举报

发表于 2009-11-7 16:30:07 | 显示全部楼层
值得学习!
回复 支持 反对

使用道具 举报

发表于 2009-11-7 20:34:46 | 显示全部楼层
切片要根据程序需要来切片,哪些地方要放内容和变量,如果没有程序,也就不需要切片,整图都可以。
回复 支持 反对

使用道具 举报

发表于 2009-11-8 01:11:27 | 显示全部楼层
多切几下就会了~~另外 学学 xhtml&css!了解下块布局 就知道如何切了
回复 支持 反对

使用道具 举报

发表于 2009-11-9 09:49:49 | 显示全部楼层
没开始动手制作之前所要做的:
1.能分清设计稿中的公共与私有的部分
2.在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
3.在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
4.在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
5.在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)
将设计稿切成便于制作成页面的图片:
1.切成所需要的图片(如何将需要的部分切出来)
2.在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
3.在2的基础上,规划切出来的图片(包括文件分布)
4.在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)
可以参看http://www.cssforest.org/blog/index.php?id=125
回复 支持 反对

使用道具 举报

发表于 2009-11-9 13:49:51 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2009-11-9 14:04:53 | 显示全部楼层
还是到网上 看看一些基础教程吧
回复 支持 反对

使用道具 举报

发表于 2009-11-9 15:27:04 | 显示全部楼层
原帖由 [i]kapiter 于 2009-11-6 12:39 发表


我在看《无懈可击的web设计》中见到作者说到过这个,平铺的图像切了3,4个像素左右,并不是图片切得越小越好,因为1像素的话浏览器就得平铺很多次,涉及到资源占用和渲染速度的问题。如果切得太大了又会增加文件 ...

还看到说,切的宽度为偶数比宽度为奇数好,好像和显卡显示有关。
回复 支持 反对

使用道具 举报

发表于 2009-11-10 20:25:41 | 显示全部楼层
先把xhtml结构写好吧,再去想如何还原设计稿。
回复 支持 反对

使用道具 举报

发表于 2009-11-24 22:11:20 | 显示全部楼层
学习鸟
回复 支持 反对

使用道具 举报

发表于 2012-9-12 17:20:18 | 显示全部楼层
唉,以前我学习的专业是后台编程, 现在工作了 要学习切图 ~~~~(>_<)~~~~  不会切~~
回复 支持 反对

使用道具 举报

发表于 2012-9-13 08:59:32 | 显示全部楼层
顶楼上的,说得很对,支持
回复 支持 反对

使用道具 举报

发表于 2012-12-1 23:04:11 | 显示全部楼层
网页切图拓荒者keqie.com
回复 支持 反对

使用道具 举报

发表于 2012-12-5 16:14:16 | 显示全部楼层
我觉得根据需求吧 看分块 然后细切 一个页面有蛮多中做法  做出来网页大小 代码多少都有不同  看你个人了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-18 12:39 , Processed in 0.124684 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表