資源描述：
《視覺設(shè)計思路和技法》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、視覺設(shè)計思路和技法目錄前言1項(xiàng)目1構(gòu)思2制作2背景2主界面（普通模式）3歌曲列表10主界面（迷你模式）13均衡器13歌詞顯示13互聯(lián)網(wǎng)歌曲庫16完成16作業(yè)18史上最好的平面設(shè)計視頻教程http://item.taobao.com/item.htm?spm=2013.1.1000774.68.RTKvys&id=17121795092免費(fèi)廣告學(xué)視頻教程成功電視廣告案例分析和CorelDRAW案例實(shí)戰(zhàn)全http://item.taobao.com/item.htm?spm=2013.1.31-83
2、14319771.3.RTKvys&id=15918726206武漢大學(xué)平面廣告設(shè)計最新視頻教程http://item.taobao.com/item.htm?spm=2013.1.31-8314319771.12.weuVo5&id=16209661249武漢大學(xué)廣告策劃與創(chuàng)意新視頻教程前言這是我參與部門技術(shù)分享的第三次了，前兩次的分享偏重于概念和理論，對于一些實(shí)際的設(shè)計思路和方法分享的比較少，為了保證部門分享在技術(shù)應(yīng)用層面的有效性和可持續(xù)，我計劃將一些曾經(jīng)做過的獨(dú)特的、有意義的項(xiàng)目進(jìn)行梳理和
3、總結(jié)之后，給大家進(jìn)行介紹，這里將減少一些理論性的描述，重點(diǎn)會放在界面構(gòu)思和視覺設(shè)計實(shí)際的操作，希望大家的工作能夠有所收獲。項(xiàng)目千千靜聽皮膚設(shè)計，選擇這個項(xiàng)目的目的是因?yàn)榧夹g(shù)類培訓(xùn)相對比較枯燥，而此類皮膚設(shè)計有別于通常的系統(tǒng)類界面設(shè)計，相對要求界面生動活潑，可自由發(fā)揮度高，用它作為第一次的技術(shù)類設(shè)計分享，目的是希望能夠調(diào)動大家對于界面設(shè)計更深的興趣，使培訓(xùn)不再那么單調(diào)，僅此而已。構(gòu)思我們要設(shè)計一個界面，首先要了解一個界面的應(yīng)用范圍，受眾，包括哪些必備元素，哪些元素是可以個性化的，哪些是必須嚴(yán)格遵守
4、規(guī)范的。我們知道播放器通常包括主界面（普通模式、迷你模式）、均衡器、歌曲列表、歌詞顯示、互聯(lián)網(wǎng)歌曲庫5大部分，按應(yīng)用劃分就有6個界面需要設(shè)計，我對這個界面設(shè)計的定位是溫馨的、獨(dú)特的，在造型方面希望有別于一般的播放器界面，我把日常生活用到的電器、家具等應(yīng)用在上面提到的6個界面組件中，那么“家”這個概念就已經(jīng)成型了，具體需要設(shè)計的界面分別是：1.主界面(普通模式)—家庭影院2.主界面(迷你模式)—書柜頂部3.均衡器—空調(diào)4.歌曲列表—明亮的窗臺5.歌詞顯示—投影布6.互聯(lián)網(wǎng)歌曲庫—書柜前期項(xiàng)目的構(gòu)思
5、非常重要，他直接影響到后期界面的成型，這個階段所占用的時間應(yīng)該不小于整個項(xiàng)目周期的20%。制作背景既然皮膚的定位是“溫馨、家的概念”，那么在整體色彩的選擇上也要向這一點(diǎn)靠近，在PS中新建一個畫布，,1000x600，顏色值#ffe9ae，#fdfcb9，我個人喜歡把畫布鋪滿整個屏幕，這樣在視覺上不會受到約束。在圖層樣式中做線性漸變，由于漸變用到的比較多，在后面除非我特別指出，默認(rèn)是在圖層樣式中做漸變，如圖：背景完成之后，有了這樣環(huán)境氛圍，開始制作組件界面了。主界面（普通模式）上面提到的6個應(yīng)用中
6、首先開始制作普通模式的主界面，因?yàn)橹鹘缑姘脑剌^多，完成它對于定義整體界面的顏色樣式有很大幫助。既然主界面是以家庭影院為設(shè)計目標(biāo)，那么包括的元素至少應(yīng)該有電視機(jī)、機(jī)柜、音響構(gòu)成。電視機(jī)制作如下：用矩形工具繪制一個180x100的矩形，并在圖層樣式中添加#2d2d2f、#19191b、#000000漸變和1像素的#000000描邊，完成后如下圖：新建圖層繪制一個170x90的矩形屏幕，垂直和橫向居中，保持離黑色背景有5個像素，添加漸變值#0085e3、#0057cb、角度102，如圖：對屏幕進(jìn)
7、行修飾，增強(qiáng)屏幕的立體感，方法是對藍(lán)色屏幕進(jìn)行淺色和深色描邊，并新建圖層做透明的線性漸變，如圖：同樣的，對電視機(jī)的黑色邊框也進(jìn)行描邊和邊框的高亮處理，先在邊框上繪制一條白線：然后選擇矩形工具對白線刪除羽化，羽化值設(shè)為25px，具體是指根據(jù)實(shí)際效果修改，如下圖：按照上面所講的方法，完成其他幾條邊線的繪制，并添加電源顯示，整體效果如下：接下就是電視機(jī)柜的制作了，按照上面所講的使用描邊和漸變，先繪制一個大概的框架，如圖：柜子上面的分割線的構(gòu)成大家請注意看，，一條深色線和一條相對顏色較淺的線，他們組合在
8、一起就構(gòu)成了一種立體感，這種方法在界面設(shè)計中應(yīng)用很廣泛。現(xiàn)在開始給柜子制作如均衡器的開關(guān)了，繪制一個圓角矩形，設(shè)置#543007到#7d3809的漸變，#e18e21到#fddca1的外部漸變描邊，效果如下：在這個基礎(chǔ)上需要添加按鈕的說明和柜子抽屜的拉手，繪制一個高寬小于上圖2px的橢圓形，設(shè)置#f7c975到#bf6408的漸變，然后再旁邊的空白處添加文字，如圖：歌曲列表的按鈕就完成了，接著繪制其他按鈕，完成后如圖：到這里仍然感覺柜子比較單薄，缺乏質(zhì)感，有兩種方法，一種是采用木紋材質(zhì)進(jìn)行疊加漸
