視覺設(shè)計思路和技法

視覺設(shè)計思路和技法

目錄HYPERLINK前言 2HYPERLINK項目 2HYPERLINK構(gòu)思 2HYPERLINK制作 3HYPERLINK背景 3HYPERLINK主界面（普通模式） 3HYPERLINK歌曲列表 11HYPERLINK主界面（迷你模式） 13HYPERLINK均衡器 13HYPERLINK歌詞顯示 13HYPERLINK互聯(lián)網(wǎng)歌曲庫 16HYPERLINK完成 16HYPERLINK作業(yè) 19史上最好的平面設(shè)計視頻教程/item.htm?spm=2013.1.1000774.68.RTKvys&id費廣告學(xué)視頻教程成功電視廣告案例分析和CorelDRAW案例實戰(zhàn)全/item.htm?spm=2013.1.31-8314319771.3.RTKvys&id漢大學(xué)平面廣告設(shè)計最新視頻教程/item.htm?spm=2013.1.31-8314319771.12.weuVo5&id=16209661249武漢大學(xué)廣告策劃與創(chuàng)意新視頻教程前言這是我參與部門技術(shù)分享的第三次了，前兩次的分享偏重于概念和理論，對于一些實際的設(shè)計思路和方法分享的比較少，為了保證部門分享在技術(shù)應(yīng)用層面的有效性和可持續(xù)，我計劃將一些曾經(jīng)做過的獨特的、有意義的項目進行梳理和總結(jié)之后，給大家進行介紹，這里將減少一些理論性的描述，重點會放在界面構(gòu)思和視覺設(shè)計實際的操作，希望大家的工作能夠有所收獲。項目千千靜聽皮膚設(shè)計，選擇這個項目的目的是因為技術(shù)類培訓(xùn)相對比較枯燥，而此類皮膚設(shè)計有別于通常的系統(tǒng)類界面設(shè)計，相對要求界面生動活潑，可自由發(fā)揮度高，用它作為第一次的技術(shù)類設(shè)計分享，目的是希望能夠調(diào)動大家對于界面設(shè)計更深的興趣，使培訓(xùn)不再那么單調(diào)，僅此而已。構(gòu)思我們要設(shè)計一個界面，首先要了解一個界面的應(yīng)用范圍，受眾，包括哪些必備元素，哪些元素是可以個性化的，哪些是必須嚴(yán)格遵守規(guī)范的。我們知道播放器通常包括主界面（普通模式、迷你模式）、均衡器、歌曲列表、歌詞顯示、互聯(lián)網(wǎng)歌曲庫5大部分，按應(yīng)用劃分就有6個界面需要設(shè)計，我對這個界面設(shè)計的定位是溫馨的、獨特的，在造型方面希望有別于一般的播放器界面，我把日常生活用到的電器、家具等應(yīng)用在上面提到的6個界面組件中，那么“家”這個概念就已經(jīng)成型了，具體需要設(shè)計的界面分別是：1.主界面(普通模式)—家庭影院2.主界面(迷你模式)—書柜頂部3.均衡器—空調(diào)4.歌曲列表—明亮的窗臺5.歌詞顯示—投影布6.互聯(lián)網(wǎng)歌曲庫—書柜前期項目的構(gòu)思非常重要，他直接影響到后期界面的成型，這個階段所占用的時間應(yīng)該不小于整個項目周期的20%。然后選擇矩形工具對白線刪除羽化，羽化值設(shè)為25px，具體是指根據(jù)實際效果修改，如下圖：按照上面所講的方法，完成其他幾條邊線的繪制，并添加電源顯示，整體效果如下：接下就是電視機柜的制作了，按照上面所講的使用描邊和漸變，先繪制一個大概的框架，如圖：柜子上面的分割線的構(gòu)成大家請注意看，，一條深色線和一條相對顏色較淺的線，他們組合在一起就構(gòu)成了一種立體感，這種方法在界面設(shè)計中應(yīng)用很廣泛?，F(xiàn)在開始給柜子制作如均衡器的開關(guān)了，繪制一個圓角矩形，設(shè)置#543007到#7d3809的漸變，#e18e21到#fddca1的外部漸變描邊，效果如下：在這個基礎(chǔ)上需要添加按鈕的說明和柜子抽屜的拉手，繪制一個高寬小于上圖2px的橢圓形，設(shè)置#f7c975到#bf6408的漸變，然后再旁邊的空白處添加文字，如圖：歌曲列表的按鈕就完成了，接著繪制其他按鈕，完成后如圖：到這里仍然感覺柜子比較單薄，缺乏質(zhì)感，有兩種方法，一種是采用木紋材質(zhì)進行疊加漸變，一種是做一些小的修飾，在這里我采用了第二種方法：現(xiàn)在開始制作音響了，首先仍然是構(gòu)圖，在構(gòu)圖的時候要注意，假如我們對某一樣物體比較熟悉的情況下你可以直接繪制圖形，比如上面的電視機，還有一種我們不太熟悉的物體，這時候你需要在baidu中找到相應(yīng)的圖片素材做參考，下面的音響是找的是LG的音響做原型的，基本構(gòu)圖如下：有了形狀之后開始制作樣式，這里并沒有什么特殊的樣式，仍然是漸變描邊之類的，完成后如下：接下來要制作音響上的喇叭了，圖形設(shè)計中看起來是很復(fù)雜的東西，只要我們把它拆分成幾個元素，那他就很簡單了，如下圖，這幾個小元素對大家來說畫起來應(yīng)該很簡單，幾個大小不一的原型，幾個像素點，那么組合起來放在音響上面是什么樣子呢，如圖：音響上面需要繪制音量控制按鈕，繪制一個圓角矩形，設(shè)置漸變描邊，完成以下效果:同樣的方法繪制音量控制條：音響部分就完成了，復(fù)制一個放在右邊，搞成“立體環(huán)繞”的效果。播放器中還有最小化、關(guān)閉、固定在頂部等功能，這里我使用電源開關(guān)座來表示，開關(guān)放在電視機的右邊，它的大小取決于電視機和右邊音響的距離，繪制正方形，如下圖：使用前面所講的方法，描邊制作如下效果：第三個開關(guān)的制作要重點考慮立體感的效果，物體的立體感和光線的的角度、強弱明暗有關(guān)，開關(guān)放大后我們可以清楚的看到漸變和陰影在其中起到的效果：一個看似復(fù)雜的圖形，仍然是離不開描邊、漸變、陰影這些最簡單的PS操作，圖形設(shè)計不在于工具，在于你的思維方式?，F(xiàn)在開始添加播放器的面板信息，如圖：面板中的播放、停止等按鈕的繪制也很簡單，繪制一個顏色值為#a1deff的圓形邊框，在PS中自定義形狀工具中有：并在圖層樣式中設(shè)置外發(fā)光：如圖：復(fù)制出五個光圈，并加添相應(yīng)的按鍵，如圖：對于上圖中的按鍵如中間的播放按鈕是沒有鋸齒的，我繪制此類小圖標(biāo)的方法是用像素一個一個去畫，放大后可看到具體效果：到這里主界面已基本完成，可是看起來感覺有些單一，那么我們?yōu)樗诩犹硪恍┰?，讓界面看起來更豐滿真實一些。在家庭影院中CD是必不可少的，我們需要一個放置CD的柜子，規(guī)則的結(jié)構(gòu)比較簡單，主要是分格的，里面可以設(shè)計一些CD的盒子，小飾品等等，如圖先做出簡單的布局，然后添加內(nèi)容：CD柜的背景需要木紋的素材來裝飾，然后就是“擺放CD和小飾品”進去了，這部分和軟件功能無關(guān)，可以自由發(fā)揮，但前提是不能脫離家的主題，如圖：歌曲列表用房間的窗臺來設(shè)計歌曲列表傳達(dá)一種思想，在充滿藍(lán)天白云的天空下聽音樂不是很愜意的事嗎？呵呵，那么開始吧。它應(yīng)該具備以下功能，增加，刪除，歌曲信息，查找，編輯，滾動列表等等，最重要的關(guān)閉功能。先繪制一個整體的框架，如圖：接下來制作窗戶、云彩、光線，云彩用網(wǎng)上的素材來做，這部分的重點是窗戶的明亮度和通透感，如圖:有窗戶當(dāng)然要有窗簾了，先繪制窗簾的滑竿，如圖：接下來的窗簾仍然是用素材來制作，窗簾的顏色不要與主色系差異過大，否則會顯得比較突兀，如圖：接下來開始制作功能圖標(biāo)了，在這之前先給窗臺做一個木板，如圖：功能圖標(biāo)的設(shè)計也不能脫離家的概念，我使用了花盆、相片、鏡子、書籍來對應(yīng)相應(yīng)的功能，如下圖:圖標(biāo)的制作之前有專門的培訓(xùn)已經(jīng)為大家講解了，這里不在做描述。接下來制作歌詞列表和滾動條，完成后如圖：最后一個功能是關(guān)閉，這里強調(diào)一下，因為是家的概念，在設(shè)計元素的時候不能在簡單的用一個叉來表示了，在這里我使用關(guān)閉窗簾的拉手，關(guān)閉窗戶即代表關(guān)閉歌曲列表:主界面（迷你模式）迷你模式的播放器界面同樣具備了普通模式播放器的功能，如歌曲類表按鈕、音量、播放停止等等，設(shè)計的重點在于構(gòu)思界面的布局和相應(yīng)功能的擺放，以及各功能按鍵的圖形樣式。上圖中的每一個組件都是有相應(yīng)功能的，千千靜聽的圖標(biāo)采用吊墜的設(shè)計，音量控制使用老式的播放器，歌曲屬性使用書本加標(biāo)簽的設(shè)計，關(guān)閉功能使用臺燈，功能按鈕的構(gòu)成仍然要家這個概念為主，盡可能的采用相應(yīng)元素進行設(shè)計。均衡器均衡器的設(shè)計我思考了很久，才決定使用空調(diào)的樣式來制作，這個界面從技術(shù)角度上講我認(rèn)為沒有難度，重點在于這個“空調(diào)”相對于其他界面的大小比例設(shè)置以及界面上面各控件的大小，如果空調(diào)的大小和主界面一樣大，那么在視覺會感到很不協(xié)調(diào)。歌詞顯示歌詞顯示讓我想到了投影布，一直希望自己有個投影儀在超大的屏幕上看電影，既然買不起那就做一個吧。在這個界面當(dāng)中有二個設(shè)計點需要注意：幕布邊框的羽化；首先繪制幕布的整體框架如圖：新建一個圖層，描邊1px#000選擇幕布的整體框架，模糊描邊的這個圖層，是描邊模糊不會超出整體框架的范圍，如圖：設(shè)置高斯模糊為4.0確定后效果如圖：這樣幕布的整體感覺就出來了。幕布支撐的制作。

我希望繪制兩個三角支架來支撐幕布，除中間的豎向支架外，斜角的支架我海事用鉛筆一個像素一個像素的去構(gòu)圖，這樣的好處是不會有邊緣虛化。使用矩形工具繪制然后變換到45度，可以看到周圍邊緣的虛化。最后大家可以看到整體效果如下：互聯(lián)網(wǎng)歌曲庫這個界面從系統(tǒng)功能上來說比較簡單，要做的應(yīng)用只有一個關(guān)閉按鈕，中間內(nèi)容是采用框架載入web的，為了保持視覺設(shè)計上的統(tǒng)一，我使用mini主界面的書柜來做繁衍設(shè)計，關(guān)閉按鈕繼續(xù)使用臺燈部分。完成所有的界面都已近完成了，接下來對每個界面場景進行最后一次審核，看看是否有改進或者修改的地方，舉個例子，我發(fā)現(xiàn)在主界面電視機與電源開關(guān)的鏈接上可以有一點改進，缺