第2章-photoshop网页版面制作 - 优秀教学样本

第2章-photoshop网页版面制作 - 优秀教学样本

ID:18481549

大小:4.18 MB

页数:37页

时间:2018-09-18

第2章-photoshop网页版面制作 - 优秀教学样本_第1页
第2章-photoshop网页版面制作 - 优秀教学样本_第2页
第2章-photoshop网页版面制作 - 优秀教学样本_第3页
第2章-photoshop网页版面制作 - 优秀教学样本_第4页
第2章-photoshop网页版面制作 - 优秀教学样本_第5页
资源描述:

《第2章-photoshop网页版面制作 - 优秀教学样本》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第2章 Photoshop网页版面制作教学目标1.掌握使用photoshop制作网页中图形元素的技巧2.掌握使用photoshop进行整体版面的制作3.掌握photoshop切片工具的使用方法4.掌握photoshop与dreamweaver结合的方法教学要求知识要点能力要求关联知识Photoshop画线画笔的设置Photoshop图案填充自定义图案的能力Photoshop按钮的制作路径与形状图层的绘制;图层样式的用法PhotoshopLogo标志的制作文字图层的用法;图层的用法Photoshop

2、图像的合成图层蒙版及图层混和模式的用法Photoshop网页版面制作色彩、文字、版面的设计Photoshop切片与输出切片的用法;输出导入Dreamweaver的方法2.1网页图形元素的制作2.1.1各式线条的绘制在网页中常使用线来分隔版面,或分隔导航条,是最常用的图形元素。在photoshp中画线是使用画笔或铅笔工具来实现的。1.画线选择photoshop工具箱中的画笔工具,并设置画笔的半径为1个像素,设置画笔硬度为0%,按住shift键拖动鼠标可绘制一条直线。如要连续绘制多条直线,一定要在绘制

3、后一直线前先选择其它工具,然后再选择画笔工具继续绘制,否则连续绘制会出现连笔现象如图2-1所示。连笔图2-1连笔现象2.画虚线画虚线和画直线一样也是使用画笔工具,不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板,对画笔的直径、硬度和间距进行设置,如图2-2所示,图2-2绘制虚线的画笔设置1.画凹凸线凹凸线在网页版面中最常见,对网页有着非常重要的点缀作用,如图2-3所示。绘制的方法如下:首先绘制一条比背景色暗的直线,然后再绘制一条比背景色亮的直线,线条色彩可选用与背景色同一色系的颜色,然后两

4、直线并列排,这样凹凸效果就出来了。图2-3凹凸线2.1.2图案填充在网页的背景和Banner中经常会见到填充的各式图案,如点、方格子,横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案,然后再进行填充。1.方格子的图案填充,如下图2-4所示。图2-4格子图案填充方法如下:(1)新建一40*40px大小,背景是透明的文件。(2)使用单行与单列选框工具绘制两条线,如下图2-5所示。图2-5定制的图案(3)全选上图,选择菜单“编辑—定义图案”,图案定义好了。(4)选择要填充图案的区域,选择菜单

5、“编辑—填充”,并找到刚才定义的图案,如下图2-6所示。图2-6填充面板(1)设置方格子的图层透明度,效果如图2-7所示。图2-7表格填充效果1.横线图案要填充横线图案,填充方法一样,只是定义图案的方法为:新建1×6像素的文件,填充最上面像素,如下图2-8所示,这时填充的横线为1像素高,线和线之间的距离为5px。图2-8横线自定义图案和填充效果2.斜线图案 同样定义斜线的图案,新建文件5×5像素大小,填充斜对角5个像素如下图2-9所示。图2-9斜线自定义图案和填充效果1.浮点图案同样定义浮点的图案

6、,新建文件7×7像素大小,填充最中间一个像素,如下图2-10所示。还有其它一些图案的定义如图2-11所示,大家可以自己试试定义和填充,看看效果如何。图2-10浮点自定义图案和填充效果图2-11其它自定义图案2.1.3按钮制作网页中按钮各式各样,往往按钮的形状和样式是网页的重要内容。下面讲解了几款常用的按钮。1.透明圆形按钮效果如下图2-12所示:图2-12透明圆形按钮制作步骤:(1)建立新文件,80x80像素大小,RGB模式,透明前景,图层1填充为白色,新建图层2,建立50x50像素的圆形,放在页

7、面正中心,前景设为#99CCFF,背景设为#006699,从圆形左上角到右下角,作圆形辐射渐变效果,如图2-13所示。图2-13渐变效果(2)再新建图3,建立44×44像素大的圆形,放置于正中心,从此圆形的右下角到左上角作圆形辐射渐变效果,即如图2-14效果。图2-14图层3效果(3)再新建图层4,建立42×42像素大的圆形,放置于正中心,这时设前景色为#99CCFF,背景色为#003366,从此圆形的右下角到左上角作圆形辐射渐变效果,即如图2-15效果。图2-15效果图(4)再新建图层5,建立1

8、0×6像素大的椭圆选区,并进行羽化,然后填充前景色,即如图2-16效果。图2-16效果图(5)输入文字,字号不要太大,文字去掉抗锯齿,并加上投影样式,最后效果如图2-17所示。图2-17 效果图2.塑料按钮(一)效果如下图2-18所示:2-18效果图制作步骤:(1)选择圆角矩形工具,并选择形状图层绘图方式,点击工具栏上的下拉三角,打开几何选项,在圆角矩形选项中设置矩形为固定大小,98×28像素,然后将圆角半径设为3像素,选择消除锯齿,如图2-19所示。图2-19圆角矩形(2)双击图

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。