23 {{ upvoteCount | shortNum }}
23 {{ upvoteCount | shortNum }}

From PSD to HTML/CSS --> How To

by LMC
19 replies
  • WEB DESIGN
    • |
Hey Warriors,

I've always had someone design for me, or I worked around a template or already sliced PSD.

My question is, how do you really go about moving PSD to HTML, any products, tutorials, or information that you recommend?
#&gt #> #html or css #psd
  • Profile picture of the author kswr123
    Hi LMC

    I would honestly suggest outsourcing that kinda stuff, as it is a steep and harsh learning curve. CSS tends to boggle the mind.

    I run a design company: www.theminisitekid.com, and we are happy to do .psd to html and css conversions!

    Mubarak
    Signature
    Minisite Design
    {{ DiscussionBoard.errors[1740205].message }}
  • Profile picture of the author CarloD.
    Here is another service;
    PSD to HTML, PSD to XHTML | PSD2HTML

    Carlo
    Signature

    {{ DiscussionBoard.errors[1740260].message }}
  • Profile picture of the author Steve Wells
    Originally Posted by LMC View Post

    Hey Warriors,

    I've always had someone design for me, or I worked around a template or already sliced PSD.

    My question is, how do you really go about moving PSD to HTML, any products, tutorials, or information that you recommend?
    In Photoshop you can slice and export to html......you'll usually need to add a bg.jpg (background) image, which is just a pixal wide and the length of the website psd image along with some specific css code to make it display properly.....
    Signature
    Need Custom Graphics Work? - Message Me For A Design Quote!
    {{ DiscussionBoard.errors[1741365].message }}
  • Profile picture of the author Daniel Rickfold
    having a sliced template in PS you can export it as html
    however the exported HTML file is created using tables
    which google doesn't like very much...
    Signature

    Be The Change You Want To See In The World

    {{ DiscussionBoard.errors[1754714].message }}
  • Profile picture of the author VisualWebEffects
    my suggestion would first be to read the photoshop help file in slicing and exporting for web. Do a Google search for photoshop slicing tutorials.
    Export for web in ps can do tables (default) and xhtml with css generation.
    Signature
    VisualWebEffects- Web Application Development, PC Software Development and Identity Design services
    {{ DiscussionBoard.errors[1754763].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by VisualWebEffects View Post

      my suggestion would first be to read the photoshop help file in slicing and exporting for web. Do a Google search for photoshop slicing tutorials.
      Export for web in ps can do tables (default) and xhtml with css generation.
      I have PS CS3 and I have found no output for xhtml with css, if you know how to do this with photoshop please show me where its at or how to do it, maybe point me in the right direction.

      I do have fireworks, is it possible to import a psd into firreworks and export out of fireworks with xhtml and css?

      I have dreamweaver also, but I not the savvy with it, I only use it to drop in headers and footer and the like for a basic webpage.....

      All my adobe products are CS3.......
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1756885].message }}
  • Profile picture of the author Orlando Web Design
    Fireworks has an css export function (go to file > export) but building a webpage this way is like dressing up pig up and calling it your hot girlfriend...not good.

    Go to Lynda.com and watch the Dreamweaver tutorials...you can probably get the basics in a few hours. If not, hire someone.
    Signature
    Financial Thing: Peer to Peer Lending Reviews
    Poker Tilt : The Dutch Boyd Story
    {{ DiscussionBoard.errors[1758391].message }}
  • Profile picture of the author Strange
    Hey LMC,

    That is a great question. Before you go spending your money on PSD to HTML services give a go at it yourself, i would never use the Photoshop export to HTML feature.

    Before you start on your own website, familiarize yourself with HTML and CSS by downloading a couple of free templates available on the net, play around and get the feel for it.

    Now, what i personally do which works great when going from PSD to HTML is to find a free html template similar to the design you made, structure, navigation e.t.c and use that as a base.

    If i want to include cool elements in the design such jQuery, i look for tutorials via Google, hundreds of them, simply copy and paste.

    You will soon get the hang of it after some experience.

    You will need some software for the stages of building, highly recommend a Visual CSS Editor and a advanced notepad. Thats all the software i use.

    The hardest part is getting the website to work in all browsers, not mentioning *cough IE6, what a load of crap!

    Some resources:
    Top 10 Tutorials for Converting PSDs to HTML/CSS – DesignM.ag
    psd to html tutorial - Google Search

    Gotta love coding
    {{ DiscussionBoard.errors[1758480].message }}
    • Profile picture of the author dannybaskara
      Originally Posted by Strange View Post

      Hey LMC,

      That is a great question. Before you go spending your money on PSD to HTML services give a go at it yourself, i would never use the Photoshop export to HTML feature.



      Some resources:
      Top 10 Tutorials for Converting PSDs to HTML/CSS – DesignM.ag
      psd to html tutorial - Google Search

      Gotta love coding
      wow thx for your info
      Signature
      Indonesia Daily Deals
      Diskon
      {{ DiscussionBoard.errors[1763364].message }}
  • Profile picture of the author Strange
    Oh one more thing, alot of people are using dreamweaver, i heard the program inserts unnecessary code.

    I use a MAC and recommend these applications:
    BBEdit - Advanced Text Editor
    CSS Edit - Visual CSS Editor (awesome)
    Cyberduck - FTP

    Cheers
    {{ DiscussionBoard.errors[1758506].message }}
  • Profile picture of the author myrnakelisd
    which id the best editor for HTML & CSS Coding ?
    {{ DiscussionBoard.errors[1770344].message }}
  • Profile picture of the author kidino
    first you need to know which part of the design that will tile itself and cover expandable areas (area backgrounds maybe) ... and which doesn't (logos, specific images). then, you start to plan the slicing of the PSD design.

    Convert the smaller parts of the PSD into little images. There's a tool called Slice Tool to help you with that. After making the slice areas, you can just do File > Save for Web...

    When you have the images ready, do the HTML. Not sure whether you'll use tables or CSS. But if you are starting out, do it with tables.

    Use the images in your HTML .. that's it.

    Anyway, I found this blog post with 10 PSD-to-HTML tutorials you can check out.

    Top 10 Tutorials for Converting PSDs to HTML/CSS – DesignM.ag

    You can also check out nettuts.com, they might have some video tutorials.
    Signature

    DIPPEC - PHP Script for Selling Digital Products with Paypal. No more monthly SaaS fees. No more commission fees. Keep it all for yourself (except for Paypal fees).

    Free Pricing Table Builder

    {{ DiscussionBoard.errors[1771101].message }}
  • Profile picture of the author clickbump
    Originally Posted by LMC View Post

    Hey Warriors,

    I've always had someone design for me, or I worked around a template or already sliced PSD.

    My question is, how do you really go about moving PSD to HTML, any products, tutorials, or information that you recommend?
    This is one of my favorite things to do :-) (its strange, I know)

    I like to take the design and mentally convert it to rectangles from top to bottom. those become my DIV elements, each of them get a "class" identifier that describes them (header, content, sidebar, footer, etc)

    Using this approach, a copy of photoshop, and some clever CSS, I can take any design, or existing site and create a super streamlined xhtml template, and css file, that's a fraction of the size of alternate methods of site building...

    Loads insanely fast, search engine friendly and super easy to maintain (no tables to choke a screenreader or mobile device, so it degrades nicely outside of the browser)
    Signature
    {{ DiscussionBoard.errors[1772357].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by clickbump View Post

      This is one of my favorite things to do :-) (its strange, I know)

      I like to take the design and mentally convert it to rectangles from top to bottom. those become my DIV elements, each of them get a "class" identifier that describes them (header, content, sidebar, footer, etc)

      Using this approach, a copy of photoshop, and some clever CSS, I can take any design, or existing site and create a super streamlined xhtml template, and css file, that's a fraction of the size of alternate methods of site building...

      Loads insanely fast, search engine friendly and super easy to maintain (no tables to choke a screenreader or mobile device, so it degrades nicely outside of the browser)
      If you can show me some short cuts on how to do this that would be great, I can do the mental part, but the rest? Got any css template where the names just have to be changed?

      Any help would be greatly appreciated...
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1773987].message }}
  • Profile picture of the author betazon
    For low cost PSD 2 XHTML and wordpress services contact to tech2connect.com and a get a fast solution.
    {{ DiscussionBoard.errors[1773695].message }}
  • Profile picture of the author thebillionairegirl
    XHTML Junction
    they speak to you via phone as well as online
    PSD to HTML/XHTML Conversion Services: Converting PSD to HTML, XHTML & CSS Markup
    $120
    they can convert a scan of a hand drawn mock up
    create PSD
    send PSD to you for approval
    then covert into XHTML/CSS Cross Compatiable
    Turnaround 2-3 days
    SAMPLES: PSD to HTML/XHTML Conversion Services: Converting PSD to HTML, XHTML & CSS Markup
    Signature
    Click here to access a list of 20 TESTED virtual assistants who work for $1 per hour | Find cheap Outsourced Workers in minutes |"the Girl who Gets it Done"
    {{ DiscussionBoard.errors[1774648].message }}
    • Profile picture of the author abs007
      I dont work with PS but instead with coral draw. Im sure many will be thinking that its not as user friendly as PS and sure I agree.It just happened that I had Coral draw installed on my hard rive when i was introduced to website design.

      Ive heard of creating PSD in PS then using them as templates for your website. I use dreamweaver CS3 which I think is great. The way I create my pages is by using divs. So I would firstly set the page properties to whatever I would like - so the bgcolor - text and so on. I would then start adding divs. So my first div would be a container div - then header - then another div i need and finally my footer div.

      If I needed my page body under the header to be divided into 2 parts then I would add 2 divs under the header and call them something easy to remember - so maybe left-body and right-body.

      If you need them showing side by side then you would float the left div to the left. this will bring up the right div on the same line as the left div. Then you style your divs. Add padding - margins - boarders and whatever else you need. Then when you want to insert your image you just add it to one of the divs you created

      It is easy working from a draft knowing how you would like the site to be designed. So if I was using PS and didnt know how to transfer to HTML/CSS then I would use CSS functions to get the same sort of feel.

      I also try my best not to use many images. So for things like rounded boxes I would refer to sites that supply open source coding such as cssplay.com

      If you design websites. I must say that I am an extreme novice, I would suggest learning css as more or less anything you can do in PS can be done through CSS - in regards to alignment and how you want positioning however only the images can not be done.

      I hope this helps.
      Signature
      {{ DiscussionBoard.errors[1775312].message }}
  • Profile picture of the author digital29
    You need to learn HTML/CSS..and then read some example tutorials about psd>html/css where you will just learn some basis which will definitely help you
    {{ DiscussionBoard.errors[1787348].message }}

Trending Topics