gui-30第三章专题页面设计

1、学习重点：banner宣传大图的设计效果和设计技巧，内容栏目的摆放与宣传，最重要的还是具有词。的学习目的：如何做好专题页面的设计主要内容专题页面？4.5.1购物专题页设计banner大图设计 4.5.2.2商品图设计摆放栏目分类设计底部导航设计4.5.1专题页？理解为一件完整的事情归纳为同一类目下的。如：神九上天、四大门户都会给神九做一个专题页。是围绕着一个专题页分成哪一些类型：1.事件类专题页：如神九 根据事件的发展情况进行所展开的。2.挖掘类页：深入的类型、如：、八卦、帝王（挖掘行业的）去所做的。3.类专题页：用户的为主导。以节日为的，根据个人的4.栏目类专题页：如新浪有科技频道 就是属于

2、栏目类。4.5.2 专题效果图设计最终效果1、打开16栏式的PSD模板文件. 打开 “图像 画布大小” . 把画布的宽度设置为 1200px 高度设置为 2560px .把背景色设置为 # ebe6e0 。2、新建图层，选择选取工具，画一个长方形，高：400像素；利用参考线标注一下。3、给这个图层命名为“banner背景”，选择渐变工具拉一个径向的渐变，色值分别为：#,#d3ffef。4、添加蒙版，从下往上拉蒙版。5、为banner添加文字宣传，注意做商城的专题页主要突出的就是文字介绍，所以一定要重点设计。“早春新品”字体：方正稚艺简体，大小：“早”155点，“春新品”100点，颜色先用黑色代

3、替看一下效果，把字介绍放在中间的位置。6、选择钢笔工具，围绕文字画一个大概的背景图形，不用太细，主要是为了不让文字显得太单薄。图形画的稍微大一点，下面还要添加介绍性内容；颜色填充：# 02bf7e7、继续选用钢笔工具，画路径类似于小长三角的形状，右边要和绿色背景框的右下角的斜边重合。5、添加文字，“满就送”，字体：方正综艺简体，大小50点，倾斜，颜色：#。6、继续添加语，排版方式如图，字体：微软雅黑，大小：13点，颜色：#，倾斜。我再这里加了一条装饰线来衬托一下文字。利用选区工具画一个高2像素的线条，颜色为白色，按照绿色背景的角度倾斜一下，添加蒙版，右边拉一下蒙版，虚化一下。7、“春装区全场5

4、折起”，这里把“5”提出来单独做一下效果，字体：Berlin Sans F.，大小：69点，颜色：#c8fa02，倾斜。添加图层样式“描边”，大小：2像素，位置：外部，颜色：#000000。8、画一个小矩形，颜色为白色，旋转45度角。创建剪贴模板，如图：9、“春装区全场 折起”，字体：方正准圆简体，大小：32点，颜色：# 059a67，倾斜。10、这时，素材可以从的语已经完成了，总体看上去感觉有点空，昵图网，还有站酷上搜索。可以找一些素材装饰一下，这样看起来是不是饱满了很多，banner部分动图层到这个文件夹里面。已经制作完成了，创建图层文件夹“banner”，移11、选择矩形工具，画一个长方

5、形，高：71像素，颜色：# 2e2e2e。12、继续矩形工具，画一个小长方形，宽：1065像素，高10像素，颜色：# 000000，水平居中，垂直居上19像素。13、新建图层，选择选区工具，画宽：259像素，高：6像素，的长方形选区，填充颜色：#5ac4a0，（快捷键AELETE）水平居中，垂直居中。标题框制作完成14、添加标题框文字，中文：春季热卖，字体：微软雅黑，大小：25点，颜色：# 3ad5a0，加粗；英文： Hot spring，字体： Century Gothic，大小：20点，颜色： # 3ad5a0，加粗。中间对齐15、列表展示，把中间的尺寸设为宽：1086像素，所有的文字和都

6、居中对齐，用参考线标注一下。如果全屏展示，页面会撑的太满，影响视觉效果。16、固定尺寸，宽243像素，高348像素。17、的下面要添加价格的一些介绍，选择矩形工具画一个长方形，颜色：# 2e2e2e，宽：243像素，高：74像素，作为背景，衬托上面的文字，放在的下面18、添加文字， 499元，字体：文鼎弹簧体，大小：23点，颜色：#，排列方式如图：19、文字“专柜价 1010”，字体：微软雅黑，字体：12点，颜色：#，为什么两个价格的显示大小不一样，因为主要突出的是499元，为了吸引消费的目标，所以后面再把专柜价也加上，可以用一个线条来区分，增加消费者的。文字排列如图：20、制作按钮，选择矩形

7、工具，画一个矩形长方形，半径：4像素，颜色：#1bc78c21、按钮添加文字，“点击抢购”，字体：微软雅黑，大小：15点，颜色：#，加粗。22、后面的设计方法同上步骤，这里只需要，粘贴。可以自行修改，如图：23、11、12、13步骤24、添加文字，“品牌精选”，“Selection of brand”，效果同14步。如图：25、这一部分内容主要突出商品，品牌，价格，介绍。目前，一般的商城类型的在做专题页的时候，中间都会穿插这样的图文介绍，排版没有规律，看起来乱乱的，但是就因为这种排版格式才能够吸引消费者，这只是对很多商品的简单介绍的综合。（或者矩形工具）可以从网上搜索，条框都是利用选区工具25

8、、下面是每个商品的介绍，个描边，大小：1像素，位置：大小尺寸规定为，宽：243像素，高：352像素，这里，颜色：#cecece。给加26、矩形工具，画一个长方形，用作距为5像素。文字的背景，高：29像素，颜色：# cecece。距离的边27、添加文字，字体：微软雅黑，大小12点，颜色：#000000，锐利28、按钮制作白色的背景，同理，矩形工具，高：48像素，颜色：#29、文字999元，字体：文鼎弹簧体，大小：23点，颜色：#00000030、按钮，矩形工具，画一个矩形长方形，半径：4像素，颜色：#000000.文字样式，字体：微软雅黑，大小：14点，颜色：#“999元”。，选择多边形工具，画一个小图标，作为装饰。寓意同上，突出31、后面的设计方法同上步骤，这里只需要，粘贴。可以自行修改，如图：32、因为这个是专题页面，所以底部的导航信息和首页的这个简