三折页广告宣传单设计教程


来源:未知 作者: 日期:2009-11-23 Tag: 教程 设计 一个 步骤 添加 参考 使用 选择 我们 工具

这次,我会用Photoshop帮你从头开始创建一个即将印刷的宣传册。这篇教程很适合初学者以及那些想知道更多关于出版设计的人。让我们开始吧! 上下是最终效果预览。介绍:这是一个实用的教程,教大家如何用Photoshop设计一个简单的宣传册。我没有使用任何设计样板,也没有用 Illustrator,因为有很多人没有这个软件,或者根本不知道如何去使用它。如果你是一个正在学习怎么设计一本能印刷的宣传册的学生的话,或许这就是适合你的教程。


Photoshop详细的设计宣传册教程,PS教程,思缘教程网

第一部分:建立你的文档

步骤1:选择折叠类型

在开始之前有几件事需要我们考虑到:它的大小、形状和折叠类型。一般来说,我们应该从笔和纸开始。用一张纸寻找最好的折叠方式是一个不错的主意,不过叠完后,你只能打印两面,也就是说,是两个PS文档,一个正面的,一个反面的。

在这,我会告诉你如何设计一个三折叠的宣传册。下面是一个快速折叠指南。我们将每个打印区域以“面”命名,所以我们有“第1面”、“第2面”、“第3面”……直到“第6面”。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤2:起草

一旦选择好折叠类型,想象出一个设计图并不难。你折叠之后,就在上面涂鸦,看看它的效果。这是最具创意的一步,尽情发挥你的想象吧~

在下面的例子中,我已经按照我的方案画出了一些。这种格式基于基本指导方针的设计和一些用图形表达的idea。起草会帮助你了解你想要的宣传册的布局构造,如果布局能帮助读者很快找到信息的话,这就是一个很好的分类信息的方式。例如:你可以在我的草图上看到我是如何把“联系我们”文本放在第2面的(见先前的图形),所以当这个小册子保持折叠状态时,读者仍然能够看到宣传册的题目和联系信息。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤3:建立工作文档

开始设计吧……这一次我会用标准的11*8.5英寸的文档。打开Photoshop,按命令+ N创建一个新的文件。为了出版设计,文件设置是十分重要的,所以要注意以下的设置。设定分辨率为300象素,颜色模式为CMYK。在开始设计之前要校准打印机的色彩显示器,但那是另一个主题,所以你可以不用管它。

创建文档之后,(你可以称之为“宣传册——正面”),显示标尺:去视图>标尺或按Command + R。可以设置标尺的单位是英寸,在标尺上按Alt-clicking在菜单选项上选择英寸。你必须使用显示参考线选项,去视图>显示>参考线或按默认的快捷键Command + Semi-Colon 。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤4:主要区域边界

我们必须确定我们有效打印区域的边界或“主要区域”,这意味着是8,5×11英寸。因此我们在每个文档的边上只画4条参考线。这些参考线不会被打印出来,它们仅仅是作为参考点规范你的设计。

你可以显示它们或是随时隐藏它们,去视图>显示>参考线。画一条线,点击标尺、水平或垂直的都行,拖拽参考线,把它放在你想放的地方。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤5 :增加文档的大小

放置完四个参考线之后,去图像>画布大小,把宽度和高度的值再添加一英寸,这意味着现在文档是12*9.5英寸。除此之外,要检查锚点在中间位置。点击OK,你就会看到白色的背景每个边增加了0.5英寸。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤6:边

现在我们将加入一个0,25英寸的边。在之前的参考线外超过四分之一英寸的地方再画4条参考线。这是非常重要的,因为任何背景图像或是颜色一定要画出它的内边框。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤7:安全边界

虽然我们的裁剪工艺很完善,但仍要有一个小区域我们必须留下,是打印空间里没有任何重要文字或是图像的小区域。我们添加一个安全界限,边缘没有任何元素,而且边缘和设计之间有空间。如果你熟悉网站设计你可以称它为填补。

在文档中“主要区域”参考线的两边各拖动四条参考线1/4英寸,这仅仅是一个建议。你可以按你的想法调整尺寸。但最后你必须做到类似下方最后一个图像的效果。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤8:创建柱形参考线

现在我们需要创建柱形参考线,这个宣传册有三个相等的区域来创建三个板块的内容。这有几种方法可以添加这些参考线,其中之一就是利用计算器在纸上分离出三个宽度(11/3 = 3,6666),有点难是吗?我最喜欢的一种技巧是在网格中创建几个相同宽度的圆柱,使用当时的形状出版设计。

先画一个矩形(U),使用参考线,从“主要区域”的左上方的参考线,拖动矩形直到另一参考线的底部。(如图一)

这种暂时的形状宽度并不重要,只要试着让它稍微缩小。然后使用移动工具选择第一个长方形,确保选项面板里显示选择转换控制面板,然后复制矩形。你也可以按Alt-clicking拖动选区的形状。

把复制的放到之前的矩形旁边(第一个矩形的右边紧挨着第二个矩形的左边)。这很容易做到。我变换了拷贝图形的颜色来加强显示(看下图)。#p#分页标题#e#

复制第三个矩形并把它放在第二个的旁边,如图所示。现在你已经准备好了三个矩形,确保它们之间没有空隙也没有重叠。选择三个矩形,然后在图层面板(按住Shift键,点击每层的略缩图)通过控制变换扩展三个矩形直到它占据了全部的“主要区域”。(见图四)

这个转变过程将均匀扩大每一个矩形。接下来,只是选择中间的矩形,使用移动工具利用变换界限作为圆柱的两个新参考线。最后删除矩形。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤9 -折叠安全界限

这是最后一步参考线的过程,紧贴圆柱参考线添加1/4英寸的安全界限。这非常重要——折叠的地方总是需要2-3毫米的印刷面积,关键是在那个区域里你没有任何图形对象。

这时,你必须完美的整合这些参考线。你可以把它作为以后设计的模板存起来。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤10:背景

添加一个背景颜色。当然,你必须使用CMYK值来找到完美的颜色。双击工具栏的前景色,选择你的背景颜色。

我使用了一个微妙的组合——15%的黄色以及10%的纯黑色。现在从边界参考线的左上方到右下方画一个矩形,默认填充矩形向量为前景色。添加背景,包括边框的边缘也要添加,这些都是非常重要的。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤11:整齐的参考线

现在我们将会增加一些自定义的整齐的参考线,让我们知道哪里应该修剪,哪里应该对折。为此,选取前景色为100%黑色。选择直线工具(点击并保持矩形工具,直到你有更多的选择项)。

在“主要区域”的参考线上画几条直线,一直画到边缘(看下图),按住Shift键画一条直线,在四个拐角上和圆柱的参考线上画这些整齐的线段。你可以根据需要按Command + Semi-Colon键显示或隐藏参考线。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤12:

把所有直线组成一组,取名为“整齐的参考线”。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

第二部分:设计

步骤13:添加背景纹理

既然我们用PS设计,当然要添加纹理喽。方便添加酷酷风格的纹理和混合图层是PS强大的功能之一。我们将使用 this image 作为背景纹理,给作品添加古典风格。

粘贴图像文件到一个新层,取名为”BG Texture”,利用移动工具(V)和自由变换选项将其放在边框里(就像前几步放置矩形那样做)。放好之后使用克隆工具来修理缺陷,如原始图片中蓝色的墨迹。最后改变纹理的混合模式为叠加,不透明度为40%。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

重要:改变CMYK图层的混合模式不同于RGB颜色。RGB颜色使用光亮混合图层,而CMYK模式采用墨水的比例来混合。例如正片叠底这样很受欢迎的混合模式都是在RGB颜色代码的基础上使用数学公式来实现的。结果会在颜色代码上显现出很大的不同。

下面是在RGB模式和CMYK模式下关于正片叠底混合模式的例子。虽然在青、品红、黄、红、蓝、绿色下它们几乎没有什么大的变化,但无论如何,是否有浓重的黑色取决于混合模式是在CMYK还是RGB下实现的。

编辑RGB文档这个简单的办法来解决这个复杂的混合模式的问题吧,完成它之后,转换颜色模式到CMYK上,去图像>模式>CMYK颜色,变更所有的层,但是这样不是很完美,改变模式后你可能要耗损它的饱和度和亮度。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤14:添加长条幅

现在我们要开始设计作品本身了。基于我的草图,我会在页面中画一个长矩形。可以使用任何颜色,因为我们要增加一些图层效果使它更完美。

开始添加一个渐变叠加,使用下图的描述(深红色到红色)。你可以使用颜色选择器,用潘通色卡或直接输入值进入CMYK区域。我建议你使用后者。

添加浅红色10px的描边。

最后添加一个大的阴影效果。阴影采用CMYK模式下默认的纯黑色,这意味着C = 0%,M = 0%,Y = 0%、K = 100%。

点击OK看看效果。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤15:创建条幅的纹理

点击 Command + A选择所有的层,在图层面板上选择”BG Texture”层,复制(Command +C)选项,粘贴到上一步”Stripe”图层上方的一个新层上,拉伸它的长度稍微变换一点纹理,命名为”Stripe Texture”。

在 “Stripe”矢量蒙版的缩略图上点击Command-click,去选择>反选。然后删除多余的纹理只在条纹上留下一块。接下来,改变”Stripe Texture”的混合模式为线性加深。正如你所看到的,我们的条纹有一个很漂亮的纹理,现在合并 “Stripe” 和”Stripe Texture”图层,命名为”Stripe”。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤16:旋转条纹

我决定不使用90°标准的垂直排列,而会创建两个15°和5°的角度变化,根据这些角度旋转对象。#p#分页标题#e#

首先,使用移动工具(V),选择”Stripe”文件夹。现在使用自由变换工具旋转对象-15°。你可以按住Shift键在15度的区间里增加/减少旋转角度。

设置之后,点击提交变换,把条纹放在你想要的位置。我将在条纹的底边和”主要区域”右边的参考线之间使用一个参考交叉点。也创建了一些垂直平分线。

最后,我将添加一些自定义的细节。旋转条幅的角度(看看”Stripe” 图层风格上渐变叠加的角度)它仍是90°。这就是为什么条幅左边看起来比右边的深。你可以增加或减少角度,使渐变看起来更完美。我设置渐变叠加的角度为100°。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤17:添加第二个条纹

选择”Stripe Folder”,使用移动工具。结合Alt键拖动文件夹复制它。然后旋转新的文件夹使它处于水平位置。我们要让这个条纹渐变颜色更深,如下图所示改变渐变叠加的颜色。同样,稍微拉伸新文件夹的高度。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤18 :旋转第二个条纹

稍微旋转 “Stripe copy”条纹-5°。你可以在转换工具面板的角度栏中键入角度值。旋转条纹,把它放在第一个条纹仅几毫米以下的地方(见下图)。提交所有变换。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

对齐中心(备选)

我想在反面的条纹上添加一个包裹的效果,把它们对齐放在水平中心线上是很重要的。实际上根简单,只要点击Command + A选择全部,使用移动工具(V),然后点击图层面板的”Stripe” 文件夹。

你会在工具选项面板中看到对齐选项。点击对齐到水平线中心。按Command + D取消先前的选择。在”Stripe copy”文件夹中重复这个选择。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤19:丝带

为了加深细节的效果现在我们要在宣传册的正面添加一条黄丝带。在”Stripe” 和 “Stripe copy” 文件夹之间创建一个新组,命名为”Ribbon”。在它的内部创建一个如下图所示新的窄一些的黄色矩形向量,颜色不重要。

创建缎带,在矩形的中央画一个临时的垂直参考线。在图层面板中选择这个向量蒙版,从工具栏中选择添加锚点工具。按住钢笔工具按钮,使用这个工具在矩形底边的中心处创建一个小锚点。

现在打开转换点工具(点击并且按住钢笔工具按钮)在之前的锚点上点击一下删除曲线。其次,从这个工具栏中选择直接选择工具(点击并按住路径选择工具)选择新锚点。现在用光标往下移动几毫米。就做成了一条丝带。要确保丝带在宣传册的第一面里,也包括它折叠的安全界限在内。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤20:丝带层风格

接下来在”Ribbon”层上添加渐变叠加风格(暗黄色到黄色),使用下图的设置值。同样,如下图所示填加5像素的描边。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤21:丝带的阴影

现在我们将添加丝带的阴影,你可以按你的想法使用一个简单的阴影效果,不过这一回我会填加一个流行的阴影——扭曲丝带达到这个效果。

复制丝带图层,栅格化图层,在复制层的上方或是下方快速创建一个新的空白图层,选择这两层,点击Command + E合并它们,命名为”Ribbon Shadow”。

现在将阴影层向右移动几毫米。然后在阴影上应用纯黑色的色彩叠加风格。接着去滤镜>模糊>高斯模糊,设置半径为10像素,点击“OK”。你会看到这个模糊层看起来并不好,因此改变”Ribbon Shadow” 的混合模式为叠加,不透明度为75%。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤22:完成丝带

添加丝带最后的细节,我们需要稍微扭曲丝带。使用移动工具选择丝带,在选择菜单中使用自由变换控制。

用光标稍微弯曲丝带(如下图所示)。确认弯曲。最后使用与步骤15相同的技术添加丝带的纹理,唯一的区别是改变”Ribbon texture” 的混合模式为正片叠底,不透明度为50%。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤23:标题

现在是添加标题的时候了。基于我的草图,我会在大的长幅上键入字母”PSD”,以及在稍短的条幅上写 “TUTS+” 。选择文字工具(T),在大的长幅任何位置上点击添加文字。现在去窗口>字符看看这个自定义的文本属性面板。你也可以从 Comprehensive Introduction to the Type Tool上看到更多关于这个工具的信息。

第一个单词我用了黑色的Helvetica-Black字体,你可以使用Arial Black字体,它看起来也不错。创建文字图层之后,使用移动工具(V)旋转文字层-15°,使它匹配条纹的旋转角度。

最后,创造一个凸版印刷的效果,在文本图层上添加深红色的颜色叠加风格,用柔和的红色外发光以及65%透明度的纯黑色的内阴影(参见下图的值)。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网#p#分页标题#e#

步骤24:标题

让我们完成标题的制作吧。重复上一步,但这次用一个小点的字体,把它放在小的条幅上,运用相同的层风格。然后旋转文字图层-5度。作为一个小的调整,改变颜色覆盖使它更暗一些。最后,合并两个文本层,命名为”Title” 。要记住你的文字层必须在参考线所示的安全边界内。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤25:一点3D效果的阴影

投影风格并不是获得逼真阴影的最可靠的方式,我将添加另一种阴影,在”Stripe”文件夹下方创建一个不错的效果。

在”Stripe”文件夹的下方创建一个新层,命名为”Shadow”。在这层,创建并伸展一个椭圆(你可以使用椭圆边框工具或椭圆工具)。填充100%纯黑色(100% K),去滤镜>模糊>高斯模糊,设置半径为20像素,点击“OK”。接下来旋转阴影层-15°。最后改变它的混合模式为正片叠底,不透明度为50%。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤26:内容文本

添加内容文本是相当简单的,但是你必须运用你的出版知识使它看起来效果更好。在以下的例子中,我在第二面创建了一个段落文字图层并加上了一些虚拟的文本。

这次我选择的是Arial Black 字体。我也填加了两个文字图层来创建醒目的标题。另一个重要的事情是旋转。完成你的文字层创作之后,文字层如果在大条幅上你必须将其旋转-15度;如果在小条幅下那就旋转-5度。旋转将会整合我们整体的设计效果。再次,记得要在安全边界内进行设计。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤27:合并内容

我添加了更多的文字层和一些虚拟的内容。当然,你可以添加你自己的。注意“联系我们”文本要有-5°的旋转,因为它的下面有小条纹。你可以把所有图层合并到它们所在版面的文件夹里,“第1面”、“第2面”或是“第3面”。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

结尾第一部分

这时,我们已经做好了作品的第一面。要记住用描述性的标题保存你做的设计,如“宣传册——正面”,然后再以“宣传册——背面”命名保存文件再继续。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

第二部

步骤28:建立内部布局

我们正在做的是印刷纸的背面。很明显:边长,边缘和参考线与正面完全相同。但是为了用条纹创造一个包装效果,我们需要翻转它们。

首先,删除(或隐藏)所有的内容层(“第1面”、“第2面”和“第3面”),然后只剩下条纹和丝带。你可以创建三个文件夹,取名为“第4面”、“第5面”和“第6面”来添加内容。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤29:翻转条纹

现在我们将翻转条纹 。选择”Stripe Copy”文件夹,去编辑>变换>水平翻转。在 “Stripe”文件夹中也这么做。最后,把丝带移到文档的左边。(如图)

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤30:添加更多的内容

不难添加背面的内容,只需要重复步骤26,但这次旋转的角度必须积极。在这种情况下,旋转15o。我使用PS中默认的定制形状的贴图创建了服务列表图标。记住不要超过规定的安全界限哦。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤31:添加一个自定义的形象

从它的背景里提取this picture图像并粘贴到“第5面”文件夹的一个新层里,命名为 “Polaroid” 。现在可以在”Polaroid” 的黑色矩形框里粘贴任何的图片(你必须运用字幕选择或添加层蒙版)。把它粘贴在”Polaroid”上面,取名为”Picture”。我用的是 this picture。最后,改变”Picture”图层的混合模式为叠加。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤32

合并 “Picture”和”Polaroid”放到一个取名为 “Polaroid” 的图层里,然后调整色相/饱和度(Command + U),使用下图设置。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤33:图片的阴影

在”Polaroid”图层后面创建一个新的矩形(100%K)命名为”Shadow” 。点击Command + F 再次应用高斯模糊滤镜。然后改变图层的混合模式为正片叠底,不透明度为60%。接下来,向右旋转几度”Shadow”图层。

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤34:最后润色

向右旋转几度整个“第5面”文件夹。我们可以选择加深工具加深 polaroid 照片的一些区域,使它显得更真实。#p#分页标题#e#

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

步骤35:结尾第二部分

背面也完成喽~

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

结论

现在你就可以打印文档了。点击文件>另存为,选择一个文件类型(保存为PDF格式是一个不错的选择)。你可以发挥想象自己做一个很酷的宣传册~

Photoshop详细的设计宣传册教程,PS教程,思缘教程网

本教程没有审核 不知道哪会出问题 请大家看过的提提意见 以便下次更好的翻译

相关推荐
  • 像素画绘制基础教程
  • 字体中国系列字体设计教程:八皇游戏品牌字体
  • 像素画绘制基础教程
  • 像素画绘制基础教程