個性原創,打造品牌

拒絕模仿抄襲、拒絕模板建站;
多位資深網頁設計師同時設計,讓您優中選優;
網站獨一無二,品牌輕易提升...

了解詳情 >

代碼規范,國際標準

后臺php+mysql動態管理,功能強大,千萬級數據;
前臺div+css生成靜態,代碼精簡,訪問速度快,
符合w3c國際標準,兼容ie/火狐/蘋果等任意瀏覽器...

了解詳情 >

細微高效,全程無憂

域名一個,主機一臺;
主機BGP多線路,5G存儲空間,流量不限;
新聞錄入、圖片處理、數據備份、安全監測、網站升級...

了解詳情 >

移動時代,機不可失

全新視覺、創新操作;
跨平臺兼容,微信無縫對接;
不容錯過的手機網絡商機,不能錯過的手機網站時代...

了解詳情 >

搜索領先,鎖定訪客

在主流搜索引擎的搜索結果中,
網站的名稱,排在第一頁的第一名,
網站其他相關的3-5個關鍵詞,排在第一頁...

了解詳情 >

營銷利器,決勝千里

全國統一呼叫,品牌企業的象標志。
中國電信4008/4009、中國聯通4000/4006,號碼任選;
通話資費預存...

了解詳情 >
以“信”為主的服務理念,“源”為標桿的服務特點351532641點擊咨詢010-86203368聯系電話
CSS問題設計問題程序問題優化問題

Photoshop設計立體風格的網頁上傳窗口教程

發布時間:2017-10-31      瀏覽次數:1099

本教程主要使用Photoshop設計立體風格的圖片上傳對話框,各種各樣的對話框,對于我們來說,太常見了。發微博和在網站上上傳圖片,我們都會遇到圖片上傳的對話框。今天,參考了網上的一個圖片,我們制作了一個超級簡單的圖片上傳對話框。

先看看效果圖

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

我添加了一個紋理素材,創建剪貼蒙版。

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

Photoshop設計立體風格的網頁上傳窗口

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

Photoshop設計立體風格的網頁上傳窗口

我們的最終效果。

Photoshop設計立體風格的網頁上傳窗口

上一篇:如何縮小網站圖片,增加打開速度
下一篇:Photoshop設計WEB游戲網站首頁思路教程

Copyright©2016  xinycx.com  All Rights Reserved  北京信源創想科技有限公司  備案號:京ICP備17071760號
地址:北京市海淀區閔莊路門頭馨村北二區33號樓3單元102室  電話:010-86203368  

北京網站建設 北京網站制作 信源創想 品牌網站建設 企業網站建設 網站設計 APP開發 微信開發 前端切圖 DIV+CSS html5切圖 APP切圖

海南七星彩玩法