這篇文章主要介紹“Web設(shè)計(jì)師怎么制作Retina顯屏設(shè)備的圖片”，在日常操作中，相信很多人在Web設(shè)計(jì)師怎么制作Retina顯屏設(shè)備的圖片問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Web設(shè)計(jì)師怎么制作Retina顯屏設(shè)備的圖片”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括正陽(yáng)網(wǎng)站建設(shè)、正陽(yáng)網(wǎng)站制作、正陽(yáng)網(wǎng)頁(yè)制作以及正陽(yáng)網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，正陽(yáng)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到正陽(yáng)省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

特別聲明：此篇文章根據(jù)Chris Spooner 的英文文章《How to Create Retina Graphics for your Web Designs 》進(jìn)行翻譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。蘋(píng)果公司發(fā)布了更多的產(chǎn)品適應(yīng)Retina屏幕。到目前為止，我們知道蘋(píng)果設(shè)備中支持Retina屏幕技術(shù)的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”，這些設(shè)備能為用戶(hù)呈現(xiàn)更細(xì)膩、平滑和高質(zhì)量的圖片效果，提高了用戶(hù)的視覺(jué)體驗(yàn)。做為一名Web設(shè)計(jì)師如何為你的網(wǎng)站創(chuàng)建這些適合Retina顯屏設(shè)備的圖片呢？這就是我們今天要學(xué)的一個(gè)東東。

為什么要支持Retina顯示

最初我并期望采用較大的圖片來(lái)滿(mǎn)足Retina屏幕顯示采用巨大的圖像，因?yàn)樗吘故且粋€(gè)全新的技術(shù)。但后來(lái)我花了點(diǎn)時(shí)間做了一個(gè)統(tǒng)計(jì)，才意識(shí)到蘋(píng)果的設(shè)置占據(jù)了很多移動(dòng)端的份額，這些設(shè)備大多數(shù)是“iPhone”、“iPod”和"iPad",而且這些設(shè)備都支持Retina屏幕技術(shù)。大部分使用13、15寸Retina顯示屏的用戶(hù)都通過(guò)”Chrome“、”Firefox“、”Safari“和”IE“上網(wǎng)，如果你需要支持”O(jiān)pera“瀏覽器，那是你在迎合一些小眾用戶(hù)。（我自己的網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)，就是這樣的一個(gè)情況）

如何創(chuàng)建Retina圖像

你可能為認(rèn)為，Retina圖像只需要使用高分辨率（PPI）來(lái)保存就可以，但事實(shí)并不是如此。所有你需要做的是為Retina顯屏保存放大兩倍的中圖片，比如說(shuō)你保存一張200x200像素（css像素）的圖生，你需要將圖片保存成400x400像素。這些超大型的圖像顯示成原始圖像的大小尺寸，有助于在Retina屏幕上創(chuàng)建光滑和清爽的外觀效果。

聽(tīng)起來(lái)很簡(jiǎn)單，那你要怎么獲取雙倍大小的圖像呢？

使用Illustrator設(shè)計(jì)Logo和Icon圖標(biāo)

矢量圖是創(chuàng)建Retina圖像的完美解決方案。如果你有一個(gè)Logo或ICON是EPS或者Ai文件，在導(dǎo)出或者復(fù)制圖片到Photoshop時(shí)，矢量圖它能夠擴(kuò)展到任何尺寸大小。粘貼的元素可以作為一個(gè)智能對(duì)象，經(jīng)將保留其矢量路徑，因此他可以翻一番，導(dǎo)了出來(lái)，作為適合Retina的一個(gè)特殊圖像。

使用Photoshop的矢量特性

Photoshop是一個(gè)像素圖形的應(yīng)用軟件，但這并不意味著他不具有制作矢量圖形的特性。每一個(gè)圖形工具都可以創(chuàng)建一個(gè)矢量層，而不僅僅是像素層，這樣一來(lái)所有圖層樣式效果依然可以伸縮的。如果你把元素都乘以2，所有的效果幾乎都能精確的放大兩倍大小。

擴(kuò)大你的像素圖像

其中有一條規(guī)則，作為設(shè)計(jì)師的我們不想輕意的去擴(kuò)大一個(gè)圖像，但是如果想回去給已經(jīng)你設(shè)計(jì)的網(wǎng)站添加Retina屏幕顯示的圖像，而且你也不想手動(dòng)的去重新創(chuàng)建每個(gè)圖像。通常擴(kuò)展一個(gè)圖像會(huì)層致一個(gè)模糊和鋸齒點(diǎn)狀，但是有一個(gè)小選項(xiàng)在Photoshop的圖像有一個(gè)菜單選擇"Neares Neighbor",這樣就可以勉強(qiáng)幫你避免模糊的外觀和大量的鋸齒,這樣圖像就可以用了。在元素還沒(méi)有加載完時(shí)，他不會(huì)加載進(jìn)來(lái)，但是他提供了一個(gè)晳時(shí)的替換

設(shè)計(jì)在200%，然后是縮??？

你可能會(huì)想，我為什么不能創(chuàng)建一個(gè)兩倍大小的Web布局頁(yè)面，這樣我就可以縮小元素來(lái)創(chuàng)建需要的圖標(biāo)。在傳統(tǒng)的印刷設(shè)計(jì)理論中是可行的，但是在Web設(shè)計(jì)中是不行的。因?yàn)閃eb設(shè)計(jì)是工作在一個(gè)像素的基礎(chǔ)上，用來(lái)創(chuàng)造完美的形狀和線條。就算是我們按一定的比例綻放圖片，然后通過(guò)Photoshop軟件導(dǎo)出來(lái)，那么導(dǎo)出來(lái) 的圖片也是一個(gè)外表模糊的，特別是小圖標(biāo)的時(shí)候。

如何代碼控制Retina圖像

一旦你創(chuàng)建了一個(gè)標(biāo)準(zhǔn)圖片的副本，而且這個(gè)副本是標(biāo)準(zhǔn)圖片大小的兩倍像素，那么你就可以使用不同的方法把他們加載到你的頁(yè)面中。這里有一個(gè)快速對(duì)文件命名的方法，把標(biāo)準(zhǔn)圖片和Retina屏幕下圖片放在一個(gè)相同的文件目錄下，并且Retina下圖片命名的方式是在普通圖像的文件名的末尾上加個(gè)”@2x“，比如說(shuō)普通圖像文件名是”snarf.jpg“，在Retina下我們就把圖像另外命名為”snarf@2x.jpg“。

簡(jiǎn)單的javascript方法

代碼如下:

[/code]
絕對(duì)簡(jiǎn)單的方法，就是使用retina.js腳本來(lái)控制調(diào)用Retina圖像。簡(jiǎn)單點(diǎn)說(shuō)，retina.js會(huì)自動(dòng)檢查你圖片目錄中的”@2x“圖像，然后在Retina設(shè)備下替換普通的圖片。

CSS修改方法
[code]
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
 header h2 a {
   background-image: url(images/blogspoon-logo@2x.png);
   background-size: 164px 148px;
 }
}

或者，你可以通過(guò)手動(dòng)修改css文件來(lái)控制Retina設(shè)備下調(diào)用Retina圖像。通過(guò)媒體查詢(xún)，如果媒體中條件含有”min-device-pixel-ration：2“,在目標(biāo)元素上就調(diào)用適合Retina設(shè)備的圖片”@2x“，但是不能忘了結(jié)對(duì)對(duì)應(yīng)的元素設(shè)置”background-size“背景圖片的尺寸和常規(guī)圖片大小一樣。

HTML的img標(biāo)簽

代碼如下:

CSS的方法是通過(guò)”media queries“來(lái)控制元素的背景圖片，但是在HTML中可以使用”img“的圖片標(biāo)簽，非常的簡(jiǎn)單，在"img"標(biāo)簽中加載”@2x“圖像，然后通過(guò)”img“標(biāo)簽的”width“和”height“屬性值來(lái)縮放圖像，以達(dá)到普通圖像的尺寸。

到此，關(guān)于“Web設(shè)計(jì)師怎么制作Retina顯屏設(shè)備的圖片”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！