Creating a Simple Photo Site in Photoshop (Part 1)

Creating a Simple Photo Site in Photoshop (Part 1)
  • 21 January 2011
  • Tutorials
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (16)»

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.

Creating One Page Simple Photo Site in Photoshop

Step 2

Inside the file, you will find an action file, 960_GRIDS.atn. Double click it to load it into Photoshop.

Creating One Page Simple Photo Site in 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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 6: Change Canvas Size

We need more room on the canvas. Click Image > Canvas Size. Change the height to 923. Click OK.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 8

Next to the logo, add site’s title. Add following Layer Style.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 9

Add tagline under site’s title and add this Layer Style to give it letterpress effect.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 10

Create new layer and draw two 1 px horizontal line.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 13

Change active menu text color to white.

Creating One Page Simple Photo Site in Photoshop

Step 14: Site Intro

Create new layer group and name it Content. Inside it create another layer group for site intro.

Creating One Page Simple Photo Site in Photoshop

Step 15

Activate type tool then click and drag to create a text box. Set its alignment to center.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 16

Add this layer style on the text to give it letterpress effect.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 18

Use eraser tool to delete part of the lines indicated below.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 20

Return to Photoshop. Hit Ctrl + V, paste it as smart object. By saving it as Smart Object, we can retain its quality.

Creating One Page Simple Photo Site in Photoshop

Step 21

Resize the ornament and place it in the middle of the line.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 22: Photos

Create new group layer and name it Photos.

Creating One Page Simple Photo Site in Photoshop

Step 23

For the first photo, create new layer group and name it Photo-1. Draw a rectangle shape, color: #f7f7f7.

Creating One Page Simple Photo Site in Photoshop

Step 24

Add subtle stroke and pattern by adding these Layer Style. For the pattern, I’m using minimal pattern from WeGraphics.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 25

Paste photo thumbnail with size 185 x 170 px. Place it on the middle of the rectangle.

Creating One Page Simple Photo Site in Photoshop

Step 25

Add title under the photo and add this layer style.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 26

Create a rectangular selection and fill it with black. We are going to use it as a shadow.

Creating One Page Simple Photo Site in Photoshop

Step 27

Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Creating One Page Simple Photo Site in Photoshop

Step 28

Hit Ctrl + T.

Creating One Page Simple Photo Site in Photoshop

Step 29

Right click and choose Warp.

Creating One Page Simple Photo Site in Photoshop

Step 30

Pull bottom center section up. See picture below for reference.

Creating One Page Simple Photo Site in Photoshop

Step 31

Reduce shadow opacity to 10%.

Creating One Page Simple Photo Site in Photoshop

Step 32

Make sure tool move is active. Alt-drag to duplicate Photo-1 group.

Creating One Page Simple Photo Site in Photoshop

Step 33

Replace the photo and update its title.

Creating One Page Simple Photo Site in Photoshop

Step 34

Keep repeating this process until we have six photos for the site’s content.

Creating One Page Simple Photo Site in Photoshop

Step 35: Navigation Button

Create another group layer and name it prev-next. We’ll put buttons for navigation here.

Creating One Page Simple Photo Site in Photoshop

Step 36

Create a rounded rectangle and add following Layer Styles.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 38

Label it Previous Photos.

Creating One Page Simple Photo Site in Photoshop

Step 39

Repeat the same process to create Next Photos button.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 42

Draw a 1 px line under the title.

Creating One Page Simple Photo Site in Photoshop

Step 43

Insert a profile picture with size 80×80 pixel.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 46: Social Network Icons

Create new group layer and name it Connect.

Creating One Page Simple Photo Site in Photoshop

Step 47

Create title and a line underneath it.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 49

Select all layer icons by clicking on the first layer then Shift-click the last layer icon.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 51: Search

Create new layer layer group for search box.

Creating One Page Simple Photo Site in Photoshop

Step 52

As usual, add title and a line underneath it.

Creating One Page Simple Photo Site in Photoshop

Step 53

Draw a rectangle. Make sure the box’s width is matched to the column’s width. Add Layer Style Inner Shadow.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 54: Categories

Create new group layer for categories. Write list of the photo categories.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 56

Repeat this for the other items.

Creating One Page Simple Photo Site in Photoshop

Step 57: Blog list

Repeat previous step to create list of blog posts.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Creating One Page Simple Photo Site in Photoshop

Step 59

Write copyright info in the middle of the footer.

Creating One Page Simple Photo Site in Photoshop

Step 60

Okay, we are almost done with the design. Let’s step back and see the result so far.

Creating One Page Simple Photo Site in Photoshop

Step 61

Below is the top left section in 100% view.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 63

Use following settings.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

Step 66

Let’s return to our design. Make sure layer background which we created earlier in Step 5 is selected.

Creating One Page Simple Photo Site in Photoshop

Step 67

Click Edit > Fill. Select Use: Pattern and pick pattern we have just created earlier.

Creating One Page Simple Photo Site in Photoshop

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.

Creating One Page Simple Photo Site in Photoshop

This is 100% view of the top left section.

Creating One Page Simple Photo Site in Photoshop

Download File Source

Download PSD File (2,86 MB)

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

16 Comments

  1. Hariharakumar

    thanks for the neatly explained tutorial, waiting for next part.

  2. Htwemrro

    If the theory of inflation is true, the universe went through an episode dominated by a different form of dark energy in the first moments of the big bang; but inflation ended, indicating an equation of state much more complicated than those assumed so far for present-day dark energy. , massachusettes state employment law, [url="http://ij2.employmentextentuseful.com/massachusettes-state-employment-law.html"]massachusettes state employment law[/url], http://ij2.employmentextentuseful.com/massachusettes-state-employment-law.html massachusettes state employment law, 6608,

  3. Melany

    Hey there fellow author! I just wanted to write you a note letting you know that I browsed through your blog. I see you have not put up a new post in a time. Perhaps I can provide you the inspiration of a dedicated viewer. :)
    Anyways, I expect you signed up as a article writer through the link in my prior message and are making some spare cash. I want to share another secret with you. I utilize a site that is getting my family near to one thousand dollars a week. That is on top of my writing interest. Here is the website, if you happen to be interested.

    Way To Make $1K A Week

  4. pepliyyoto

    96H3sg tyyweyxbnbwe, [url=http://nubnyaeqdvhp.com/]nubnyaeqdvhp[/url], [link=http://oeoztyewzwyo.com/]oeoztyewzwyo[/link], http://akgvkijzqvvk.com/

  5. Jezyka

    Hello! I am Jezyka.
    I would like to present to you a job that pays $60-$100 an HOUR starting now.
    This does NOT involve Affiliate marketing online, MLMs, Pay-per-click or SEO, or list building!
    Im going to explain all you need to find out about me, how I got where I am, and about our money getting script
    that sucked in over $357,000 last July in merely a couple of minutes.

    Right now you have ZERO idea how close you really are to earning a real fulltime salary on the net.

    Get The Details

  6. Margaria

    Hey you! My name is Margaria.
    I would really like to show you a job that pays $55-$110 an HOUR starting in seconds.
    This will NOT involve Affiliate marketing, MLMs, SEO, or list building!
    I am going to tell you everything you will need to know about myself, how I got where I am, and about our money making script
    that brought in over $356,390 this last Oct in just a few minutes.

    Right now you have ZERO idea how close you really are to making a genuine fulltime salary on the internet.

    Do Not Miss This

  7. Odessa Barakat

    Very interesting entry, I look forward to the next!

  8. laptop i5

    Hello there, just became alert to your blog through Google, and found that it’s really informative. I am gonna watch out for brussels. I will be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!

  9. Inkfreakz - Tattoo design

    nice post

  10. how to lose weight fast

    I think I have a problem here

  11. Quanta Multimedia.Com

    Nice tutorial…your great job!

  12. tabletpcunion

    Good post. waiting for your followup post.

  13. optimum serious mass

    Keep functioning ,terrific job!

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US