hotoshop网页效果图设计课件

1、2021-6-4hotoshop网页效果图设计1 Photoshop网页效果图设计 Photoshop网页网页效果图效果图设计设计 2021-6-4hotoshop网页效果图设计2 主要内容 1 网页网页logo设计设计1 2 网页导航设计网页导航设计2 3 主页栏目设计主页栏目设计3 4 登录界面设计登录界面设计4 5 图像切片制作图像切片制作5 2021-6-4hotoshop网页效果图设计3 2021-6-4hotoshop网页效果图设计4 1 网页logo设计 2021-6-4hotoshop网页效果图设计5 网页logo内容，采用图形与文字相结合的方式，使用校标，文 字和图片组合而成

2、，色彩采用蓝色、红色和黄色相结合的方式， 体现严谨、科技的色彩。 1.1 logo内容分析 2021-6-4hotoshop网页效果图设计6 1.2 Photoshop CS3界面介绍 2021-6-4hotoshop网页效果图设计7 1.3 网页logo的设计 1.新建文件 启动Photoshop CS3，选择菜单“文 件|新建”命令，设置文件大小为 1109*1021（宽度*高度），分辨率72像素 /英寸（dpi），色彩模式为RGB，背景颜 色为白色，文件名称为网站首页。 在设计效果图时，我们需要注意，由 于网页是需要用浏览器打开显示的，需要 考虑浏览器的菜单、工具栏、滚动条等窗 口元素所

3、占据的空间，因此当显示器的分 辨率为800*600像素时，网页效果图标准 尺寸是775*435像素。当显示器的分辨率 为1024*768像素时，网页尺寸为 1004*600像素，注意设置网页的左右、上 下边距为0。 2021-6-4hotoshop网页效果图设计8 1.3 网页logo的设计 2.创建图层 单击图层面板右下角的创建新图层按钮，创建“图层一”，双击“图层一” 文字，修改为“网页背景” 。注意：当前选中哪个图层，单击创建新图层按 钮后，新图层就出现在当前选中的图层之上，可以用鼠标拖动图层改变层次 顺序，或按【CTRL+】或【CTRL+】来调整当前图层的顺序。 2021-6-4hot

4、oshop网页效果图设计9 1.3 网页logo的设计 3.创建矩形选区 选择图层面板最上方的图层，单击创建新图层图标创建新图层，双击 图层的名字改名为“logo区域”。 使用矩形选框工具，建立矩形选区 填充颜色（蓝色），并添加投影效果和光照效果。 4.导入校标图片,去除背景，增加阴影和镜头光晕效果 5.导入bj3.jpg和学校图片.JPG，将图片裁剪到适当尺寸，放入网站的头 部，调整图片的不透明度和颜色，使其与整个蓝色背景融合在一起 2021-6-4hotoshop网页效果图设计10 6. 增加文字 使用文本工具，输入网站名称“数学与计算机科学学院 College Of Mathematic

5、s And Computer Science”，设置颜色为黄色，增加投影、外发 光、内发光、斜面和浮雕、颜色叠加、光泽、和描边等效果 设置字 符字体 设置字 符字号 设置 字型 设置行间距，即每 行文字间的间隔。 设置水平缩放 设置垂直缩放 设置字符的比例间距 设置字符的字间距 设置基线偏移量 设置字符宽度 设置字符颜色 设置文字输入样式 语言设置防锯齿功能设置 2021-6-4hotoshop网页效果图设计11 2 网页导航设计 为了突出网页导航的功能，将导航文字安排在矩形的蓝 色背景之上，并对矩形背景做加阴影，浮雕效果处理，以使 导航显得更加明显，文字采用白色宋体，在背景的衬托下， 显得不

6、是那么生硬。 2021-6-4hotoshop网页效果图设计12 2.1 导航背景的设计 1.创建矩形 选择矩形工具右侧下方的三角形，选择矩形工具 2021-6-4hotoshop网页效果图设计13 2.1 导航背景的设计 3.填充渐变颜色 选择渐变工具，设置渐变颜色带为左侧（R：104，G：179，B： 221），右侧（R：38，G：108，B：178），从选取左下角向右上角拖曳 鼠标，填充蓝色的渐变，按【CTRL+D】可以取消当前区域的选择，后面 会经常用到这一快捷键。 2021-6-4hotoshop网页效果图设计14 2.2 导航文字的设计 使用文字工具，设置文字字体为宋体，大小为17

7、点，颜色为白色，输 入导航文字。 2021-6-4hotoshop网页效果图设计15 3 主页栏目设计 1.主页布局 分三个区域 上方区域为三个内 容，用渐变矩形框区 分；中间为图片展览， 用两条分隔线标识； 下方也有三个内容， 用三个矩形框区分 2021-6-4hotoshop网页效果图设计16 1.素材的选择处理 打开图片素材，使用矩形选择工具，选择图片的主体，选择菜单“编 辑|复制【CTRT+C】”，选择“网页背景”图层，单击创建新图层图标， 在“网页背景”图层上面创建新图层，改名为“图片”，选择菜单“编辑 |粘贴【CTRL+V】”。注意：快捷方法是，使用移动工具直接将选中的图 形拖动到

8、目标效果图中，Photoshop会自动新建图层放置该图形。 3.1 网页主图的设计 2021-6-4hotoshop网页效果图设计17 3.1 网页主图的设计 2.栏目图标和文字处理 选择合适图标，做去背景处理 导入背景图案，复制图层，放到合适位置上 2021-6-4hotoshop网页效果图设计18 3.2 网页底部的设计 选择渐变工具，设置颜色从左至右依次为（R：229，G：246，B： 254），（R：87，G：195，B：241），（R：32，G：112，B：172）， 不透明度从左至右依次为10%，80%，100%，注意渐变色带上面的标志 为不透明度设置，下面的标志为颜色设置，单击标

9、志，再改变不透明度或 颜色，从上向下填充渐变颜色，按【CTRL+D】取消选区。 2021-6-4hotoshop网页效果图设计19 3.2 网页底部的设计 2.文字信息的输入 使用文本工具，输入版权 信息，颜色为白色，对齐方式 为右对齐，上面字体大小为12， 下面字体大小为10，行间距为 18，并添加“描边”图层样式。 2021-6-4hotoshop网页效果图设计20 登陆界面设计 2021-6-4hotoshop网页效果图设计21 步骤： 1.处理背景图片，去除无关内容 2.导入校标和学校风景图，并处理 3.增加文字内容，并增加合适效果 Photoshop的图像修补工具 2021-6-4h

10、otoshop网页效果图设计22 5 网页图像切片制作 5.1 图像切片的作用 在PhotoShop中设计好的网页效果图，需要导入到Dreamweaver中进行排 版布局。在导入到Dreamweaver之前，可以使用PhotoShop或Fireworks对效果 图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中 进行布局。制作网页图像切片的目的是为了获得图片素材并对图片进行优化， 使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩 短了，从而提高网页加载的速度，能够通过网页设计软件实现效果的部分， 就不需要切片，而必须用图像的地方，则一定要切片。另外

11、，通过切片可以 导出不同类型的图片，从而有效的减小图片的大小，再有就是切片之后的图 片便于设置超级链接。制作网页切片的软件主要Photoshop和Fireworks，我 们采取Photoshop进行切片的制作。 2021-6-4hotoshop网页效果图设计23 切片步骤 1 打开PS CS3软件 2 导入所要切片的图 3 右击工具栏中的切片工具，选择 切片选择工具 4 右击图上的任何位置，选择 划分切片 5 填写几行几列。水平划分为M行，垂直划分为N列。点击 确定。此为平均切片，还有用户切片，自定义的。这里暂 时不说。如3行3列，即图被分成了九片 6 点击文件保存为WEB所用格式 7 定好文

12、件名，选择保存路径，得到一个HTML文件及此 HTML中应用到的图片即images文件夹。文件夹中保存有 这图的小片，共九片。 2021-6-4hotoshop网页效果图设计24 图像切片的制作 1.打开效果图文件 打开效果图文件“网 站首页.PNG”，使用切 片工具进行图片切片 的制作，可以放大图 形，选择部分选定工 具进行图片边界的调 整，如图所示。 2021-6-4hotoshop网页效果图设计25 5.4 图像切片的导出 1.全部切片的导出 选择菜单“文件”命 令，选存储为HTML和图 像， 单击保存按钮导出 网页文件和图像切片，如 图所示。 2021-6-4hotoshop网页效果图

13、设计26 利用所学知识，结合所给的素材，按要求合成 “登 陆界面”效果，效果图如下。 练习1：制作登陆界面 2021-6-4hotoshop网页效果图设计27 步骤： 1.处理背景图片，去除无关内容 2.导入校标和学校风景图，并处理 3.增加文字内容，并增加合适效果 2021-6-4hotoshop网页效果图设计28 练习2：制作学校网站首页logo 要求：利用所给素材制作首页logo 1.新建文件，设置文件大小为1109*1021（宽度*高度），分辨率72像素/ 英寸（dpi），色彩模式为RGB，背景颜色为白色，文件名称为网站 首页。 2.创建矩形 ，大小1109*171 3、导入图片“校标”.JPG，去除背景，添加新图层，图层命名为校标， 将校标复制入新图层，并增加阴影和镜头光晕效果。 4、导入图片“学校图片”.JPG和bj3.jpg，添加新图层，图层命名为学 校图片和背景3，将图片复制入新图层，并做相应处理。 5、选择文字工具，使用文本工具，输入网站名称“数学与计算机科学学 院 College Of