1、页面设计页面制作 这种背景的页面怎么切图的啊。。。主要是背景怎么整的。。。
目前我无法判断你那些图片带链接,所以只能大概的给你讲一下(目前文字部分我先不管),具体我拿第三张来讲给你吧。
首先,把所有要做链接的图层都隐藏掉,剩下的层,就可以用来切图,整体背景是蓝色,所以css搞定就行。
其次,背景有一张整体的背景图,这个需要全部单独切下来,图片上面不要带任何其他元素,就只是这张单独的图片就好,布局的时候引用为背景!
然后,剩下的就是主体部分,上面的播放视频和文字我就不讲了,简单,底部的汽车促销图片也切一张大图就好,也简单。
最后,就剩下最难搞的中间部分,大概想了一下,2种方法实现,如下:
1、切成整张大图,需要做链接的地方,画上不规则热区就好了!这种比较简单些。
2、图片什么样,就切成什么样,每张小图都单独切出来(注意:要做成png格式保存,背景设置为透明),然后写html的时候,用css画出等大的不规则图形,吧图片当做背景加进去,然后用css绝对定位一下,如有链接加链接,完美实现!
备注:css画不规则图形,网上可以搜到教程,看一看就差不多,不难!
至于其他几张图,比较简单,简单说一下第二张,第二张的其实如果想简单实现,那就除文字和纯背景色外,整张切,然后有链接的地方加热点就好,想做复杂一点,就可以用到我所说的css画不规则图形,纯色的三个纵横条,不用切,css画出来,添加背景色,然后绝对定位就好,其他的该切多大就切多大,然后用css绝对定位,设置好z-index的关系,就ok了!
之前做过很多这样的网站,这都是经验之谈,完全能实现,要有问题再问我!完全纯手打啊~~
2、网页切图怎么做? 网页设计切图
网页切图怎么做,网页设计切图的方法。
如下参考:
1.打开PS,点击切片工具,如下图所示。
2.点击切片工具,可以将图片切割成所需的大小,如下图所示。
3.剪切图片后,点击导出特殊网页使用的格式,如下图所示。
4.输入属导出web的格式页面,并按住shift键选择所有部分。
5.导出格式设置为JPEG,如下所示。
6.最后,单击save存储,如下图所示。
3、在网页设计中如何用PS切图
1、在Photoshop中打开设计稿,如下图:
2、选择工具板上的slice切片工具,大面积的色块单独切成一块,尽可能的保持在水平线上的整齐,切好的图如下所示:
3、在PhotoShop中选择file-save for web...来输出,这里要注意一些参数的选择:
4、接下来在Dreamweaver里建立站点:
5、在图示左边的site name中为站点起一个名字,如example然后在下面的local root folder中选择刚才导出的站点的文件夹:
6、重新制作页面表格,通常在photoshop中直接导出的htm文件是不可以直接使用的,因为有些地方在实际运用时要作调整:
7、根据这个页面表格所示,在新的页面中建立一个三行一列的表格,把cellpadding,cellspacing,border三项值设为0,不然会有空隙,最后选择表格,背景添加图片即可。
4、UI 中网页设计切图怎么切
PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手,虽然它还附带切图功能,但是比较鸡肋,不推荐用它切图。
切图工具:
Cutterman 一款PS的插件,切图非常方便,但不支持绿色免安装版本PS,而且对PS版本要求比较高,针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc,然后自行破解。官网上有安装使用教程,自己研究下吧,因为我也是最近才开始接触这款插件。
Part 2 Photoshop
现在常用的几种设计尺寸
1. 640*960 4时代的尺寸,刚接触APP设计用的是这个尺寸,拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧);
2. 640*1136 5/5S/5C,IPhone更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;
3. 750*1334 6 目前我做设计稿的设计尺寸,IPhone6的尺寸,向下可以适配4,5,向上可以适配6 plus;我记得IP6推出后,我问总监应该用什么尺寸设计,他说用IP6的吧,好适配,切出来就是@2x了,改一改上下都能照顾到。
5、web网页界面如何给前端标注,切图
公司团队现在用的是摹客idoc,我们把设计稿上传到摹客后,可以自动生成标注,前端可以直接查看,针对大多数工具存在的标注误差的情况,摹客也支持手动进行修改;设计规范等信息,摹客也支持手动标注在设计稿上面。
切图的话,我们是用摹客的PS插件先在设计稿里面标记切图然后上传到idoc,前端小姐姐就可以去直接下载,同时还支持切图压缩和自定义切图尺寸,还是比较方便的推荐使用。
6、网页设计切图时,怎样保存图片(图片既清晰所站空间又小)?
用“切片工具”将图片按想要的切好,如图:
然后使用“储存为Web所用格式“,如图:
调整”品质“然后储存!
7、网页设计怎么切图
你用什么软件设计的就用什么软件来裁切图,我用的是photoshop进行设计,也是用这个来进行的切图;
切图保存格式最好、最常用的是gif和jpg。色彩要求不多的情况下,比如说小图标,就用gif。如果色彩比较丰富,gif就不够用了,就要保存成jpg。至于png,一般情况下不要用,一个是占用空间大,再是在不同的浏览器下浏览,会出现灰色背景,祝你好运!
8、关于网页制作的,什么是切图,切图要达到什么目的,用什么工具来切
制作网页,很多的时候,首先要用图片处理软件制作出网页的效果图。效果图做好是一幅完整的图片,不可能把这一整张的图片都用在网页里。把效果图中有用的部分剪切下来作为网页制作时的素材,这个过程就是切图。(当然是用剪切、选择工具也可以,但是用切片工具处理更精确。)
切图的目的就是更加精确的进行网页布局。
photoshop、fireworks等软件都带有切片工具。