PSD To HTML: 5 Surefire Tips To Get You Started

Category: Blog

Written by Estevan Montoya

So you want to make your own website from scratch?

Well, all you need is a copy of Photoshop (learn more about how you can afford Photoshop HERE), an simple HTML editor (find out about the free program we use in an article about programs we use HERE), and the internet (if you are viewing this blog post, then don't worry...). We use the following concepts on a daily basis when it comes to custom website for our clients, so you can trust the steps we take. Also, another thing to consider is that we do take it a step further by making our files in PHP format because we do use a PHP based CMS for some of our clients. Also, PHP makes a simple static like work like a program. We will not be discussing that today, but we will cover that in a future post, so keep your eyes open.

What Are The 5 Step You Take To Create A Website From Scratch?

Inspiration - 1st Step To A Successful Website

This is where it all starts. Whether you are getting started, or you are a seasoned pro, everyone needs a little inspiration, or a LOT if you get stuck in designers block. In fact, becoming a website designer was based on this 1st step, being inspired. I remember wanting to become a Visual Basic program, but ended quiting that because I didn't think I could code like the programmers I met. I still had an interest. Then one day, when browsing the web, I realized that the person that made a great website, which was huge, was made by a guy my age, 16 years old. I was inspired! I found someone else doing it and doing it good. I thought to myself, "If he could do it, why can't I?"

This inspirational feeling has become part of my daily job now. To create websites that people like and enjoy, I must be inspired, otherwise my designs are just blah! To be inspired I do a few things:

Check out template websites
Read other blogs about website design
Go to competitor websites (this gets me fired up!)
Take a break
Get back to work

Wireframe/Layout Design - Got To Get It Down

After you have been inspired by some extremely creative and good looking designs, it's time to break your design to a simple layout. This help you build from ground up, rather then creating something that will be hassle to change when you're further aling in the design process. This is where you get you ideas and layout settled, before you start adding all the graphical elements.

There are many ways people create layout for a website, but the one thing is this, the layout must flow. You can't have conflicting portions of your website. It will make it look sloppy and clients will not want your designs. So you want a layout? Here are some ways that we make wireframe layouts:

Draw your wireframe layout
Sometimes there is nothing like taking out a pen and paper and drawing out your thoughts. This also helps when you are getting inspiration. You can draw what see in terms of layout and write the web address on the paper to go back to later. Though we use software for must of what we do, sometimes this method helps break one out of a mental block since it gets your eyes off the computer.
Create it in Photoshop
This is another method that works great. We always end up in Photoshop since that is where we create the design. One must have a working knowledge of layers and how to create shapes. This method can help in the long runs since you will already have you design laid out in a Photoshop file.
Use outside software
This is a method that I be personally bee using since the software I use is simple, web based, and FREE! I use a free account with Cacoo.com, which enables to draw out layout quick. It has a share feature, so I can send a wireframe to clients on the fly. Then I export the file as a png, open it in Photoshop, and follow that layout for my designs. The reason I personally use this method is that it flows easier than Photoshop, to me...And I don't get tempted to start designing right away. This let me create a layout first, and then design, not the design as you go method.

Photoshop Design - Let's Get Creative

After you have created a wireframe layout that you like, it's time to get in Photoshop. At this point, you should know how the website will look in your mind, so just transfer it to Photoshop. This is where you create a full PSD that is what you want your website to look like in a browser. From buttons to backgrounds, you create the entire website. You choose what colors you want. You choose your header images. When you are done, this file should look like you took a screen shot of it live from a web browser.

Slice & Dice - Time To Butcher Your Design

After you have created your website layout and design in Photoshop, it's time to start the process to converting your design into html. To do so, you need the images from your file. This is where things can get tricky, so don't say that I didn't warn you. One thing to note is that you need each individual images from your website to standalone. So, that button you made, it needs to be an image by itself. The background, it needs to be a little 1px wide image, which will be coded in HTML to repeat across the top. You need to know the colors that you have chosen in hex, so you can insert them in places that use CSS instead of an image (like divs with a single background color).

So basically, each layer will become an image. I know that there is software to do this and save all the files automatically, but if you took out a loan to buy Photoshop, then you might be in the market for for software. So how does one take a layer in Photoshop and make it an individual image? Here is my little trick:

Hold the Ctrl button
Click the Layer Image box so that it selects the layer element only (such as a button, you'll see a marquee around the layer element)
When the marquee is around the element I want, I then click Ctrl + C, to copy the element
I click Ctrl + N to make a new file, which should be the dimensions of the element I just copied
When the new file opens, I press Ctrl + V to paste it in
I copy any layer styles That need to be a part of this element
I say it as a jpg or png, based on the file and if it needs transparency

Code, Code, And More Code - Final Stages

So, you have gone through the task of saving your images from your design. Now it's time to open up that HTML editor and start creating your actual website. This is where knowledge of CSS and HTML come in. Just in case you missed I have two articles on this blog show you where to learn HTML and CSS (Learn HTML & CSS Part One & Learn HTML & CSS Part 2). One thing to consider is how you test your html files. I have had much experience in creating a great looking website, only to find out that my enemy, Internet Explorer, doesn't like my new website. So as you add elements of your website into the HTML file, you should continually open your file in IE.