Photoshop基础与技能实训教程 第十二章 网页静态页面设计与制作.ppt

图12?43 投影图层样式参数设置 返 回 图12?44 添加图层样式后的效果 返 回 图12?45 效果图 返 回 图12?46 网上冲印店之网上冲印页面最终效果 返 回 图12?47 分割后的效果 返 回 图12?48 四联优化图像 返 回 图12?10 执行步骤（7） 、 （8）得到的效果 返 回 图12?11 排列后效果 返 回 图12?12 图层合并前 返 回 图12?13 图层合并后 返 回 图12?14 添加、调整文本后效果 返 回 图12?15 渐变填充后效果 返 回 图12?16 绘制蝴蝶后效果 返 回 图12?17 最后调整效果 返 回 图12?18 调整后效果 返 回 图12?19 投影图层样式设置 返 回 图12?20 圆角矩形调整后效果 返 回 图12?21 文本设置后效果 返 回 图12?22 填充后效果 返 回 图12?23 添加选区 返 回 图12?24 添加蒙版后的图像效果 返 回 图12?25 添加蒙版后的图像效果 返 回 图12?26 图像调整后效果 返 回 图12?27 描边后效果 返 回 图12?28 添加图案后的效果 返 回 图12?29 填充渐变后的圆角矩形 返 回 图12?30 矩形方框填充后效果 返 回 图12?31 线框与文本设置后效果 返 回 图12?32 登录界面设计 返 回 图12?33 第三个白色矩形 返 回 图12?34 配送框的设置 返 回 图12?35 矩形颜色与文本添加、直线绘制后的效果 返 回 图12?36 网页最终效果 返 回 图12?38 “top-left”组中保留下的图层 返 回 图12?39 合并使用蒙版图层时出现的对话框 返 回 图12?40 移动对象后看到的效果 返 回 图12?41 调整图层倾斜度产生的效果 返 回 图12?42 文本输入后效果 返 回 第十二章 网页静态页面设计与制作 12.1 网页静态页面设计基本知识 12.2 网页静态页面设计案例操作 12.1 网页静态页面设计基本知识 1. 静态页面 静态页面设计不包含在服务器端运行的任何脚本，其内容形式固定不变。静态网页设计就是利用静态网页中所包含的元素，对网页进行美化处理，力求使网页界面美观舒适，为网页所承载的内容提供一个良好的展示环境，达到最好的展示效果。 静态网页在公共网站、政府网站中的使用最为广泛。 下一页 12.1 网页静态页面设计基本知识 2. 网页界面的组成部分 （1）Logo 标记 （2）导航条 （3）横幅（Banner） （4）文字 （5）图形图像 下一页 上一页 12.1 网页静态页面设计基本知识 3. 网页的几种布局形式 （1） “同”形布局：网页布局呈“同”字形，是一些大型网站所喜欢的类型，上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部 分，最下面是网站的基本信息、联系方式、版权声明等。 （2） “厂”形布局：网页上面是标题及广告横幅，接下来左（右）侧是一窄列导航链接，右（左）列是很宽的正文，下面可以有一些网站的辅助信息。 （3） “工”形布局： “工”形网页布局与“厂”形布局类似，上面是标题及广告横幅，下面是左右等宽的正文区，最下面是网站的一些基本信息、联系方式和版权声明等。 上一页 返 回 12.2 网页静态页面设计案例操作 1. 网站首页设计 网站首页设计效果如图12?1 所示。 下一页 12.2 网页静态页面设计案例操作 首页界面制作操作步骤如下： （1）新建 Photoshop 图像文件，参数设置如图12?2所示。 （2）在图层面板点击【创建新组】按钮，给新组命名为“top” ，在页面设计中，将所有网页头部所用图层全部放置在该组中。在“top”组下新图层，重命名为“bg” ，在图像窗口中用矩形选框工具绘制出一个矩形，将前景色设置为“R：235，G：255，B：204，H：84°，S：20%，B：100%” ，按 Alt + Delete组合键给选区着前景色。 （3）新建图层，重命名为“line1” ，前景色颜色设置为“R：152，G：203，B：0，H：75° ，S：100%，B：80%” ，选择“矩形选框工具” ，在图像窗口顶部创建一个细长的矩形选区，按 Alt + Delete组合键给选区着前景色。效果如图 12?3 所示。 下一页 上一页 12.2 网页静态页面设计案例操作 （4）新增图层，重命名为“line2” ，在图层 line2 中，运用椭圆选框