实训二 游泳的鱼、我爱我家.doc

保定职业技术学院计算机信息工程系网站规划与开发技术实训二 实训案例一、实训目的1、了解实验内容2、熟悉“游泳的鱼”、“美术组网站”等案例3、了解案例分析和设计的思路，掌握案例使用的技术二、实训要求1、遵守实验制度。2、按要求完成实验三、实训学时28学时四、案例及制作过程案例一 游泳的鱼一、界面设计1、主题接受与主题分析 本网站类别为 个人网站，网站名称是“游泳的鱼”，设计要求：清新、活泼、能够反映出个人网站不拘一格的特征。2、创意构思与素材选择 网站类型初步选定风格是色彩亮丽、布局活泼自由。网站名称为“游泳的鱼”，在界面设计中需要一些物象，设计者由此进行想象，拓展意象空间：鱼、水、浪花、云朵、天空、水珠、沙滩、贝壳、珍珠、卡通人物由于网页设计意象容纳空间有限,这里素材选取了鱼、水两种最为单纯的造型，鱼儿形象贯穿页面。为了突出欢快活泼的感觉，拟选用多种色彩，如红、绿、青、黄等色彩。为了表现个人网页的轻松自由，页面构图界面采用了散点式构图，选择页面以规整来突出自由，鱼儿安排在画框之外，主页面则将规整寓于散点式构图之中，使浏览者的目光能够集中到某几个点上。在字体方面，网站也很有讲究。二、选择页面设计过程1、 新建一个大小设置为780*484象素的文件。2、 利用矩形选取工具拉出一个矩形选框，大小如图所示。并将前景色设置为“#0393DC”，如图。3、 新建一层，执行菜单命令“编辑描边”在弹出对话框中将描边宽度设置为5像素，色彩设置为前景色，位置设置为“居中”，对刚建的矩形选框进行描边。如图。4、 新建一层，利用矩形选取工具在蓝色描边的矩形下半部分新建一个矩形选区，如图所示，利用“油漆桶”工具以前景色填充新矩形。5、 去选取。执行菜单命令“滤镜扭曲波浪”，设置如图所示的参数值。6、 利用“橡皮擦”和“画笔”工具，将波浪的下边缘与蓝色框处理为如图所示.7、 给波浪增加一点光感。在波浪层上建立图层蒙版，将画笔工具笔尖设置为“喷枪柔边园45”，不透明度设置为“25%”。如图所示。8、 利用笔尖将蒙版画为如图所示状态，此时水上出现光线效果。如图所示。9、 打开两幅鱼的素材，并将拖拽到网页中，并调整其大小位置，如图所示10、 添加文字。前景色设置为“#23CBEF”,点击文字工具，字体设置为“方正剪纸简体”，字号“42点”，加粗，并输入文字“游泳的鱼”。11、 打开素材图片“波浪.jpg”，去除图像其他部分，仅保留部分波浪行头发，利用剪切工具剪切如图所示部分。12、 对剪切的图像进行处理。执行菜单命令“图像调整亮度对比度”，将“亮度”提高“20”，“对比度”提高“50”。13、 将处理好的图片储存为“波浪1.psd”，注意一定是“PSD”格式，因为下一步要根据波浪的形状对文字进行“置换”，而“置换”处理只支持“PSD”格式。14、 我们回到当前“游泳的鱼”文字层。本步骤为通过置换滤镜对文字进行艺术化处理。执行菜单命令“滤镜扭曲置换”，经出现是否栅格化文字对话框。点击“好”，进入“置换”对话框，将水平设置为“5”，勾选“拼贴”和 “折回”，点击好，将出现“选一个置换图”对话框，选中储存的“波浪.psd”，文字将产生变化。15、 为画面增添一些色彩。新建一层，用矩形选取工具选中文字的大概的位置。如图所示。16、 将前景色调整为“#CC60D7”，利用“油漆桶”工具将选区填充。注意不要区选区。如图所示。17、 将图层的不透明度调整为“60%”，点击矩形选取工具，按住“ALT”建。鼠标十字右下方出现一个小的减号，此时减去一个“游”字，对应的选区，将前景色调整为“#D6524D”利用“油漆桶”工具将选区填充。注意不要取选区。18、 重复上步的方法，将前景色调整为“#47D583”,填充。如图所示19、 重复上步的方法，将前景色调整为“#F6B33E”,填充，恢复图层“100%”的不透明度。20、 色块的形状比较死板，执行菜单命令“滤镜扭曲波纹”，波纹的 大小为“中”，数量为“350%”。21、 执行菜单命令“滤镜扭曲波纹”，如图所示设置对话框。并点击随机化按钮，调试出满意的波形。22、 将本图层的混合模式更改为“色相”。对文字进行调整23、 新建一层，利用椭圆选取工具画一个正圆，用白色填充。24、 为了使圆形产生立体感和珍珠的光泽，调试图层样式，如图所示。25、 继续调整“斜面与浮雕”面板，在光泽等高线类型中，点击调出“等高线编辑器”设置映射曲线如图所示26、 在“等高线”面板中设置等高线如图27、 选择“内阴影”，将不透明度更改“10%”。28、 选择“投影”，将不透明更改为“20%”，距离为“3像素”，大小为“6像素”如图所示29、 将带有图层样式的珍珠转化为普通层。新建一层，注意建在珍珠层的下方，点击珍珠层，执行菜单命令“图层向下合并”。30、 执行自由变换命令将珍珠调整其合适的大小。31、 复制两个珍珠层，并调整其大小位置。32、 为珍珠增添倒影。复制珍珠层，执行菜单命令“编辑-变换垂直翻转”将翻转完成的图层模式设置为“叠加”，填充值设置为“35%”。33、重复步骤32，为另外两颗珍珠加上倒影，微调各部分的位置，如图所示。案例二、某学校美术组网站界面设计一、界面设计1、主题接受和主题分析 这是一个学校美术组的主页，它是一个老师与学生之间的一座桥梁，也是老师与老师之间的一个交流和宣传的平台。首先考虑到这个主页的浏览群主要是学生还有老师，浏览群中年轻人居多。所以这个主页可以做得个性一点，形式活泼，布局现代一点。又考虑到是学校美术组的主页并不是个人主页，所以在颜色搭配上不能过于艳丽和跳跃。2、创意构思与素材选择 考虑到以上的种种因素，将主色调定为类似牛皮纸的浅土黄色，单纯的土黄色可能会给人一种单调的感觉，加上了底纹处理为牛皮纸效果。为了突出个性，主页头和底都做了裂纹的 ，整个网页 看起来更具立体感。在整体布局上采用了现在韩国比较流行的“大头”设计，加大了顶部菜单Banner在整个网页中的比重，整个网页看起来比较大方。 关于图片素材，首先需要依仗动作活泼的集体照片。此外设计希望得到牛皮纸的效果，所以需要扫描一些牛皮纸文理的图片。为了搭配牛皮纸质感和颜色还需要一张破旧墙的背景图片来做照片的背景。进入主页面之前的选择页还需要一张蓝天的图片。二、主页设计过程第一步：Banner和主菜单的制作步骤1：打开Photoshop新建一个文件，命名为“美术组主页”。宽度为778像素，高度为850像素。分辨率为72像素/英寸。颜色模式为RGB颜色，背景颜色为白色。步骤2：制作背景。将扫描得到的牛皮纸图案直接拖拽到新建的白纸上，并将其命名为牛皮纸背景。步骤3：打开素材里的集体照片，直接将照片拖入。将照片图层命名为“组里照片”。选中“组里照片”图层。按快捷键“Ctrl+T”打开自由变换工具。按住键盘“Shift”的同时放缩到合适大小，并移动此图层到合适位置。步骤4：选择橡皮擦工具，具体设置如图所示，擦掉照片的背景和不需要的部分。步骤5：选择“牛皮纸背景“图层，选择套索工具，用套索工具划出纸张撕裂的大体效果（注意要一气呵成），按键盘Delete键删除选择区域，具体效果如图所示。步骤6：将“牛皮纸背景“图层直接拖拽到图层的最顶层。点击前景色，出现拾色器，将鼠标移向牛皮纸，将前景色选择和牛皮纸大体相同的颜色。按快捷键“B”选择铅笔工具，把边缘画的更像撕裂的牛皮纸（这是一个工作量很大，并且很重要的步骤）。步骤7：打开破旧墙面的素材，将墙面的素材拖拽到正在制作的首页中，调整其大小位置适中，并将图层命名为“背景墙”，将此图层放到“组里照片”与“牛皮纸背景”图层之间。步骤8：新建一个图层，按快捷键T选择文字工具，在照片的右方键入“我爱我家”，字体为珊瑚简体，字体颜色为黑色，“我”字体大小为28点，“爱、家”字体大小为53点。在“我爱我家”图层上右击点选“混合选项”，为其增加描边和投影具体参数如图所示。步骤9：按快捷键T选择文字工具，键入“幼师美术组”，字体为方正粗倩简体，字体大小为16点，颜色为白色，加入投影效果；新建图层，按快捷键T选择文字工具，键入WWW.QISHIGU.CN 字体为04b_09字体（现在比较流行的一种字体，叫04字体，是一系列像素级字体，大家可以在互连网上搜索到并能免费下载），颜色为黑色，字体大小为10点，选择移动工具，按快捷键“Ctrl+T”选择自由变形工具，按住Shift键对WWW.QISHIGU.CN 进行90度旋转，并移至左上方；键入时间栏字和设为主页等字样，具体效果如图所示。步骤10：主菜单的制作，新建一图层，按快捷键T选择文字工具，在组里照片下面的位置键入“组内简介”字体大小为14点，字体样式为方正粗倩简体，字体颜色RGB值为125，117，117。再新建一个图层，按快捷键T选择文字工具，在组内简介下键入英文“introduction”字体大小为6点，字体样式为04b_20，字体颜色RGB 97,86,71。将中文和英文手动右对齐，为了隔开每一个菜单文字，我们下面制作一条竖的分割线。我们再新建一个图层，为其命名为“分割线”，按快捷键M选择矩形选框工具，在菜单文字右侧框选一个长方形的区域，设置前景色RGB值为109，99，85。按快捷键“Alt+Delete”，用前景色填充选择区域，按快捷键“Ctrl+T”选择自由变形工具将其大小调整到合适大小和位置。在图层里，选择组内简介图层，分别在introduction和分割线图层左侧打上连接符号，将这三层连接（打上连接以后，移动一个图层时与其连接的其他图层将一起被移动，在我们调节几个主菜单位置时，可以减少必要的麻烦）。依次做出其他菜单。第二步：内容及大框架的制作步骤1：新建一个图层，为其命名为“内容大底”，按快捷键M选择矩形选框工具，在主菜单下方画出一个长方形的选择区域，大小位置如图，把这个图层的不透明度调为56%，为其加上描边效果，描边颜色的RGB值为186，178，171。步骤2：新建一个图层并将其命名为“组内简介底“，按快捷键M选择矩形选框工具，框选一个长方形的区域，把前景色的RGB值设置为204，196，188，按快捷键“Alt+Delete”用前景色填充所选区域，按快捷键“Ctrl+D”取消选区。选择自由变形工具，将其调整到合适大小和合适位置。按快捷键M选择矩形选框工具，框选一个小的区域，在选择区域上右击，在右键快捷菜单中选择“变换选区”，在属性栏中将选区角度调为45度，并将其移动到要剪切的位置，按Delete键删除选择区域。步骤3：新建一个图层，为其命名为“右箭头元素”，按快捷键M选择矩形选框工具，按住Shift键拖拽出一个小正方形，将前景色的RGB值设置为255，120，0。用前景色填充正方形选择区域，按快捷键“Ctrl+D”取消选区。然后，按住Alt键对刚才做的小矩形进行拖拽复制，如图所示复制出8个小正方形，组成一个向右上的箭头。（每拖拽一次在图层栏里，将自动生成一个新的图层，并以“原文件 副本 数字”进行命名）我们一共复制七个新的图层，下面我们将其合层，选择“右箭头元素图层”，将其他复制的图层进行连接，如图 。再按快捷键“Ctrl+E” 合并所链接图层。并将合并后的箭头放缩到合适大小，并调整到合适位置。步骤4:新建一个图层，按快捷键T选择文字工具，键入“组内简介”,字体大小设置为12点，字体为方正综艺简体，颜色为黑色，为其加上描边效果，描边颜色设置为白色，描边大小设置为2像素。新建一个图层，按快捷键T选择文字工具，在“组内简介”右侧键入引文“Introduction”。字体大小设置为6点，字体为04b_20，颜色的RGB值为136，130，125.步骤5：新建一个图层，为其命名为“下划线”，按快捷键M选择矩形选框工具，在“组内简介”的下方拖拽一个长方形的区域，用刚才设置的前景色进行填充，具体效果如图。在图层面板中，选择“下划线”图层，点击图层面板底部的“添加图层蒙版”按钮，为其添加一个蒙版。选择“下划线”图层中的蒙版图层，按快捷键G选择渐变工具。在渐变属性栏中选择线性渐变，然后点击线性按钮左边的长方形编辑键打开减半编辑器，具体设置如图。按住Shift键，再按住鼠标左键，从长方形的左端一直拖到右端（按住Shift键是为了把我们的拖动锁定成水平线）。组内简介这一块儿就制作完成了，按照制作“组内简介”的方法制作出“网上展厅”和“美教新闻”。第三步：“小版报”和“常用链接”的制作步骤1:新建一个图层，为其命名为“小板报木板”，按快捷键M选择矩形选框工具，在“组内简介”栏左侧选一个长方形区域，将前景色的RGB值设置为237，212，182.用前景色填充所选区域。步骤2：新建一个图层，为其命名为“木板头”，按快捷键M选择矩形选框工具，在“小板报木板”上方框选一个小的长方形区域，用前景色填充，在Photoshop菜单栏选择编辑变换扭曲，将小的长方形编辑成一个梯形。按快捷键“Ctrl+E”将其与“小板报木板”合层，并为图层添加投影效果。具体参数如图所示。步骤3：新建一个图层，按快捷键T选择文字工具，键入“小板报”，字体大小设置为18点，字体为方正综艺简体，颜色的RGB值为75，64，49，为其加上描边效果，描边颜色设置为白色，描边大小设置为1像素。并为其添加投影效果。新建一个图层，按快捷键T选择文字工具，键入英文“MORE”，字体大小设置为14点，字体为04b_20颜色的RGB值为126，106，94.步骤4：新建一个图层，为其命名为“小板报纸”，按快捷键M选择矩形选框工具，在“小板报木板”上框选一个长方形区域，将前景色的RGB值设置为255，255，255.用前景色填充所选区域。按快捷键M选择矩形选框工具，框选一个小的区域，在选择区域上右击，在右键快捷键菜单中选择“变换选区”，在属性栏中将选区角度调为45，并将其移动到要剪切的位置，按Delete键删除选择区域。步骤5：新建一个图层，为其命名为“小板报纸折角”，按快捷键P选择钢笔工具，画出卷页的形状，细部和形状可以通过Ctrl键配合鼠标左键进行调节，具体形状和位置如图所示。按快捷键Ctrl+Enter将我们刚才用钢笔工具画的路径变为选区，按快捷键G选择渐变工具，选择线性渐变，按住鼠标左键由折角选区的左端向右端拖拽并释放鼠标左键，将选择区域用渐变色填充。按快捷键“Ctrl+D”取消选区。步骤6：新建一个图层，为其命名为“小板报钉”，选择椭圆选框工具，按住Shift键。框选一个圆形区域，按快捷键G选择渐变工具，在渐变属性面板中选择径向渐变，在圆形选择区域左上方向右下方拖拽鼠标对选择区域进行填充，按快捷键“Ctrl+D”取消选区，如图所示。按快捷键“Ctrl+T”选择自由变形工具将其大小跳到合适大小和位置。并为其添加投影，具体设置如图。按快捷将V选择移动工具，按住Alt 键将“小板报钉”图层复制，并移动到如图所示。步骤7：新建一个图层，为其命名为“常用链接底”。按快捷键M选择矩形选框工具，在“小板报”栏下面选取一个长方形区域，将前景色的RGB值设置为133，103，88.用前景色填充所选区域，如图所示。点击图层面板底部的“添加图层蒙版”按钮，为其添加一个蒙版。选择“常用链接底”图层中的蒙版图层，按快捷键G选择渐变工具。在渐变属性栏中选择线性渐变。按住Shift键，再按住鼠标左键，从长方形的右端一直拖到左端。将图层的不透明度调为50%。新建一个图层，按快捷键T选择文字工具，键入“常用链接”，字体大小设置为12点，字体为方正粗倩简体，颜色为黑色，为其加上描边效果，描边颜色设置为白色，描边大小设置为2像素。为其添加投影效果，效果如图所示。步骤8：底部和版权信息的制作按照制作logo的方法制作底部版区信息，效果如图。按快捷键T选择文字工具，键入版区信息地址、电话、联系方法等，字体大小设置为12点，字体为宋体，颜色的RGB值为120，110，93.最终效果如图所示。（2）选择页面设计步骤1：按快捷键Ctrl+N新建一张纸，为其命名“top”，具体设置如图所示。步骤2：新建一个图层，为其命名为“灰度”，按快捷键U选择圆角矩形工具。在圆角矩形工具的属性面板中，将圆角半径设置为15%，在中央拖拽出一个圆角矩形路径。按快捷键Ctrl+Enter将路径变为选区，设置前景色的RGB值为165，165，165，按快捷键Alt+Delete用前景色填充选择区域。按快捷键Ctrl+D取消选择区域。按快捷键Ctrl+T选择自由变形工具，调节其大小和位置，如图所示。步骤3：新建一个图层，命名为“添角”，按快捷键M选择矩形选框工具，在圆角矩形左上角框选一个长方形区域，按快捷键Atl+Delete,用前景色填充所选区域，按快捷键Ctrl+D取消选择区域。按快捷键V选择移动工具，将矩形左上角添为直角，如图所示。按照同样的方法将右下角也添为直角。选中“灰底”图层，将“添角”的两个图层与之连接，按快捷键Ctrl+E将这三个链接图层合并。步骤4：新建一个图层，按快捷键T选择文字工具，在圆角矩形的右方键入“我爱我家”，字体为珊瑚简体，字体颜色为黑色，“我”字体大小为28点，“爱、家”字体大小为53点。在“我爱我家”图层上右击点选“混合选项”，为其添加描边和投影具体参数如图所示。步骤5：新建一个图层，将其命名为分割线，按快捷键M选择矩形选框工具，在“我爱我家”右侧框选一个长方形区域,设置前景色RGB值为103，101，101.按快捷键“Alt+Delete”用前景色填充所选区域，按快捷键“Ctrl+T”选择自由变形工具将其大小跳到合适大小和位置：新建一个图层，按快捷键T选择文字工具，分割线右方键入“幼师美术组”，字体为方正粗倩简体，字体颜色为白色，字体大小为16点，并为其加上投影效果。具体设置如图：新建一个图层，按快捷键T选择文字工具，“幼师美术组”下方键入英文“I LOVE MY FAMILY”，字体为04b_20，字体颜色的RGB值为115，115，115，字体大小为6点，