任务四制作个人求职网站菜单按钮

网站建设与维护项目五处理网站图像CONTENTS目录Part1安装并运行Photoshop图像处理软件Part4制作个人求职网站菜单按钮Part2使用Photoshop抠图Part3图像大小和属性的处理Part5制作个人求职网站广告条04

任务四

制作个人求职网站菜单按钮

利用PS制作菜单按钮菜单按钮是网页中常见的元素之一，如何利用好这个常见的视觉元素为网站添加个性与魅力呢？我们可以借助ps来制作出符合不同网站或者不同个人需求的按钮，以要制作求职网站的菜单按钮为例。利用PS制作菜单按钮【步骤1】：新建一张300*300的画布。填充背景颜色为灰色（#eaeaea），然后利用圆角矩形工具，在画布上画一个适当大小的按钮形状，大小可以自行把握。【新建文件】【圆角矩形工具】【设置颜色】【填充颜色】【绘制图形】【步骤2】：设置其混合属性”内阴影、渐变叠加”效果，参数设置和效果如下图：利用PS制作菜单按钮【设置内阴影】【设置渐变叠加】【效果图】【步骤3】：在里面在做一个圆角矩形，然后复制一层，做出按钮效果。设置其图层混合模式属性参数设置如下：利用PS制作菜单按钮【描边设置】【内发光设置】【渐变叠加设置】【投影设置】【效果图】【步骤4】：最后为按钮添加文字，点击，将光标移至合适的位置，输入文字，并调整文字格式大小后，保存即可。利用PS制作菜单按钮【文字设置】【输入文字】【文字属性设置】【效果图示】利用PS制作导航按钮除了单个按钮的制作外，我们还可以利用ps制作完整的菜单按钮，即网页导航：【步骤1】：新建一文件，大小设置为“200*800”，背景色设为“透明”，选择“工具栏”中的“圆角矩形工具”项，并设置合适的“半径”（如20像素），然后在绘图区域进行绘制，效果如图所示，可以通过按键盘组合键“Ctrl+T”对其进行调整。【新建文件】【工具选择】【属性设置】【效果图】

【步骤2】：切换至“路径”面板，点击“将路径作为选区载入”按钮，接着返回“图层”面板，选择“工具栏”中的渐变工具，并设置合适的渐变色进行填充。利用PS制作导航按钮【切换路径】【渐变工具选择】【渐变设置】【效果图】利用PS制作导航按钮【步骤3】：接着双击该图层，为其添加“浮雕图层样式”，参数如图，新建一个“图层2”，接着选择“圆角矩形工具”，将半径设置为“10像素”，并绘制如图所示的图形。然后切换至“路径”面板，点击“将路径作为选区载入”按钮，然后返回图层面板，填充一种纯色，如“黄色”。【斜面浮雕效果设置】【绘制新矩形】【效果图】利用PS制作导航按钮【步骤4】：双击“图层2”，为其添加“图层样式”，参数及效果如图所示。【新矩形斜面浮雕设置】【渐变叠加设置】利用PS制作导航按钮【步骤5】：接着将“图层2”拖动到“新建图层”按钮上以创建“图层2副本”，接着选择“移动”工具将“图层2副本”移动到合适的位置，按住键盘上“Ctrl”键不放的同时，点击“图层2副本”以选中该图像，然后为其填充另一种颜色，如“红色”。【复制图层】【填充红色】【拖动图层】【步骤6】：至此，基本的导航栏结构已经做好啦。下面我们来创建切片。点击“工具栏”中的“切片”工具，然后对整个图像区域进行划分，其中的一种分割方式如图：

利用PS制作导航按钮【切片工具选择】【切片后效果】【步骤7】：最后点击“文件”→“存储为Web所有格式”项，选择文件类型为“JPEG”格式，接着点击“存储”按钮，在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”，最后点击“保存”按钮。：利用PS制作导航按钮【存储格式选择】【图片属性设置】【文件名设置】利用PS制作导航按钮