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

时间：2014-10-17 09:25:40 来源: 复制分享

本文主要讲解如何使用Photoshop切片，导出HTML，并实现图片切换效果

下图是该教程中的图片滑动部分的效果图

打开PSD文件,找寻该部分的图层，如下所示（题外话，在制作PSD的时候，合理的安排图层的顺序和分组，对后面的PSD转HTML的工作要省心不少）

用切片工具在图片滑动栏附近切出一个切片，在该切片上右键选择编辑切片选项，在弹出的对话框中，进行如下的设置

打开图层面板，隐藏相关的图层，如下图所示

点击：文件 > 存储为web和设备所用的格式，图片格式选择PNG-24，点击存储按钮，在弹出的对话框中，选择HTML和图像

这是第一次导出切片，目的是获得图片滑动栏的背景。用PS打开刚才导出图片中的背景图片

用魔棒工具，容差设置为10，点击当中的背景，按Delete删除当中的背景。将图片保存为frame.png

将left arrow组复制到新的文件，移到左上角，设置合理的大小

将该文件保存为left.png

类似的复制right arrow组，将文件保存为right.png

将radio buttons复制到新的文件，移到左上角，设置合理的大小，将文件分别保存为current.png和pagination.png

current.png

pagination.png

至此，图片滑动栏的图片就全部准备好了。（本教程只实现图片滑动部分）

现在，开始制作图片滑动效果

在VS2010中打开刚才导出的网页，如下图所示：

其中03.png的部分就是刚才图片滑动部分

按照之前的教程部分，对该网页进行修改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>PSD转HTMLSlideShow</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

   <style type="text/css">
        :focus { outline:0; }
        img {     border:none;}

        #container {   width:620px;
                            height:360px;
                            margin:0 auto;
                            position:relative;
                            z-index:0;
                        }

        #frame {        position:absolute;
                            z-index:110;
                            width:620px;
                            height:360px;
                }

        #slides {        position:absolute;
                            z-index:100;
                   }

        .slides_container {   width:600px;
                                    overflow:hidden;
                                    position:relative;
                                    left:10px;
                                    top:10px;
                                    display:none;
                                }

        .slides_container a,.slides_container a img {    width:600px;
                                                                       height:320px;
                                                                       display:block;
                                                                  }

        #slides .next,#slides .prev {    position:absolute;
                                                 top:148px;
                                                 left:-17px;
                                                 display:block;
                                                 z-index:200;
                                                }

        #slides .next { left:594px;}

        .pagination {    margin:20px auto 0px;
                             width:100px;
                        }

        .pagination li { float:left;
                             margin:0 5px;
                             list-style:none;
                        }

        .pagination li a {     display:block;
                                   width:10px;
                                   height:0px;
                                   padding-top:30px;
                                   background-image:url(images/pagination.png);
                                   float:left;
                                   overflow:hidden;
                             }

        .pagination li.current a {background-image:url(images/current.png);}

    </style>

    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript" ></script>
    <script src="Scripts/slides.min.jquery.js" type="text/javascript" ></script>
    <script src="Scripts/jquery.easing.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#slides').slides({
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });

    </script>

</head>