[信息与通信]_Photoshop网页效果图设计.ppt

主要内容 1.3 网页logo的设计 3.创建矩形选区 选择图层面板最上方的图层，单击创建新图层图标创建新图层，双击图层的名字改名为“logo区域”。 使用矩形选框工具，建立矩形选区 填充颜色（蓝色），并添加投影效果和光照效果。 4.导入校标图片,去除背景，增加阴影和镜头光晕效果 5.导入bj3.jpg和学校图片.JPG，将图片裁剪到适当尺寸，放入网站的头部，调整图片的不透明度和颜色，使其与整个蓝色背景融合在一起 3.1 网页主图的设计 2.栏目图标和文字处理 选择合适图标，做去背景处理 导入背景图案，复制图层，放到合适位置上 登陆界面设计 步骤： 1.处理背景图片，去除无关内容 2.导入校标和学校风景图，并处理 3.增加文字内容，并增加合适效果 切片步骤 1??? 打开PS CS3软件 2??? 导入所要切片的图 3??? 右击工具栏中的切片工具，选择 切片选择工具 4??? 右击图上的任何位置，选择 划分切片 5??? 填写几行几列。水平划分为M行，垂直划分为N列。点击确定。此为平均切片，还有用户切片，自定义的。这里暂时不说。如3行3列，即图被分成了九片 6??? 点击——文件——保存为WEB所用格式 7??? 定好文件名，选择保存路径，得到一个HTML文件及此HTML中应用到的图片即images文件夹。文件夹中保存有这图的小片，共九片。 利用所学知识，结合所给的素材，按要求合成 “登陆界面”效果，效果图如下。 步骤： 1.处理背景图片，去除无关内容 2.导入校标和学校风景图，并处理 3.增加文字内容，并增加合适效果 练习2：制作学校网站首页logo 要求：利用所给素材制作首页logo 1.新建文件，设置文件大小为1109*1021（宽度*高度），分辨率72像素/英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为网站首页。 2.创建矩形 ，大小1109*171 3、导入图片“校标”.JPG，去除背景，添加新图层，图层命名为校标，将校标复制入新图层，并增加阴影和镜头光晕效果。 4、导入图片“学校图片”.JPG和bj3.jpg，添加新图层，图层命名为学校图片和背景3，将图片复制入新图层，并做相应处理。 5、选择文字工具，使用文本工具，输入网站名称“数学与计算机科学学院 College Of Mathematics And Computer Science”，设置颜色为黄色，增加投影、外发光、内发光、斜面和浮雕、颜色叠加、光泽、和描边等效果 练习3：网页图像切片 要求如下： 1.打开首页.psd文件。 2.选择切片工具 3.切图 4.选择切片选择工具，将导航栏和页面底部导航栏切割为更小的切片 * Photoshop网页效果图设计 Photoshop网页效果图设计 1 网页logo设计 1 2 网页导航设计 2 3 主页栏目设计 3 4 登录界面设计 4 5 图像切片制作 5 1 网页logo设计 网页logo内容，采用图形与文字相结合的方式，使用校标，文字和图片组合而成，色彩采用蓝色、红色和黄色相结合的方式，体现严谨、科技的色彩。 1.1 logo内容分析 1.2 Photoshop CS3界面介绍 1.3 网页logo的设计 1.新建文件 启动Photoshop CS3，选择菜单“文件|新建”命令，设置文件大小为1109*1021（宽度*高度），分辨率72像素/英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为网站首页。 在设计效果图时，我们需要注意，由于网页是需要用浏览器打开显示的，需要考虑浏览器的菜单、工具栏、滚动条等窗口元素所占据的空间，因此当显示器的分辨率为800*600像素时，网页效果图标准尺寸是775*435像素。当显示器的分辨率为1024*768像素时，网页尺寸为1004*600像素，注意设置网页的左右、上下边距为0。 1.3 网页logo的设计 2.创建图层 单击图层面板右下角的创建新图层按钮，创建“图层一”，双击“图层一”文字，修改为“网页背景” 。注意：当前选中哪个图层，单击创建新图层按钮后，新图层就出现在当前选中的图层之上，可以用鼠标拖动图层改变层次顺序，或按【CTRL+[】或【CTRL+]】来调整当前图层的顺序。 6. 增加文字 使用文本工具，输入网站名称“数学与计算机科学学院 College Of Mathematics And Computer Science”，设置颜色为黄色，增加投影、外发光、内发光、斜面和浮雕、颜色叠加、光泽、和描边等效果 设置字 符字体 设置字 符字号 设置 字型 设置行间距，即每行文字间的间隔。 设置水平缩放 设置垂直缩放 设置字符的比例间距 设置字符的字间