Import your PSD file into a WordPress theme
The design of a WordPress-based website is called a theme (sometimes, a template ). Convert to PSD WordPress Theme Step 1: Slicing the PSD File Once your PSD file is ready, first, you need to break it down into chunks. Why? Well, since a single image will be larger in size, it will take more time to load. Also, you will have to associate different behaviors with different parts of the image. So, you need to cut it up. But that's not to say you can cut images randomly. You should do it in a logical way. For example, the header could be one piece, the footer should be separate...then cut out the background, buttons and menus etc. Adobe Photoshop lets you use layers. It has built-in facility to slice PSD and save the resulting parts as separate image files. You can choose to save these images in JPG or PNG format. If you need transparency for these subdivisions to work, then you have to save it as PNG, because JPG doesn't support transparency. When cutting the image, you should be accurate. Even a single pixel error may render two slices unfit for defense. This is how to give a large PSD file into a smaller image. Image credit: MonsterTut Despite converting it into a WordPress theme with slicing, you should understand that now CSS is very powerful and it can create multiple elements with just a few lines of code. For example, you can create solid color backgrounds, gradient backgrounds, different styles, lines, arrows, and just buttons with special CSS symbols. So, you don't need to save these things as pictures. The smaller the number of images, the faster the website will load. The following YouTube video shows you exactly how to give, your PSD file and save it in a different image: Alright, now that you have the various pattern elements for your website design, it's time to move on to the next stage. Step 2: Create HTML and CSS Files Now start the basic coding part of the process of converting PSD to website. You basically need to create a web page and assemble all the sliced images in a way that makes it look exactly like your PSD. First create an HTML file. You can use any name, but by convention, let 's name index.htm . In this file, you need to write HTML or XHTML code to display various image blocks in your PSD. For the base layout you create, you can use the DIV element. DIV elements are very flexible. You can put DIV elements side by side, overlapping, on top of each other. You can align DIV elements to center left and right, and you can also place them very clearly at specific coordinates on the page. Grid layout can be easily done with CSS as well. In these div elements, you can call the saved images and display them either way or as the background of the div. After you have this basic layout of your web page, you need to stylize it to look exactly like your PSD. For styling, you should use Cascading Style Sheets (CSS) rules. With these rules you can grayscale with different fonts, sizes, colors, text shadows, images, borders, etc. For writing CSS style rules, you should create another file called styles.css , and then call this CSS file into your index.htm file. The styles currently in styles.css will be applied to various elements in your HTML file.