From PSD to HTML:how?

F

fabiospe

Newbie
Joined
Jan 12, 2010
Messages
11
Reaction score
8
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
 
Advertise on BHW
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' :)
 
I think there's an option when you go to save you can save it as "images and HTML"
 
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.
 
In adobe: File > Save For Web (or something similar)
 
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...
 
I also need to do the same, btw I am also looking for DW, can anyone give me link to get that free
 
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.
 
Look up w3schools on Google, and learn HTML and CSS. That is everything you need to know! :)
 
I want to set as background pictures. automatically. How do you do?
 
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!
 
Cyber Nuts Picker said:
I second that, and edit your html with notepad++. For the beginners Dreamweaver is not bad. But I use only notepad now.
Click to expand...

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.
 
Check on my signature....you will be found the way to coding your
Photoshop design....

Thanks
Richman
Posted via Mobile Device
 
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..
 
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
 
I design templates in Photoshop, but I would recommend Microsoft Web Expression for splicing. It seems more user friendly.
 
It's not difficult . there are lot of tutorials available here . Search in google using this keyword "psd to xhtml conversion tutorial"
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top