If you are a web designer and have designed web site in photoshop, here is step by step "do it your own" explanation how to make fully functionable wordpress site with your design.
There are three major stages: croping images in photoshop, coding html/css, translating html/css to wordpress..
Croping images
When creating psd website design, dont merge the layers before you finish the design.
After you finish, merge down layers that makes one object. If you have three or four layers for logo (such as font, logo image, overlay transparency) merge them into one layer, it will be easier for cropping.
You have to know what you need to crop, and what you dont need.
Images you need to crop are logo, buttons, background, and other specific images that makes future wordpress template.
You dont need to crop images in posts, header images, images in sidebar plugins, because you will be able to import those with posts or plugins later, when the wordpress template is done.
Select layer in photoshop which you want to crop, copy it. Open new window, photoshop will automatically adjust size after the copied content, and than paste the layer. Delete white background and save the file for web and devices. In the new window that opens choose png24, and save the file on your computer.
It should look like this:
Repeat this for all the images you want to crop from Photoshop.
In our example, these are the following images you need to crop:
When you finish with your images, you have done the first part of transforming your web design from photoshop to wordpress. Now you can take a deep breath and perpare for next level, which is coding index html. You will need some tools like: notepad++, firefox filezilla and patience..
You can read in the next post complete tutorial, and learn how to code a html document.
There are three major stages: croping images in photoshop, coding html/css, translating html/css to wordpress..
When creating psd website design, dont merge the layers before you finish the design.
After you finish, merge down layers that makes one object. If you have three or four layers for logo (such as font, logo image, overlay transparency) merge them into one layer, it will be easier for cropping.
 |
| Website design in photoshop |
You have to know what you need to crop, and what you dont need.
Images you need to crop are logo, buttons, background, and other specific images that makes future wordpress template.
You dont need to crop images in posts, header images, images in sidebar plugins, because you will be able to import those with posts or plugins later, when the wordpress template is done.
Select layer in photoshop which you want to crop, copy it. Open new window, photoshop will automatically adjust size after the copied content, and than paste the layer. Delete white background and save the file for web and devices. In the new window that opens choose png24, and save the file on your computer.
It should look like this:
In our example, these are the following images you need to crop:
You can read in the next post complete tutorial, and learn how to code a html document.
