首頁 >web前端 >html教學 >新人求助,这类设计图纸该如何切片构图。_html/css_WEB-ITnose

新人求助,这类设计图纸该如何切片构图。_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-21 09:38:20940瀏覽

这样的设计图。
运用了大量的透明以及光影效果。
试过直接按块切片,然后DIV强行定位拼接,但是效果很不理想很多地方能看到明显的接缝。
但是如果按层来切,GIF不支持半透明,用PNG的话IE6貌似又不支持png的透明。

新手,求大虾指点。

PS:如果有能帮助做下万分感激,pm我留下QQ,我发PSD图纸(可以追分)。

回复讨论(解决方案)

我估计看到明显样式是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌,耐心一点吧,呵呵

我估计看到明显 接缝是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌,耐心一点吧,呵呵

我估计看到明显接缝是你的样式没调整好。
各种浏览器的CSS兼容确实很讨厌,耐心一点吧,呵呵

不是样式没调整好。我说的接缝是指的两个图片衔接处有肉眼可见的色差,应该就是切片时候产生的

自动切片有时候是会有点问题。所以很多美工不会用自动切片功能,而是自己手工切,就是按像素去对位切分。

按层就太费劲了。
按块的话,很容易啊,结构其实很简单。看看美工教程吧。

另外这个页面,视觉设计很成问题,居然通过了,看来老总和总监都很好说话啊。

自动切片有时候是会有点问题。所以很多美工不会用自动切片功能,而是自己手工切,就是按像素去对位切分。

按层就太费劲了。
按块的话,很容易啊,结构其实很简单。看看美工教程吧。

另外这个页面,视觉设计很成问题,居然通过了,看来老总和总监都很好说话啊。

我就是用手工按像素去对位的啊-。-
还有。。这个页面的问题怎么改进?
通过的原因是整个公司都是搞电气的,对WEB一窍不通,整个项目从规划到设计到开发到测试运营就我一个人。。。

放弃ie6吧,这玩意太难搞了

放弃ie6吧,这玩意太难搞了

看这个网站的人主要都是电气领域。随便找个电脑或者公司电脑什么的。很多都是IE6,不考虑不行啊。

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位 

http://download.csdn.net/detail/stongyann/4172822   另外 PNG 的是可以处理的 。你可以理解为这是我再做广告,但是确实有效。我是自己 测试过的。

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位

整图做背景的话 载入速度会不会很蛋疼?

通过的原因是整个公司都是搞电气的,对WEB一窍不通,整个项目从规划到设计到开发到测试运营就我一个人。。。
那就不必自己给自己找麻烦了。理论上技术者是应该能做得更好就做到更好,但现实中还得相对地看。先简单搞一个就可以。但为了不让领导过后看着觉得跟人家比总好像有点差距,产生想换人的心思,你可以有时间再准备一个稍好的方案,在觉察领导有点那情绪时先拿给领导看看,让他看到你的能力是持续进步的,以后他就放心了。开始一次性地做到“质量在几年内保持领先”,过后没活干吃亏的反倒是自己。我只是觉得你不用愁自己目前能力了,和他们的WEB经验和眼光比你还是超出的。

引用 6 楼 的回复:
放弃ie6吧,这玩意太难搞了

看这个网站的人主要都是电气领域。随便找个电脑或者公司电脑什么的。很多都是IE6,不考虑不行啊。
呵呵,我以前在这领域干过,知道他们确实就这样的,IE6不仅要管,而且还得作为主要对象。

接缝色差的问题,还是和切图的经验方法有关。要看怎么划分,然后在切的时候根据情况注意一些事项或做一些必要处理。

另外,为消除CSS盒模型差异导致的微小缝隙,
* {padding:0;margin:0;}
也要加在或外部CSS中。

引用 9 楼  的回复:

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位


整图做背景的话 载入速度会不会很蛋疼? 你可以把图片 按最小的 大小存储 比如 GIF 的就相对小点。

这个页面真炫呀~~~~
呼呼

对你楼主你也是一个人呀,我也是一个人在公司了负责,全是我一个人搞....对于上面的问题: 你们那里应该有美工吧.  这样吧。 要美工先把这背景图片弄出来,至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....  

恩,对了,还有对于兼容问题: ie 6 上面的大侠说的对放弃对他的测试。 我也是...做出网站不兼容ie6  。就测试下 i7 以上 加上火狐 谷歌 就行了.....

实在要ie 6用  css hack 可以,就是有点麻烦 

对你楼主你也是一个人呀,我也是一个人在公司了负责,全是我一个人搞....对于上面的问题: 你们那里应该有美工吧. 这样吧。 要美工先把这背景图片弄出来,至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....
很明显,楼主比你还惨,有美工也只是软件美工,不懂WEB美工应该做的,而且切图还有些经验性的东西,不是表面一想那么简单。

ie6不能不管,但在不是特别熟悉的情况下,也用不着费力去做 css hack ,可以用现成的CSS/JS框架和JQUI,EXTJS,YUI等界面库。

css框架的特征
1.抽象出常用的css样式,高再可用性,高移植性   
2.有固有的定义,详细的文档及开发特点   
3.高兼容性,可以兼容流行的浏览器   
4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

常用的css框架: 
1. 960g 
2. YUI 2: Grids CSS 
3. Blueprint 
4. BlueTrip 
5. Elastic CSS 
6. Easy 
7. EZ-CSS 
8. Tripoli 
9. CleverCSS 
10. SenCSS 

对你楼主你也是一个人呀,我也是一个人在公司了负责,全是我一个人搞....对于上面的问题: 你们那里应该有美工吧.  这样吧。 要美工先把这背景图片弄出来,至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....

很杯具。。。我比你更惨。连这个设计图纸都是我自己画的。。。如果有美工 我也不用在这里问了。

引用 15 楼  的回复:
对你楼主你也是一个人呀,我也是一个人在公司了负责,全是我一个人搞....对于上面的问题: 你们那里应该有美工吧. 这样吧。 要美工先把这背景图片弄出来,至于首页 、 登陆和中心公告这一块就不要变背景了。重新截图....后面就要美工把图片给你自己做了....

很明显,楼主比你还惨,有美工也只是软件美工,不懂WEB美工应该做的,而且切图还有些经验性的东西,不是表面……

谢谢你的建议。
另外我还有个问题。

如果我分块切片的话 用绝对定位是能拼在一起,但是如果浏览器分辨率大于1024*768的话,整体页面显示就会不是居中的了。但是我用表格或者div做最外层,让其居中。然后其他div相对定位,就会出现各个图片无法拼接的现象。

这种情况怎么解决。

引用 11 楼  的回复:

引用 9 楼  的回复:

如果部考虑 后期的风格变换 可以考虑 直接的 用整图做背景 其他的绝对定位


整图做背景的话 载入速度会不会很蛋疼?
你可以把图片 按最小的 大小存储 比如 GIF 的就相对小点。

我这图储存成最小格式的话,效果惨不忍睹。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn