ps設(shè)計(jì)心形網(wǎng)頁(yè)模板教程(8)

來(lái)源:站酷 作者:wangyufeng_888  學(xué)習(xí):4856人次

在本教程中,你將學(xué)習(xí)如何創(chuàng)建一個(gè)Fancy的設(shè)計(jì)工作室網(wǎng)頁(yè)布局。像往常一樣,希望通過(guò)實(shí)例教程傳遞布局構(gòu)架理念,不只是在告訴大家網(wǎng)站是如何一點(diǎn)點(diǎn)設(shè)計(jì)出來(lái)的。所以希望看到靈活應(yīng)用的更多擴(kuò)展版本。期待你的創(chuàng)新。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

1、首先,你需要下載以下兩個(gè)素材圖片。

用PS打開(kāi)第一張圖片,然后點(diǎn)擊 編輯>定義圖案。選擇這種模式的名稱,然后就可以關(guān)閉這個(gè)文件了。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

2、這是第二張圖片。請(qǐng)下載原始尺寸圖片,或者在下載壓縮包里找到它。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

3、創(chuàng)建新文件,Size:1100*1260px。

選擇油漆桶工具,選擇圖案模式,找到剛設(shè)置的素材圖片,點(diǎn)擊背景層,你將看到畫(huà)布有了想要的紋理。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

4、在頁(yè)面布局的底部,填入第二張圖片,命名該圖層為“bottom”,設(shè)置圖層模式為正片疊底。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

5、Copy第二張圖片得到“bottom副本”,移動(dòng)到頁(yè)面中上部位置。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

6、接下來(lái)制作導(dǎo)航。使用圓角矩形工具,設(shè)置半徑為15px,Size:940*99px。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

7、對(duì)該圓角矩形使用下面的圖層樣式。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

8、使用直線工具畫(huà)一些垂直的線。我使用下列顏色進(jìn)行填充 #5e5a59。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

9、然后使用矩形工具,繪制一個(gè)簡(jiǎn)單形狀,加入較深的顏色。這個(gè)形狀用于按鈕事件。當(dāng)你用鼠標(biāo)滑動(dòng)時(shí)就可以從頁(yè)面上看到它的變化,當(dāng)然有程序員配合時(shí),它可以用CSS實(shí)現(xiàn),同樣非常的棒!

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

10、想導(dǎo)航區(qū)域加入一些文字。

個(gè)人感覺(jué)比較喜歡這樣的導(dǎo)航樣式,寬敞的高度布局,融入了主副標(biāo)題的設(shè)計(jì),注意小號(hào)字不是二級(jí)導(dǎo)航,而是用一些簡(jiǎn)單的詞語(yǔ)概括每個(gè)一級(jí)導(dǎo)航是什么。類似擴(kuò)展說(shuō)明。比較有新意。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

11、然后,要使用鉛筆工具繪制一些箭頭。當(dāng)使用鉛筆工具時(shí),可以設(shè)置1px的畫(huà)筆筆尖。你可以看到,白色像素箭頭下,同時(shí)橢圓工具創(chuàng)建了一個(gè)圓形底框。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

12、在導(dǎo)航下方創(chuàng)建一個(gè)較大的圓角矩形,用于放置幻燈片式的圖片動(dòng)畫(huà)翻滾區(qū)域。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

13、為banner的動(dòng)畫(huà)區(qū)域添加操作按鈕,這里使用與導(dǎo)航相同的箭頭樣式。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

14、在banner矩形下方,使用橢圓工具添加一個(gè)黑色的形狀,如下圖。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

15、然后使用濾鏡>模糊>高斯模糊。設(shè)置8-10px為半徑。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

16、然后使用編輯>變換>扭曲,設(shè)置如下圖。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

17、下一步是在橙色鉛筆。并用圓角矩形工具畫(huà)一個(gè)橙色的形狀,加入文字信息。

英文原教程是給了一個(gè)下載矢量素材的網(wǎng)站,不過(guò)可惜這個(gè)網(wǎng)站不復(fù)存在,用了代理翻墻也沒(méi)找到這個(gè)網(wǎng)站,所以只能用位圖代替。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

18、繼續(xù)創(chuàng)建一個(gè)簡(jiǎn)單的橙色按鈕。這個(gè)按鈕要非常明顯,它會(huì)增加你的轉(zhuǎn)換。換成你網(wǎng)站熱點(diǎn)的關(guān)鍵詞,醒目的Button可以贏得更多的點(diǎn)擊。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

19、繼續(xù)向頁(yè)面加入一些圖標(biāo)和文字,注意icon效果和文字布局。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

20、圖標(biāo)的圖層樣式參數(shù)如下。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

21、下一步是創(chuàng)建一個(gè)Logo。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

22、最后,你可以看到最終結(jié)果。

Photoshop設(shè)計(jì)國(guó)外心形網(wǎng)頁(yè)設(shè)計(jì)模板教程

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!