网站建设实例之某公司主页设计
,第四周,网页制作与网站设计教程,淮安信息职业技术学院计算机科学与工程系 网页制作与网站设计课程组制,第八章网站建设实例 维达制造有限公司主页设计实例 网页制作与网站设计课程讲义,第八章网站建设实例,本章要点,Photoshop中不规则形状的选取 图层中元素的排列 商标的样式设计 Photoshop中滤镜的使用方法与技巧 ImageReady中动画的制作,维达制造有限公司主页设计实例 -项目背景,第八章网站建设实例,淮安市维达科技有限公司是一家专业从事全系列各种规格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.选择企业相关的图片数幅，大小为32×32像素，以下图形式排列，把这些小图合并，以方便后面的操作，调整后如图所示。 。,维达制造有限公司主页设计实例 -效果图的制作,第八章网站建设实例,16.选择企业相关的图片数幅，大小为32×32像素，以下图形式排列，把这些小图合并，以方便后面的操作，调整后如图所示。 。,维达制造有限公司主页设计实例 -效果图的制作,第八章网站建设实例,17.还需要在画面的左侧给这个页面加个子栏目，剩下的部分就是做些小的调整，加点装饰，和注明版权所有，保存文件，如图所示。,维达制造有限公司主页设计实例 -效果图的制作,第八章网站建设实例,维达制造有限公司主页设计实例 -gif动画的制作,第八章网站建设实例,维达制造有限公司主页设计实例 -网页的导出,第八章网站建设实例,本章小节,本节习题,1.查找十个同种类型网站并与作比较。 2.总结网页效果图中滤镜的使用方法。,Photoshop中不规则形状的选取 图层中元素的排列 商标的样式设计 Photoshop中滤镜的使用方法与技巧 ImageReady中动画的制作,谢谢大家！,第八章网站建设实例,
