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

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