【譯者的話】 如何既保持網(wǎng)頁(yè)整齊又能提供盡可能多的產(chǎn)品信息？為什么很多文字我們?cè)O(shè)定為對(duì)齊時(shí)，但眼睛卻還是感覺(jué)不整齊？如何利用空白的區(qū)域來(lái)產(chǎn)生具沖擊力的作品？如何制作一張充滿個(gè)性的卡片？利用簡(jiǎn)單的幾個(gè)步驟，我們可以制作出充滿現(xiàn)代質(zhì)感的價(jià)格牌設(shè)計(jì)。五個(gè)小技巧，與大家分享。

原文出處：www.bamagazine.com

網(wǎng)頁(yè)：圖片自動(dòng)翻頁(yè)的設(shè)計(jì)傳達(dá)更多的信息

Alien Skin 軟件的網(wǎng)頁(yè)在展示眾多的產(chǎn)品時(shí)仍能保持版面整潔干凈。他們使用了圖片自動(dòng)翻頁(yè)的技巧來(lái)實(shí)現(xiàn)這一目的――當(dāng)鼠標(biāo)指針移到圖片上時(shí)，圖片便轉(zhuǎn)換成產(chǎn)品說(shuō)明。

不需要點(diǎn)擊圖片，便會(huì)自動(dòng)出現(xiàn)產(chǎn)品說(shuō)明。 Alienskin.com 的介紹產(chǎn)品的網(wǎng)頁(yè)通過(guò)整齊的網(wǎng)格來(lái)安排版面。每一個(gè)產(chǎn)品都有另一張文字說(shuō)明圖片，讓觀眾能夠更深入了解。只需要將鼠標(biāo)放在圖片上，不需點(diǎn)擊，便會(huì)出現(xiàn)產(chǎn)品的簡(jiǎn)要說(shuō)明。

利用 Adobe Golive 創(chuàng)建自動(dòng)翻頁(yè)效果

這種特效需要對(duì)每一種狀態(tài)都建立一張單獨(dú)的圖片：正常狀態(tài)，鼠標(biāo)滑過(guò)時(shí)狀態(tài)，點(diǎn)擊狀態(tài)及鼠標(biāo)移開(kāi)后的狀態(tài)等。每一張圖片都必須是相同的尺寸。首先對(duì)一張正常狀態(tài)時(shí)用的圖片起一個(gè)名，比如 product1.gif ，然后在其它狀態(tài)下根據(jù)這個(gè)名稱安排其它文件（如， product1_over.gif, product1_down.gif 等）。將它們都放在同一個(gè)文件夾中。將正常狀態(tài)時(shí)顯示的圖片拖到 Golive 頁(yè)面上， Golive 軟件會(huì)自動(dòng)按你起的名稱安排好不同狀態(tài)下顯示的圖片（見(jiàn)上圖）。

字體：如何“真正”對(duì)齊文字

你是否有注意到，當(dāng)你在電腦排版中，將文字對(duì)齊后，但卻感覺(jué)有點(diǎn)不對(duì)勁？這是因?yàn)?，你?duì)齊的是邊緣，字母并沒(méi)有完全對(duì)齊，因?yàn)椴煌淖帜附Y(jié)構(gòu)不一樣，有的是弧線邊緣，有些又有一些小橫桿突出來(lái)（如 t ），有時(shí)還有一些引號(hào)，這些都導(dǎo)致設(shè)定為對(duì)齊時(shí)仍然感覺(jué)不自然。在 Indesgin 軟件中的“ Optical Margin Alignment ”功能可以彌補(bǔ)這一不足。

在使用“ Optical Margin Alignment ”功能前的效果。你的電腦認(rèn)為它們上述已經(jīng)是對(duì)齊的，但你的眼睛告訴你說(shuō)，好象還不齊啊。字母及引號(hào)使到邊緣產(chǎn)生起伏不平的感覺(jué)。

使用“ Optical Margin Alignment ”功能后的效果。我們?cè)?Indesign 軟件中，選擇 Type>story> Optical Margin Alignment ，然后看一下有什么變化――你會(huì)看到有些字母中會(huì)超出對(duì)齊線一些。有趣的是，這個(gè)時(shí)候，你看起來(lái)倒是真正對(duì)齊的樣子。在該功能的對(duì)話框中設(shè)置的參數(shù) , 一般來(lái)說(shuō)，應(yīng)該與字體的大小一樣。

圖片剪切：大小及位置決定一切

圖片以不同的大小及不同的擺放位置來(lái)排版的話，可以產(chǎn)生不同的沖擊力。在下圖中，我們將一張尺寸較小的肖像圖片放置在一個(gè)空白區(qū)域的下方，完美地與標(biāo)題文字的意思搭配。

空白區(qū)域的力量：這種排版方式使版面中的各個(gè)元素一目了然。雖然空白的區(qū)域占了大部分，但給你的感覺(jué)卻一點(diǎn)也不單薄，相反，充滿了力量感。這位不幸的 CEO 肖像背后是一塊厚重的黑色區(qū)域，使該人物給觀眾形成一種分離感及距離感。之所以能夠產(chǎn)生這樣的視覺(jué)效果，關(guān)鍵是人物圖片的尺寸很小，而且放得很低。她深色的外套在這個(gè)設(shè)計(jì)中可以說(shuō)是一個(gè)有利因素，使到給人的感覺(jué)是她的身體與黑色的背景混為一體，使其與她那憂郁的面部表情形成強(qiáng)烈的對(duì)比。標(biāo)題設(shè)計(jì)不能設(shè)計(jì)得過(guò)于夸張顯眼，應(yīng)該平實(shí)一些，標(biāo)題的位置同樣應(yīng)該以平實(shí)為主（否則標(biāo)題會(huì)使整個(gè)版面顯得過(guò)于緊張，從而削弱了下方肖像所傳達(dá)的力量）。

碎紙片組成的卡片設(shè)計(jì)

為了向親朋好友宣布他們的兒子 Drew 終于來(lái)到這個(gè)世界上，我們的朋友阿丹與米高這對(duì)夫婦希望以個(gè)人卡片的形式來(lái)傳達(dá)這個(gè)喜訊――還有什么東西比你自己書寫的文字顯得更個(gè)性化？看一下我們?yōu)樗麄兯龅脑O(shè)計(jì)：

不需要剪刀哦。雖然碎紙片看起來(lái)象是貼上去了，但這只是在電腦中的效果。這個(gè)卡片剛好可以用您的那臺(tái)桌面打印機(jī)打印。首先寫上一些活潑有趣的詞語(yǔ)，然后將這些詞語(yǔ)掃描進(jìn)電腦中。然后用 Photoshop 軟件剪切成一片片，再應(yīng)用一些陰影效果，再將這些碎片置入你的版面中，排好它們，就可以打印出來(lái)了。這種設(shè)計(jì)沒(méi)有復(fù)雜的技巧，但絕對(duì)充滿個(gè)性化，值得一試 !

Adobe Illustrator ：煥然一新的價(jià)格牌

寶馬汽車（ BMW ）的網(wǎng)頁(yè)橫幅中，清晰及有趣的價(jià)格牌模仿收銀機(jī)的價(jià)格顯示吸引著觀眾的眼睛。這個(gè)設(shè)計(jì)很有趣――舊式的價(jià)格顯示設(shè)備，古典的字體，陳舊的顏色，但明暗的處理卻賦予它現(xiàn)代的質(zhì)感。

BMW 網(wǎng)頁(yè)廣告橫幅

第一步：畫三個(gè)圓角矩形。在圖片面板中，雙擊圖層 1 ，將其命名為“ Tabs ”。然后復(fù)制這三個(gè)矩形。接著，應(yīng)用陰影效果： Effect>Stylize>Drop shaodw ，打開(kāi)預(yù)覽，輸入的數(shù)值如下：模式： Multiply ，不透明度： 50% ； X 偏移： 0 ； Y 偏移 Op2 ；模糊： Op2 ，顏色為黑色。然后按 OK ，應(yīng)用陰影特效。在圖層面版上將該圖層鎖上。然后，再創(chuàng)建一個(gè)新圖層，命名為“ Highlight ”，將剛才復(fù)制的三個(gè)矩形粘貼到該圖層上。最后，再創(chuàng)建一個(gè)文字圖層，輸入價(jià)格牌上的文字。將這個(gè)文字圖層拖到“ Highlight ”圖層的下方。

第二步：在 Highlight 圖層中，我們用鋼筆工具畫一條平滑的曲線橫跨三個(gè)矩形。然后在 Pathfinder 面板中，點(diǎn)擊 Pide 圖標(biāo)（上圖黃色處）。這樣我們就將這三個(gè)矩形分成六個(gè)區(qū)域。

第三步：在選擇這六個(gè)區(qū)域時(shí)，將它們填充為白色。用直接選擇工具（空白箭頭）選擇下面的三個(gè)區(qū)域選擇，然后刪除。再選擇上方的三個(gè)區(qū)域，除低其不透明度，我們?cè)O(shè)置的數(shù)值為 60% 。

一個(gè)耀眼的價(jià)格牌就做好了。

本文所用顏色數(shù)值如下：