PS新手教程：教你设计时尚简洁的杂志封面

本篇节选自《Adobe Photoshop CS6 中文版经典教程》，Adobe 公司官方出品呦，这节教童鞋们设计出一款风格出众的杂志封面，教程非常详细，木有任何基础的童鞋也能轻易学会，来试一下吧！

新手上路，老司机带着：

《超赞！设计师完全自学指南》
《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

7.1 关于文字

在Photoshop 中，文字由以数学方式定义的形状组成，这些形状描述了某种字体中的字母、数字和符号。很多字体都有多种格式，其中最常见的格式是Type 1（PostScript 字体）、TrueType 和OpenType。有关OpenType 的更详细信息，请参阅本课后面的"Photoshop 中的OpenType"。

在Photoshop 中将文字加入到图像中时，字符由像素组成，其分辨率与图像文件相同—放大字符时将出现锯齿形边缘。然而，Photoshop 保留基于矢量的文字的轮廓，并在用户缩放文字、保存PDF 或EPS 文件或者通过PostScript 打印机打印图像时使用它们。因此，用户可以创建边缘犀利的独立于分辨率的文字、将效果和样式应用于文字以及对其形状和大小进行变换。

 

7.2 概 述

在本课中，读者将为一本技术杂志制作封面。你将以第6 课制作的封面为基础，其中包含一位模特、模特投影和桔色背景，你将在封面中添加文字，并设置其样式，包括对文字进行变形。

• 教程素材打包：微盘下载

首先来查看最终的合成图像。

1. 启动Photoshop 并立刻按下Ctrl + Alt + Shift（Windows）或Command + Option + Shift 快捷键（Mac OS）以恢复默认首选项（参见前言中的"恢复默认首选项"）。
2. 出现提示对话框时，单击"是"按钮确认要删除Adobe Photoshop 设置文件。
3. 选择菜单"文件">"在Bridge 中浏览"启动Adobe Bridge。

4. 在Bridge 左上角的收藏夹面板中，单击文件夹Lessons，然后双击内容面板中的文件夹Lesson07，以便能够看到其内容。
5. 选择文件07End.psd。向右拖曳缩览图滑块加大缩览图，以便清晰地查看该图像。
你将使用Photoshop 的文字功能来完成该杂志封面的制作。所需的所有文字处理功能Photoshop 都有，无需切换到其他应用程序就能完成这项任务。

6.双击文件07Start.psd 在Photoshop 中打开它，如图7.1 所示。

图7.1

7. 选择菜单"文件">"存储为"，将文件重命名为07Working.psd，并单击"保存"按钮。
8. 如果出现"Photoshop 格式选项"对话框，单击"确定"按钮。
9. 从选项栏中的工作区切换下拉列表中选择"排版规则"。

排版规则工作区显示本课将使用的字符面板、段落面板、段落样式面板、图层面板和路径面板。

7.3 使用文字创建剪贴蒙版

剪贴蒙版是一个或一组对象，它们遮住了其他元素，使得只有这些对象内部的区域才是可见的。实际上，这是对其他元素进行裁剪，使其符合剪贴蒙版的形状。在Photoshop 中，可以使用形状或字母来创建剪贴蒙版。在本节中，读者将把字母用作剪贴蒙版，让另一个图层中的图像能够透过这些字母显示出来。

7.3.1 添加参考线以方便放置文字

文件07Working.psd 包含一个Background 图层，制作的文字将放在它上面。首先放大要处理的区域，并使用标尺参考线来帮助放置文字。

1. 选择菜单"视图">"按屏幕大小缩放"，以便能够看到整个封面。
2. 选择菜单"视图">"标尺"，在图像窗口顶端和左边显示参考线标尺。
3. 从左标尺拖曳出一条垂直参考线，并将其放在封面中央（4.25 英寸处），如图7.2 所示。

图7.2

7.3.2 添加点文字

现在可以在合成图像中添加文字了。Photoshop 允许用户在图像的任何位置创建横排或直排文字。用户可以输入点文字（一个字母、一个单词或一行）或段落文字。在本课中，读者将添加这两种文字，首先来添加点文字。

1. 在图层面板中，选择图层Background。
2. 选择横排文字工具，并在选项栏中做如下设置（如图7.3 所示）。
在下拉列表"字体系列"中选择一种无衬线字体，如Myriad Pro，然后从下拉列表"字体样式"中选择Semibold。

在下拉列表"字体大小"中输入144 并按回车键。

单击"居中对齐文本"按钮。

3. 在字符面板中，将"字距"设置为100。
4. 在前面添加的中央参考线上单击以设置插入点，并输入DIGITAL。然后单击选项栏中的"提交所有当前编辑"按钮，结果如图7.3 所示。

图7.3

注意：输入文字后，要提交编辑，要么单击"提交所有当前编辑"按钮，要么切换到其他工具或图层，而不能通过按回车键来提交，这样做将换行。

单词DIGITAL 被加入到封面，并作为一个新文字图层（DIGITAL）出现在图层面板中。可以像其他图层那样编辑和管理文字图层，可以添加或修改文本、改变文字的朝向、应用消除锯齿、应用图层样式和变换以及创建蒙版。可以像其他图层一样移动和复制文字图层、调整其排列顺序以及编辑其图层选项。

5. 按住Ctrl （Windows）或Command（Mac OS）键并拖曳文字DIGITAL，将其移到封面顶端。
6. 选择菜单"文件">"存储"将文件存盘。

7.3.3 创建剪贴蒙版及应用投影效果

默认情况下，添加的文字为黑色。这里需要使用一幅电路板图像来填充这些字母，因此接下来读者将使用这些字母来创建一个剪贴蒙版，让另一个图层中的图像透过它们显示出来。

1. 打开文件夹Lesson07 中的文件circuit_board.tif。可使用Bridge 打开该文件，也可选择菜单"文件">"打开"。
2. 在Photoshop 中，选择菜单"窗口">"排列">"双联垂直"。文件circuit_board.tif 和07Working.psd 都将出现在屏幕上。单击文件circuit_board.tif 以确保它处于活动状态。
3. 选择移动工具，再按住Shift 键并将circuit_board.tif 文件的"背景"图层拖曳到文件07Working.psd 的中央，如图7.4 所示。拖曳时按住Shift 键可让circuit_board.tif 图像位于合成图像的中央。

图7.4

在07Working.psd 的图层面板中将出现一个新图层（图层1），该图层包含电路板图像，读者将让它透过文字显示出来。然而，在创建剪贴蒙版前，需要缩小电路板图像，因为它相对于合成图像太大了。

4. 关闭文件circuit_board.tif，而不保存所做的修改。
5. 在07Working.psd 文件中，选择图层"图层1"，再选择菜单"编辑">"变换">"缩放"。
6. 抓住定界框角上的一个手柄，按住Shift 键并拖曳，将电路板缩小到与文字等宽。按住Shift 键拖曳可保持图像的长宽比不变。调整电路板的位置，使其覆盖文字，如图7.5 所示。

图7.5

7. 按回车键让变换生效。
8. 双击图层名"图层1"并将其改为Circuit Board。然后，按回车键或单击图层面板中图层名的外部使修改生效，如图7.6 所示。

图7.6

9. 如果没有选择图层Circuit Board，选择它，再从图层面板菜单中选择"创建剪贴蒙版"， 如图7.7 所示。

图7.7

提示：也可这样创建剪贴蒙版：按住Alt 键（Windows）或Option 键（Mac OS）， 并在图层Circuit Board 和DIGITAL 之间单击。
电路板图像将透过字母DIGITAL 显示出来。图层Circuit Board 的缩览图左边有一个小箭头， 而文字图层的名称带下画线，这表明应用了剪贴蒙版。下面添加内阴影效果，赋予字母以立体感。

10.选择文字图层DIGITAL 使其处于活动状态，单击图层面板底部的"添加图层样式"按钮，并从下拉列表中选择"内阴影"。
11. 在"图层样式"对话框中，将混合模式设置为"正片叠底"，不透明度设置为48%，距离设置为18，阻塞设置为0， 大小设置为16，再单击"确定"按钮， 如图7.8 所示。

12. 选择"文件">"存储"保存所做的工作，此时的图像如图7.9 所示。

图7.9

文字工具使用技巧

● 选择文字工具后，按住Shift 键并在图像创建口单击，将创建一个新的文字图层。 这样做可避免在另一个文字块附近单击时，Photoshop 将自动选择它。
●在图层面板中，双击任何文字图层的缩览图图标"T"，将选中该图层中所有的文字。
●选中任何文本后，在该文本上单击鼠标右键（Windows）或按住Control 键并单击（Mac OS），可打开上下文菜单，然后选择"拼写检查"可检查拼写。

7.4 沿路径放置文字

在Photoshop 中，可创建沿你使用钢笔或形状工具创建的路径排列的文字。文字的方向取决于你在路径中添加锚点的顺序。使用横排文字工具在路径上添加文字时，字母将与路径垂直。如果你调整路径的位置或形状，文字也将相应地移动。

下面在一条路径上创建文字，让问题看起来像是从模特嘴中出来的。路径我们已经为你创建好了。

1. 在图层面板中，选择图层Background。
2. 单击图层面板组中的"路径"标签。
3. 在路径面板中， 选择路径Speech Path，它看起来像是从模特嘴里出来的，如图7.10 所示。

4. 选择横排文字工具。
5. 在字符面板中做如下设置。

● 字体系列为Myriad Pro。
● 字体样式为Regular。
● 字体大小为16 点。
● 字距为-10。
● 颜色为白色。
● 全大写。

6. 将鼠标指向路径，等出现一条斜线后单击路径的起点，并输入文字What's new with Games?，如图7.11 所示。

图7.11

7. 选择单词GAMES 并将其字体样式改为Bold，在选项栏中单击"提交所有当前编辑"按钮，如图7.12 所示。

图7.12

8. 在图层面板中，选择图层What's New with Games，再从图层面板菜单中选择"复制图层"，并将新图层命名为What's new with MP3s?。
9. 使用文字工具选择Games，并将其替换为MP3s，再单击选项栏中的"提交所有当前编辑"按钮。
10. 选择菜单"编辑">"自由变换路径"，将路径左端旋转大约30°，再将该路径移到第一条路径的上方。然后，单击选项栏中的"提交变换"按钮，结果如图7.13 所示。

图7.13

11. 重复第8 ～ 10 步，将单词GAMES 替换为PHONES。将路径左端旋转大约-30°，并将该路径移到第一条路径的下方，结果如图7.14 所示。

图7.14

12. 选择菜单"文件">"存储"保存所做的工作。

 

7.5 点文字变形

位于路径上的文字比直线排列的文字更有趣，但下面将变形文字，让其更有趣。变形让用户能够扭曲文字，使其变成各种形状，如圆弧或波浪。用户选择的变形样式是文字图层的一种属性 — 用户可以随时修改图层的变形样式，以修改文字的整体形状。变形选项让用户能够准确地控制变形效果的方向和透视。

1. 通过滚动或使用抓手工具移动图像窗口的可见区域，让模特左边的文字位于图像窗口中央。
2. 在图层面板中，在图层What's New with Games? 上单击鼠标右键（Windows）或按住Control 键并单击（Mac OS），然后从上下文菜单中选择"文字变形"，如图7.15 所示。

图7.15

3. 在"文字变形"对话框中，从下拉列表"样式"中选择"波浪"并选中单选按钮"水平"。将"弯曲"设置为+33%，"水平扭曲"设置为-23%，"垂直扭曲"设置为+5%，然后单击"确定"按钮，如图7.16 所示。

单词What's New with Games? 看起来是浮动的，就像波浪。重复第2 ～ 3 步对你在路径上添加的其他两段文字进行变形。

4. 将文件存盘。

 

7.6 设计段落文字

到目前为止，读者在封面上添加的文本都只有几个单词或字符，它们是点文字。然而，很多设计方案要求包含整段文字。在Photoshop 中，可以设计整段文字，还可应用段落样式。你无须切换到排版程序来对段落文字进行复杂的控制。

7.6.1 使用参考线来帮助放置段落

接下来读者将在封面上添加段落文字。首先在工作区中添加一些参考线以帮助放置段落。

1. 从左边的垂直标尺上拖出一条参考线，将其放在距离封面右边缘大约0.25 英寸处。
2. 从顶端的水平标尺上拖出一条参考线，将其放在距离封面顶端大约2 英寸处，如图7.17 所示。

图7.17

7.6.2 添加来自注释中的段落文字

现在可以添加段落文字了。在实际的设计中，文字可能是以字处理文档或电子邮件正文的方式提供的，设计师可将其复制并粘贴到Photoshop 中；也可能需要设计师自己输入。对撰稿人来说， 另一种添加少量文字的简易方式是，使用注释将其附加到图像文件中，这里就是这样做的。

1.双击图像窗口右下角的黄色注释打开注释面板，如图7.18 所示。如果必要， 扩大注释面板以便能够看到所有文本。

图7.18

2. 选择注释面板中的所有文本，再按Ctrl + C（Windows）或Command + C 快捷键（Mac OS）将其复制到剪贴板，然后关闭注释面板。
3. 选择图层Model，再使用横排文字工具在杂志封面右边拖曳出一个文本框。该文本框宽约4 英寸，高约8 英寸，距离封面右边缘大约0.25 英寸。请将该文本框与前面添加的参考线对齐。

提示：如果你不小心选择了文字DIGITAL，可在开始拖曳文本框时按住Shift 键， 然后松开Shift 键并继续拖曳。按住Shift 键可确保Photoshop 新建一个文字图层。

4. 按Ctrl + V（Windows）或Command + V 快捷键（Mac OS）粘贴文本。新文字图层位于图层面板顶部，因此文本出现在模特前面。
粘贴的文字很大，因为默认为144 点。下面将文字调整到合适的大小，再设置其样式。

5. 在粘贴的文字中单击，并按Ctrl + A（Windows）或Command + A 快捷键（Mac OS）选择所有文字。然后，在字符面板中将字体大小设置为18 点。
6. 选择前3 行（The Trend Issue），再在字符面板中应用如下设置。

? 字体系列为Myriad Pro（或其他无衬线字体）。

● 字体样式为Regular。
● 字体大小为70 点。
● 行间距为55 点。
● 颜色为白色。

7. 单击字符面板组中的"段落"标签以显示段落面板。
8. 在仍选择了The Trend Issue 的情况下，单击"右端对齐文本"按钮。
9. 单击"字符"标签以显示字符面板，再选择单词Trend，并将字体样式改为Bold。
10. 单击选项栏中的"提交所有当前编辑"按钮，结果如图7.19 所示。

图7.19

11. 单击图层面板的空白区域，确保没有选择任何图层。

标题的格式就设置好了。

7.6.3 创建段落样式

下面创建一种段落样式，以设置其他文本的格式。段落样式是一系列文字属性，你只需单击就可将其应用于整个段落。Photoshop 中的段落样式类似于排版程序（如Adobe InDesign）和字处理程序中的段落样式，但它们的工作原理可能存在一些差别。默认情况下，将对你在Photoshop 中创建的所有文本应用段落样式"基本段落"。

1.单击段落样式面板底部的"创建新的段落样式"按钮。
2. 双击"段落样式1"以修改其属性。
3. 在"段落样式选项"对话框中，指定如下设置（如图7.20 所示）。

图7.20

● 样式名称：Cover Teasers。
● 字体系列：Myriad Pro。
● 字体样式：Bold。

● 字体大小：28 点。
● 行距：28 点。
● 颜色：白色。

4. 在"段落样式选项"对话框左边的列表中，选择"缩进和间距"。
5. 从"对齐方式"下拉列表中选择"右"，再单击"确定"按钮。

你创建了一个样式，可通过应用它来快速设置封面上文章标题的格式。下面为副标题创建一种样式，其字体应更小些。

6. 再次单击段落样式面板底部的"创建新的段落样式"按钮。

7. 双击"段落样式1"，再指定如下设置。

● 样式名称：Teasers subheads。
● 字体系列：Myriad Pro。
● 字体样式：Regular。
● 字体大小：22 点。
● 行距：28 点。
● 颜色：白色。

8. 在"段落样式选项"对话框左边的列表中，选择"缩进和间距"。
9. 从"对齐方式"下拉列表中选择"右"，再单击"确定"按钮。

7.6.4 应用段落样式

应用段落样式很容易，只需选择文本，再单击样式名。如果文本原来使用的是"基本段落" 样式，Photoshop 将保留这些覆盖（override），而只应用样式中不与这些覆盖冲突的属性。在这种情况下，通过清除覆盖可应用样式的所有属性。

1. 选择文本What's Hot，再在段落样式面板中选择Cover Teasers，如图7.21 所示。

Photoshop 将Cover Teasers 的部分（而非全部）属性应用于该段落，因为在你应用该样式时，已经有一些其作用的样式覆盖。

图7.21

2. .单击段落样式面板底部的"清除覆盖"按钮。
3. 选择What's Hot 下面一行文本，再在段落样式面板中选择Teaser subheads，然后单击"清除覆盖"按钮。
4. 对What's Not 和Coming this year 重复第1 ～ 3 步。

接下来对部分文字进行修改。

5. 选择Coming this year 及其后面的所有文字，再在字符面板中将文本颜色改为黑色。
6. 最后，单击"提交所有当前编辑"按钮让修改生效，结果如图7.22 所示。

图7.22

Photoshop中的OpenType

OpenType是Adobe和Microsoft联合开发的一种跨平台字体文件格式，这种格式使得可将同一种字体用于Mac OS和Windows计算机，这样在不同平台之间传输文件时，无需替换字体或重排文本。Photoshop CS4支持OpenType，后者支持各种扩展字符集和版面设计功能，如传统的PostScript和TrueType字体不支持的花饰字和自由连字。这反过来提供了更丰富的语言支持和高级文字控制。下面是一些有关OpenType的要点。

OpenType菜单：字符面板菜单中有一个OpenType子菜单，其中显示了对当前OpenType字体来说可用的所有特性，这包括连字、替代和分数字。呈灰色显示的特性对当前字体而言不可用；选中的特性被应用于当前字体。

自由连字：要将自由连字用于两个OpenType字符，如Bickham Script Standard字体的"th"，可在图像窗口中选中它们，然后从字符面板菜单中选择"OpenType">"自由连字"。

花饰字：添加花饰字或替代字符的方法相同，选中字母（如 Bickham Script 字体的大写字母T），然后选择"OpenType">"花饰字"，将常规大写字母T改成极其华丽的花饰字T。

创建真正的分数：像通常那样输入分数，如1/2，然后选中这些字符，再从字符面板菜单中选择"OpenType">"分数字"，Photoshop将把它变成真正的分数。

提示：使用Adobe Illustrator 中的字形面板可预览OpenType 选项：在Photoshop 中复制文本并将其粘贴到一个Illustrator 文档中。然后选择"窗口">"文字">"字形"，以打开字形面板。选中要修改的文字，然后在字形面板中从"显示"下拉列表中选择"当前所选字体的替代字"。双击一种字形将其应用于所选文字，然后复制文字并将其粘贴到Photoshop 文件中。

7.6.5 添加直排文字

该杂志封面的文字处理工作就要完成了，余下的唯一任务是在右上角添加卷号，你将使用直排文字工具添加。

1. 选择菜单"选择">"取消选择图层"，再选择隐藏在横排文字工具后面的直排文字工具。
2. 按住Shift 键并从封面右上角的字母L 附近开始拖曳，然后松开Shift 键并拖曳出一个垂直的矩形框。

开始拖曳前按住Shift 键可确保你创建新文本框， 而不是选择标题。

3. 输入VOL 9。
4. 通过拖曳鼠标或三击选中这些字母，然后在字符面板中做如下设置（如图7.23 所示）。

图7.23

? 选择一种衬线字体，如Myriad Pro。
? 将字体样式设置为Condensed。
? 字体大小为15 点。
? 字符间距为150。
? 颜色为黑色。

5. 单击选项栏中的"提交所有当前编辑"按钮。直排文本将出现在一个名为VOL 9 的图层中。如果必要，使用移动工具（ ）将其拖曳到右边。

接下来需要做一些清理工作。

6. 通过单击选择注释，然后单击鼠标右键（Windows）或按住Control 键并单击（Mac OS），再从上下文菜单中选择"删除注释"将注释删除， 如图7.24 所示。单击按钮"是"确认要删除注释。

7. 隐藏参考线：选择抓手工具，并按Ctrl + ;（Windows）或Command + ；快捷键（Mac OS）隐藏参考线。然后，缩小视图以方便查看作品。最终图像如图7.25 所示。

图7.25

8. 选择"文件">"存储"保存所做的工作。

祝贺你！你在这个杂志封面上添加了所需的文字并设置了样式。杂志封面制作好了，下面将其拼合，为印刷做好准备。

9. 选择菜单"文件">"存储为"，并将文件重命名为07Working_ flattened。如果出现"Photoshop 格式选项"对话框，单击"确定"按钮。

通过保留包含图层的版本，以后可回过头来对07Working.psd 做进一步编辑。

10. 选择"图层">"拼合图像"。
11. 选择"文件">"存储"，然后关闭图像窗口。

本文由人民邮电出版社独家授权发布，谢绝转载。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量69万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：