網頁首圖的設計技巧
一、雙色冰淇淋漸變
首圖當作全屏出血大圖處理時,你可以將圖片調色成爲雙色漸變,有點像我們吃的雙色冰淇淋球,選一組你認爲能激發心理氛圍的配色,最好是對比色,帶來強烈的視覺落差。由於要作爲背景而存在,整體的色彩明度要區別於文字的顏色。這裏推薦的這一方式只需要利用PS中的“漸變映射”工具,就能輕鬆獲得。
上圖所示的設計中,我們不僅採用了這種雙色映射,還利用線條創造了視覺焦點,引導了用戶的視線。
二、線條引流
沒錯,延續上一個例子所用的方法,這也不失爲一種首圖設計方式。在首圖中讓線條來引導實現去穿越你想要焦點停留的地方。
上圖所示的設計,重點是模特和文字,因此,我們採用了9這個數字的線條方向,利用這個線條的環繞運動,最後從上至下游走過文字。這裏的心理預期是要把9筆畫完成,因此你沒有可能跳過文字。
三、動態情景
對於首圖的選擇,你可以焦距到動態場景。這類動態場景由於本身模特的動態造型,會調動觀衆的運動神經,激發頁面的活力。
大家可以想象,如果將上圖的主角換成一個靜物,效果將是不同的。這裏將模特的方向加以改變後重新降低透明度的`做法,帶來一定的虛實結合的感受。
四、謹慎配色
我們希望大家在運用首圖時,儘量不要去觸屏普通的風景圖。自然風光雖然好,但大片風景會表現出一團飽和的顏色堆疊,其實運用在網頁中略顯得沒有重點。因爲你要爲最終配圖運用以後所出現的顏色負責,色彩儘量控制在三種顏色之內,這條道理相信設計師們都會贊同,因此,這裏的配圖的色彩最好也能有所節制。
如這個設計中,整個圖片都呈現大片灰白,其實正是對顏色進行管控的技巧。當然你也要來個大花襖也無傷大雅,關鍵是運用時除了要注意元素的色彩,還要對首圖的色彩本身也足夠警惕。
五、虛擬現實
當然,我們這裏談的不是虛擬現實(VR),而是在首圖設計時,試着將靜物表現得更爲“現實”,好像它們就在你的屏幕上,隨手可以取到。但這個表達法,最緊要的是要爲虛擬尋找出口,也就是說,不能完全寫實,要讓用戶看出虛擬的破綻,從而讓形象更爲立體。這類表達技巧在首圖中有手機,利用APP產品展示等最爲常見。
這是我們今年出的一款開源的輕移動口袋雜誌,展示這個設計的時候,我們就運用了虛擬現實的設計方式,增加背景圖案,並讓咖啡和太陽鏡作爲一種“休閒”的視覺提示物件,讓用戶能感受到它們的現實的同時又能從背景中看出“破綻”。
六、文字本身的美
每張首圖也許我們都希望能配上文字,其實文字本身也能成爲一種風景,有時候適當運用一些具有圖像風格的文字,更能傳遞文字本身的能量。
如果能將文字看作圖像,書法文字是最合適不過了。書法本身的隨意瀟灑,和普通的印刷字體相比有着不可比擬的個性感。這裏,運用了書法作爲主角,本身書法作爲傳統國粹,在東方傳統的行業裏運用非常應景。當然,這裏的書法本身還可以寫得更好。
七、靜止的力量
對稱能帶來一種莊重靜止的力量,因此,在首圖設計中,你不妨採用對稱的佈局方式來設計首圖。但由於對稱本身略顯得靜止呆板,因此在設計上更需要多一些匠心,增加一些比較能突破規則小細節。
對稱的佈局最好採用倒三角的構圖,這樣視線會更靈活,從上往下會顯得更流暢,否則就會有一種滯澀不前的感受。
八、左圖右文
首圖的設計除了全屏展示,還有一種方式是可以放左邊圖片右邊文字的方式,這樣的設計技巧帶來的好處就是可以分割圖文,特別在圖片信息也同樣重要的時候,如果把圖文混合,雙方都不夠凸顯,不如左右各凸出主角,跟隨先左後右的視線也能傳遞本身的視覺效果。
如上圖所示,左右結構的傳達效果更爲清晰明確。你不會錯過圖片中美食的細節,也不會忽略文字的描述。色彩是鮮豔欲滴的橙色,食物和文字背景渾然一體。
首圖的設計技巧千變萬化,這裏只分享一小段,你的下一個設計如果苦於沒有靈感,不妨看看本文。
-
設計作文6篇【必備】
無論是身處學校還是步入社會,大家都經常接觸到作文吧,寫作文可以鍛鍊我們的獨處習慣,讓自己的心靜下來,思考自己未來的方向。一篇什麼樣的作文才能稱之爲優秀作文呢?下面是小編收集整理的設計作文6篇,僅供參考,大家一起來看看吧。設計作文篇1教學創意:運用符號法批改作...
-
設計作文彙編【8篇】
無論是在學校還是在社會中,大家都嘗試過寫作文吧,藉助作文可以提高我們的語言組織能力。作文的注意事項有許多,你確定會寫嗎?以下是小編整理的設計作文10篇,希望對大家有所幫助。設計作文篇1一、指導依據在新課標的思想指導下,我校七年級年級把開展民俗傳統項目──“...
-
《抽屜原理》教學設計優秀【優】
作爲一位傑出的老師,有必要進行細緻的教學設計準備工作,教學設計是連接基礎理論與實踐的橋樑,對於教學理論與實踐的緊密結合具有溝通作用。一份好的教學設計是什麼樣子的呢?以下是小編整理的《抽屜原理》教學設計優秀,歡迎閱讀,希望大家能夠喜歡。《抽屜原理》教學設...
-
實用的設計方案(精品3篇)
爲確保事情或工作高質量高水平開展,就不得不需要事先制定方案,方案是從目的、要求、方式、方法、進度等都部署具體、周密,並有很強可操作性的計劃。方案應該怎麼制定纔好呢?下面是小編爲大家整理的設計方案3篇,希望能夠幫助到大家。設計方案篇1爲了進一步樹立廣大教...