1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

From PSD to HTML:how?

Discussion in 'Web Design' started by fabiospe, Jul 11, 2010.

Tags:
  1. fabiospe

    fabiospe Newbie

    Joined:
    Jan 12, 2010
    Messages:
    10
    Likes Received:
    7
    hi guys.
    a question.
    i know how to design a template with photoshop.
    but when i slice the file psd to transform in html, the software create a folder with images and a file html that can open with frontpage or other.
    but when i open this file with frontpage, the template is ok, the only thing is that the box of the content (where i must write the sales letter) is a file jpeg (an image) and not a part that i customize with my sales letter.
    someone can help me?
    bye
     
  2. Hunkydory

    Hunkydory Newbie

    Joined:
    Jun 22, 2010
    Messages:
    38
    Likes Received:
    6
    Occupation:
    Student
    Location:
    In space. Is there life on mars? XD
    Here, check this tutorial series on youtube. It's exactly what you need. Whta I needed too :)

    I was half way posting allthe ;inks when I realised I can't post them. So, in that case, search in Youtube the phrase 'How To Slice and Code Photoshop PSD Template' :)
     
    • Thanks Thanks x 1
  3. cashfap

    cashfap Junior Member

    Joined:
    May 5, 2010
    Messages:
    115
    Likes Received:
    14
    Location:
    Estonia
    I think there's an option when you go to save you can save it as "images and HTML"
     
  4. designsonline

    designsonline Power Member

    Joined:
    Jan 22, 2009
    Messages:
    651
    Likes Received:
    145
    Location:
    UK
    Check the name of the image file that you want to write your text over, and edit the code setting that file to a background image for the <td> it is in.
     
  5. darkfury

    darkfury Regular Member

    Joined:
    Oct 23, 2008
    Messages:
    264
    Likes Received:
    141
    Location:
    Scotland
    In adobe: File > Save For Web (or something similar)
     
  6. Hunkydory

    Hunkydory Newbie

    Joined:
    Jun 22, 2010
    Messages:
    38
    Likes Received:
    6
    Occupation:
    Student
    Location:
    In space. Is there life on mars? XD
    He's already done that, he just wants to swap the jpeg text image for real test You can just delete that image in dreamweaver, set the background to that of your website and insert it that way...
     
  7. fabiospe

    fabiospe Newbie

    Joined:
    Jan 12, 2010
    Messages:
    10
    Likes Received:
    7
    Thanks guys i try
     
  8. seorp

    seorp Registered Member

    Joined:
    Jul 13, 2010
    Messages:
    78
    Likes Received:
    4
    I also need to do the same, btw I am also looking for DW, can anyone give me link to get that free
     
  9. fen1x

    fen1x Newbie

    Joined:
    Jun 30, 2010
    Messages:
    17
    Likes Received:
    0
    First you have to use the slice tool to slice up the image into blocks - every button is a block, every image is a block alone and so on.

    Second: Go to file - Save for web and devices. If you want you can optimize for minimum size of the images making the buttons and such as gifs with 32, or 64 colors but leave images and bigger logos as jpegs.

    Third: If you want PhotoShop can output html for you as well, if you choose the option - otherwise you'll get the images folder only.
     
  10. dimedesign

    dimedesign Newbie

    Joined:
    Jan 7, 2010
    Messages:
    16
    Likes Received:
    1
    Look up w3schools on Google, and learn HTML and CSS. That is everything you need to know! :)
     
  11. Cyber Nuts Picker

    Cyber Nuts Picker Newbie

    Joined:
    May 27, 2010
    Messages:
    38
    Likes Received:
    2
    I second that, and edit your html with notepad++. For the beginners Dreamweaver is not bad. But I use only notepad now.
     
  12. aramex

    aramex Newbie

    Joined:
    Aug 4, 2010
    Messages:
    2
    Likes Received:
    0
    I want to set as background pictures. automatically. How do you do?
     
  13. Cyber_Demon12

    Cyber_Demon12 Junior Member

    Joined:
    Apr 16, 2009
    Messages:
    182
    Likes Received:
    50
    Nah i just skimmed through here and you all kind of know what your talking about...

    To make a PSD into HTML you gotta slice the template... find the slice tool and you gotta "slice" or... make the box around certain parts of the template (like nav and stuff.. you don't want just 1 huge image) and then save it for web.

    But if you know HTML (which i hope to god you do.... ) then you might want to learn CSS especially if the template is for a client... cuz with CSS you can optimize the template to make it load faster by using smaller images and repeating them..

    And if you still don't understand what I'm saying use google.. its how i learned photoshop and html and css... good luck!
     
    • Thanks Thanks x 1
  14. aramex

    aramex Newbie

    Joined:
    Aug 4, 2010
    Messages:
    2
    Likes Received:
    0
    oky thanks.. cyber demon12
     
  15. Moggy

    Moggy Registered Member

    Joined:
    Nov 15, 2009
    Messages:
    99
    Likes Received:
    11
    Location:
    #1 Google
    I used Dreamweaver many years ago and it seemed the dogs b*****s back then (compared to crappy Frontpage & learning in normal notepad). Now I see how rubbish Dreamweaver actually is code-wise.

    Yes its easy, but I use Kompozer for Linux now... it creates much cleaner code and is more logical when you get used to it. There is a Windows version although slightly different.
     
  16. richman

    richman BANNED BANNED

    Joined:
    Jan 8, 2009
    Messages:
    321
    Likes Received:
    308
    Check on my signature....you will be found the way to coding your
    Photoshop design....

    Thanks
    Richman
    Posted via Mobile Device
     
  17. Emkiyu[A]

    Emkiyu[A] Registered Member

    Joined:
    Jun 25, 2009
    Messages:
    71
    Likes Received:
    5
    Occupation:
    AP
    Location:
    -_-?
    I design website using Photoshop but never save it as a "web". I slice the image manually and save it one by one. Then I code and glue it into working web template using Notepad++. Test it using IETester for IE inter-compatibility. It is fun even though needs to scratch my head for a few days because of IE6 bitching with the template..
     
  18. veronica

    veronica Newbie

    Joined:
    Aug 30, 2010
    Messages:
    11
    Likes Received:
    0
    fabiospe did any solution work for you? if not, try this:

    - find that image in your css
    - it shud have an attribute like this: background OR background-image
    - add another attribute to it like this: background-repeat: repeat-y;

    that outta solve your problem
     
  19. laniyar

    laniyar Newbie

    Joined:
    Jul 4, 2010
    Messages:
    18
    Likes Received:
    2
    I design templates in Photoshop, but I would recommend Microsoft Web Expression for splicing. It seems more user friendly.
     
  20. seoguy85

    seoguy85 Newbie

    Joined:
    Sep 5, 2010
    Messages:
    10
    Likes Received:
    0
    It's not difficult . there are lot of tutorials available here . Search in google using this keyword "psd to xhtml conversion tutorial"