(计算机辅助艺术设计)第九章_Photoshop在网页设.ppt

第九章 Photoshop在网页设计中的应用 9.2 网页中的图像处理 4，按快捷键Ctrl＋R调出标尺，添加两行辅助线，选择【移动工具】，按下Alt键，再水平复制一个圆，按快捷键Ctrl＋D取消选区。 5，画一矩形选区将两个圆形连接起来，并填充黑色， 6，按快捷键Ctrl＋D取消选区，选择【选择】/【载入选区】，或按Ctrl键同时单击图层一载入选区。 7，前景色设为天蓝色，R值51，G值204，B：255，背景色设为深蓝色，R值0，G值0，B：153，按住Shift键，自上而下作线性渐变。 8，用水晶按钮制作中缩小选区和减掉选区的方法，制作高光部分。 9，前景色设为淡蓝色，R值204，G值255，B：255，选择前景色到透明色线性渐变，按住Shift键，自上而下作线性渐变，完成效果。 整幅网页制作 网页版面主要由标题栏、Banner、导航栏、内文、底栏、滚动条、网页背景等部分构成。 一般情况下，可以在photoshop中将网页的整个页面按屏幕像素尺寸制作出来，再用切片工具进行画面的分割，并做一些图片或文字的链接，或跳转至photoshop中进行优化处理导出为Web格式，直接在浏览器中浏览。或导入其他专门的网页制作软件如：Frontpage或Dreamweaver中进一步编辑处理完成网页的制作。 5、按快捷键Crtl+R，调出标尺，拉出水平、垂直辅助线，交点位于画面中间对齐，图9-16。 6、选中椭圆选框工具或按快捷键M键，同时按下快捷键Alt+Shilf，以辅助线交点为中心画正圆，标志与虚线间留出一定距离，加文字 7、按下D键，X键，将前景色设为白色。【编辑】/【描边】，位置居中，4个像素。 8、为了不显单调，再用同样方式在刚才画的圆外再画一个2像素的白色圆。 9、打开光盘素材库中“第9章素材”中的“学院题字”文件，或使用你所在学校的标志，并键入所在学校的名称 10、将学院文字图层拖入logo中或结合你所在院校的标志，将所在院校的题字拖入或全称输入，按快捷键Crtl+T并调整文字大小 11、用矩形选框工具框选题字中的“科”字，按下“ctrl+T”将鼠标放置框选框外角，待鼠标变成双向箭头，旋转使字上沿对齐标志圆心，并调整合适大小 12、依此将其他文字调整至合适位置。 13、单击【图层面板】右下角创建新的图层按钮，新建图层2 14、选中【椭圆选框工具】或按快捷键M键，同时按下快捷键Alt+Shilf，以辅助线交点为中心画正圆。 15.在画面上右击，弹出快捷菜单，单击【建立工作路径．．．】弹出【建立工作路径】对话框，点【确认】按钮，选区变为路径。在路径和形状上放置文字，这是Photoshop8.0的新增功能，主要方便于图章类文字和曲线型文字的输入。 15．选择【横排文字工具】，在圆路径上选择文字的初始位置并单击鼠标，路径上出现一小圆和一闪动的光标，这是文字输入的位置，图9-30。 16、输入所在院校的英文名称，如“JIUZHOU COLLEGE OF SCIENCE AND TECHNOLOGY”，选中文本，在文本属性栏中单击【切换字符和段落调板】按钮，弹出【字符和段落调板】，将字体设为宋体，字体大小为24点，字间距-75。 17．选择路径选择工具或按快捷键A，当光标变成光标与黑色箭头时可以在路径上调整文字的合理位置，左图。 18．输入完成后，在图层中点击蓝色图层前的隐藏当前图层，单击【图层面板】右侧三角形按钮，弹出图层调板菜单，合并可见图层。 19. 单击显示背景层，按Ctrl+S保存文件为“LOGO” （右图） Banner条制作 前面制作了扫描线和一个logo标识，下面制作一个学院精品课程的Banner条，图中用到 logo标识，渐变色块，扫描线，相关院校的名称图片等，如图 小提示：Banner中文译为旗帜，在网站中多用作广告宣传条幅，又称广告条，经常是带有Flash动画的动画广告。一般事业单位网站或非商业网站多为网页的标题（单位名称）所在位置。 下面了解一下Banner条的制作过程,操作步骤如下： 1,创建一个800×120像素的文件。 2,将前景色设为蓝色，拾色器中R值:6，S:82，B:159如图 3,按下渐变工具,在属性栏中选择 “前景色至透明色”，并做适当调整，如图。 4,按下shilf键,将鼠标指针放置文件左侧边线处,然后按下鼠标指针向右拖至3/5处释放鼠标指针左键,做一蓝色条带渐变。 5，分别打开刚制作的Logo标识和扫描线或将光盘图库中的“第9章素材”中的Logo标识和扫描线文件打开,将Logo标识和扫描线图层分别拖入新建的文件中，并调整至合适大小。 6，打开 “学院题字”和 “图书馆图片”，拖放至文件中，并将“图书馆图片”