Site Statistics
Lets see.. 356 users have been online together, the search feature has been used 13150 times, we have 6439 listed tutorials, a total of 3613087 tutorials have been served so far and a total of 18974 registered members.
Donate | Privacy policy | RSS | FAQ's | Contact us
Bookmark: 
| Connect with FB: 
| Connect with FB: Please Note: 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.
Pages (1)
Encourage us, share our content:
Comments
Post by DevilsWrath on April 28th, 2009You are welcome :) Glad you found it useful!
Post by chavsdesign on April 27th, 2009Wow 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.
Tutorial Statistics
Votes: 2
Rating: 7
Views: 19670
Author: DevilsWrath
Message this User
View this User's ProfileMain Category:
Adobe Photoshop Tutorials
Sub-Category:
Basics
Rate this Tutorial:
Get the latest tips and tricks delivered to you!Subscribe to SurfnLearn, and get the latest tutorials delivered to you for free!
Follow our tutorial updates on
