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

《photoshop之网页效果图强化训练》 做网站,一般是先用PS出效果图,然后切图,然后div+css布局之. 因此，熟练的制作出效果图是前提。本专题会花上几周的时间，带领大家制作几个效果图的案例，掌握制作效果图的一般方法。 本专题在网页制作中的重要性：60% 切割与布局：40% 专题一《photoshop之网页效果图强化训练》 下面是几种效果图的切图，欣赏它们的效果。 专题一《photoshop之网页效果图强化训练》 专题一《photoshop之网页效果图强化训练》 专题一《photoshop之网页效果图强化训练》 专题一《photoshop之网页效果图强化训练》 在用ps绘制效果图时，其实用到的知识点并不是太多，路径的使用比较频繁，路径就是形状，特殊的形状要用钢笔工具，规则的形状用工具箱里自带的数学工具组就可以了。给图像添加样式的操作也不少。填充颜色以渐变色居多，网页颜色的搭配通常都是相似的几种颜色，颜色不宜超过3种。网页版面会有很多的区域，每个区域通常都是用矩形或者圆角矩形隔开。修饰符号也很多，比如点横线或者其他一些小的图像，它们起网页点缀的作用。 1.1 区域分割图像的制作（重点掌握） 各区域绝大部分网页都是通过矩形或者圆角矩形隔开，这个已经成为网站设计行业默认的样式了。 两大方法：1.绘制选取，然后描边。 2.绘制路径，转换为选取后再描边。 专题一《photoshop之网页效果图强化训练》 方法1.绘制选取，然后描边。 矩形选区 圆角矩形选区 方法：右击选区，选择“调整边缘”，设置平滑选项的值，其中羽化值与半径值设置为0最佳。然后选择“编辑”-----”描边” 方法2.绘制路径，转换为选取(ctrl+enter)后描边。 方法：最好是在路径面板里新建路径，跟图层一样，然后转换为选取后描边。 上机训练： 专题一《photoshop之网页效果图强化训练》 给各区域添加标题区域 给矩形或者圆角矩形添加标题 重点：给圆角矩形添加标题区域的方法：绘制圆角矩形路径，然后用直接选择工具修改路径，如果要将圆角转换为直角，需要用转换点工具单击，将曲线节点转换为直线节点，然后再用直接选择工具修改。 上机训练： 专题一《photoshop之网页效果图强化训练》 案例一：绘制如果所示的效果图： 专题一《photoshop之网页效果图强化训练》 操作步骤： 1,新建图像文件的大小为1024*768，由于在浏览器中网页的实际宽度应该减去右边垂直滚动条的宽度，所以实际大小在999—1001之间。打开“试图”—“”标尺”命令显示标尺，使用选择工具从锤子标尺中拖出２条垂直辅助线，使中间区域宽度为网页实际宽度。新建一个图层，双击标题区域，命名为“上部广告区”，（该区域通常可能会是某一有渐变效果的背景图片，或者有关公司产品或者企业形象展示的图片，通常也会包含公司logo(标志图片），甚至可能是flashd动画），绘制一高度为120像素左右的矩形选区，选择渐变工具填充渐变色，在工具选项栏中设置渐变色为从白色到淡蓝色渐变。 ２，新建图层命名为“log”,由于LOG图片未准备好，所以绘制一个区域用来标志该区域放置LOG图片。设置前景色为白色，使用椭圆选区工具绘制选区后alt+delete填充前景色。使用文字工具在白色投缘上输入文字”LOGO”,设置文字颜色为红色。 3，使用文字工具输入公司名称。如“四川哦哦连锁吵死管理有限公司”，由于是标题，设置大小为比标准的网页文字12px大，如15px,设置为加粗或者用黑体仿制加粗的效果.文字样式为“锐利”，给该图层添加描边效果，描边颜色为白色，大小为2. 4，在该区域的右上部输入文字“设为首页”，“加入收藏”。设置为标准的网页文字样式，如大小12px,宋体或者仿宋体，不要加粗。 专题一《photoshop之网页效果图强化训练》 案例2：在缺少素材的情况下，做一饮料食品类网站。 分析：随意上网搜集几张饮料图片，最好有一张全景显示图片（一般放在页眉），然后动工。 效果图：见后面。 操作步骤： 1，新建一个大小为1002×784的图像文件，按照惯例，还是执行“视图”---“标尺”命令打开标尺（快捷键为ctrl+R)，以方便查看区域大小。 2，按F7打开图层面板，新建一个图层，起名叫“页眉”，用矩形选取工具绘制一个高度在35px左右，宽度为全屏的巨型选区，然后选择渐变工具，在上方的选项栏中设置渐变