In this tutorial, we are going create a minimalist photo site using Photoshop. We will use subtle effect and texture to give this site a classic style. This is the first of two part tutorial. In the second part, we will code it into functional web page.
Step 1: Set Up Document
We will use 960 grid in this design. So, our first step is download the file from 960.gs.
Inside the file, you will find an action file, 960_GRIDS.atn. Double click it to load it into Photoshop.
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.
Next to the logo, add site’s title. Add following Layer Style.
Add tagline under site’s title and add this Layer Style to give it letterpress effect.
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.
We need to diferentiate active menu, in this case HOME. Draw a rounded rectangle, place it under the text. Set its color to #d9d7d7.
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.
Activate type tool then click and drag to create a text box. Set its alignment to center.
Add this layer style on the text to give it letterpress effect.
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.
Use eraser tool to delete part of the lines indicated below.
Return to Photoshop. Hit Ctrl + V, paste it as smart object. By saving it as Smart Object, we can retain its quality.
Resize the ornament and place it in the middle of the line.
Step 22: Photos
Create new group layer and name it Photos.
For the first photo, create new layer group and name it Photo-1. Draw a rectangle shape, color: #f7f7f7.
Paste photo thumbnail with size 185 x 170 px. Place it on the middle of the rectangle.
Add title under the photo and add this layer style.
Create a rectangular selection and fill it with black. We are going to use it as a shadow.
Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur (Filter > Blur > Gaussian Blur).
Hit Ctrl + T.
Right click and choose Warp.
Pull bottom center section up. See picture below for reference.
Reduce shadow opacity to 10%.
Make sure tool move is active. Alt-drag to duplicate Photo-1 group.
Replace the photo and update its title.
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.
Create a rounded rectangle and add following Layer Styles.
Activate polygon tool, on the option bar set sides to 3. Click and drag to create a triangle on top of the button.
Label it Previous Photos.
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.
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.
Draw a 1 px line under the title.
Insert a profile picture with size 80×80 pixel.
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.
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.
Create title and a line underneath it.
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.
Select all layer icons by clicking on the first layer then Shift-click the last layer icon.
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.
As usual, add title and a line underneath it.
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.
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.
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.
Write copyright info in the middle of the footer.
Okay, we are almost done with the design. Let’s step back and see the result so far.
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.
Use following settings.
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.
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.
Let’s return to our design. Make sure layer background which we created earlier in Step 5 is selected.
Click Edit > Fill. Select Use: Pattern and pick pattern we have just created earlier.
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.
Download File Source
Download PSD File (2,86 MB)