ps之网页效果图强化训练专题

《ps之网页效果图强化训练专题》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《photoshop之网页效果图强化训练》做网站,一般是先用PS出效果图,然后切图,然后div+css布局之.因此，熟练的制作出效果图是前提。本专题会花上几周的时间，带领大家制作几个效果图的案例，掌握制作效果图的一般方法。本专题在网页制作中的重要性：60%切割与布局：40%专题一《photoshop之网页效果图强化训练》下面是几种效果图的切图，欣赏它们的效果。专题一《photoshop之网页效果图强化训练》专题一《photoshop之网页效果图强化训练》专题一《photoshop之网页效果图强化训练》专题一《photoshop之网页效果图强化训练》在用ps绘制效果图

2、时，其实用到的知识点并不是太多，路径的使用比较频繁，路径就是形状，特殊的形状要用钢笔工具，规则的形状用工具箱里自带的数学工具组就可以了。给图像添加样式的操作也不少。填充颜色以渐变色居多，网页颜色的搭配通常都是相似的几种颜色，颜色不宜超过3种。网页版面会有很多的区域，每个区域通常都是用矩形或者圆角矩形隔开。修饰符号也很多，比如点横线或者其他一些小的图像，它们起网页点缀的作用。1.1区域分割图像的制作（重点掌握）各区域绝大部分网页都是通过矩形或者圆角矩形隔开，这个已经成为网站设计行业默认的样式了。两大方法：1.绘制选取，然后描边。2.绘制路径，转换为选取后再描边。专题一

3、《photoshop之网页效果图强化训练》方法1.绘制选取，然后描边。矩形选区圆角矩形选区方法：右击选区，选择“调整边缘”，设置平滑选项的值，其中羽化值与半径值设置为0最佳。然后选择“编辑”-----”描边”方法2.绘制路径，转换为选取(ctrl+enter)后描边。方法：最好是在路径面板里新建路径，跟图层一样，然后转换为选取后描边。上机训练：专题一《photoshop之网页效果图强化训练》给各区域添加标题区域给矩形或者圆角矩形添加标题重点：给圆角矩形添加标题区域的方法：绘制圆角矩形路径，然后用直接选择工具修改路径，如果要将圆角转换为直角，需要用转换点工具单击，将曲

4、线节点转换为直线节点，然后再用直接选择工具修改。上机训练：专题一《photoshop之网页效果图强化训练》案例一：绘制如果所示的效果图：专题一《photoshop之网页效果图强化训练》操作步骤：1,新建图像文件的大小为1024*768，由于在浏览器中网页的实际宽度应该减去右边垂直滚动条的宽度，所以实际大小在999—1001之间。打开“试图”—“”标尺”命令显示标尺，使用选择工具从锤子标尺中拖出２条垂直辅助线，使中间区域宽度为网页实际宽度。新建一个图层，双击标题区域，命名为“上部广告区”，（该区域通常可能会是某一有渐变效果的背景图片，或者有关公司产品或者企业形象展示的

5、图片，通常也会包含公司logo(标志图片），甚至可能是flashd动画），绘制一高度为120像素左右的矩形选区，选择渐变工具填充渐变色，在工具选项栏中设置渐变色为从白色到淡蓝色渐变。２，新建图层命名为“log”,由于LOG图片未准备好，所以绘制一个区域用来标志该区域放置LOG图片。设置前景色为白色，使用椭圆选区工具绘制选区后alt+delete填充前景色。使用文字工具在白色投缘上输入文字”LOGO”,设置文字颜色为红色。3，使用文字工具输入公司名称。如“四川哦哦连锁吵死管理有限公司”，由于是标题，设置大小为比标准的网页文字12px大，如15px,设置为加粗或者用黑体

6、仿制加粗的效果.文字样式为“锐利”，给该图层添加描边效果，描边颜色为白色，大小为2.4，在该区域的右上部输入文字“设为首页”，“加入收藏”。设置为标准的网页文字样式，如大小12px,宋体或者仿宋体，不要加粗。专题一《photoshop之网页效果图强化训练》案例2：在缺少素材的情况下，做一饮料食品类网站。分析：随意上网搜集几张饮料图片，最好有一张全景显示图片（一般放在页眉），然后动工。效果图：见后面。操作步骤：1，新建一个大小为1002×784的图像文件，按照惯例，还是执行“视图”---“标尺”命令打开标尺（快捷键为ctrl+R)，以方便查看区域大小。2，按F7打开图

7、层面板，新建一个图层，起名叫“页眉”，用矩形选取工具绘制一个高度在35px左右，宽度为全屏的巨型选区，然后选择渐变工具，在上方的选项栏中设置渐变颜色为从#409427到#6ae674的渐变。3，使用文本工具在页眉区域的左边输入文字“现在时间是：2012年12月12世界末日”，文字颜色为白色，大小14点的宋体，无样式。在右边部分输入文字“设为首页”和“加入收藏”，并在他们前面绘制修饰符号，如2个小的同心圆。方法是：新建一个图层，起名叫“修饰符号”，然后将要准备放修饰符的地方按Z键切换到放大镜工具后进行局部放大，方便绘制。使用数学工具组中的矩形工具绘制按SHIFT绘