ps怎麽設計網頁模板?ps怎麽設計網頁模板?我們在看網站的時候會發現設計師們也越來越註重模式設計,不同的網站設計風格,需要不同的設計思路,網站的設計需要什麽要求呢?接下來小編就帶大家來看看網頁的設計方法。在網站設計中使用字體的步驟。首先,我們需要先確定壹個網站的類型和類型。如果是企業網站,我們就需要將網站的內容編寫成標題、副標題和正文,然後根據內容的主題來設計網站的頁面,同時也要註意網站中的字體的統壹性。如果是商城網站,我們應該使用襯線體、手寫體、圓角矩形體、粗體、傾斜體等。另壹種簡單的網頁形式,如站酷、淘。最主要的是表現網站的內容。這是因為其他網站從來也不是為了好看而設計的,都是為了讓用戶感到舒適。
用Photoshop設計漂亮的網頁頁腳模板本文介紹壹篇制作網頁頁腳的PS教程,這個頁腳的設計很有層次感,同時用網格空格背景紋理修飾,是壹個十分漂亮的網頁頁腳。
自從Web2.0沖擊互聯網以來,頁腳就變得比以前任何時候都顯得重要了,出現了許多非常漂亮的頁腳設計。在這個教程中,我將會教給妳如何在Photoshop中創建壹個簡潔、光滑的網站頁腳。
頁腳
這就是我們將要創建的頁腳。點擊下面的截圖查看原圖。
第1步
和液體感的頁首和頁腳壹樣,漸變通常是web2.0設計風格的標誌。在這個教程中我們將使用到壹組模擬3D材質的漸變文件包。妳可以從excellentDezinerFolio得到這個文件包。點擊這裏下載漸變文件包。
第2步
在Photoshop中創建新文檔。我自己創建了壹個大的文件,1440像素X900像素大小(以適應我的17英寸顯示屏的筆記本)。當然,實際上妳的頁腳不應該這麽大,雖然它可以很好的模擬出當妳的瀏覽器窗口被拖拽後的情況。
選擇壹個背景顏色,在我的這個例子中,背景色是壹個簡單的從#b0b0b0到#e1e1e1的漸變色。按住Shift鍵,創建壹個垂直的從上到下的漸變。
第3步
妳將要創建什麽樣的布局在網頁設計中是非常重要的。也就是在流式布局(可以自適應瀏覽器大小的布局)和固定寬度布局(在web2.0風格的網站中固定寬度布局經常會是居中的)之中作出選擇。我們的這個頁腳將會是壹個固定寬度布局的頁腳,大小為760像素X420像素。這個尺寸會保證即使在800像素X600像素大小的屏幕上,也叫也會正確的顯示出來。
如下所示使用網格來妳的網站的大小。註意如果妳想創建壹個適合於1024像素x768像素屏幕大小的布局,那麽將妳的網格定義在955像素X600像素的區域。
第4步
雖然我們的頁腳是固定寬度,我們仍然希望頁腳能夠填滿整個頁面。為了實現這個目的,我們會用到我在Photoshop中制作的仿金屬材質的圖案。點擊這裏下載此圖案。在Photoshop中打開這個圖片,選擇編輯定義圖案,為圖案命名。
現在創建壹個新的文檔,1440像素寬,86像素高,選擇編輯填充命令,選擇我們剛才創建的圖案。全選(Ctrl+A),然後將圖片剪切、粘貼到我們的第壹個文檔的底端,我們將會得到如下的結果。
第5步
現在是時候使用第1步中那漂亮的漸變文件包了。創建壹個新的圖層,使用矩形選區工具(M)創建壹個100%文檔寬度的,21像素高的選區。選擇漸變工具(G),然後選擇壹個漂亮的漸變,我選擇的是”Black5-Gloss”,現在按住Shift鍵在矩形選區內畫壹條垂直的線,創建這個漸變。
將創建好的形狀移動到第4步中創建的形狀的上方。妳應當得到和下圖顯示的圖片類似的結果。
第6步
現在我們給第5步創建的圖層添加上陰影效果。
第7步
將前景色設置為#545557,背景色設置為#1e211f。在第4步創建的圖層下創建壹個新的圖層。使用選區工具選取第4步圖層的內容。選擇漸變工具,選擇第壹個漸變(前景和背景色的結合),按住shift鍵,在選區上畫出壹個垂直的漸變。現在選擇第4步的圖層,將圖層混合模式更改為正片疊底。
第8步
在所有圖層上方創建壹個新的圖層,在參考線中間畫壹個顏色為#dfdfdf的圓角矩形。在圖層上右擊,點擊混合選項,給矩形創建壹個投影效果。然後在效果圖層上右擊,選擇創建圖層,這樣會將投影效果分離為壹個單獨的圖層。
現在妳已經有了矩形圖層和陰影圖層,移動並且改變陰影的大小直到得到如下圖的效果。妳可以按下Ctrl+T來調出變換工具,然後右擊,選擇透視,向內拖拽頂部的兩個手柄。也可以將陰影向下方移動,使用柔軟畫筆的橡皮擦工具將上方邊緣的陰影擦掉。
第9步
最後添加文字、版權信息和妳的logo完成設計。
第10步
為了在html文件中使用頁腳,只需將文字移除(文字將會在html中添加),如下圖所示剪切背景圖片,然後將其粘貼到壹個新的文件中。就像在Photoshop中那樣,這個圖案將會在CSS文件中使用背景圖片屬性來實現。這就是為什麽我們要將圖片剪切到這麽小,為的是以小的文件得到更好的效果。
要剪切頁腳只需要在參考線內選擇圖片的內容,然後將其剪切並粘貼到壹個新的文件中。
選擇存儲存儲為網頁和設備命令來保存這兩張圖片。然後選擇JPG格式和合適的品質。JPG格式和PNG格式都是存儲圖片的很好的格式,他們可以保存很多的顏色。GIF格式最好用於顏色簡單的圖片。這種不同的用法是由於不同的算法得來的。
最終的頁腳
如何用PS制作網頁模版設計壹個尺寸後,就直接設計內容就可以,註意不要合並任何圖層,文字可以拿壹些常用的字代替。
都做完後,保存成PSD和JPEG兩種格式。前者就是模板,後者就是網上的預覽!