Photoshop教程:設(shè)計(jì)有創(chuàng)意的多媒體網(wǎng)站布局

作者:譯者：NAACALZ　  出處:網(wǎng)站

第一印象很重要！令人驚嘆的具有視覺吸引力的作品是每個(gè)設(shè)計(jì)者為之追求的。今天，我們將演示如何在Photoshop中使用照片，畫筆。紋理和3D物體來 設(shè)計(jì)一個(gè)有創(chuàng)意的多媒體網(wǎng)站布局。讓我們開始吧！

教程細(xì)節(jié)
方案： Adobe Photoshop, Illustrator CS3+
難度：中級(jí)
預(yù)計(jì)完成時(shí)間：2小時(shí)以上

在本教程中我們將使用到下面的資源：
Classical camera
Director’s chair
TV camera
Laptop
Microphone
Hotair baloon 1
Hotair baloon 2
Small Tree
Cityscape Brushes by Terf
Clouds brushes by JavierZhx
Abstract glow brushes by Ro-stock
Rust Textures by Princess of Shadows
Armored Metal Textures by Wen Jr
Render Pack Textures 1 by Angelus Hellion
Render Pack Textures 2 by Xcellcior

步驟1
在Photoshop中創(chuàng)建一個(gè)960 px * 620 px的畫布。這個(gè)尺寸適用于大部分的網(wǎng)站屏幕。

按CMD + R來添加標(biāo)尺，畫出一些指導(dǎo)線，標(biāo)明主要內(nèi)容區(qū)域的界限。 這將益于定位你的設(shè)計(jì)。

步驟2
現(xiàn)在主要區(qū)域被適當(dāng)?shù)南薅ǎ屛覀冋{(diào)整畫布為1224 px * 620 px（圖像>畫布大小）創(chuàng)建一個(gè)更大的背景。這個(gè)溢出的區(qū)域?qū)⒂幸嬗诖笃聊唬瑒?chuàng)建一個(gè)’無邊界’的視覺效果。

步驟3
編寫文檔的最后一步是在中心添加指導(dǎo)線。指導(dǎo)線將方便你定位中間的設(shè)計(jì)元素。一個(gè)快速找到該中心的方法是創(chuàng)建一個(gè)新層，然后按快捷鍵CMD + T激活“自由變換”。

步驟4
讓我們?cè)谠撇时尘捌脚_(tái)上放置主要元素吧。先制作一個(gè)灰色的漸變背景。去圖層>圖層樣式>漸變疊加。漸變顏色為#434344到#EAECEC。其他設(shè)置為默認(rèn)。

步驟5
創(chuàng)建一個(gè)新層“云”。載入云彩筆刷Clouds brushes，用白色涂抹出一些形狀，大小和透明度各不相同的云，直到你得到類似下圖的效果：

步驟6
創(chuàng)建第二個(gè)圖層“云2”，在中心添加一些云。

步驟7
創(chuàng)建第三個(gè)圖層“云3”。這一次使用抽象光暈筆刷Abstract glow brushes，使用第二個(gè)筆刷，大小為420px。翻轉(zhuǎn)它，按CMD + T>水平翻轉(zhuǎn)。這使云彩看起來更加虛無縹緲。

步驟8
現(xiàn)在，我們將創(chuàng)建一個(gè)大的“M”。你也可以把你公司(或者你喜歡的)的首字母放在這里。

打開Illustrator，創(chuàng)建一個(gè)新層粘貼云作為背景。用它作為指導(dǎo)來設(shè)計(jì)3D的“M”。輸入英文字母“M”：字體為Handel Gothic Ex,，大小181pt，白色，你可以使用其他厚寬的字體代替。為了讓文本體現(xiàn)出三維效果，去效果>三維>拉伸與斜角。參考下圖的設(shè)置。

步驟9
復(fù)制3D的“M”，返回到Photoshop把它粘貼在你的文檔里。重命名圖層為“M”�，F(xiàn)在我們將應(yīng)用一些效果和紋理使之更加切合實(shí)際更有趣。首先對(duì)圖層“M”應(yīng)用下面的圖層樣式。

步驟10
創(chuàng)建一個(gè)新文件夾為“m 紋理”。使用魔術(shù)棒工具選擇字母“M”創(chuàng)建選區(qū)，并給文件夾添加一個(gè)圖層蒙版。在這個(gè)文件夾里我們將放入所有的3D“M”的紋理。

從Rust Textures包里使用“紋理4.jpg”。復(fù)制，粘貼，并重命名圖層為“紋理”。復(fù)制它，縮小副本圖層“紋理2”到12.5%。

步驟11
調(diào)整圖層的不透明度為40%，并改變這兩個(gè)紋理圖層的混合模式為顏色加深。

步驟12
使用Armored Metal Textures里的“metal_plaque_bump_seam.jpg”添加另一個(gè)紋理層“紋理3”。調(diào)整圖層的不透明度為26%，改變其混合模式為強(qiáng)光。調(diào)整圖層直到你得到滿意的紋理。

第二部份.