1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design how to convert a psd file into an html page??

Discussion in 'Web Design' started by mattinshipston, Oct 26, 2005.

  1. mattinshipston

    mattinshipston New Member

    I was wondering.... All of your templates are supplied in both html and
    photoshop. I would normally just edit the individual images that i need
    changing one by one but I feel there must be a quicker way of doing
    this.... You supply complete photoshop files that you open the entire
    page in.... Is there by chance an easy way of going on to that photoshop file and then altering it all and simply exporting it all from photoshop to make the individual image files and html??

    I apologise if I sound ignorant, I've been using photoshop for years and
    its my job but use it fro graphics and photos so have no idea about the
    web side of photoshop.

    Many thanks for any help you can offer.
     
    mattinshipston, Oct 26, 2005
    #1
  2. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    You sure don't sound ignorant, ignorant is the one that doesn't ask any questions.

    There is an option to use Image Ready to make a HTML file for you using the slice tool , cut the Photoshop file in pieces with it and then save for web.

    Now you're wondering why we don't use this option?
    Because it's all automated and uses fixed width, height and positioning meaning if you add too much or to less text/content the website will break up.

    We all hand code the templates which makes them more streamlined and easier to edit using the CSS file.

    What you can do if you need to edit an image is:

    - Open the psd file edit and the part you want to change.
    - Go to the images folder take the image you want to change drag and drop it on the psd file.
    - Crop the psd file to the same size as the image and removed the layer with the old image.
    - Save it with the same name inside the images folder just overwrite it when asked by Photoshop.

    You don't even need to edit the HTML this way.

    And don't forget if you want to edit the font size or color/background color of text just use the CSS file to do so.

    Here is a post with great websites to learn more about CSS.
    When you're just editing the template you don't need to know a lot about CSS just the basic things.
    You can also just post for help in the XHTML/CSS Forum.
     
    Mimoun, Oct 26, 2005
    #2
    DominickLo likes this.
  3. mattinshipston

    mattinshipston New Member

    Many thanks for your advice... I think I learnt from that.... do it the long way, it works better in the end!

    They also say ignorance is bliss! :)

    Take it easy in those shades, you cant be in england, we don't have sunglasses here!, just rain glasses! :-(

    Matt
     
    mattinshipston, Oct 26, 2005
    #3
  4. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Ignorance is bliss was made up by some people that didn't want to learn anything I think. Sorry if this is not true making this ignorance on it's own :)
    To me ignorance is the root of all evil or is it money :confused:

    I'm not some smart nerd or so, it's ok to make mistakes, misspell words which I do a lot as I have dyslexia and my native language isn't English (I think you all know that) you may or may not see me mixing up words and letters which my spelling checker can't correct.
    But when you refuse to learn, ask questions and improve yourself that is the ignorance that is dangerous. Not knowing is ok if you don't want to know it's ignorance.

    That's what I think about it. I can be wrong, but at least I'm not ignorant.
     
    Mimoun, Oct 26, 2005
    #4
    Rex likes this.
  5. hotmailbuddy

    hotmailbuddy New Member

    thanks Mimoun

    relay nice advice you made as like before, i specially read your posts and come across nice solutions of my problems ,
    Thanks to all also for this kind discussion
     
    hotmailbuddy, Mar 25, 2008
    #5
  6. smcintyre

    smcintyre New Member

    Yep - I'm not a big fan of the slicing that ImageReady does either.
    A different way to get really quick and easy CSS compliant html from your .psd files is use psd2cssonline.com . It's super quick, easy and free. The service uses the layers of your psd file to generate .png or .jpg images. It generates the CSS html as well. The whole thing takes seconds - upload the psd, "Save File As..." to save your html, png and/or jpg files. And it's totally free. Awesome.
     
    smcintyre, Apr 17, 2008
    #6
  7. Jaybirddesigns

    Jaybirddesigns New Member

    I'm pretty new to css, but have done some tutorials and such. Basiclly i can find my way around. I don't however, know enough to start a new css site from scratch, but i'm really handy with photoshop, illustrator, and dreamweaver.I have some ideas as far as free templates go. If i were to biuld them in photoshop and use http://www.psd2cssonline.com/ , Would that be suffice enough to submitt a free template?

    Thanks,
     
    Jaybirddesigns, Apr 18, 2008
    #7
  8. smcintyre

    smcintyre New Member

    I don't think http://psd2cssonline.com is going to generate what you could call finished, production ready templates. But I think it's a great way to get a really good start. Most of the tedious work is done for you, and the comments psd2css online leaves in the html code generated will help you go the rest of the way. Best of luck to you Jaybirddesigns :)
     
    smcintyre, Apr 19, 2008
    #8
  9. Jaybirddesigns

    Jaybirddesigns New Member

    i've been messing around with that site and it seems that it embeds the css within the html page but, when i download a free template from this site i see that the css is linked. Which is more preffered? If linking is the more prefered can i export the sheet some how in dreamweaver?
     
    Jaybirddesigns, Apr 19, 2008
    #9
  10. smcintyre

    smcintyre New Member

    I've had some requests for making the css style sheets external. Usually the advantages to external stylesheets are that authors may share a style sheet across many documents, or an author might change the style sheet without having to change the document, or with some scripting you can switch style sheets at runtime like for different skins on the same website. However for psd2cssonline.com, those advantages disappear due to the automated naming of layers. Even if I tried to rely on the layer name to 'match' CSS classes between documents I think it would become troublesome. In the end, psd2cssonline.com users would have one external .css page for every .html page - and at that point it's probably easier to just leave it internal. But I'll keep thinking about it and if I can make external style sheets make sense, I'll do it. Thanks.
    --
    Shaun
     
    smcintyre, Apr 21, 2008
    #10
  11. vijaytapundir

    vijaytapundir New Member

    thxs

    the same I am looking for from last some days....thxs again
     
    vijaytapundir, May 1, 2009
    #11
  12. Henry Dennis

    Henry Dennis New Member

    For PSD to HTML conversion you just need to follow these steps

    1. Open the file in Photoshop.
    2. From the "File" drop down menu select "Save for web".
    3. The image will now open in Image Ready.
    4. Select "save" at the top right of your screen.
    5. Choose to save as "images and HTML".
    6. Give the template a name.
    7. Select location to save to and save file.
    8. You should now have an html file and a folder containing the images used.
    9. Open up your site developer program and open this html file.
    10. Save it as a template

    You should now be able to apply this template to any pages you create.
     
    Last edited by a moderator: Feb 18, 2014
    Henry Dennis, Feb 18, 2014
    #12
    Paul89, tonyadam0706, isupersport and 2 others like this.
  13. jyothireddy

    jyothireddy New Member

    I am looking for the same from last few days ..thank you
     
    jyothireddy, Sep 29, 2014
    #13
  14. Stupidesigner

    Stupidesigner Member

    Just wanted to input some words here.
    Honestly converting PSD template to html5 ( recent Markup language) and css is not easy and not difficult though . It does require skills in CSS and html. But you still can learn, again it will take time.
    The super solution is to use website builder that can do the whole job for you, in my opinion the best is webflow
     
    Stupidesigner, Oct 2, 2014
    #14
    shuvopaul202 likes this.
  15. Andrew paul

    Andrew paul New Member

    With the help of image converter, you can covert your photoshop file to png image.
     
    Andrew paul, Oct 29, 2014
    #15
  16. chrisgayle

    chrisgayle New Member

    PSD to HTML tutorials are all over the web. In general, “PSD to HTML” is a workflow. A web page is designed in a Photoshop Document (PSD) and then converted to code Html, CSS, Java script etc..
     
    chrisgayle, Nov 5, 2014
    #16
  17. Lousie

    Lousie New Member

    Lousie, Dec 17, 2014
    #17
  18. Yusuf Javed

    Yusuf Javed New Member

    Hii
    We are provide PSD Files conversion into Html5. If you want to convert your psd files into html then you visit our site convertpsdfiles

    Link removed as this is not a free service
    Moderator
     
    Yusuf Javed, Mar 16, 2015
    #18
  19. Webiepro

    Webiepro New Member

    If you are looking for production ready templates, I have had excellent luck with getting templates from (deleted) and also (deleted) Both are excellent choices for getting what you need and not having to waste a lot of time doing customization and programming. Happy website building. Cheers! :)

    Moderator: Sorry Webiepro but these links have been removed as they are not FREE templates.
     
    Last edited by a moderator: May 7, 2015
    Webiepro, May 6, 2015
    #19
  20. David McClemans

    David McClemans New Member

    use convertpsdfiles \. online site for crop the psd to html site
     
    David McClemans, Aug 13, 2015
    #20
    shuvopaul202 likes this.