In this mini-series of lessons on creating images for your WordPress site, we’ve covered the basics and experimented with two ways of creating header art from scratch and with text overlaying a photograph. This tutorial covers creating a quote graphic, words over an image used to showcase a quote or to display an image with text overlaid.
In Lorelle’s WordPress School, we’ve covered many of the different ways images are used in our WordPress sites, from profile images to header art to content images and visual examples. Social media is filled with quotes set as graphics, and many websites use them as well.
This image lesson is also a midway point between learning how to add text to an image and turning that image into a badge, icon, or call-to-action image covered in the next tutorial.
The need to add words to images on the web go beyond quotes on social media. If you are a serious or professional photographer, comic strip writer and illustrator, graphic artist, or anyone who creates original graphics for the web, you need to learn how to put your name on the image, be it as a visible credit or hidden watermark. I’ll not cover watermarks as there are many tutorials on the web for doing such, but I will help you learn the basics of how to put words on images.
To create a quote graphic is little different from creating header art. In this example, I will use a quote from the astronaut, Neil Armstrong, whom I had the great pleasure of meeting twice.
The process begins with finding or creating a image for the background. This is a little more challenging than you may think. Before I go into details, please remember to use copyright and royalty free images to protect the copyright of others or create your own artwork for the background.
The quote I’m going to use is:
I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn’t feel like a giant. I felt very, very small.
Read like that, it is a powerful visual, but broken up like poetry, it becomes poetic.
I put up my thumb
and shut one eye,
and my thumb blotted
out the planet Earth.
I didn’t feel like a giant.
I felt very, very small.
Immediately we have created a visual presentation just by breaking the sentences up in prose form. This helps me to visualize how I want it to appear on the image, so now I need an image.
In a cliche move, I went with an image from space. I found an image of the Earth as seen from the moon from the NASA public domain images collection. Very appropriate.
Could I have selected a different image? Certainly. This was an easy selection, but finding an image to place words upon isn’t usually that easy. In the previous tutorial on header art, you saw how I experimented with different techniques to allow the words to be easily readable over the image. That’s one challenge. Appropriateness is another. Take your time and experiment with different images if you don’t have one specifically in mind.
If you are using an image on the web, right click and choose Save Image As. Remember, just because it is on the web doesn’t mean it is free. Check image usage rights first.
In Pixlr, click on Open image from computer. Find the image on your computer’s hard drive and open it. Adjust the Pixlr modular elements and tools in and around the image so you have a good working space.