盘点在Photoshop中创建一个光质感网页设计例

天天1v3

本文主要讲解如何使用P切片，导出HTML，并现图片切换效果PS软件下载的相关资讯可以到我们网站了解一下，从专业角度出发为您解答相关问题，给您优质的服务！https://b23.tv/4Okllaf

下图是该教程中的图片滑动部分的效果图 打开PSD文件,找寻该部分的图层，如下所示（题外话，在制作PSD的时候，合理的安排图层的顺序和分组，对后面的PSD转HTML的工作要省心不少） 用切片工具在图片滑动栏附近切出一个切片，在该切片上右键选择编辑切片选项，在弹出的对话框中，进行如下的设置 打开图层面板，隐藏相关的图层，如下图所示 点击：文件存储为和设备所用的格式，图片格式选择PNG-24，点击存储按钮，在弹出的对话框中，选择HTML和图像 这是首次导出切片，目的是获得图片滑动栏的背景。用PS打开刚才导出图片中的背景图片 用魔棒工具，容差设置为10，点击当中的背景，按D删除当中的背景。将图片保存为 将组复制到新的文件，移到左上角，设置合理的大小 将该文件保存为 类似的复制组，将文件保存为 将复制到新的文件，移到左上角，设置合理的大小，将文件分别保存为和 至此，图片滑动栏的图片就全部准备好了。（本教程只现图片滑动部分） 现在，开始制作图片滑动效果 在VS2022中打开刚才导出的页，如下图所示： 其中03的部分就是刚才图片滑动部分 按照之前的教程部分，对该页进行修改 !DOCTYPEPUBLIC-W3CDTDXHTML10TEN:3TR1DTD1-=:31999PSD转HTML——SS-=C-T=;=2312=:{:0;}{:;}#{:620;:360;:0;:;-:0;}#{:;-:110;:620;:360;}#{:;-:100;}_{:600;:;:;:10;:10;:;}_,_{:600;:320;:;}#,#{:;:148;:-17;:;-:200;}#{:594;}{:200;:100;}{:;:05;-:;}{:;:10;:0;-:30;-);:;:;}{-);}=S-191==S==S==$((){$('#')({:5000,:2500,P:});}); =__01=1200=1900=0=0=0=3=01=1200=185==2=02=450=1715=!--下面是修改部分--!--图片滑动块区域— =!--滑动区域--=!--滑动块背景--==F=!--上一个下一个按钮，两个图片超链接—=#====#===!--滑动图片，一个D，若干图片超链接--=_=1=1=1=2=2=2=3=3=3=4=4=4=5=5=5!--上面是修改部分—=2=04=130=1715==05=620=1355= 下面是滑动栏效果图 效果不错，非常完美。不过要注意的是在PS中切片导出的页中，少了!DOCTYPE标签和标签对空间的定义，还需要手动添加。没有这两个，做出的效果会有所差别。