Some Web designers have no knowledge of PHP and CSS coding , but how can We convert PSD WordPress Design to CSS and XHtml and make them wordpress themes? Today I give you some suggestion.
Structuring
This is a very important part in designing a web layout. We need to structure our layout before open Photoshop. The first thing is the purpose of the layout. In our case, this will be a blog layout for WordPress. So, below is what we have in a blog:
1. Header
2. Posting area
3. Sidebar
4. Single page
5. Comment
6. Feedback
7. Searching field
8. Page menu
9. RSS
10. Archives, Links and About Page
Something we need to keep in mind. We can’t put all things into one basket. So, we CANNOT:
1. Display too many things in one single page.
2. Use too many colors and font type.
In this sample, I also try to make is as simple as possible because the purpose of this series of tutorial is to give an example on how to create a wordpress theme. I am going to have a featured post section on the main page. Below is the Final image that we will create.
Photoshop
Step 1
Create a new document with 1024px X 768px as we are going to create a layout which suit for 1024px resolution. Fill it the background layer with #eae8c6. Now, CTRL + R to bring out the ruler. Draw some guide line for the divine proportion we need. Before this, make sure it is snap. Go to View > snap (selected).
Step 2
Grab the rectangle tool and draw a header for it. The height, you have to estimate how much you want. Balance is the main thing you need to concern. Then, apply the blending option as shown below. A black to white gradient with soft light blend mode. Create another rectangle, apply gradient overlay with setting as shown below. Put it 1px below the green bar. It will make it more details. Then, draw a 1 pixel line and put it right above the gap between the two bars you created before. Give it a darker color.
Related Posts
- 5 Plugins to Convert WordPress Blogs to Membership Sites
- Why WordPress Upate Asks for Connection Info
- What Is The Advantages Of The Use Of WordPress
- WordPress Robot Full Elite
- Tips to attract traffic to your WordPress blog
- Why WordPress Asks for Connection Info
- How to SEO Your WordPress Blog
- Building a WordPress Blog People Want to Read
- How to Relocate your WordPress Blog to a New Domain Name
- 5 Extremely Simple Ways To Add Page Curl To Your Website
