Workflow and background images, help?

[zardos]

Hi, I have noticed that a LOT of my time when developing a webpage goes to pairing containger sizes to background images I dont like this.

This is the scenario and i wonder how you guys do it!?
I make a design in PS, I cut of a lots of small images (when I don’t use sprites) , so have a logo.png, menu_bg.png fb_icon.png etc, etc.
Then i start to code, do the markup, and then turn to css to style it, now we have the logo div, but i dont know the height and width of the logo.png, so i need to find it, and open image props and find the dimensions, remember em and add em to the css.. next we have the menu.. same thing all over again..
It is boring! Having all the images open in PS and just lookng at the info, is also a option but i wonder how you do it! Am I missing a awsome toole somewhere?
A script that when you add a background:url, sets default size in the css?

Please tell me more about your workflow! Using sprites and spritecow solves a lot of this issue but not with singel images.

//Thanks!!

[TheDoc]

I create the images when I need them. I don’t create them all before starting development.

Once I’ve saved the image, while still in photoshop, I just do the Cmd-A to select all and see the info for the dimensions.

If you’re on a Mac you can also just find the image locally and hit Cmd-I while the file is selected to see the dimensions.

[zardos]

Oki cool, any one else want to reveal there workflow? :)

[Author]

Posts