Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Once you've got your sprites assembled here inside of Photoshop, it's time to take it out on to the web, and we do that by utilizing the Save for Web command. I'm going to the File menu and choose Save for Web. Optimizing sprites is really no different than optimizing any other type of graphic. The only thing you have to consider is whether or not there's transparency present in your design. In this case there is no transparency in my design, but there are large bits of flat color, and so saving this out as a JPEG might prove to be detrimental to the overall quality of the image. Seeing as these are smaller images, it might be well served to save them out as a GIF.
If I look at this and zoom in, it's actually not that bad. I don't lose any of the color quality. There are no artifacts or anything like that, and GIFs really do handle these large blocks of color pretty well. You can also see that the size of this image is really small, 3.5K. That's really good. So I think I am going to stick with the GIF setting here. I'll choose Save, and I'll just put on my desktop as social_sprite, and click Save. Now, had my image had rounded corners or bits of transparency like drop shadows and things like that, I would've had to save it out as a PNG graphic. Or if these were photographs, I might save those out as a JPEG. But in general, we are dealing with small sprites like this, a GIF or a PNG is almost always the way to go.
So hopefully by now you have a better understanding of how to assemble and create image sprites here inside of Photoshop and also how to get them out of Photoshop for use in your own HTML and CSS projects.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.