网页设计ps切图,用ps做的网页设计图

http://www.itjxue.com  2023-01-24 12:44  来源:未知  点击次数: 

PS切图的流程(网页制作)

我们在制作网页的时候常常需要上传图片,如果图片比较大此时我们就需要对图片进行切片处理,下面我们就来看看使用ps是如何进行切图的吧。

首先将ps打开然后按下Ctrl+O键就会弹出打开对话框,在打开的对话框内我们找到需要的图片,如图所示:

打开图片之后在工具箱内找到裁剪工具,如图所示:

点击裁剪工具下面的三角箭头,在其子级菜单哪里找到切片工具,如图所示:

点击切片工具我们就可以根据自己的需要对图片进行切片处理了,如图所示:

在网页设计中如何用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,不然会有空隙,最后选择表格,背景添加图片即可。

怎么用PS网页切图

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

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

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

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

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

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

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

photoshop网页切图怎么用

在photoshop的工具栏中找到切片工具,就可以在图片内按照网页设计的要求进行切片了,如同使用框选工具一样拉出一个方形区域,这就是一个切片;也可以利用切片选择工具对切片进行调整。切片制作好以后选择储存为web所用格式,在保存对话框内内根据需要选择“HTML和图像”或“仅限图像”等选项······

网页切图怎么做? 网页设计切图

网页切图怎么做,网页设计切图的方法。

如下参考:

1.打开PS,点击切片工具,如下图所示。

2.点击切片工具,可以将图片切割成所需的大小,如下图所示。

3.剪切图片后,点击导出特殊网页使用的格式,如下图所示。

4.输入属导出web的格式页面,并按住shift键选择所有部分。

5.导出格式设置为JPEG,如下所示。

6.最后,单击save存储,如下图所示。

(责任编辑:IT教学网)

更多

推荐windows vista文章