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

原文出處：www.bamagazine.com

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

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

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

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

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

字體：如何“真正”對齊文字

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

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

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

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

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

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

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

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

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

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

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

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

第一步：畫三個(gè)圓角矩形。在圖片面板中，雙擊圖層 1 ，將其命名為“ Tabs ”。然后復(fù)制這三個(gè)矩形。接著，應(yīng)用陰影效果： Effect>Stylize>Drop shaodw ，打開預(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ū)域，除低其不透明度，我們設(shè)置的數(shù)值為 60% 。

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

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