七月网

ps网页切图(ps网页切图生成html)

七月网4320

一、photoshop做网页,如何切图

1、第一步用PS打开网页效果图PSD文件,根据网页效果图拉出参考线,同时为了方便切图可以右键点击把面板的颜色自定成对比鲜明的颜色。

ps网页切图(ps网页切图生成html)

2、第二步在PS图层中找出主背景图层,如果背景图是渐变的话可以只切出一两像素,后面再代码中设置填充。

3、第三步隐藏其他图层,把背景图切出来。如果背景图很大,可以考虑分段切出,这样可以加速网页加载。

4、第四步切出背景后,就从上到下,先把LOGO切出。这里同样要隐藏其他图层,输出图片的时候保存文件类型选择png,因为这样可以使得图片背景透明。

5、第五步导出图片可以选择文件——存储为web和设备所有格式。

6、第六步在保存切出图片的时候,选择保存HTML和图片,这样导出来的就会自动生成一个网页页面和切图图片。

7、第五步在切像尾部版权部分的背景时候,发现这个是渐变图层,这样就可以只切出一个像素的长度。然后在代码中设置repeat-x横轴填充。

二、如何使用ps中切片工具进行网页切图详细步骤

1、首先将要裁剪的图片备好份,先检察好需要裁剪的图片,若是没有图片有问题,裁剪就是在浪费时间,因此一定要养成检察的好习惯。

2、用PS打开图片,点开始--打开,找到文件所在的位置,将其打开,

3、找到切片工具,默认的切片工具和裁剪工具是重叠在一起的。鼠标移到裁剪工具上点右键就会出现切片工具,点选切片工具。

4、先好切片工具后,将光标移到图片位置,点右建,选择划分切片,出来如下对话框:这里可以可以根据需要进行水平和垂直两种方式,也可以选按桉你所需的份数或是按象素进行裁剪。(注:按像素裁的话,最后不一定是相等像素的)

5、选择好后点确定即可,接下来就是保存裁剪好的图,这跟普通的保存方式略有不同,如图所示,点选后,在弹出来的对话框点确定,进入下一个界面。

6、在新出来的界面中,可以在上面的图片预设处选择自己需要的格式,其它地默认即可,然后点下面的保存,选好自己的何存位置。

7、完成。在自己的保存位置,你会发现多了一个命名为images文件夹,切片图片就是保存这个文件夹里的。

三、怎么用ps把详情页切图

在PS操作中,PS制作淘宝详情页及如何切图。

2、用标尺将每个需要切片的图片隔开。

6、点击【文件】→【导出】→【储存为web所用格式】

8、设置一下保存位置以及文件名称和格式,最后点击【确定】即可。

9、进入刚刚保存的文件夹,就可以看见导出的切片了,还可以在网页上点击观看详情页。

END,本文到此结束,如果可以帮助到大家,还望关注本站哦!