行業(yè)應(yīng)用案例1多媒體界面的設(shè)計(jì).ppt

第11章 Photoshop CS3行業(yè)應(yīng)用案例1 多媒體界面的設(shè)計(jì) 隨著計(jì)算機(jī)的普及，各種多媒體教學(xué)軟件也逐漸走向普及，本章將介紹一個多媒體軟件的界面制作過程，主要包括以下內(nèi)容。,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,案例簡介 案例制作步驟 背景知識介紹,11.1 案例簡介 本實(shí)例介紹一個多媒體界面的設(shè)計(jì)制作過程。通過本實(shí)例的制作讀者將對多媒體軟件界面各個構(gòu)成要素的制作過程有一個深入的了解。 11.1.1 案例設(shè)計(jì)思路 本實(shí)例制作的是一個多媒體教學(xué)軟件的主界面。本實(shí)例在設(shè)計(jì)時要求滿足功能的需要，界面結(jié)構(gòu)設(shè)計(jì)合理且盡可能簡潔，在視覺上要求富于設(shè)計(jì)感。本實(shí)例在設(shè)計(jì)時，以藍(lán)色作為整個界面的主色調(diào)，容易讓使用者產(chǎn)生心靈的感應(yīng)。標(biāo)題適當(dāng)使用特效，以給對軟件的主體有清晰明確地認(rèn)識，突出重點(diǎn)。按鈕設(shè)計(jì)實(shí)用簡單，但又不失美觀，并且與背景搭配合理。按鈕在布局上做到內(nèi)部結(jié)構(gòu)布局合理，簡單明了，便于用戶操作，方便用戶靈活的運(yùn)用。界面整體風(fēng)格與軟件本身的結(jié)合度強(qiáng)，使之合乎現(xiàn)代的時尚感和大局觀。,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,11.1.2 案例制作說明 本實(shí)例在制作中沒有使用復(fù)雜的操作。實(shí)例的制作分為背景的制作，標(biāo)題的制作、按鈕的制作和最終效果圖的制作這幾步。 1背景制作 制作過程中使用背景素材圖片來構(gòu)建界面背景，這樣能減小制作工作量，提高制作效率。在制作過程中使用了圖層蒙版和【切變】濾鏡來創(chuàng)建圖像背景效果。同時使用是矢量工具來繪制主體部分的裝飾線，并通過添加【圖層樣式】來獲得透明的水晶效果，使背景更富有現(xiàn)代感。 2標(biāo)題的制作 在創(chuàng)建標(biāo)題后，分別對標(biāo)題的不同文字部分創(chuàng)建不同的效果。對標(biāo)題中的英文字符，采用了【馬賽克】濾鏡和【描邊】特效創(chuàng)建邊緣像素文字效果。同時對標(biāo)題中的漢字字符應(yīng)用【圖層樣式】創(chuàng)建水晶字體效果。 3按鈕制作 多媒體軟件中的按鈕分為常態(tài)、鼠標(biāo)滑過和鼠標(biāo)按下這3種狀態(tài)，為了便于按鈕在具體軟件中使用，這3中狀態(tài)的按鈕采用單獨(dú)的文件形式制作。按鈕的制作使用【圖層樣式】來創(chuàng)建特效。 4效果圖的制作 效果圖的制作是將制作是放置功能按鈕和說明文字的過程，制作過程中使用【移動工具】來移動對象進(jìn)行界面的布局，使用【自由變換】命令調(diào)整對象的大小，使之符合界面的要求,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,11.2 案例制作步驟 下面，詳細(xì)介紹本案例的制作步驟。 11.2.1 制作背景 1添加并處理素材圖片,圖11-13 調(diào)整色階后的圖像效果,2制作裝飾物,圖11-28 添加圖層樣式后的圖像效果,11.2.2 創(chuàng)建標(biāo)題 下面介紹界面標(biāo)題文字及其效果的創(chuàng)建。 1“Photoshop CS3”文字效果的創(chuàng)建 2標(biāo)題中“平面設(shè)計(jì)技巧詳解”文字效果的創(chuàng)建,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,圖11-34 應(yīng)用圖層樣式后的文字效果,圖11-36 創(chuàng)建的文字標(biāo)題效果,11.2.3 制作導(dǎo)航圖標(biāo) 下面在背景上添加導(dǎo)航圖標(biāo)。 1制作圖標(biāo) 2制作裝飾線 3制作其他圖標(biāo)效果,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,圖11-40 放置圖像,圖11-43 繪制線條,圖11-44 添加其他圖標(biāo),11.2.4 制作導(dǎo)航按鈕 在對媒體軟件界面中的一個重要元素就是按鈕，按鈕的作用是導(dǎo)航，將程序帶動需要的位置。按鈕一般有正常狀態(tài)、鼠標(biāo)滑過狀態(tài)、按下狀態(tài)這3種狀態(tài)。下面，介紹本實(shí)例中的導(dǎo)航按鈕的制作。 1制作常態(tài)時的按鈕,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,圖11-52 創(chuàng)建文字并設(shè)置文字樣式,2制作鼠標(biāo)滑過狀態(tài)按鈕,3、其他按鈕的制作,4、圓形水晶按鈕的制作,圖11-63 制作藍(lán)色水晶按鈕,圖11-62 制作綠色水晶按鈕,圖11-61 水晶球效果,圖11-57 修改文字并調(diào)整文字大小,圖11-56 取消【投影】樣式效果后的圖像效果,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,11.2.5 制作界面效果圖 為了展示程序界面在程序中的效果，這里制作出主界面中添加各個按鈕后的效果圖。 1添加導(dǎo)航按鈕,圖11-67 添加按鈕后的界面效果,2制作退出按鈕效果,圖11-74 本實(shí)例的最終效果,11.3 背景知識簡介 在多媒體技術(shù)迅速發(fā)展的今天，多媒體技術(shù)逐漸被廣泛應(yīng)用到社會各個領(lǐng)域，這使得創(chuàng)造美的界面的重要性和必要性也越來越得到大家的認(rèn)識。將美學(xué)原理應(yīng)用到多媒體界面的設(shè)置，能夠加強(qiáng)界面的氣氛，增強(qiáng)界面的吸引力，突出作品的重點(diǎn)，提高美感。 11.3.1 界面的構(gòu)成 界面是一個窗口，它是將不同的元素編排在一起，并形成一個連貫的整體。從實(shí)質(zhì)上說，界面是設(shè)計(jì)者才藝、技能和軟件人工智能的體現(xiàn)，是軟件設(shè)計(jì)者的設(shè)計(jì)理念的體現(xiàn)。就目前的多媒體軟件來說，界面主要包括兩類：一類是控制元素，這指的是界面上的菜單、按鈕、圖標(biāo)和各種交互熱區(qū)或熱字。另一類是內(nèi)容元素，這指的是反映有關(guān)信息的界面元素，如文字、圖片、聲音和動畫等。 好的程序界面，實(shí)際上是一個集多種視覺和聽覺元素綜合體，其中的視覺元素占了很重要的地位。界面的設(shè)計(jì)即考慮到信息的呈現(xiàn)，又要最大限度的實(shí)現(xiàn)操作的簡單性。可見，多媒體界面的設(shè)計(jì)是一個思維過程，也是一個組織過程，將控制元素和內(nèi)容元素有機(jī)結(jié)合，充分體現(xiàn)出了創(chuàng)意、設(shè)計(jì)和制作的三合一。,Photoshop平面設(shè)計(jì)實(shí)用教程 清華大學(xué)出版社,Pho