首頁 > 網頁教程 > 設計分享 > 網頁PS設計教程:手把手教你制作漂亮的商業模板

江苏十一选五前三直最大遗漏:網頁PS設計教程:手把手教你制作漂亮的商業模板

時間:2012-03-29    來源:站長之家

江苏十一选五开奖公告 www.ervgn.com 今天我們將在Adobe Photoshop中設計一個時尚的商業模板。該模板包含頁眉(header)、圖片輪換、服務區域、視頻,關于我們、頁腳(footer)等內容。通過本教程,結合圖案、紋理、顏色等元素,輕松幾步即可制作出3D效果的界面。

Snickles: Create A Modern Business Template In Adobe Photoshop

下圖是今天我們將要制作的模板,點擊可以全屏預覽。

本教程需用到的資源

· 背景紋理

· 用戶界面元素

· 社交網站圖標

· 圖標

· 秘魯AtixVector的插畫作品

第一步:創建文檔

在Photoshop中創建一個1400像素x1700像素的文檔。

標尺工具在本教程中非常有用,使用之前要確保標尺和參考線已經顯示

· 標尺快捷鍵:Ctrl+R

· 參考線快捷鍵:Ctrl + ;

使用標尺工具時,信息面板也非常重要,用標尺進行測量時,相關信息會先在在信息面板。如果沒有顯示,你可以到窗口(Windows)勾選上信息(Info)這一選項。

站點的內容區域的總寬度為960像素。所以我們先創建第一條參考線,進入到視圖(View)中的選擇新建參考線(New Guide),設置值為220像素,重復步驟將值改為1180像素。這樣可保證站點內容區域居于整個畫布中央(譯者注:即左右各為220像素)

第二步:為Header和Slider創建背景

我們要讓背景表面呈現出3D效果,以放置幻燈片展示區。頂部安放的是網站標志,導航條和RSS訂閱圖標。

使用矩形工具(U)創建一個960像素的,顏色為#092f56的矩形。接下來,用標尺工具從該矩形的底部拉一條距離(該矩形)頂部為140像素的水平參考線。

相關推薦
網頁PS設計教程:手把手教你制作WordPress新聞博客模板
網頁PS設計教程:手把手教你制作簡潔風格的網頁按鈕
18個值得網頁設計師收藏的超棒CSS3教程
網頁設計教程分享—能影響觀眾的網站首頁設計10個要點
網頁設計教程:關于網頁設計的那些事兒
網頁設計教程:必須注意的最常見網頁可用性錯誤
網頁設計教程!有哪些技巧可以搞定大圖設計?
網站設計教程:如何為網站搭配圖片?
47個超級精美的Photoshop光影效果設計教程
25個驚艷而令人震撼的高品質Photoshop CS5教程
16款國外懷舊經典復古風格的照片效果PS教程
22個效果精美的PS/Corel Draw海報設計教程分享
35個精致漂亮的Photoshop背景教程推薦
25個立體質感的Photoshop網頁菜單和導航制作教程分享
網頁制作教程:用HTML和CSS創建手寫書信風格聯系人表單
20個超棒的photoshop網頁設計教程分享
20個PSD轉換為XHTML+CSS網頁模板的教程分享
20個視覺效果令人驚嘆Photoshop文字特效教程
Photoshop教程:提高IOS設計效率的30個要訣分享
高效UI設計秘笈 Photoshop CC使用技巧圖文教程
PS字體教程:教你打造閃閃發光的鉆石字效
動效設計:5分鐘教你打造Siri式波浪動效
PS教程分享:教你繪制一枚淡雅的播放器圖標
真的還是PS的?快來測試下你的觀察力吧
PS合成教程:教你創建美到爆的叢林美女蝶仙分享
PS合成教程!教你打造夢幻的《花千骨》劇照海報
PS調色教程:后期高手教你輕松3步修出清新色調
PS教程:如何制作一個懷舊圖章?
PS海報制作教程:手把手教你臨摹一張絢麗的藝術海報
PS海報設計教程:如何臨摹一張絢麗的藝術海報?
PS字體教程:創建一個極具個性化的人物文字特效
CSS酷站網頁水平條經典設計欣賞
歐美CSS酷站網頁背景設計之光影特效賞析
酷站欣賞之歐美棕色調網站設計案例賞析

精彩推薦

熱門教程