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 theme, How 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 ":
To 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:
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.
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):
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:
- 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:
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 appearance and to optimize the handling 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.
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.
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 the latter is for. But we will say that the WordPress Plugin Social Sidebar will help you create a sidebar on your website with the aim of helping you do quickly share your content on different social networks.
Its functionalities include: automatic integration with your WordPress theme, the ability to configure 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.
Download | Demo | Web hosting
Other recommended resources
Find out about other recommended resources to help you build and manage your website.
- 7 WordPress plugins to create designs for your products
- 4 WordPress plugins to save on DropBox
- How to add infinite scrolling to a WordPress blog
- 10 WordPress plugins to receive donations on your blog
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.
...
