photoshop综合项目实训

photoshop综合项目实训

模块六 综合实训项目

photoshop综合项目实训

一、网站页面制作使用Photoshop不 仅可以制作各种图像 效果，还可以制作网 页图像元素，下面将 通过一个网页实例的 讲解，使读者更加熟 悉在Photoshop中网 站页面的设计，最终 效果如图所示。

photoshop综合项目实训

一、网站页面制作1. 选择菜单栏中“文件— 新建”命令，建立一个尺寸 为1003X1200像素、分辨 率为96像素/英寸，白色背 景的新文件。 2. 按Ctrl+R组合键打开标尺， 分别在水平和垂直标尺上单 击并拖动鼠标，拉出数条参 考线来布局构图。

photoshop综合项目实训

一、网站页面制作3. 设置前景色为灰色(R: 204,G:204,B: 204),用前景色填充 “背景”。 4. 新建“图层1”,选择 “矩形选框”工具，在视 图的顶部绘制选区并使用 橙色(R:245,G:129, B:12)填充选区。然后 再用“矩形选框”工具绘 制选区，并使用蓝色(R: 0,G:0,B:102)填充 选区，如图。

photoshop综合项目实训

一、网站页面制作5. 新建“图层2”,选择“圆角矩形工具”,在选 项栏中调整“半径”为15像素，然后拖动鼠标， 创建一个蓝色(R:0,G:0,B:102)的圆角 矩形图形。

photoshop综合项目实训

一、网站页面制作6. 将“图层2”拖动到图层 调板底部的“创建新的图 层”按钮上，复制该图层， 创建“图层2副本”。在 图层调板中将“图层2副 本”拖到“图层2”下面， 并点击“图层2”前面的图 标，隐藏“图层2”。 7. 选择“矩形工具”,如 图所示创建选区，并删除 该选区的内容。

photoshop综合项目实训

一、网站页面制作8. 按Ctrl+D组合键取消选区。

9. 按Ctrl+T变形组合键，在选项栏中将水平缩放W 的值改为101%,并按Enter键确认。

photoshop综合项目实训

一、网站页面制作10. 选择菜单栏“滤镜—模糊—高斯模糊”,如 下图设置，并按“好”确认。

photoshop综合项目实训

一、网站页面制作11. 选择图层调板，将“图层2副本”图层的不 透明度调整为50%,效果如图所示。

photoshop综合项目实训

一、网站页面制作12. 在图层调板上单击“图层2”前面的空格，显 示“图层2”,效果如图所示。

photoshop综合项目实训

一、网站页面制作13. 新建“图层3”, 选择“矩形选框” 工具绘制选区，并 使用白色填充选区。

photoshop综合项目实训

一、网站页面制作14. 单击图层调板下 方“添加图层蒙版” 按钮，为“图层3”创 建蒙版。 15. 设置前景色为黑 色，背景色为白色， 选择“渐变工具”, 在画布中从底部向上 垂直拖拽，应用渐变 效果，效果如图所示。

photoshop综合项目实训

一、网站页面制作16. 新建“图层4”用于制作按钮。选择“圆角矩 形工具”,在选项栏中调整“半径”为5像素， 然后拖动鼠标，创建一个橙色(R:245,G: 129,B:12)的圆角矩形图形。

photoshop综合项目实训

一、网站页面制作17. 双击图层调板上 的“图层4”,打开 “图层样式”对话框， 给按钮添加斜面和浮 雕

、渐变叠加和描边 的效果，参数设置如 图所示。

photoshop综合项目实训

一、网站页面制作按钮效果图

photoshop综合项目实训

一、网站页面制作18. 将“图层4”拖动到图层调板底部的“创建新 的图层”按钮上，复制五个相同的按钮，并用 “选择工具”将按扭移动到适合的位置上，如 图所示。