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

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

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

時(shí)間:2024-02-20 09:00作者:下載吧人氣:22

作者:maimai
最終效果圖

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,讓我們開始吧。打開photoshop創(chuàng)建一個(gè)新文檔,尺寸是1020px X 1240px,背景顏色設(shè)置為#e6e9d4。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

用矩形工具,創(chuàng)建一個(gè)形狀,顏色 #bbc19c。我的形狀尺寸是 1020px X 327px

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,添加一個(gè)圖層蒙版(保證你的圖層是被選中狀態(tài))。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

然后確定你選擇中了蒙版。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

選擇漸變工具,保持默認(rèn)顏色(黑色為前景色,白色為背景色),你可以簡(jiǎn)單的點(diǎn)擊工具欄上面的小圖標(biāo)快速設(shè)置。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

按照下圖拖拽你的鼠標(biāo)。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,我的效果是這個(gè)樣子的。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

Step 1 – 創(chuàng)建logo和頭部導(dǎo)航

選擇矩形工具,在文件頂部畫出一個(gè)小的形狀。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

設(shè)置圖層樣式如下:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

我的效果:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

在右邊的部分,用文字工具,創(chuàng)建導(dǎo)航文字。我一般用的是字體“Helvetica” 。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

接下來(lái),用直線工具,創(chuàng)建一些導(dǎo)航上面的分割線。設(shè)置寬度為1px,在文字中間畫一些小的形狀。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

然后按照下圖進(jìn)行圖層樣式設(shè)置:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

我的效果:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,接下來(lái)創(chuàng)建logo。用矩形工具,創(chuàng)建一個(gè)類似的矩形,填充顏色#9cc1a2

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

按照下圖參數(shù)設(shè)置圖層樣式。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

然后,在文件Complete Designer Set 中,我選擇了一些矢量的裝飾圖案,在Illustrator中打開他們,選擇一個(gè)然后拖拽到Photoshop中,裝飾在綠色形狀的上面。用作襯托l(wèi)ogo。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,選擇中這一矢量圖層,降低它的透明度到30%。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,導(dǎo)航和logo基本上完成了。我用文字工具添加了一些引證,在文字導(dǎo)航的下面。

Step 2 – 創(chuàng)建主導(dǎo)航

選擇矩形工具,創(chuàng)建一個(gè)形狀,如下圖。我的尺寸是937px x 63px

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

設(shè)置圖層樣式如下:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

添加一些文字,最終效果如下:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

現(xiàn)在,看起來(lái)主導(dǎo)航有一些單調(diào),我添加了一些圖標(biāo)。你可以從Complete Designer Set中下載它們。在 Illustrator中打開,然后選擇合適的圖標(biāo)拖拽到 Photoshop就可以了?,F(xiàn)在我的效果圖是這樣子的:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,現(xiàn)在看上去還不錯(cuò)。

Step 3 – 創(chuàng)建頭部

選擇矩形工具,創(chuàng)建如下形狀,我的尺寸設(shè)置是937px X 278px,顏色填充#cdd5a1

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

設(shè)置圖層樣式:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,然后添加一些虛擬的文字(不是真實(shí)的項(xiàng)目么)。我用的是字體 Helvetica script ,14px 大小。然后柵格化文字。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

設(shè)置角度為0和距離為70px。然后添加更多的文字。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,現(xiàn)在的效果是這個(gè)樣子的:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

然后我們選擇一張漂亮的圖片,來(lái)裝飾我們的頭部區(qū)域。保證圖片圖層在我們剛剛創(chuàng)建的圖層上面。好了,你看到的就是下面的效果。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

右鍵點(diǎn)擊圖片圖層,選擇創(chuàng)建剪切蒙版。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

點(diǎn)擊圖層>圖層蒙版>隱藏所有(保證你選擇的圖層是圖片圖層)。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

選擇漸變工具,確定是默認(rèn)顏色設(shè)置(前景白色,背景黑色),按照下圖的標(biāo)記拖拽你的漸變。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

我的效果:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,添加一些陰影。我用的是橢圓工具,在頭部下面創(chuàng)建一個(gè)細(xì)長(zhǎng)的形狀。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

保持這個(gè)形狀被選定,我把這個(gè)圖層命名為陰影。點(diǎn)擊濾鏡>模糊>高斯模糊。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

5.5半徑

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,我們頭部基本上也完成了。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

Step 4 – 創(chuàng)建主要內(nèi)容部分

按照下圖,添加一些文字。采用的是三欄布局。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

選擇矩形工具,創(chuàng)建一個(gè)形狀。這就是我們的主要內(nèi)容區(qū)域。我的尺寸是935px X 504px。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

設(shè)置圖層樣式如下:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

我的效果

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

然后在上面和下面添加一些陰影,用橢圓工具和高斯模糊就可以完成了。添加一些分割線。

現(xiàn)在的效果:

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,添加更多的矢量圖標(biāo)和文字。這是現(xiàn)在的效果。

ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

好了,主要內(nèi)容部分也完成了

Step 5 – 創(chuàng)建底部?jī)?nèi)容

底部?jī)?nèi)容就很容易完成了。放上logo和一些文字就可以了。

最終的效果圖
ps創(chuàng)建常見的網(wǎng)頁(yè)風(fēng)格教程系列一

標(biāo)簽教程,系列,一,風(fēng)格,網(wǎng)頁(yè),創(chuàng)建,常見,photoshop

相關(guān)下載

查看所有評(píng)論+

網(wǎng)友評(píng)論

網(wǎng)友
您的評(píng)論需要經(jīng)過審核才能顯示

熱門閱覽

最新排行

公眾號(hào)

主站蜘蛛池模板: 亚洲精品xxx| 亚洲 [12p]| 欧美日韩高清不卡免费观看 | 宅男毛片 | 国产精品99久久久久久www | 一级做a爱片久久毛片 | 亚洲精品在线播放 | 亚洲精品人成网在线播放影院 | 亚洲情a成黄在线观看 | 92国产福利久久青青草原 | 国产免费一区二区三区 | 91精品视频播放 | 在线毛片观看 | 欧美成人三级网站在线观看 | 国产三级做爰在线观看∵ | 91免费版网站 | 国产精品久久久久久久 | 97一级毛片全部免费播放 | 真实国产普通话对白乱子子伦视频 | 亚洲天堂最新网址 | 日本欧美做爰全免费的视频 | 国产亚洲精品久久久久久无 | xx毛片| 免费看的一级片 | 国产一级一片免费播放视频 | 亚洲精品国产福利一区二区三区 | 最近手机中文字幕1 | 免费一级特黄 欧美大片 | 久青草视频在线 | a欧美视频| 毛片毛片毛是个毛毛片 | 国产不卡a | 一区二区三区四区五区六区 | 特黄特级a级黄毛片免费观看多人 | 国产美女三级做爰 | 性盈盈影院影院 | 日韩精品一区二区三区乱码 | 国产真实搭讪系列 | 亚洲国产成人久久一区久久 | 国产ssss在线观看极品 | 九九久久九九久久 |