WordPress School: Image Lessons

I’m often asked by students in the college degree programs of web development and web design how much familiarity and expertise do they need with images. “Do I need to learn PhotoShop and Illustrator?” The truth? You need to know more about images and graphic design than you would ever imagine.

Web design and development are often thought of as focused on the code, painting HTML and CSS to make a site look good, but there is so much more to the design aspect of web design than adding header art and background images. The art of the visual on the web is one of the most critical aspects, and most often misunderstood. Connecting the visual with the code is the key to becoming a successful web designer and developer.

In this tutorial for Lorelle’s WordPress School I’m not going to go down that learned academic path of web design and illustration. Instead, I’m going to focus on how to help you do simple but powerful things with images on your WordPress site.

Most of the following tutorials feature image types most commonly found on websites. We’ve covered some of types of images in tutorials such as adding images to represent you in your profile with Gravatars and on your About web page to represent you and your site’s purpose, and other images to represent your site called Blavatars. In the second post, a tutorial, in your test site’s article series you were to add a minimum of three images to experiment with the preparation of image and size and placement of the images within the content. In the third post of the series, you created a gallery of images. You were also to add a Google Map as a visual on your test site. To customize the look and feel of the site, you were to experiment with header art images and background images.

Today, I want to dive deeper into the artistic aspects of these tutorials and help you learn how to:

• Create your own custom header art
• Place text on images
• Create an article series badge or icon called a call-to-action
• Create screen captures for tutorials and demonstration

In the style of the article series we’ve worked on in this course, I will present each of these in a series of four additional articles today and tomorrow, in addition to the other tutorials this week. This post serves as your introduction to the series and explain what tools and materials you will need for the tutorials.

Tools and Materials For Working with Web Images

There are no right or wrong ways to create web images beyond file naming, file sizes, and file dimensions. You may use any graphic technique you wish, and manipulate the images in any way you wish.

Please remember to respect the copyright of all graphics and images found on the web and elsewhere, just as you would appreciate the respect of your own images.

To continue with this tutorial and the assignment, you will need the following:

• A graphic editor program. For this tutorial, I will be demonstrating the techniques using the free online web app Autodesk Pixlr (Adobe Flash required). You may use your graphics program of choice.
• 2-4 graphic images (original or copyright and royalty free) of various sizes, no less than 300 pixels wide (see this article for a list of sources).
• The published size of the image you are creating. If you are working on the header art image, you will need to know the WordPress Theme’s recommended header image sizes. If you are working on a article series badge or other call-to-action image, while you may create it at any size, keep in mind the end published size requirements as an image 2000×2000 pixels is not necessary for uploading and publishing as a 100×100 pixels icon.
• Time: Depending upon your comfort and familiarity with using a web browser, computer, and graphic program, consider setting aside a minimum of a hour to work on the examples and assignments. This is something you don’t want to rush.

You do not need to create or change the header art and images on your test site if you wish to keep them as they are. These tutorials are designed to create experimental images for your site. It’s up to you to use them or just learn from the process. If you choose to use the images you create in these tutorials, please find the appropriate assignment post on our WordPress School Google+ Community and describe your experience and post a link to the post, or comment in the appropriate post on this site so other participants can see what fun you are up to in this course.

The next tutorial in this series will focus on creating your own custom header art, first creating an original header art image followed by using a photograph with a text overlay. Be ready with a photograph and your creative hat on.

Image Lessons Article Series

Image Lessons is a mini-series within Lorelle’s WordPress School to teach you the very basics of how to create and modify images for your WordPress site.

• WordPress School: Image Lessons – Introduction
• WordPress School: Header Art Images
• WordPress School: Text on Images
• WordPress School: Call-to-Action Graphic Images
• WordPress School: Screen Capture Images

---

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---