I know that most pro web desingers cringe at the mention of psd-html conversions but i was using photoshop for many years before even trying web desing so i realy would like to integrate them somehow, however iv never used any of the web features within photoshop. In photshop i can create beautifull web layouts and have a library of them that iv been creating in the hope of building my own psd free template site. The problem is that im still learning web desing so im having the odd problem here and there. Basically after iv created my slices which is basically just the content areas of the page im using the "save for web" feature and then either saving in table or css format. The problem is that when i create my slices photoshop automatically slices the hell out of the rest of the page so when i open the file in an editor im left with far too many images and css rules making the page far to slow to load. Is there any other methods or options that im missing? Is there some way to only get the slices iv created and keep the rest of the page as a single image? If not is there any other ways to make the pages load quicker or maybe different software that integrates better? Thank you.

When you save for web, you can manually select the slices to export. CTRL + CLICK the slices you want. The slice box should change slightly.

But i want all of them! What im trying to do is reduce the ammount of slices that photoshop is automaticaly creating around the slices i did actually create. If i dont export them all i have giant blank spaces inbetween the slices i did select. Is there a way just keep the slices iv created and have the rest of the page as a single image?

I always design in photoshop and convert to html.

 

Dont use the auto slice, slice by hand as this is the only way to do it so your websites are not cluttered with images, most designs can be coded with just background colours and no images.

 

You will find that using the auto slice all your websites will run slower as there is more images to download.

 

Plus if you are selling these people will not be happy if the coding and images are optimised and valid.

I always design in photoshop and convert to html.

 

Dont use the auto slice, slice by hand as this is the only way to do it so your websites are not cluttered with images, most designs can be coded with just background colours and no images.

 

You will find that using the auto slice all your websites will run slower as there is more images to download.

 

Plus if you are selling these people will not be happy if the coding and images are optimised and valid.

I do manually create my own slices around the main content areas as well as navigation area however upon saving for web & devices photoshop automatically creates a whole host of other slices to account for the rest of the space on the shape that sits inbetween the slices i made. Check my page - http://www.andys-motorcycles.com

I hardly use slices in photoshop these days as I find it too limiting. I tend to have guides setup marking out key areas of the page, then select what I need, paste into a new document & save for web from there....then I code the css manually.

 

With more complicated layouts, its not possible to build the page correctly using slices, some of the elements can't be cut out on their own....hence my approach.

 

Its also good practise to use CSS sprites as well....you can't do this by just slicing up the design in photoshop.

 

oh & don't use tables...use CSS, it makes more sense

I hardly use slices in photoshop these days as I find it too limiting. I tend to have guides setup marking out key areas of the page, then select what I need, paste into a new document & save for web from there....then I code the css manually.

 

With more complicated layouts, its not possible to build the page correctly using slices, some of the elements can't be cut out on their own....hence my approach.

 

Its also good practise to use CSS sprites as well....you can't do this by just slicing up the design in photoshop.

 

oh & don't use tables...use CSS, it makes more sense

Right. Well in the case of this website i cant change the look so if possible i need to try and edit my current theme. I do still have the psd templates and am currently trying to sort it out but im a little inexperineced. What would be your next move on this site. I am currently trying a teqnique where i save the entire page as a single .png file and enter it as a single css wrapper background and then code all the main content areas -header, footer, contentm sidebar, etc - with css by hand. Do you think this would make my site perform better or would it still be slow to load the wrapper css backgound image which is actually the entire page.

Once you have created the slices you want and named them go to "Save For Web and Devices". Choose your settings for the images and then hit save. You'll get another dialogue box, in there make sure at the bottom instead of 'All Slices' you choose 'Selected Slices' or if you have deleted any photoshop auto slices, 'all user slices'.

 

Now just start coding from scratch and use the images as needed. I learnt very quickly a few years ago that using photoshop to generate code for you is not a good idea. You've got to just slice out the parts you need as images and hand code the rest.

 

Looking at your site 95% of it can be done with code rather than images. That is always the aim with design, using as few images as possible. On another note it looks like photoshop has generated several different CSS files, you should really merge them all into one single stylesheet.

 

Finally as mentioned above you should look at using pure CSS layouts rather than tables. It's not that easy to make the switch but it's not that big a difference either, it's just all about learning what you can do within the CSS. The W3C Schools site is an excellent starting point.