nice )

I remember first reading about CSS sprites in the List Apart article, but it’s so nice to see it in a screencast.

Great screencast, great week for nettuts!

I believe all websites should be sized in ems now, making CSS sprites redundant. They almost always break when you resize your browser text.

nicely done and properly explained. but its not a new technique.

Nice tut, well explained. You should have taken more time on the CSS part, it’s called “How to Use CSS Sprites”.
Great job, nevertheless.

Very cool… would they load faster than “roll overs” buttons? Just wondering….

Awesome when you see something and say……..mmmmmmmmmm. nice tut

@ Chris B: yes they should….or use the relative % unit, but when you’re dealing with a “fixed width” lay-out…CSS spriting is a justified method to use.

Anyhow…keep up the good work Nettuts!

good screencast, i would have like to seen some advanced positioning with repeat-x / repeat-y shown to acheive some nifty bg effects that are often overlooked.

@Chris B – Good point – you got me thinking – you can still use background-position and allow for browser resizing, you just have to be mindful when you make your sprite.. (allow for a larger maximimum ‘viewing-window’) – much like when you make images for CSS sliding doors.

Good ‘cast

As said before, nothing new, but still nice to see it in a screencast.
The Photoshop part would be alot more simple if you used layer styles.

Thank you for this great tutorial

This is pretty common knowledge these days. I was hoping this would be about optimising sprites for large sites and splitting sprites up into chunks or using 1 large sprite etc.

But this is good for people who aren’t familiar with sprites.

Good Job

Why did you create individual pngs then import them?
You’re creating problems in the long term when/ if you need to change/ add to the navbar.
As mentioned, too much time spent on the PSD rather than CSS.

You’ve spent a lot of time remaking the Apple menu. That shoud be in PSDTUTS. But the rest is good!

Good tutorial, but i think it should be on PSDTuts.

another tutorial about same technique thttp://blog.areacriacoes.com.br/2008/5/20/menu-in-xhtml-with-css-sprite-english-version about css …

Some times I prefer use images instead of text (with em or px, doesn’t matter) and CSS sprite fit’s fine on this cases (buttons, icons and other images to).

Still a really good technique with or not resize, but you need to know where use it.

Excellent tutorial, a great addition to the site from Andres.

oh, so slow streaming., have to try from home, hope it s will be a nice one, and Nettuts stranded

Its cool,very interesting… go ahead with the tutorials man

I just came across the superflousbanter site the other day and started creating my owner banner. Thanks for the screencast.

Thanks for the comments everyone.
Yes, definitely not a new tutorial (as mentioned in the video references) but hopefully it will help those who aren’t familiar with this technique. I’ll aim to explain what might be less familiar stuff in future tutorials. Thanks for watching though and thanks Nettuts for the opportunity!
@Chris B – great point.
@Predator7, @Lee, @Marcelo – ha, so true. the psd part did take a big chunk of time.
@Lee – yes, you are correct… the way I set it up, if the user makes any changes, the psd files would need to be edited then combined again which would take some time. I suppose I could have combined the images as editable layers, but I combined the layers so I could easily move one section at a time. Shoot me your ideas so I can improve the way I do things.

Yikes. Please edit the videos before they are posted! How many times did the author apologize for wasting time and suggest fast-forwarding? This wouldn’t be such an issue if he didn’t have to speed through the CSS portion at the end. Pretty inefficient use of photoshop too.

That said, GOOD TOPIC and decently explained. With a bit of polish, this screencast could be tutorial gold. Keep it up!

This technique is not very effective imho. I’m not a code-guru but i think there are better techniques who are way faster to make and to load.

@Alessandro: Do you even know what this video is about? ^^

Good tutorial, but you should’ve had the PSD ready and type the CSS, not the other way around XD The CSS part now feels too rushed.
The rest was good though. Hope to see more.

You raise fair criticisms. Good feedback.
@Matt – actually, if you only knew how many hours I put into this video, there are actually 5 videos stitched together – using quicktime pro to stitch together, and I actually added the audio at the end with garageband. It was well rehearsed – I even wrote out a frickin’ script – but it apparently needs work. Thanks for the comments.

@Andres: I know what you’re saying. I hated to do Video Tutorials in the beginning. But you should try to do it spontaneously without script, that’s way less frustrating and easier for me!

I would never code a navigation this way because it’s tough to edit or add links afterwards.

I liked the topic. Thanks for your work!

Thoroughly done! Thank you for sharing your time and passion with us.

I’d humbly say that if anybody has a problem with certain aspects of this video to please, by all means, create a better one for us to see. Screencasting is a beautiful beast. It takes more energy and thought than any other creative thing you’ll ever try.

Keep doin’ what you do Andres.

Sprites are all good unless if you are doing mobile apps / sites. Then they can actually slow down the site. Otherwise, they are def good. But sometimes you have to use single images when doing odd background positioning.

Where is the rest of the screencast?

Andres says “Now let’s jump back into photoshop.” and the screencast ends…

Really nice tutorial. I tried making one and ran out of time, so I can appreciate how long they take. Good Job!

@Matt: I know what this video is about, but it looked a Photoshop tutorial to me. The CSS part was so fast that seemed marginal, while I think it was the main part.

Nice Tutorial, Too much time on the PS parts, use of shortcuts and other methods would’ve been nicer. In fact 1 PSD would be easier to work on than 3 or 4.
Seeing some advanced CSS Sprites with jquery effects would be great.

NICE POSR！
although I have use CSS sprites many times,but decrease the request may be the most important

Saw the same in written tutorial, also based on apple menu.

Nice Screencast. Chris Coyer coverd this in a good Screencast too:
http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/

I like CSS-Sprites but the really Spritemasters are the guys at MobileMe. One Sprite-Image for all controls on their site (height: 6042px)
http://www.me.com/my/shared_100/en/images/sprites/controls.png

So simple, yet so powerful. I love the way the current state is done.

Good Job….!!!

Very helpful..for me.

I think better way to do this is to separate all the buttons.
One file = one button with all states.
It’s faster to load.

That it’s my way and i do it all the time.

Why are people recommending ems? What makes it better?

@Brian

Text sized in ems can be resized across all browsers.

So only text in ems?

Good Screencast Andres! Personally I use sprites for icons and the link more than for navigation. As mentioned above adding a navigation item becomes a pain.

Really usefull technique, I’ve it used for some sites before.
Buen trabajo Andrés (GJ Andres)

Great tutorial. I think the performance benefit of using sprites depends entirely on how much space you’re wasting in the image and how many images you’re utilizing as sprites. More sections in the sprite image makes it more beneficial since it reduces number of http requests. While not as large as the actual content. For this reason also, I think it’s better off to use this technique for mobile sites (although, tbh, I haven’t really make any mobile sites).

See http://developer.yahoo.com/performance/rules.html#num_http

Nice tutorial. Agreed its a like heavy on the Photoshop side and quick on the CSS, but overall pretty good.

and what if you want your site multilingual, you need to make 20 “matrix” images, one for each language, so i thiks its better to do 1 image with at least 3 states, so you can put text on that button.

@Andres F Great tutorial… 2 things can make your video better!

#1 there is absolutely no reason why u need to make a psd file for each layer/state. Everything should have been in one psd file, plus i just cut a few steps off your workflow.

#2 you should spend more time on both sides of the project. IMO it should have been made into a 2 part lesson. A mashup if you will between you and psdtuts. One on Photoshop and the second on the css.

Keep up the great work and I will stay tuned in for more!

Two comments:

One, doing the PSD and splitting it up later is a perfectly legitimate way to do this, because the time you save in being able to apply a handful of quick adjustments or filters on the existing framework, then slice out multiple states into a stacked sprite, is FAR better than having to precisely measure and reproduce your elements for each stack. You can afford absolutely no error in how these things lay out – when the CSS is applied to bounce the sprite around and create the hover effect, if there’s any imperfections in the layout you’ll create a noticeable jitter. I’ve done it both ways and trust me, the way Andres presents it is easier in the long run.

Two, something I think people might like to see is the next step, where you apply some jQuery magic to make the sprite fade from one state to the next. It’s something I’ve done a lot and it makes for a very nice effect – and when applied on top of this pure-CSS, high-efficiency method, it adds almost no load time. But it’s kind of a mess doing this in jQuery. Not the easiest thing. Might make for a nice follow-up tut.

Good tutorial but spent too much time in Ps IMO, I was expecting more analysis of the CSS techniques, but still enjoyed it.

Hey very nice video! good job !

you could have saved a lot of time if you had escaped the photoshop part !
it’s a css tut !

good to know ! thank you !

Another great screencast. I think this is a nice addition to the already available articles on the subject.

AWESOMEEEE !!!!

Excellent tutorial! Very well done.

But don’t waste your time doing it manually!

Instead, just go use the automatic CSS sprite generator and save yourself loads of time.

It automatically generates a background image and all the CSS required and it’s very configurable.

Just my 2¢

I have used CSS Sprites before, but that was years ago. It’s a good way to slow down website loading times, but only if you absolutely need it. In some ways, it won’t matter, but in other times it will.

Nice work and nice video,Thanx so much!

i’ve seen apple’s nav. you made it look super simple. nice technique! thanks.

Thanks a lot. Nice tutorial. Do it have a negative side ?

Instead of cropping, it might be much easier to trim off all transparent pixels instead.

I can’t get this to work can somebody help me?
Here is a zip of it:
http://www.filefactory.com/file/af7gg3h/n/webnavtest_zip

Text on menu is in norwegian but basically says:
logo=home, blog, gallery, contact, webshop

You don’t sound hispanic

i have seriously tried 10 different tutorials and have not been able to get my sprites to work correctly.

finally, after viewing and dissecting yours, i have them nailed

thanks so much!!!

This technique is good but it is not flexible. I mean if you wanna add one more menu, say “download”, then you need to change almost the whole things. We need to find a better way.

Great post thanks! I am thinking of writing one on sprites for icons also. Joomla do it well

This is really great, making a navigation/menu for my aunt’s real estate business at the moment, saw this and didn’t know a thing about it. In the end, totally decided to go with this process. Great post, enjoyed it a lot and got a few lil tricks from you! Thanks a lot!

@Sokun, yea it would be a hassle to re-add a new menu, but the whole process and flow of this is flawless and amazing. That’s what makes it unique and useful.

Does anyone have an resources on how to do a CSS Menu using sprites, but also have nested dropdown menus?

Great post thanks!

Good Show, this is what I was looking for. thanks

This screencast was needed! Articles on this subject can get so confusing. This helped me out a lot, thank you.

If you have troubles with CSS Sprites you can try to use automated tool for website acceleration – Web Optimizer ( http://code.google.com/p/web-optimizator/ ). It also includes the best CSS Sprites merging techniques (in automatic mode).

Css sprite Generator, The Top 4 CSS sprite generator::
http://ledomoon.blogspot.com/2009/10/css-sprite-generator-top-4-css-sprite.html