Creating and Using CSS Image Sprites

Learn how to create Image Sprites, using GIMP, and how to exchange Text Menus for Image Sprites. Includes: WordPress.
5.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
45 students enrolled
Instructed by Robert Kohler Design / Web Design
Take This Course
  • Lectures 65
  • Length 4.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2014 English

Course Description

Have you ever developed a site where the Menu got lost in the Side Bar?

Do you want to make your site more attractive?

Well, now you can!

By the time that you have completed this course, you will learn how to make your site come alive.

You will learn how to create image sprites using GIMP.

Apply your newly created sprite to a Webpage.

And as the capstone of this course, you will learn how to add Menu Sprites to a WordPress Site.

What are the requirements?

  • A basic understanding of HTML is required.
  • MAMP or WAMP, GIMP, Open Office, Komodo Editor and WordPress will be needed for this course.

What am I going to get from this course?

  • Learn how to create Image Sprites using GIMP
  • Find out how to Style your Stylesheet to retrieve Image Sprites.
  • Learn how use Image Sprites on your site. Including WordPress
  • Discover how to apply Image Sprites against 3 different Menu types within WordPress.

Who is the target audience?

  • Developers from Beginner to Experienced will benefit from learning about using Image Sprites

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction and Setup

The introduction for this course quickly demonstrates all of the knowledge areas covered within the Creating and Using Image Sprites course.

5 pages

This lab will walk you through setting up your local environment with all of the tools needed to complete this course.


Each of the tools needed for this course are FREE and platform independent. So it doesn't matter if you are a Windows user or Not, you will be able to use these tools to take this course.


Within this lesson you will be guided through the process of installing WordPress and establishing the website that will be needed in the last section of the course....The DEMOSITE.

Section 2: Scaling Images using GIMP

All of the images used in this course are contained in the attached file.

Please download them, now.


Installing the Images from the prior lecture and an overview of how these images will be used are described.


Using GIMP, you will be shown how to scale images from their original size down to 300px, the size referred to as FULL SIZE for this course.

1 page

This lab supports the materials just learned by having you perform a series of image resizing exercises.


3 image sizes will be created for all of the source images downloaded, earlier.

This lecture walks you through the scaling of images down to the second size category, Thumbnail or 150px.

1 page

This lab re-enforces what was just demonstrated in the last lecture, by having you perform a series of exercises to resize images from their original size down to 150px.


The third and final size category, Icon, requires taking the original image and scaling it down to 88px.

This lecture shows you how to rescale the image and it explains how the ICON size will be used.

1 page

This lab supports the material just covered in the last lecture by having you rescale images down to 88px, or ICON size.


An empty copy of the Inventory Control Workbook is contained in the attached download.

How this workbook will be used?, is explained in the next lecture.


This lecture explains how the Inventory Control workbook came about and how it will be used.

Includes; A detailed walk through of what the workbook contains and how each spreadsheet is used?

Section 3: Creating Menu Sprites with GIMP

Learn how to reset GIMP to its default settings, Changing the Grid style, showing the Grid and how to Zoom.

1 page

The exercise(s) contained in this lab, will help you to verify that GIMP is installed and setup correctly.


Before actually starting to create the Image Sprite,the size of the Image Sprite Canvas must be determined first.

This Lecture shows you a procedure for calculating the Canvas size and how to apply it.

1 page

You will perform a series of exercises, to re-enforce the material covered in the previous lecture.

Once completed, you will have the size specifications needed to create an empty Sprite Canvas within GIMP.


You will learn how to create a New Image Sprite canvas using the dimensions that were defined in the Determining the Canvas Size lecture.

1 page

Using the height and width dimensions that were determined in the last Lab, an empty Sprite Canvas will be created.


In this lecture you will learn how to add images without replacing the Sprite Canvas, move images into position and how to calculate where the second column should start.


In this lecture you will learn how to determine the row that each of our 4 images should be placed, by applying a simple formula.


In this lecture you will be adding the remaining images to the Sprite Canvas using the positions calculated in the Determining where to position images on a Sprite Canvas lecture.

2 pages

This lab repeats what was covered in the previous 3 lectures by having you perform a series of exercises.

Exercises which will start to build the Image Sprite by adding the course images onto the canvas.


The image Sprite contains two columns, one shows the default state and the other will alter the appearance of an image to give it a Selected state.

You will learn how to obtain this Selected affect using Opacity.

2 pages

The exercises contained within this Lab will help you to alter the images in the second column by fading each image using Opacity.


Initially, the Sprite canvas was dimensioned for 5 rows of images but the final product only uses 4 rows.

This lecture will show you how to determine the new canvas dimensions and shrink the canvas down to the new size without impacting any of the images stored on this canvas.

1 page

Now it is your turn to readjust the Sprite Canvas size to hold only 4 rows of images instead of 5.

The exercises contained within this lab re-enforce what was demonstrated in the previous lecture.

1 page

This lab reenforces the difference between the use of "save As" and "Export to" when attempting to save a GIMP image in another format.


We need the Image Sprite canvas to be transparent and this lecture demonstrates one quick way to prove that the Image Sprite is transparent.

By creating a Webpage.

1 page

This lab will provide you with the webpage used to prove the Sprite is transparent.

And a series of instructions for proving the Sprite.png file, that you created, is transparent

1 page

The attached file contains the Sprite.Png file created for this course.

If your version does not match what was created in the prior lectures, use this one instead.

Section 4: Simple Site – A Webpage with CSS Image Sprites

In this lecture we will start to create the standalone website (as opposed to a WordPress site) named Simple_Site.

Using Komodo Edit, you will be shown how to create a new webpage from a template and how to create the Sprite.Css file without a template.

Once done, the basic skeleton for this site will be established.


Section by section, the Simple_Site website will be constructed starting with the header section.

This lecture teaches you how to alter the Header section and how to link the SPRITE.CSS file with our new site.


Concentrating on the Body of our webpage, you will be taught how to add text menu and page content into Simple_site.html.


Now you will learn how to make the Simple site Menu come alive by adding in the URLs for each menu choice and how to make each selection open in a new tab.

2 pages

In this lab, you will perform a series of exercises needed to create the Simple Site page and re-enforce the material covered in the earlier lectures.


With the Simple_site webpage complete, this lecture begins focusing on defining the menu tags within the Cascading Style sheet SPRITE.CSS.

Including defining all of the menu elements and the different anchor tags needed to extract the image Sprites.


This lecture shows you how to remove the bullets from the menu, in preparation for using Menu Sprites instead of text.


In this lecture, you will learn how to style the menu division, style each menu choice and how to extract one image from the left (or Unselected) column of the Image Sprite.


After having tested the styling changes in the last lecture, the need to make some aesthetic adjustments appeared.

You will learn how to make styling changes that will add a gap between each of the image sprite images and test the site again.


With the styling added to extract the unselected state Image Sprite complete, you will now be taught how to retrieve the selected state image from the Sprite's right column.

3 pages

In this lab you will be performing a series of exercises to add styling to the Sprite.CSS file and retrieve images from the Image Sprite.


Lab Solutions contain the actual files used in creating the lectures within this section of the course.

This lab is supplied for you to compare your results against what was used in creating this course.

Section 5: Menu Sprites in WordPress
1 page

This lab provides the detailed instructions needed to copy the Sprite.Png file into the images sub folder of the twenty fourteen theme and how to start the WordPress environment.


This lecture will show you

1. How to start and log into WordPress.

2. How to create a Home page by modifying an existing page.


This lecture teaches you how to assign an existing page (the Home page in this case) as a Static Front Page.

1 page

This lab supports the previous lectures by having you perform a series of exercises to create a Home page and assign the same page as a Static Front Page.


This lecture teaches you how to create a menu in the sidebar and how to activate each menu choice by drawing information from the Simple Site.

1 page

In this lab, you will create a menu and connect it to the Sidebar using the same URLs that were previously used for the Simple site..


Whenever you are working with a site created by someone else and there is a need to make styling changes, you may not know the menu ID names needed for implementing these changes.

In this lecture you will learn how to reveal the menu ID/classes being used by the current site while using the FIREBUG add-on for Firefox.

1 page

This lab re-enforces what was learned in the previous lecture by having you perform a series of

exercises to reveal the DEMOSITE menu IDs.

1 page

The Menu styles needed to retrieve images from the Image Sprite can be coded step by step but there is a shortcut available.

The exercises contained in this lab will show you the shortcut.

3 pages

If you have completed the lab A Shortcut to Defining CSS Menu Sprite Styles, then this lab is optional.

This lab defines the Sprite Menu styles from the beginning without copying pre-existing content.


In this lecture you will learn how to replace the sidebar menu with a menu widget and create a more distinct separation between the sprite menu and the rest of the sidebar.

1 page

In this lab you will replace the sidebar menu sprite with a custom menu widget.


In this lecture you will be shown how to create a series of WordPress pages will be created which will replace the links to other sites currently used by the Sprite Menu..

1 page

In this lab a series of exercises will be performed to create pages within WordPress and to change the menu links to open these pages.


This lecture will teach you how to replace the Top Menu with a new menu in order to stop the WordPress Pages from appearing across the top of the DEMOSITE.


In this lecture you will learn how to turn your Sprite Menu on its side and replace the Top Menu.


Learn how to grow the Top Menu background and stop the Menu Sprite Images from hanging off the background.


Sometimes a site will be a mixed selection of Menu links that call internal pages, jump out to another site or maybe the menu could be a mix of Menu Sprites and Buttons.

In this lecture you will learn how to create this mixed menu.

1 page

The exercises contained within this lab will allow you to practice how to flip the menu on its side and apply styling adjustments where needed.

2 pages

This lab contains screen shots of each labs end product for use as a confirmation that the labs were completed correctly.

Also the attached download contains the STYLE,CSS file that was used to complete this section of the course.

Section 6: Conclusion
1 page

The concluding lecture provides a brief course review and suggestions for applying what you have learned.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Robert Kohler, Technical Business Analyst - Trainer

Robert Kohler, PMP, is a Technical Business Analyst and Trainer with over 20 years of experience spanning Programming to technical Project Management. Experiences gained while working for Corporations, Non-Profits, small businesses and volunteering at SeniorNet Long Island.

Technically, Robert has developed client-server applications as well as cloud based solutions dependent on C, Visual Basic, VBA, WordPress, SQL and Php to name a few.

Robert has been providing training to businesses and individuals throughout the entire expanse of his career either as a subset of his main job roles or as the main focus of his most recent experiences.

Some of his biggest training accomplishments include the creation, design and implementation of:

    ·A SKYPE course for SeniorNet, which has been picked up by SeniorNet National and made available to all of SeniorNets chapters.

    ·Introduction to Programming using Access and SQL at the request of the SeniorNet instructors.

    ·Presenting the How to Stay Viable in an Ever Changing Economic Cycle before the IEEE-LI for four years in a row.

Other significant accomplishments include the creation, design and acceptance of the Fundamentals of Database Design course by Hofstra University, the implementation of the SeniorNet Help desk and the recent release of the East End Statuary website.

Always looking to help improve the life of others, Robert has provided innovative solutions relying on his technical, interpersonal skills, creativity and his avid understanding of history from an everyday perspective.

Roberts need to create, design and teach has benefited many companies, organizations and individuals alike and now you can benefit as well.

Ready to start learning?
Take This Course