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

首先，這里做了一個(gè)簡(jiǎn)單的背景，相信這么簡(jiǎn)單的背景大家都很熟悉了。

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

添加一個(gè)紋理素材，創(chuàng)建剪貼蒙版。

顏色不大好，我們創(chuàng)建了一個(gè)色相/飽和度調(diào)整層，一樣的剪貼蒙版。

以剪貼蒙版形式，創(chuàng)建一個(gè)曲線調(diào)整層，參數(shù)如下：

添加文本和右側(cè)的關(guān)閉按紐，我用的是白色，關(guān)閉按紐沒什么難度吧，兩個(gè)矩形來構(gòu)成。

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

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

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

下面，做進(jìn)度框，一個(gè)矩形，加一個(gè)三角形，然后跟疊加一個(gè)跟剛才進(jìn)度一樣的漸變。

添加進(jìn)度的文本75%，然后添加一個(gè)投影樣式。

添加右側(cè)的關(guān)閉按紐，以及垃圾桶按紐，簡(jiǎn)單的布爾運(yùn)算就可以搞定了。

在右下側(cè)畫一個(gè)圓角矩形，添加圖層樣式。

添加加號(hào)圖標(biāo)按紐和文本，添加一個(gè)投影樣式。

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

完成最終效果

網(wǎng)站欄目：網(wǎng)頁設(shè)計(jì)中如何用photoshop設(shè)計(jì)立體風(fēng)格的教程
URL地址：http://www.rwnh.cn/news23/101273.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)