Step 1: Set Up Document
We will use 960 grid in this design. So, our first step is download the file from 960.gs.
Step 2
Inside the file, you will find an action file, 960_GRIDS.atn. Double click it to load it into Photoshop.
Step 3
In Photoshop, open panel Actions. Inside group 960 GRIDS you will find some actions. Select 12 Column Grid then click Play icon to start creating a new canvas.
Step 4: Layer Structure
Before starting the design process let's take a look at the layer structure of the final file. A clean organized layer will help the process of transferring the design. If you are still new with organizing layer, you can learn more about this in Photoshop Etiquette.
Step 5: Background
Create a new layer and name it Background. Fill layer with white. Let's just leave it like this for now. We'll work on this again later.
Step 6: Change Canvas Size
We need more room on the canvas. Click Image - Canvas Size. Change the height to 923. Click OK.
Step 7: Logo
Create new group layer and name it Logo. Grab a logo for the site. I'm using a magnify glass icon from PSDfreemium and rotate it 45 degree. Place the logo on top left corner.
Step 8
Next to the logo, add site's title. Add following Layer Style.
Step 9
Add tagline under site's title and add this Layer Style to give it letterpress effect.
Step 10
Create new layer and draw two 1 px horizontal line.
Step 11: Main Menu
Create some text for the main menu and place it on top left of the site. Set its alignment to align right.
Step 12
We need to diferentiate active menu, in this case HOME. Draw a rounded rectangle, place it under the text. Set its color to #d9d7d7.
Step 13
Change active menu text color to white.
Step 14: Site Intro
Create new layer group and name it Content. Inside it create another layer group for site intro.
Step 15
Activate type tool then click and drag to create a text box. Set its alignment to center.
Step 16
Add this layer style on the text to give it letterpress effect.
Step 17
Activate line layer that we have created on Step 10. Activate tool move, Alt-drag to duplicate the lines. Delete right part of the lines. We are going to use it for sidebar.
Step 18
Use eraser tool to delete part of the lines indicated below.
Step 19
Let's add a classic ornament onto the design. I'm using a nice vector barroque ornaments from WeGraphics. Open this shape on Illustrator. Select it and hit Ctrl + C.
Step 20
Return to Photoshop. Hit Ctrl + V, paste it as smart object. By saving it as Smart Object, we can retain its quality.
Step 21
Resize the ornament and place it in the middle of the line.
Step 22: Photos
Create new group layer and name it Photos.
Step 23
For the first photo, create new layer group and name it Photo-1. Draw a rectangle shape, color: #f7f7f7.
Step 24
Add subtle stroke and pattern by adding these Layer Style. For the pattern, I'm using minimal pattern from WeGraphics.
Step 25
Paste photo thumbnail with size 185 x 170 px. Place it on the middle of the rectangle.
Step 25
Add title under the photo and add this layer style.
Step 26
Create a rectangular selection and fill it with black. We are going to use it as a shadow.
Step 27
Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur (Filter - Blur - Gaussian Blur).
Step 28
Hit Ctrl + T.
Step 29
Right click and choose Warp.
Step 30
Pull bottom center section up. See picture below for reference.
Step 31
Reduce shadow opacity to 10%.
Step 32
Make sure tool move is active. Alt-drag to duplicate Photo-1 group.
Step 33
Replace the photo and update its title.
Step 34
Keep repeating this process until we have six photos for the site's content.
Step 35: Navigation Button
Create another group layer and name it prev-next. We'll put buttons for navigation here.
Step 36
Create a rounded rectangle and add following Layer Styles.
Step 37
Activate polygon tool, on the option bar set sides to 3. Click and drag to create a triangle on top of the button.
Step 38
Label it Previous Photos.
Step 39
Repeat the same process to create Next Photos button.
Step 40: About Me
Let's start working on the sidebar. Create new layer group and name it Sidebar. Our first component is information about the author. Create another group layer and name it About Me.
Step 41
Create a text box and add the title. Make sure the length of the text box is 3 columns and the text is aligned center.
Step 42
Draw a 1 px line under the title.
Step 43
Insert a profile picture with size 80x80 pixel.
Step 44
Next, we will add text warping the picture. We can't just add text box because by default text box in Photoshop doesn't support warping. First, create a rectangular path. Click with pen tool to add points and modify it until we have the path's shape warping the profile picture. See picture below for reference.
Step 45
Activate type tool and click inside the path. You can see that the cursor is now changing, indicating that the text will be warped inside the path. Write a short description inside the path.
Step 46: Social Network Icons
Create new group layer and name it Connect.
Step 47
Create title and a line underneath it.
Step 48
Here, I'm using another icon from WeGraphics. Place icons. No need to worry about its alignment, we'll fix it latter. For now, just make sure the first and last icon are snapped onto the grid.
Step 49
Select all layer icons by clicking on the first layer then Shift-click the last layer icon.
Step 50
Activate tool move. Click align vertical centers and distibute horizontal centers icon. These two icons will automatically fix the alignment and distribution of all icons.
Step 51: Search
Create new layer layer group for search box.
Step 52
As usual, add title and a line underneath it.
Step 53
Draw a rectangle. Make sure the box's width is matched to the column's width. Add Layer Style Inner Shadow.
Step 54: Categories
Create new group layer for categories. Write list of the photo categories.
Step 55
Photoshop does not support bullet list. So, we need to build it manually. Create a circular selection on front of the list and fill it with color #cbcbcb.
Step 56
Repeat this for the other items.
Step 57: Blog list
Repeat previous step to create list of blog posts.
Step 58: Footer
Draw a rectangle on bottom of the site. Make sure that left, right, and lower side of the rectangle are outside the canvas. For the color use #f4f4f4. Add a subtle Layer Style Stroke.
Step 59
Write copyright info in the middle of the footer.
Step 60
Okay, we are almost done with the design. Let's step back and see the result so far.
Step 61
Below is the top left section in 100% view.
Step 62: Background Texture
Currently the background is plain white. So, let's working on the background's texture. Again, grab a nice minimalist pattern from WeGraphics. We'll add a subtle red color onto the texture by adding adjustment layer Hue/Saturation. Click Add Adjustment Layer icon and select Hue/Saturation.
Step 63
Use following settings.
Step 64
Hit Ctrl + E to merge adjustment layer and the pattern. Hit Ctrl + A to select all pixels, click Edit - Define Pattern to save selection as a pattern.
Step 65
In the next dialog box, you can name the pattern. Make sure to save this bacground, we're going to use it in the next tutorial.
Step 66
Let's return to our design. Make sure layer background which we created earlier in Step 5 is selected.
Step 67
Click Edit - Fill. Select Use: Pattern and pick pattern we have just created earlier.
Final Result
Okay, it's a wrap! We're done with the design. Hit Ctrl + H to hide all the guides then hit F twice to see the result in full screen.
Below you can see the final result. Click on the image to see it in full screen. Stay tuned for part two of this tutorial, we will code this design into HTML/CSS.
This is 100% view of the top left section.
