當(dāng)前位置:首頁>ps實(shí)例教程>ps制作實(shí)例>背景壁紙>教程內(nèi)容

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景(4)

來源:不詳 作者:不詳 學(xué)習(xí):10232人次

IOS7透明感的UI設(shè)計(jì)大行其道的時(shí)候,別處找來的背景圖總是不能符合自己心中理想的配色,在此,我將教大家利用PS制作出這類超級簡單又能與自己的界面風(fēng)格完全搭配的背景圖。制作此類背景圖的前提是需要一定的色彩理論,當(dāng)然更需要一雙對色彩搭配敏感的眼睛。

最后做出的背景圖如下:

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

具體的制作步驟如下:

一、選擇色彩方案

大家可以參考我曾經(jīng)寫過的教程配色系列(一)——從圖片獲取配色靈感,我在這里選擇了下面這張圖片作為配色方案的靈感來源。因背景色彩對比明顯才能更好襯托出透明感,因此傾向于選擇色調(diào)變化較大、分布較廣的圖片。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

配色方案吸取的顏色為:柿子椒的正紅、青檬皮的深綠、葡萄的淺綠和檸檬黃,另外選擇圖片中的暗色木桌面作為底色,底色發(fā)揮襯托其他色彩的作用,如果你的其他色塊面積大基本上也看不到底色,但能感覺到它。(嘻嘻,是否能理解這種"看不見但能感覺到"的神秘感呢?)

有人也建議直接選用黑或白的底色,但是我認(rèn)為圖片本身對黑白的表現(xiàn)要豐富得多,純黑或純白則過于規(guī)則和保守。

二、制作背景圖

1、新建文件

在這里,我將要制作一個(gè)適應(yīng)手機(jī)屏幕展示的背景圖,因此我的PS文件大小設(shè)定為W:640px,H:1136px,填充背景色為配色方案中的深色——底色。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

2、在背景層之上新建一個(gè)圖層,采用大而柔軟的畫筆筆刷涂上第一種顏色。

這里需要注意的是:

1)涂抹的畫筆后最好一步到位,不要猶豫。因?yàn)檐浶援嫻P上色后,在超出畫板的部分將會(huì)有一條很突兀的邊界,這將不利于你對畫筆著色后的圖層的移動(dòng)等操作。換句話說,大而軟的畫筆使用法則就是一步定位,修改的幾率太小。

2)畫筆大小我在這里選擇的900px,實(shí)際大小根據(jù)你的文件畫板大小和實(shí)際需要而確定。

3)畫筆的透明度降低為70%,這會(huì)使不同的顏色間實(shí)現(xiàn)真正的"融合"。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

3、再繼續(xù)創(chuàng)建新的圖層,涂抹上另外幾種顏色。色彩的分布隨自己的喜好。但注意每一種顏色最好新建一個(gè)圖層,重命名不同的圖層,可以方便今后修改和調(diào)整。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

4、將紅黃綠的色彩圖層合并為一個(gè)圖層,將這整個(gè)圖層做一次變形。(ctrl+T>鼠標(biāo)右鍵單擊>變形)變形的目的是為了讓你的色彩融合得更自然,不再是一個(gè)個(gè)圓形拼湊起來的樣子,而能呈現(xiàn)出一種流動(dòng)感。這時(shí),你將運(yùn)用圖形中的操作桿任意變化出你喜歡的圖案。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

5、這時(shí),也許對你而言這張圖片比較暗,那么你可以通過調(diào)整色階來實(shí)現(xiàn)提亮和加強(qiáng)圖片色彩的對比。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

6、進(jìn)一步修飾,這類修飾是隨性的。根據(jù)你自己的期望,可以使用諸如橡皮擦、調(diào)整圖層進(jìn)一步將圖片變?yōu)槟阆胍慕Y(jié)果。

7、最后,為使你的圖片顏色顯得更為豐富,你可以復(fù)制色彩圖層,將復(fù)制后的圖層混合模式改為"柔光"或"疊加"。并適當(dāng)調(diào)整它的透明度。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

三、將背景圖投入使用

有很多方式可以做出這樣的圖片,但對我來說這是最簡單的一種方式。請記得,這其中最重要是獲得創(chuàng)作的樂趣。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

這是投入項(xiàng)目實(shí)際使用后的效果,在背景圖上使用的色塊和線條都需要降低一點(diǎn)透明度。相信大家按照這個(gè)方法可以做出更出色的作品。

簡單背景,ps設(shè)計(jì)IOS風(fēng)格炫彩背景

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
劉文杰2015-12-04 02:09
iOS漸變背景學(xué)http://www.theoat.com.cn/photoshop/jiaocheng/2015/136942.html140723f8kbx8yz6h5k5h0b.jpg

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

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