cina01.gif

March 08, 2006

「解析度」涵義說明


常見的解析度


所謂的「解析度」指的是 單位長度中,所表達或擷取的像素數目。 換言之:


從擷取設備 ( 例如:掃描器、數位相機 ) 的角度觀之,解像能力越高者,所能擷取影像的解析度也就越高。影像解析度使用的單位是 ppi ( Pixel per Inch ) ,意思是每英吋所表達的像素數目。


從列印設備的角度觀之,影像的解析度越高者,所印出來的影像也就越細緻。列印解析度使用的單位是 dpi ( Dot per Inch ) ,意思是「每英吋所表達的列印點數」。


ppi 與 dpi 的度量方式常常被人混用,例如,我們說:「掃描器的光學解析度雖然有 1200x600 dpi ,但是掃瞄傳統相片時,相片有效的解析度大約只有 150 dpi 左右。」前面的 1200x600 "dpi" ,其實便是指 "ppi" 。

數位影像的「成像品質」其實決定於擷取的階段,如果原稿的品質很精緻,掃描器的光學解析度也不錯,通常便可以得到較好的數位影像。


相對地,使用粗糙模糊的原稿,即使提高掃瞄解析度也無濟於事,事後利用影像處理軟體加以調校,可以改善的品質亦是相當有限。當然,列印時若用更高的列印解析度可能也印不出精緻漂亮的作品了!


有幾種常見的「解析度」,是我們所需要瞭解的,它們分別是:


輸出階段:影像解析度、印表機解析度。


呈現階段:螢幕解析度、螢幕字型解析度。


輸入階段:掃描器解析度、數位相機解析度。


茲分述於下。


影像解析度


影像的解析度會影響列印時,影像的列印品質及大小,但不會影響它在螢幕上所呈現的品質。

而且,影像解析度是可以透過 PhotoImpact 、 PhotoShop 、 PaintShop Pro… 等影像處理軟體加以改變!

例如,有一影像的解析度為 120 dpi,大小為 1600x1200 像素,這表示列印時,每一個 Inch 要表達 120 個點 ( Dot ) ,所以印出來的尺寸大約是 13.3"x10" 的大小。

現在,我們透過軟體將這個影像調整為 240dpi ,它在螢幕上當然還是佔用 1600x1200 的大小,並沒有因為影像解析度的調整而改變 ( 您可以清楚地看到,螢幕上影像的品質也沒有改變 ) ,不過,在列印時,由於每一個 Inch 必須要表達 240 個點 ( Dot ) ,所以印出來的尺寸便只有 6.7"x5" 大小,是原本尺寸的 1/4 ( 以面積來計算 ),此時列印的品質便顯得更加地細緻 ( 所以,列印品質提昇了 ) 。

這裡,我們要澄清兩個觀念:


有人說:「影像的解析度越高,表示影像的( 成像 )品質越好。」其實,這句話存在很大的語病,如前所述,影像的品質在輸入階段即已大致決定,而且解析度可以任意使用軟體加以改變,因此,調高解析度無法改善影像的成像品質!嚴格地說,提高影像解析度,影響的是列印的品質及大小。


另外一種說法:「 Web 影像只需要 96 dpi 就夠了,印刷用的影像就得使用 300 dpi 。」此話亦存在若干的誤導, Web 影像若只是要呈現於螢幕之上,我們關心的是它的影像大小,至於影像解析度大小,對 Web 上的影像並不會造成顯示的差距及影響。


此處,我們必須特別強調的是,「影像解析度」不僅影響到列印時的大小及列印的品質,它也會影響到影像在文書排版軟體中的「大小」 。


螢幕解析度


螢幕解析度就是 Windows 桌面的大小。 常見的設定有 640x480 、 800x600 、 1024x768… 等。

以 17" 的螢幕為例,若原本有一 640x480 的影像呈現在螢幕上,由於特定螢幕的顯示尺寸是不會改變的 ( 或者說,被視為固定的大小 ) ,當我們將螢幕解析度由 640x480 調整成 1024x768 時, 17" 的螢幕上必須容納更多的像點,所以,原本的影像看起來會更加地細緻,但尺寸則縮小為桌面的 40% 。

螢幕解析度的調整能力取決於特定的廠牌、機種、配接卡及螢幕的大小,一般而言:


15" 的螢幕最佳的選擇設定為 640x480 、 800x600 。


17" 的螢幕最佳的選擇設定為 800x600 、 1024x768 。


19" 的螢幕最佳的選擇設定為 1024x768 、 1280x1024 。


在調整螢幕解析度時,亦得注意螢幕更新 ( 整理 ) 頻率的設定,根據 VESA 組織的建議,最好將螢幕更新頻率設定在 72Hz 以上,眼睛才不會因為受到視訊的更新整理而感到勞累。想要同時得到較高的螢幕解析度及更新頻率,就得仰賴於較高級的螢幕機種及視訊卡。


 


螢幕字型解析度


或許您曾經聽過一種奇怪又熟悉的說法:「 PC 的螢幕解析度是 96 dpi ,而 Mac 的螢幕解析度是 72 dpi 。」很明顯的,螢幕的尺寸選擇很多,桌面的大小設定不同,怎麼可能 PC 的螢幕解析度一定就是 96 dpi 呢?事實上,此處的 96dpi 、 72dpi 指的是螢幕上的「字型解析度」,而非「螢幕解析度」!


當螢幕解析度調高時,通常我們也會調整螢幕字型的解析度,免得字型看起來醜醜小小的,和偌大的螢幕顯得不太協調。


PC 螢幕上可以設定的字型解析度為 96 dpi 、 120 dpi 、 144 dpi 及 192 dpi 。在 640x480 的桌面大小下,使用 96 dpi 就夠了,在 800x600 或 1024x768 的桌面大小下,則可以考慮將螢幕字型解析度調整為 120 dpi。


 


掃描器解析度


「掃描器解析度」指的是掃描器辨識影像細節的能力, 600 dpi 解析度的掃描器,可以在每個 Inch 之內,清楚地分辨出 600 個圖點。

另外,掃描器的解析度有所謂的「光學解析度」及「軟體解析度」,其中,「光學解析度」才是掃描器真正的解像能力,而「軟體解析度」使用的是數學上的外插運算法,據以放大既有的掃瞄影像,實際上可以提昇的品質相當地有限。


掃描器的解析度亦可以透過驅動程式加以調整,我們通常會依照掃瞄文件的特性加以決定。


例如,掃瞄印刷品時,可以使用 600 dpi 的設定,再予以去網點、縮小尺寸的處理。掃瞄相片時,可以使用 300 dpi 的設定,再予以調正、縮小尺寸的處理。掃瞄正片時,則可以使用 1200 dpi 以上的設定 ( 假使光學解析度夠用的話 ) 。


 


數位相機解析度


目前數位相機的感光元件大致可分成 CCD、SuperCCD 及 CMOS。

當富士的 SuperCCD 還沒出現時,我們常使用成像像素的多寡來代表數位相機的解析度。但,隨著新技術的演進,這個看法卻有所調整。

傳統的 CCD 或 CMOS,若是不經任何的插補計算,感光元件的單元數,通常會大於有效像素,而 SuperCCD 因為改變了感光元件的排列方式,變成了有效像素大於感光元件的單元數的現象,也顛覆了傳統的看法。

因此,在數位相機的領域裡,我們需要參考兩個數值,來決定它的解析度,一是感光元件解析度,指的感光單元的數目。另一則是未經插補時成像的像素值。

而成像的像素值,才是與輸出的尺寸及影像解析度產生關聯的數字。

以 Nikon 的 CoolPix 950 為例,它的 CCD 可以擷取到 211 萬的像素值,有效的範圍則是 1600x1200 像素= 192 萬像素。若是以 150 dpi 的影像解析度列印,可以印出 10.7"x8" 的成品,若是以 300dpi 的影像解析度列印,則可印出 5.3"x4" 的成品。

計算的方法很簡單:

寬:1600 Pixels / 300 dpi= 5.3"

高:1200 Pixels / 300 dpi= 4"

您可以依此方法算出:當數位相機的成像為何時,以多少的「影像解析度」輸出,輸出的尺寸為何?

和掃描器相當類似的是,數位相機也有所謂的「軟體解析度」,因此,要分辨數位相機真實的解析度時,首先要查出感光設備( 通常是 CCD ) 的規格,再來看拍攝成品的影像大小。


解析度總整理


此處,我們再將各種解析度做一簡單的整理:


影像解析度:使用 ppi 的單位,這只是影像本身的屬性設定,會影響到列印時的品質及大小,也會影響影像在文書排版軟體中的原始大小。


印表機解析度:使用 dpi 的單位,代表著印表機設備列印時的細緻程度。


螢幕解析度:就是螢幕桌面的大小設定,常見的設定為 800x600、 640x480、1024x768 像素。


螢幕字型解析度:嚴格來講,使用的是 ppi 的單位, PC 上常見的設定為 96 ppi 及 120 ppi


掃描器解析度:光學解析度才是真實的掃描器解析度,它代表著掃描器的解像辨析能力,目前市售的機種大多為 600x600 dpi 。


數位相機解析度:需要參考兩個數值,來決定它的解析度,一是感光元件解析度,指的感光單元的數目,另一則是未經插補時成像的像素值。


 


列印尺寸、影像大小與解析度


承上所述,「列印尺寸」與影像解析度有莫大的關係,只要影像解析度改變了,列印的尺寸便會跟著異動。


換言之,列印的尺寸無法客觀地描述影像的大小。


想要描述影像的大小,最好的方法還是以該影像「寬 x 高」的像素值加以表示,例如:1600x1200 Pixels 。而相乘的最後結果就是影像的像素多寡。

列印尺寸、影像大小與解析度之間的關係可以利用下列的計算公式加以表示:


影像的大小=影像的解析度 X 列印的尺寸


影像的大小 / 影像的解析度=列印的尺寸


針對特定的影像而言,影像的大小是固定的,所以,「影像解析度」和「列印尺寸」便呈現反比的關係。


 


影像的成像品質


如前所述,影像的成像品質主要取決於「輸入、擷取」的階段,但,怎樣才算是「好」的影像呢?我們可以從下列幾個角度審視之:


影像是否清晰銳利。


影像是否變形失真。


色彩是否正確。


是否含有雜點。


色彩的飽合程度。


千萬不要將「品質」的議題侷限在「影像解析度」之中牽扯不清,上述的因素才是影像成像品質的重要關鍵!


 


 


 


 


由 melin 發表於 10:54 AM | 迴響 (0)

November 07, 2005

動態文字選單的寫法http://www.spyder-25.com/90s.html

< table border=0 bordercolor="gray" cellspacing=0 cellpadding=1 width=130 >< tr >< td >

< style >
.menu
{
background-color:#dfdfdf;
border:1px solid gray;
width:127px;
font-size:10px;
font-family:verdana;
position: absolute;
font:bold;
font-weight:900;
color: #444444;
cursor: pointer;
}

.item_panel
{
width:127px;
border-left:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
clip:rect(0,127,0,20);
position: absolute;
cursor:pointer;
}
.item_panel a
{
text-decoration:none;
color:black;
cursor:pointer;
}
.item
{
background-color: #eeeeee;
width: 125px;
font-size: 10px;
font-family: verdana;

}
< /style >

< script language="javascript" >

document.write("")

function goToURL() { history.go(-1); }

var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items
var bgc = "#eeeeee" // background color of the item
var tc = "black" // text color of the item
var over_bgc = "#f9f9f9";
var over_tc = "#000000";
var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 129;
var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu
document.write("

");
mn = 0;
mni = 1;
start = -1;
for(i=0;i {
la = Link[i].split("|");
if (la[0] == "0")
{
if(start == 0)
{
document.write("
");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("
");
start = 0;
}

document.write(" if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write(">

");
csmc++;
}
}
if (start == 0)
{
document.write("
");
h = csmc * iheight;
tmn = mn + 5; //-h
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "#bbbbbb";
obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = "solid";
}
document.write("
");}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i {
if(self_menu[i][2] == 1)
{open_item += self_menu[i][1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i {
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i {
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i {
if(self_menu[i][4] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}


document.write("

");
document.write("");
document.write("
Main Page
");

document.write("

");

//Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"
var Link = new Array();
Link[0] = "0| News / Editorials";
Link[1] = "1| Articles|editorial.html|";
Link[2] = "1| August|news.asp?month=August|";
Link[3] = "1| June|news.asp?month=June|";
Link[4] = "1| May|news.asp?month=May|";
Link[5] = "1| April|news.asp?month=April|";
Link[6] = "1| March|news.asp?month=March|";
Link[7] = "0| Pictures";
Link[8] = "1| Pictures Home|pictures.html|";
Link[9] = "1| Spider-Man Movie I|showgal.asp?sec=movie1|";
Link[10] = "1| Spider-Man Movie II|showgal.asp?sec=movie2|";
Link[11] = "1| Mary Jane|showgal.asp?sec=maryjane|";
Link[12] = "1| Character Pics|pictures.html#character|";
Link[13] = "1| Miscellaneous|showgal.asp?sec=spidey|";
Link[14] = "1| Animated Series|showgal.asp?sec=animated|";
Link[15] = "0| Covers / Overviews";
Link[16] = "1| Core Titles|coverscore.html|";
Link[17] = "1| Limited Series|coverslim.html|";
Link[18] = "1| One Shots|coverslim.html#one|";
Link[19] = "1| ASM Volume II|showgal.asp?sec=asm_volume2|";
Link[20] = "1| Ultimate Spider-Man|showgal.asp?sec=ultimate|";
Link[21] = "1| Spectacular SM|showgal.asp?sec=spectacular2|";
Link[22] = "1| Marvel Knights SM|showgal.asp?sec=mksm|";
Link[23] = "0| Multimedia";
Link[24] = "1| Wallpapers|wallpapers.asp|";
Link[25] = "1| Music|music.html|";
Link[26] = "1| Downloads|downloads.html|";
Link[27] = "0| Reviews / Issues";
Link[28] = "1| Back Issues|issues.html|";
Link[29] = "1| Reviews|review.html|";
Link[30] = "0| Characters";
Link[31] = "1| Allies|characters.html|";
Link[32] = "1| Enemies|characters.html|";
Link[33] = "1| Family|characters.html|";
Link[34] = "1| Friends|characters.html|";
Link[35] = "0| Cartoons";
Link[36] = "1| 60's Spider-Man|60s.html|";
Link[37] = "1| 90's Spider-Man|90s.html|";
Link[38] = "1| 2003 MTV Series|animated_home.html|";
Link[39] = "1| Episode Guide (MTV)|animated_synopsis.html|";
Link[40] = "0| Movies";
Link[41] = "1| Spider-Man (2002)|movie1.html|";
Link[42] = "1| Spider-Man 2 (2004)|movie2.html|";
Link[43] = "0| Store / Shop";
Link[44] = "1| Amazon Shop|/shop/default.html|";
Link[45] = "1| Poster Store|poster.html|";
Link[46] = "0| Advertise";
Link[47] = "1| Contact Us|contact.html|";
startup(4);

document.write("





");

< /script >
< /table>

由 melin 發表於 10:57 AM | 迴響 (0)