電商圖像處理技術(shù)-PhotoshopCC實戰(zhàn) 課件 第12、13章 濾鏡、手機UI設(shè)計基礎(chǔ)

第十二章濾鏡本章介紹本章主要介紹濾鏡的使用方法。通過本章的學(xué)習(xí)，可以掌握濾鏡的功能和使用技巧，從而能制作出更精美的圖像。能力目標掌握濾鏡的用途掌握濾鏡的使用技巧掌握每組濾鏡的效果學(xué)習(xí)目標能根據(jù)要求給圖像做出濾鏡效果12.1濾鏡的用途Photoshop中自帶的濾鏡有兩種用途：一種是用于給圖像做特效，如風(fēng)格化、扭曲、素描、紋理、像素化、渲染、藝術(shù)效果等；另一種是用于編輯圖像，如減少雜色、提高清晰度，有模糊、銳化、雜色、消失點、液化等。12.2濾鏡的使用技巧Photoshop中自帶的濾鏡有兩種用途：一種是用于給圖像做特效，如風(fēng)格化、扭曲、素描、紋理、像素化、渲染、藝術(shù)效果等；另一種是用于編輯圖像，如減少雜色、提高清晰度，有模糊、銳化、雜色、消失點、液化等。12.2濾鏡的使用技巧在用完一個濾鏡后，如果感覺效果不夠明顯，想再用一次上次用過的濾鏡，那么可以直接按下Ctrl+F快捷鍵。12.3提高濾鏡性能在Photoshop中使用濾鏡時，會占用大量的內(nèi)存，所以可以將其他地方占用的內(nèi)存進行清理。這樣就可以釋放出更多的空間來運行濾鏡。單擊“編輯”→“清理”中的命令即可。12.4智能濾鏡智能濾鏡和普通濾鏡做出來的效果是一樣的，智能濾鏡是一種非破壞性的濾鏡，給圖層用了智能濾鏡后，對于圖層是不進行像素修改的，只是給圖層用一種濾鏡的效果和圖層樣式差不多，如果不需要這種濾鏡效果，可以直接將其刪除?！緦嵱?xùn)一】要求根據(jù)原圖，制作出圖12-1的效果圖。目的通過本實訓(xùn)，掌握智能濾鏡的應(yīng)用、刪除等使用方法。圖12-1本實訓(xùn)效果圖12.5風(fēng)格化濾鏡組風(fēng)格化濾鏡組中包含9種濾鏡，產(chǎn)生繪畫和印象派風(fēng)格效果。查找邊緣“查找邊緣”濾鏡能自動搜索圖像像素對比度變化劇烈的邊界，將高反差區(qū)變亮，將低反差區(qū)變暗，其他區(qū)域則介于兩者之間，硬邊變?yōu)榫€條，而柔邊變粗，形成一個清晰的輪廓，圖12-2是應(yīng)用“查找邊緣”濾鏡前后對比圖。圖12-2應(yīng)用“查找邊緣”濾鏡前后對比圖浮雕效果“浮雕效果”濾鏡可以通過勾劃圖像或選區(qū)輪廓和降低周圍色值來凸起或凹陷的浮雕效果，圖12-3是用“浮雕效果”濾鏡后的效果。圖12-3“浮雕效果”濾鏡效果圖12.6模糊濾鏡組模糊濾鏡組中包含了11種濾鏡，它們可以將圖像的清晰度降低，將圖像做出模糊的效果。動感模糊“動感模糊”濾鏡可以制作出指定角度、強度模糊的效果。在表現(xiàn)圖像的速度感時會經(jīng)常用到該濾鏡，如圖12-4。圖12-4使用了“動感模糊”濾鏡效果表面模糊這個濾鏡非常適用，“表面模糊”濾鏡能夠在保留邊緣的同時模糊圖像，可用來消除雜色或顆粒，一般對人物面部可以進行磨皮。圖12-5是磨皮前后對比圖。圖12-5磨皮前/后對比圖徑向模糊“徑向模糊”濾鏡可以模擬縮放或旋轉(zhuǎn)的相機所產(chǎn)生的模糊效果，圖12-6是使用“徑向模糊”濾鏡前后對比。圖12-6使用“徑向模糊”濾鏡前后對比12.7扭曲濾鏡組12.7扭曲濾鏡組“波浪”濾鏡可以在圖像上創(chuàng)建波伏起伏的圖案，生成波浪效果，如圖12-7是使用“波浪”濾鏡前后對比圖。圖12-7“波浪”濾鏡使用前后對比波

紋“波紋”濾鏡與“波浪”濾鏡的工作方式相同，但“波紋”只能控制波紋的數(shù)量和波紋大小，如圖12-8是使用“波紋”濾鏡前后對比圖。圖12-8使用“波紋”濾鏡前后對比圖水

波“水波”濾鏡可以制作出類似于水池中的波紋的效果，就像是石子扔到水里后水面產(chǎn)生的波紋，圖12-9是使用“水波”濾鏡前后對比圖。圖12-9使用“水波”濾鏡前后對比圖12.8銳化濾鏡組銳化濾鏡組中包括5種濾鏡，主要是是可以增加圖像的清晰度。主要是通過增強相鄰像素間的對比度來聚焦模糊的圖像，使圖像變清晰。銳化與進一步銳化“銳化”濾鏡如果使用一次效果不是特別明顯，可以使用“進一步銳化”濾鏡，使用一次“進一步銳化”濾鏡比使用“銳化”濾鏡的強度高2-3倍。銳化邊緣“銳化邊緣”濾鏡只銳化圖像的邊緣，同時保留總體的平滑度，圖12-10是使用“銳化邊緣”濾鏡前后對比圖。圖12-10使用“銳化邊緣”濾鏡前后對比12.9像素化濾鏡組像素化濾鏡組中包含7種濾鏡，它們是通過使單元格中顏色值相近的像素結(jié)成塊來清晰地定義一個選區(qū)，可用于創(chuàng)建彩塊、點狀、晶格和馬賽克等效果。彩色半調(diào)“彩色半調(diào)”濾鏡可以使圖像變?yōu)榫W(wǎng)點狀效果。它先將圖像的每一個通道劃分出矩形區(qū)域，再以和矩形區(qū)域亮度成比例的圓形替代這些矩形，圓形的大小與矩形的亮度成比例，高光部分生成的網(wǎng)點較小，陰影部分生成的網(wǎng)點較大，圖12-11使用“彩色半調(diào)”濾鏡前后對比圖。圖12-11使用“彩色半調(diào)”濾鏡前后對比圖馬賽克“馬賽克”濾鏡可以使像素結(jié)為方形塊，再給塊中的像素應(yīng)用平均的顏色，創(chuàng)建出馬賽克效果，圖12-12使用“馬賽克”濾鏡前后對比圖。圖12-12使用“馬賽克”濾鏡前后對比點狀化“點狀化”濾鏡可以將圖像中的顏色分散為隨機分布的網(wǎng)點，網(wǎng)點之間的分布顏色為背景色，圖12-13使用“點狀化”濾鏡前后對比圖。圖12-13使用“點狀化”濾鏡前后對比圖12.10渲染濾鏡組渲染濾鏡組中包含5種濾鏡，這些濾鏡可以在圖像中創(chuàng)建云彩圖案、光照效果等。云

彩“云彩”濾鏡可以使用介于前景色與背景色之間的隨機生成的云彩圖案，如圖12-14是在前背色為白、藍的狀態(tài)下，做出的云彩效果。圖12-14使用“云彩”濾鏡纖

維“纖維”濾鏡可以使用前背景色的顏色隨機創(chuàng)建編織纖維效果，圖12-15是使用“纖維”濾鏡前后對比圖。圖12-15使用“纖維”濾鏡鏡頭光暈“鏡頭光暈”濾鏡可以做出類似亮光照射到像機鏡頭所產(chǎn)生的折射效果，圖。12-16是使用“鏡頭光暈”濾鏡前后對比圖。圖12-16使用“鏡頭光暈”濾鏡前后對比圖12.11雜色濾鏡組雜色濾鏡組中包含5種濾鏡，它們可以添加雜色，也可以去除雜色添加雜色“添加雜色”濾鏡可以將隨機的像素應(yīng)用于圖像，圖12-17是使用“添加雜色”濾鏡后產(chǎn)生的效果。圖12-17使用“添加雜色”濾鏡去

斑“去斑”濾鏡可以消除圖像中的斑點，圖12-18是使用“去斑”濾鏡前后對比圖。圖12-18使用“去斑”濾鏡前后對比圖蒙塵與劃痕“蒙塵與劃痕”濾鏡可通過更改相異的像素來減少雜色，圖12-19是使用“蒙塵與劃痕”濾鏡前后對比圖。圖12-19使用“蒙塵與劃痕”濾鏡前后對比本章小結(jié)本章主要講解了PhotoshopCC中的濾鏡。濾鏡是用來給圖層做特殊效果，如浮雕效果、動感模糊、波浪、馬賽克、云彩、去斑等效果。濾鏡大致可分為7組，風(fēng)格化濾鏡組、模糊濾鏡組、扭曲濾鏡組、銳化濾鏡組、像素化濾鏡組、渲染濾鏡組、雜色濾鏡組。拓展實訓(xùn)（1）——藍天白云效果的制作【知識要點】本實訓(xùn)的知識要點是分層云彩濾鏡和鏡頭光暈濾鏡的使用方法，以及天空效果制作技巧?！疽蟆课募叽?00×600px，分辨率為72，顏色模式為RGB。制作藍天效果（如圖12-20）時前景色調(diào)為R0G12B255。圖12-20本實訓(xùn)效果圖第十三章手機UI設(shè)計基礎(chǔ)本章介紹本章主要介紹了手機的樣式、手機屏幕色彩、手機尺寸、手機屏幕密度，通過這些知識使你對手機的外形有所了解。除此之外，本章還介紹了手機界面設(shè)計中的三大系統(tǒng)：iOS系統(tǒng)、Android系統(tǒng)、WindowsPhone系統(tǒng)，通過這些系統(tǒng)的介紹可以了解手機UI設(shè)計中不同的系統(tǒng)設(shè)計風(fēng)格以及規(guī)則。能力目標了解手機的樣式了解手機的屏幕色彩了解屏幕密度了解智能手機屏幕分辨率了解手機UI設(shè)計中常用的三個系統(tǒng)學(xué)習(xí)目標熟練掌握iOS系統(tǒng)UI設(shè)計規(guī)則熟練掌握Android系統(tǒng)UI設(shè)計規(guī)則熟練掌握WindowsPhone系統(tǒng)UI設(shè)計規(guī)則13.1手機的樣式手機的樣式是指手機的外觀，目前常見的手機樣式有直立式（如圖13-1所示）、折疊式（如圖13-2所示）、滑蓋式（如圖13-3所示）、側(cè)滑式（如圖13-4所示）、旋轉(zhuǎn)式（如圖13-5所示）。圖13-1直立式圖13-2折疊式圖13-3滑蓋式圖13-4側(cè)滑式圖13-5旋轉(zhuǎn)式13.2手機的屏幕色彩手機的屏幕顏色與色階有關(guān)，通常分為256色、4096色、65536～260000色，色階越高越好，價格也相應(yīng)提高。市場上的手機通常為256色（圖13-6）、4096色（圖13-7）、65536色（圖13-8）、26萬色（圖13-9）和1600萬色（圖13-10）。圖13-6索尼愛立信T68i256色圖13-7摩托羅拉E3804096色圖13-8諾基亞660065536色圖13-9LGKG20826萬色圖13-10iPhone5s1600萬色13.3智能手機的屏幕分辨率

目前市場上常見的智能手機分辨率有VGA、QVGA、HVGA、WVGA、FWVGA，這些名稱都有詳細的尺寸，如圖13-11所示。分辨率名稱尺寸縱橫比例舉例產(chǎn)品型號VGA640×4804:3黑莓9810QVGA320×2404:3諾基亞E66HVGA480×3203:2三星s5830WVGA800×4805:3LGGD900eFWVGA854×48016:9夏普SH9020c圖13-11常見智能手機屏幕分辨率13.4設(shè)計尺寸的單位

手機的屏幕尺寸是指屏幕對角線的長度，數(shù)值越高，屏幕越大。常見的手機尺寸有3.5英寸、4英寸、4.3英寸、5英寸、5.3英寸等，如圖13-12所示。5.3英寸3.5英寸圖13-12手機的不同屏幕尺寸測量示例圖13.5屏幕密度屏幕的密度，指每英寸屏幕所擁有的像素數(shù)量。例如，小米手機1的屏幕物理尺寸為4.0英寸、分辨率為854×480，它的屏幕密度是245。13.6移動設(shè)備操作系統(tǒng)生活中現(xiàn)在用的最多的移動設(shè)備是手機和平板，大多數(shù)的手機和平板上用的操作系統(tǒng)有iOS系統(tǒng)、Android系統(tǒng)、WindowsPhone系統(tǒng)。iOS系統(tǒng)iOS系統(tǒng)是由蘋果公司開發(fā)的移動操作系統(tǒng)，最初這個系統(tǒng)的名稱為iPhoneOS，直到2010年宣布改名為iOS。圖13-13為iOS系統(tǒng)界面。圖13-13iOS系統(tǒng)界面Android系統(tǒng)Android系統(tǒng)是基于Linux平臺的開源手機操作系統(tǒng)名稱，由Google公司和開放手機聰明領(lǐng)導(dǎo)及開發(fā)，中文可譯為“安卓”或“安智”。圖13-14為Android系統(tǒng)界面。圖13-14Android系統(tǒng)界面Android系統(tǒng)在正式發(fā)行之前，最開始擁有多個內(nèi)測版本，并用甜點為系統(tǒng)版本進行名稱。每個版本代表甜點的尺寸越變越大，如圖13-15。圖13-15為Android內(nèi)測不同版本名稱WindowsPhone系統(tǒng)WindowsPhone是微軟發(fā)布的一款操作系統(tǒng)，具有桌面定制、圖標拖曳、滑動控制等操作體驗，圖13-16為WindowsPhone系統(tǒng)界面。圖13-16WindowsPhone系統(tǒng)界面13.7iOS界面設(shè)計

iOS界面設(shè)計原則有以下幾條：摸點適合指尖大小，蘋果建議的觸摸目標大小為44×44像素。接控制，當(dāng)用戶沒有使用各種按鈕直接就可以觸動屏幕上的物體，會讓用戶感覺有更強的操縱感。例如，剪扣子游戲，如圖13-17所示。持界面一致性，這樣可以讓用戶繼續(xù)使用之前已經(jīng)掌握的知識和技能。持外觀與程序功能相符，例如游戲類的界面，應(yīng)充分利用全屏，創(chuàng)造出身臨其境的感覺。如圖13-18所示。⑤突出重點，設(shè)計界面時盡量做到簡潔，突出首要任務(wù)。⑥清晰的反饋，用戶在操作的過程中，希望有快速的反饋，這樣的話，他們就明白他們的行為會產(chǎn)生什么樣的結(jié)果。例如，單擊某個選項欄中的任意一個按鈕，或某個列表中的某個選項，被單擊的按鈕或選項會變成高光背景?！緦嵱?xùn)一】要求1、制作iOS系統(tǒng)狀態(tài)欄，如圖13-17所示。2、所有圖形都用形狀工具繪制矢量圖。目的通過本實訓(xùn)，可以掌握iOS系統(tǒng)狀態(tài)欄基本圖標的繪制。圖13-17iOS系統(tǒng)狀態(tài)欄【實訓(xùn)二】要求制作iOS系統(tǒng)中的鎖屏界面，如圖13-18所示。圖形都用矢量形狀繪制。目的通過本實訓(xùn)，可以掌握iOS解鎖界面的制作過程，在此制作過程中形狀尤其重要，所以做完本實訓(xùn)，相信你會對形狀工具的操作更加熟練。圖13-18iOS系統(tǒng)解鎖界面13.8Android界面設(shè)計Android用戶體驗設(shè)計團隊為UI設(shè)計制定了一些原則，在設(shè)計時，如果沒有合理的理由，盡量不要偏離這些設(shè)計原則。據(jù)用戶的使用習(xí)慣設(shè)計，這樣方便用戶查找內(nèi)容，如圖13-43所示。②美，在界面設(shè)計漂亮的前提下，要再搭配一些合理的聲音或效果，這樣可以使用戶眼前一亮。多的個性化設(shè)置，添加更多的自定義設(shè)置，這樣可以給用戶一種控制感，如圖13-44所示。④簡化語句，將主題表達清楚的情況下，語句盡量做到少、精。⑤圖文搭配得當(dāng)，字太多的情況下，可以多用圖片，這樣更容易吸引用戶。⑥對用戶的操作給予反饋，哪怕是非常小的變化，都會給用戶操作上帶來方便?！緦嵱?xùn)三】要求1、制作Android系統(tǒng)操作欄，如圖13-19所示。2、圖形都用形狀工具進行繪制。目的通過本實訓(xùn)，可以輕松快速地掌握Android系統(tǒng)的操作欄的制作。圖13-19iOS系統(tǒng)解鎖界面【實訓(xùn)四】目的通過本實訓(xùn)，可以了解Android操作系統(tǒng)網(wǎng)格列表界面的制作。要求制作Android操作系統(tǒng)網(wǎng)格列表，如圖13-20所示。圖13-20Android操作系統(tǒng)網(wǎng)格列表WindowsPhone界面設(shè)計WindowsPhone的界面設(shè)計是基于一個叫作Metro的內(nèi)部項目。Metro界面的設(shè)計和字體靈感來源于機場和地鐵系統(tǒng)的制作系統(tǒng)所使用的視覺語言。WindowsPhone的設(shè)計原則包括：凈、整潔，WindowsPhone界面盡量留足白色空間，盡量突出內(nèi)容，如圖13-65所示。②使用流暢的動畫效果，WindowsPhone在屏幕上的觸摸和手勢體驗與Windows系統(tǒng)的桌面體驗一致，使用了硬件加速的動畫和逼真流暢的過渡效果，以在每一處細節(jié)增強用戶體驗。③實在在的數(shù)字化，具體的數(shù)字能夠給用戶帶來超出物理世界的規(guī)則和屬性的興奮，如圖13-66所示?！緦嵱?xùn)五】要求1、制作WindowsPhone視頻播放界面，如圖13-21所示。2、圖形都用形狀工具進行繪制矢量圖。目的通過本實訓(xùn)可以