60.0/PhotoShop制作简单的网页效果

目录

60.1 网页的页面元素

60.1.1 网页的概念

60.2网站设计的步骤

60.2.1草案

​编辑

60.2.2 丰富内容

60.2.3 利用切片划分功能区域 

60.3.0 Gif动画的制作

---

60.1 网页的页面元素

60.1.1 网页的概念

是指通过浏览器能访问到的 Web 页面，是一种超文本文件，综合了图片、

文字、多媒体等丰富的内容，具有可视性和交互性的特点。

16.1.2 网站设计要点

网页设计的两大要点是：整体风格和色彩搭配。

（ 1 ）确定网站的整体风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定

的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样

的网站。

风格 (style) 是抽象的。是指站点的整体形象给浏览者的综合感受。这个

“ 整体形象 ” 包括站点的 CI （标志、色彩、字体、标语）、版面布局、浏览方

式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

举个例子：

我们觉得网易是平易近人的，迪斯尼是生动活泼的， IBM 是专业

严肃的。这些都是网站给人们留下的不同感受。

在这里，我提供给大家一些参考经验：

将你的标志 logo ，尽可能的放在每个页面上最突出的位置。

突出你的标准色彩。

总结一句能反映贵站精髓的宣传标语！

 

相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在

网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

（ 2 ）网页色彩的搭配

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距

离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是

网页的色彩。

关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关

设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的

小技巧。

用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，

这样的页面看起来色彩统一，有层次感。

用两种色彩。先选定一种色彩，然后选择它的对比色。

用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；

或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

不要将所有颜色都用到，尽量控制在三至五种色彩以内。

背景和前文的对比尽量要大 ( 绝对不要用花纹繁复的图案作背景 ) ，以便

突出主要文字内容。

60.2网站设计的步骤

60.2.1草案

新的网页就像一张白纸，没有任何内容，你要凭借自己的想象力对它进

行设计。该阶段主要是将网页划分成几个部分，如标题、导航、内容等。尽

量多画几张，最后选择一个满意的再进行完善。

60.2.2 丰富内容

将确定功能的模块放在要安排的位置上，将草案的东西进行完善。绘制出你心目中的样子，将不足之处再进行细化修饰。

得到完善后的图形如（ 16-2 ）

60.2.3 利用切片划分功能区域 

大家都知道，在我们网页打开的时候，网页第都是被分成各个功能区域

的，通过单击该区域中隐藏在按钮、文字或图片中的链接，用户就可以进入

子层级网页，以进行观看新闻、收听音乐等活动。切片工具就能实现功能区

域的划分。

 1.打开图像素材如图（16-3）

 

 

 

在切片选项中【 URL 】中输入一个完整的超链接的地址；在目标中

输入【 _blank 】，表示单击时，将在新窗口中显示链接文件；【 Alt

标记】是当鼠标移动到对应的功能区域将显示的文字说明。按此步

骤打开切片选项（ 16-5 ）

 

 4.优化存储网页文件

选择【文件 - 存储为 Web 和设备所用的格式】就会出现如（ 16-6 ）

对话框。

 

 5 点击【存储】命令将得到如（16-7）对话框

 

注：保存类型一定要 HTML. 和图像 (*html)

单击【保存】即可这样 PS 制作网站前台的效果图就制作完成了。

60.3.0 Gif动画的制作

在浏览网页时我们可以看到许多动态的 gif 动画，它的动态性和趣味性能

第一时间吸引我们的注意力。

Gif 动画，就是多幅静止画面连续播放，利用视觉暂留形成连续的影像。

现在我们就用 PhotoShop 来制作一个简单的文字移动的小动画。

1. 新建一个文件，写上一个自己喜欢的文字。

得到如（ 16-8 ）的效果

 2.【窗口-动画】打开动画面板（16-9)

 

 

 

 

 

 

 

注：只有 gif 格式才支持动画，强行转化为其他格式，则所生成的动画只

有第一帧的画面。

作业

1. 制作一张网页，内容不限，题目自拟，两张页面。

2. 制作一个 gif 动画，是一章有文字移动，并且背景要有变化。