ui實習報告範文

　篇一：UI網頁設計實訓報告

實訓內容：

第一週的時候老師對我們以往學習的知識進行了詳細的瞭解，對我們以前學習不到的知識進行了總結，別且勉勵我們在今後學習的道路上不驕不躁。老師對向我們灌輸了網站的搭配技巧和大致結構，這些只能在公司的實踐中才能得到的東西，我們在老師的幫助下得到了大致的瞭解，感謝老師。前幾天老師主要講解了PS的知識，比如怎麼做燈光效果，我們在下午的時候進行了練習。老師説在2個星期的時間裏學習到很多的知識是不可能的，但是我們要有信心和勇氣去學習，只有自己不放棄才能得到自己想要的知識。在讓我們得到理論知識灌輸的同時，老師注重我們的實踐，實踐是根本，沒有實踐的東西是不成形的，也是不可靠的，無論怎麼樣的想象，沒有起飛總是會墜毀的。老師對於蒙版效果的使用讓我耳目一新，以前總是不重視這些不太中心的東西，但是通過老師對於蒙板的講解，我瞭解了那些外觀上的刺激和強悍的作用，往往能讓人耳目一新。

老師對於蒙版的使用以及做出的一些精美的圖片，讓我認識到了蒙版的重要性。因為現在的人們對於美觀的要求性很高，我們需要對此下很大的功夫，這樣做出的東西才能滿足人們的口味。長久經驗的積累讓老師在這個行業走的很遠，以後我會更加努力的實踐，讓自己在走上社會的道路上有一個良好的基礎。

老師講解的PS知識對PS進行了剖析，許多小技巧讓我們在作圖的時候效率有了很大的提高。 大概可以分為以下幾類：1.魔棒、套索、矩形選區工具、圓形選區工具、像素選擇工具等等，這一類使用簡單，對規則圖形和對比度大的圖像進行操作;2.通道選擇法，以不同顏色通道的亮度及對比度為基礎，進行繪製及選擇;3.矢量路徑方法選擇，工具包含繪製的圖形、鋼筆工具、網格工具等;

4.圖像具有相對複雜的背景，前景(即我們要扣取的對象)邊緣細微，例如髮絲毛髮等，可用抽出這類的濾鏡或者用其他第三方濾鏡，如Knockout、Mask Pro、ReMask、蒙娜麗莎等等;5.要扣取的前景具有半透明屬性，例如婚紗、水珠、氣泡、玻璃製品等，最好選用各種第三方濾鏡進行操作(因為功能較強，摳圖效果好)，例如Knockout、Mask Pro、ReMask、蒙娜麗莎等;6.圖像複雜，單種工具無法完成摳圖，就要考慮多種工具和濾鏡組合扣取。

他還讓我們記住一些常用的快捷鍵如：比如，按住Ctrl Alt鍵拖動鼠標可以複製當前層或選區內容; 如果你最近拷貝了一張圖片存在剪貼板裏，Photoshop在新建文件(Ctrl N)的時候會以剪貼板中圖片的尺寸作為新建圖的默認大小。要略過這個特性而使用上一次的設置，在打開的時候按住Alt鍵(Ctrl Alt N);如果創作一幅新作品，需要與一幅已打開的圖片有一樣的尺寸、解析度、格式的文件。只要選取“文件”→“New”，點Photoshop菜單欄的Windows選項，在彈出菜單的最下面一欄點擊已開啟的圖片名稱就ok(實在太方便了);在使用自由變換工具(Ctrl T)時按住Alt鍵(Ctrl Alt T)即可先複製原圖層(在當前的選區)後在複製層上進行變換;Ctrl Shift T為再次執行上次的`變換，Ctrl Alt Shift T為複製原圖後再執行變換。使用“通過複製新建層(Ctrl J)”或“通過剪切新建層(Ctrl J)”命令可以在一步之間完成拷貝到粘貼和剪切到粘貼的工作;通過複製(剪切)新建層命令粘貼時仍會放在它們原來的地方，然而通過拷貝(剪切)再粘貼，就會貼到圖片(或選區)的中心;若要直接複製圖像而不希望出現命名對話框，可先按住Alt鍵，再執行“圖像”→“副本”命令;Photoshop的剪貼板也很好用，但你更希望直接使用Windows系統剪貼板，直接處理從屏幕上截取的圖像。好的，按下Ctrl+K，在彈出的面板上將“輸出到剪貼板”點中吧!

老師講解的蒙板是將不同灰度色值轉化為不同的透明度，並作用到它所在的圖層，使圖層不同部位透明度產生相應的變化。黑色為完全透明，白色為完全不透明。這些優點：1.修改方便，不會因為使用橡皮擦或剪切刪除而造成不可返回的遺憾;2.可運用不同濾鏡，以產生一些意想不到的特效;3.任何一張灰度圖都可用來用為蒙板。以及主要的作用：1.用來扣圖;2.做圖的邊緣淡化效果;3.圖層間的溶合;在蒙板上應用不同的濾鏡，便會使淡化的邊緣出現不同的效果。在蒙板和圖層之間的空處有一個鏈接符號，默認是鏈接着的，點擊可解開蒙板與圖層的鏈接。此時如果移動圖層或蒙板，只會移動你選擇的相應圖層或蒙板，這點與圖層間的鏈接是一回事。扣比較複雜的圖，比喻人的頭髮，植物的枝葉等時，可將圖片轉為CMYK或LAB等不同顏色模式，找出一個對比最強，邊緣輪廓最清晰的通道，調整其色階，然後應用到蒙板，再作進一步修整。這些東西不僅僅教會了我們東西，更加的讓我的態度得到了端正。老師説態度很重要，沒有了端正的態度如何能用自己的心將自己的靈感融入到自己的作品中去，一個良好的態度是一個好的開端，同時也是自己能在做作品的時候用自己靈感澆築眼下的作品。

這是老師的作品讓我們網站頁面的設計和圖形視覺的認識有了一個全新的瞭解，一張圖片有好的顏色和文字的合理設計才會讓被人認同你的作品，所以這一週的ps實訓使我對PS有了全新的認識。而真正的知識是理解和認知，而不是那些瑣碎的篇幅。

第二週的時候這一週老師給我們講了當前最流行的網頁佈局的方法Div+css，老師也講了層佈局與表格佈局的區別，他們都是網頁佈局的方式，一個便於以後的維護、一個便於製作他們各有好處，需要設計人員在製作時自己來取捨的，並且還有一些設計技巧：1、靈活運用樣式

熟悉網頁設計的網友就知道，調用Style的方法很多，我們可以單擊鼠標右鍵選擇Custon Style來調用Style標準，也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準，在網頁代碼中就生成一個〈span〉標籤，這樣的標籤一多就會使文件十分臃腫而且影響瀏覽器的解析速度，所以我們應儘量使用狀態欄中的元素列表來調用Style。

2、要讓Windows(特別是95/NT)使用定製的顯示器 匹配曲線，只需要如下操作：

(1)在開始菜單的“啟動”中刪除“Adobe Gamma Loader”。

(2)確定ICM曲線的路徑/名稱(基本上是處在C:WinNTSystem32Color中)。

(3)運行RegEdit，找到如下項目：

HKEY_LOCAL_MACHINE>Software>Adobe>Color>Monitor>Monitor0

(4)創建一個新的項，叫做“Monitor Profile”

(5)在這個顯示器曲線的項中輸入步驟2中的路徑/名稱。

注意：在設置了這個曲線後，由於Adobe Gamma已經重新配置了Adobe Gamma Loader，因此不要再運行它。

3、同時鏈接到兩個網頁我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”JavaScript 行為。打開一個有框架的網頁，選擇文字或圖象，然後從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架並輸入相應的URL後再選擇另一個框架並輸入另一個URL。

4、不給文件起中文名稱

大家在製作好了網頁後，通常會給網頁起一個具有代表性的中文名稱，一來能使人一看文件名就能大概瞭解文件所包含的內容，二來能夠方便各個超級鏈接之間的相互調用。但如果你在Dreamweaver中這樣做，就會發現Dreamweaver對中文文件名支持得不是太好，經常會有頁面調用不正確的現象發生，所以我們以後在Dreamweaver中保存網頁的時候，儘量用英文或者數字作為文件名稱，這樣就可以避免上面的出錯現象。

5、要創建網絡安全顏色，須確保色彩的R、G和B元素都是十六進制數的33或十進制的51的倍數，任何以下的值都是可接受的：00 (0)、33 (51)、66 (102)、 99 (153)、CC (204)、FF (255)。

6、巧妙隱藏標籤

如果在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一個與之相應的元素標籤，以便於我們選擇不可見元素。但這並不全是件好事，比我們在一個有很多層的頁面中的第一行便插入一個表格，就會發現由於首行排列了太多的層元素標籤而使得表格自動退到了頁面的第二行。