One piece of feedback we received from our users is that they don’t know enough about the image editing capabilities within the Sunny Landing Pages builder so I thought I’d write out a blog post with some details.
Whether it’s a picture of an adorable kitten, a happy family or just a funny visual, a landing page is never complete without the right images.
That’s where stock image sites like Pixabay, Unsplash etc. come in handy with their free-to-use library of images. On a side note – I just stumbled upon this article about the world’s most famous stock image model.
However when you download images from these libraries, they seem just perfect until you insert them into your page. That’s when you feel the need to make minor edits to get the image to fit just right on your page and in relation to other elements.
Let’s take the example of a background image for a top section of a landing page. For e.g. this backdrop of the city in the night time.
Chances are, the first thing you’ll want to do immediately is some re-sizing or cropping to make the image fit properly in the background.
Once the size is correct, you’ll start adding your text on the page based on the image orientation and style. For a background image then you’ll overlay the text or the form on top of the image. That means you’ll want to ensure the text is contrasting well enough. If the text is blending in with the background image, then users won’t catch the message.
This means you’ll want to add white or black transparency layers to your image. Or perhaps add in some blur/ blemish effects to make the text stand out while maintaining the visual context.
It sounds tougher than it is to do – but if you want your landing page to look it’s designed by a professional, then you can use some of the tips and tricks I’ve described in this blog post below.
So here are two things that you can read about in this article:
- What are the various types of stock images?
- How to edit the images on the Sunny Landing Page Builder
All about Stock Images
Here’s what a Vector Graphic would typically look like:
An illustration would look something like this:
and here’s an example of a high quality HD stock image video. Ideal for a travel and tourism landing page.
Another aspect of the Stock Image would be Orientation. An image could be vertical or horizontal. For e.g. take these two images of castles. The first is horizontal:
and second is vertical:
But within orientation it’s also useful to understand the weight of the visual and whether it is heavier on the left or right. This image of blueberries is left-inclined leaving an opportunity to use the space on the right for adding text or a sign-up form.
On the other hand, this image of roller skates is right-inclined leaving room to work with on the left.
You can also search for images on Stock libraries based on industries (Arts, Telecom, Finance etc) or just simple tags such as exercise + woman, raw + vegetables etc.
Finally, you can also specify image size specifications and color schemes that match your branding or landing page aesthetic design.
Editing Images on Sunny Landing Page Builder
Once you’ve uploaded your image on to the builder, you will see the option for editing the image towards the right. You can see the red highlighted box in the image below. I’ve selected this image of a house which will work well with a real estate landing page template.
Once you’ve clicked on the link, you’ll see the image editor dashboard of sorts which gives a list of all the image editing options.
Crop
Let’s say we want to change the image so that there isn’t so much of the front lawn. The editor makes it really easy. There are preset sizes and dimensions you can choose from. You can add specific dimensions or the easiest way is to just drag and drop to crop to the exact section you want.
I love how the gridlines give a moving guidance with respect to the Rule of Thirds.
Resize
One of the most common mistakes by amateurs is try re-sizing the image without maintaining the aspect ratio. For a landing page image, nothing is a bigger turnoff than a stretched dimension.
The editor provides you with an easy to use resizing tool which automatically maintains the ratio for you.
Adjust
You can adjust brightness, contrast, shadows, highlights, saturation, warmth, tint and fade effects. E.g. Let’s give some more emphasis on the shadows and reduce the brightness of our cat pic:
Orientation
You could swap the orientation.
Very often I find I want the text to be on the left of the page but the perfect background image doesn’t support that. So a mirror effect works well here. Check out our right side cat (mirror effect)
The purists wouldn’t like to use this kind of effect, but in my mind it is usable in most scenarios.
Blur and Focus effects
This cycle image below is a good example of how you can blur out the background and add focus on the primary object without losing the context.
Vignette
This is one of my personal favorites. In landing pages, you need background images with a text overlay. But, most often the text does not stand out enough.
There are a couple of ways you can handle that issue. One is to introduce a text-shadow. There are many options here – shadow weight, shadow color etc., but you’re going to need to use some basic HTML to be able to get that going. Something like this:
The other option is to add a transparency layer over the whole image and that you can achieve in the Vignette option in the Sunny Landing Page builder.
In this real estate landing page template, the image has been given a white layer with about 75% transparency. It lets the messaging get prominence without removing the background context.
Text
Add text as part of the imagte – you can even give it a typical Meme look!
Other editing options for your landing page images:
- Auto enhancing the image based on settings for Hi-Def, Scenery, Food pics, Portrait pics, Night pics etc.
- Adding effects such as giving it a sepia tinge, a soft-focus, aqua effects etc.
- Increasing or decreasing the sharpness of the image.
- Red-eye removal
- Splash colors with smart color effects
- You can add add decorative or fun frames, colorful overlays and/ or stickers – wanna see our cat with a mustache?
Now if you’re a budding photographer yourself, here’s a massive guide for amateurs to make the most of your camera and capture professional looking photographs and pics. It’s pretty impressive!
On that note – have a good one and all the best for you marketing campaigns. Do leave me your feedback in the comments below!
Enjoy Maadi!