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

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

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop制作簡潔干凈的網頁效果圖

Photoshop制作簡潔干凈的網頁效果圖

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

在這篇教程中,我將教給你如何在photoshop中制作一個簡潔干凈的網頁效果圖。原始效果是由 ThemeForest的kuntiz 設計的。我很感謝他允許我發布這篇教程。這是這篇教程的第一部分。

一些需要的素材:

  • 葉子素材
  • 像素化藍色矩形

Step 1: 新建文檔

Photoshop制作簡潔干凈的網頁效果圖

在photoshop中,按住(Ctrl+N)新建一個文檔。設置大小為1200px *750px。然后用漸變工具從上到下拉出一個漸變,顏色從 #792700 到 #000000。

Step 2: 在背景中添加一些顏色

Photoshop制作簡潔干凈的網頁效果圖

新建一個圖層,命名為”color.”,用筆刷工具,選擇一個比較軟的筆刷,大概直徑為300px,我的顏色選擇的是紅色,藍色和橙色,在這個圖層中添隨便畫幾筆。

Step 3:給背景添加一些紋理

Photoshop制作簡潔干凈的網頁效果圖

現在我們要給背景增加一些紋理效果。打開我們剛剛下載的葉子的素材圖片,用移動工具把這個圖片移動到我們的文檔中。 右鍵單擊該圖層的縮略圖(在圖層面板中),選擇“編組到新建智能對象土層中”。然后選擇 濾鏡>藝術化>膠片顆粒,按照上面的設置進行操作。然后選擇 濾鏡>像素化>馬賽克,同樣按照圖中的設置進行操作。設置該圖層的渲染模式為 “差值”(Difference),透明度設為30%,該土層命名為“texture”。

Step 4:創建黑色背景的內容區域

Photoshop制作簡潔干凈的網頁效果圖

新建一個圖層,選擇圓角矩形工具,設置圓角度為3個像素,創建一個黑色的圓角矩形。然后在圖層面板中雙擊該圖層,彈出圖層樣式面板,按照圖中的設置給該圖層設置陰影。設置該圖層透明度為70%,然后命名這個圖層為 “black shape”。

Step 5: 用群組(文件夾)來組織你的圖層

Photoshop制作簡潔干凈的網頁效果圖

按住ctrl鍵,選擇你剛剛創建的所有的圖層,然后點擊Ctrl+G群組他們。給這個新的群組(文件夾)命名為”background”。

Step 6: 創建更多的群組(文件夾)

Photoshop制作簡潔干凈的網頁效果圖

創建新群組 ,圖層>新建>群組,然后命名為 “home” 。然后在這個群組下創建另一個群組,命名為 “logo”。

Step 7:創建logo和口號

Photoshop制作簡潔干凈的網頁效果圖

在logo群組中,新建一個圖層。用文字工具,輸入網站的logo文字,應用顏色是 #f4f4f4。雙擊該圖層打開圖層屬性面板。按照上面的設置進行操作。然后新建另一個圖層輸入口號,應用顏色是#eeeeee。

Step 8: “Sign up” 和 “login” 按鈕

Photoshop制作簡潔干凈的網頁效果圖

好了,我們現在要在布局的右上角做兩個按鈕。新建一個群組,命名為 “Sign up | Login” 。然后選擇圓角矩形,創建一個小的矩形,就像我做的一樣。雙擊圖層打開圖層樣式面板,按照上圖的設置進行操作。設置前景色為白色,用文字工具在你的按鈕上 寫下 “Sign up | Login” 。設置文字這個圖層的透明度為75% 。

Step 9: 創建1個像素高的藍色線條

Photoshop制作簡潔干凈的網頁效果圖

新建一個群組,命名為 “Navigation”(導航)。新建一個圖層,命名為”Line”。選擇“單行選框工具”,在畫布中單擊創建一個像素高的選取。填充顏色#406f94 ,然后刪除內容區域以外的部分。設置該圖層透明度為 40% 。

Step 10: 在導航條中添加一個漸變效果

Photoshop制作簡潔干凈的網頁效果圖

創建新圖層。用矩形選區工具,創建一個選區,就像我做的一樣。(注意:你可以利用標尺來幫助一創建這個選區)。然后用漸變工具,設置漸變為 #35423e 到透明。從底部向上填充漸變。按下 Ctrl+D 清除選區。 然后,濾鏡>雜色>添加雜色。按照上圖的設置進行操作。命名這個圖層為 “gradient” 。在線條和漸變之間記得留下1個像素的高。

Step 11: 寫導航的字

Photoshop制作簡潔干凈的網頁效果圖

選擇文字工具,寫下你的導航的文字。然后雙擊打開圖層樣式面板。按照上圖設置。我給文字添加了一個基本的漸變/陰影效果。

Step 12:創建導航文字之間的裝飾分割

Photoshop制作簡潔干凈的網頁效果圖

現在我們要創建一些分割線。新建一個圖層,選擇單列選框工具,創建一個1個像素寬的選區。然后用矩形選區工具,單擊”與選區交叉”按鈕(在狀態欄的上面有個按鈕),按照上圖的操作化一個選取。用白色填充選取。然后ctrl+D刪除選取。

Step 13

Photoshop制作簡潔干凈的網頁效果圖

雙擊該圖層打開圖層樣式面板,創建漸變疊加。該圖層命名 “line 1″。

Step 14:

Photoshop制作簡潔干凈的網頁效果圖

Ctrl+J復制圖層 “line 1″ ,然后命名這個新圖層為”line 2″。用移動工具,向右挪動這個圖層 。然后雙擊圖層打開圖層樣式面板,按照上面的設置進行操作。

Step 15:把圖層”line 1″ 和 “line 2″轉換成智能圖層

Photoshop制作簡潔干凈的網頁效果圖

按住 Ctrl鍵,選中圖層 “line 1″ 和”line 2″ 。然后點擊右鍵,選擇轉換成智能對象圖層。設置這個智能圖層為 “separator”。

Step 16: 創建藍色高光

Photoshop制作簡潔干凈的網頁效果圖

在圖層”separator”下創建一個新圖層。用矩形選區工具創建一個選取(按照上圖設置),然后填充顏色為#35423e。右鍵單擊該圖層,把 這個圖層轉換成智能對象圖層。點擊濾鏡>模糊>高斯模糊,按照圖中設置。點擊濾鏡>雜色>添加雜色,按照圖中設置。設置該圖層透 明度為60% ,命名該圖層為 “highlight”。

Step 17:給圖層”separator”創建蒙版

Photoshop制作簡潔干凈的網頁效果圖

在圖層面板中單擊圖層 “separator” ,點擊圖層>圖層蒙版>顯示全部。選擇漸變工具,在蒙版中,從頂部到分割線的中間部分,畫一個從黑色到透明的漸變。

Step 18: 復制分割線

Photoshop制作簡潔干凈的網頁效果圖

按住Ctrl鍵,在圖層面板中,點擊圖層”separator”和 “highlight” 。 然后用移動工具,按住 Alt 和 Shift鍵拖拽。這時候的效果就是復制移動了這兩個圖層。向右移動到合適的位置。重復以上操作。

Step 19:群組所有的分割線

Photoshop制作簡潔干凈的網頁效果圖

選擇所有的 “separator” 和 “highlight”圖層,按住Ctrl+G 群組它們。命名這個群組為”separators”。

Step 20: 給活動頁添加按鈕效果

Photoshop制作簡潔干凈的網頁效果圖

現在,我們要給當前(活動的)頁面的導航文字,添加一個不同的背景,要和其他頁面的導航文字作以區分。用選區工具創建一個和我一樣的矩形選取。把這 個圖層放在文字圖層的下面。雙擊該圖層打開圖層面板,按照上圖進行設置,添加一個漸變疊加。命名這個圖層為”active menu”,設置圖層透明度為 50%。

Step 21: 創建搜索條

Photoshop制作簡潔干凈的網頁效果圖

新建群組 (圖層> 新建 >群組),命名為 “search” 。把它放在群組”navigation”的上面。用圓角選區工具,設置圓角為3px,創建一個圓角矩形,設置顏色為 #104f59。命名這個圖層為 “text field” ,設置透明度為 80%。

Step 22: 創建搜索按鈕

Photoshop制作簡潔干凈的網頁效果圖

用矩形選取工具創建一個矩形選區,如上圖。把它放在搜索條的右邊。雙擊圖層打開圖層樣式面板。添加漸變疊加。然后給這個圖層創建一個蒙版。

Step 23: 在按鈕上寫 “search”

Photoshop制作簡潔干凈的網頁效果圖

用白色寫文字 “search” 。設置該圖層透明度為75%。

Step 24: 給搜索欄創建一個1像素寬的細線

Photoshop制作簡潔干凈的網頁效果圖

用單列選框工具,創建需要的選取。然后填充顏色 #123036。命名這個圖層為 “line”,把它放在圖層 “button” 下面。

Step 25: 創建一個藍色矩形

Photoshop制作簡潔干凈的網頁效果圖

創建一個新群組,命名為”Showcase”。在里面再創建一個群組,命名為”background”。用矩形選擇工具,創建一個新矩形,填充顏 色#219aad。我的矩形是983 px寬 273 px 高 (在創建舉行之前你可以打開信息面板 – 窗口> 信息,這樣你就可以看到具體的尺寸)。設置圖層透明度為 55% 命名它為 “bg4″。

Step 26: 給這個藍色矩形添加紋理效果

Photoshop制作簡潔干凈的網頁效果圖

打開素材文件”像素化藍色矩形” ,把素材移動到我們的文件中。放在藍色矩形的上面。設置該圖層透明度 55% ,然后命名這個圖層為 “bg3″。

Step 27: 給藍色矩形添加漸變

Photoshop制作簡潔干凈的網頁效果圖

按住Ctrl點擊圖層 “bg4″的蒙版,這時創建了一個選取。 新建圖層,用漸變工具,從選取的底部到頂部畫一個從 #56b8e5 到透明的漸變。然后 Ctrl+D 刪除選區。

Step 28:創建一個小的藍色矩形

Photoshop制作簡潔干凈的網頁效果圖

新建圖層。用矩形選區工具,創建一個選區(如上圖)。用漸變工具,從選區的底部到頭部,拖拽從#0f2b42 到#2a607f的漸變。Ctrl+D 刪除選區。命名該圖層為 “bg1″。

Step 29: “Sign up” 按鈕

Photoshop制作簡潔干凈的網頁效果圖

創建新群組命名為 “sign up button”。用圓角矩形工具,設置圓角為2 px ,創建一個圓角矩形(如上圖)。雙擊圖層打開圖層樣式面板。如上圖設置,添加效果。然后用文字工具寫上 “sign up” ,設置文字白色。

Step 30: “Learn more” 按鈕

Photoshop制作簡潔干凈的網頁效果圖

重復上面的操作,建立另一個按鈕。但是這一次白色的文字是 “learn more” 。然后創建一個新圖層,用用戶自定義形狀,選擇一個白色的箭頭。

Step 31: 在矩形的左邊創建一個按鈕

Photoshop制作簡潔干凈的網頁效果圖

創建一個新群組,命名為”left arrow”。用橢圓工具l (U),創建一個圓形,填充顏色#406f94。雙擊圖層打開圖層樣式面板,按照上圖設置。

Step 32: 在藍色圓圈中創建一個箭頭

Photoshop制作簡潔干凈的網頁效果圖

新建圖層,用用戶自定義圖形,創建白色箭頭。雙擊打開圖層樣式面板,按照上圖進行設置。設置圖層透明度為50%。

Step 33: 在右邊創建另一個箭頭。

Photoshop制作簡潔干凈的網頁效果圖

重復以上步驟,在矩形的右邊創建對稱的圓圈和箭頭。

Step 34: 創建特色圖片

Photoshop制作簡潔干凈的網頁效果圖

新建群組。命名為 “image” 。在這個群組中放置一個小的圖片,命名這個圖層為”image” 。雙擊打開圖層樣式面板。按照上圖設置。

Step 35: 給你的圖片添加陰影

Photoshop制作簡潔干凈的網頁效果圖

點開圖層>圖層樣式>新建圖層,在原始圖層上面新建了一個圖層。打開圖層>圖層夢般>顯示全部,設置漸變,畫一個黑色到透明的漸變,從小圖片的底部到中間的位置。給這個圖層命名為 “shadow”。

Step 36: 添加文字

Photoshop制作簡潔干凈的網頁效果圖

新建群組。用文字工具添加一些文字,命名這個群組為 “text”。

Step 37: 創建白色矩形

Photoshop制作簡潔干凈的網頁效果圖

新建群組,命名為 “content”,在其中再新建一個群組,命名為 “shadows” 。用矩形工具,新建一個矩形,填充白色,向上圖一樣。命名這個圖層為”white shape” ,設置圖層透明度為90%。

Step 38: 添加頂部陰影

Photoshop制作簡潔干凈的網頁效果圖

按住Ctrl單擊圖層面板上圖層”white shape”的小縮略圖,創建選取。創建一個新圖層,用漸變工具,畫一個從 #8f8f8f 到透明的漸變,參照上圖。設置該圖層透明度為 50% ,命名這個圖層為”top shadow” 。然后用移動工具,向下移動2個像素。

Step 39:創建橫向的陰影

Photoshop制作簡潔干凈的網頁效果圖

新建圖層,,用矩形工具,創建一個選區,如上圖。用漸變工具畫一個從 #8f8f8f 到透明的漸變。給這個圖層創建蒙版,用一個直徑較大的軟筆刷,創建陰影。設置該圖層透明度為 30% ,命名該圖層為 “vertical shadow 1″ 。復制這個圖層 (Ctrl+J),命名這個新圖層為 “vertical shadow 2″ ,并且把它移動到右邊。

Step 40: 創建橫向線條

Photoshop制作簡潔干凈的網頁效果圖

用直線工具 (U)創建一個橫向線條,如上圖,高為1px,顏色#aebcc7。命名為 “line”。

Step 41: 添加文字

Photoshop制作簡潔干凈的網頁效果圖

選擇文字工具,添加一些文字。你也可以添加一些圖片。

Step 42: 給底部創建漸變

Photoshop制作簡潔干凈的網頁效果圖

新建群組,命名為 “footer”。在里面新建一個圖層,用選區工具(M) 創建一個選區,如上圖。設置前景色為#555555,用一個直徑比較大的軟筆刷,在選取頂部的位置涂抹。設置該圖層透明度為 50% ,命名該圖層為”gradient”。

Step 43: 在底部,添加一個1個像素高的線條

Photoshop制作簡潔干凈的網頁效果圖

新建圖層。按照以前的做法,創建一個1px高的線條,填充顏色黑色,設置圖層透明度為15% ,命名該圖層為 “line”。

Step 44: 給底部區域添加文字

Photoshop制作簡潔干凈的網頁效果圖

在底部添加一些文字

Final Result

Photoshop制作簡潔干凈的網頁效果圖

標簽網頁,效果圖,干凈,簡潔,制作,Photoshop

相關下載

查看所有評論+

網友評論

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

公眾號

主站蜘蛛池模板: 亚洲美女福利视频在线 | 黄色18网站 | 99视频在线观看视频 | 欧美黄色a | 国产黄色在线播放 | 最新国产精品好看的国产精品 | 99日韩| 欧美国产亚洲一区 | 小屁孩和大人啪啪 | 日日摸人人拍人人澡 | 亚洲一区二区久久 | 久草草视频在线观看免费高清 | 国产日韩在线播放 | 亚洲精品人成网线在线 | 免费一级毛片在级播放 | 久久福利资源国产精品999 | 八戒午夜精品视频在线观看 | 精品国产一区二区三区久久 | 国产亚洲精品日韩已满十八 | 欧美理论在线 | a毛片网站 | 一区二区三区在线播放视频 | 日韩不卡在线观看 | 亚洲美女精品视频 | 欧美成人观看免费完全 | 狠狠久久综合 | 久久精品久久精品久久 | 午夜dj视频完整社区 | 99色在线视频 | 特黄aa级毛片免费视频播放 | 久久久久久国产精品免费免费 | 久草在线视频免费 | 日本三级日产三级国产三级 | 亚洲欧美不卡中文字幕 | 国产aⅴ精品一区二区三区久久 | 911精品国产亚洲日本美国韩国 | 91九色国产| 美女一级片视频 | 日韩精品免费一区二区 | 窝窝女人体国产午夜视频 | 欧美成人免费观看国产 |