網頁設計中如何用photoshop設計立體風格的教程

非常感謝朋友們長期以來的支持，這期間給大家分享了不少的案例和基礎知識，想必大家更想知道更具有技術含量的案例，那么我接下來會給大家分享一些關于網頁設計方面的知識內容，希望大家能夠喜歡，本期我們主要使用Photoshop設計立體風格的圖片上傳對話框，各種各樣的對話框，對于我們來說，太常見了。發微博和在網站上上傳圖片，我們都會遇到圖片上傳的對話框。今天，參考了網上的一個圖片，我們制作了一個超級簡單的圖片上傳對話框。先看看效果圖

首先，這里做了一個簡單的背景，相信這么簡單的背景大家都很熟悉了。

畫一個圓角矩形框框，添加圖層樣式。(框框的顏色無所謂，等會我們并不會用到)

添加一個紋理素材，創建剪貼蒙版。

顏色不大好，我們創建了一個色相/飽和度調整層，一樣的剪貼蒙版。

以剪貼蒙版形式，創建一個曲線調整層，參數如下：

添加文本和右側的關閉按紐，我用的是白色，關閉按紐沒什么難度吧，兩個矩形來構成。

用直線工具，畫一條直線，顏色我設置的是#121415，添加一個投影樣式。添加文本和圖像，圖像我有做了一個近背景色的1像素描邊。

接下來，用圓角矩形工具來畫一個進度條，顏色為#121415，添加一個投影樣式。

接下來做進度的呈現，這個不用多說吧，復制一層剛才的進度條，清除掉圖層樣式，用矩形減去一段就OK了，添加一個漸變疊加。

下面，做進度框，一個矩形，加一個三角形，然后跟疊加一個跟剛才進度一樣的漸變。

添加進度的文本75%，然后添加一個投影樣式。

添加右側的關閉按紐，以及垃圾桶按紐，簡單的布爾運算就可以搞定了。

在右下側畫一個圓角矩形，添加圖層樣式。

添加加號圖標按紐和文本，添加一個投影樣式。

添加右側的取消上傳按紐，跟前面一步是一樣的，改變的只是漸變顏色而已。

完成最終效果

分享標題：網頁設計中如何用photoshop設計立體風格的教程
轉載源于：http://m.kartarina.com/news/101273.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、網站設計、電子商務、品牌網站建設、標簽優化、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯