PSD to HTML?

G

giaviv

New Member
Hi,

I got a hold of some PSD files that by designer created. They contain buttons and sliders and other web UI elements.
How do I convert parts of the PSD to CSS/web elements? The PSD was properly created in order to be able to do this. I also have an EPS file that contains web UI elements and I don't even know how to open it. What software do I need and what is the process to get HTML elements out of both files?

Thanks!!
 
CaldwellYSR

CaldwellYSR

Member
Dreamweaver, but I wouldn't do it. Learn to actually write html/css code because the method you're wanting to go will give you bad code that will break easily.
 
P

Pheno

New Member
There isn't a magic tool that converts buttons and sliders designed in a PSD into a working, interactive website.
 
X

xstortionist

New Member
You should probably find a freelancer to do this for you. If you don't even know how to open up a .eps file you are opening up a can of worms for yourself.

Note: .eps can be opened with Photoshop or Illustrator
 
Phreaddee

Phreaddee

Super Moderator
Staff member
@jeneliya.
that process is crap. its too much redtape and bureaucracy and pushing papers around.
besides that is of no help to someone who is freelancing and not working with a large company as the OP clearly isnt...

@giaviv.

  • open your PSD in photoshop. choose only what has to be a graphic and isolate that section and save it for web. this will generally be things like a slither of a background, social media /other icons. logos etc.
  • use the psd to get the hex values of the flat colours, and basic dimensions of the elements. sketch a rough wireframe and write down these dimensions, as you'll need them later.
  • do the same with your EPS, it'll open in photoshop.
  • save all these assets in a folder "images"
  • open up dreamweaver/notepad++/aptana/your editor of choice and start a new html page. place the basic wireframe structure within this, use semantic markup as much as possible and when you use divs use appropriately named logical classes/ids. dont be concerned with the look as you are trying to get the wireframe sorted first.
  • dont be tempted to add any imagery or styles at this stage. (its HTML afterall!)
  • start a new css file. best to save it in its own folder too. i.e "css" or "styles" or "stylesheets" or whatever tickles your fancy.
  • add a link in your html which links to it.
  • input basics into your stylesheet such as the colours and the dimensions, save and view it in your browser. if you've got the sections correct to this stage then excellent, move along, otherwise keep trying to get the basic layout (and I mean basic) working first before moving forward.
  • now its time to add the imagery, add the bells and whistles to the different elements (like dropshadows, gradients, etc)
  • go back to your html, drop in some content.
  • continually check your browser view to make sure it matches the initial design, print the original design out to so you've got something physical to always refer to.
  • above all DONT just slice your PSD and let photoshop do the work for you because thats NOT a webpage, simply a whole bunch of images bunched together.
  • as for your buttons, use CSS. (google css3 buttons)
    dont use images. total waste of your time.
if you get stuck come back here and ask for help...
 
n1c0_ds

n1c0_ds

New Member
There is no easy way to achieve this. There is so much more in a web page than just shapes and text. Even if a tool did it for you, you'd end up with a terrible mess that doesn't work in all browsers.

PSDtoHTML.com has received a lot of praise if you need quick results. Any web dev (hello!) should also be able to do this.
 
You must log in or register to reply here.
Top