UI網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)報(bào)告

1、鄭州輕工業(yè)學(xué)院實(shí) 訓(xùn) 報(bào) 告 實(shí)訓(xùn)名稱： 姓 名： 宋得洋 院 （系）： 專業(yè)班級(jí)： 指導(dǎo)教師： 徐潔 趙曉君 成 績： 時(shí)間： 2012年 12月 24日至 2012年 1月 4日實(shí)訓(xùn)報(bào)告實(shí)訓(xùn)內(nèi)容：第一周的時(shí)候老師對(duì)我們以往學(xué)習(xí)的知識(shí)進(jìn)行了詳細(xì)的了解，對(duì)我們以前學(xué)習(xí)不到的知識(shí)進(jìn)行了總結(jié)，別且勉勵(lì)我們在今后學(xué)習(xí)的道路上不驕不躁。老師對(duì)向我們灌輸了網(wǎng)站的搭配技巧和大致結(jié)構(gòu)，這些只能在公司的實(shí)踐中才能得到的東西，我們在老師的幫助下得到了大致的了解，感謝老師。前幾天老師主要講解了PS的知識(shí)，比如怎么做燈光效果，我們在下午的時(shí)候進(jìn)行了練習(xí)。老師說在2個(gè)星期的時(shí)間里學(xué)習(xí)到很多的知識(shí)是不可能的，但是我們要

2、有信心和勇氣去學(xué)習(xí)，只有自己不放棄才能得到自己想要的知識(shí)。在讓我們得到理論知識(shí)灌輸?shù)耐瑫r(shí)，老師注重我們的實(shí)踐，實(shí)踐是根本，沒有實(shí)踐的東西是不成形的，也是不可靠的，無論怎么樣的想象，沒有起飛總是會(huì)墜毀的。老師對(duì)于蒙版效果的使用讓我耳目一新，以前總是不重視這些不太中心的東西，但是通過老師對(duì)于蒙板的講解，我了解了那些外觀上的刺激和強(qiáng)悍的作用，往往能讓人耳目一新。老師對(duì)于蒙版的使用以及做出的一些精美的圖片，讓我認(rèn)識(shí)到了蒙版的重要性。因?yàn)楝F(xiàn)在的人們對(duì)于美觀的要求性很高，我們需要對(duì)此下很大的功夫，這樣做出的東西才能滿足人們的口味。長久經(jīng)驗(yàn)的積累讓老師在這個(gè)行業(yè)走的很遠(yuǎn)，以后我會(huì)更加努力的實(shí)踐，讓自己在走上

3、社會(huì)的道路上有一個(gè)良好的基礎(chǔ)。老師講解的PS知識(shí)對(duì)PS進(jìn)行了剖析，許多小技巧讓我們在作圖的時(shí)候效率有了很大的提高。 大概可以分為以下幾類：1.魔棒、套索、矩形選區(qū)工具、圓形選區(qū)工具、像素選擇工具等等，這一類使用簡單，對(duì)規(guī)則圖形和對(duì)比度大的圖像進(jìn)行操作；2.通道選擇法，以不同顏色通道的亮度及對(duì)比度為基礎(chǔ)，進(jìn)行繪制及選擇；3.矢量路徑方法選擇，工具包含繪制的圖形、鋼筆工具、網(wǎng)格工具等；4.圖像具有相對(duì)復(fù)雜的背景，前景（即我們要扣取的對(duì)象）邊緣細(xì)微，例如發(fā)絲毛發(fā)等，可用抽出這類的濾鏡或者用其他第三方濾鏡，如Knockout、Mask Pro、ReMask、蒙娜麗莎等等；5.要扣取的前景具有半透明屬性

4、，例如婚紗、水珠、氣泡、玻璃制品等，最好選用各種第三方濾鏡進(jìn)行操作（因?yàn)楣δ茌^強(qiáng)，摳圖效果好），例如Knockout、Mask Pro、ReMask、蒙娜麗莎等；6.圖像復(fù)雜，單種工具無法完成摳圖，就要考慮多種工具和濾鏡組合扣取。他還讓我們記住一些常用的快捷鍵如：比如，按住Ctrl Alt鍵拖動(dòng)鼠標(biāo)可以復(fù)制當(dāng)前層或選區(qū)內(nèi)容； 如果你最近拷貝了一張圖片存在剪貼板里，Photoshop在新建文件(Ctrl N)的時(shí)候會(huì)以剪貼板中圖片的尺寸作為新建圖的默認(rèn)大小。要略過這個(gè)特性而使用上一次的設(shè)置，在打開的時(shí)候按住Alt鍵(Ctrl Alt N)；如果創(chuàng)作一幅新作品，需要與一幅已打開的圖片有一樣的尺寸、

5、解析度、格式的文件。只要選取“文件”“New”，點(diǎn)Photoshop菜單欄的Windows選項(xiàng)，在彈出菜單的最下面一欄點(diǎn)擊已開啟的圖片名稱就ok（實(shí)在太方便了）；在使用自由變換工具(Ctrl T)時(shí)按住Alt鍵(Ctrl Alt T)即可先復(fù)制原圖層(在當(dāng)前的選區(qū))后在復(fù)制層上進(jìn)行變換；Ctrl Shift T為再次執(zhí)行上次的變換，Ctrl Alt Shift T為復(fù)制原圖后再執(zhí)行變換。使用“通過復(fù)制新建層(Ctrl J)”或“通過剪切新建層(Ctrl J)”命令可以在一步之間完成拷貝到粘貼和剪切到粘貼的工作；通過復(fù)制(剪切)新建層命令粘貼時(shí)仍會(huì)放在它們原來的地方，然而通過拷貝(剪切)再粘貼，

6、就會(huì)貼到圖片(或選區(qū))的中心；若要直接復(fù)制圖像而不希望出現(xiàn)命名對(duì)話框，可先按住Alt鍵，再執(zhí)行“圖像”“副本”命令；Photoshop的剪貼板也很好用，但你更希望直接使用Windows系統(tǒng)剪貼板，直接處理從屏幕上截取的圖像。好的，按下CtrlK，在彈出的面板上將“輸出到剪貼板”點(diǎn)中吧！老師講解的蒙板是將不同灰度色值轉(zhuǎn)化為不同的透明度，并作用到它所在的圖層，使圖層不同部位透明度產(chǎn)生相應(yīng)的變化。黑色為完全透明，白色為完全不透明。這些優(yōu)點(diǎn)：1.修改方便，不會(huì)因?yàn)槭褂孟鹌げ粱蚣羟袆h除而造成不可返回的遺憾；2.可運(yùn)用不同濾鏡，以產(chǎn)生一些意想不到的特效；3.任何一張灰度圖都可用來用為蒙板。以及主要的作用：

7、1.用來扣圖；2.做圖的邊緣淡化效果；3.圖層間的溶合；在蒙板上應(yīng)用不同的濾鏡，便會(huì)使淡化的邊緣出現(xiàn)不同的效果。在蒙板和圖層之間的空處有一個(gè)鏈接符號(hào)，默認(rèn)是鏈接著的，點(diǎn)擊可解開蒙板與圖層的鏈接。此時(shí)如果移動(dòng)圖層或蒙板，只會(huì)移動(dòng)你選擇的相應(yīng)圖層或蒙板，這點(diǎn)與圖層間的鏈接是一回事?？郾容^復(fù)雜的圖，比喻人的頭發(fā)，植物的枝葉等時(shí)，可將圖片轉(zhuǎn)為CMYK或LAB等不同顏色模式，找出一個(gè)對(duì)比最強(qiáng)，邊緣輪廓最清晰的通道，調(diào)整其色階，然后應(yīng)用到蒙板，再作進(jìn)一步修整。這些東西不僅僅教會(huì)了我們東西，更加的讓我的態(tài)度得到了端正。老師說態(tài)度很重要，沒有了端正的態(tài)度如何能用自己的心將自己的靈感融入到自己的作品中去，一個(gè)良

8、好的態(tài)度是一個(gè)好的開端，同時(shí)也是自己能在做作品的時(shí)候用自己靈感澆筑眼下的作品。這是老師的作品讓我們網(wǎng)站頁面的設(shè)計(jì)和圖形視覺的認(rèn)識(shí)有了一個(gè)全新的了解，一張圖片有好的顏色和文字的合理設(shè)計(jì)才會(huì)讓被人認(rèn)同你的作品，所以這一周的ps實(shí)訓(xùn)使我對(duì)PS有了全新的認(rèn)識(shí)。而真正的知識(shí)是理解和認(rèn)知，而不是那些瑣碎的篇幅。第二周的時(shí)候這一周老師給我們講了當(dāng)前最流行的網(wǎng)頁布局的方法Div+css，老師也講了層布局與表格布局的區(qū)別，他們都是網(wǎng)頁布局的方式，一個(gè)便于以后的維護(hù)、一個(gè)便于制作他們各有好處，需要設(shè)計(jì)人員在制作時(shí)自己來取舍的，并且還有一些設(shè)計(jì)技巧：1、靈活運(yùn)用樣式熟悉網(wǎng)頁設(shè)計(jì)的網(wǎng)友就知道，調(diào)用Style的方法很多

9、，我們可以單擊鼠標(biāo)右鍵選擇Custon Style來調(diào)用Style標(biāo)準(zhǔn)，也可以在狀態(tài)欄中的元素列表上單擊右鍵來調(diào)用Style。雖然不同的方法達(dá)到的效果看似一樣，但實(shí)際上產(chǎn)生的HTML代碼則完全不同。比如用Custon Style來調(diào)用Style標(biāo)準(zhǔn)，在網(wǎng)頁代碼中就生成一個(gè)span標(biāo)簽，這樣的標(biāo)簽一多就會(huì)使文件十分臃腫而且影響瀏覽器的解析速度，所以我們應(yīng)盡量使用狀態(tài)欄中的元素列表來調(diào)用Style。2、要讓W(xué)indows（特別是95/NT）使用定制的顯示器 匹配曲線，只需要如下操作：（1）在開始菜單的“啟動(dòng)”中刪除“Adobe Gamma Loader”。（2）確定ICM曲線的路徑/名稱（基本上是

10、處在C:WinNTSystem32Color中）。（3）運(yùn)行RegEdit，找到如下項(xiàng)目：HKEY_LOCAL_MACHINESoftwareAdobeColorMonitorMonitor0（4）創(chuàng)建一個(gè)新的項(xiàng)，叫做“Monitor Profile”（5）在這個(gè)顯示器曲線的項(xiàng)中輸入步驟2中的路徑/名稱。注意：在設(shè)置了這個(gè)曲線后，由于Adobe Gamma已經(jīng)重新配置了Adobe Gamma Loader，因此不要再運(yùn)行它。3、同時(shí)鏈接到兩個(gè)網(wǎng)頁我們都知道超級(jí)鏈接一次只能連到一個(gè)頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”JavaScript 行為。打開一個(gè)有

11、框架的網(wǎng)頁，選擇文字或圖象，然后從行為面板中選擇“Go To URL”。我們會(huì)注意到Dreamweaver會(huì)在“Go To URL”對(duì)話框中顯示所有可用的框架。選擇其中一個(gè)我們想鏈接的框架并輸入相應(yīng)的URL后再選擇另一個(gè)框架并輸入另一個(gè)URL。4、不給文件起中文名稱大家在制作好了網(wǎng)頁后，通常會(huì)給網(wǎng)頁起一個(gè)具有代表性的中文名稱，一來能使人一看文件名就能大概了解文件所包含的內(nèi)容，二來能夠方便各個(gè)超級(jí)鏈接之間的相互調(diào)用。但如果你在Dreamweaver中這樣做，就會(huì)發(fā)現(xiàn)Dreamweaver對(duì)中文文件名支持得不是太好，經(jīng)常會(huì)有頁面調(diào)用不正確的現(xiàn)象發(fā)生，所以我們以后在Dreamweaver中保存網(wǎng)頁的

12、時(shí)候，盡量用英文或者數(shù)字作為文件名稱，這樣就可以避免上面的出錯(cuò)現(xiàn)象。5、要?jiǎng)?chuàng)建網(wǎng)絡(luò)安全顏色，須確保色彩的R、G和B元素都是十六進(jìn)制數(shù)的33或十進(jìn)制的51的倍數(shù)，任何以下的值都是可接受的：00 (0)、33 (51)、66 (102)、 99 (153)、CC (204)、FF (255)。6、巧妙隱藏標(biāo)簽如果在網(wǎng)頁中插入了不可見的元素時(shí)，Dreamweaver會(huì)自動(dòng)在頁面上添加一個(gè)與之相應(yīng)的元素標(biāo)簽，以便于我們選擇不可見元素。但這并不全是件好事，比我們在一個(gè)有很多層的頁面中的第一行便插入一個(gè)表格，就會(huì)發(fā)現(xiàn)由于首行排列了太多的層元素標(biāo)簽而使得表格自動(dòng)退到了頁面的第二行，雖然在瀏覽時(shí)并不影響效果，

13、但這確確實(shí)實(shí)會(huì)阻礙我們的工作。所以當(dāng)我們覺得某個(gè)元素標(biāo)簽礙手礙腳時(shí)，就索性將之屏蔽掉。方法是按Ctrl+U打開Preferences面板，在Category中選中Invisibel Elements，在面板的右邊將會(huì)出現(xiàn)所有的元素標(biāo)簽。只要將不需要的元素標(biāo)簽前的勾去掉，以后它就保證不會(huì)再出現(xiàn)了。下面這是一段利用列表項(xiàng)目制作的導(dǎo)航條樣式及代碼：無標(biāo)題文檔*margin:0 auto;padding:0;.m2background-color:#999;width:1000px;height:35px;font-size:12px;font-family:宋體;lilist-style:none;

14、float:left;line-height:35px;width:200px;adisplay:block;text-decoration:none;text-align:center;a:hoverbackground-color:#039;網(wǎng)站首頁客戶信息產(chǎn)品展示員工信息員工風(fēng)采這是我的屏幕截圖用PS分成20個(gè)圖層做的下面這是一段利用表格制作的導(dǎo)航條代碼：無標(biāo)題文檔*margin:0 auto;padding:0;.m1width:1000px;height:30px;background:#CCC;line-height:30px;font-size:12px;font-family:

15、宋體;adisplay:block;text-decoration:none;a:hoverbackground-color:#0CC;text-align:center; 網(wǎng)站首頁 客戶中心 聯(lián)系我們 產(chǎn)品展示 員工風(fēng)采 下面這是一段利用層制作的導(dǎo)航條代碼：無標(biāo)題文檔*margin:0 auto;padding:0;.m1width:1000px;height:40px;background-color:#999;.m2width:250px;background-color:#33C;text-align:center;line-height:40px;float:left;.m3widt

16、h:250px;background-color:#0C0;text-align:center;line-height:40px;float:right;.m4width:250px;background-color:#309;text-align:center;line-height:40px;adisplay:block;text-decoration:none;a:hoverwidth:250px; line-height:40px;background-color:#CF3;無標(biāo)題文檔import url(style/style01.css);bodybackground-color:

17、#f0eee1;margin-left: 0px;margin-top: 0px;margin-right: 0px; 網(wǎng)站首頁 客戶信息 產(chǎn)品展示 網(wǎng)站首頁 客戶中心 聯(lián)系我們 產(chǎn)品展示 員工風(fēng)采        charset utf-8;/* CSS Document */atext-decoration:none;color:#65ae07;font-size:12px;.m1width:1000px;height:50px;background:#f0eee1;line-height:30px;font-size:14px;.m1 adispla

18、y:block;text-decoration:none;.m1 a:hoverbackground-color:#CCC;text-align:center;.m3 adisplay:block;text-decoration:none;實(shí)訓(xùn)感想：實(shí)訓(xùn)剛剛開始的時(shí)候由于自己的基礎(chǔ)不夠扎實(shí)，所以當(dāng)時(shí)跟不上老師的步伐，只能一個(gè)人獨(dú)自坐，慢慢的由于熟能生巧，我慢慢的就跟上來了。一個(gè)步驟的開始就可以連著幾個(gè)步驟，同學(xué)們也在認(rèn)真的幫助我，我很感動(dòng)。同時(shí)我也學(xué)會(huì)了使用快捷鍵，以前我很不在意這，因?yàn)楦杏X那是在取巧?？墒乾F(xiàn)在效率的明顯提高讓我慢慢的開始重視它的使用了?？旖萱I的使用，這是 Photoshop

19、基礎(chǔ)中的基礎(chǔ)，卻也是提高工作效率的最佳方法。快 捷鍵的使用，使你可以將精力更好的集中在你的作品而不是工具面板上。一旦你能夠熟練的 使用快捷鍵，你就可以使用全屏的工作方式，省卻了不必要的面板位置，使視野更開闊，最 大限度的利用屏幕空間；一些簡單的命令可以用鍵盤來完成，不必分心在工具的選擇上，哪 怕它只占用了極少的時(shí)間，但我們更希望在工作的過程中能夠更有效率。我們把網(wǎng)頁設(shè)計(jì)與制作中涉及到的理論和實(shí)踐更好的結(jié)合起來，我對(duì)網(wǎng)頁設(shè)計(jì)與制作這本書有了更深的理解，在flash制作方面有了很大提高，操作能力也得到了增強(qiáng)，使我們了解到無論做什么事都要有足夠的耐心，還要認(rèn)真細(xì)心。在做題時(shí)要對(duì)自己做過得東西進(jìn)行仔細(xì)

20、的檢查，同時(shí)也使我了解到同學(xué)之間要相互協(xié)作、共同努力。這次培養(yǎng)和考察了我對(duì)計(jì)算機(jī)的實(shí)際應(yīng)用能力，注重了技術(shù)技能的培訓(xùn)，每一步驟和每一技能點(diǎn)相對(duì)應(yīng)，使我對(duì)Photoshop有了更深一層的了解。更進(jìn)一步的熟悉和掌握一些技能，將書本上的知識(shí)和實(shí)際合理的結(jié)合在一起。要真正的掌握和使用一個(gè)圖像處理軟件，不僅僅要掌握軟件的操作，還需要掌握圖像和圖形方面的知識(shí)，比如圖像類型、圖像格式和顏色模式，以及一些色彩的原理知識(shí)等。也只有這樣，才能按要求，合乎情理，有效地發(fā)揮創(chuàng)意，創(chuàng)培訓(xùn)，每一步驟和每一技能點(diǎn)相對(duì)應(yīng)，使我對(duì)Photoshop有了更深一層的了解。更進(jìn)一步的熟悉和掌握一些技能，將書本上的知識(shí)和實(shí)際合理的結(jié)合在一起。要真正的掌握和使用一個(gè)圖像處理軟件，不僅僅要掌握軟件的操作，還需要掌握圖像和圖形方面的知識(shí)，比如圖像類型、圖像格式和顏色模式，以及一些色彩的原理知識(shí)等。也只有這樣，才能按要求，合乎情理，有效地發(fā)揮創(chuàng)意，創(chuàng)在這為期兩周的實(shí)訓(xùn)中通過老師的認(rèn)真講解，讓我對(duì)所學(xué)的