當前位置:首頁>ps實例教程>ps網頁設計>網頁模板>教程內容

Photoshop教程:設計有創(chuàng)意的多媒體網站布局(2)

來源:未知 作者:bbs.16xx8.com 學習:1932人次

步驟13
使用不透明度約30%的柔軟的圓形畫筆在“M”的下方描繪陰影。使用涂抹工具調整,創(chuàng)建如下所示傾斜的影子。

步驟14
添加你的公司名稱,這里是“Multimedia”。使用Heritage Extra字體,大小32px,黑色。下一步將在它下方添加一個微弱的陰影。

復制圖層,重新命名為“Multimedia的陰影”。按Cmd+ T使用變換工具,右擊并選擇垂直翻轉。添加動感模糊。更改圖層的不透明度為50%。添加一個圖層蒙版,最后應用一個漸變來淡出底部。

步驟15
現(xiàn)在將為我們的多媒體世界創(chuàng)建城市面貌。你可以使用Cityscape Brushes建立建筑物。下載幾個抽象紋理包:Render Pack Textures 1 和Render Pack Textures 2。首先使用筆刷畫一些建筑物。在每個獨立的圖層上畫每個建筑,放在圖層“云”和“云2”之間。

步驟16
調整大小和位置。剪切出建筑物中你不需要的部分。


步驟17
對于每個建筑物,創(chuàng)建一個包含各自紋理的新文件夾。用添加“M”紋理的同樣的方法應用紋理,選擇每個建筑物,使用魔術棒工具,在文件夾里對選區(qū)添加一個圖層蒙版,設置文件夾圖層的混合模式為變亮。

步驟18
現(xiàn)在應用下圖的抽象紋理。移動,旋轉,調整紋理的大小,直到你獲得滿意的效果。

步驟19
這是一個很好的方法來清理和整理圖層。雖然起初有點繁瑣,但這種做法實際上會為你節(jié)省搜索文件時所用的時間。把所有的建筑物圖層放置在一個新文件夾“建筑物”里。把這個文件夾放在“云”和“云2”之間。

步驟20
使用云筆刷在“云2”上畫一些小的云彩來掩蓋建筑物的根基。


步驟21
讓我們添加一些道具:Classical camera, Director’s chair, TV camera, Laptop, Microphone, Hotair baloon 1, Hotair baloon 2, Small Tree。對于每個對象使用魔術棒工具(W)從背景中提取,然后點擊Refine Edge按鈕來調整邊緣。若要刪除剩余粗糙的邊緣,那就使用橡皮擦工具(E)中一個小的圓形筆刷來擦除。

步驟22
調整大小,然后對每個對象應用濾鏡>智能銳化(Cmd + F)。它們的位置如下。

步驟23
添加椅子,電視機,筆記本電腦,麥克風,攝像頭和車的陰影,使用添加字母“M”陰影時相同的技術。對于樹,要使用筆刷,使用涂抹工具調整形狀。

步驟24
大掃除時間到了!把每一個對象層和陰影圖層聯(lián)系起來,使每個對象易于按需要打開和關閉。要做到這一點,按Shift +單擊這兩個圖層。右鍵單擊并選擇鏈接圖層。然后把這些道具圖層放在一個新的文件夾“道具”中。


步驟25
想要設計一個網頁,互動元素對該網站的成功發(fā)揮著重要的作用。因此,我們應該要使我們的主要按鈕具有吸引力和突出,使用戶想要單擊它們。 我們將創(chuàng)建3D盒子,使用彩色的電線把它與城市景觀連接在一起。它們將代表我們不同的網頁板塊。你可以先預覽一下:


步驟26
回到Illustrator來繪制3D盒子和彩色的電線。使用矩形工具(M)畫6個不同寬度的文本框,它的寬度取決于里面所輸入文本的長度。例如“Web”用一個小框,“Contact”的框要更寬些。

步驟27
對每個方塊應用效果>3D>拉伸與斜角。從左到右對每個方塊使用下圖所示的設置。

步驟28
復制所有創(chuàng)建的藝術品到Photoshop中,并將其粘貼在“背景”圖層上。 使用鋼筆工具(P)或鉛筆工具(T)畫一些線條。


步驟29
現(xiàn)在我們將制作一些彩虹畫筆。使用矩形工具(M)繪制一個矩形。然后垂直復制并粘貼4至5個矩形。改變他們的顏色。選擇所有的矩形,使用左對齊對齊它們。

步驟30
制作一些不同顏色的彩虹。以下是一些樣品。


步驟31
為了制作畫筆,選擇一個彩虹矩形群,拖動它們并把它們放到你的筆刷面板里,選擇新建藝術畫筆。命名你的藝術筆刷為“彩虹1”,保持默認水平方向的設置。

步驟32
現(xiàn)在在不同的線條上應用你的彩虹筆刷。

步驟33
在Photoshop中獨立復制并粘貼每個彩虹線。要粘貼到建筑物圖層的前面,但在道具層和英文字母“M”圖層的后面。在線圖層上應用圖層蒙版,并使用云筆刷,使電線的一些部分透明。

步驟34
為了給線條3D外觀效果,使其更具光澤,按下圖所示應用一個斜面與浮雕的圖層樣式。每條線需要一些輕微的調整以達到預期的效果。

步驟35
從Illustrator里復制并粘貼3D盒子到獨立的圖層上。


步驟36
從 Armored Metal Textures應用紋理“metal_plaque_bump_seam.jpg” ,使用步驟10和步驟17相同的技術。設置紋理層的混合模式為強光,不透明度為26%。

步驟37
添加文本框。使用Heritage Extra Bold字體,大小14px,黑色。按盒子的角度旋轉文本。

步驟38
清理你的圖層,把這些盒子按鈕放到一個文件夾中。


步驟39
最后一步!添加頁腳,你就大功告成了!使用Verdana字體,大小10px,第一行的顏色為#cccccc,下方一行的顏色為#999999。這些都是網站經常使用的顏色。


結論
我希望本教程對大家有所幫助。請分享你的意見,想法,如果你有問題我會很樂意幫助你。勇于創(chuàng)新,探索你在這里學到的技術,我迫不及待的想看到你們的進步~



學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!