當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁圖片>教程內(nèi)容

ps設(shè)計半透明的網(wǎng)站商品介紹頁

來源:站酷 作者:教程盒子 學(xué)習(xí):5331人次

在所有電子商務(wù)網(wǎng)站,定價表中起著非常重要的作用。通過精心設(shè)計,可以讓來網(wǎng)站的布局、顏色和字體更加完美,使你的網(wǎng)站能最大程度地吸引潛在客戶。一個粗制濫造的設(shè)計將會讓你失去你的客戶,但是一個好的設(shè)計將帶給你更多的客戶。如果你的定價表不夠明確或者覺得不夠凸顯,客戶可能不會接受你的任何產(chǎn)品。讓你的客戶感覺你的定價表需要明確和一致的?蛻粜枰軌蜓杆俚乇容^你的每個產(chǎn)品的價格優(yōu)勢等不同的信息。所以,今天我們要利用photoshop打造一個明確的定價表。我們將使用不同的紋理、效果和混合技術(shù)來實現(xiàn)一個“透明的玻璃”的方法。

教程用到的素材:

織物紋理(http://brushsoulz.com/8-tileable-fabric-texture-patterns)

粗糙的紋理(http://brushsoulz.com/tileable-midnight-blue-grunge-patterns)

背景圖像(http://black-moon16.deviantart.com/gallery/#/d1mnhsb)

現(xiàn)在,在我們開始之前,讓我們看看我們的最終產(chǎn)品:

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟1:

打開Photoshop創(chuàng)建一個寬度:700 px 高度: 800 px的新文件。

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟2:

現(xiàn)在,打開背景圖像,并將其粘貼到我們新建的Photoshop文件中。

然后點擊“濾鏡”>“模糊”>“高斯模糊。“你也可以通過使用“圖像”>“調(diào)整”>“亮度/對比度。”

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟3:

選擇矩形工具, 使用顏色值為# ffffff創(chuàng)建一個矩形。

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟4:

改變其混合模式為“柔光”和降低填充和不透明度到90%。

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟5:

選中矩形圖層,打開“圖層樣式”窗口。并應(yīng)用下列圖層樣式設(shè)置:

描邊:大小1px, 不透明度40%; 其余設(shè)置不變 顏色:#ffffff

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

內(nèi)陰影:

混合模式:線性減淡(添加)

顏色:#FFFFFF

不透明度:22%

距離:5px

大。51px

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

外發(fā)光:

混合模式:疊加

不透明度:75%

顏色:#FFF;

(從下面的開始將不再詳細(xì)翻譯,相信讀者都應(yīng)該能看懂!如果不懂就百度谷歌,實在不行可以聯(lián)系我!教程盒子)

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

步驟6:

選擇矩形工具,創(chuàng)建一個小矩形。降低層的透明度到30%。

Photoshop設(shè)計透明質(zhì)感的產(chǎn)品介紹頁面,PS教程,16xx8.com教程網(wǎng)

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

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

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

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