In this tutorial you will learn how to create a PSD blog layout and convert it into HTML, ready for Wordpress conversion. Also see css floats explained which you can use for all your future web design project. Things you will learn to do:
- Prepare your PSD images for HTML
- Convert PSD to HTML
- Make a WordPress ready HTML layout.
- CSS image replacement
- Breakdown of floats.
Preview
Header
The width of the web page is going to be 1000px. I’m going to open a new 1600 x 1800 px document and use guides to mark out the 1000px I need.
Drag some guides out from the ruler to 300px and 1300px thus marking out the 1000px we need.
Change the foreground colour to the following. (Again you can use your own colour scheme).
Draw a 10px high rectangle across the whole top of our workspace using the rectangle tool.
Change the foreground colour again to the following colour.
Draw a 120px high rectangle across the whole top of the workspace using the rectangle tool. Place this new layer behind the first shape layer.
Duplicate the new shape and place it’s layer on top of everything. So you will have grey rectangle covering over everything. Go to Filter>Noise>Add Noise.
Apply the following settings…
Change the Blending Mode to Multiply and Opacity to 70%.
Tip:
Group layers accordingly to make designing a more organized and less frustrating experience. E.g, All layers that make up the header go in a group called header.
Subheader
For the sub header draw a rectangle with the rectangle tool. Make your rectangle 1000px x 50px.Go to Blending options>Gradient overlay and apply the following colours and settings.
Tip:
Because we are going to be reusing this gradient again click on New to add the gradient to your palette.
Leave 30px space between the sub header and anything below it.
Tip:
I try to leave at least 30px space beneath things when going vertically when designing a blog page.latest posts
Make the subtitle with the following dimensions and colour.
Draw a guide out to mark out 600px width. Leaving even more space this time, draw a rectangle with the shown colour. Notice I have made it a bit smaller than 600px and placed it in the center, in-between the two guides.
Draw bar for the Meta data and continue button with the rectangle tool. Use the following colour and dimensions.
Draw a smaller rectangle right at the end of the bar with following dimensions and apply the saved gradient to the rectangle.
Sidebar
Leaving 60px space to left of our latest posts, draw a grey rectangle with a stroke blending option as shown for the ad blocks.
For the popular posts sidebar widget, draw a rectangle similar to the subtitle rectangle at the top of the page (same colour). Use the following colour and dimensions to make each list item of the popular posts. Remember to leave at least 30px space between the widget and the ads.
Draw a small square, the same colour as the first rectangle to make the bullet point. To get each list item aligned, group the bullet point and the blue rectangle, duplicate the group, then hold down shift and drag down the new list item.
For the footer draw a 200 px high rectangle across the bottom of the workspace with the following colour.
Draw another rectangle above the blue one within the guides to make it only 1000px wide.
Although it may not look like it we’ve almost got all we need to start converting this to HTML. Let’s add some content quickly to make it look more complete before we start slicing.
Add content
Add the 125px ad blocks. Or whatever size you want, the ones I drew are not actually accurate.
Place the logo on the top right hand corner of the page where they usually go.
I am going to use CSS padding rules entirely to make the navigation hence why I didn’t include any measurements. All will be explained in the CSS part of this tutorial.
Add the social media icons on the sub header. The social icons used is available here.
The site description goes on the left side of the subheader. Also, add the subtitle “latest news” and post title underneath it.
Add the post thumbnail and post excerpt. Both of which are 250 x 220px. Use a text box to keep the excerpt enclosed and give it a background with the rectangle tool. Add the blog icons, some fake post meta data and a ”continue” on the grey bar. Follow this tutorial to make the set of blog icons I have used here.
Now for the final hurdle of the Photoshop part… Slicing!
Select the slice tool and slice a selection of the header and the logo. We are selecting a little part of the header so we can make it repeat its self horizontally using CSS.
Tip:
If you are creating a detailed/textured header it is better if you slice a bigger portion of it so it doesn’t end looking slightly distorted.
Slice the site description.
Select a little part of the sub header. When you want a bar with a linear gradient on your web page, this is the perfect way to do it. Select a portion of the bar and make it repeat it self along the x co-ordinate (Horizontally).
You could use the subheader gradient for the continue button but I just sliced it anyways.
Slice the subtitle for the latest posts.
Slice the popular post subtitle and the bullet point. We are going to use it as a custom bullet point with CSS.
To save the logo remove the background temporarily and save it as a PNG.
Click on save selected slices when the save window appears.
Save the header as a JPEG. I made it pretty high quality because their is a bit of detail I want to protect.
Tip:
When items you want to slice are not so detailed, you can make the JPEG’s lesser quality and a smaller size to increase page loading time.
Save the description as a PNG…
Everything else we have to slice is going to be a JPEG so save them accordingly.
The Sub header
The continue rectangle…
The latest post subtitle…
The popular post subtitle and bullet point…
All the files so far:
Subscribe to our RSS to know when part two of this tutorial is out! Should be out early next week sometimes. If you made it this far through the tutorial thanks!
Tidak ada komentar:
Posting Komentar