西西软件下载最安全的下载网站、值得信赖的软件下载站!

首页西西教程photoshop → 在Photoshop中创建一个光质感网页设计实例

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

相关软件相关文章发表评论 来源:西西整理时间:2013/2/9 8:06:27字体大小:A-A+

作者:西西点击:0次评论:0次标签: 网页设计

本文主要讲解如何使用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转HTML——SlideShow</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>

<body >
<table id="__01" width="1200" height="1900" border="0" cellpadding="0" cellspacing="0">
  <tr><td colspan="3"><img src="images/01.jpg" width="1200" height="185" alt="" /></td></tr>
  <tr><td rowspan="2"><img src="images/02.jpg" width="450" height="1715" alt="" /></td>
        <td>
        <!--下面是修改部分-->
            <!--图片滑动块区域—>

            <div id="container">
                              
                <!--滑动区域-->
                <div id="slides">
                    <!--滑动块背景-->
                    <img src="images/frame.png" alt="Frame" id="frame" />
                    <!--上一个/下一个按钮,两个图片超链接—>
                    <a href="#" class="prev"><img src="images/left.png" alt="" /></a>
                    <a href="#" class="next"><img src="images/right.png" alt="" /></a>
                    <!--滑动图片,一个Div,若干图片超链接-->
                    <div class="slides_container">
                        <a href="1.html"><img alt="1" src="images/1.jpg" /></a>
                        <a href="2.html"><img alt="2" src="images/2.jpg" /></a>
                        <a href="3.html"><img alt="3" src="images/3.jpg" /></a>
                        <a href="4.html"><img alt="4" src="images/4.jpg" /></a>
                        <a href="5.html"><img alt="5" src="images/5.jpg" /></a>
                    </div>
                </div>

            </div>
         <!--上面是修改部分—>
         </td>
         <td rowspan="2"><img src="images/04.jpg" width="130" height="1715" alt="" /></td>
   </tr>
<tr><td><img src="images/05.jpg" width="620" height="1355" alt="" /></td></tr>
</table>
</body>
</html>

下面是滑动栏效果图

效果不错,非常完美。不过要注意的是在PS中切片导出的网页中,少了<!DOCTYPE>标签和html标签对xml空间的定义,还需要手动添加。没有这两个,做出的效果会有所差别。

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)