<

Creating an Image Sprite

Posted on
6,086 Points
86 Views
Last Modified:
Experience Level: Beginner
5:06
In this Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)

Video Steps

1. Open a new Photoshop document with a width of (Icon width)x(Number of icons) and height of 2x(Icon height)

2. Click and drag to create guides that divide the canvas into equal boxes, one for each icon

3. Use the shape tool to create a base for a button in the top left box

4. Select the shape, hold down Shift+Alt, and click and drag to duplicate

5. Add text to the top left shape using the Text tool

6. Select the text, hold down Shift+Alt, and click and drag to duplicate

7. Edit the text for each button

8. Select all layers, hold down Shift+Alt, and click and drag to the second row to create the hover icons

9. Select one of the hover icon layers, right click, and select Blending Options to apply an effect

10. Right click on the layer again and select Copy Layer Style

11. Right click on the other hover icon layers and select Paste Layer Style

12. Save the icon as a transparent image

13. In a text document, note the height, width, and (x,y) coordinates of each icon

0
0 Comments

Featured Post

Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

Suggested Videos

Title Views Activity
Introduction to CSS (Part 1) 80
Introduction to GIMP 37
How to Add an Image in Prezi 157
Flexible Layouts 69
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month