• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        達內UI培訓PS基礎教程-9-點陣格式圖像

        • 發布:達內
        • 來源:達內
        • 時間:2015-07-16 18:13

        我們所看到的圖像,究竟是如何構成的呢?這就需要涉及到圖像類型的概念。 電腦中的圖像類型分為兩大類,一類稱為點陣圖,一類稱為矢量圖。
        點陣圖顧名思義就是由點構成的,如同用馬賽克去拼貼圖案一樣,每個馬賽克就是一個點,若干個點以矩陣排列成圖案。 數碼相機拍攝的照片、掃描儀掃描的稿件以及絕大多數的圖片都屬于點陣圖,如下左圖就是一個典型的點陣圖。把這幅圖片調入Photoshop,使用菜單【圖像 圖像大小】就可以看到如下 右圖的信息。注意窗口上部像素大小的寬度和高度,分別是400像素和225像素。 像素是什么?像素就是組成點陣圖像中的那些點,是點陣圖最小的單位。如同拼成圖案的那許多馬賽克一樣。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        在圖像窗口底端狀態欄的縮放倍數右方區域,按住ALT鍵單擊就會出現像素數量信息,如下 左圖。PhotoshopCS及更早版本的圖像狀態欄位于Photoshop窗口的底部,如下右圖。如果狀態欄未出現可通過菜單【窗口 狀態欄】打開。PhotoshopCS2版本則沒有此項菜單。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        如果我們放大圖像〖CTRL +〗,就會看到點也同時被放大了,這時就會出現所謂的馬賽克現象(也稱鋸齒現象)。如下左圖。我們可以看到有許多不同顏色的小正方形,那就是被放大的像素。每個像素只能有一個顏色。 寬400像素,高225像素,意味這幅圖像由橫方向400個點、豎方向225個點組成,400×225=90000,圖像的總像素數量就是9萬。 數碼相機有一個很重要的指標就是1300萬像素、3000萬像素這樣的稱呼,就是指拍攝出來圖像中的像素總量。
        像素是不是越多越好呢?從大部分情況來說是的,圖像的像素越多,記錄的信息也越詳細,圖像的局部就越細致,如下右圖。 上圖是一幅像素總量144萬(1600×900)的圖像,在放大到和前一張圖差不多的大小時的效果,可以很明顯感覺出圖像局部要顯得細膩得多。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        放大縮小圖像的快捷鍵是〖CTRL +〗〖CTRL -〗,這種放大會沿著圖像的中心點放大。
        還有一種定點放大方式是按住空格和CTRL鍵,用鼠標單擊圖像的一個部分,這樣會以單擊的地方作為中心放大。縮小是按住空格和ALT鍵單擊。 如果縮放程度不夠可重復以上操作。圖像窗口的標題欄以及狀態欄都會顯示縮放倍數。 嚴格來說應該是先按CTRL再按空格。但是在中文Windows下這正好是默認的中文輸入法切換方式。因此建議先按空格再按CTRL。
        如果圖像超過了圖像窗口的大小,將在右方和下方出現滾動條,此時拉動滾動條即可移動觀看區域(不是移動圖像)。 也可按住空格鍵在圖像中按下鼠標拖動。當鼠標開始拖動以后,空格鍵可以松開。
        以上的幾個快捷鍵是最常用的。要把它們記住,這將讓你的操作變得迅速。

        0201我們的顯示器也是點陣式的,前一課中看過的電視機屏幕,就是由許多的點構成的。包括液晶屏和等離子屏也是如此。 傳統的顯像管顯示器又稱為CRT(學名陰極射線管),是顯示設備中最早也最普及的種類。 顯示器的點陣數是可變的,我們可以從Windows控制調板中的顯示項目來查看或改動目前顯示器的屏幕分辨率,如下圖所示,目前為1024×768像素,也就是說現在顯示器橫方向能夠顯示1024個 像素點,豎方向768個像素點。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        如同一張6寸的照片不能完整放入一個5寸的像框一樣,如果一幅圖像超過了顯示器橫或豎方向的像素數,那么這幅圖像就不能在屏幕上完整顯示(以100%原尺寸顯示前提下)。 因此屏幕分辨率越高,能夠完整顯示的內容就越多。比如一個300×300像素的方塊,在不同的屏幕分辨率下,所顯示的大小也不一樣,如下3圖。
        如同馬路上的一個井蓋,站在5層樓看得很清楚,站在30層樓就小了許多,站在70層樓就更小了。井蓋的實際大小沒有變化,是視野放大導致井蓋看起來縮小。
        因此這不能說方塊的大小改變了,300像素還是300像素沒有變,是因為屏幕像素總量的增加使得它看起來變小。 計算一下就會知道,屏幕橫分辨率800的時候,300像素占據著約一半的寬度,在1024時候占據約三分之一,在1600時候只占據約五分之一了。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        顯示器上有著許多的點,每個點由紅綠藍三個涂有熒光粉的單元組成,學名就是像素。 顯示器內部有3個稱為電子槍的部件是用來激發像素發光的,它發出3道電子束擊打屏幕最左上角的點(可稱為0點),3束分別擊打紅綠藍單元。 根據信號的強弱使紅綠藍按照比例混合成色。這樣便完成了一個像素的激發。 然后在偏轉線圈的磁力作用下,電子束往右移動一像素,再對這個像素進行激發。直到順序激發完這一行所有的像素。就稱為完成一個“行掃描”。 然后向下移動一行,回到左端開始激發第二行的第一個像素。如此重復進行。 當激發完最后一行最后一個像素后,就算完成了一個“場掃描”。
        因此其實屏幕上的像素并不是同時發光的,但由于人眼有視覺暫留的特性,所以還是可以看到一幅完整的圖像。 顯示器掃描的順序如下圖,從0點開始往X軸方向掃描,完成一行后往Y軸方向移動,進行第二行的掃描。 正因為這種掃描方式,屏幕的坐標系就如同上圖一樣,以左上角為原點,X軸向右,Y軸向下。這與平面幾何坐標系正好上下顛倒。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        當我們把圖像儲存為點陣格式的時候,Photoshop就按照上面的順序,一個接一個地去記錄這幅圖像中所有的像素的顏色。從而儲存了圖像。 當在Photoshop中打開一幅點陣圖像的時候,也是按照上面的順序逐個提取像素信息并顯示在屏幕上。
        我們瀏覽網頁的時候,有時會看到圖片不是一次性出現,而是從上至下慢慢顯示出來。這就是因為網絡傳送速度慢造成了點陣像素信息的讀取也慢。 如果等待傳送的時間太長,會讓瀏覽者失去興趣。因此用于網頁上的圖片,應該盡可能地減少大小,便于快速地傳送。這個要點我們在以后還會接觸到。

        Photoshop的信息調板會顯示當前鼠標在圖像中的XY坐標,如下圖鼠標的熱點正處在這幅圖像橫方向第130個,豎方向第35個像素處。 所謂鼠標熱點是指鼠標光標中起定位作用的那一點,不同的光標熱點位置也不一樣。下圖的熱點是在箭頭頂部的尖角處。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        了解了點陣圖像大小的區別后,我們知道點陣圖像幅面越大,像素越多,記錄的信息就越豐富。 但是如果只有小幅的圖片,能不能放大呢?放大的效果以后比起真正的大圖來如何呢?下面我們來做一個實驗。
        0202使用菜單【圖像 圖像大小】,將寬度改為200,注意高度也隨著發生變化,這是因為下方的“約束比例”選項有效。這樣可保持圖片寬高比例不變。 對話框中其他的選項暫時不用去深究。參照下左圖即可。
        按下好按鈕確定操作,會看到圖像已經變小了。如下中圖。 做完這一步后,我們將一個大圖縮成了小圖,從9萬像素(400×255)變到了2.26萬像素(200×113)。 現在再次使用菜單【圖像 圖像大小】,將圖像寬度改回400。注意自動計算出來的高度是226而不是原先的225了。如下右圖。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        達內UI培訓PS基礎教程-9-點陣格式圖像

        發現圖像變得模糊不清了,原先可以看到的一些細節(如左手的手指縫)丟失了。這是為什么呢? 首先我們來模擬一下第一次縮小的過程,假設我們要將一幅10×6個像素組成的圖像,縮小為5×3,以下是示意圖,每個灰色方塊代表1像素。如下左圖。當縮小指令發出后,Photoshop等距離地抽取像素并丟棄,如下中圖。 然后再將剩余的像素拼合起來,形成縮小后的圖案,如下右圖。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        在第一次縮小以后,像素從9萬降到了2.26萬,這其中丟棄了6.74萬個像素信息。然后又將圖像擴大到400×225像素,雖然像素總量和原先一樣是9萬, 但在第一次轉換中丟棄的6.74萬像素信息卻是找不回來的。Photoshop只能采用插值算法去彌補這6.74萬像素。 所謂插值算法,就好比猜測,憑空去“捏造”那些并不存在的像素。
        如下圖是上左圖左上角那2×2的部分。 現有A、B、C、D四個像素,要將2×2擴成3×3,那么就要多出5個像素。圖中的標號是1、2、3、4、5。 如何確定這原先并不存在的像素的顏色呢?是將現有兩個像素的顏色值取平均,去作為新像素的顏色。 也就是說AB運算后得出1;AC運算后得出2;BD得出4;CD得出5;3則是由1245運算得出的。
        注意:以上內容是為了便于大家理解而打的比方,真正的圖像運算概念和過程遠比這復雜的多。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        可以想象,用這樣方式“捏造”出來的像素,和真正原先的像素肯定存在誤差甚至是很大的誤差。 比如左手的手指縫,原先可以很清楚地看到有三道深色的線,如下左圖。
        而在縮小以后,原先手指縫部分的像素就幾乎不見了。只剩下一些淺色的像素,手指縫已經看不清楚了,如下中圖。
        用這些淺色的像素計算出來的新像素,同樣也只可能是淺色而不可能是深色的。因此手指縫原先深色的部分已無法還原了。如下右圖。

        達內UI培訓PS基礎教程-9-點陣格式圖像

        失去了手指縫的分界,整個手看起來就變得模糊不清,圖像失真了。這就是為何將小幅點陣圖像擴大后,圖像會變得模糊的原因。 在今后實際的操作中,一般情況下不要將點陣圖放大制作。

        現在回顧一下剛才第二次改變圖像寬度到400的時候,高度是226。而不是先前的225。 既然是先縮小一半,再擴大一倍,等于是先除去2,再乘以2,數字應該和原先相等。為什么不相等了呢?
        這是因為一個前面我們已經提到過,但是沒有加以強調的概念:像素是最小的單位。它是不可再被分割的。
        圖像中的像素總數一定是一個整數,不存在500.7或者400.3這樣帶小數的數量。 那么,225÷2=112.5,Photoshop近似算作113像素了。而后第二次的擴大,是以這113作為基數,因此得出226像素。

        我們前面所做的事情,用語言來表述是:將圖像縮小一半,再擴大還原為原大小。對嗎?這句話是錯誤的,有概念上的根本錯誤。
        首先,擴大和還原是兩碼事,擴大是一種對圖像進行修改的操作。而在Photoshop中,還原是指對上一步操作的撤銷,對圖像本身并沒有再作操作。 好比你拒絕接收你朋友寄來的一封信,那么它將被原樣不動地退回,那是對寄信這個操作的撤銷。可以稱為退信。 但如果你拆開信封閱讀了內容之后,又把它裝進新的信封,并且寫上朋友的地址寄回,那么這已經是新的寄信操作,而不能稱為是退信了。
        再者,“原大小”中的“原”也是錯誤的,通過上面的分析,我們知道由于取整數的問題,圖像的大小和原先已經不一樣了。
        有關Photoshop的撤銷操作,將在后面的內容中介紹。

        現在再概述一下點陣圖像:
        點陣格式是把圖像分為若干個點(像素),依靠儲存或再現每個點的信息,從而儲存或再現整幅圖像。
        由于像素數量的限制,所以點陣圖像的大小是固定的。縮小或放大圖像都會造成對圖像的破壞。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:設計之前,花上時間去定義你的設計原則-平面設計培訓
        下一篇:設計師必備的20條設計黃金法則-達內平面設計培訓告訴你!

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>