网页设计教程

《网页设计教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、7.3.1.1网页规划和设计1、在Photoshop文件下拉菜单中创建一个新文件，页面设置为1024*768，单位为像素，分辨率72像素/英寸，颜色模式为RGB颜色，如图7-62所示。图7-622、按组合键CTRL+R键打开标尺，用移动工具在标尺上拖拽出参考线，将页面分割为顶部广告区、导航区、视觉特效区、内容区和版权区几个大的模块，如图7-63所示。图7-637.3.1.2顶部广告区设计与制作1、布局安排好之后，整个页面由上至下制作。顶部广告区制作方法，选择工具箱中的圆角矩形工具，圆角半径设定为50px，按组合键CTRL+ENT

2、ER将路径转换为选区，如图7-64所示。图7-642、新建一个图层命名为桔色，将选区填充任意一种颜色，给图层添加图层样式/渐变叠加，具体设置如图7-65所示。图7-653、再给桔色图层添加图层样式/斜面和浮雕，设置如图7-66所示。图7-664、复制选区效果如图7-67所示。图7-675、将桔色图层复制命名为黄色，用移动工具调整其位置，更改渐变叠加中的颜色，如图7-68所示。图7-686、制作阴影，用魔棒工具选择图形选区，按组合键SHIFT+F6羽化选区，羽化半径设置为5px，填充灰色，效果如图7-69所示。图7-697、将阴影

3、复制，效果图如图7-70所示。图7-708、顶部广告区制作完成，效果图如图7-71所示。图7-717.3.1.3导航区设计与制作1、制作网站标志，输入文字设置如图7-72，用钢笔工具勾出叶子形状标志，如图7-72图7-722、菜单栏制作方法，新建图层命名为矩形，在新建图层上选择圆角矩形工具圆角半径设置为50px，颜色设置如图7-73。图7-733、给矩形图层添加投影图层样式，设置如图7-74图7-744、将素材文件夹中的木纹1打开，用移动工具拖拽到矩形图层上层，用魔棒工具选择矩形，在木纹1图层按组合键CTRL+SHIFT+I反选

4、，按键盘上的DELETE键删除选区之外的区域，如图7-75图7-755、将木纹1的图层的混合模式更改为正片叠底，如图7-76。图7-766、将素材文件夹中的木纹2打开，用移动工具拖拽到木纹1图层上层，用魔棒工具选择矩形，在木纹2图层按组合键CTRL+SHIFT+I反选，按键盘上的DELETE键删除选区之外的区域，如图7-77。图7-777、将木纹2的图层的混合模式更改为滤色，如图7-78。图7-788、圆孔制作方法，新建图层命名为圆孔，用圆形选框工具画出圆形选区填充白色，添加内阴影图层样式，如图7-79。图7-799、复制圆孔图

5、层，调整位置如图7-80图7-8010、用多边形套索工具画出绳子的选区，填充颜色，复制绳子图层调整位置如图7-81图7-8111、在菜单栏上打字颜色、字体、字号如图7-82，文字图层添加投影图层样式，设置如图7-82所示。图7-8212、将菜单栏上的其他文字按照图7-83设置依次打上。图7-8313、将小菜单栏文字按照图7-84设置依次打上，在自定义形状工具中选择三角形，依次如图7-84排列。图7-8414、菜单栏部分全部完成，如图7-85所示。图7-857.3.1.4视觉特效区设计与制作1、新建图层命名为粉色填充渐变颜色，如图

6、7-86所示。图7-862、将大眼妹AI素材在Illustrator中打开，在Photoshop和Illustrator两个软件同时打开时，用选择工具从Illustrator中拖拽到Photoshop，形成一个矢量智能对象,如图7-87所示。图7-873、大眼妹调入Photoshop后，双击鼠标左键确认。将矢量智能对象图层右键栅格化变为普通图层，命名为大眼妹，如图7-88。图7-884、用钢笔工具勾出桌子的形状，按组合键CTRL+ENTER键将路径转换为选区，填充白色，如图7-89。图7-895、将彩椒和西红柿素材依次打开，拖拽

7、到桌子图层上面，调整位置及大小如图7-90。图7-906、将美食AI素材在Illustrator中打开，用选择工具将披萨拖拽到Photoshop中，具体方法同第2步调入大眼妹方法，调整位置及大小如图7-91。图7-917、按组合键CTRL+U键调整披萨色相饱和度，将饱和度调高让披萨看上去新鲜如图7-92图7-928、将烤鸡调入进来方法同上，调整大小及位置,调整色相饱和度，最终效果如图7-93。图7-939、制作气泡，选择自定义形状工具，追加全部形状，如图7-94。图7-9410、找到会话2形状，调整大小和位置，按组合键CTRL+

8、ENTER键将路径转换为选区填充白色，如图7-95图7-9511、给气泡图层添加渐变叠加图层样式，设置如图7-96。图7-9612、给气泡图层添加斜面和浮雕图层样式，设置如图7-97图7-9713、给气泡图层添加投影图层样式，设置如图7-98。图7-9814、在