PSD to HTML: Header Background Bar
One of the first things you’re probably going to want to do when converting your PSD to HTML is input the header. A lot of web designers like to work from the top down, because it helps them visualize certain aspects of the website as its coming together. It can also help you ensure that you have the right spacing between all the various areas. For the most part, the headers themselves are going to be situated on lengthy bars that have a certain solid color. For instance, if the text header of your website is “N/A Productions,” it’s usually going to be placed on a background of some sort.
First, you’re going to want to take that background bar and make sure that it gets onto the website first. This is a relatively easy task because you can simply make it a background in the CSS language, especially if it’s just one solid color. You really only have to take a slice of that background bar in Photoshop, save it in its own file (usually as a PNG for higher quality), and then place it in the markup as a background image. This generally involves inserting the word “background” and then the file location on your computer. A lot of converting PSD to HTML is really just putting each section of your mockup into its own file and then inserting it into the markup.
Most designers will also likely want their header background to extend as far as the web browser will allow. This improves the usability and the look of the website because it will fit in virtually any window. To do this, you would only have to place the word “repeat” and “x” (for the horizontal x-axis). If your header background bar has several gradients of color, then you can cut a larger slice to make it fluid. Overall, though, this is a fairly simple start to creating your ideal website. When converting PSD to WordPress the process is a bit more difficult but remains largely the same in the long run.
