ps設(shè)計電影網(wǎng)站實例
創(chuàng)建一個電影導演工作室主頁,要體現(xiàn)出懷舊感和孤獨感。沒有Logo,沒有圖片,所有素材自己搜集。根據(jù)設(shè)計要求,我們可以想象一個場景,一間有著泛舊的地板和斑駁的墻面的房間,一把空蕩蕩的導演椅安靜的放在那里,椅子旁邊放著拍片時用的喊話筒和廢棄的電影膠片,打板也斜倚在墻上,安靜的躺在幽暗的角落里。一束光從頂部向下打下來,落在椅子和地板上,讓整個的氣氛更加顯得孤寂。依據(jù)這個想法,我們搜集以下素材來創(chuàng)建我們頭腦里的這個場景。
教程素材:http://pan.baidu.com/s/1dDj6MWh
先看看效果圖:
接下來是具體的實現(xiàn)步驟。
1、打開Photoshop,快捷鍵Ctrl+N新建一個寬960像素,高800像素的空文檔,使用移動工具(V)在文檔左右兩邊拉出參考線,然后選擇圖像>畫布大小命令,在對話框中將寬度更改為1400像素,點擊確定。這樣我們就有了一個寬1400像素,高800像素的空白文檔以及位置合理的參考線。接下來,我們的設(shè)計全部都在這兩條參考線內(nèi)展開,所以第一步創(chuàng)建參考線是非常重要的。如下圖所示:
2、按D鍵將前景和背景色調(diào)整到默認和前黑后白的狀態(tài),然后使用Alt+Delete鍵將圖層填充為黑色。使用文件>置入命令將我們已經(jīng)找好的地板素材導入到文檔中,來創(chuàng)建整個場景的第一個元素。由于地板素材文件非常大,超過了文檔的尺寸,所以你會看到置入命令會自動將圖片調(diào)整到合適的尺寸。另外,此命令還會將地板圖片作為智能對象添加到文檔中。我們可以對地板圖標進行縮放、定位、斜切、旋轉(zhuǎn)或變形操作,而不會降低圖像的質(zhì)量。所以置入是一個非常好的將圖片導入到文檔中的選擇。
通過觀察置入的地板圖片我們可以發(fā)現(xiàn)對于我們要創(chuàng)建的場景來講,地板中木條的寬度還是太大,所以我們使用自由變換(Ctrl+T)命令,將圖片再縮小一些。這時候雖然木條的寬度合適了,但是圖片整體的大小太小了,不能覆蓋整個文檔,而我們的目的是要創(chuàng)建一個鋪滿了木地板的房間的感覺。所以這里我們將調(diào)整好的地板圖片再復制一層。將兩張圖片左右拼合起來,這樣圖片的寬度就夠了。這里要注意一個細節(jié),就是兩張圖片的拼合接縫處要細細的調(diào)整,最好一點都看出來。對于這張線條明顯的木地板,要做到這一點并不難。最后使用Ctrl+E將兩個圖層合并。最終的效果如下圖:
3、在圖層面板的地板圖層上點擊右鍵,選擇轉(zhuǎn)換為智能對象命令。之后使用自由變換(Ctrl+T),在文檔的自由變換區(qū)域內(nèi)點擊右鍵,選擇透視,將鼠標放置于右上角的錨點上水平向左拖動,你會觀察到地板圖片的頂部會向內(nèi)收縮,同時透視的感覺出現(xiàn),你還可以通過向右水平移動右下角錨點調(diào)整透視的角度,在調(diào)整的同時注意觀察圖片的效果,直到滿意為止。如果對最終的效果不滿意,你可以重新來一遍,這時由于圖層已經(jīng)是智能對象,所以不會損失清晰度。完成透視效果之后,在圖層面板底部點擊添加圖層蒙板按鈕,然后選擇 漸變工具(G),使用黑色至透明的漸變同時按住Shift鍵在地板兩端拉出水平漸變,遮蓋住地板的兩邊,使其更好的融合于場景之中。最后選擇濾鏡>銳化>智能銳化命令,在彈出的對話框中將數(shù)量調(diào)整為110%,半徑1個像素,其它參數(shù)默認,點擊確定。這樣地板看上去會更加清晰。最終完成的效果如下圖:
4、由于我們需要創(chuàng)建一種懷舊的感覺,所以原始地板圖片的顏色看上去過于明亮并且飽和度太高。所以接下來我們在圖層面板的底部點擊類似于太極圖標似的調(diào)整圖層按鈕,選擇色階調(diào)整圖層。應(yīng)用如下參數(shù)設(shè)置:
當然這些參數(shù)只是用來參考,并不是說一定不能改動,你也可以自己調(diào)整數(shù)值,只要將地板的亮度降低到你自己認為合適就可以,一切以感覺為主。完成之后,回到圖層面板,確保調(diào)整圖層位于地板圖層色上方,按住Alt鍵,移動鼠標到調(diào)整圖層和地板圖層之間的位置,這時你會觀察到鼠標從手指的形狀變成了一個左邊一個小箭頭右邊兩個圓形相疊的圖標樣式,點擊一下,調(diào)整圖層的左邊出現(xiàn)了一個向下的小箭頭,這樣做的目的是將調(diào)整圖層轉(zhuǎn)換為下面圖層的剪貼蒙板,這樣色階調(diào)整圖層只會對地板圖層有效,否則,凡是建立在調(diào)整圖層下方的圖層都會受到該調(diào)整圖層的影響。
降低了亮度之后,接下來我們再按照同樣的方法創(chuàng)建一個色相飽和度調(diào)整圖層,參數(shù)設(shè)置如下:
調(diào)整了色階和飽和度之后,我們再來看完成后的效果:
5、至此地板的效果就完成了,接下來我們在地板后面再來蓋一堵墻。應(yīng)用置入命令將下載好的墻面素材載入文檔。由于下載的墻面素材還帶有地面的部分,所以我們將墻面素材置于地板圖層的下方,讓地板遮住多余的部分,然后調(diào)整墻面的位置并應(yīng)用自由變換使墻面素材大小合適。效果如下圖:
6、可以觀察到,要使墻面素材融合于整個場景之中還有這么幾個問題需要解決。首先是從地板的半透明區(qū)域可以看到墻面素材多余的部分,需要遮蓋住。二是需要調(diào)整墻面的色調(diào),因為它太紅了。三是在墻面與地板交匯的部分過于生硬,看起來不自然。下面就讓我們一個問題一個問題的來解決。首先在墻面圖層上方新建一個圖層,使用漸變工具(G),按住Shift鍵從文檔底部至地板與墻面的交匯處拉出一個黑色至透明的漸變,這樣既遮住了墻面多余的部分,而且由于給墻面底部添加了陰影,所以地板和墻面的融合也會顯得自然,一次解決了兩個問題。需要注意的是,漸變的效果不要過于強烈,要柔和一些,如果你一次做的不夠好,可以試著多做幾次。下面是最后的效果:
7、接下來我們和上面地板中的方法一樣,通過建立調(diào)整圖層來給墻面調(diào)色,使其和地板的感覺相融合。首先建立一個色階調(diào)整圖層,應(yīng)用如下參數(shù)設(shè)置:
再建立一個色相飽和度調(diào)整圖層,參數(shù)如下:
最后給墻面圖層創(chuàng)建一個蒙板,遮蓋住兩邊的區(qū)域。當然別忘了使用Alt鍵將調(diào)整圖層應(yīng)用為剪貼蒙板。完成后的效果如下圖:
8、為了增加懷舊的氣氛,接下來,我們使用筆刷工具在墻面上創(chuàng)建裂紋的效果。首先新建一個圖層,然后下載上面提供的裂紋筆刷效果文件,選擇畫筆工具(B),將下載的裂紋筆刷載入到畫筆當中。將前景色調(diào)整為黑色,選擇其中的一個裂紋筆刷效果,使用鍵盤上的左右方括號鍵調(diào)整筆刷的大小,在墻面的右下角位置點擊一下,這樣一條裂紋就出現(xiàn)在了墻面上,裂紋的效果就完成了。最后,選中以上創(chuàng)建的關(guān)于地板和墻面的所有圖層,按 Ctrl+G鍵將它們放入到一個圖層組中,命名為”地板和墻面”。最終效果如下圖:
9、至此我們的整個空間背景就創(chuàng)建完成了,整個設(shè)計也有了一些氣氛。接下來我們來完成主頁的Logo和導航的制作。新建一個圖層組,命名為導航,在其中新建一個圖層。下載上面提供的電影膠片畫筆文件,載入筆刷,選擇其中的長條膠片筆刷,調(diào)整畫筆大小,將前景色調(diào)整為黑色,畫出電影膠片導航背景,如果畫出的膠片太短的話,將畫好的膠片圖層復制一遍,使用移動工具(V)調(diào)整兩張圖片的位置,將其拼合起來,使用Ctrl+E將兩圖層合并。
由于我們只需要膠片的打孔部分,所以接下來新建一個圖層,使用直角矩形工具畫出一個寬度橫跨整個文檔,也就是大于1400像素,高度為115像素的黑色矩形,使用移動工具仔細的將矩形的下邊框和膠片的打孔部分拼合在一起。完成后的效果如下圖:
學習 · 提示
相關(guān)教程
- PS創(chuàng)建一款簡潔大方的歐美商務(wù)網(wǎng)站首頁
- 如何創(chuàng)建一個Fancy的設(shè)計工作室網(wǎng)頁布局
- 使用ps打造一個企業(yè)網(wǎng)站首頁設(shè)計制作全
- Photoshop制作筆記本電子商務(wù)網(wǎng)站首頁模板
- Photoshop設(shè)計藍色風格網(wǎng)站首頁模板
- Photoshop美工教程:游戲網(wǎng)站首頁布局
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- Photoshop繪制高雅清新的網(wǎng)站首頁模板
- Photoshop制作田園風格網(wǎng)站首頁
- photoshop網(wǎng)頁設(shè)計:個性鮮明的網(wǎng)站首頁
推薦教程
- PS設(shè)計制作攝影主題網(wǎng)站主頁教程
- photoshop設(shè)計黑色風格的網(wǎng)站界面實例
- Photoshop制作漂亮的綠色風格的網(wǎng)頁模板
- Photoshop繪制簡潔的包含云朵主題的網(wǎng)頁
- Photoshop設(shè)計軟件行業(yè)網(wǎng)站模板教程
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop制作網(wǎng)站首頁(3):切割網(wǎng)頁圖片
- photoshop如何設(shè)計綠色的時尚Web網(wǎng)站
- Photoshop設(shè)計個人簡歷介紹網(wǎng)站過程
- Photoshop結(jié)合Dreamweaver制作網(wǎng)頁相冊