当前位置: >
PS动画基础教程之第一帧的传播特性
阅读工具：字体：
在开始之前我们先讲解一下上节课后的作业，那是一个有两个物体一起移动的动画。所谓的两个物体其实也就是两个图层，分别绘制上方块和圆，然后复制一帧并相对移动图层的位置即可。在技术上并没有太大难度。
　　但要注意看清楚我们的范例动画，其中的圆并不是一开始就移动的，而是滞后一段时间才开始的。这也就是说在前面几帧中只需要移动方块图层，而并不移动圆图层。在方块移动几帧后再开始移动圆，动画调板类似于下图所示。点击红色箭头处可以开启调板选项，可以自己设定帧缩览图的大小。绿色箭头处的
是帧步进按钮，点击一次播放一帧，则是播放上一帧。按钮则是回到起始帧。
　　我们安排这个范例是想告诉大家，一个较为复杂的动画往往是由许多物体构成的，而这些物体未必都是一同动作(如移动)的。比如制作一个物体撞击另外一个物体的动画时，被撞物体就应该在撞击物体接触之前都保持不动。
　　之前我们制作的是位移动画，是利用图层的移动。除此之外，还可以通过设定不同的图层不透明度来产生动画，制作的方法相信大家应该可以猜得到，那就是在不同的帧中改变图层调板中的不透明度数值。现在新建一个100&100的图像，新建一个图层并绘制一个方块。然后一次性复制5个帧出来，将会看到6个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒，如下图所示。
　　接着选择第2帧，在图层调板中将方块图层的不透明度改为80%，第3帧60%，以此类推，到第6帧为0%。形成的效果类似下图所示。这时候播放就会看到方块逐渐渐隐的效果。需要注意的是，通过按钮隐藏图层等同于将不透明度设定为0%。
在这个制作中有一个很大不同，就是我们改变了原先复制一帧后马上进行设定，设定完后才复制另外一帧的方法。这次是将所有帧一次性复制出来，然后选定帧进行设定。这也是一种制作方法。
　　在操作的过程中大家不难发现，对于图层调板中的不透明度而言，在选择另外一帧的时候它又会回到100%。这说明一个特性，那就是对其中一帧的不透明度更改并不会影响到其他帧。再试想一下，如果我们用这种方法去制作最初的方块移动，在前一帧中移动图层后选择下一帧时，将发生怎样的情况呢？
　　很显然，我们将看到方块又回到了原点。而如果此时的图层位置设定没有按照前一帧的轨迹，则将构不成流畅的移动效果。因此这种预先建立所有帧然后修改的方法并不适用于位移动画，其实也不适用于其他动画。只是遇到需要在指定帧数中制作动画时才会用到。
　　现在我们已经掌握了两种可产生动画效果的设定，一是图层位置，二是图层不透明度，现在可以综合利用两者来制作一个既移动又渐隐的动画了。这可以在刚才单纯渐隐的基础上加以修改。也就是用土办法，选择一帧后移动些许，如此往复。
　　不过我们需要一个从左端移动到右端的效果，也就是说方块的起始位置必须在左端，但现在所有帧中的方块都在中间，这该怎么办呢？既然 &所有帧&都在中间，那么我们就让&所有帧&都到左边吧。在动画调板中选择所有的帧，通过移动工具移动图层到最左端，就会看到所有帧中方块的位置都发生了改变
此外还有一种方法。整个动画过程可以看作是一个前因后果的关系。如果你在第一帧删除了某个图层，那么之后所有帧中就都不存在这个层了。因此在Photoshop动画设定中，第一帧是比较特殊的。现在选择第一帧，确保图层调板中&传播帧1&有效，如下图红色箭头处所示。
　　然后移动图层，就会发现所有帧中的方块都统一发生了移动，如下图所示。
　　如果&传播帧1&无效则只会改变第1帧中的方块位置。
　　这两种方法各有利弊，&传播帧1&其实就是&传播第1帧，就是将第1帧的改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。而选择所有帧的做法在帧数较多的时候会稍显麻烦，但它可以派生出&选择某些帧&的方式，比如只要改变前3帧时，就可以将前3帧一起选择后进行设定。
　　需要注意的是，即使原先每个帧都设定了不同的图层位置，&传播帧1&也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移
在这里再说一下选择多个帧的问题，我们已经知道如果要选择前4帧，可以先选择帧1后按住SHIFT键再点击帧4，或者反其道而行之也可。但如果要选择不连续的帧，如帧1、帧3、帧4，则可以先按照之前的方法选择帧1到帧4，然后按住CTRL键单击帧2，就可以减去选择帧2。
重复操作一次则又可以添加选择帧2。如果是要选择距离较远的个别帧，如帧2、帧11、帧17、帧27，则可以先单独选择其中任意一个，再按住CTRL去添加选择其他的帧。
　　将所有的帧中的方块都移动到左端后，要做的就是逐个帧地设定方块的位置，那就是选择第2帧移动些许，选择第3帧移动些许。当然这中间有一个我们已经提到过的问题，就是很难保证移动的流畅。我们在Photoshop中学习过，在选用移动工具的时，可以使用键盘上的方向键去移动图层，一次移动1像素，配合SHIFT键就可以远距离移动
那现在我们就选择第2帧，用SHIFT+右方向键移动。接着选择第3帧，由于该帧中方块又回到了起点，所以需要两次SHIFT+右方向键。第4帧中则是3次，以此类推。设定类似下图所示。第6帧中方块已消失，可不作设定。
　　使用方向键移动的方法尽管可以保证轨迹的一致，但其局限性也很明显，那就是只适合制作水平垂直或45度角这样的轨迹。如果我们需要较为随意的移动轨迹 (如一条弧线)，又想保持流畅性该如何做呢？当然大家会说如果在开始就使用&复制帧、移动图层&的方法就不会有现在的困扰，但请别忘记，修改运动轨迹也是常有的事情。所以还是仔细思考一下如何操作吧(责任编辑：大宝库)
------分隔线----------------------------
本例介绍使用 PS CS3 制作旋转和缩放的花动画特效两例，主要讲解逐帧动画的制作。 简...
烟霄微月澹长空，银汉秋期万古同。几许欢情与离恨，年年并在此宵中。还有两个星期，八...
先看下效果： 现在我们来讲解一下上节课的作业。比起以前石器时代的作业，它的难度有...
在网页设计扩展教程中也包含对图像格式的叙述，但不会再重复介绍本课中关于GIF的知识...
就我们目前已经学习的制作方法而言，足以应付大部分的制作需求。在本课中我们将学习一...
赞助商链接
赞助商链接【图文】Photoshop网页设计_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
Photoshop网页设计
上传于||文档简介
&&很​完​善​的​网​页​设​计​理​论​基​础​p​p​t
大小：13.74MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢Photoshop设计破旧风格的网页模板
如果不坚持,何必当初那么努力
帖子152152&缘分币492527 Y&阅读权限255&注册时间&
21:39 
Photoshop设计破旧风格的网页模板
Photoshop是做网页设计的非常好的工具，特别是如果你要在设计中使用大量的图片和笔刷效果的话。在这个教程中，我会教给你如何完成一个破旧风格的主页设计。我们将要设计页头、侧边栏、主体、页脚以及所有一切非常有质感和破旧效果的设计。
出自：飞鱼的声纳
这次我们要使用Photoshop创建一个破旧风格的网页设计，需要用到很多的图片。由于这是一个中间难度的教程，我将会略过对于基本步骤的解释。首先创建一个宽950像素高800像素，分辨率为72dpi的新文档。将标尺打开，拖拽出文档的边界，这将会是设计的最佳区域。我计划设计一个固定宽度的布局。
选择图片&画布大小，增加宽度和高度到1200像素和1000像素，这样做是为了宽显示器的分别率设计。然后给你计划添加内容的区域(页首、导航栏、侧边栏、页脚)增加参考线。
让我们假设这个设计最终目的是一个wordpress主题，因此我们需要一个页首，一个在页首中的导航栏以及一个右边的侧边栏。如下图所示。之后将背景色填充为#7A8173。
现在我们要给页首的背景创建图案。很简单，创建一个50像素宽，300像素高的文档，画出如下图所示的图形。我使用了参考线让图形尽可能的对称。然后选择编辑&定义图案，保存为Pattern 1″。
在主设计文件的新图层上，使用矩形工具画出一个300像素高的矩形。打开图层样式，添加图案叠加，选择前面创建的图案。为了达到理想效果，你必须点击贴紧原点按钮。将图层的填充不透明度更改为0%，在这个图层上再创建一个新的图层，将两个图层合并，这种方法可以让你直接给页首增添效果。将这个图层命名为Pattern1。
选择Pattern 1″图层，给它添加一些图层样式：投影、渐变叠加以及图案叠加。尝试着得到如下图所示的结果，使用如下值。
现在我们要添加导航栏背景。画出一个矩形盖住pattern 1″图层一点点。给矩形应用图案叠加、黑色到黑红色的渐变叠加以及柔和的投影。使用下面图片所示的值作为参考。接下来，添加图层蒙板&隐藏全部，在图层蒙板上画出黑色到白色到黑色的渐变，你将会得到如下图所示的结果。
现在在Pattern 1″图层上方画一个椭圆(#691E1B)，命名为Light，给其应用50个像素半径的高斯模糊。我又创建了一条额外的参考线，方便将椭圆放置于页首的中间。将超出导航栏下方的所有部分都删除掉，更改图层的混合模式为颜色渐淡。
为了完成布局的第一部分，接下来我们要画出侧边栏的背景。创建一些参考线来给侧边栏划定界限并且调整已经创建好的参考线，使他们适应目前的布局。然后画一个红色的矩形(#3D100B)，应用如下图层样式：阴影、颜色叠加以及图案叠加。
这个时候你必须考虑之后如何将图片剪切以适应在HTML和CSS中使用。这也就是为什么我在应用投影时经常将距离设置为0像素的原因，而且只使用水平或者垂直渐变。这个案例中的材质有很多的水平线。在很多区域需要很容易的转换成可重复的背景图片。而且，这个时候也是稍微休息一下，将图层好好组织一下的时候。
现在开始设计细节，我想将网站名添加到显眼的位置，这就是为什么我会使用这张漂亮的破旧标签图片。很显然，你必须将标签放置到我们这个设计的左上角。试着作出如下图所示的效果。接下来，使用魔术棒工具选择棕色的圆圈，然后使用Ctrl+Shift+I反选选区。使用如下值调整色阶和色相/饱和度。
现在使用橡皮擦工具和不整齐的画笔，删除标签的一部分边缘。要添加剪纸效果，选择减淡工具，使用和上面相同的画笔形状给标签的边缘应用减淡。
下面要给标签添加阴影。首先，将Label图层复制一遍，更改色相/饱和度中的亮度到-100，在添加10个像素半径的高斯模糊。接下来，将Label copy图层的混合模式更改为正片叠底，将不透明度设置为75%。
标签的最后一个修饰，将饱和度更改为-40，使其更加灰暗一些。
现在我们添加一些图片，找一些符合这个风格的图片，由于我们这个教程主要讲解技术，所以我随便选了一张。这是一张漂亮的玻利维亚高原上的生锈的火车的图片。将火车从图片中提取出来。然后将火车图层的混合模式更改为变暗。
我们来添加一些文字，首先是网站名。使用grunge字体键入文字，你可以在这里找到这样的字体。标题文字使用黑色，将图层混合模式更改为叠加，然后将此图层复制一遍，将复制的图层的不透明度更改为75%。为了得到一点点的模糊效果，将复制好的图层向左或者向右移动一个或者两个像素。使用这个技术添加更多的文字，比如标语等等。这个时候我们将导航链接也添加上。
现在添加更多的东西，都是破旧风格的东西。我从这里下载了一些Jenn B的笔刷，这些笔刷是有使用上的限制的。使用这些笔刷添加一些数字、边角、胶带等等，在这一步中你可以尽情的发挥。只是要记住添加的所有图层都要在Label和Label copy图层的下方。
现在我们开始添加页面部分。首先，在页首部分我们需要一个搜索框。键入搜索文字。接下来，画出一个红色的(#6A0400)矩形作为搜索表单，然后应用描边和图案叠加图层效果。
现在我们在设计中添加主要内容区。首先我们要添加一个放置特别文字的区域。在侧边栏下方的图层中画一个深灰色(#0D0F0E)的矩形。我创建了四个文件夹来组织图层：一个在所有图层之上的Header文件夹，一个在Header文件夹之下的Sidebar文件夹，一个在前面两个文件夹之下的Content文件夹，最后一个是Footer文件夹。
你可以将这个矩形画到Content图层上，也可以给上面的四个文件夹中添加更多的文件夹。当你将矩形放置于合适的位置之后，使用下面的值应用投影和描边效果。
从这里下载一些破损的边角和边框，在灰色背景上粘贴一个。将其颜色更改为#171612，图层模式为叠加。再给侧边栏的背景上也添加一个，这次将不透明度降低到25%。
让我们来添加一些文字。想象这是类似于由javascript驱动的最新日志，或者特别内容的日志区。我在这里使用的是和导航栏上一样的破损字体，颜色为#4D0D0D，正文部分用的是#3F3F3F色的Arial字体。
给标题应用投影效果，导航栏也一样。当你将这个PSD文件转换成HTML+CSS的时候，你需要将此标题转换成图片，所以这个时候你给它们添加样式是可行的。最后，使用参考线将文字图层放置于合适的位置。
我们的特别区域看上去有一些空白，因此我们来添加一些图片。在这个教程中，我使用了一张宝丽莱照片，你可以在这里下载宝丽莱图片。提圈丽莱图片，将其放置于灰色背景之上的图层中，然后更改色相/饱和度让宝丽莱图片接近棕黑色。(需要勾选彩色化选项)。
给Label图层的边缘应用相同的技术(第九步)。将宝丽莱图片的边缘删除一部分并且将颜色渐淡。最后使用在第十步中相同的技术给其添加投影。
我将自己的旧照片添加到了设计中。在Polaroid图层上添加一个新的图层，将照片放入其中，选择宝丽莱的黑色区域，按下Ctrl+Shift+I反选选区。选择照片图层删除额外的部分。接下来，你可以添加更多的破旧效果，比如照片之上的胶带纸，如下图所示。我还给胶带纸添加了1个像素的投影效果。
第二十一步
是时候给侧边栏添加RSS图标了。画一个圆角的矩形(#99917E)，然后给它添加如下效果：内发光、图案叠加和投影，使用下面图片上的值。接下来，在矩形之上画出或者粘贴一个RSS形状，填充为黑色。最后，将RSS shape图层的混合模式更改为叠加。
第二十二步
现在将RSS图标放置于侧边栏的左上角。添加类似RSS FEED的文字。画出另外一个胶带纸，将订阅者的数字放置其上。记住，我们现在是在Sidebar文件夹中工作。
第二十三步
现在给设计中添加日志。随便写一些文字作为标题，另起一行写出日期、类别以及作者。再写出日志内容。这一步中最重要的就是排版。我喜欢给标题应用Serif字体，给正文应用Sans-Serif，这只是我的喜好。你可以选择你喜欢的字体。
第二十四步
为了给日志增加细节，我们需要添加一些图片，就像TUTS网站那样，但是因为这是一个破旧风格的设计，我们需要将图片弄得旧一些。这简单的就像在CSS中增加上下内边距，然后设置一个重复的背景图片。
这个图片是35毫米的胶卷。从胶卷中提取上下两边，使用如下图所示的数值改变它们的色相/饱和度。接下来，使用不规则的橡皮擦删除图片的部分区域。最后，给每一条图片增加投影。完成胶片的效果之后，在胶片图层之下粘贴图片。我使用了一张我旅行时的照片。最后给图片增加描边效果(#2F261D)。
第二十五步
在日志下画一条2个像素宽的线条，增加评论数字。将所有涉及日志的图层放入Post文件夹中。之后你可以使用裁切工具给文档增加一些高度，这样做的目的是看看如果有2-3篇日志的设计效果。复制Post图层组，如下所示改变文字和图片。
第二十六步
看起来不错，现在给侧边栏增加项目。你可以给每一个项目创建一个文件夹。
第二十七步
现在增加列表图标。你可以使用任意的自定义形状。随意增添一些文字，我使用的是Georgia字体。复制图标，编辑其中的一个表示鼠标悬停状态。其它的项目也这样来做。
第二十八步
我们快要完成了。给侧边栏底部增加一些破旧效果，在侧边栏图层的上方新建一个图层，添加破旧笔刷效果。选择侧边栏背景层，然后选择图层&图层蒙板&显示全部。接下来，使用不规则黑色笔刷隐藏侧边栏背景的左下角。
第二十九步
最后，选择侧边栏背景图层，拷贝它的图层样式。在设计的下方画一个矩形，放入Footer文件夹中，粘贴样式。接下来，提取并粘贴这张图片到页脚的背景上。
调整不饱和度让它变得更灰暗一些。你也可以使用步骤10中的技术给它添加投影效果。在这张纸上添加一些文字，可以是标语什么的。添加一些页脚文字，比如导航条和版权信息。
网页设计不是容易的事。但是我希望这个教程能帮助你提高你的技术。现在是轮到你设计你的网页作品的时候了。
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分466702&威望25990 F&回复币50661 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
当前时区 GMT+8, 现在时间是PS网页设计教程——如何在PS中设计一个画廊布局-济南广播电视台培训频道
PS网页设计教程——如何在PS中设计一个画廊布局
作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。约定：1、本文的软件是Photoshop CS5版本2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。In this week’s tutorial we will create a gallery layout. I will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.在这个每周教程中，我们要创建一个画廊的网页布局。我将在本教程中不使用960网格系统，目的是给初学者展示标尺工具在PS中开始设计网页是多么重要。我们也会演示如何创建使用图案、使用蒙版和滤镜Step 1: Setting up the Document步骤1：设置文档Start by creating a 1200px x 1850px document in Photoshop.开始于在PS中新建文档，尺寸：1200px*1850pxAs I mentioned earlier we will be using the Ruler Tool. Make sure that rulers and guides is turned on.正如刚才所说，我们要使用标尺工具。确保标尺和参考线都是打开的Rulers: Ctrl + RGuides: Ctrl + ;标尺：Ctrl + R参考线：Ctrl + ;Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.此外在使用标尺工具中重要的一件事是信息面板。它的用途是当你正在测量时，将标尺信息显示在信息面板中。请确保这在您右边的面板中显示。如果它不显示，您可以通过点击：窗口 & 信息去显示它。The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px in the center of our canvas.你的网页的总宽度会是960px。所以，让我们创建我们第一条参考线，点击：视图 & 新建参考线，设置值为120px。重复步骤创建一条参考线，不过把值改为1080px，这会使你的画布的中间部分一共有960px宽。Step 2: Creating the Header步骤2：创建头部区域TheHeader section is composed of Logo, Navigation, and Search. First thing you need to do is to create a folder name it Header and inside of it create sub folders and name them Logo, Navigation, and Search. It is important that you group all the things you do properly in order to be organized and easily locate things in the future for coding purposes.头部区域包含LOGO、导航栏、搜索栏。首要的事是你需要创建一个名为Header的文件夹，并在其中创建名为Logo、Navigation、Search的子文件夹。把各项分组是非常重要的，以便正确的组织元素和将来编码的时候很容易定位元素。Inside Header folder create a new layer and name it bg. Using Rectangle Tool create a 100% x 100px. By looking at the Info Panel you can view the dimension of the shape that you’re making. Or you can do this by creating a new guide by going to View – New Guide – 100px Horizontal. It’s up to you what way you choose.在Header文件夹里新建bg图层。用矩形工具创建100%*100px的矩形。查看信息面板时，你可以看见你创建的形状的尺寸。或者你可以新建一条参考线来完成这件事，点击：视图 & 新建参考线，参数设置为：水平100px。这取决于你用什么方法来完成。Add this Blending Option添加如下的混合选项Gradient Overlay: #dcdcdc, #ffffff渐变叠加： #dcdcdc， #ffffffNext thing you do is create two lines using Line Tool 55px distance from the top. But I suggest to use Rectangular Marquee Tool to make the line pixel perfect.接下来的事你要用直线工具创建两条直线（（0，55，1200，1）、（0，56，1200，1）），距离顶部55px。不过我建议你使用矩形选框工具让直线的像素完美Line 1: #cfcfcfLine 2: #ffffff直线1： #cfcfcf直线2： #ffffffAs you can see in the preview of our header there is a pattern above the lines. Create a new document 9px x 7px, background content Transparent. Using Pencil Tool with a fill color of #cfcfcf create a pattern as shown in the screenshot below. When you are done go to Edit – Define Pattern and name it whatever you wish to call it.就像你看到的我们头部区域的预览，那儿有一个图案在直线的上方。创建新文档，尺寸：9px*7px，背景是透明的。用铅笔工具按照下面的截图创建图案，填充色： #cfcfcf。当你完成后，点击：编辑 & 定义图案，取个你想取的名字。Using Paint Bucket Tool instead of foreground change it to pattern and select the pattern we made. Apply this pattern by making a selection and fill with pattern using Paint Bucket Tool.选择油漆桶工具，并把填充内容替换为我们之前创建的图案。创建一个选区，用油漆桶工具填充图案以完成添加图案的工作。建议用矩形工具创建一个矩形（0，48，1200，7），填充为0，添加如下的图案叠加的图层样式Step 3: Creating Logo步骤3：创建LOGOThis is just a simple site name logo. Start by using Text Tool and type your desired site name.这仅仅是简单的网站名字LOGO。用文字工具并输入你期望的网站的名字字体：Helvetica BOLD，字号：30px，TEMPLATE的颜色： #494367；SHOW的颜色： #A5AB0DAdd this Blending Option添加如下的混合选项Inner Shadow: #000000内阴影： #000000Step 4: Creating Navigation步骤4：创建导航菜单Again using Text Tool lets place our navigation links.再次用文字工具摆放我们的导航链接字体：Helvetica BOLD，字号：16px，About的颜色： #252525；其余文字的颜色： #555555Add this Blending Option添加如下的混合选项Drop Shadow: #ffffff投影： #ffffffStep 5: Creating Search步骤5：创建搜索栏To create our search bar use Rounded Rectangle Tool and set the radius to 10px, then create a shape as shown in the screenshot below.用圆角矩形工具创建我们的搜索栏，设置半径为10px，然后按照下面的截图创建一个圆角矩形（65，805，275，70）建议先新建四条参考线：垂直780、垂直805、水平65、水平100As you can see in the preview above, the left side of our search bar is slanting. So, we need to transform our shape by selecting the layer and press Ctrl + T then Right Click to the work area and select Distort.如你所见的预览图中，我们搜索栏中的左边是斜的。所以，我们要变换我们的形状，选则图层并按Ctrl + T，然后在工作区域右键，选择扭曲。按照下图进行变形，高度设置70是合适的，只要宽度变成325px，左边就正好穿过交点。Next we need to mask the bottom part of our shape to be equal in our header. First set the foreground to #000000, then select the layer bg in our header and make a selection of it. While it is selected select the shape of our search the press the Mask Icon in the layers panel area beside the fx icon. Just refer to the screenshot below.下一步，我们需要遮罩掉我们的形状的底部，使其等于我们的头部区域。首先设置前景色为 #000000，然后在我们的头部区域的bg图层做出一个选区。当它被选中，选择我们搜索栏的形状，然后在图层面板中区fx图标（添加图层样式图标）旁边的蒙版图标。参照下面的截图。Add this Blending Option添加如下的混合选项Inner Shadow: #000000Inner Glow: #fffGradient Overlay: #e6e6e6, #dcdcdc内阴影： #000000内发光： #ffffff渐变叠加： #e6e6e6， #dcdcdcNow let’s create the search button. Make a selection of the search bar, contract it by 2px, and fill it with any color. To contract go to Select – Modify – Contract.现在让我们创建搜索栏按钮。创建搜索栏的选区，收缩2px，然后用任意颜色填充（新建图层，然后用油漆桶工具填充颜色）。通过点击：选择 & 修改 & 收缩，收缩选区建议先做后一步后再做收缩2pxSelect Rectangular Marquee Tool, by pressing Alt key you will notice that there is a - sign beside the selection pointer, this sign means to deselect selection. Now you can deselect the section you want to deselect.选择矩形选择工具，按住Alt键，你可以注意到在选择光标一侧有一个减号，这个减号意味着去除选区。现在你可以去除你想去除的选区Add this Blending Option添加如下的混合选项Inner Glow: #ffffffGradient Overlay: #dcdcdc, #f9f9f9Stroke: #c2c2c2内发光： #ffffff渐变叠加： #dcdcdc， #f9f9f9描边： #c2c2c2Open up the search icon, align it and add a 1px drop shadow #ffffff.打开search图标，对齐摆放并添加1px白色的投影因为图标有自己的颜色，因此，再给图标添加颜色叠加： #c2c2c2，以使风格统一再给搜索栏添加文字：search for something..。字体：Arial 斜体，字号：14px，颜色： #666666Step 6: Creating Slider步骤6：创建图片滑动栏Create a folder above Header folder and name it Slider. Using Rectangle Tool with a fill color of #413f6b create a 100% by 250px.在Header文件夹上新建Slider文件夹。用矩形工具创建一个宽100%高250px的矩形（0，99，），填充颜色： #413f6bAdd this Blending Option添加如下的混合选项Inner Shadow: #ffffff内阴影： #ffffffConvert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters. Now, go to filter again and add noise通过点击：滤镜 & 转换为智能滤镜把该形状图层转换为智能对象。现在，再次点击：滤镜 & 添加杂色Controls控制按钮Create a folder inside Slider and name it Controls. Controls should have sub folders named: NextPrev and Slider Control. Inside NextPrev let’s create our Next and Previous buttons start by selecting Ellipse Tool with a fill color of #676589 and create a shape 40px x 40px.在Slider组里添加Controls文件夹。Controls有两个子文件夹：NextPrev和Slider Control。在NextPrev中，我们用椭圆工具创建我们的Next和Previous按钮，颜色填充： #676589，形状尺寸：40px * 40px。（120，204，40，40）Download the arrow icon provided in the resources and place it on our canvas. Resize and position it as shown in the screenshot below.下载资源中提供的箭头图标并将它置于我们的画布上。调整大小并按照下面的截图摆放We are going to mask the shape, first set the foreground color to #000000, next make a selection of the arrow icon by Ctrl + Click to the layer and Inverse the selection by pressing Ctrl + Shift + I. While it is selected select the Ellipse shape and press the Mask Icon beside the fx icon in the layers panel.我们打算给形状添加遮罩，首先设置前景色为 #000000，接下来通过在图层上按Ctrl + Click创建箭头的选区，并按Ctrl + Shift + I翻转选区。当出现选区时，选择椭圆形状图层然后按在图层面板中区fx图标（添加图层样式图标）旁边的蒙版图标。然后把箭头图层隐藏。Duplicate the shape and place it on the other side. Grab some sample images to put in our slide. Also, using Text Tool add some text: a sample title and a little content just follow the formatting of the text as shown in the screenshot below.复制该形状并摆放到另一边（，40，40）。获取一些示例图片放在我们的图片滑动栏上。并，用文字工具添加一些文本：按照下面截图上的文本格式的一个示例标题和一些内容文字。标题字体：Helvetica BOLD，字号：22px，颜色： #ffffff；段落字体：Arial，字号：12px，颜色： #E0DEFF；黄色的more的颜色： #EAEC25Now we are going to work on our Slider Controls. Using Rounded Rectangle Tool with a 10px radius create a shape as shown in the screenshot below. Transform the shape the same as we did in our Search bar.现在我们打算创建我们的滑动栏的导航按钮。用圆角矩形工具，设置半径为10px，按照下图创建一个圆角矩形。像和之前做搜索栏一样进行变换Also mask the layer as we did previously, refer to Step: 5 Creating Search.给这个图层添加蒙版，就像之前做的，查看步骤5：创建搜索栏这个步骤比较省略，因此在这儿补充完整用圆角矩形工具，半径10px，创建一个圆角矩形（960，324，100，50）按Ctrl + T自由变换，在形状上右键选择扭曲，按住Shift键，往右拖动右下角的控制块，直到宽度变为130；再按住Shift键往左拖动左下角的控制块，直到宽度变为160。在紫色背景层上按Ctrl + Click，获得矩形选区，然后选中红色形状的图层，按图层面板上的蒙版按钮Add this Blending Option添加如下的混合选项Gradient Overlay: #dcdcdc, #ffffff渐变叠加： #dcdcdc， #ffffffUsing Ellipse Tool create a shape as shown in the screenshot below.用椭圆工具创建如下面截图所示的形状（978，333，9，9）、（996，333，9，9）、（，9，9）、（，9，9）灰色的颜色： #D4D4D4，绿色的颜色： #A5AB0DAdd this Blending Option添加如下的混合选项Drop Shadow: #ffffffInner Shadow: #000000投影： #ffffff内阴影： #000000This will be the result.这是最终的效果Using Rectangle Tool with a fill color of #000000 create a 100% by 5px shape, then set the layer mode to multiply and opacity to 30% in the layers panel.用矩形工具创建一个宽100%高5px的矩形（0，344，1200，5），填充色： #000000，然后在图层面板中设置图层模式为正片叠底，不透明度30%Make a selection of the slider control shape and expand it by 5px by going to Select – Modify – Expand.创建滑动栏导航块的选区，并通过点击：选择 & 修改 & 扩展，扩展选取5px。新建图层，命名为Border，用黑色填充，图层模式改为正片叠底，不透明度改为30%选中紫色背景图层，按Ctrl + Click创建选区，然后选中Border图层，点击图层面板上的蒙版按钮左右有两个深色色块，不和谐，继续修改。在Border图层上右键选择转换为智能对象。在之前的横条矩形图层上按Ctrl + Click创建选区，并按Ctrl + Shift + I反选选区然后选中Border图层，点击图层面板上的蒙版按钮Final step to create our slider is to add highlights. First make a selection of our slider base, then select Brush Tool set the hardness to 0% and size about 400px. Fill the selection in a separate layer with #ffffff color and set the blend mode to Soft Light in the layers panel.最后给我们的滑动栏添加高亮效果。首先给我们的滑动栏创建选区，然后选择画笔工具，设置硬度0%、尺寸400px。在单独的图层里填充颜色： #ffffff，然后在图层面板里设置混合模式为柔光Step 7: Featured Gallery步骤7：精选画廊Create a new folder and name it Featured Gallery. Using Rectangle Tool with a fill color of #ededed create a shape 100% by 200px. Also, create two 1px lines, first line color #ffffff will be placed on the top of our shape and the second line color #c2c2c2 will be on the bottom.创建新的文件夹Featured Gallery。用矩形工具创建一个矩形（0，349，），宽100%，高200px，颜色： #ededed。并，创建两条1px的直线，第一条直线摆放在矩形的顶部（0，349，1200，1），颜色： #ffffff，第二条直线摆放在矩形的底部（0，548，1200，1），颜色： #c2c2c2。可以看出，在滑动栏的控制块的底部有条白线。在控制块图层上按Ctrl + Click，创建选区，按Ctrl + Shift + I反向选区。选中白色直线的图层，点击图层面板上的蒙版按钮Create a new layer above the shape and name it highlight. Then, make a selection of the shape. Using Brush Tool with a fill color of #ffffff brush in the center of the selection then, set the layer mode to Soft Light.在形状的图层上新建图层highlight。然后，创建形状的选区。用画笔工具在选区的中央填充白色，并设置图层的混合模式为柔光Now let’s work on our sample post for our featured gallery. First, create a folder named post then put a 100px x 100px sample thumbnail on our canvas. Also, Using Text Tool add a Title and Content.现在让我们创建精选画廊中的示例列表。首先，创建一个文件夹post，然后在我们画布上摆放一个100px*100px的示例缩略图，用文字工具添加一个标题和内容标题字体：Arial，字号：16px，颜色： #363636；内容字体：Arial，字号：12px，颜色： #636363Create a new layer below the thumbnail and name it shadow, using Pen Tool create a shape as shown in the screenshot below. Then, go to Filter – Blur – Gaussian Blur 1px, and set the Opacity to 50% in the layers panel.在缩略图的下面创建一个新的图层shadow，用钢笔工具按照截图创建形状。然后，点击：滤镜 & 模糊 & 高斯模糊，单位1px，并在图层面板中设置不透明度为50%Create a new folder and name it rate. Now, open up the star icon and place it to our canvas and place it as shown in the screenshot below.创建新的文件夹rate。现在，打开star图标并按照下面截图摆放到我们的画布上Add this Blending Option添加如下的混合选项Drop Shadow: #000000Gradient Overlay: #e7e918, #fffd76Stroke: #eaec25投影： #000000渐变叠加： #e7e918， #fffd76描边： #eaec25Make a selection of the star and deselect starting from the middle to bottom and in a separate layer fill it with Linear Gradient #ffffff to Transparent then, set the Opacity to 70% in the layers panel.给star图层创建选区，去除star中间到底部的选区，在单独的一个图层里用线性渐变填充，从#ffffff到透明，在图层面板里设置不透明度为70%This will be the result.这是结果Duplicate the star four times.复制star四次Duplicate the post folder two times a position it as shown in the screenshot below.复制post文件夹两次并按照下面的截图摆放Step 8: Posts步骤8：列表Fill the Background layer with #ededed. Create a new folder and name it Body Posts, create a sub folder and name it post. Now, create a sample 300px by 200px image thumbnail for our post and place it in our canvas. Using Rectangle Tool create a 300px by 45px shape just fill it with any color. Just refer to the screenshot below.填充背景图层，颜色： #ededed。创建新文件夹Body Posts，创建一个子文件夹post。现在，创建一个我们列表的300px*200px的缩略图在我们的画布上。用矩形工具创建一个300px*45px的矩形，用任意色填充。参看下面的截图Add this Blending Option添加如下的混合选项Drop Shadow: #000000Gradient Overlay: #f7f7f7, #ffffff投影： #000000渐变叠加： #f7f7f7， #ffffffDuplicate rate folder from our featured gallery and place it in the post folder. Also, using Text Tool create a sample title, just follow the settings in the screenshot below.从featured gallery复制rote文件夹（评价星）到post文件夹，并摆放到合适位置。并且，用文字工具创建一个示例标题，按照下面的截图设置标题文字，字体：Helvetica，字号：16px，颜色： #363636For unrated star style just remove the Gradient Overlay and replace it with Inner Shadow.没有标示的星星的样式是去掉渐变叠加，然后替换为内阴影，还得去掉投影和描边和添加白色的颜色叠加。Duplicate post folder five times and align it as shown in the screenshot below.复制post文件夹五次，并按照下面的截图摆放，水平间距20px，垂直间距19pxStep 9: Pagination步骤9：分页按钮Select Rounded Rectangle Tool and set the radius to 5px then, create a 620px by 45px shape below those posts.选择圆角矩形工具，半径5px，创建一个620px*45px的圆角矩形（120，，45）在列表的下面，颜色： #fffcfdAdd this Blending Option添加如下的混合选项Inner Shadow: #000000内阴影： #000000Using Text Tool place the number of pages as shown in the screenshot below.用文字工具按照下面的截图书写页码文字字体：Verdana，字号：12px。页码文字的颜色： #7E7E7E，页码1的颜色： #363636，Last的颜色： #7266FEStep 10: Sidebar步骤10：侧边栏Create a #c2c2c2 1px line 40px distance from our post, Mask the line and make the tip faded using Brush Tool with a fill color of #000000. You may have something that looks like the screenshot below.距离我们的列表40px创建一条直线（780，549，1，300），颜色： #c2c2c2，给直线添加蒙版，作出一个淡出的效果，用画笔工具，填充颜色： #000000。你做的东西就像下面的截图一样作出淡出的效果，建议用，点击：图层 & 矢量蒙版 & 显示全部。然后自下而上用渐变工具填充，从黑色到透明Duplicate the line and move it to the left and change the color to #ffffff. Create a Horizontal line with the same color place it as shown in the screenshot below.复制这条直线并移动到左边，并改颜色为 #ffffff。用同样的颜色创建一条水平直线并按照下面的截图摆放。Next, create a new layer below those lines we have just created and name it shadow. Using Selection, Gradient Tool, and Eraser Tool perform what you have seen in the screenshot below. The set the shadow layer to Multiply, Opacity to 50%.接下来，在这些直线下面新建图层shadow。用选区工具、渐变工具、和橡皮擦工具配合使用，就像你看到的截图一样。设置shadow图层为正片叠底，不透明度为50%Duplicate the layer and place it on the top as shown in the screenshot below. It’s up to you to make adjustments, just erase the portion that you don’t like.复制该图层并按照下面的截图摆放到顶部。这取决于你的调整，擦除你不喜欢的部分建议新建选区，然后用渐变工具水平和垂直方向各划一下，然后添加和竖直直线一样的蒙版Select Rounded Rectangle Tool then set the radius to 10px. Create a shape as shown in the screenshot below. The width of the shape is the remaining width of our canvas and the height will be 40px.选择圆角矩形工具，设置半径为10px。按照下图创建一个形状（760，597，320，40），形状的宽度是我们画布剩下的宽度，高度40px用矩形选框工具，创建一个选区（780，500，350，200），然后在选择矩形的图层，点击图层面板上的蒙版按钮Add this Blending Option添加如下的混合选项Gradient Overlay: #494367, #6b6393, #494367渐变叠加： #494367， #6b6393， #494367Using Text Tool add a header title.用文字工具添加一个标题。字体：Helvetica，字号：24px，颜色： #ffffff。并添加投影样式Next open up the social icons and place them on our canvas, align them as shown in the screenshot below, and also add their corresponding social icon names using Text Tool.接下来打开社会媒体图标并把它们摆放到我们的画布，按照下面的截图摆放，并用文字工具给每个图标添加对应的说明文字。字体：Helvetica，字号：16px，颜色： #363636Create two new folders and name them: Categories and Our Partners. Using Text Tool and Line Tool perform what you can see on the screenshot below.创建两个新的文件夹：Categories和Our Partners。用文字工具和直线工具配合使用，就像下面的截图一样标题的字体：Helvetica，字号：18px，左边文字的颜色： #363636，右边文字的颜色： #655DF3列表的字体：Tohoma，字号：12px，颜色： #7266FE分割线：上面的颜色： #C2C2C3，下面的颜色： #FFFFFFStep 11: Footer步骤11：页脚Create a new folder and name it Footer. Inside footer there are sub folders named: About, Most Love, and Site Links. Using Rectangle Tool with a fill color of #413f6b create a footer that is the right size to you.新建文件夹Footer。在Footer文件里有这些子文件夹：About、Most Love、Site Links。用矩形工具创建一个合适页脚的矩形（0，，352），颜色： #413f6bAdd this Blending Option添加如下的混合选项Inner Shadow: #ffffff内阴影： #ffffff 应该是 #000000Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters, go to filter again and add noise.通过点击：滤镜 & 转换为智能滤镜，转换该形状为智能对象，再次点击滤镜，添加杂色并添加一条白色的水平直线（0，，1），不透明度设置为20%We were going to add info text in our about folder. Using Text Tool put in some dummy text and for the formatting of the text just refer to the screenshot below.我们要在about文件夹里添加一些信息文字。用文字工具添加一些文字，并按照下面的截图设置文字的格式标题：字体：Helvetica，字号：18px，About的颜色： #FFFFFF；右边文字的颜色： #ECED2B段落及版权信息文字：字体：Helvetica，字号：12px，文字颜色： #E0DEFFUsing Text Tool add links on Site Links folder.用文字工具在Site Links文件夹添加文字标题：字体：Helvetica，字号：18px，Site的颜色： #FFFFFF；右边文字的颜色： #ECED2B列表文字：字体：Helvetica，字号：12px，文字颜色： #E0DEFF分割线：上面的直线颜色： #2F2A47；下面直线的颜色： #5C5A89Using Text Tool add a Post Title, Love this, and comments. Create also a 50px x 50px thumbnail and place it as shown in the screenshot below.用文字工具添加列表标题，Love this，comments。创建50*50的缩略图并按照下面的截图摆放标题：字体：Helvetica，字号：18px，Most的颜色： #FFFFFF；右边文字的颜色： #ECED2B列表标题：字体：Arial，字号：14px，颜色： #FFFFFF下面的小文字：字体：Arial，字号：11px，颜色： #ECED2B、#E0DEFF分割线：上面的直线颜色： #2F2A47；下面直线的颜色： #5C5A89Final steps are adding copyright and back to top button. Open up the arrow icon and rotate it facing top.最终要添加版权信息和回到顶部按钮。打开arrow图标并旋转，使之箭头朝上Add this Blending Option添加如下的混合选项Drop Shadow: #000000Gradient Overlay: #dcdcdc, #ffffff投影： #000000渐变叠加： #dcdcdc， #ffffffFinally we’re done!最终我们完成了后记：这是一篇很好的教程。大量的运用了蒙版的技术。整体配色简洁和谐，让人赏心悦目。在网上查阅到这篇教程的时候，只剩下文字说明和无效的死链接。感谢这个网站 WayBack Marchine 使我查到了这篇教程的备份，得以顺利的完成本教程的翻译。同时，再介绍一个网站 TinEYE 它能根据你上传的图片找寻类似的图片（新功能还包括，根据你指定颜色的比例来找寻相关的图片）下图就是我把教程中的折纸上传后，找到的PSD素材，很好很强大。
所属类别：
设计培训平面设计培训网页设计培训
您可能还想看
版权所有：济南广播电视台 All Rights Reserved
广电总局批文
信息网络传播
济南网络广播电视台 用户反馈邮箱:ijntv_ 电话：8}