网站建设实例之某公司主页设计(powerpoint 26页).pptx

第四周 第八章网站建设实例第八章网站建设实例维达制造有限公司主页设计实例维达制造有限公司主页设计实例网页制作与网站设计课程讲义网页制作与网站设计课程讲义第八章网站建设实例第八章网站建设实例本章要点本章要点 Photoshop中不中不规则形状的形状的选取取图层中元素的排列中元素的排列商商标的的样式式设计Photoshop中滤镜的使用方法与技巧中滤镜的使用方法与技巧ImageReadyImageReady中动画的制作中动画的制作维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -项目背景项目背景第八章网站建设实例第八章网站建设实例淮安市维达科技有限公司是一家专业从事全系列各种规格LED显示屏的研发、制造、技术服务的企业具有一支显示行业丰富经验的专业队伍，汇集优秀的光电技术、数字电路技术及计算机技术的人才产品结合了日本、美国、台湾等先进LED数码电子显示屏的最新科技，采用世界最先进的LED显示屏专用技术随着技术的不断升级换代，工艺水平的不断提高，使我公司产品在质量、性能、价格等方面都具有很强的竞争力公司以技术为基础，视质量为生命公司的技术人员多，他们是公司的主要力量我们非常重视技术改进工作，积极采用新器件、新工艺。

能反映公司奉行“诚信为本，质量第一，优质服务，追求卓越”的方针，使公司深受广大客户信赖和赞誉相信具有竞争力的、质量过硬和服务优良的产品一定会让您满意第八章网站建设实例第八章网站建设实例1.打开Photoshop 软件，新建一个RGB文件，宽度为778像素，高度为450像素，分辨率为72dpi，保存文件命令为“维达制造有限公司.psd”2.填充背景色为蓝色，新建一图层，并在画面的左侧做出从大到小的小圆，并排列如图所示 制作思路：选中“椭圆选区工具”，在属性设置中设置“样式”为“固定大小”，宽12像素，高12像素，填充白色，依次缩小大小，然后调整间距，然后用快捷键Ctrl+J复制图层，然后链接相关的图层，对这些图层首先左对齐，然后垂直方向均匀分布，最后执行“图层” “合并链接图层”命令维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例3.进行填充白色操作，然后设置不透明度50%左右，如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例4.复复制制上上面面小小圆圆圈圈图图层层，然然后后执执行行“编编辑辑”“变变换换”“水水平平翻翻转转”命命令令（快快捷键捷键Ctrl+T），调整位置到画面的右侧，如图所示。

调整位置到画面的右侧，如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例5.打打开开素素材材图图片片“logo.jpg”，用用魔魔术术棒棒工工具具将将红红色色的的企企业业标标志志选选出出并并复复制制选区中的内容，回到实例图中粘贴企业标志图形并调整大小，如图所示选区中的内容，回到实例图中粘贴企业标志图形并调整大小，如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例6.选选中中企企业业图图标标层层，给给图图层层添添加加样样式式（外外发发光光、斜斜面面和和浮浮雕雕），效效果果如图所示如图所示. 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例7.新新建建图图层层，设设置置前前景景色色为为深深蓝蓝色色（ RGB值值070FA8），利利用用“圆圆角角矩矩形形工工具具”，在在属属性性中中设设置置为为“填填充充像像素素”模模式式，然然后后绘绘制制圆圆角角矩矩形形区区域域，然后使用然后使用“添加到形状区域添加到形状区域” ，绘制，如图所示。

绘制，如图所示维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例8.使使用用“魔魔术术棒棒工工具具”选选区区蓝蓝色色区区域域，执执行行“选选择择”“修修改改”“收收缩缩”命命令令，然后弹出然后弹出“收缩区域收缩区域”对话框，设置收缩量为对话框，设置收缩量为5像素，如图所示像素，如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例9.用用文文字字工工具具，输输入入“维维达达制制造造”，然然后后设设置置字字体体，调调整整文文字字的的位位置置，效果如图效果如图8-74所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例10.给给文文字字做做右右倾倾斜斜的的效效果果，执执行行“编编辑辑”“变变换换”“斜斜切切”命命令令，用用鼠鼠标标按按住住上上面面一一排排中中间间的的小小方方框框，向向右右拖拖动动一一个个距距离离，直直到到自自己己满满意意的的位位置置，图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例11.左左手手按按住住Ctrl键键，用用鼠鼠标标在在图图层层调调板板中中点点击击 “维维达达制制造造”图图层层，此此时时“维维达达制制造造”将将会会变变成成蚂蚂蚁蚁线线选选区区，执执行行“选选择择”“修修改改”“扩扩展展”命命令令，在在弹弹出出的的对对话话框框中中输输入入“3”，来来扩扩大大选选区区，新新建建一一个个图图层层，设设置置前前景景色色为为白白色色，使使用用“油油漆漆桶桶工工具具”填填充充选选区区，调整图层顺序后效果如图所示。

调整图层顺序后效果如图所示维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例12.选选中中刚刚刚刚填填充充白白色色的的图图层层，执执行行“选选择择”“取取消消选选择择”命命令令，去去除除蚂蚂蚁蚁线线，执执行行“滤滤镜镜”“风风格格化化”“风风”命命令令，对对该该层层进进行行风风吹吹效效果果，如图所示如图所示经经过过了了风风吹吹效效果果后后，如如果果觉觉得得效效果果不不明明显显，可可以以执执行行“滤滤镜镜”“上上次次滤滤镜操作镜操作”命令（快捷键命令（快捷键Ctrl+F）来加强风吹效果来加强风吹效果 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例13.下下面面需需要要做做内内容容部部分分，首首先先在在白白色色区区域域的的左左上上角角，用用宋宋体体打打字字“”，在在右右上上角角做做导导航航条条，栏栏目目设设定定就就根根据据企企业业所所需需而而建建，如如图图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例14.新新建建图图层层，画画一一个个矩矩形形框框。

选选择择一一种种灰灰色色，作作为为边边框框，执执行行“编编辑辑”“描描边边”命命令令，在在弹弹出出的的窗窗口口，输输入入宽宽度度为为“1”，打打开开素素材材图图片片放放入虚框中（入虚框中（“蓝天蓝天.jpg”和和“世界地图世界地图.jpg”），效果如图），效果如图8-79所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例15.复制刚才已画好的虚线到右侧，排列如图所示复制刚才已画好的虚线到右侧，排列如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例16.选选择择企企业业相相关关的的图图片片数数幅幅，大大小小为为3232像像素素，以以下下图图形形式式排排列列，把这些小图合并，以方便后面的操作，调整后如图所示把这些小图合并，以方便后面的操作，调整后如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例16.选选择择企企业业相相关关的的图图片片数数幅幅，大大小小为为3232像像素素，以以下下图图形形式式排排列列，把这些小图合并，以方便后面的操作，调整后如图所示。

把这些小图合并，以方便后面的操作，调整后如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例17.还还需需要要在在画画面面的的左左侧侧给给这这个个页页面面加加个个子子栏栏目目，剩剩下下的的部部分分就就是是做做些些小的调整，加点装饰，和注明版权所有，保存文件，如图所示小的调整，加点装饰，和注明版权所有，保存文件，如图所示 维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -效果图的制作效果图的制作 第八章网站建设实例第八章网站建设实例维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -gif动画的制作动画的制作 第八章网站建设实例第八章网站建设实例维达制造有限公司主页设计实例维达制造有限公司主页设计实例 -网页的导出网页的导出 第八章网站建设实例第八章网站建设实例本章小节本章小节 本节习题本节习题1.查找十个同种类型网站并与作比较查找十个同种类型网站并与作比较2.总结网页效果图中滤镜的使用方法总结网页效果图中滤镜的使用方法Photoshop中不中不规则形状的形状的选取取图层中元素的排列中元素的排列商商标的的样式式设计Photoshop中滤镜的使用方法与技巧中滤镜的使用方法与技巧ImageReadyImageReady中动画的制作中动画的制作谢谢大家！谢谢大家！第八章网站建设实例第八章网站建设实例1、有时候读书是一种巧妙地避开思考的方法。

4月-224月-22Monday, April 4, 20222、阅读一切好书如同和过去最杰出的人谈话12:30:1712:30:1712:304/4/2022 12:30:17 PM3、越是没有本领的就越加自命不凡4月-2212:30:1712:30Apr-2204-Apr-224、越是无能的人，越喜欢挑剔别人的错儿12:30:1712:30:1712:30Monday, April 4, 20225、知人者智，自知者明胜人者有力，自胜者强4月-224月-2212:30:1712:30:17April 4, 20226、意志坚强的人能把世界放在手中像泥块一样任意揉捏04四月202212:30:17下午12:30:174月-227、最具挑战性的挑战莫过于提升自我四月2212:30下午4月-2212:30April 4, 20228、业余生活要有意义，不要越轨2022/4/412:30:1712:30:1704 April 20229、一个人即使已登上顶峰，也仍要自强不息12:30:17下午12:30下午12:30:174月-2210、你要做多大的事情，就该承受多大的压力4/4/2022 12:30:17 PM12:30:1704-4月-2211、自己要先看得起自己，别人才会看得起你。

4/4/2022 12:30 PM4/4/2022 12:30 PM4月-224月-2212、这一秒不放弃，下一秒就会有希望04-Apr-2204 April 20224月-2213、无论才能知识多么卓著，如果缺乏热情，则无异纸上画饼充饥，无补于事Monday, April 4, 202204-Apr-224月-2214、我只是自己不放过自己而已，现在我不会再逼自己眷恋了4月-2212:30:1704 April 202212:30谢谢大家谢谢大家1、每一个成功者都有一个开始勇于开始，才。