Having a presence on the web is important nowadays and learning how to design well is being even more so than before, with the website standards happily increasing. In this tutorial, I will show you, step by step, how to design a photography blog design.
What we are creating?
This is how the design is going to look when we are done with it.
To help get a good proportional layout on the website, I use a tool to help, the 960 Grid System. Basically this is a set of downloadable files that creates a grid for you, making it easier to place objects.
Go ahead and download the full package and open up the Photoshop template with 16 columns for this project. After, save this file as a new file, in another folder, where you want to store your site design (as to not override the current one).
In the layers panel for the 16 column 960 grid, you will see two groups. One with the 16 column grid and one called Layer 1. I prefer my own order when I do the design so go ahead and remove the Layer 1 group which will position the 16 column grid group, at the top.
Additionally, you can go ahead and hide the visibility of the 16 Col Grid by clicking on the little eye icon at the left side of the layer icon. Because we have the Photoshop grid enabled, we don’t need to see the red overlay all the time.
Grab the Gradient Tool from the menu bar (keyboard shortcut G) and make a gradient from a light blue (#85ddf0) to white. Drag this out to the top part of the design, creating a fade-in of light blue at the top.
Take the Ractangular Marquee Tool and draw a shape that ends at the second grid line from the edge, at both sides. Create a new layer and fill it with a very light grey (#f0f0f0).
Go into the Blending Options for the layer and set a white stroke (#ffffff) at 5px with Inside position.
Following that, set a drop shadow with the settings shown in the screenshot above. Opacity 26%, Distance 0, Spread 0 and Size 5.
Click OK to apply the new layer styles.
To begin with, let’s hide the grid during this step, until we need it for object placement again. Do this using the shortcut Command + H (PC: Control + H). If you are using Photoshop CS5, you may be given an option on the Mac if you want to use this to Hide Photoshop or Hide Guides. If you have selected to Hide Photoshop, you can find the option under View > Extras.
Paste an image of your choice into the canvas and clip it to the box we just made. To clip it, place it just above the box layer and place your mouse right inbetween the two layers while holding down the option key. You will see that your cursor changes to something different and when you click, the layer will clip.
With the Elliptical Marquee Tool, draw a small circle inside of the image. Create a new layer (above the image) and fill this with white, deselect (Command/Control + D) and drop the opacity down to 45%. After that, apply a drop shadow by going into the Blending Options, with the same settings as you can see below.
Select the Custom Shape Tool, grouped under the Rectangle Tool (U) in the toolbar. From the options bar, expand the shape selector and by pressing the little fly out menu icon, open the menu and load the Arrows set. If it asks to to replace or append the set, choose Append.
Select the arrow circled in the screenshot above, called Arrow 6 and with the shape color set to white, drag one out inside the previously created circle so that it fits. When you have, you will notice that it is the wrong way for this button. Therefore, go into Free Transform (Command/Control + T), right-click and select Rotate 180°.
Drop the opacity of the arrow down to about 60-70%.
Finally, select the two layers making up the arrow button, and group them together with the shortcut Command/Control + G. For organizational purposes, name this group “Arrow Left”.
Right-click on the Arrow Left group and select Duplicate Group. In the dialog box that appears, set the “As” to Arrow Right and click OK. This will name this new group “Arrow Right”.
As you can guess, move the arrow to the right of the photo and again go into Free Transform (Command/Control + T), right-click and select Rotate 180°. Now you will have a button that is pointing to the right.
Finally, select all the layers making up this image block and group them (Command/Control + G). Name this group “Featured Header”.
If you want to create this sample text logo that is used in the final version, follow along these two coming steps.
First, turn the grid back on and with the text tool, draw a box and type “photography” in it (without the quotes). I chose to place the start of the text on the fifth gridline from the left.
As for the font, use Helvetica Neue at about 30pt in size with a tracking set to 140 with the weight set to Ultra Light. The color used is a darker version of the background gradient (#4ba1b5).
Again with the type tool create a new text box and type in John Doe (making the logo “John Doe Photography”). Place this above the photography text. You want the width of the word photography and the width of John Doe to end at the same horizontal place, creating an imaginary vertical line where they end. Do get this properly, you might need to very the tracking of the word Photography and size of John Doe.
In this example, this text was with the font Snell Roundhand, Regular at 55pt with the same color as before (#4ba1b5).
Finally, select the two text layers and group them together (Command/Control + G) and name the new group “Logo”.
Next up is the navigation on the site so start off by grabbing the Rounded Rectangle Tool (also grouped under the Rectangle Tool). Set its radius to 10px and with the guides on again, drag out a rounded rectangle as shown in the screenshot above. Set its color to white and drop the opacity to about 55%.
We are keeping the navigation bar very simple and the next step is to simply add some text on top of the rounded rectangle box that we just created in step 11.
Keeping it consistent, I chose Helvetica Neue, Light at 16pt with the color set to #308698, which is another variant of the background.
Finish off by selecting the navigation rectangle and the text and group these together as before (Command/Control + G). Keeping with similar naming conventions, name this group “Navigation”.
With this, we have done the header of the site. It features an image slider, a navigation bar and a logo. For increased organization, take the three groups that make up the hea header and group these into another new group that is named “Header”.
Next on, it is time to move further down and take control of the content area. Now remember, I am making the front page a blog page here, and that is where the focus will be. However, you could easily do a front page with galleries or with text and images that aim to sell products and/or prints.
Create a new layer above the background layer and below the header group. With the Rectangular Maruqee Tool (M), start drawing a selection from the second rightmost guide and four sections in (shown above). Make sure the selection goes all the way to the bottom and starts just above the end of the image box in the header.
Finally, fill this new box with a light grey (#f4f4f4), deselect and move it over to the left, one guide bit (on the left side). If you want it to be slightly wider, extend it one extra guide to the left by going into Free Transform and dragging the left handle, to the left.
Every blog needs its social media icons and this one is no exception. I downloaded a Facebook icon, an RSS feed icon and a Twitter icon from the icon set Addictive Flavour [http://www.iconfinder.com/search/?q=iconset%3Aiconset-addictive-flavour] and dropped them into the Photoshop document.
After placing them, I dropped the opacity to 70% to be able to create a highlight effect in code when you hover over them.
Before moving on, group these three layers together into a new group and name it “Social Media Icons”.
Select the Text Tool again and using Helvetica Neue, Light at 18pt size and in color #3b4142, begin to add some sample content for the design. In this case, I used Friends (all in uppercase) for this one.
Move on by adding more text headings and content to the sidebar and finally group all of the sidebar layers together into a new group that you name “Sidebar”.
Moving on with the content area, we are just going to add a simple post in there to display for now.
Start by turning on the grid again and creating a new layer above the Sidebar group. Then, with the Type Tool (T), begin to type out some dummy text for a heading with one section’s inset. For easy spotting and style, I used Helvetica Neue, Light again at 24pt with the color #226673.
Time to add in some content for the post. With the type tool again and the grid on, start by making a text box that starts at the second gridline from the left and goes through to the end of the section before the sidebar starts. This should give us some breathing room on both sides.
As far as the text settings go, it is Helvetica Neue, Regular at 12pt in the color #505050. What is important to note is that we gave this an increased line height to 18pt, to make the text easier to read.
For the post footer, continuing with Helvetica Neue, Regular at 12pt, this time make the text forced uppercase by clicking on the TT icon in the Character panel (circled above). For the parts that I know will be links, I have changed the color of the text to the link color of the title, #226673.
To add some depth to the post footer, I took the Single Row Marquee tool and on a new layer, filled with a very light gray color (#dedede). I then erased away the parts of the line that I did not want.
For the second line, duplicate the first (Command + J on the Mac or Control + J on the PC) and move it below the text.
This should give us a good sample post. Before moving on, as usual, group all of these layers together and name the group “Post”.
For the footer, make a selection at the far bottom that spans the entire width of the canvas. Fill this area with a darker color variant of the one we are using in the header (#154559).
Take the Type Tool again and start typing, “Copyright © 2010 John Doe Photography. All Rights Reserved”. With the settings from before, the uppercase text transformation should still be applied. If it isn’t, go into the character panel and turn it on as we did in step 18. All the text settings are the same as in step 18, with the exception of color being #9ab5c0.
After these 21 steps, we are at the end, having completed this photography blog design that you can now code and turn into a full website.
Packed in this tutorial is not just this main result but a lot of small tips and techniques that I use when desining websites. Plus, you can build upon this and take different elements from it when creating your own website.