|
某些具體的事物組合在一起也可以表達(dá)一個(gè)明確的主題。
例如
這些素材組合在一起讓你聯(lián)想到了什么。
沒錯(cuò)就是“圣誕節(jié)”。例如下面這個(gè)例子：
優(yōu)秀的素材是設(shè)計(jì)稿的靈魂。設(shè)計(jì)師將眾多素材合適的組合在了一起。即使不用一個(gè)文字，所有的素材也都在共同的訴說這一個(gè)主題——圣誕節(jié)所以做專題的時(shí)候要注意選擇合適的素材：
來看看這個(gè)新年的專題。這個(gè)頁面用的素材很多，但是再多的素材也都是一個(gè)調(diào)調(diào)。例如地面的積雪，遠(yuǎn)處的松樹，還有女孩手上的燈籠，質(zhì)感都是相近的。如果這個(gè)時(shí)候頁面加進(jìn)來一個(gè)右下角那個(gè)圣誕老人呢？這個(gè)圣誕老人的質(zhì)感過于卡通，過于平面化，跟頁面的其他素材質(zhì)感嚴(yán)重不符。所以選素材的時(shí)候應(yīng)該回避這類素材。
再來看這個(gè)頁面。這個(gè)頁面中板凳，油漆桶文具都是很寫實(shí)的素材，在這個(gè)頁面里素材的質(zhì)感統(tǒng)一為寫實(shí)類。所以像下面那個(gè)卡通babe的素材是不適合的。
以CP設(shè)計(jì)的的這個(gè)奧運(yùn)專題為例分析專題設(shè)計(jì)中常遇到的一些問題。
這個(gè)頁面存在的問題很多，我們來一個(gè)個(gè)分析。首先第一個(gè)問題首屏高度：分析一下常見分辨率及瀏覽器下高度數(shù)據(jù)：
在windowXP常見分辨率1024×768下我們除掉任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁首屏高度平均值是584。
Win7下是574。在windowXP常見分辨率1440×900下我們除掉任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁首屏高度平均值是716。Win7下是706。
綜合上面表中個(gè)分辨率及瀏覽器下的統(tǒng)計(jì)數(shù)據(jù)，我們很容易畫出兩條首屏線，分別是580PX和710PX，對應(yīng)不同的分辨率。
再來看下不同分辨率用戶的占比情況：
通過對大于30W臺客戶端用戶進(jìn)行測試，得到的測試數(shù)據(jù)如下：
首屏高度低于等于580的有116786個(gè)人，占44.64%；
首屏高度低于等于720的有216227個(gè)人，占82.64%；
首屏高度低于等于800的有241420個(gè)人，占92.27%；
首屏高度低于等于900的有259174個(gè)人，占99.06%；
即當(dāng)首屏高度大于580時(shí)有44.64的人看不到；大于720時(shí)有82.64%的人看不到；大于800時(shí)有92.27%的人看不到。我們將這個(gè)數(shù)據(jù)轉(zhuǎn)化成3條線直觀的顯示在專題頁面上：
總結(jié)起來就是注意首屏高度。建議將最主要的信息顯示在580PX高度的范圍以內(nèi)讓用戶打開網(wǎng)頁第一屏就可以直接看到不用向下滾動這個(gè)第二個(gè)專題的第二個(gè)問題：標(biāo)題夠顯眼么？
檢驗(yàn)一個(gè)專題頭圖標(biāo)題是否夠顯眼其中的一個(gè)方法就是將網(wǎng)頁去色，站在遠(yuǎn)處看看標(biāo)題是否還看得清。我們有這個(gè)方法來檢驗(yàn)一下這個(gè)專題：
是不是就可以看出頭圖文字跟背景混在一起不夠清晰。
我們再來看一下正面的例子。
專題的主文字傳達(dá)的是頁面最主要信息，需要足夠醒目，所以要有整個(gè)頁面最大的對比度
去色檢驗(yàn)后的效果。去色后主文字總是有最大的明暗對比,并且最主要信息始終保持在第一屏內(nèi)顯示完全.正面例子二：
深色的底上面可以選用淺色亮色的文字，反之，淺色的底上可以選用深色的文字以獲得最大的對比
去色后title總是有最大的明暗對比，并且最主要信息始終保持在第一屏內(nèi)顯示完全總結(jié)上面說的注意的第二點(diǎn)：Title是頁面的視覺焦點(diǎn)要足夠顯眼大?。褐鞔萎嬅鎸Ρ龋苊馔w平均明暗：看看去色后設(shè)計(jì)稿的樣子是否還足夠顯眼。
再來看看看奧運(yùn)專題設(shè)計(jì)稿的第三個(gè)問題：他們的光環(huán)境一致么？
最左邊張學(xué)友臉色發(fā)白皮膚呈棕色。左邊第二個(gè)莫文蔚應(yīng)該是在室內(nèi)拍的照片，皮膚呈暖色光源在頂部。中間的王力宏光源在右側(cè)，并且用交明顯的陰影，猜測在室外拍的照片。右邊第二個(gè)張靚穎她的照片光源在左側(cè)暖色調(diào)。最右邊變林宥嘉照片光源在左側(cè)。五個(gè)人有五種不同的光照效果，光環(huán)境在這個(gè)頁面很混亂。
來對比看看正面的例子：
作者把幾個(gè)人物素材的光環(huán)境調(diào)整到了一致。就好像他們本身就是站在一起一樣。再看這個(gè)游戲?qū)ｎ}的例子。在頁面中人物左側(cè)的黃色高光部分跟頁面左上角撒下的光輝對應(yīng)，造成真實(shí)的融入感
光運(yùn)用的實(shí)際例子
原圖是張很普通的照片，由于逆光臉部偏暗。于是給他疊加了三個(gè)圖層。一個(gè)頂部的白光提亮整體。左側(cè)的藍(lán)光和右側(cè)的紅光，讓人物與背景更加融合。調(diào)整了光的頁面整體效果好了很多。
總結(jié)第三點(diǎn)就是掌控你頁面里的光。色溫色調(diào)：所有素材（色彩）都會被周圍環(huán)境光影響，用的時(shí)候注意調(diào)整統(tǒng)一。光照：注意主光源（環(huán)境光）的類型，位置。契合頁面環(huán)境。
再看這個(gè)頁面的第四個(gè)問題，摳圖有毛邊。
不論你頁面設(shè)計(jì)的多么有創(chuàng)意多么好，一旦摳圖不干凈，有毛邊頁面檔次一下就下去了。猜測設(shè)計(jì)人員做的時(shí)候應(yīng)該是用的魔術(shù)棒摳圖的。魔術(shù)棒雖然好用摳圖很快，但是魔術(shù)棒摳出來的容易留下毛邊。
摳圖方法很多，各人有各人的習(xí)慣。在這里分享一下我自己的摳圖方法。不一定是最快的，但是這個(gè)方法摳出來的還算干凈。我習(xí)慣用橡皮擦工具摳圖。
用橡皮擦擦除的邊緣，沒有鋸齒有半透明的過渡
在擦除時(shí)候的一些小技巧。擦除的時(shí)候可以放大畫布，調(diào)整合適的畫筆大小。按住shift可以擦連續(xù)的區(qū)域。
對于對于凹進(jìn)去不好擦的區(qū)域可以借助快速蒙板來擦除。例如王力宏肘那里。點(diǎn)快速蒙版，進(jìn)入快速蒙版的的編輯模式。選擇“所選區(qū)域”然后用畫筆在需要擦除的區(qū)域涂抹，再用橡皮擦擦除多余的部分退出快速蒙版，剩下的紅色部分就能生成一個(gè)選區(qū)。最后點(diǎn)刪除就能得到需要擦除的圖。
有時(shí)候需要給人物扣頭發(fā)，很頭疼。這里順便分享一下如何摳頭發(fā)拿年輕時(shí)候的乖乖虎蘇有朋的照片做例子。
復(fù)制一個(gè)圖層，然后選擇–色彩范圍，選頭發(fā)的黑色顏色容差調(diào)到150左右。點(diǎn)確定然后反選刪除。就能夠得到這樣一個(gè)頭發(fā)的圖層。
用橡皮擦擦掉圖層1的頭發(fā)部分。合并兩個(gè)圖層。人物的頭發(fā)就摳出來了。
總結(jié)下這部分的所說的內(nèi)容：摳圖拒絕毛邊橡皮擦摳圖：按住SHIFT可以擦一條直線的區(qū)域，配合快速蒙版擦角落摳頭發(fā)：巧妙利用選擇色彩范圍摳頭發(fā)。再來看這個(gè)專題，這個(gè)專題問題很多但是最突出的問題還是“亂”。內(nèi)容多，而且沒有條理，不知道該看哪里，不知道什么才是這個(gè)頁面的重點(diǎn)。
再看看正面的例子，對個(gè)頁面條理重新梳理后調(diào)整的頁面。
同樣的內(nèi)容，梳理后的頁面條理會清楚很多，頁面內(nèi)容有正確的視覺引導(dǎo)更有主次，用戶能更容易的“掃描”頁面的信息。
最后我們再來看舌尖上的中國這個(gè)專題：
這個(gè)專題最突出的問題是素材的選材不當(dāng)。
分析下這個(gè)頁面的選材。木板、紙張、云、以及食物對主題氛圍的烘托也顯得有些不足。并且木板和木板上的碗給人的感覺是俯視，但是云給人的感覺是仰視天空的感覺。兩者放在一起很沖突。
那么接下來我們就說下做專題時(shí)候怎樣選擇合適的素材。以“舌尖上的中國”為例：
我們先將“舌尖上的中國”提取關(guān)鍵字“舌尖”、“中國”。舌尖讓我們聯(lián)想到什么呢？有美食、餐具、,等等。中國讓我們聯(lián)想到什么呢？功夫、水墨、剪紙、龍、國畫，等等。像這樣就可以把一個(gè)抽象的概念逐級具體化，然后從具體化的事物中選擇合適的作為你需要的素材，來表達(dá)抽象的概念。
這是舌尖上的中國的節(jié)目的片頭截圖，是不是應(yīng)正了之前的分析，水墨、食物、國畫、餐具。
總結(jié)前面說的：選擇合適的素材優(yōu)秀的素材是靈魂，平庸的素材只是裝飾
找素材要保證素材能對表達(dá)的氛圍有幫助能恰當(dāng)表意；
要保證頁面上的素材風(fēng)格一致，都是一個(gè)調(diào)調(diào)；
|
