您已經花費大量時間來設置博客的設計,但是為什麼圖像無法在Smartphone上正確顯示? 您確保使用了高質量的圖像,但是較差的圖像條件無法校正顯示。

許多人沒有意識到新設備(特別是蘋果的)使用會影響圖像顯示方式的高級顯示技術,以確保它們既可以在計算機上顯示,也可以在智能手機上正確顯示。

在本教程中,我們將嘗試介紹一些“ 視網膜準備 並向您展示如何創建Retina圖像。

但是在開始之前,花點時間看一下 如何安裝WordPress主題我應該如何許多插件安裝WordPress的.

然後開始工作。

視網膜準備圖像說明

在過去的幾年中,設備屏幕的質量一直在不斷提高,特別是蘋果的屏幕已經做了很多工作,以使其非常清晰可見。 技術”Retina顯示屏是蘋果的商標,用於描述具有特定能力的某種類型的屏幕。

視網膜屏幕旨在 盡可能清晰地顯示文本和圖像,肉眼看不到像素。 設計人員面臨的挑戰是,顯示器會根據設備的屏幕尺寸以及用戶離屏幕的距離而變化。

通過將屏幕的物理寬度除以水平顯示的像素數,我們得到每英寸的像素數(ppi,也稱為每英寸點數ppp)。 “ 高DPI 用於指每英寸具有200像素以上的任何設備。 這包括所有顯示設備“ 視網膜 (來自Apple)以及其他製造商的某些設備。

如何使用Photoshop創建“視網膜就緒”圖像

使用雙倍或四倍分辨率的圖像意味著您必須能夠放大才能看到所有細微的細節,但是文件過重會導致性能問題和文件存儲難題。

對於大多數設計師而言,解決方案是創建多個層並將它們分組在一起,然後根據需要激活它們。 使用功能“ comps » 的Photoshop 要么以原始分辨率工作並導出所需的格式(使用“重新設置”之類的操作).

這兩種方法的挑戰在於您無法同時看到多個圖像。 如果需要以必要的尺寸查看圖像中的差異,則需要在它們之間切換或導出它們。

對於我們的Photoshop愛好者而言,幸運的是,Adobe添加了一項功能,使創建多個圖像更加容易。 現在,您可以使用特徵畫板並排創建多個畫布,並使用生成器創建多個圖像尺寸。 讓我們看看它是如何工作的。

1-創建第一個Artboard

新推出的Artboard工具 Photoshop的CC 2015,隱藏在移動工具的後面。 您可以點擊菜單中的工具,或使用Shift + V在“ 移位 “和” 畫板 »:

Artboard-Tool1-photoshop-教程-wordpress-創建圖像-視網膜就緒要創建工作平面,請單擊並拖動一個區域。 新的畫板將以默認名稱“畫板1”顯示在圖層面板中。

另請閱讀: 為什麼自由職業者需要每日時間表

2-配置您的畫板

您可以將所需的圖層添加到畫板上,它們將按圖層嵌套(允許您創建適當的圖層結構)。 我們建議添加各種文件(例如形狀),以便在繼續下一步之前將它們放置在所需的位置。

3-複製畫板

設置完第一個畫板以滿足您的需求後,您可以使用快捷菜單進行複制。 右鍵單擊圖層區域中的“ Artboard 1”,然後選擇“ Duplicate Artboard”。 這將創建另一個類似的“ Artboard”,其中包含相同的結構及其所有組件:

複製畫板photoshop

另外發現: 如何輕鬆地複制WordPress上的文章或頁面

4-放置工作台(畫板)

使用畫板的最大優點是能夠同時查看所有圖像。 為此,只需根據需要放置工作台即可。 做這件事有很多種方法:

使用選擇工作平面時出現的面板在工作平面的左上角輸入X和Y坐標。

將選定的畫板拖動到 Photoshop中。 畫板已智能激活,因此您可以自動對齊多個畫板,以便其位置鎖定在先前的間距中。

使用鍵盤上的箭頭鍵移動選定的工作平面。

另請參閱我們的教程: 如何修復不再適用於WordPress的媒體庫

5-調整畫板尺寸(必要時)

如果需要調整畫板的尺寸,則可以再次選擇以下幾種方法:

  • 使用選擇畫板時出現的手柄調整大小。
  • 使用“文件”菜單下面的選項面板選擇預設大小,固定寬度或高度,或在縱向和橫向之間切換。
  • 使用選擇工作台時出現的“屬性”面板來更改大小並訪問預定義的大小。

Photohop工作區的屬性

6-創作藝術

現在,您可以使用工作台,更換組件並根據需要進行更改。 假設原始設置未更改,那麼您現在將獲得像素完美的圖像,所有組件都放置在正確的位置。

另請參閱 26 WordPress主題與系統拖放來創建你的頁面

7-設置“生成”工具

« 產生 »允許您使用特殊的命名語法導出畫板,圖層或組。 這是保存到網絡的快捷方式。 為了保證 ” 產生 已為您的PSD啟用,請轉到“ 文件>生成>圖像資產 “(文件>生成>圖像 資產):

工具photoshop工具photoshop

8-重命名畫板

產生« 藝術 “到 保存圖像組件 您正在根據圖層集或畫板中設置的選項進行操作。 您可以設置一些選項:

  • 文件格式。 添加擴展名(。jpg,.gif或.png )以保存相關文件,例如:header-main.png圖像組件將與PSD文件保存在同一文件夾中,但後綴為“ -assets”。
  • 文件壓縮.  擴展之後,您可以添加一個數字,指示使用的壓縮級別。 對於“ opt.jpg »您可以使用百分比,對於png使用相應的位:8、24或32。
  • 出口規模。 您可以通過添加百分比或像素來設置輸出比例(高度上的寬度),在圖片名稱(例如100%header-main.png8 ).
  • 幾個圖像。 您可以導出同一畫板的多個圖像(畫板),請使用逗號或加號分隔圖像名稱。 因此,只要圖像的每個名稱都是唯一的,每個圖像都可以有自己的選項。

這些選項的組合使您能夠不斷為畫板創建複雜的圖像組件:

圖像組件管理

如果所有工作台都需要標準圖像,則“ 產生 允許您創建一個默認情況下適用於每個參數的參數。 要創建此參數,請使用以下選項在文檔頂部添加一個空層:

  • 默認關鍵字:名稱必須以此開頭,以離開工具“ 產生 »自由使用它作為默認值。
  • 出口規模:允許您使用百分比或像素(高度上的寬度).
  • 文件夾/後綴: 定義應在其中保存圖像的文件夾的名稱,以及添加到文件名的後綴。

總結

這就是您所到之處,請嘗試 放大圖像 看看後者的表現。 如有必要,您可以通過將其上載到媒體庫來測試WordPress博客上的圖像。

請根據需要隨時向我們提問。

還發現一些高級WordPress插件  

您可以使用其他 WordPress插件 賦予現代外觀並優化您的博客或網站的處理。

我們在這里為您提供了一些高級WordPress插件,它們將幫助您實現這一目標。

1。 WP終極社交

這是您可能在WordPress博客上可能需要的所有社交網絡功能的最終組合。WP-終極社交

另請閱讀我們的 8 WordPress插件可集成減少系統

其主要特點是: 多個社交網絡圖標,社交分享,任何人都可以 分享您的網站內容 (文章,頁面,圖像,媒體)在流行的社交網絡(Facebook,Twitter,Linkedin,GooglePlus, Pinterest, DIGG,緩衝區, 書籤交易,Tumblr, 偶然發現, ,微博,VK,美味),使用您的社交媒體憑據連接到網站,用於顯示關注者數量的計數器以及您的網站和其他人的份額。

下載 | DEMO | 虛擬主機

2。 WP Slick Slider Image Carousel Pro

如果您是Visual Composer套件的狂熱追隨者,則需要考慮使用WP Slick Slider插件。 使用幾乎100個預定義的模板,您無需編碼就可以找到所需的內容。

WP光滑滑塊和圖像輪播Pro

這是一個非常認真的選擇,尤其是對於 可視化編輯器。 其功能包括:具有拖放支持的完全響應式佈局, , RTL和多語言支持,精美的設計等等

下載 | DEMO | 虛擬主機

3。 WordPress社交側邊欄

這個名字 WordPress插件 應該大致告訴您後者的用途。 但我們會說 WordPress插件 社交側邊欄將幫助您在網站上創建側邊欄,目的是幫助您做 在不同的社交網絡上快速分享您的內容.

WordPress社交邊欄

其功能包括:自動與您的 WordPress主題,從上到下配置它的能力,與幾種最近和現代瀏覽器的兼容性, 從左側到右側放置側邊欄的可能性,頁面上方或底部的本機提供4種顏色集,響應式佈局等等。

下載 DEMO | 虛擬主機

其他推薦資源

查找有關其他推薦資源的信息,以幫助您構建和管理網站。

結論

這裡 ! 就是本教程的內容了,希望它可以讓您為WordPress博客創建“ Retina”圖像。 

但是,您也可以諮詢 我們的資源,如果您需要更多元素來執行創建Internet網站的項目,請參考我們的指南 WordPress博客創建。

如果您有任何建議或意見,請將其留在我們的部分 評論。 不要猶豫 與您喜歡的社交網絡上的朋友分享

...