PS网页制作

PS网页制作 1 PS大作业 一(首先制作木纹背景 1. 新建文件，背景:白色，1360×2000px,分辨率:72像素/英寸,RGB模式 2. 执行滤镜—杂色—添加杂色，数量:150% ，高斯分布，勾选单色。 3. 执行滤镜—模糊—动感模糊，角度:90度，距离:48像素 4. 为纹理上色:执行图像—调整—色相/饱和度 ，勾选着色，色相:34，饱和 ，明度:0 度:25 5. 裁剪掉上下两边不完整的纹理。 6. 二(版头 1.把图馆图片移到页面中，CTRL+T变换大小。 2.选择圆角矩形工具画出一个矩形形状，把它移到图书馆图层下面 3. 单击右键图书馆图层，选择剪切蒙版，调整好位置。 4.添加图层样式:投影:光照角度:120，适当调整投影距离;勾选外发光。 2 5.把实验楼图片移到页面中，具体步骤如上。 如图所示: 7. 在右上角打上“桂林航天工业高等专科学校”，画一条黑线再打上 “艰苦奋斗，自强日新”调整好大小。 8.在图片旁边打文字，如图所示 3 9在左下方打入“团结”，然后栅格化图层。 10.按住ALT键不放，选中团结图层，按键盘的上键和左键，多按几下，就会出现立体效果。 11.再将该副本图层合并，以此依次以下几个文字。 三.制作按钮及虚线 1.新建一个组，在组里新建一个图层，命名为按钮及虚线。 4 2.选择圆角矩形工具，再选择路径，画出一个矩形路径。 3.再把矩形路径转变成选区。按CTRL单击按钮图层。 选择渐变工具，设置颜色为 中间色为 末尾色为 4.由下到上填充渐变 5 5.选择-》修改-》收缩: 6.再由上到下填充渐变 7.按住ALT键，复制三个按钮，选中三个图层单击水平对齐: 8.在按钮上打上文字 9.给学校简介图层添加图层样式: 10.在另外两个按钮打上文字，再拷贝学校简介图层的图层样式，粘贴图层样式。 6 11.画一个矩形路径，再用文字工具打上白色小点。如图所示: 12.用画笔在末尾点上一个大点的白点。 13.同样方法在右边回一条虚线 四(导航栏 1. 新建一个组，名为:导航栏;新建一个图层名为:导航栏背景 2. 用矩形选框画出一个选区，填充浅黑色。再画一个选区填充渐变。 7 3.由下到上拉开 4.打入文字用分隔线隔开。 5.插入来自网上的图片，命名图层为:“互动地带”。 6.新建图层，命名为:“桂航要闻”。且在选区内填充如下: 8 8. 在右边设置如下 9 9. 从电脑中导入三张图片 10 10. 将图片变换到相应大小，并且给图片图层加上图层样式: 11.通过拷贝图层样式可得: 11 11.用画笔画一条浅黑线，按ALT复制出两条。调整好位置，打入文 字，如图: 12.插入图片，并且变换缩小。给图层加上样式:描边 12 13.图像-》调整-》色相饱和度;吸取字体的颜色来调节图片的饱和 度。最终效果为 13 14.把画笔的大小调整为6PX，向下画 15.再调整画笔的大小为2PX，间距为175%: 14 16.改颜色画好虚线 。 17.插入一张手势图，并且复制三分，调整好大小和位置: 15 18.画一条白色的线，并打入文字; 19.在写入下面的文字，并且调整好位置、再给“网上„”加上投影效果。 五(版权信息 1.画一个选区，填充浅黑色，再选择->修改->收缩5PX，再填充紫色。 2.写入版权文字: 六(修改 1.给正文添加两条分隔线，用羽化和收缩。 16 2.用裁剪工具把多余部分去掉 3.在版头插入校微图片。 17 4.最终效果图 七.切片及生成网页。 1.复制一份 18 3.选择切片工具，对要链接的文字和图片，进行精密切割。 19 4.完成切片之后，选择文件->存储为web和设备使用格式 5.对图片进行优化处理，按要求将一些需要清晰显示的图片，保存为高品质，不需要明显显示的图片优化为较低的品质。选中图片，在右上角的“预设”下面选择“JPEG”，然后下面的选择框中选择图片品质。 20 6.完成之后单击下面的存储按钮，可得如图所示 7.将文件名改为“index.html”，并选择保存位置进行保存，可得到如下图所示: 21 22 8.做到这里，用photoshop cs5所做的已经完成了，接下来是用一些网页软件进行修改，链接，在这里也就不多说了。 八(心得体会。 通过这次大作业，我更加的了解了photoshop的强大功能，对以前不是很熟悉的工具也有了更深刻的了解。不仅如此，我遇到难时，我学会了如何自己解决麻烦。 23 这次大作业，让我更深刻的知道“理论和实践相结合”才是最重要的。也清楚地知道了自己的不足，就是缺乏相应的知识与经验。通过此次实践使我的信心的到了加强，我相信以后PS我会越做越好。