點(diǎn)擊了解 搖星學(xué)院? UI設(shè)計(jì)師/web前端開發(fā)? 學(xué)習(xí)

我們所看到的圖像篡腌，究竟是如何構(gòu)成的呢术吝？這就需要涉及到圖像類型的概念学歧。 電腦中的圖像類型分為兩大類罩引，一類稱為點(diǎn)陣圖，一類稱為矢量圖枝笨。

點(diǎn)陣圖顧名思義就是由點(diǎn)構(gòu)成的袁铐，如同用馬賽克去拼貼圖案一樣，每個(gè)馬賽克就是一個(gè)點(diǎn)横浑，若干個(gè)點(diǎn)以矩陣排列成圖案剔桨。 數(shù)碼相機(jī)拍攝的照片、掃描儀掃描的稿件以及絕大多數(shù)的圖片都屬于點(diǎn)陣圖徙融，如下左圖就是一個(gè)典型的點(diǎn)陣圖洒缀。把這幅圖片調(diào)入Photoshop，使用菜單【圖像 圖像大小】就可以看到如下 右圖的信息。注意窗口上部像素大小的寬度和高度树绩，分別是400像素和225像素萨脑。 像素是什么？像素就是組成點(diǎn)陣圖像中的那些點(diǎn)饺饭，是點(diǎn)陣圖最小的單位渤早。如同拼成圖案的那許多馬賽克一樣。

在圖像窗口底端狀態(tài)欄的縮放倍數(shù)右方區(qū)域瘫俊，按住ALT鍵單擊就會(huì)出現(xiàn)像素?cái)?shù)量信息鹊杖，如下 左圖。PhotoshopCS及更早版本的圖像狀態(tài)欄位于Photoshop窗口的底部扛芽，如下右圖骂蓖。如果狀態(tài)欄未出現(xiàn)可通過菜單【窗口 狀態(tài)欄】打開。PhotoshopCS2版本則沒有此項(xiàng)菜單川尖。

如果我們放大圖像〖CTRL +〗涯竟，就會(huì)看到點(diǎn)也同時(shí)被放大了，這時(shí)就會(huì)出現(xiàn)所謂的馬賽克現(xiàn)象(也稱鋸齒現(xiàn)象)空厌。如下左圖庐船。我們可以看到有許多不同顏色的小正方形，那就是被放大的像素嘲更。每個(gè)像素只能有一個(gè)顏色筐钟。 寬400像素，高225像素赋朦，意味這幅圖像由橫方向400個(gè)點(diǎn)篓冲、豎方向225個(gè)點(diǎn)組成，400×225=90000宠哄，圖像的總像素?cái)?shù)量就是9萬壹将。 數(shù)碼相機(jī)有一個(gè)很重要的指標(biāo)就是1300萬像素、3000萬像素這樣的稱呼毛嫉，就是指拍攝出來圖像中的像素總量诽俯。

像素是不是越多越好呢？從大部分情況來說是的承粤，圖像的像素越多暴区，記錄的信息也越詳細(xì)，圖像的局部就越細(xì)致辛臊，如下右圖仙粱。 上圖是一幅像素總量144萬(1600×900)的圖像，在放大到和前一張圖差不多的大小時(shí)的效果彻舰，可以很明顯感覺出圖像局部要顯得細(xì)膩得多伐割。

放大縮小圖像的快捷鍵是〖CTRL +〗〖CTRL -〗候味，這種放大會(huì)沿著圖像的中心點(diǎn)放大。

還有一種定點(diǎn)放大方式是按住空格和CTRL鍵隔心，用鼠標(biāo)單擊圖像的一個(gè)部分负溪，這樣會(huì)以單擊的地方作為中心放大〖醚祝縮小是按住空格和ALT鍵單擊。 如果縮放程度不夠可重復(fù)以上操作辐真。圖像窗口的標(biāo)題欄以及狀態(tài)欄都會(huì)顯示縮放倍數(shù)须尚。 嚴(yán)格來說應(yīng)該是先按CTRL再按空格。但是在中文Windows下這正好是默認(rèn)的中文輸入法切換方式侍咱。因此建議先按空格再按CTRL耐床。

如果圖像超過了圖像窗口的大小，將在右方和下方出現(xiàn)滾動(dòng)條楔脯，此時(shí)拉動(dòng)滾動(dòng)條即可移動(dòng)觀看區(qū)域(不是移動(dòng)圖像)撩轰。 也可按住空格鍵在圖像中按下鼠標(biāo)拖動(dòng)。當(dāng)鼠標(biāo)開始拖動(dòng)以后昧廷，空格鍵可以松開堪嫂。

以上的幾個(gè)快捷鍵是最常用的。要把它們記住木柬，這將讓你的操作變得迅速皆串。

0201我們的顯示器也是點(diǎn)陣式的，前一課中看過的電視機(jī)屏幕眉枕，就是由許多的點(diǎn)構(gòu)成的恶复。包括液晶屏和等離子屏也是如此。 傳統(tǒng)的顯像管顯示器又稱為CRT(學(xué)名陰極射線管)速挑，是顯示設(shè)備中最早也最普及的種類谤牡。 顯示器的點(diǎn)陣數(shù)是可變的，我們可以從Windows控制調(diào)板中的顯示項(xiàng)目來查看或改動(dòng)目前顯示器的屏幕分辨率姥宝，如下圖所示翅萤，目前為1024×768像素，也就是說現(xiàn)在顯示器橫方向能夠顯示1024個(gè) 像素點(diǎn)腊满，豎方向768個(gè)像素點(diǎn)断序。

如同一張6寸的照片不能完整放入一個(gè)5寸的像框一樣，如果一幅圖像超過了顯示器橫或豎方向的像素?cái)?shù)糜烹，那么這幅圖像就不能在屏幕上完整顯示(以100%原尺寸顯示前提下)违诗。 因此屏幕分辨率越高，能夠完整顯示的內(nèi)容就越多疮蹦。比如一個(gè)300×300像素的方塊诸迟，在不同的屏幕分辨率下，所顯示的大小也不一樣，如下3圖阵苇。

如同馬路上的一個(gè)井蓋壁公，站在5層樓看得很清楚，站在30層樓就小了許多绅项，站在70層樓就更小了紊册。井蓋的實(shí)際大小沒有變化，是視野放大導(dǎo)致井蓋看起來縮小快耿。

因此這不能說方塊的大小改變了囊陡，300像素還是300像素沒有變，是因?yàn)槠聊幌袼乜偭康脑黾邮沟盟雌饋碜冃　?計(jì)算一下就會(huì)知道，屏幕橫分辨率800的時(shí)候，300像素占據(jù)著約一半的寬度逛尚，在1024時(shí)候占據(jù)約三分之一，在1600時(shí)候只占據(jù)約五分之一了遏片。

顯示器上有著許多的點(diǎn)，每個(gè)點(diǎn)由紅綠藍(lán)三個(gè)涂有熒光粉的單元組成撮竿，學(xué)名就是像素吮便。 顯示器內(nèi)部有3個(gè)稱為電子槍的部件是用來激發(fā)像素發(fā)光的，它發(fā)出3道電子束擊打屏幕最左上角的點(diǎn)(可稱為0點(diǎn))幢踏，3束分別擊打紅綠藍(lán)單元线衫。 根據(jù)信號(hào)的強(qiáng)弱使紅綠藍(lán)按照比例混合成色。這樣便完成了一個(gè)像素的激發(fā)惑折。 然后在偏轉(zhuǎn)線圈的磁力作用下授账，電子束往右移動(dòng)一像素，再對(duì)這個(gè)像素進(jìn)行激發(fā)惨驶。直到順序激發(fā)完這一行所有的像素白热。就稱為完成一個(gè)“行掃描”。 然后向下移動(dòng)一行粗卜，回到左端開始激發(fā)第二行的第一個(gè)像素屋确。如此重復(fù)進(jìn)行。 當(dāng)激發(fā)完最后一行最后一個(gè)像素后续扔，就算完成了一個(gè)“場(chǎng)掃描”攻臀。

因此其實(shí)屏幕上的像素并不是同時(shí)發(fā)光的，但由于人眼有視覺暫留的特性纱昧，所以還是可以看到一幅完整的圖像刨啸。 顯示器掃描的順序如下圖，從0點(diǎn)開始往X軸方向掃描识脆，完成一行后往Y軸方向移動(dòng)设联，進(jìn)行第二行的掃描善已。 正因?yàn)檫@種掃描方式，屏幕的坐標(biāo)系就如同上圖一樣离例，以左上角為原點(diǎn)换团，X軸向右，Y軸向下宫蛆。這與平面幾何坐標(biāo)系正好上下顛倒艘包。

當(dāng)我們把圖像儲(chǔ)存為點(diǎn)陣格式的時(shí)候，Photoshop就按照上面的順序耀盗，一個(gè)接一個(gè)地去記錄這幅圖像中所有的像素的顏色想虎。從而儲(chǔ)存了圖像。 當(dāng)在Photoshop中打開一幅點(diǎn)陣圖像的時(shí)候袍冷，也是按照上面的順序逐個(gè)提取像素信息并顯示在屏幕上。

我們?yōu)g覽網(wǎng)頁的時(shí)候猫牡，有時(shí)會(huì)看到圖片不是一次性出現(xiàn)胡诗，而是從上至下慢慢顯示出來。這就是因?yàn)榫W(wǎng)絡(luò)傳送速度慢造成了點(diǎn)陣像素信息的讀取也慢淌友。 如果等待傳送的時(shí)間太長(zhǎng)煌恢，會(huì)讓瀏覽者失去興趣。因此用于網(wǎng)頁上的圖片震庭，應(yīng)該盡可能地減少大小瑰抵，便于快速地傳送。這個(gè)要點(diǎn)我們?cè)谝院筮€會(huì)接觸到器联。

Photoshop的信息調(diào)板會(huì)顯示當(dāng)前鼠標(biāo)在圖像中的XY坐標(biāo)二汛，如下圖鼠標(biāo)的熱點(diǎn)正處在這幅圖像橫方向第130個(gè)，豎方向第35個(gè)像素處拨拓。 所謂鼠標(biāo)熱點(diǎn)是指鼠標(biāo)光標(biāo)中起定位作用的那一點(diǎn)肴颊，不同的光標(biāo)熱點(diǎn)位置也不一樣。下圖的熱點(diǎn)是在箭頭頂部的尖角處渣磷。

了解了點(diǎn)陣圖像大小的區(qū)別后婿着，我們知道點(diǎn)陣圖像幅面越大，像素越多醋界，記錄的信息就越豐富竟宋。 但是如果只有小幅的圖片，能不能放大呢形纺？放大的效果以后比起真正的大圖來如何呢丘侠？下面我們來做一個(gè)實(shí)驗(yàn)。

0202使用菜單【圖像 圖像大小】逐样，將寬度改為200婉陷，注意高度也隨著發(fā)生變化帚称，這是因?yàn)橄路降摹凹s束比例”選項(xiàng)有效。這樣可保持圖片寬高比例不變秽澳。 對(duì)話框中其他的選項(xiàng)暫時(shí)不用去深究闯睹。參照下左圖即可。

按下好按鈕確定操作担神，會(huì)看到圖像已經(jīng)變小了楼吃。如下中圖。 做完這一步后妄讯，我們將一個(gè)大圖縮成了小圖孩锡，從9萬像素(400×255)變到了2.26萬像素(200×113)。 現(xiàn)在再次使用菜單【圖像 圖像大小】亥贸，將圖像寬度改回400躬窜。注意自動(dòng)計(jì)算出來的高度是226而不是原先的225了。如下右圖炕置。

發(fā)現(xiàn)圖像變得模糊不清了荣挨，原先可以看到的一些細(xì)節(jié)(如左手的手指縫)丟失了。這是為什么呢朴摊？ 首先我們來模擬一下第一次縮小的過程默垄，假設(shè)我們要將一幅10×6個(gè)像素組成的圖像，縮小為5×3甚纲，以下是示意圖口锭，每個(gè)灰色方塊代表1像素。如下左圖介杆。當(dāng)縮小指令發(fā)出后鹃操，Photoshop等距離地抽取像素并丟棄，如下中圖春哨。 然后再將剩余的像素拼合起來组民，形成縮小后的圖案，如下右圖悲靴。

在第一次縮小以后臭胜，像素從9萬降到了2.26萬，這其中丟棄了6.74萬個(gè)像素信息癞尚。然后又將圖像擴(kuò)大到400×225像素耸三，雖然像素總量和原先一樣是9萬， 但在第一次轉(zhuǎn)換中丟棄的6.74萬像素信息卻是找不回來的浇揩。Photoshop只能采用插值算法去彌補(bǔ)這6.74萬像素仪壮。 所謂插值算法，就好比猜測(cè)胳徽，憑空去“捏造”那些并不存在的像素积锅。

如下圖是上左圖左上角那2×2的部分爽彤。 現(xiàn)有A、B缚陷、C适篙、D四個(gè)像素，要將2×2擴(kuò)成3×3箫爷，那么就要多出5個(gè)像素嚷节。圖中的標(biāo)號(hào)是1、2虎锚、3硫痰、4、5窜护。 如何確定這原先并不存在的像素的顏色呢效斑？是將現(xiàn)有兩個(gè)像素的顏色值取平均，去作為新像素的顏色柱徙。 也就是說AB運(yùn)算后得出1缓屠；AC運(yùn)算后得出2；BD得出4坐搔；CD得出5藏研；3則是由1245運(yùn)算得出的敬矩。

注意：以上內(nèi)容是為了便于大家理解而打的比方概行，真正的圖像運(yùn)算概念和過程遠(yuǎn)比這復(fù)雜的多。

可以想象弧岳，用這樣方式“捏造”出來的像素凳忙，和真正原先的像素肯定存在誤差甚至是很大的誤差。 比如左手的手指縫禽炬，原先可以很清楚地看到有三道深色的線涧卵，如下左圖。

而在縮小以后腹尖，原先手指縫部分的像素就幾乎不見了柳恐。只剩下一些淺色的像素，手指縫已經(jīng)看不清楚了热幔，如下中圖乐设。

用這些淺色的像素計(jì)算出來的新像素，同樣也只可能是淺色而不可能是深色的绎巨。因此手指縫原先深色的部分已無法還原了近尚。如下右圖。

失去了手指縫的分界场勤，整個(gè)手看起來就變得模糊不清戈锻，圖像失真了歼跟。這就是為何將小幅點(diǎn)陣圖像擴(kuò)大后，圖像會(huì)變得模糊的原因格遭。 在今后實(shí)際的操作中哈街，一般情況下不要將點(diǎn)陣圖放大制作。

現(xiàn)在回顧一下剛才第二次改變圖像寬度到400的時(shí)候如庭，高度是226叹卷。而不是先前的225。 既然是先縮小一半坪它，再擴(kuò)大一倍骤竹，等于是先除去2，再乘以2往毡，數(shù)字應(yīng)該和原先相等蒙揣。為什么不相等了呢？

這是因?yàn)橐粋€(gè)前面我們已經(jīng)提到過开瞭，但是沒有加以強(qiáng)調(diào)的概念：像素是最小的單位懒震。它是不可再被分割的。

圖像中的像素總數(shù)一定是一個(gè)整數(shù)嗤详，不存在500.7或者400.3這樣帶小數(shù)的數(shù)量个扰。 那么，225÷2=112.5葱色，Photoshop近似算作113像素了递宅。而后第二次的擴(kuò)大，是以這113作為基數(shù)苍狰，因此得出226像素办龄。

我們前面所做的事情，用語言來表述是：將圖像縮小一半淋昭，再擴(kuò)大還原為原大小俐填。對(duì)嗎？這句話是錯(cuò)誤的翔忽，有概念上的根本錯(cuò)誤英融。

首先，擴(kuò)大和還原是兩碼事歇式，擴(kuò)大是一種對(duì)圖像進(jìn)行修改的操作驶悟。而在Photoshop中，還原是指對(duì)上一步操作的撤銷贬丛，對(duì)圖像本身并沒有再作操作撩银。 好比你拒絕接收你朋友寄來的一封信，那么它將被原樣不動(dòng)地退回豺憔，那是對(duì)寄信這個(gè)操作的撤銷额获」幻恚可以稱為退信。 但如果你拆開信封閱讀了內(nèi)容之后抄邀，又把它裝進(jìn)新的信封耘眨，并且寫上朋友的地址寄回，那么這已經(jīng)是新的寄信操作境肾，而不能稱為是退信了剔难。

再者，“原大小”中的“原”也是錯(cuò)誤的奥喻，通過上面的分析偶宫，我們知道由于取整數(shù)的問題，圖像的大小和原先已經(jīng)不一樣了环鲤。

有關(guān)Photoshop的撤銷操作纯趋，將在后面的內(nèi)容中介紹。

現(xiàn)在再概述一下點(diǎn)陣圖像：

點(diǎn)陣格式是把圖像分為若干個(gè)點(diǎn)(像素)冷离，依靠?jī)?chǔ)存或再現(xiàn)每個(gè)點(diǎn)的信息吵冒，從而儲(chǔ)存或再現(xiàn)整幅圖像。

由于像素?cái)?shù)量的限制西剥，所以點(diǎn)陣圖像的大小是固定的痹栖。縮小或放大圖像都會(huì)造成對(duì)圖像的破壞瞭空。

全教程完,學(xué)完記得交作業(yè)揪阿。如果本教程對(duì)您有所幫助，請(qǐng)推薦給你的朋友匙铡。