- Open a wireframe PSD template
- Put graphics into the elements groups
- Adjust elements’ position with the help of 960 grid
Final Product: Ready PSD Template
This PSD template is fully optimized for PSD to WordPress conversion.
Apps Used: Adobe Photoshop
Apps Used: Divine Elemente
Step 1. Set Layout Blocks
Divine Elemente uses slices to determine the layout grid blocks. So, in this step we will check slices of PSD template, that was created in the previous tutorial.
Select the Slice Select Tool
Double-click on each slice, and make sure that each layout grid block has appropriate name: Side, Header, Footer, Sidebar, Post.
Step 2. Set Background Image, Color or Pattern
Create in the each layout grid block a new group called “bg” and place any graphics that will be rendered as the background of the theme.
Put graphics into the “Header” grid block
Repeat this action with other grid blocks.
Step 3. Design Header And Footer Elements
Place all items of Header and Footer grid block where they will appear in the theme.
Note: All Elements at the Header or Footer grid blocks are absolutely positioned.
Set billboard widget elements.
Note: Billboard widget elements should not be overlapped in the PSD template.
Create slides for the Billboard widget slideshow. Place images into the Slides group (each slide as a separate layer).
Step 4. Design Sidebar And Post Elements
Put graphics and styles at appropriate elements’ groups.
Note: All Elements at the Sidebar or Post blocks are relatively positioned.
Note: Any content of elements placed here are not shown on the final WordPress theme. These elements only show what styles are used for the similar elements of the future content (texts, links, headings, etc.)
Step 5. Adjust Elements Using 960 Grid Tool
Open 960 Grid tool.
Create a grid overlay.
Adjust elements to the grid.
Read more about 960 grid tool.
Elements And Best Practices
Read more at “PSD hints, elements and best practices” article.
In the next tutorial of this series you will know how to convert current PSD template into the ready WordPress theme.
Everything is OK? If not – tell us in the comments