網頁設計師:用JS代碼控制Retina映像

來源:互聯網
上載者:User

文章描述:Web設計師如何製作Retina映像。

蘋果公司發布了更多的產品適應Retina螢幕。到目前為止,我們知道蘋果裝置中支援Retina螢幕技術的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,這些裝置能為使用者呈現更細膩、平滑和高品質的圖片效果,提高了使用者的視覺體驗。做為一名Web設計師如何為你的網站建立這些適合Retina顯屏裝置的圖片呢?這就是我們今天要學的一個東東。

為什麼要支援Retina顯示

最初我並期望採用較大的圖片來滿足Retina螢幕顯示採用巨大的映像,因為他畢竟是一個全新的技術。但後來我花了點時間做了一個統計,才意識到蘋果的設定佔據了很多移動端的份額,這些裝置大多數是“iPhone”、“iPod”和”iPad”,而且這些裝置都支援Retina螢幕技術。大部分使用13、15寸Retina顯示屏的使用者都通過”Chrome“、”Firefox“、”Safari“和”IE“上網,如果你需要支援”Opera“瀏覽器,那是你在迎合一些小眾使用者。(我自己的網站統計資料,就是這樣的一個情況)

如何建立Retina映像

你可能為認為,Retina映像只需要使用高解析度(PPI)來儲存就可以,但事實並不是如此。所有你需要做的是為Retina顯屏儲存放大兩倍的中圖片,比如說你儲存一張200×200像素(css像素)的圖生,你需要將圖片儲存成400×400像素。這些超大型的映像顯示成原始映像的大小尺寸,有助於在Retina螢幕上建立光滑和清爽的外觀效果。

聽起來很簡單,那你要怎麼擷取雙倍大小的映像呢?

使用Illustrator設計Logo和Icon表徵圖

向量圖是建立Retina映像的完美解決方案。如果你有一個Logo或ICON是EPS或者Ai檔案,在匯出或者複製圖片到Photoshop時,向量圖它能夠擴充到任何尺寸大小。粘貼的元素可以作為一個智能對象,經將保留其向量路徑,因此他可以翻一番,導了出來,作為適合Retina的一個特殊映像。

使用Photoshop的向量特性

Photoshop是一個像素圖形的應用軟體,但這並不意味著他不具有製作向量圖形的特性。每一個圖形工具都可以建立一個向量層,而不僅僅是像素層,這樣一來所有圖層樣式效果依然可以伸縮的。如果你把元素都乘以2,所有的效果幾乎都能精確的放大兩倍大小。

擴大你的像素映像

其中有一條規則,作為設計師的我們不想輕意的去擴大一個映像,但是如果想回去給已經你設計的網站添加Retina螢幕顯示的映像,而且你也不想手動的去重新建立每個映像。通常擴充一個映像會層致一個模糊和鋸齒點狀,但是有一個小選項在Photoshop的映像有一個菜單選擇”Neares Neighbor”,這樣就可以勉強幫你避免模糊的外觀和大量的鋸齒,這樣映像就可以用了。在元素還沒有載入完時,他不會載入進來,但是他提供了一個晳時的替換。

設計在200%,然後是縮小?

你可能會想,我為什麼不能建立一個兩倍大小的Web布局頁面,這樣我就可以縮小元素來建立需要的表徵圖。在傳統的印刷設計理論中是可行的,但是在Web設計中是不行的。因為Web設計是工作在一個像素的基礎上,用來創造完美的形狀和線條。就算是我們按一定的比例綻放圖片,然後通過Photoshop軟體匯出來,那麼匯出來的圖片也是一個外表模糊的,特別是小表徵圖的時候。

如何代碼控制Retina映像

一旦你建立了一個標準圖片的副本,而且這個副本是標準圖片大小的兩倍像素,那麼你就可以使用不同的方法把他們載入到你的頁面中。這裡有一個快速對檔案命名的方法,把標準圖片和Retina螢幕下圖片放在一個相同的檔案目錄下,並且Retina下圖片命名的方式是在普通映像的檔案名稱的末尾上加個”@2x“,比如說普通影像檔名是”snarf.jpg“,在Retina下我們就把映像另外命名為”snarf@2x.jpg“。

簡單的javascript方法

<script src=“js/retina.js”></script>

絕對簡單的方法,就是使用retina.js指令碼來控制調用Retina映像。簡單點說,retina.js會自動檢查你圖片目錄中的”@2x“映像,然後在Retina裝置下替換普通的圖片。

CSS修改方法

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

header h1 a {

background-image: url(images/blogspoon-logo@2x.png<script type=“text/javascript”>

/* <![CDATA[ */(function(){try{var s,a,i,j,r,c,l=document.getElementById(“__cf_email__”);a=l.className;if(a){s=‘’;r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();

/* ]]> */</script>);

background-size: 164px 148px;

}

}

或者,你可以通過手動修改css檔案來控制Retina裝置下調用Retina映像。通過媒體查詢,如果媒體中條件含有”min-device-pixel-ration:2“,在目標元素上就調用適合Retina裝置的圖片”@2x“,但是不能忘了結對對應的元素設定”background-size“背景圖片的尺寸和常規圖片大小一樣。

HTML的img標籤

<img src=http://www.webjx.com/web/“images/snarf@2x.jpg<script type=”text/javascript“>

/* <![CDATA[ */

(function(){try{var s,a,i,j,r,c,l=document.getElementById(”__cf_email__“);a=l.className;if(a){s=‘’;r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();

/* ]]> */

</script>” width=“300px” height=“150px” />

CSS的方法是通過”media queries“來控制元素的背景圖片,但是在HTML中可以使用”img“的圖片標籤,非常的簡單,在”img”標籤中載入”@2x“映像,然後通過”img“標籤的”width“和”height“屬性值來縮放映像,以達到普通映像的尺寸。

英文地址:how to create retina graphics for your web designs,編譯:w3cplus – 大漠



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。