Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Creating and Using CSS Image Sprites to your Wishlist.

Add to Wishlist

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.
46 students enrolled
Created by Robert Kohler
Last updated 7/2014
$10 $20 50% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 3 Articles
  • 26 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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.
View Curriculum
  • A basic understanding of HTML is required.
  • MAMP or WAMP, GIMP, Open Office, Komodo Editor and WordPress will be needed for this course.

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.

Who is the target audience?
  • Developers from Beginner to Experienced will benefit from learning about using Image Sprites
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 65 Lectures Collapse All 65 Lectures 04:22:21
Introduction and Setup
4 Lectures 14:34

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

Preview 02:55

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

Lab Preparing the Environment
5 pages

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.

Gathering the tools needed for 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.

Installing WordPress and creating the DEMOSITE
Scaling Images using GIMP
10 Lectures 32:26

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

Please download them, now.

Download Images Used in this Course

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

Scaling Images, Preparing the environment

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.

Scaling the remaining images down to 300 px

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

Lab Scaling Images
1 page

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.

Creating Thumbnail images; Scaling Images to 150px

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.

Lab Creating Thumbnail Images
1 page

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.

Creating Icon Images: Scaling Images down to 88px

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

Lab Scaling Images to ICON size
1 page

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.

Download Image inventory control

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?

Implementing an Image Version Control Strategy
Creating Menu Sprites with GIMP
18 Lectures 01:03:19

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

GIMP: Preparing the Environment for Creating Sprites

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

Lab Changing GIMP Default Settings
1 page

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.

Creating the Canvas: Determining the Canvas size

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.

Lab Determining the Size of the Canvas
1 page

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

Creating the Image Sprite Canvas

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

Lab Creating the Canvas
1 page

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.

Preview 10:28

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.

Determining where to position Images on a Sprite Canvas

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.

More Images. Finishing adding Images to the Sprite Canvas

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.

Lab Adding Image Layers
2 pages

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.

Applying a Selected State with Opacity

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

Lab Fading Images with Opacity
2 pages

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.

Readjusting the Canvas Size

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.

Lab Readjusting the Canvas Size
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.

Lab Exporting the Sprite to a PNG file
1 page

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.

Preview 13:57

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

Lab Sprite Proof
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.

Lab Solution
1 page
Simple Site – A Webpage with CSS Image Sprites
12 Lectures 01:02:11

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.

Creating Simple_site. Html and Sprite.Css files

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.

Updating the Simple_Site.Html Header

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

Adding the Menu and Body Text

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.

Adding Hyperlinks to the Menu

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.

Lab Defining the Simple Site page
2 pages

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.

CSS Defining each Menu ID skeleton

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

CSS Dropping Menu Bullets

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.

CSS Adding Sprite Styling for Unselected Images

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.

CSS Creating a Gap between Menu Sprite Images

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.

Preview 04:19

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 Defining SPRITE.CSS
3 pages

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.

Lab Solution
Menu Sprites in WordPress
20 Lectures 51:50

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.

Lab Preparing the WordPress DEMOSITE Environment
1 page

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.

Starting the DEMOSITE and Establishing the Home Page

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

Assigning a Static Front 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.

Lab Establishing a Static Home Page
1 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.

Adding a New Menu Sidebar

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..

Lab Creating the Menu
1 page

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.

Preview 06:45

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.

Lab Uncovering 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.

Lab A Shortcut to Defining CSS Menu Sprite Styles
1 page

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.

Lab Defining the CSS Menu Sprite Styles from scratch
3 pages

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.

Adding a custom menu widget to the sidebar

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

Lab Adding a Custom Menu Widget
1 page

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..

Creating WordPress Pages linked to the Sprite Menu

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.

Lab Creating Dummy Pages linked to the Sprite Menu
1 page

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.

Replacing the Top Menu

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

Creating a Top Menu or horizontal menu

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

Adjusting the Background Menu Bar Height

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.

Preview 07:39

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.

Lab Converting a Vertical Menu to Horizontal
1 page

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.

Lab Proof Sheet
2 pages
1 Lecture 00:00

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

Course Completion
1 page
About the Instructor
5.0 Average rating
1 Review
46 Students
1 Course
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.

Report Abuse