Webmaster Forum

Go Back   Webmaster Forum > Web Development > Web Design Lobby

Web Design Lobby Forum for general web design issues not specific to scripting or graphics.

Closed Thread
Thread Tools Display Modes
Share |
Old 06-29-2010, 02:44 AM
infinitystuff infinitystuff is offline
Contributing Member
Join Date: 06-28-10
Posts: 148
iTrader: 0 / 0%
PSD to HTML & CSS Help

Hi dude,

I just wanna know how can I convert my web design in PSD format (CS3) to a very compatible HTML & CSS?



Old 06-30-2010, 06:16 PM
Kream's Avatar
Kream Kream is offline
Artist & Motion Designer
Join Date: 05-31-04
Location: SoCal
Posts: 6,557
iTrader: 10 / 100%
You can output to HTML and CSS through the 'save for web' feature in CS3 (i assume - i use CS4 and ImageReady stopped at CS2 and moved into Fireworks (CS3) )

With your template sliced up, choose

'save for web' >
'save' >
Save as Type: HTML and Images (*html)
Settings: Other (which will open up another window where you can make more selections)


In the Slice Output section, you can choose Generate CSS and other selections.


Hit Okay when you're done to close that Window.

Hit Save when you're done.

It will generate the HTML page with all the CSS embedded within it. If you wan't them separated, you'll have to do that yourself. More work.

Is it very compatible? I guess that depends. It works in all browsers as it is a very rudimentary compilation.
Old 07-01-2010, 05:28 PM
simplyamazing12 simplyamazing12 is offline
Contributing Member
Join Date: 06-14-10
Posts: 897
iTrader: 0 / 0%
I personally recommend slicing it and then coding it in Dreamweaver. It is a very powerful program that cuts your work in half in my opinion. Plus, for my host, they have configurations where I can upload the coded site directly to my site from Dreamweaver!
Old 07-04-2010, 04:50 AM
Siyoko Siyoko is offline
Junior Member
Join Date: 07-03-10
Posts: 11
iTrader: 0 / 0%
Wow this was super helpful for even me haha. xD I'll have to bookmark this topic.
Old 07-06-2010, 01:09 AM
sisironline sisironline is offline
Join Date: 07-05-10
Posts: 40
iTrader: 0 / 0%
Thumbs down template

i am design the html template using photoshop. i have own teem only for design for template.
Old 07-06-2010, 08:44 AM
snakeair snakeair is offline
Super Moderator - Rest in Peace 2018
Join Date: 12-31-07
Location: Medford, NJ
Posts: 54,771
iTrader: 3 / 100%
Originally Posted by sisironline View Post
i am design the html template using photoshop. i have own teem only for design for template.
How does this response help the thread creator out?
Old 07-09-2010, 09:35 PM
Kream's Avatar
Kream Kream is offline
Artist & Motion Designer
Join Date: 05-31-04
Location: SoCal
Posts: 6,557
iTrader: 10 / 100%
This one time... In band camp...
Old 07-27-2010, 01:28 PM
bakxos bakxos is offline
Junior Member
Join Date: 07-26-10
Location: Edinburgh
Posts: 4
iTrader: 0 / 0%
I am not expert in this area to be honest but i know that you can use the way that Jay.M proposed.

There are is also a site where you can export templates for joomla, drupal or wordpress directly from psd files. Just google psd to css.

I have no idea about pricing and whether is actually works though. If you try it please tell us the results.
Old 08-02-2010, 01:45 PM
ViNG ViNG is offline
Junior Member
Join Date: 07-13-10
Posts: 4
iTrader: 0 / 0%
Hi. I think that the best way is a manual coding. You should make from your PSD a pack of optimized pics (gif, jpg or png) and create a designed structure in HTML (using tables or divs).

For example. If you need a simple gradient on background with height of 200px, you should make a pic with width 1px and height 200px. And write in CSS (CSS could be in the body of HTML or in a linked file)
background-image: url("pics/your_gradient.gif");
background-repeat: repeat-y;
background-position: top left;
} etc.

Also you should not use pics in a design where you can make it with help of HTML and CSS (colors, borders, etc.).

So you could get a web-design that will be light and fast to load.

If you don't know HTML tags and CSS you can use Dreamweaver (as simplyamazing12 said).

P.S. I'm using Notepad (or the same Notepad++) for converting PSD into HTML&CSS (manual coding).
Old 08-02-2010, 02:38 PM
turbocharged turbocharged is offline
Junior Member
Join Date: 08-02-10
Location: French riviera & Haut Allier
Posts: 13
iTrader: 0 / 0%
Photoshop can do it, but it's definitely better when I do it myself, because I will optimize the code and choose different compression levels for the different images.

It takes more time though...
Old 08-08-2010, 10:06 PM
csm's Avatar
csm csm is offline
v7n Mentor
Join Date: 12-18-09
Location: Rostock, Germany
Posts: 532
iTrader: 0 / 0%
Hello there.

The best way IMHO is to code html/css by hand.
Compressing the graphics is a must, compressing/minifying css is necessary too.

There is no tool that can do that coding work for you.

I always use photoshop/ notepad++ for this.


Old 08-09-2010, 05:58 PM
roje0913 roje0913 is offline
Contributing Member
Join Date: 03-12-08
Location: Spokane
Posts: 69
iTrader: 0 / 0%
If your not good at coding, it may be worthwhile for you to pay someone to code a few web sites with different dimensions/layouts, for instance, get one web site made with a top navigation, one made with a side navigation. Then you can just slice your images accordingly. It will take some pretty specific designing to have any level of flexibility so make sure your familiar with those types of things like repeating background images etc.
Go Back   Webmaster Forum > Web Development > Web Design Lobby

Closed Thread

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
What is that HTML tag for displaying text as it is in the HTML file? xarzu Coding Forum 3 06-14-2009 03:11 PM
HTML: What if html tidy messes with the page layout ? Linda in NY Coding Forum 63 04-18-2007 08:54 AM
Google Toolbar About.HTML HTML Injection Vulnerability imaginemn Google Forum 5 09-21-2004 11:06 AM
Is there a scipt adding new html to existing html automatic? crazyhorse Coding Forum 6 07-29-2004 03:32 PM

V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory

All times are GMT -7. The time now is 07:43 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC