精彩网页设计.

Presentation on theme: "精彩网页设计."— Presentation transcript:

1 精彩网页设计

2 ☆ 应会目标 通过本章的学习，熟练掌握网页设计的要点，能够根据不同的需求设计符合规范的网页，以及网页的颜色搭配 。

3 项目一：简单美 技能点评 ： 1.在设计网页时，要尽量做到“少”而“精”，又必须突出“新”。
2.展示内容独特的元素，如名称、标志、标准字体、标准色等，通过这些元素的合理应用，来实现网站形象与个性的塑造，提高视觉效果。 3.注意对素材的综合运用，采用素材的叠加来达到整体的效果；在抠图上注意选择工具的使用，把需要的素材漂亮地扣取出来。

4 操作步骤提要 ： 1、新建一文件，填充蓝色，并添加白蓝色径向渐变。新建一图层，画一白色矩形条，将“手.jpg”文件中的手移动到文件中，调整其大小及位置，复制一副本，水平翻转至合适的位置，效果如下图所示。

5 2、将“地球. jpg”文件中的地球移动到当前文件中，调整合适的大小与位置，将“标志
2、将“地球.jpg”文件中的地球移动到当前文件中，调整合适的大小与位置，将“标志.jpg” 文件中的标志移动到当前文件中，调整合适的大小与位置，调整不透明度。在白色矩形区域输入蓝色文字，最终效果图如下图所示。

6 项目二：青春纪念册 技能点评 : 1. 一个网站有很多的页面和主题、链接，而本网站主要就是纪念已逝去的青春，主题明确，内容简洁。
2. 在设计过程中，如何让这么多彩的颜色融洽的相处在一起，是本实例的难点；合理使用特殊笔刷效果、羽化效果显得十分重要。

7 操作步骤提要： 1、新建一文件，将“背景.jpg” 移动到当前文件中来，将“书.jpg” 移动到当前文件中，调整书本到合适的位置, 对其添加【投影】图层样式，如下图所示。

8 2、将“蓝天. jpg” 移动到当前文件中，将图层命名为“蓝天”。调整大小，将书中的图案覆盖。将”蝴蝶. jpg” 与”兰花
2、将“蓝天.jpg” 移动到当前文件中，将图层命名为“蓝天”。调整大小，将书中的图案覆盖。将”蝴蝶.jpg” 与”兰花.jpg”中蝴蝶与兰花扣取，移动到当前文件中，形成网页的背景，效果如下图所示所示。

9 3、制作按钮图层，选择自定形状中的心形图案，将前景色设置为：#f9aad3，画一颗心，对其添加【内发光】和【斜面和浮雕】图层样式，在样式面板上保存为“按钮”。将前景色分别设置为：＃c8a5d0和＃dfa5c1，在不同的图层画两个与前面同样大小的心形，分别使用“按钮”图层样式。使用合适的字体与字号，在三个心形右边，分别写入对应的文字“首页”、“日志”与“相册”，将这些文字层转为普通图层，调整大小及位置，效果如下图所示。

10 4、新建一图层，使用钢笔工具勾勒出四角星星, 对其进行羽化，并复制多个，调整成大小形状各异,位置排放随意些，新建一图层 ，使用用载入的星光笔刷,在画面上随意涂鸦一下，对其添加【内发光】、【斜面和浮雕】和【渐变叠加】图层样式，如下图所示。

11 5、在书籍的左侧加上网站的主题，分别使用两个文字图层书写上“我们的青春” 、“我们的纪念”，将其栅格化，添加【投影】和【外发光】图层样式，得到“青春纪念册”网页的最终效果如下图所示。

12 项目三：大型网站首页设计 技能点评: 1. 在网页上用到的按钮千变万化，在本实例中运用了一种比较简单实现的方法，利用单行、单列工具能很快的将整体的导航条分割成多个，保证了整体风格的统一。 2. Photoshop制作网页时利用图像装饰网站空间的方法也各不相同，而最终的效果取决于设计师对艺术的理解与把握。

13 1、新建一文件，将“背景图片.jpg” 移动到当前文件中，显示标尺，横向、纵向各拖移出两条参考线，用以规划网页布局。新建一图层，画一白色圆角矩形，在其旁边画两相叠的圆角矩形，稍微倾斜，颜色不同，效果如下图所示。

14 2、建导航条，新建一图层，绘制一圆角矩形，填充蓝色，对其添加【内阴影】和【斜面和浮雕】图层样式，利用单列选框工具对导航条进行分割操作，使用合适的字体与字号写上相对应的字样，效果如下图所示。

15 3、建立下方按钮与栏目介绍，按钮背景制作同导航条，分别复制多个，放至合适的位置，分别加上对应的按钮文字。栏目区域，将“标志
3、建立下方按钮与栏目介绍，按钮背景制作同导航条，分别复制多个，放至合适的位置，分别加上对应的按钮文字。栏目区域，将“标志.jpg”移动至当前文件中，复制副本，分别加上对应的文字，放至合适的位置，效果如下图所示。

16 4、页面内容的输入，分别使用文字工具、自定义形状工具、与单行选框工具在白色圆角矩形内部输入完成，并将素材图片移动过来，调整合适的大小与位置，最终效果图如下图所示。

17 实训项目 1、打开浙江经济职业技术学院网站，网址为：http://www.zjtie.edu.cn。模仿学院网站首页制作一个主页。
2、设计一个乐队网站模板。 3、设计一个公司网站模板。