使用Photoshop制作网页效果图（5）

主体部分（main）区域的制作

•新建图层组“main” –该区域分为三栏，添加三个图层组“left”、“center”、“right” –栏目标题据main上边距35像素（使用标尺辅助）

Main区域左侧设计

•栏目标题的设计 –添加ICO（图标）：选择自定义形状工具，绘制

•在插入了图标的图层上右键，“栅格化图层” –按住Ctrl键的同时，鼠标左键单击图标图层，图标所在位置出现选区 –在选区上，右键，填充，颜色#595959

•输入文字（产品软件 Software，字体为微软雅黑，大小为13，颜色#636363），调整位置

•在“产品软件”下方添加装饰图片

•在装饰图片下方添加文字，二者距离27像素

•按钮制作 –选择圆角矩形工具（半径为3像素），绘制圆角矩形选区，填充颜色为#0084fc，将图层名字修改为“查看按钮背景” –对该图层栅格化 –在按钮上输入文字“查看”，字体黑体，大小10，颜色白色（#ffffff），将图层名字修改为“查看” –选中圆角矩形选区，选择多边形套索工具，在选区左下方添加三角形选区，填充颜色为#0084fc

Main区域中部设置

•复制left图层组里的图标、产品软件Software文字图层，将复制后的图层拖动到center图层组 –左侧和中部间距56像素（使用标尺辅助） –在工作区，按住shift键，水平拖动图标、文字图层到中部 –修改产品软件Software为解决方案Solution –复制left图层组里的介绍文字图层，将复制后的图层拖动到center图层组 –复制left图层组里的查看按钮背景、查看图层，将复制后的图层拖动到center图层组 –选中查看按钮背景图层，按住Ctrl键，点击鼠标左键，填充颜色为#e07600

Main区域右侧设置

•复制left图层组里的图标、产品软件Software文字图层，将复制后的图层拖动到center图层组 –左侧和中部间距56像素（使用标尺辅助） –在工作区，按住shift键，水平拖动图标、文字图层到中部 –修改产品软件Software为成功案例Case –复制left图层组里的介绍文字图层，将复制后的图层拖动到center图层组 –复制left图层组里的查看按钮背景、查看图层，将复制后的图层拖动到center图层组 –选中查看按钮背景图层，按住Ctrl键，点击鼠标左键，填充颜色为#f97015

Main区域友情链接设计

•离上边距100像素（标尺辅助） •在main图层组离新建图层组“partner” –使用文字工具打出虚点分割线，颜色为#d7d7d7

•友情链接图标设计 –使用自定义形状工具里的“棋盘格”，绘制 –栅格化 –按住Ctrl键的同时，鼠标左键单击图标图层，图标所在位置出现选区 –在选区上，右键，填充，颜色#595959 –输入文字（合作伙伴 Partners，字体为微软雅黑，大小为13，颜色#636363），调整位置

•在main图层组离新建图层组“友情链接图片” –插入图片，调整位置，距离标题16像素，右边39像素，选中所有图片，水平居中分布 –在友情链接1所在图层下方新建图层，使用矩形选取工具绘制矩形选取，填充颜色白色；进行描边，1像素，颜色#d6d6d6。重命名为背景1.复制该图层，依次放在其他友情链接图层的下方。调整所有的背景图层至合适位置。

底部（footer）区域的设计

•新建图层组footer（距离友情链接区域50像素） –在footer图层组里新建图层背景，使用矩形选区工具绘制底部矩形选区，填充颜色#bcbcbc –在footer图层组里新建图层顶部横条1，使用矩形选区工具绘制矩形选区，高度2像素，填充颜色#a0a0a0 –在footer图层组里新建图层顶部横条2，使用矩形选区工具绘制矩形选区，高度2像素，填充颜色#707070 –在footer图层组里新建图层顶部阴影（放在两个横条所在图层的下方），使用矩形选区工具绘制矩形选区，高度10像素，使用渐变工具（左边颜色#525252，右边不透明度100%）填充颜色#a0a0a0。使用箭头键调整位置。使用变形工具调整大小。

底部区域版权信息

•输入文字 –copyright ©2009-2017 广州市海会网络科技有限公司 粤ICP备17108321号-1 广州市天河区珠 –

整体效果

相关资源来自网络，特表感谢，如有侵权，请联系删除。