柠檬铺

编译

在本文中，我们将介绍如何设计出一张充满东方气息的菜单，以使它更好地传达出那些美味的中国菜。

中国菜让人一看就想流口水——所以“东方风味“（ A Taste of the Orient ）餐厅总是坐满了中午来吃饭的上班一族。这是一家规模不大的家庭作坊式餐厅，座落在购物广场的旁边。但你如果只是看一眼他们这张普遍的粉红色折页菜单，却让人感到毫无特色！“东方风味”需要让它的菜单与它的菜肴一样吸引人，能够传达出有着鲜明特色的中国文化气息，而且能够让那些写字楼里的白领将这张菜单贴在公司的告示板上，而不是将它塞进抽屉里。让我们开始改造。

上图为原来的菜单设计。实事求是地讲，一张菜单所需要的信息它全都有了。但如果我们将那个碗状的标志去掉，那整张菜单就没有一个元素是能够与中国菜联系起来的。而且这张菜单是要向那些上班的人派发的，我们需要让上班的人一看到这张菜单时就能感受到中国菜的美味——从而吸引他来这家餐厅。所以我们需要设计得漂亮一些。

首先让我们来分析一下原来的设计存在什么问题。

刚才说了，菜单上的文字信息并没有什么问题，但整个版面并没有设计，只是将版面填满而已。原来的设计师并没有在设计中表达出吸引人的视觉元素、对比及层次感。

上图的菜单外页中，有一个视觉焦点（那个碗），所放的位置很正确（在中间），但它显得太普通，与其它菜单没有什么两样，缺乏吸引力。餐厅的名字在版面中所处的位置也很正确，周围的空间比较开阔，所以一眼望去很容易就注意到。但却传达不出特有的气息。其中的菜名、地址、电话号码及营业时间对于餐厅来说都是很重要的一些信息，都缺乏精心的设计。

整张菜单充斥着太多的框框。所有的菜名都是放在线框里。这样处理虽然显得整整齐齐，但这些线条在里面本来看起来就很细，既不漂亮，其实也没必要。因为菜单上已经有足够的空间让各种文字信息分开而不会引起混乱。而且各个线框的尺寸长短不一，破坏了整个版面的协调。

一个好的设计必须是精心组织的。例如在上图中，三个圆形及三个长方形的元素构成了两个三角形，而且这两个三角形都围绕着一个视觉焦点（盘子中间的花饰），而大的圆圈（盘子）将所有元素都围绕起来。这就是设计！而且也非常吸引人。而在原来的菜单外页中，中间部分的线框里的字体与左右两边的字体不一样——当然，这样也是一种吸引人的办法，但问题是，这样处理并没有什么特定的理由。其实只能算是一种随意性的设计，并没有我们所说的精心组织。

在重新设计前，我们先要了解一下有关中国的一些东西。你必须真的进行一番认真的搜索，不要只凭你的记忆去想象，不然你就以为中国只有筷子及幸运甜饼（ fortune cookie ，该饼是由广东的一种小食演变而成，在美国当地深受欢迎，而包着甜饼的纸条上写着一些有关吉利与否的文字，类似于一种“抽签占卜”，所以亦称“签饼”——译注）。

中国到底有什么特色？

不要去想象，如果你在书本、网站及图片库里仔细寻找一些有关中国的东西，甚至去中餐厅里看一下，那你设计出来的效果就会好很多（也更容易）。我们要看什么？要特别注意观察各种有关中国的东西，包括它们的形状、颜色、图案及观察中国菜的色香味，还要留意隐藏在这些东西后面的有关中国历史、文化及传统这些看不见的元素。

脸谱：具有悠久的历史，有宗教气息，表演时用，颜色五彩缤纷，由多种图案构成；

中餐厅：以中性颜色为主，有图案复杂的木雕制品装饰；

幸运饼：从明朝留传下来的一种“月饼”，代表欢乐，圆形，金黄色；

竹子：充满自然气息，体态优雅，错落有致；

炒锅：热气腾腾，圆形，菜肴五颜六色，香味扑鼻；

文字：古老，毛笔书写，书法感，流动感，有着鲜明的东方特色；

颜色：红色，金色；

屏风：精致，上面镶有历史人物故事，在中餐厅里经常可以见到。

从版式与背景开始：

我们只需利用上面两张图片就可以确定设计风格。一张是屏风，因为屏风就象一张折页，而竹子作为版面的背景，显得优雅宁静。

屏风上绘有风景、植物及人物，而且一般由三个或四个折面组成，使用起来非常方便，而我们本次设计的菜单则有三个折面。

剪切图片：为了使我们的设计就象屏风一样开阔，我们要将所用到的图片的比例定好。注意上面左图中的构图平衡——我们所取的图片的面积占原图片的二分之一左右。定好图片的比例后，我们就可以将这张图片变成一张漂亮的背景图。

创建投影图：

我们需要将图片转为一张投影图，给人一种是竹子投在屏风上的阴影的感觉，首先要将图片中的竹子与背景分离。

将原来的彩色照片转为纯粹由黑白两种实色组成（不含灰色）。在这张竹子图片中，竹子的形态非常具有特色，所以我们并不需要在意竹子具体的细节。在 Photoshop 软件中，首先我们将这张图片变为灰度图片（上图右）。

PS 里，我们利用 阈值 工具（图象 > 调整 > 阈值 ）。打开预览模式，然后移动其滑杆，使到竹子是白色，而其余区域为黑色。当调整到最理想的效果时，按 OK 应用（上图左）。

接下来，我们利用反相工具（图象 > 调整 > 反相）将黑与白反转，用橡皮工具将竹子以外的一些黑色杂点清理干净。如果有需要的话，可以用画笔工具对其中的细节进行修饰(上图右）。然后将它保存为副件（或图层），等一下我们还用得着。

创建自然光线效果：我们将这张黑白照片进行模糊及加亮操作将其变淡，然后在整个版面上描绘一些浅颜色。

我们将上图的黑白图片转为 CMYK 模式，然后将颜色变淡。可以选择模糊工具（滤镜 > 模糊 > 高斯模糊）。我们所需要的效果是把竹子的色调变淡，但仍然可以使人感觉到竹子的形态。如在模糊操作中，我们输入的数值是 10 。然后我们将不透明度调到 10%（上图左） 。

下一步，我们要添加一些自然的光线效果。我们可以从上述的中餐厅图片取一种浅色及较深的色（见上图 1 处）。然后我们建立一个新图层，用浅色填充（上图 2 ）。

接着我们用一只柔软的画笔将较深的颜色以孤线的路径在接近页面下方的区域中描绘（上图 3 ）。然后我们将这个图层的混合模式选择为正片叠底（ Multiply ），这样下方的竹子图层就可以显露出来。出来的效果让人感觉到那些竹子好象是从纸的后面被灯光投影上来似的。

当我们完成上面的效果后，我们还要通过添加一些黑色的竹子使整个页面形成层次感。这样在版面中，前景与背景之间就形成了良好的对比。

首先我们将刚才的那张黑白竹子的图层复制，将复制的图层移到最上面一层。然后将它的图层混合模式也设为正片叠底，并利用橡皮工具，将大部分竹子擦掉，只留一部分，我们要将这部分竹子单独分离出来。

要注意这些深色的竹子的大小要与背景中的竹子尺寸的一样大，使到整个页面上深浅不一的竹子象是因为后面的竹子由于距离及光线所造成的若显若暗的效果。我们在三个折页中间都要放置这些深色的竹子。这种处理手法使到整个页面充满层次的变化。

我们现在要进行绘画！利用画笔工具，我们自己画上一些竹子，使其两部分叶子联接起来（上图 1 ）。并加上竹杆（上图 2 ）。我们在上图 3 的地方再添加多一两片竹叶，使其有下垂的感觉。等一下我们要在它下面放上文字。

创建一个焦点标志：

原来那个碗状的标志对于一家餐厅来说其实挺不错的，因为它显得简单，很清晰地表达出餐厅的主要特征，碗上的那双筷子与中国菜联系了起来。而那些热气则代表着食物的新鲜。而一个印章式的标志可以加强这些元素，而且显得更有中国味。

在中国的绘画中，签名时经常会用上印章（通常是红色）。如果我们将刚才那个碗状的标志变为一个印章的效果，就更能传达出中国的韵味。

创建印章标志：由于原来的标志其实设计得不错，所以我们将其全部利用。我们这里是利用扫描仪将原来的黑色碗状标志扫描进 Photoshop ，像素为 300ppi ，颜色模式为 RGB ，背景为透明，填充红色（上图左）。

接着，我们要将边缘变得粗糙一些。首先前景和背景色分别设为红色及白色，然后应用撕边滤镜（滤镜 > 素描 > 撕边），在这个设计中，我们将图像平衡设为 25 ，平滑度设为 1 ，对比度为 15 ，然后按 OK 。

最后一步我们要锐化这个印章。我们应用 USM 锐化滤镜（ unsharp mask ，滤镜 > 锐化 >USM 锐化），各数值设置如下：数值 100 ，半径 25 ，阈值 0 ，按 OK 应用。下一步，将前景色设为白色，我们选用喷枪画笔（ spatter brush ，在这里我们选择第 39 号的画笔），将画笔调成不同的尺寸及改变不透明度，在印章上轻轻涂抹，我们要故意让边缘变得有点参差不齐。

现在们要选择字体了。

没有什么东西比得上那些独特的汉字更能代表中国文化。但我们菜单中的字体是要用西方字体，所以我们要寻找一种能够传达出中国字体特色的西方字体。通常来说，那些湿画笔字体、干画笔字体及艺术性字体都值得尝试。我们最终选择干画笔的 Ruach 字体作为本设计的文字字体。

我们首先观察一下中国汉字的特点。一旦你选择了一种你喜欢的字体后，你要注意这种字体的笔画。特别要注意它的边缘、线条收尾的地方及线条粗细之间的变化，而且这些线条一般都是呈某个角度的。那就让我们来看一下在西方字体中有哪些字体是与它相似的。

上图第一种湿画笔效果是 Visigoth Regular 字体。它的特点是：肥大，字母笔直，有渗透的感觉。

第二种是干画笔效果 Ruach Plain 字体。它的特点是：给人快速书写的效果，线条较细。边缘没有太多的变化，而转角位则显得粗糙，与手写字体非常接近（我们认为这种字体是最合适的）。

第三种艺术化画笔效果是 Choc ICG Regular 字体。它的特点是没有毛笔的那种粗糙感，而象油性笔写出来的，字体比较收缩。边缘及转角位都较干净。

选择小字体：

对于菜单中那些菜名的小字体，我们必须要选择那些容易辨认的字体，而通常来说，那些容易辨认的字体一般是那种“字体笔画开放”的字体，而且结构简单。我们用三种字体来作个比较。

虽然 Helvetica 字体很受欢迎，但作为字体较小时使用，却难以给人一种清晰的感觉。因为它的这些字体的收口处显得特别狭窄，而它的笔画也太过笔直，显得有点死板，与我们在上面所选择的 Ruach 大字体并不搭配。

Roman 字体中那些衬线的笔画使其很容易让人辨认，因为这些衬线笔画使阅读的人的目光能够轻易地从一个字母引导到另一个字母上，但它的弊端是细节太多，与 Ruach 字体差异太大。

Sanvito 字体笔画简洁，孤线很大，线条有一种摇摆的感觉，既容易辨认，又有书法的特点。因此我们选择这种字体作为菜单中小文字的字体。

好了，现在让我们开始处理版面吧。

如果你仔细观察竹子的形态，你会发觉竹子的叶子及竹杆都充满角度的，每片叶子的方向都是不同，有水平，有倾斜，有竖直，这使到竹子图案传达出一种运动及不安定的感觉。我们可以参照这个特点来处理我们的版面。

那个红色的印章标志放在哪里才合适？一般来说，标志一般是要放在让你最容易看到的地方。在上图中，黑色竹子的构图是这个版面最重要的视觉元素，所以我们放这个标志的地方也要配合竹子的图案，我们直接将它放在竹子叶的下方，刚好是竹叶伸出来的地方，这些竹叶构成了一个“伞形”区域（上图左虚线处）。

接着放置名字。我们可以看到，每片竹子叶的大小都不一样，方向也不一样。我们模仿这种特点，将餐厅名字分成两种不同的尺寸，错开排列，使其方向感向两边伸展（上图右）。

现在我们要放置联系信息等文字。由于这张菜单是要向人派发的，所以我们的电话号码必须要醒目。这一行电话号码我们故意让它伸出右边，使其更加容易吸引人。而下面的文字则要与印章右对齐。这样既可协调整个版面，也保留了动感的特点。

组织菜单的各种信息：

在原菜单设计中所用到的那些线框其实没有什么用，因为各部分的周围都有足够的空间。我们同样可以模仿竹子的特点，使里面的文字有些突出来，给人一种“错落有致”的感觉。

我们可以看出，每一个小标题都是向左突出一点的，而里面文字的尺寸及每部分文字之间的文字距离都与大标题字母的 X 高度一样的。

从上图可以看出，我们采用了小标题突出的排版而不是全部左对齐区分每部分文字，这可以与竹子及我们刚才最右边的首页版式相响应。

整个外页我们设计完了，现在轮到内页。其实我们可以将外页的设计风格在内页里重复。一个外页设计如果效果不错的话，那用到内页上同样有良好的效果，也可以使整张菜单的版式更统一协调。

我们将外页的整个背景同样应用在内页上，但为了留有足够的空间给那些菜名，所以我们将那些深色的竹子去掉，而其中的文字版式必须与外页一样，包括同样的文字页边距。

最后，需要用到颜色来使整个版面更精美。我们在看一样东西时总是首先看到那些相似的元素。我们将其中的那些标题加上颜色，使其与印章标志更统一（颜色取自印章上的红色）。另外我们采用金黄色以加强版面的层次感，也更符合中国菜那种热气腾腾的感觉。

 

我们将电话号码变成金黄色，使其与另外那些菜名等信息分开，同时也可以增加版面的层次。这种金黄色是来自我们开始时所搜索到的图片，要记住图片搜索是很重要的，如果你不进行这项工作，或者只是想当然地利用其它的图片来取色，那就完全失去颜色与信息之间的联系了。

至此，这张中餐厅的菜单终于设计完成了。其实，到了这一步，我们还可以有另外的一种选择：

我们对各个折叶加上一个粗黑框，以使它更有屏风的感觉（灵感同样来自我们上述那张屏风的照片）。

象上图中，如果我们对每个折页加上一个粗黑框，那就使每一个折页都变成一个独立的空间，这个设计粗看起来好象与最原来的设计有点相似，但却比原来的设计更有吸引力，因为图案的竹子很自然地将每个折页在视觉上联系在一起。这个设计有以下特点：

1 、黑色的那根竹子图案占据了两个折页；

2 、背景的浅色竹子占据了三个折页；

3 、重复应用的红色元素贯穿整个设计。

折叠的设计给人一种屏风的感觉，而那些美味的中国菜却吸引你将它展开。

原文出处：www.bamagazine.com