Psd To Html (PDF) by amyrot234


More Info

               Converting PSD to HTML: PART I

This topic is going to cover the basics on converting PSD to HTML. It has the basic
understanding that you know how to use a computer, basic Photoshop skills and how to
write standard HTML. This has become popularized very much in recent years because
many designers prefer to design their website in a program such as Photoshop first, and
then transport the elements to another program afterwards.

This is much easier than doing the older method, which is assembling the HTML
manually. This involves coding a head, body, tables, colors, hexadecimal references,
div, href, and image tags, and learning how to open and close them. This can be a very
daunting task and can take a lot of trial and error in order to carry this out.

The first thing that you need to do is do a quick layout using a
program such as Dreamweaver or Hot Dog Pro. Obviously
Dreamweaver is the preferred program because it is the sister
program to Photoshop. The design pretty much needs to be a few
horizontal and vertical blocks, that way the "image" within the PSD
can be broken down into chunks and put into the HTML when it is finished. This is the
first part of PSD to HTML.

The next part involves adding a background. This can be done by adding an image and
then choosing if you want to tile, stretch or simply lay it down. Once it is all assembled,
you have your blocks in place, it is a matter of testing it in the browser to see if it is

You need to test it in the following browsers to see if it works:

      Firefox
      Internet Explorer
      Ipads
      Android Tablets
      Iphones
      Android Phones
      Opera
      Safari
      More

This way when various different users see your finished product, you will not be
surprised with having to support the website in a browser that makes your webpage
come up as "broken."

Next comes making a logo. Your logo needs to be transparent in order for the
background to correctly show up in the file. If it is not, for instance, you might see a
purple background, with a white logo background, and it will not look so good.

After that you want to begin by adding some style, add some images and start to format
your font. This can be done by using the "font" tag as well as inserting several img tags
to support your effect. This is a great way to make your web page look great, as well as
add some validity to your page.

This concludes part 1 of PSD to HTML. Stay tuned for parts II and III next month, and
always be sure to check in.

If you do need more info, you can check out our website, or simply send us an email.
We appreciate you stopping by and checking out our tutorial. Thanks so much for your
interest in PSD to HTML!

To top