Skip to Main Content

How to Create "Retina" Images for a WordPress Blog

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

You have invested a lot of time in setting up the design of your blog, but why the images are not displayed correctly on Smartphone? You made sure to use high quality images, but poor image condition does not correct the display.

Many people do not realize that new devices (especially those from Apple) use advanced display technology that affects the way images are displayed, to ensure that they are displayed correctly on both computers and Smartphone.

In this tutorial we will try to introduce a bit of the notion of " retina ready And show you how to create a Retina image.

But before you start, take the time to take a look at How to install a WordPress themeHow many plugins to install on WordPress.

Then let's get to work.

Explanation of the images Retina Ready

Device screens have continued to improve in quality over the past few years, and Apple's screens in particular have done a lot of work to be extremely clear and visible. Technology "Retina DisplayIs a brand name of Apple used to describe a certain type of display with particular aptitudes.

Retina screens aim to display text and images as clearly as possible, with no pixels visible to the naked eye. The challenge for designers is that the display varies depending on the screen size of the device, and a user's proximity to the screen.

By dividing the physical width of the screen by the number of pixels displayed horizontally, we have the pixels per inch (ppi, also called ppp for dots per inch). " High DPI Is used to refer to any device that has more than 200 pixels per inch. This includes all display devices " retina (From Apple), and some devices from other manufacturers.

How to Create "Retina Ready" Images with Photoshop

Working with images at double or quad resolution means you will have to be able to zoom in to see all the little details, however extremely heavy files cause a performance problem and a file storage challenge.

The solution for most designers has been to either create multiple layers and group them together, activating them as needed. using the function "comps » from Photoshop either to work at the original resolution and export the formats they need (using an action like "retinize").

The challenge with these two methods is that you can not see multiple images at the same time. If you need to see the differences in the images at the necessary sizes, you need to switch between them or export them.

Lucky for us Photoshop enthusiasts, Adobe has added a feature that makes creating multiple images easier. Now you can create multiple canvases side by side using the characteristic artboard, and create multiple image sizes using the generator. Let's see how it works.

1 - Create your first Artboard

The new Artboard tool, introduced in Photoshop CC 2015, is hidden behind the movement tool. You can click the tool in the menu, or use Shift + V to switch between " displacement "And" artboard ":

Artboard-Tool1-photoshop-tutorial-wordpress-create-images-retina readyTo create a work plane, click and drag an area. The new artboard will be displayed in the layers panel with the default name "Artboard 1".

Read also: Why freelancers need a daily schedule

2 - Configure your Artboard

You can add layers you need to your artboard, and they will be nested as layers are (allowing you to create an appropriate layer structure). We suggest adding your various files, such as shapes, so that they are positioned as you want them before proceeding to the next step.

3 - Duplicate Your Artboard

Once your first artboard is set up to meet your needs, you can duplicate it using the context menu. Right click on "Artboard 1" in the layers area and select "Duplicate Artboard". This creates another similar “Artboard”, containing the same structure with all of its components:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

photoshop duplication artboard

To discover also: How to easily duplicate an article or page on WordPress

4 - Place your worktops (Artboard)

The great advantage of using artboards is being able to see all of your images at the same time. To do this, simply position your worktops according to your needs. There are several ways to do this:

Use the panel that appears when a work plane is selected to enter the X and Y coordinates on the upper-left corner of the work plane.

Drag the selected artboard to any position in the Photoshop. The artboard intelligently activated, so that you can automatically align multiple artboards so that their positions lock into the previous spacing.

Use the arrow keys on the keyboard to move a selected work plane.

Also see our tutorial on: How to fix the media library that no longer works on WordPress

5 - Resize your artboards (when necessary)

If you need to adjust the size of your artboards, you again have several options:

  • Resize using the handles that appear when you select a artboard.
  • Use the options panel just below the "File" menu to choose preset sizes, fixed widths or heights, or toggle between portrait and landscape.
  • Use the "Properties" panel that appears when a worktop is selected to change the size and access predefined sizes.

Property of the photohop work area

6 - Create your Art

You can now work with your countertops, replace components and make changes as needed. Assuming your original setup is unchanged, you will now have pixel perfect images with all components in the right place.

See also our list of 26 WordPress themes with Drag and Drop to create your pages

7 - Set up the "Generate" tool

« Generate »Allows you to export artboards, layers or groups using special naming syntax. This is a shortcut to save for the web. To ensure that " Generate Is enabled for your PSD, go to " File> Generate> Image Assets "(File> Generate> Image Assets):

generate tool photoshopgenerate tool photoshop

8 - Rename your artboards

Generate « Art "To save image components you are working on based on the options set in the layer set or in your artboard. There are a few options you can set:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • The format of the file. Add an extension (.jpg, .gif or .png ) to save the concerned file for example: header-main.png The image components will be saved in the same folder as the PSD file, but with "-assets" as a suffix.
  • File compression.  After the extension, you can add a number indicating the level of compression used. For " opt.jpg »You can use percentages, and for png use the respective bits: 8, 24 or 32.
  • Exit scale. You can set the output scale by adding either percentage or pixels (the width to height) before the image name (for example 100% header-main.png8 ).
  • more images. You can export multiple images of the same artboard (artboard) using a comma or plus sign to separate image names. Each image can thus have its own options as long as each name of the image is unique.

The combination of these options allows you to constantly create complex image components for your artboards:

management of image components

If standard images are needed for all your worktops, the " Generate Allows you to create a parameter to apply to each by default. To create this parameter, add an empty layer at the top of your document with the following options:

  • Default keyword: The name must start with this to leave the tool " Generate »The freedom to use it as the default.
  • Exit scale: Allows you to set the output scale with a percentage or pixels (the width to height).
  • Folder / suffix: Define the name of the folder in which the images should be saved, and a suffix to add to the names of the files.

Summary

That's all you got there, try to zoom in on the image to see how the latter behaves. If necessary, you can test the image on your WordPress blog by uploading it to your media library.

Feel free to ask us questions as needed.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WP Ultimate Social

This is an ultimate pack of all the social networking features you could possibly need on your WordPress blog.wp-ultimate-social

Read also our 8 WordPress plugins to integrate a reduction system

Its main features are: multiple social network icons, social sharing that allows anyone to share the content of your website (articles, pages, images, media) on popular social networks (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, Digg, Buffer, Reddit, Tumblr, Stumbleupon, Xing, Weibo, VK, Delicious), connection to the website with your social media credentials, a counter to display the numbers of your followers, and shares of your website and others.

Download | Demo | Web hosting

2. WP Slick Slider Image Carousel Pro

If you're an avid follower of the Visual Composer suite, using the WP Slick Slider plugin is an option you'll need to consider. With almost 100 predefined templates, you will definitely find what you are looking for without coding anything.

Wp slick slider and image carousel pro

This is an option to take really seriously, especially for users of Visual Composer. Its features are among others: a fully responsive layout with drag and drop support, a shortcodes, RTL and multilingual support, a beautiful design and much more

Download | Demo | Web hosting

3. WordPress Social Sidebar

The name of this WordPress plugin should tell you roughly what it is for. But it looks like the WordPress Social Sidebar plugin will help you create a sidebar on your website in order to help you do quickly share your content on different social networks.

Wordpress social sidebar

Its functionalities are among others: automatic integration into your WordPress theme, the possibility of configuring it from top to bottom, compatibility with several recent and modern browsers, the possibility of placing your sidebars from left to right, above or at the bottom of your pages, 4 color sets are offered natively, a responsive layout and much more.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download Demo | Web hosting

Other recommended resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to create "Retina" images for your WordPress blog. 

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments. Do not hesitate to share with your friends on your favorite social networks

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
10 shares
Share10
tweet
Save