1
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 working. 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
2 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!