視覺設計思路和技法

視覺設計思路和技法

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

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