《《精编》网站建设实例之某公司主页设计》由会员分享，可在线阅读，更多相关《《精编》网站建设实例之某公司主页设计（25页珍藏版）》请在金锄头文库上搜索。
1、 第四周 网页制作与网站设计教程 淮安信息职业技术学院计算机科学与工程系网页制作与网站设计课程组制 第八章网站建设实例维达制造有限公司主页设计实例 网页制作与网站设计课程讲义 第八章网站建设实例 本章要点 Photoshop中不规则形状的选取图层中元素的排列商标的样式设计Photoshop中滤镜的使用方法与技巧ImageReady中动画的制作 维达制造有限公司主页设计实例 项目背景 第八章网站建设实例 淮安市维达科技有限公司是一家专业从事全系列各种规格LED显示屏的研发 制造 技术服务的企业 具有一支显示行业丰富经验的专业队伍 汇集优秀的光电技术 数字电路技术及计算机技术的人才 产品结合了日本
2、 美国 台湾等先进LED数码电子显示屏的最新科技 采用世界最先进的LED显示屏专用技术 随着技术的不断升级换代 工艺水平的不断提高 使我公司产品在质量 性能 价格等方面都具有很强的竞争力 公司以技术为基础 视质量为生命 公司的技术人员多 他们是公司的主要力量 我们非常重视技术改进工作 积极采用新器件 新工艺 能反映公司奉行 诚信为本 质量第一 优质服务 追求卓越 的方针 使公司深受广大客户信赖和赞誉 相信具有竞争力的 质量过硬和服务优良的产品一定会让您满意 第八章网站建设实例 1 打开Photoshop软件 新建一个RGB文件 宽度为778像素 高度为450像素 分辨率为72dpi 保存文件命
3、令为 维达制造有限公司 psd 2 填充背景色为蓝色 新建一图层 并在画面的左侧做出从大到小的小圆 并排列如图所示 制作思路 选中 椭圆选区工具 在属性设置中设置 样式 为 固定大小 宽12像素 高12像素 填充白色 依次缩小大小 然后调整间距 然后用快捷键 Ctrl J 复制图层 然后链接相关的图层 对这些图层首先左对齐 然后垂直方向均匀分布 最后执行 图层 合并链接图层 命令 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 3 进行填充白色操作 然后设置不透明度50 左右 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 4 复制上面小圆圈图层 然后
4、执行 编辑 变换 水平翻转 命令 快捷键 Ctrl T 调整位置到画面的右侧 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 5 打开素材图片 logo jpg 用魔术棒工具将红色的企业标志选出并复制选区中的内容 回到实例图中粘贴企业标志图形并调整大小 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 6 选中企业图标层 给图层添加样式 外发光 斜面和浮雕 效果如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 7 新建图层 设置前景色为深蓝色 RGB值070FA8 利用 圆角矩形工具 在属性中设置为 填充像素 模式 然后
5、绘制圆角矩形区域 然后使用 添加到形状区域 绘制 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 8 使用 魔术棒工具 选区蓝色区域 执行 选择 修改 收缩 命令 然后弹出 收缩区域 对话框 设置收缩量为5像素 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 9 用文字工具 输入 维达制造 然后设置字体 调整文字的位置 效果如图8 74所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 10 给文字做右倾斜的效果 执行 编辑 变换 斜切 命令 用鼠标按住上面一排中间的小方框 向右拖动一个距离 直到自己满意的位置 图所示 维达
6、制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 11 左手按住 Ctrl 键 用鼠标在图层调板中点击 维达制造 图层 此时 维达制造 将会变成蚂蚁线选区 执行 选择 修改 扩展 命令 在弹出的对话框中输入 3 来扩大选区 新建一个图层 设置前景色为白色 使用 油漆桶工具 填充选区 调整图层顺序后效果如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 12 选中刚刚填充白色的图层 执行 选择 取消选择 命令 去除蚂蚁线 执行 滤镜 风格化 风 命令 对该层进行风吹效果 如图所示 经过了风吹效果后 如果觉得效果不明显 可以执行 滤镜 上次滤镜操作 命令 快捷键 C
7、trl F 来加强风吹效果 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 13 下面需要做内容部分 首先在白色区域的左上角 用宋体打字 在右上角做导航条 栏目设定就根据企业所需而建 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 14 新建图层 画一个矩形框 选择一种灰色 作为边框 执行 编辑 描边 命令 在弹出的窗口 输入宽度为 1 打开素材图片放入虚框中 蓝天 jpg 和 世界地图 jpg 效果如图8 79所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 15 复制刚才已画好的虚线到右侧 排列如图所示 维达制造有限公司主页设计
8、实例 效果图的制作 第八章网站建设实例 16 选择企业相关的图片数幅 大小为32 32像素 以下图形式排列 把这些小图合并 以方便后面的操作 调整后如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 16 选择企业相关的图片数幅 大小为32 32像素 以下图形式排列 把这些小图合并 以方便后面的操作 调整后如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 17 还需要在画面的左侧给这个页面加个子栏目 剩下的部分就是做些小的调整 加点装饰 和注明版权所有 保存文件 如图所示 维达制造有限公司主页设计实例 效果图的制作 第八章网站建设实例 维达制造有限公司主页设计实例 gif动画的制作 第八章网站建设实例 维达制造有限公司主页设计实例 网页的导出 第八章网站建设实例 本章小节 本节习题 1 查找十个同种类型网站并与作比较 2 总结网页效果图中滤镜的使用方法 Photoshop中不规则形状的选取图层中元素的排列商标的样式设计Photoshop中滤镜的使用方法与技巧ImageReady中动画的制作 谢谢大家 第八章网站建设实例
