Images and Learning About Retina Ready Images

My next task was to set up the image slider. Avada comes with Layer Slider 4.0, Revolution Slider, Elastic Slider, FlexSlider, ThemeFusion Slider, and Post Sliders. I was a little apprehensive about the slider. It turns out that I didn't need to be. I dedicated Monday to the project and it was quickly solved. In hindsight, it was the photo work that has taken up more time.

Revolution Slider
I liked the look and feel of this slider. It became my test subject. Once again the Avada YouTube tutorial made it fairly simple. I set the video to full screen and paid careful attention to the file type and size of the images being used in the tutorial.

Setting the solid color background image on the slider becomes very important when containing the actual image and potential text layers. I would not have done that step without the tutorial. (See approximately 3:16 on the video.)

Adding the photo layer and setting its exact location was another speedy tip to developing the slider (4:08 on the video).

Retina Ready
Avada is a retina ready template. I noticed the Avada Retina Ready Information video after I had edited six images and some graphic files for the school name. I wish I had found that first and I am grateful I had only a handful of graphic images already created.

My younger son had been talking with me about retina ready images for some time now. He develops apps for iPhone, iPad, and iTouch.  I understood that he was making images twice the size he needed them, but I didn't think about that as I was creating those first images for the school website. You should play the Avada Retina Ready video for a quick understanding of the concepts. What is amounts to is that however big your screen area is for an image, you need to upload an image that is actually twice as big. As the video says, if the image area is 100x100 pixels, the uploaded image should be 200x200 pixels.

I will be working on this concept tomorrow. There is a WordPress plug-in that I have to install that will check the images.

Image Editing in Gimp and iPhoto
Gimp has been my free image editing software for years now. I knew the types of images I would be seeking from the school marketing class I took in my now completed Masters program. The photos should show action not things. The photos should show the best of what we as a school want to represent. The photos should be tightly cropped on faces. The photos should be of the highest resolution possible.

From years in working with photography as a hobby I knew I wanted crisp, sharp focus. I wanted the images color balanced. I wanted clean lines and no distractions behind the faces. If I can find leading lines in the images it is all the better.

I know I will improve my methodology over the next few months. Yesterday I found an exciting option in Gimp to help me get the size I thought I needed before I started to understand the implications of being retina ready. Even as I write this, I wonder if the Revolution Slider images are ok because mine are the same size as those that were used in the tutorial. I am being very careful to look at everything on the screen in the videos.

First, the Revolution Slider needed a background image. This anchors the rest of the layers on each slide that revolves through the slider. The tutorial suggested a PNG file filled with the hex color #f6f6f6. Hex colors are another concept I teach my students when we learn about HTML. In brief, colors are made up of red, green, and blue on monitors. Instead of counting in the base 10 system (0-9) we count in base 16 (0-9 then A-F). The hash tag symbol (#) denotes a hex number.

In Gimp I created a new image that was 940x434 pixels. I filled the background with #f6f6f6. I saved it as a Gimp (.xcf) file and a Portable Network Graphics (.png) file. I started a folder called smscranford to store all images that make it to WordPress in our domain.

Next, I gathered several images and brought them into iPhoto to do a quick color balancing. I need to learn more about this step too. In iPhoto 9.4.3 I click on the Photo then choose the Edit icon on the lower left side of the screen. Next I click on the Adjust tab on the top right side of the program. Finally, I locate the tiny color picker icon and click on a white or neutral color. 

I drag the newly balanced photo to an "Adjusted" subfolder in my Pictures folder.

The tutorial showed the actual imported images to be 940x434 pixels. I don't know how that squares with the idea that for the retinal display the images should be twice as big. For the moment, I am resizing my original images that range from 2048x1536 to 4000x3000 proportionally down to 940 pixels wide. If there is a lot to be cropped out I first use the rectangular selector and attempt to select an area that is in the neighborhood of 940 pixels or a bit larger. Once the area is selected, I Edit-Copy the selected area and Edit-Paste as New Image.

Next, as needed, I Image-Scale Image so that it is proportionally 940 pixels wide.

Here is the new trick! I found Image-Canvas Size. I unlink the proportional resizing and leave the Width at 940 pixels and change the Height to 434 pixels. It then gives me the ability to slide the image up and down to determine which pixels will fill the height.

I was really happy with this feature.