Do NOT copy our entire tutorials, we work hard to make these. You are not allowed to translate our tutorials and add them to your site without our permission.Checked out our Comics yet? This is going to be a very short tutorial explaining what options you need to tweak to save your web layouts in CSS instead of the default setting of tables in photoshop. This is very useful because CSS is becoming the preferred way to work with web pages and lets you add a lot more room to do things that would never be possible with non expandable tables, even though you will still have to edit the CSS and make it work to your needs, it makes the job easier.
First open up your image, slice it, then open the File menu and go to Save for web.. Optimize your images as you see fit, then click on the optimize menu as shown in the image below:
In the optimize menu, you have an option to 'Edit Output Settings' :
Here you have to set the output to 'HTML' and click on the Output XHTML setting. In the Formatting settings, the 'Tags Case' should alreadfy be set to Lowecase(body) and 'Attribute Case' should be set to Lowercase(rowspan).
Now we move on to the slices settings available in the 'Output settings' :
This is what your default settings normally are, we are going to change these:
Here we change the default settings from tables to CSS. You can save these settings as the default settings and you wont have to tweak them every time you want to save your files as html. These settings wont effect how Photoshop saves images, just html files.
Now you can easily create web layouts in CSS instead of tables and then edit the CSS as you see fit.
Leave me questions, if there are any.
Encourage us, share our content:
Post by DevilsWrath
on April 28th, 2009
You are welcome :) Glad you found it useful!
Post by chavsdesign
on April 27th, 2009
Wow this is really awesome, I will have to try it, but thank you so much for this amazing tips.
Please Login to Write a Comment.
Not a Member? It takes just a minute... Register here.