网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源效果图的设计.doc

《网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源效果图的设计.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1：书法家庄辉主页效果图设计1）启动Photoshop软件，然后执行“文件”→“新建”命令，创建“书法家庄辉个人网站主页效果图.psd”文件，宽度：984像素，高度：600像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色。2）在背景层中，从工具箱中选择“渐变工具”，取前景色为#b27516（十六进制的RGB表示法），背景色#c9ac78，接着在选项栏中选取渐变填充（对称渐变），拖动鼠标后形成渐变的背景图像。3）打开图片“书法1.jpg”，然后对其执行“图像”→“调整”→“反相”命令，最后将其拖入效果图，设置层名为“书法”，设置混合模式为：柔光，不透明度为24%，

2、采用同样的方法将“国画.jpg”进行类似的操作，调整图层的大小与位置后的效果如图1-1所示。a）b）c）图1-1背景图片与书法国画混合后的效果图a）书法图片b）国画图片c）调整图层后的效果4）打开图片“墨迹.jpg”，使用魔术棒工具，选择白色区域，然后执行“选择”→“反向”命令（快捷键），选取墨迹将其复制并粘贴到效果图中：打开图片“毛笔.jpg”，同样的方法选取图中的毛笔图像，同样将其复制并粘贴到效果图中，调整好毛笔与墨迹的位置，墨迹与毛笔图层合成的效果如图1-2所示，将毛笔图层设置图层样式，设置投影效果增加立体感，具体参数是：不透明度：44%，角度：

3、90，距离：8像素，大小：2像素，放入效果图中的效果如图1-3所示。图1-2毛笔与墨迹混组合效果图1-3毛笔与墨迹混组合后在效果图中的效果5）打开图片“无名山人.jpg”，使用魔术棒工具，选择黑色字体区域局部区域，例如选中“山”字，然后执行“选择”→“选取相似”命令选中“无名山人作品集”的题字的黑色区域（如图1-4所示），复制黑色区域，粘贴到效果图中，最后将“无名山人作品集”文字图层执行“描边”图层样式（颜色：白色，大小：3像素），效果如图1-5所示。图1-4“无名山人作品集”选区图1-5“无名山人作品集”放入效果图中的效果6）打开图片“庄辉原图.jpg”，由于照片曝光不足，所以

4、照片的亮度不够，人物不够清晰，执行“图像”→“调整”→“色阶”命令，在“色阶”对话框中调亮照片，然后使用“多边型套索工具”将照片中人物选取出来（如图1-6所示），复制并粘贴到的效果图中，调整人物的大小与位置，最后设置人物的图层样式：外发光效果（不透明度50%，颜色：白色渐变为透明，扩展：14%，大小：21像素），如图1-7所示。图1-6人物照片选区图1-7人物照片放入效果图中的效果7）新建一个图层，选择“椭圆套索工具”，设置工具属性（样式：固定大小，宽度：10像素，高度10像素），然后在新图层中选择四个选区并对其填充为红色，分别给每个小红点设置外发光效果（与人物发光相似），最后添

5、加“个人简介”、“书法作品”、“国画作品”、“联系方式”文字（字体：方正大黑简体，大小：18点，颜色：白色），并对文字添加描便效果，如图1-9所示。8）打开“落款.psd”与“印章.jpg”照片分别将它们拷贝到效果图中，并将其大小进行调整，整个效果图完成，如图1-10所示。图1-9添加文字与点缀的效果图1-10添加落款与印章后的效果2：书法家庄辉模板页效果图设计书法家庄辉个人网站模板页效果图设计与制作根据初步的设计制作步骤如下：1）启动Photoshop软件,新建“书法家庄辉个人网站模板效果图.psd”文件，宽度和高度为996像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背

6、景颜色填充为褐色（#6d4418）。2）执行“视图”→“标尺”命令显示标尺（快捷键），然后执行“视图”→“新参考线”命令，在弹出“新建参考线”对话框中分别添加水平（65px，250px，896px）和垂直（160px）的四条参考线，如图1-11所示。垂直160px水平65px水平250px水平896px图1-11参考线的设置3）打开图片“无名山人.tif”文件，执行“图像”→“调整”→“反相”命令（快捷键），使用“移动工具”将“无名山人.tif”图像拖至效果图中，执行“编辑”→“自由变换”命令（快捷键）调整“无名山人作品集”大小和位

7、置使其放在效果图的左上角。4）新建一个图层命名为“褐色背景”，设置前景色为褐色（c99011），使用“矩形选框工具”选择第1条和第2条水平参考线中的矩形区域，使用快捷键填充前景色，效果如图1-12所示。图1-12添加logo和填充区域褐色5）打开图片“夕阳.tif”文件，使用“移动工具”将“夕阳.tif”图像拖至效果图中，执行“编辑”→“自由变换”命令（快捷键）调整“夕阳”图片大小和位置，调整图层“夕阳”在“褐色背景”图层之上，把鼠标放在图层“夕