《网页开发工具》第四讲广告条和首页制作.ppt

《《网页开发工具》第四讲广告条和首页制作.ppt》由会员分享，可在线阅读，更多相关《《网页开发工具》第四讲广告条和首页制作.ppt（35页珍藏版）》请在三一办公上搜索。

1、第四讲 广告条和首页制作,4.1 广告条制作,商业网站不可或缺的就是广告条。广告条能否引起用户的单击欲望，直接影响网站的收入，而其美观度会影响整个网站的风格。广告条的制作设计文字特效、图片处理等手段，对样式、滤镜、变换等等PS中的技术都会有所涉及。PS中的动画窗口将是我们制作较小型变换的主要工作界面。,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,实例1-简单的动画广告制作：,1、新建文档，350*130像素，导入一副背景图片。2、增加一个新的填充图层（渐变），颜色为（31，142，2133，28，48），并设置混合模式为强光。3、调入一个图形在画面左侧，并添加外

2、发光样式。4、加入文字。5、打开动画窗口(【窗口】|【动画】），复制该帧，在最后一帧中移动文字的位置，单击“过渡动画帧”按钮来添加帧数，单击播放动画按钮即可。,4.2 首页制作,网页设计是指对网站整体页面的设计，包括页面的风格、配色、布局、内容等。网页设计包含的内容非常多，如网站本身的文字、图片制作以及网站的主题定位、形象包装和宣传营销等。网页设计要有统一协调的主题；色彩、图片的应用要有规划；还要保持网页的整体一致性。主要网站类型：企业网站、游戏网站、音乐网站、电子商务网站、个人博客等等。,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和

3、首页制作,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,2、首页制作基本步骤：布局构思；颜色搭配；建立参考线；LOGO区制作；主要图片区制作；导航条制作；细节修饰如文字添加等；调整。,网页开发工具第四讲 广告条和首页制作,实例1-企业网站首页制作分析及步骤步骤1：新建文档，840*500像素大小，RGB，72PPI。步骤2：布局构思，建立参考线（【视图】|【新建参考线】），可以将鼠标移动到参考线上调整位置。多次操作得到一张整体布局图。步骤3：颜色搭配，根据素材颜色确定主题风格为红色，为避免过于艳丽，用黑白灰颜色来进行搭配。打开

4、素材文件，利用工具栏中的吸管工具确定颜色（R:154,G:0,B:0)，此处还可使用配色软件进行颜色搭配。,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,步骤2：建立参考线。,网页开发工具第四讲 广告条和首页制作,步骤3：新建一个图层(取名为背景颜色），建立选区，并利用油漆桶进行填色。,网页开发工具第四讲 广告条和首页制作,步骤4：新建一个图层（LOGO)，建立左边矩形选区，打开LOGO素材文件进行复制粘贴。,网页开发工具第四讲 广告条和首页制作,步骤5：新建一个图层（主体图片)，建立中间矩形选区，打开素材文件进行复制粘贴。,网页开发工具第四讲 广告条和首页制作,

5、步骤6：如图片超出参考区域，可创建蒙版进行屏蔽（根据参考线建立选区，单击图层面板中的添加矢量蒙版按钮即可）。,网页开发工具第四讲 广告条和首页制作,步骤7：新建图层（取名为导航），在其中输入文字并加上图层样式进行简单导航条制作。,网页开发工具第四讲 广告条和首页制作,步骤8：新建图层（取名为图标），在右下角加入一个小图标与整体呼应。,网页开发工具第四讲 广告条和首页制作,步骤9：新建图层，在其中输入标题等文字，完成页面制作。,实例2-“主题短片”奥运征集活动首页制作分析步骤1：新建文档，1000*700像素大小，RGB，72PPI。步骤2：布局构思，建立参考线得到一张整体布局图。步骤3：颜色搭

6、配，根据素材颜色确定主题风格为蓝色，字体使用白色。,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,网页开发工具第四讲 广告条和首页制作,步骤2：建立参考线。,网页开发工具第四讲 广告条和首页制作,步骤2：编辑渐变（3，3，3）-（12，64，114）-（6，29，47）-（29-82-132），填充，下面两个矩形区域颜色为（48，99，152）和（16，80，144）。,网页开发工具第四讲 广告条和首页制作,步骤3：新建图层（主体图片1），打开素材图片，复制到图层中并调整位置。,网页开发工具第四讲 广告条和首页制作,步骤4：新建图层，将素材2中的水立方复制并水平翻

7、转，稍微变小。在两幅图片后面用画笔描上黑色边缘。,网页开发工具第四讲 广告条和首页制作,步骤5：按住CTRL键，单击水立方图片所在的层，再单击“图层”|“新建调整图层”|“亮度/对比度”（也可直接在图层面板中单击”创建新的填充或调整图层“按钮），设置亮度为-50，降低亮度，烘托前后关系。,网页开发工具第四讲 广告条和首页制作,步骤6：新建图层，输入文字，添加“外发光”图层样式，调整文字间距和位置。此时注意在图层面板中建立一个图层组，取名为背景，将刚才制作的与背景有关的图层全部移入该组，以免面板中显示过多，点击组旁的三角箭头即可将组打开或关闭。,网页开发工具第四讲 广告条和首页制作,步骤7：使用

8、矩形工具绘制一个超出画面的矩形，点击“添加锚点工具”在矩形中间上下各加一个锚点，再使用直接选择工具拖动新建的两个锚点并拖动调节杆，将直线变为曲线。,网页开发工具第四讲 广告条和首页制作,步骤8：曲线调整完毕，为图层添加投影样式。,网页开发工具第四讲 广告条和首页制作,步骤9：将该图层复制两次，分别挪动位置，进行调节，使得三条曲线形成层叠的感觉。,网页开发工具第四讲 广告条和首页制作,步骤10：用圆角矩形绘制活动区，要超出画面之外。添加图层样式：投影、渐变叠加（16，80，144124，218，243）、描边（81，143，159）。,网页开发工具第四讲 广告条和首页制作,步骤11：在活动区中加入文字，将奖品图片放置在画面中，并添加“描边”图层样式。,网页开发工具第四讲 广告条和首页制作,步骤12：现在该做上方的导航条了，新建一个组来放置与该导航有关的所有图层。,网页开发工具第四讲 广告条和首页制作,步骤13：页面中间的可变型导航制作。,步骤14：加上一些文字增加页面效果，完成！,网页开发工具第四讲 广告条和首页制作,