《PS網(wǎng)頁(yè)設(shè)計(jì)》作品設(shè)計(jì)報(bào)告書

PAGEPAGE1廣西交通職業(yè)技術(shù)學(xué)院信息工程系作品設(shè)計(jì)報(bào)告書題目：PS網(wǎng)頁(yè)設(shè)計(jì)班級(jí)學(xué)號(hào)姓名指導(dǎo)教師2010年6月目錄一、設(shè)計(jì)目標(biāo) 31.1內(nèi)容 31.2功能 31.3實(shí)現(xiàn)方式 3二、設(shè)計(jì)指導(dǎo)思想 32.1技術(shù)背景 32.1.1網(wǎng)頁(yè)設(shè)計(jì) 42.1.2圖形編輯 42.1.3平面設(shè)計(jì) 42.1.4主流軟件 42.2開發(fā)環(huán)境 5三、設(shè)計(jì)內(nèi)容及制作步驟 53.1頁(yè)面展示 53.1.1成品展示 53.2.2參考作品 63.2制作構(gòu)思 73.2.1板式 73.3.2顏色 73.3制作流程 73.3.1背景 73.3.2LOGO 83.3.3導(dǎo)航條 93.3.4板塊 93.3.5板塊內(nèi)容 103.3.6板塊文字美化 113.3.7頁(yè)尾 11四、設(shè)計(jì)制作進(jìn)度表 11五、作品提交清單及運(yùn)行環(huán)境要求 125.1文件清單 125.2運(yùn)行環(huán)境要求 12六、相關(guān)問(wèn)題及結(jié)束語(yǔ) 126.1相關(guān)問(wèn)題 126.2結(jié)束語(yǔ) 126.3感悟 13七、參考資料 13一、設(shè)計(jì)目標(biāo)1.1內(nèi)容通過(guò)PS這款軟件，設(shè)計(jì)一個(gè)簡(jiǎn)單、美觀、符合實(shí)際的網(wǎng)頁(yè)頁(yè)面，頁(yè)面內(nèi)容具備網(wǎng)頁(yè)經(jīng)?？梢钥吹降墓δ?。這次的作品既是PS設(shè)計(jì)，同時(shí)也是網(wǎng)頁(yè)設(shè)計(jì)，因此在頁(yè)面及其功能上應(yīng)按一個(gè)正規(guī)網(wǎng)站來(lái)設(shè)計(jì)。1.2功能對(duì)于網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，不僅應(yīng)了解該網(wǎng)站要運(yùn)行什么應(yīng)用程序，需要如何連接單位現(xiàn)有系統(tǒng)等，還需知道這個(gè)網(wǎng)站希望達(dá)到什么樣的目的，即必須清楚網(wǎng)站的目標(biāo)市場(chǎng)在那里。這將成為整個(gè)網(wǎng)站所有設(shè)計(jì)思想的基礎(chǔ)。無(wú)論網(wǎng)站采用何種形式，什么樣的外觀，提供什么的內(nèi)容，都要以網(wǎng)站的最終目的為出發(fā)點(diǎn)來(lái)考慮。另一方面，網(wǎng)站建設(shè)還應(yīng)該收集客戶對(duì)這個(gè)網(wǎng)站的美術(shù)需求。網(wǎng)站設(shè)計(jì)人員就需要了解建站單位形象的突出點(diǎn)和單位標(biāo)志的特點(diǎn)、意義等。本網(wǎng)站的建設(shè)主要是建成一個(gè)集在線閱讀、書籍下載、文化新聞等功能于一體的商業(yè)化網(wǎng)站。1.3實(shí)現(xiàn)方式運(yùn)用PS相關(guān)功能，設(shè)計(jì)出一個(gè)靜態(tài)的頁(yè)面，然后通過(guò)HTML輸出，得到一個(gè)基本的網(wǎng)頁(yè)文件。二、設(shè)計(jì)指導(dǎo)思想2.1技術(shù)背景對(duì)于現(xiàn)在的社會(huì)，科技的飛速發(fā)展已經(jīng)成為社會(huì)發(fā)展的標(biāo)志。其中計(jì)算機(jī)的發(fā)展可謂快中之快，而在計(jì)算機(jī)的發(fā)展中計(jì)算機(jī)網(wǎng)絡(luò)的發(fā)展又是首當(dāng)其沖的。計(jì)算機(jī)網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短的幾年時(shí)間，在這幾年中隨著計(jì)算機(jī)網(wǎng)絡(luò)的廣泛應(yīng)用，特別是Internet的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。不論是最新的新聞信息、新產(chǎn)品的出臺(tái)、新游戲的發(fā)布、最新的各種IT動(dòng)態(tài)，包括等候就業(yè)人才的個(gè)人簡(jiǎn)歷，我們都是可以通過(guò)網(wǎng)絡(luò)來(lái)獲得。但是什么為這所有的一切提供平臺(tái)的呢。我們又是通過(guò)什么來(lái)獲取這些消息的呢——對(duì)就是網(wǎng)頁(yè)?，F(xiàn)如今，數(shù)以萬(wàn)計(jì)的網(wǎng)站以網(wǎng)頁(yè)的方式提供了豐富、精彩的信息。在人類社會(huì)進(jìn)入信息時(shí)代的時(shí)候，在網(wǎng)絡(luò)成為通信的主要手段的時(shí)候，在計(jì)算機(jī)網(wǎng)絡(luò)普及的今天，網(wǎng)頁(yè)也在它自己的崗位上做出了突出的貢獻(xiàn)。網(wǎng)頁(yè)是我們?cè)诰W(wǎng)絡(luò)上的“帶言人”。我們將什么樣的信息傳達(dá)給瀏覽者，要講述什么要的事情，網(wǎng)頁(yè)在這里起著重用的作用。2.1.1網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)是伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，由于人們使用網(wǎng)絡(luò)的頻繁而網(wǎng)頁(yè)作為上網(wǎng)的主要依托就變得非常的重要。網(wǎng)頁(yè)講究的是排版布局，其功能主要就是提供一種形式給每個(gè)上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。網(wǎng)頁(yè)設(shè)計(jì)直接面對(duì)的是大量用戶,隨時(shí)都會(huì)反饋回來(lái)對(duì)網(wǎng)頁(yè)的批評(píng)建議等，可以根據(jù)實(shí)際情況進(jìn)行修改，這樣做可以使使用者用起來(lái)更加的方便。2.1.2圖形編輯圖形編輯是糾正數(shù)據(jù)采集錯(cuò)誤的重要手段，其基本功能要求是：具有友好的人機(jī)界面，即操作靈活、易于理解、響應(yīng)迅速等；具有對(duì)幾何數(shù)據(jù)和屬性編碼的修改功能；具有分層顯示和窗口功能，便于用戶的使用。圖形編輯的關(guān)鍵是點(diǎn)、線、面的捕捉，即如何根據(jù)光標(biāo)的位置找到需要編輯的要素以及圖形編輯的數(shù)據(jù)組織。2.1.3平面設(shè)計(jì)平面設(shè)計(jì)（graphicdesign）的定義泛指具有藝術(shù)性和專業(yè)性，以“視覺(jué)”作為溝通和表現(xiàn)的方式。透過(guò)多種方式來(lái)創(chuàng)造和結(jié)合符號(hào)、圖片和文字，借此作出用來(lái)傳達(dá)想法或訊息的視覺(jué)表現(xiàn)。平面設(shè)計(jì)師可能會(huì)利用字體排印、視覺(jué)藝術(shù)、版面（pagelayout）等方面的專業(yè)技巧，來(lái)達(dá)成創(chuàng)作計(jì)劃的目的。平面設(shè)計(jì)通?？芍钢谱鳎ㄔO(shè)計(jì)）時(shí)的過(guò)程，以及最后完成的作品2.1.4主流軟件AdobePhotoshop是公認(rèn)的最好的通用平面美術(shù)設(shè)計(jì)軟件。由Adobe公司開發(fā)設(shè)計(jì)。其用戶界面易懂，功能完善，性能穩(wěn)定，所以，在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面工具。CS是AdobeCreativeSuite一套軟件中后面2個(gè)單詞的縮寫，代表“創(chuàng)作集合”，是一個(gè)統(tǒng)一的設(shè)計(jì)環(huán)境，將AdobePhotoshopCS2、IllustratorCS2、InDesignCS2、GoLiveCS2和Acrobat7.0Professional軟件與VersionCueCS2、AdobeBridge和AdobeStockPhotos相結(jié)合。最新版本是AdobePhotoshopCS5。2.2開發(fā)環(huán)境本次設(shè)計(jì)所采用工具：PhotoshopCS3PhotoshopCS3是可以將設(shè)計(jì)者的想法表現(xiàn)為圖像的一種工具。PhotoshopCS3提升了編輯圖像的速度，改善了圖像的畫質(zhì)效果，使用戶在處理圖像時(shí)更為輕松便捷。現(xiàn)在，不論是公司還是學(xué)?；蚣彝ザ紩?huì)用PhotoshopCS3來(lái)制作或處理圖像三、設(shè)計(jì)內(nèi)容及制作步驟3.1頁(yè)面展示3.1.1成品展示成品展示（閱讀網(wǎng)）3.2.2參考作品參考作品（文章閱讀網(wǎng)）截圖1參考作品（文章閱讀網(wǎng)）截圖23.2制作構(gòu)思3.2.1板式參考大量用類網(wǎng)站，商業(yè)化的閱讀型網(wǎng)站，都是采用中規(guī)中矩的結(jié)構(gòu)，通過(guò)大小不一的方框分解整個(gè)頁(yè)面。3.3.2顏色為了提高閱讀的舒適度，顏色應(yīng)以柔和淡雅的色調(diào)為主，在作導(dǎo)航條等反差顏色采用也應(yīng)以采用柔和淡雅的色調(diào)。3.3制作流程3.3.1背景采用木紋的背景增強(qiáng)了閱讀的紙質(zhì)感，提高閱讀的舒適度。白色半透明的方框?qū)㈨?yè)面切割成三部分，兩邊木紋背景留白，中間則做填充各種內(nèi)容。：“書本和咖啡”的圖片提高網(wǎng)站的書香氣息。3.3.2LOGO柔和的淡藍(lán)色加上夸張的淡綠色描邊，給人一種清新淡雅的感覺(jué)，使人看著貼切和諧，構(gòu)造出網(wǎng)站的名字——閱讀網(wǎng)。3.3.3導(dǎo)航條黃色基地的遠(yuǎn)角長(zhǎng)條方框，純白色的描邊，已經(jīng)紅色小圓點(diǎn)組成的切割條，構(gòu)成基本的導(dǎo)航條。再用文字工具寫上相應(yīng)的導(dǎo)航文字。3.3.4板塊采用白、藍(lán)、檸檬黃三種顏色劃分成大小不一的板塊，并對(duì)板塊添加“描邊、陰影、浮雕”的圖層樣式。3.3.5板塊內(nèi)容板塊主題文字，添加橙色描邊，時(shí)使其更醒目。書籍圖片添加白色描邊，使其更具動(dòng)感。板塊內(nèi)容文字顏色采用黑色，莊重大方，3.3.6板塊文字美化寶石藍(lán)的球型水晶按鈕，使文字行間劃分更容易辨別，同時(shí)也醒目。3.3.7頁(yè)尾藍(lán)白基調(diào)的漸變細(xì)長(zhǎng)方框，使頁(yè)與主題有一個(gè)明了的分割。添加上“友情鏈接、聯(lián)系我們”等標(biāo)準(zhǔn)網(wǎng)頁(yè)應(yīng)具備的頁(yè)尾內(nèi)容。四、設(shè)計(jì)制作進(jìn)度表設(shè)計(jì)內(nèi)容及時(shí)間大致分配如下：序號(hào)設(shè)計(jì)內(nèi)容天數(shù)（約占比例）1請(qǐng)教老師，和同學(xué)探討1（10％）2查找網(wǎng)絡(luò)上的參考資料2（20％）3制作PS5（50%）4后期整理文件1（10％）5撰寫作品設(shè)計(jì)報(bào)告書1（10％）總計(jì)10天五、作品提交清單及運(yùn)行環(huán)境要求5.1文件清單源文件：2009404045麥芳榮.psd報(bào)告書：《PS網(wǎng)頁(yè)》作品設(shè)計(jì)報(bào)告書.doc日志：《PS網(wǎng)頁(yè)設(shè)計(jì)》作品制作日志.doc截圖：網(wǎng)頁(yè)截圖.jpgHTML：2009404045麥芳榮網(wǎng)頁(yè).htmlHTML附帶：images（文件夾）5.2運(yùn)行環(huán)境要求PhotoshopCS3六、相關(guān)問(wèn)題及結(jié)束語(yǔ)6.1相關(guān)問(wèn)題實(shí)踐讓我走向科技應(yīng)用,走出課堂。當(dāng)前,我們?nèi)鄙俚闹饕皇侵R(shí),而是缺少將知識(shí)與實(shí)際相結(jié)合的能力.我們?cè)谡n堂上所學(xué)的,與在實(shí)際當(dāng)中遇到的是不盡相同的.其往往具有不具有明顯的特征,這需要我們進(jìn)行抽象概括才能解決各種問(wèn)題。6.2結(jié)束語(yǔ)通過(guò)一個(gè)學(xué)期學(xué)習(xí)PS，讓我掌握了這個(gè)軟件的使用方法，同時(shí)也完成這個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品。感謝李林軍的細(xì)心指導(dǎo)，感謝同學(xué)們的支持與幫助。在日后的學(xué)習(xí)生活中，相信PS會(huì)給我?guī)?lái)更多。這次畢業(yè)設(shè)計(jì)讓我更加熟悉了從理論到實(shí)踐的跨越。從當(dāng)初的在網(wǎng)上查閱資料，到現(xiàn)在的網(wǎng)站運(yùn)行，這中間有很多值得回味的地方。在計(jì)算機(jī)的世界里，只要你有興趣，總會(huì)有太多新奇的東西吸引著你。這次的設(shè)計(jì)，從選題到實(shí)現(xiàn)，幾乎都是自己獨(dú)立完成的。網(wǎng)站建設(shè)從需求分析到設(shè)計(jì)、測(cè)試，我都力求規(guī)范化，努力讓自己以前學(xué)的知識(shí)運(yùn)用到本網(wǎng)站的開發(fā)中，盡量保證整個(gè)系統(tǒng)的開發(fā)質(zhì)量，順利完成這次的設(shè)計(jì)，為自己的PS課程結(jié)束畫一個(gè)完美的句號(hào)。不過(guò)，在網(wǎng)站建設(shè)過(guò)程中，好多知識(shí)都是隨學(xué)隨用，就增加了很多不必要的麻煩。雖說(shuō)這些都會(huì)消耗開發(fā)的時(shí)間，但在老師、同學(xué)以及自己的不斷努力下，一些問(wèn)題也隨之克服了，通過(guò)這次閱讀網(wǎng)網(wǎng)站設(shè)計(jì)，使我增加了很多的知識(shí)，也掌握了很多網(wǎng)頁(yè)設(shè)計(jì)的操作技巧，雖然還有很多不足之處，但這并不重要，重要的是我對(duì)網(wǎng)頁(yè)的設(shè)計(jì)又有了更深的了解。我做的是靜態(tài)的網(wǎng)站，好多信息只能通過(guò)瀏覽頁(yè)面的方式查閱，網(wǎng)站的便用性比較差。希望各位評(píng)委老師和同學(xué)給予指正與建議。我相信，只要肯鉆研，只要擠時(shí)間，一切自己想要的知識(shí)都可以掌握。6.3感悟網(wǎng)頁(yè)設(shè)計(jì)跟學(xué)習(xí)別的東西一樣，也需要興趣，所謂的興趣也不是三分鐘熱度，是一種執(zhí)著。學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)需要耐心，如果沒(méi)有耐心，就學(xué)不好網(wǎng)頁(yè)設(shè)計(jì)，應(yīng)為當(dāng)你碰到一個(gè)問(wèn)題時(shí)，如果不能立刻得到問(wèn)題的答案，你可能需要很長(zhǎng)時(shí)間去解決，我就碰到過(guò)一個(gè)問(wèn)題，用了很長(zhǎng)時(shí)間才解決。學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)需要堅(jiān)持，堅(jiān)持不斷的學(xué)習(xí)，因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)的軟件在不斷的更新，因此我們要不斷的學(xué)習(xí)。我認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該注重實(shí)用性，因?yàn)樗亲屓藶g覽的，是用戶可以撫摸，可以評(píng)論，可以交互的。因此我提倡簡(jiǎn)單的美。不要過(guò)于注重色彩的燦爛，只要簡(jiǎn)單就行。我們最終追求的主要是實(shí)用價(jià)值。七、參考資料本作