快速制作專題！利用顏色查找快速制造大感覺(jué)

@strongshuai （騰訊TGideas設(shè)計(jì)師）當(dāng)接到一個(gè)緊急需求的時(shí)候，設(shè)計(jì)師腦子里一定在抱怨不爽了。因?yàn)樵O(shè)計(jì)要用"趕出來(lái)"的話，是很難有優(yōu)秀的作品的。但有時(shí)候不得不面對(duì)現(xiàn)實(shí)，需求方急著要，我們也只能加快速度設(shè)計(jì)。把腦子里有的設(shè)計(jì)形式全都翻出來(lái)，全用在頁(yè)面上。

有時(shí)候可能會(huì)有意想不到的結(jié)果！有時(shí)候又會(huì)出現(xiàn)那種連自己都不愿意承認(rèn)是自己做的尷尬處境。

這種快速設(shè)計(jì)沒(méi)有經(jīng)過(guò)前期的精細(xì)推敲，總有站不住腳的地方，但是時(shí)間有限，能達(dá)到一眼望去，讓各位爺能心里感嘆一聲"哇"，就已經(jīng)謝天謝地啦！！

快速設(shè)計(jì)專題有很多種方法，這里只是給大家提供其中的一個(gè)小思路，并不一定適用每一個(gè)專題，如果在你緊急的情況下，不妨試試這個(gè)。

還有哪些方法呢？來(lái)閱讀這兩篇就知道咯
如何快速打造節(jié)日專題頁(yè)設(shè)計(jì)
推薦：教你快速搭建節(jié)日促銷專題頁(yè)

今天收到了一個(gè)交互稿，如下。是一個(gè)在圣誕節(jié)的日子里賣皮膚也送皮膚的營(yíng)銷類型專題，并強(qiáng)調(diào)要使用"冰原狙擊 凱特琳"這張?jiān)?huà)進(jìn)行設(shè)計(jì)。

第一：觀察交互稿，并進(jìn)行簡(jiǎn)單的交互稿梳理

游戲類的專題，一般沒(méi)有專門(mén)的交互設(shè)計(jì)師給你去設(shè)計(jì)交互稿，所以拿到交互后，就需要對(duì)交互進(jìn)行一遍"審查"，把不明白的地方和接口人對(duì)一遍。

比如這張交互上，標(biāo)題有3列，"冰原獻(xiàn)禮""限定皮膚3送1起""冰原狙擊凱特琳 首戰(zhàn)正義之地 "這些是出現(xiàn)在頭部的文字，一般都屬于最重要的信息傳遞。

所以要特別詳細(xì)的問(wèn)接口人，這些文字都是什么意思，是不是已經(jīng)完全確定采用這些字（因?yàn)楹竺嬉獙?duì)這些文字進(jìn)行設(shè)計(jì)，如果后面再要修改，就會(huì)浪費(fèi)很多時(shí)間）

又比如：上面四條"獻(xiàn)禮1、2、3、4"是什么意思，放在這里有什么用。等等。

總結(jié)來(lái)說(shuō)，拿到交互后，一定要對(duì)交互的內(nèi)容進(jìn)行梳理，分析出內(nèi)容的主次（對(duì)你后面的設(shè)計(jì)特別重要）

第二：平鋪交互內(nèi)容

由于屬于快速專題，并且強(qiáng)調(diào)要使用"冰原狙擊 凱特琳"這張?jiān)?huà)進(jìn)行設(shè)計(jì)

所以接下來(lái)，就直接先把規(guī)定使用的原畫(huà)擺上去。（這張?jiān)?huà)由于"年代久遠(yuǎn)"，并沒(méi)有后面英雄聯(lián)盟的新原畫(huà)那么厲害的細(xì)節(jié)和色彩，所以后期需要彌補(bǔ)這個(gè)問(wèn)題。）

1：這里首先對(duì)背景進(jìn)行拼湊，把位置大概放好。

2：接下來(lái)把背景進(jìn)行過(guò)渡、融合，這里建議把內(nèi)容轉(zhuǎn)換為"智能對(duì)象"后，用高斯模糊濾鏡再添加蒙板來(lái)進(jìn)行局部涂抹，達(dá)到一個(gè)簡(jiǎn)單的預(yù)期效果，讓畫(huà)面看起來(lái)過(guò)渡和諧，沒(méi)有生硬的地方。

3：然后，就把交互稿里的內(nèi)容全部平鋪在設(shè)計(jì)稿上，讓自己對(duì)整個(gè)網(wǎng)頁(yè)的內(nèi)容有個(gè)了解，并且明白內(nèi)容的區(qū)塊劃分。

第三：在設(shè)計(jì)稿上分出主次

接下來(lái)就要對(duì)我們的交互進(jìn)行主次的劃分了。注意：這一步特別重要。這影響你接下來(lái)的設(shè)計(jì)重點(diǎn)將花在哪一塊。

1：首先我們說(shuō)標(biāo)題，標(biāo)題有"冰原獻(xiàn)禮""限定皮膚3送1起""冰原狙擊凱特琳 首戰(zhàn)正義之地"，先自己進(jìn)行簡(jiǎn)單的分析，"冰原獻(xiàn)禮"這個(gè)意義不大，只是賦予了這個(gè)專題一個(gè)名字，因?yàn)槭强焖賹ｎ}，所以不需要對(duì)他進(jìn)行過(guò)多的設(shè)計(jì)。"冰原狙擊凱特琳 首戰(zhàn)正義之地"這是活動(dòng)的slogan，對(duì)活動(dòng)也沒(méi)有很大的意義，所以也沒(méi)有必要花時(shí)間設(shè)計(jì)。

個(gè)人認(rèn)為最有效的信息是"限定皮膚3送1起"，最能吸引玩家眼球的就是他，有「限定皮膚、送」這些字眼，這明擺著就是勾引用戶嘛，所以我選擇把這塊文字進(jìn)行放大，吸引用戶的眼球！也讓頭部的文字有的大小對(duì)比，有了簡(jiǎn)單的形式感。

2：然后是活動(dòng)時(shí)間，這也是一個(gè)很重要的傳遞的信息，所以也需要很明顯的展示，但又不能很搶眼。一般都放在標(biāo)題的上方或下方

3：接下來(lái)是第一部分內(nèi)容，"四重獻(xiàn)禮"，交互稿上有四條信息"獻(xiàn)禮1、獻(xiàn)禮2、獻(xiàn)禮3、獻(xiàn)禮4"，通過(guò)和接口溝通后，這四條信息是下面四個(gè)皮膚的領(lǐng)取條件，而下面四個(gè)皮膚也是這個(gè)專題的主角--要送的皮膚，所以我們也確定了這一塊內(nèi)容在整個(gè)頁(yè)面的重要關(guān)系。那么為了和下面售賣的皮膚有區(qū)分，這四個(gè)皮膚的區(qū)域我采用了「圓形」來(lái)進(jìn)行區(qū)分和強(qiáng)調(diào)！并且把四條領(lǐng)取信息梳理在了應(yīng)該出現(xiàn)的位置，領(lǐng)取按鈕的下面。

4：最后專題下方的"指定冰雪節(jié)限定皮膚"售賣區(qū)，這個(gè)從交互上看沒(méi)有什么問(wèn)題，所以我們就不用再此糾結(jié)。

p.s.在每一次對(duì)一個(gè)區(qū)塊進(jìn)行主次分析后，最好和接口人對(duì)一遍，以免你的判斷出錯(cuò)，到最后白費(fèi)功夫。最后確認(rèn)你的分析是正確的之后，就可以開(kāi)始進(jìn)行視覺(jué)設(shè)計(jì)啦。

第四：利用"顏色查找"制造大感覺(jué)

接下來(lái)就是今天要說(shuō)的"顏色查找"功能，這個(gè)功能之前在"優(yōu)設(shè)網(wǎng)"上有個(gè)介紹《PHOTOSHOP CS6鮮為人知的一個(gè)調(diào)色功能》，大家可以先看一下。

查找顏色是一個(gè)調(diào)整圖層，他的位置可以查看上圖，

添加了顏色查找以后，在顏色查找的面板里找到3DLUT文件，下拉就可以看到很多自帶的特效樣式，可以一個(gè)一個(gè)嘗試。

本文附件提供由 @良知塾TaoStudio 提供的更多 查找顏色 樣式下載

這個(gè)功能用了之后會(huì)立刻給頁(yè)面制造一些電影級(jí)別的色調(diào)，有冷的，有暖的，詭異的，小清新的，在經(jīng)過(guò)鼠標(biāo)滾輪的一番滾動(dòng)后，總有幾個(gè)顏色會(huì)讓你靈光一現(xiàn)，如果沒(méi)有，那你只能繞道而行，換其他的方法了。

顏色查找效果一

顏色查找效果二

顏色查找效果三

顏色查找效果四

顏色查找 效果五

顏色查找 效果六

上面這些步驟就是不斷嘗試樣式 ，還有更多！

因?yàn)檫@個(gè)專題是冰原獻(xiàn)禮，所以第一感覺(jué)想到的是冷、雪、藍(lán)色、白色，這些關(guān)鍵詞蹦出來(lái)。所以在經(jīng)過(guò)"顏色查找"的嘗試后，找到了自己滿意的一個(gè)效果，就是上圖 顏色查找效果六 這個(gè)藍(lán)色的效果。

選好這個(gè)藍(lán)色后，發(fā)現(xiàn)頁(yè)面太冷了，冷的讓人沒(méi)有欲望進(jìn)行操作，所以在頭部的光源處打一個(gè)暖色的光芒，冬日里的陽(yáng)光，立刻暖起來(lái)了，有木有。

第五：分清主次進(jìn)行內(nèi)容刻畫(huà)。

這個(gè)時(shí)候畫(huà)面的顏色已經(jīng)是差不多了，有大調(diào)子，有冷暖對(duì)比。接下來(lái)就是要對(duì)內(nèi)容進(jìn)行設(shè)計(jì)了。

1：首先給標(biāo)題挑一個(gè)和諧的顏色，并且選擇一款看的順眼的字體！（標(biāo)題放在光源的后面）然后繼續(xù)調(diào)整文字的排版。

2：對(duì)頁(yè)面中的主要區(qū)域進(jìn)行刻畫(huà)，并且強(qiáng)調(diào)區(qū)塊的標(biāo)題。因?yàn)槭鞘フQ節(jié)出的專題，這四個(gè)皮膚又是主角，所以下功夫好好刻畫(huà)一下吧，畫(huà)出來(lái)，后面三個(gè)重復(fù)利用。

3：限定冰雪節(jié)皮膚售賣區(qū)域，因?yàn)橹鞔侮P(guān)系比上面的"四重獻(xiàn)禮"相對(duì)弱一點(diǎn)，但也是重要的營(yíng)銷區(qū)域，所以也不能對(duì)這里有怠慢，依然是刻畫(huà)皮膚的框，但不要比上面"四重獻(xiàn)禮"的框精致，畫(huà)一個(gè)就好，后面的重復(fù)利用。

4：最后是活動(dòng)說(shuō)明，這里其實(shí)也是考驗(yàn)設(shè)計(jì)師有沒(méi)有花心思的地方，將重要的信息用高亮的顏色標(biāo)出來(lái)，會(huì)更利于用戶的閱讀。

第六：刻畫(huà)專題的細(xì)節(jié)

完成第五步后，作為一個(gè)快速專題差不多是"完成了"，要是覺(jué)得還不錯(cuò)的話，其實(shí)已經(jīng)可以交稿了，但如果你還想繼續(xù)做下去，那就刻畫(huà)吧。

1：標(biāo)題增加紋理，投影等等看著舒服的樣式。

2：增加雪堆積的效果。（如果時(shí)間充裕，最好每個(gè)重復(fù)的區(qū)域堆積的雪不一樣）

3：頁(yè)面添加飄雪（主要給專題添加氣氛，并且制造空間感。）之后還會(huì)出一個(gè)快速制造有空間感的飄絮物教程

4：增加太陽(yáng)光源射線，不用太明顯，一點(diǎn)點(diǎn)就好（對(duì)畫(huà)面空間感也有幫助）

5：繼續(xù)潤(rùn)色，加強(qiáng)頁(yè)面冷暖對(duì)比。（潤(rùn)色有很多方法，如本期介紹的"顏色查找"，可以在后期潤(rùn)色的時(shí)候反復(fù)使用，不過(guò)這樣會(huì)增大你的PSD容量，不過(guò)為了美無(wú)所謂拉！，還有調(diào)整圖層里的"可選顏色""色彩平衡""對(duì)比度"等等，不要吝嗇使用這些調(diào)整圖層，他能在專題收尾潤(rùn)色的時(shí)候，給專題帶來(lái)畫(huà)龍點(diǎn)睛的效果。）

6：繼續(xù)加強(qiáng)頁(yè)面冷暖，加強(qiáng)飽和度，對(duì)比度，刻畫(huà)雪的細(xì)節(jié)，至此頁(yè)面設(shè)計(jì)完成，開(kāi)心的交稿去吧。

結(jié)語(yǔ)：

這次介紹的快速專題制作技巧，主要是前期利用"顏色查找"制造大感覺(jué)，營(yíng)造出頁(yè)面初期的大氣氛，制定了一個(gè)方向，不至于走彎路。但這個(gè)方法不一定適合每個(gè)專題，你可以搜集這些技巧，在你遇到緊急需求的時(shí)候去嘗試使用。

附件里有透明的素材人物和背景圖層，如果有興趣的兄弟可以嘗試此教程。微盤(pán)下載

「顏色查找」在《PHOTOSHOP CS6鮮為人知的一個(gè)調(diào)色功能》有李濤老師很詳細(xì)的介紹，在這篇《PHOTOSHOP CS6新功能"顏色查找"的更多福利》還提供了超多的LTU文件下載，教大家怎么直接看到效果，強(qiáng)烈推薦同學(xué)們?nèi)W(xué)習(xí)一下，能給工作帶來(lái)很多方便。

原文地址：zcool
作者微博：strongshuai
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量61萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：