日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop設計簡潔風格的網頁模板

Photoshop設計簡潔風格的網頁模板

時間:2024-02-07 15:45作者:下載吧人氣:15


作者:佚名 出處:Photoshop設計簡潔風格的網頁模板作者:luycas

本教程主要使用Photoshop設計簡潔風格的網頁模板,詳細介紹如何使用960柵格系統設計網站界面。該柵格系統會優化網站設計流程。下面讓我們一起來學習吧

最終效果預覽

Photoshop設計簡潔風格的網頁模板

Photoshop設計簡潔風格的網頁模板

1.新建文檔

參數:寬1680px、高1100px,背景亮灰色(#F9F9F9)

Photoshop設計簡潔風格的網頁模板

2.添加網格

網上有很多柵格系統可供下載,是我們建立屬于自己的柵格系統最好的參考。如果你以前沒有使用過柵格系統,本文就是簡單的入門。它讓你的工作變得輕松而有章可循,是原型布局最得力的助手。

下載960柵格系統,地址http://960.gs/

下載完成后,來到“templates”文件夾,使用photoshop打開960pix寬、12列柵格。

Photoshop設計簡潔風格的網頁模板

下面我們要把柵格導入到我們的工作文檔。選擇“12列柵格”圖層組,拼合圖層組并復制粘貼進工作文檔。

Photoshop設計簡潔風格的網頁模板

現在我們需要基準柵格。基準柵格是元素留白、行高等取值的重要參考。首先,新建文件,寬搞均為24px,刪除背景,新建一條1px高度的單線,置于畫布最底部。定義圖案:編輯-定義圖案,給圖案起一個容易記憶的名字。

Photoshop設計簡潔風格的網頁模板

返回工作文檔,新建圖層,填充圖案:編輯-填充,使用剛才定義圖案進行填充。

Photoshop設計簡潔風格的網頁模板

最后,我們要使用參考線標記我們的工作區域。新建參考線:視圖-新建參考線,選擇“垂直”,在360px、840px、1320px新建參考線。

Photoshop設計簡潔風格的網頁模板

3.開始設計

現在柵格系統建立完成,可以開始設計了。我們把整個網站分成5個大部分:

1.頁眉

2.插圖

3.內容區-左

4.內容區-右

5.頁腳

Photoshop設計簡潔風格的網頁模板


4.添加頁眉

我們習慣于自上而下的設計。選擇矩形選擇工具,繪制一個橫貫整個畫布寬度的矩形選區,高度120px。打開標尺工具能保證繪制的準確度,120px高剛好占到5個垂直方向的柵格,然后填充深灰色(#2C2C2C)。這個頁眉主要用于放置logo和導航欄。

Photoshop設計簡潔風格的網頁模板

5.插入你的logo

在頁眉的左上方插入logo,對齊到第二列柵格,這樣就給了網站40px的內邊距。本項目Logo字體我采用50pt Century Gothic,填充亮藍色(#ADC7D9),通過對文字“grid”加粗、填充白色來跟前面的文字“blue”區分。接下來給Logo添加內陰影效果,降低內陰影不透明度到25%,距離:2px、大小:5px。

Photoshop設計簡潔風格的網頁模板

6.添加導航

導航欄我們采用以文字為主的列表形式,這樣可以營造干凈整潔的視覺效果。選擇18pt Arial寫入導航欄文字,“Home”使用白色,其他文字都使用亮灰色(#BBBBBB)。調整頁眉所有的元素垂直居中對齊。

Photoshop設計簡潔風格的網頁模板

7.添加插圖區

我把這一部分稱作插圖區是根據他的用途來命名的-他展示了頁眉的主要信息。重復頁眉的做法繪制矩形選區,高度240px,然后填充跟logo一致的亮藍色(#ADC7D9)。我們來添加漸變填充,混合模式“疊加”,不透明度30%。

Photoshop設計簡潔風格的網頁模板

8.創建插圖區背景

公司名為“Bluegrid”,為了突出主題,我們創建一個柵格背景。使用跟前面創建基準柵格相同的辦法。新建文件寬高均為25px,刪除北京,繪制1px的單線置于畫布的底部和右邊緣,然后定義圖案。

Photoshop設計簡潔風格的網頁模板

9.添加插圖區背景

在所有圖層上方新建圖層,編輯-填充,使用新定義的圖案填充。

Photoshop設計簡潔風格的網頁模板

旋轉15°,應用白色疊加。新建空白圖層,跟白色柵格圖層拼合并命名為“grid”。

Photoshop設計簡潔風格的網頁模板

混合模式選擇“柔光”,按住Ctrl鍵單擊插圖區背景層取得選區,ctrl+Shift+I反選后刪除多余的柵格。

Photoshop設計簡潔風格的網頁模板

下面顯示參考線,接下來的工作就是確保插圖區“grid”圖層的網格線在960px寬度以內。

Photoshop設計簡潔風格的網頁模板

選擇漸變工具,顏色設置黑色到透明。我們將使用該漸變來隱藏掉960px寬度以外的部分。

確保漸變類型為“線性漸變”,沿著960px參考線最左邊一條拖拽鼠標,直到中間一條參考線停止,右側相同。

Photoshop設計簡潔風格的網頁模板

10.添加插圖區文本

插圖區放置一整頁的插圖,這里我們將采用純文本的展示方式。文字大小45pt、Arial,寫入準備好的宣傳口號。緊接著在下方使用17pt寫入一些介紹文字。最后把文字跟Logo一樣左對齊。

Photoshop設計簡潔風格的網頁模板

11.添加滑動展示

顯示參考線,使用矩形工具在右側兩條參考線間創建選區,高度占8個柵格(即140px),然后減去上下各一個像素來制作投影。

Photoshop設計簡潔風格的網頁模板

為滑動展示區添加投影,顏色#2C2C2C,距離1px,大小10px。

Photoshop設計簡潔風格的網頁模板

接下來我們需要在滑動展示區放置一些臨時的替代內容,這里我把自己blog的截屏拿了過來。設置圖片尺寸跟滑動展示區背景圖一致,選擇-編輯-收縮,10px,反選后刪除多余區域。

Photoshop設計簡潔風格的網頁模板


12.內容部分

使用矩形選擇工具,選取插圖區下方的部分,然后選擇漸變工具,顏色設置為#F0F0F0到透明,向下拖拽完成漸變。注意不要拖拽太遠,要保證頁面最底部的顏色信息在#F9F9F9左右。

Photoshop設計簡潔風格的網頁模板

13.左側內容區

普通文字樣式:Arial 18pt #9C9C9C

帶下劃線鏈接樣式:#A3BBCC

添加說明文字

Photoshop設計簡潔風格的網頁模板

14.添加服務列表

首先為列表添加標題,文字樣式:Arial 25pt 加粗 #262626.

列表內容的文字樣式:Arial 18pt #9C9C9C。

列表前的圓點,你可以使用橢圓工具繪制也可以使用快捷鍵Alt+7添加后改變顏色(#A4BCCD)來完成。

最后把所有的內容對齊到柵格。

Photoshop設計簡潔風格的網頁模板

重復這個過程,添加其他內容。

Photoshop設計簡潔風格的網頁模板

15.右側內容區

右側內容區用來展示最近新聞的精選集。

首先為列表添加標題,文字樣式:Arial 25pt 加粗 #262626,然后水平對齊到左側內容區的標題。

接下來為新聞添加標題,文字樣式 Arial 18pt #A4BDCD,然后跟左側內容區文本對齊。

新聞列表的文字樣式:Arial 16pt #9C9C9C。

使用相同的樣式制作另外2份新聞。

Photoshop設計簡潔風格的網頁模板

16.頁腳

我們最后的一個部分就是頁腳,用來放置一個登陸框、聯系信息和少量鏈接。

使用矩形選擇工具創建選區,并且填充深灰色(#262626)。

Photoshop設計簡潔風格的網頁模板

我們來增加表單。首先創建標題,文字樣式:Arial 20pt Bold (#FFFFFF),置于頁腳的左側。然后使用矩形選擇工具創建2個選區作為輸入框,填充白色,輸入框默認文字樣式:Arial 16pt #9C9C9C。

使用圓角矩形繪制提交按鈕,然后添加內陰影,不透明度改為305,大小和擴展均為0,距離10px。添加“忘記密碼”鏈接,樣式:Arial 13pt 下劃線 #A4BDCD.

Photoshop設計簡潔風格的網頁模板

17.頁腳的右半部分

最后我們來完成聯系信息。添加標題,文字樣式:Arial 20pt B加粗 (#FFFFFF) ,并且水平對齊到左側表單標題。然后添加聯系信息,文字樣式:Arial 16pt #FFFFFF.

18.檢查布局和平衡

使用柵格和參考線來檢查元素是不是對齊、并保持一致性。

如果沒有,請及時調整。

Photoshop設計簡潔風格的網頁模板

19.歡呼,你已經完成了

Photoshop設計簡潔風格的網頁模板

值得慶賀,你已經小小領會了如何使用柵格系統布局網站,可以自定義屬于自己的基本系統。

強烈建議你多應用該系統以達到純熟的程度,讓它變成你的第二感官。使用該系統會使作為設計師的你工作倍兒輕松。

點擊下載本文PSD源文件



標簽網頁模板,風格,簡潔,設計,Photoshop

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 久久两性视频 | 国产香蕉98碰碰久久人人 | 欧美人成在线观看网站高清 | 午夜视频在线观看一区 | 欧美一区二区日韩一区二区 | 亚洲在线视频网站 | 国产欧美一区二区三区免费 | 爽爽爽爽爽爽爽成人免费观看 | 姐姐真漂亮在线视频中文版 | 欧美三级 欧美一级 | 精品午夜寂寞黄网站在线 | 国产精品久久久久激情影院 | 免费国产a国产片高清 | 国产91专区| 欧美一级毛片欧美一级成人毛片 | 欧美韩国xxx | 日韩亚洲国产综合久久久 | 国内主播福利视频在线观看 | 欧美 另类 精品一区视频 | 成人18免费视频 | 牛牛本精品99久久精品88m | 国产福利拍拍拍 | 岛国午夜精品视频在线观看 | 久久久久久久免费视频 | 国内精品久久久久久野外 | 中国美女隐私无遮挡免费视频 | 亚欧色视频在线观看免费 | 国产在线精品一区二区三区不卡 | 日韩一区二区三区在线播放 | 日本一区二区三区不卡视频中文字幕 | 日韩特黄特色大片免费视频 | 日韩激情中文字幕一区二区 | 亚洲高清视频在线播放 | 欧美成人免费全部色播 | 久久99亚洲精品久久久久99 | 国产三级做爰高清视频a | 萌白酱粉嫩jk福利在线观看 | 久久国产一片免费观看 | 岛国在线永久免费视频 | 美女双腿打开让男人桶爽网站 | 成人欧美一区二区三区在线 |