33-PS网页效果图制作(销售版)课件.pptx

1、教学情境二 官方网站设计子教学情境三 网站网页的设计PS网页效果图制作流程1、绘制结构草图首先是根据网页内容的策划进行结构的设计，也就是绘制结构草图，在草图上，我们规划内容的摆放，并对尺寸进行一个大约的设定，这就是PS效果图制作的蓝图。2、使用参考线初步定位确定大体框架结构后，首先是把草图放入效果图文件中，缩放到合适的大小，然后通过标尺和矩形选框工具等等来帮助绘制参考线，以便在PS对结构进行初步的定位；打开标尺快捷键是CTRL+R；在PS中，当参考线被拖动靠近中间的位置的时候，会自动判断中间点并吸附。3、绘制结构底图参考线设置完成后，我们可以使用形状工具，先绘制大体的框架，在这里可以打开对其参

2、考线；比如我们通过这个方形形状工具来定位旗帜广告的位置，接着后续我们可以通过剪贴图层，把旗帜广告的图片定位到对应的位置；4、添加内容结构地图绘制完毕，添加相应的内容；每一个部分的内容都需要设计制作，因此在这个过程中要注意保持整体的风格和设计细节的统一。5、效果图切片根据前端制作需要，使用PS的切片工具进行图片的裁切6 6、输出切片输出切片 输出切片的命令要选择存储为WEB所用的格式；需要输出的图片是透明的，请选择PNG这种可以支持透明的图片格式。教学情境二 官方网站设计子教学情境三 网站网页的设计PS网页效果图制作具体步骤1、首屏的概念设置文档的名字为INDEX，文件大小先设置为1366*76

3、8，dpi为72，这是我的电脑的一个屏幕的大小。当浏览者打开一个网页的时候，首先看到的只是这个网页的一个屏幕的大小的内容，这就是首屏，显然首屏在浏览的时候占有首要的关注度。后面我们通过剪切工具拉大视图，或者调整画布的大小，来扩展画布。2、绘制结构框架根据网页结构规划，逐步为LOGO和导航留出她们的空间；通过矩形选框工具的属性来帮助结构的创建；3、按结构建立图层组绘制的形状图层，请大家注意做好命名，这里是网页的头部，主要放置标志，这个图层组我们把它命名为TOP，这样便于内容的管理，然后是导航条部分，我们用导航英文单词的缩写NAV进行图层组的命名。因此类推，这是其他部分的命名，每个名字都是相关内容

4、的提示。这里做的好处是这里做的好处是为后续修改调整提供方便，比如你想调整这个部分的内容，就可以快速的找到它们，然后直接移动或者隐藏，或者删掉。4、使用剪贴图层、蒙板等添加内容当结构都设定好以后，就可以把内容添加进去，前面我们介绍过，大家可以使用剪贴图层，让内容约束到这个区域；大家也可以使用蒙板让内容显示在制定的区域。比如我们希望这一组照片都只在这个区域显示，那可以把给这些图层建立图层组，然后点击结构形状这个图层的缩略图建立选区，然后为这个图层组建立蒙板。5、交互视觉效果的制作在制作按钮等有交互视觉效果的部分，要把相应的视觉效果做出来，以便前端程序员实现这些效果，比如按钮部分，希望有可点击的提示，要制作鼠标经过的时候文字颜色、背景颜色或者背景图案的变化。6、效果图切片最后是切片，这里有几个注意点，请大家先了解后再切片，提高切片的效率：1、切片一定要和所切内容保持同样的尺寸，不能大也不能小；2、单色区域不需要切片，因为可以通过代码生成同样的效果；3、重复性的图像只需要切一张即可；4、多个素材重叠的时候，需要先后进行切片，如背景图像上有按钮，就需要先切片按钮，然后把按钮隐藏，再切片背址图像。5、如果效果图非常复杂，无法布局，那么最简单的解决方法就是切片成一张大图像即可。例如效果图中带有曲线的部分就可以这样处理。当然这样出力会遇到图片加载慢的问题。谢 谢!