Photoshop界面設計基礎教程

《Photoshop界面設計基礎教程》第一章用戶界面設計什么是界面設計界面設計是為了滿足專業(yè)化，標準化的需求而產生的對軟件的使用進行美化，優(yōu)化和規(guī)范化的設計分支。圖形界面的分類軟件界面網站界面網站界面必須具有創(chuàng)意性和獨立性，但最重要的是讓用戶更方便的查找信息，能夠感受到簡便的操作所帶來的樂趣。手機界面系統(tǒng)桌面界面游戲界面播放器界面交互概念與圖形界面人機交互是一門研究用戶與系統(tǒng)之間交互關系的學問，系統(tǒng)可以是計算機化的系統(tǒng)和軟件。圖形界面通常指的是用戶可見的部分，是人與計算機或者軟件之間傳遞，交換信息的媒介和對話的接口，是用戶與系統(tǒng)之間交流的平臺，它們之間有著緊密的聯(lián)系，但又是兩個完全不同的概念。導航欄和按鈕的設計要點導航欄導航欄通常是指位于頁眉區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導航按鈕，它起著鏈接各個頁面的作用。導航欄如果設計得恰到好處會給網頁本色增色很多，但設計不要過于花哨，導航欄屬于功能物件，切莫喧賓奪主。在導航欄的設計中需要注意以下幾點：導航欄目不多的情況下，通常是一排，橫豎都可以。當欄目超過6個，就可以考慮使用兩排。導航欄目很多的情況下也可以采用多排形式，甚至是不規(guī)則的多排，商業(yè)設計或用戶網站通常都會有多個頻道，設計的時候一般考慮橫向雙排，使用豎排會占用太大的空間。多排導航未必一定要排在一起，可以自由發(fā)揮想象設計出更加靈活新穎的版式。通常在內容不多的情況下，可能無所謂欄目，站點就包括了導航的具體內容。圖片式導航雖然較為美觀，但占用空間較大。包含信息較多的網站可以考慮使用快捷導航，這樣瀏覽者無論進入哪個頁面都可以快速跳轉到另外的欄目，這樣更利于操作。目前網站中使用較多的是體積小，且具有視覺沖擊力的Flash導航欄。按鈕網頁中按鈕的設計主要有以下幾點要點：按鈕要與頁面的整體效果相協(xié)調，不能喧賓奪主。如果頁面中的內容單一，如大段的文字，主體顏色過于單調或圖片色彩過于單一，就需要依靠花哨的按鈕來點綴?？紤]圖片與字體搭配，要考慮字體是否清楚，色彩搭配是否協(xié)調統(tǒng)一，整個頁面的顏色最好不要超過4種。很長的按鈕可以框架的分解，要盡量纖細一些，否則頁面會顯得過于臃腫，進而導致整個頁面的效果受到影響。數字化圖像基礎位圖圖像位圖圖像也叫點陣圖像，是由一個個像素點組成的。這些點可以進行不同的排列和染色已構成樣式。當放大位圖時，可以看見構成整個圖像的無數個像素點。位圖圖像可以表現(xiàn)豐富的色彩變化并產生逼真的效果，很容易在不同軟件之間交換使用，但它保存圖像時需要記錄每一個像素點的色彩信息，因此占用的存儲空間比較大，在進行旋轉或放大時會產生鋸齒。1.5.2矢量圖像矢量圖像是由稱作矢量的教學對象定義的直線和曲線構成的，它最基本的單位是錨點和路徑，平常所見到和使用的矢量圖形作品是由矢量軟件創(chuàng)建的。矢量圖形與分辨率無關，它最大的優(yōu)點是占用的存儲空間較小，并且可以任意旋轉和縮放而不會影響圖像的清晰度。初識PhotoshopCC.菜單欄.標題欄.選項欄.文檔窗口.工具箱.面板.狀態(tài)欄1.7文件的基本操作新建文件打開文件存儲文件PSD格式JPEG格式TIF格式1.8多選選區(qū)的創(chuàng)建與編輯方法選區(qū)的創(chuàng)建創(chuàng)建規(guī)則形狀選區(qū)創(chuàng)建不規(guī)則形狀選區(qū)選區(qū)的基本操作全選取消選擇重新選擇反向1.8.3選區(qū)的編輯移動選區(qū)通過命令對選區(qū)進行編輯變換選區(qū)為選區(qū)描邊隱藏和顯示選區(qū)圖像的變換操作斜切圖像扭曲圖像透視圖像變形圖像翻轉圖像自由變換圖像設置顏色方法使用“吸管工具”選取顏色使用“填充”命令設置顏色使用“拾色器”對話框設置顏色使用“色板”面板設置顏色使用“顏色”面板設置顏色第二章圖標設計圖標設計的意義圖標的概念圖標的概念從廣義上來說，是指指代意義的圖形符號，具有快速傳達被信息和辨于記憶的特性。從狹義上來說，圖標僅應用于計算機軟件方面，包括程序標識，數據標識，命令選擇，模式信號，切換開關和狀態(tài)指示圖標等。圖表設計的作用一個圖標代表了一個文件，程序和命令。圖標可以幫助用戶快速執(zhí)行各種命令或打開應用程序。此外，圖標用于瀏覽器中快速展示內容。圖標的設計原則可識別性原則與環(huán)境協(xié)調原則差異性原則視覺效果原則創(chuàng)造性原則圖層就如同一些堆疊在一起的透明紙張，每一張都承載著不同的圖像，這些圖像按照一定的順序排列在一起，構成一幅完整的圖像?！皥D層”面板選取濾鏡類型圖層混合模式鎖定圖層組指示圖層可見性不透明度填充背景圖層面板按鈕圖層的類型文字圖層調整圖層形狀圖層填充圖層純色漸變圖案圖層的創(chuàng)建與基本操作圖層的創(chuàng)建使用“新建”命令新建圖層在“圖層”面板中創(chuàng)建新圖層使用“通過拷貝的圖層”命令新建圖層使用“通過剪切的圖層”命令新建圖層圖層的基本操作移動圖層復制圖層調整圖層的疊放排序刪除圖層2.727種混合模式的原理與特征組合模式組加深模式組減淡模式組對比模式組比較模式組色彩模式組2.8.1“畫筆工具”選項欄畫筆模式不透明度8.2“畫筆”面板畫筆預設畫筆設置未鎖定選中的畫筆筆尖畫筆筆尖形狀畫筆選項畫筆預覽創(chuàng)建新畫筆打開預設管理器切換實時筆尖畫筆預覽2.9擦除工具橡皮檫工具模式不透明度流量抹到歷史記錄背景橡皮檫工具“取樣：連續(xù)”按鈕“取樣：一次”按鈕“取樣：背景色板”按鈕限制容差保護前景色魔術橡皮檫工具第三章登錄界面設計如何設計人性化的登錄界面登錄界面是網頁和軟件中較為常見的，它必須在有限的空間中，妥善地排列所用的圖片，個性元素和登錄框等內容。在設計的過程中首先要考慮用戶使用的便利程度，不應該太過復雜，在能夠實現(xiàn)其應有功能的前提下更美觀。非登錄界面的功能安排表單排列驗證碼登錄界面的設計原則任務明確流程清楚設計精簡登錄界面的設計特點登錄界面的設計要求用戶名和密碼登錄界面是需要登錄者提供賬號，密碼及驗證碼的界面，有控制用戶權限，記錄用戶行為和保障操作安全的作用。登錄界面一般需要用戶填入用戶名和密碼，輸入框前要有提示。如果是郵箱等產品，還需要讓用戶了解是需要將全部郵箱名都填入，還是只需要填入自己的用戶名。忘記密碼用戶在某些時候可能會忘記密碼，因此在密碼輸入框附近需要有忘記密碼等尋找密碼的鏈接。提示信息如果用戶名和密碼輸入錯誤，需要有提示信息，最好登錄界面后臺可以檢測密碼是否正確，節(jié)省用戶提交服務器的時間。注冊新用戶登錄區(qū)域附近需要有“注冊新用戶”的鏈接，但在位置或視覺沖擊力上不能超過“登錄”按鈕。應用圖層的樣式執(zhí)行“圖層-＞圖層樣式”下拉菜單的樣式命令在“圖層”面板中單擊“添加圖層樣式”按鈕雙擊相應圖層縮略圖的空白區(qū)域可以打開“圖層樣式”對話框5.2“圖層樣式”對話框斜體和浮雕樣式方法深度大小軟化角度/高度光澤等高線消除鋸齒高光模式陰影模式等高線紋理描邊大小位置混合模式不透明度填充類型內陰影距離阻塞大小等高線內發(fā)光和外發(fā)光混合模式不透明度雜色發(fā)光顏色方法源阻塞大小光澤顏色疊加漸變疊加圖案疊加投影混合模式投影顏色不透明度角度使用全局光距離大小擴展等高線消除鋸齒雜色用圖層挖空投影.3“樣式”面板圖層蒙版的原理與應用什么是圖層蒙版創(chuàng)建圖層蒙版編輯圖層蒙版啟用與停用圖層蒙版剪貼蒙版的原理與應用剪貼蒙版的原理剪貼蒙版的應用文本的創(chuàng)建與編輯文字創(chuàng)建創(chuàng)建點文字創(chuàng)建段落文字編輯文字將文字轉化為選區(qū)將文字轉化為路徑將文字轉換為形狀創(chuàng)建變形文字第四章網頁界面設計初始網頁界面設計網頁界面的概念網頁界面一般指的是日?？吹降木W站頁面，它基本由工具欄，地址欄，狀態(tài)欄，菜單欄，主菜單，子菜單，搜索欄，標志，文字和圖像等構成。網頁界面設計的要求網頁界面設計的特點交互性，版式的不可控性，技術與藝術結合的緊密型，多媒體的綜合性和多維性。網頁設計的概述網頁界面設計的分類環(huán)境性界面情感性界面功能性界面網頁設計的原則視覺美觀性性原則主題突出原則整體原則為用戶考慮原則使用者優(yōu)先概念考慮用戶的網絡連接考慮用戶瀏覽器內容與形式相統(tǒng)一原則標志，主題，圖像，文字，形象和題材等要素，而形式就是其整體風格和結構等表現(xiàn)形式。形式美必須符合主題的需要網頁上的每一個元素都要有存在的意義，不能為了體現(xiàn)超高的技術，而使用過多不必要的元素。網頁具有多屏，分頁和嵌套特性，因此在注意單個頁面形式與內容統(tǒng)一的同時還要注意由頁面組成的整體網站的形式與內容的統(tǒng)一。更新和維護原則服務器及相關軟硬件的維護，對可能出現(xiàn)的問題進行評估，制訂相應的計劃。數據庫維護就是有效地利用數據，是網站維護的重要內容。內容的及時更新和調整。制訂相關網站維護的規(guī)定，將網站的維護做到制度化和規(guī)范化做好網站安全管理，防止黑客入侵網站，檢查網站個肝功能，以及鏈接是否有錯。網頁界面構成元素文字圖像色彩多媒體網頁界面布局形式標題型標題型網頁的表現(xiàn)形式是，上邊是標題，下面是文字部分，常用于一些文字文章，公司簡介和注冊頁面。圖片型圖片型網頁的設計，給人形象，直觀和精美的感覺，通常出現(xiàn)在服裝類頁面，時尚類網頁或企業(yè)網站，它的優(yōu)點是醒目，美觀和視覺感染力強，最大的弊端就是下載速度慢。動畫型動畫型網頁是目前非常流行的一種網頁設計的表現(xiàn)形式，它主要指的是Flash,由于Flash強大的功能，使得頁面表達的信息更形象，直觀且視覺效果突出。左右框架型上下框架型同左右框架相似,不同之處在于上下框架型是上下結構布局的頁面。圖像調整命令“色階”命令預設通道輸入色階輸出色階自動選項設置黑場設置灰場設置白場.2“曲線”命令預設通道圖像調整工具編輯點以修改曲線通過繪制來修改曲線平滑輸入色階/輸出色階高光/中間調/陰影設置黑場/設置灰場/設置白場顯示數量網格大小顯示自動選項4.6.3“色彩平衡”命令色彩平衡色調平衡“亮度/對比度”命令“色相/飽和度”命令預設遍及范圍色相飽和度明度圖像調整工具顏色條著色吸管工具4.6.6“自然飽和度”命令自然飽和度飽和度4.6.7“匹配顏色”命令目標應用調整是忽略選區(qū)明亮度顏色強度漸隱中和使用源選區(qū)計算調整源圖層調整圖層與調整命令的區(qū)別靈活性蒙版調整圖層的創(chuàng)建與編輯第五章手機界面設計手機界面設計的重要性總的來說，我們應該遵循提高效率，易學習和實用性原則來設計手機界面。手機界面設計的要求界面效果的整體性和一致性軟件界面的總體色彩應該接近和類似系統(tǒng)界面的總體色調，一款外觀與系統(tǒng)界面不統(tǒng)一的手機，會給用戶帶來不適感。要合理地結合系統(tǒng)界面設計圖標，按鈕的風格及不同操作狀態(tài)下的視覺效果。手機用戶的操作習慣是基于系統(tǒng)的，所以在界面設計的操作流程上，也是遵循系統(tǒng)的規(guī)范性，讓用戶會用手機會使用軟件，簡化操作流程。界面效果的個性化手機界面不僅要體現(xiàn)整體性和一致性，也要著重突出軟件界面的個性。整體性和一致性是基于手機系統(tǒng)視覺效果的和諧統(tǒng)一考慮的，個性是基于軟件本身的特征和用途考慮的。特有的界面構架專有的界面圖標界面色彩的個性化設置界面視覺元素的規(guī)范圖形圖像元素的質量線條色塊與圖形圖像的結合手機界面設計的特征手機的顯示屏相對較小手機界面交互過程不宜設計得太復雜不同型號的手機支持的圖像格式，音頻格式和動畫格式不一樣不同型號的手機屏幕比例不一樣，設計時要考慮圖片的自適應問題和界面元素圖片布局問題手機界面設計的基本常識QVGAHVGAWVGAQCIF5.SVGA6.WXGA手機的色彩級別目前，市場上彩屏手機的色彩指數從低到高可分為單色，256色，4096色，65536色，26萬色和1600萬色。手機的顯示內容主要可分為文字，簡單圖像和照片，不同色彩級別屏幕的顯示效果截然不同。文字通常只需要很少的顏色就能正常表現(xiàn)，而色彩細膩豐富的圖像則需要色彩級別更高的屏幕才能完美地表現(xiàn)出來。圖標的格式PNGGIFJPEGBMPTIFF5.4.4圖標的尺寸iosAndroidWindowsphone路徑與錨點使用“鋼筆工具”繪制路徑鋼筆工具“鋼筆工具”選項欄形狀路徑像素填充/描邊描邊高度對齊分布形狀堆疊方式路徑操作描邊類型擴展設置建立類型選區(qū)蒙版形狀自由鋼筆工具幾何選項磁性的創(chuàng)建路徑選擇與編輯路徑選擇與移動錨點與路徑添加與刪除錨點轉換錨點類型調整路徑形狀變換路徑“路徑”面板認識“路徑”面板路徑工作路徑矢量蒙版用前景色填充路徑用畫筆描邊路徑將路經作為選區(qū)載入從選區(qū)生成工作路徑添加圖層蒙版創(chuàng)建新路徑刪除當前路徑工作路徑和路徑創(chuàng)建新路徑顯示和隱藏路徑復制和刪除路徑將路經轉換為選區(qū)將選區(qū)轉換為路徑填充路徑內容模式不透明度保留透明區(qū)域羽化半徑消除鋸齒形狀工具矩形工具，圓角矩形工具和橢圓工具多邊形工具和直線工具自定形狀工具第六章軟件界面設計軟件界面發(fā)展歷程軟件界面的發(fā)展經歷了從低級到高級，從簡單到復雜的過程，軟件界面在軟件系統(tǒng)中的性價比越來越高，好的軟件界面要求實用，易用，美觀，軟件界面不僅可以讓軟件變得個性化，還可以使軟件的操作變得更加人性化。軟件界面的設計介紹軟件界面設計是科學性的藝術設計，不僅要求設計師具有良好的美術功底，還需要定位使用者，使用環(huán)境和使用方式，設計的初衷是為用戶服務。軟件界面設計的“黃金法則”易用性從用戶的觀點出發(fā)通俗易懂的語言考拉用戶的熟悉程度清晰性一致性靈活性安全性人性化軟件界面設計的分類軟件界面是用戶與系統(tǒng)進行交互的媒介，這些系統(tǒng)不僅僅包括計算機系統(tǒng)，還包括某些機器，硬件設備和工具等。軟件界面設計的范圍比較廣泛，最常見的軟件界面設計包括計算機軟件，手機界面設計，輸入法界面設計和播放器界面設計等。軟件界面設計中的屏幕設計布局文字用語顏色解讀“畫筆”面板中的選項畫筆筆尖形狀大小翻轉X/翻轉丫角度圓度硬度間距七種畫筆動態(tài)參數形狀動態(tài)大小抖動控制最小直徑角度抖動圓度抖動最小圓度翻轉X抖動/翻轉Y抖動畫筆投影散布散布兩軸數量數量抖動紋理選擇紋理反相縮放亮度對比度為每個筆尖設置紋理模式深度最小深度深度抖動雙重畫筆、模式翻轉大小間距散布數量顏色動態(tài)應用每筆尖前景/背景抖動色相抖動飽和度抖動亮度抖動純度傳遞不透明度抖動最小流量抖動濕度抖動混合抖動畫筆筆勢傾斜X/傾斜Y覆蓋傾斜X/覆蓋傾斜Y旋轉壓力覆蓋壓力設置附加選項雜色濕邊平滑PhtotshopCC中的濾鏡什么是濾鏡濾鏡的類型認識濾鏡庫預覽區(qū)濾鏡組參數設置新建效果圖層刪除效果圖層預覽縮放濾鏡圖層7.4常見的濾鏡高斯模糊徑向模糊數量模糊方法品質中心模糊鏡頭模糊深度映射光圈鏡面高光雜色分布單色云彩添加雜色鏡頭光暈USM銳化濾鏡的使用規(guī)則和技巧濾鏡的使用規(guī)則使用濾鏡處理圖層中的圖像時，該圖層必須是可見的。如果創(chuàng)建了選區(qū)，濾鏡只應用于選區(qū)內的圖像，沒有創(chuàng)建選區(qū)，則應用于當前圖層。濾鏡可以應用在圖層蒙版。只有“云彩”濾鏡可以應用在沒有像素的區(qū)域，其他濾鏡都必須應用在包含像素的區(qū)域RGB顏色模式的圖像可以使用全部濾鏡，部分濾鏡不能用于CMYK顏色模式的圖像，索引模式和位圖模式的圖像不能使用濾鏡。如果需要對位圖，索引或CMYK顏色模式的圖像應用一些特殊濾鏡，可先將其轉換為RGB顏色模式，再進行處理。文字須轉換為圖形后，才能夠應用濾鏡。濾鏡的使用技巧智能濾鏡創(chuàng)建智能對象編輯智能對象第七章播放器界面設計播放器界面設計的特點統(tǒng)一協(xié)調性統(tǒng)一協(xié)調性是指播放器界面各個元素的風格應該協(xié)調統(tǒng)一，這是任何類型的界面設計都應該遵循的原則。統(tǒng)一原則和創(chuàng)意性原則并不矛盾。統(tǒng)一性著重強調播放器界面內的各個功能要協(xié)調統(tǒng)一，創(chuàng)意性則強調播放器界面的整體風格要別具一格。創(chuàng)造性所有播放器的功能基本相同，只有創(chuàng)意才能從各種鋪天蓋地的界面設計中脫穎而出。網上有很多創(chuàng)意絕妙的圖標，按鈕和各種界面設計，這些鬼斧神工的作品常常充滿了靈性，給用戶帶來強烈的情感共鳴和視覺震撼力，令人過目不忘。視覺沖擊力如果說創(chuàng)意性是針對播放器整體外觀和功能而言，那么視覺沖擊力無疑是最大程度強調視覺效果了，隨著生活質量不斷