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、如果效果图非常复杂,无法布局,那么最简单的解决方法就是切片成一张大图像即可。例如效果图中带有曲线的部分就可以这样处理。当然这样出力会遇到图片加载慢的问题。谢 谢!