Create a minimalist web site design in Photoshop

Hello and welcome to another tutorial here on ArtBox7.com. Today I will create a minimalist web site design in Photoshop , and hopefully it will be useful for your future projects.
Like usual, open Photoshop and create a new document 1020px by 1020px and as a background choose white.
With type tool write your logo – I have used  #bfbfbf and for slogan #8e8e8e

Step 1 – Creating the navigation.

With rectangle tool, create a similar shape

31

And apply the following layer styles:

33

34

Then with type tool I will add the links for navigation

35

And using line tool I will create some arrows
Here is my final result for navigation

36

Step 2 – Creating the slide show

Create 3 similar shapes.

37

To create the shadow, I will duplicate the bigger shape and I will drag it a little bit down:

38

Next I will select Eraser tool and a brush with a dimension of 104px. And I will start erasing a little bit this shape:

39
40
Once you are satisfied with result reduce the opacity to 39%

41

I will proceed the same way for the remaining 2 shapes, and in the same time I will add some images
Here is my result:
Now because this is a slideshow I will create some nice arrows, to browse through images.
I will select ellipse tool and while I create the shape I will hold down Shift key to create a perfect circle

42

Once the circle was created apply the following layer styles:

43

Next with type tool, create a triangle and apply the following layer styles:

44
45
Here is my final result

46

Now with type tool I will add some text

47

I will create again a slideshow like I do in the previous steps and then I will create again a slideshow.
Final result

7
Well the layout is finished now. I hope you have had a great read!

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs

  1. Tsu
    March 3rd, 2010

    What happened with all the tuts on coding?


  2. Marsa Hinde
    May 2nd, 2010

    I love your website tutorials, but my question is how do you create the slideshows within each. In Flash?

Leave a Reply