The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean - wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School

Here is what we will make, click on the image for the full size:

Resources to complete this tutorial:

• Social Icons
• This is Art2 Icons

Step 1: Setting up the Document

Open up Photoshop and create a new document 1200px x 1650px.

Make sure that you turn on Rulers by pressing Ctrl + R or by going to View–> Rulers.

Creating Guides

I didn’t use the 960 grid system on this tutorial so that we can practice creating our own guides. To show guidelines press Ctrl + ; by default nothing will appear yet because we haven’t created any guidelines yet. Now lets create our first two guides select View > New Guide. This guide will be the holder of the whole layout a total width of 960px.

Making Folder

To make things organized and easy to locate, create these folders.

Step 2: Working with Background

In the Background folder create a new layer and name it Background. Now select Linear Gradient and use the following colors:

• Color: #7fa7c7 Location: 0%
• Color: #a4c7e2 Location: 10%
• Color: #3d5466 Location: 30%
• Color: #57758d Location: 70%
• Color: #2c3e4c Location: 100%

Start dragging from the middle. You may have something that looks like the screenshot below.

Creating a Line Pattern

Next, we will add a pattern to create more texture in our background. Create a new 4 x 4 document. Now select Pencil Tool (B). Follow the screenshot as shown below.

To create a pattern make sure you select the top layer and go to Edit > Define Pattern

Now lets add a pattern to our background. Create a new layer above the Background Layer and name it Pattern. Select the Paint Bucket Tool (G), switch to pattern, and select the pattern we made.

Using Rectangular Marquee Tool(M) select 1/2 of the whole document and fill it with the pattern using the Gradient Tool (G).

Add this Blending Option:

• Color Overlay: #98c2e2

Add a mask to the pattern layer by pressing the mask button beside the fx button.

Now we will hide the portion of the pattern that we don’t want to appear in the background. Set the foreground color to #000000. Select the Brush Tool(B). Before you start brushing make sure that you select the mask in the layers panel then start brushing areas that you want to hide.

Step 3: Working with Header

Inside the header folder create a new layer and name it top. Set the foreground color to #334655. Now create a guide 5px Horizontally.

Using the Rectangular Marquee Tool(M) select the top portion within the guidelines and fill it. Before we proceed create three folders name them as shown in the screenshot below.

Logo

We will make a quick logo for this tutorial. I’m thinking of something like a glowing logo, I think it suits this layout. So select Text Tool(T) and select your favorite font. I prefer light and bold fonts so I select “Kozuka Gothic Pr6N”. I combined light and bold text.

Add this Blending Option:

• Outer Glow: #c1e4ff

Duplicate the text layer and transform the original layer by pressing Ctrl + T Right Click and select Flip Vertically, and move it down below the duplicated text.

Mask the Original layer and make sure the mask is selected. Select Linear Gradient with a fill color of black and white. Start masking beginning from the middle of the text to top. This will achieve a reflection effect.

Social Icons

Open up the social icons that you have downloaded from the resource and place them as shown in the screenshot below.

Navigation

Start by creating a new layer and name it nav-bg. Create a rectangle shape using the Rectangular Marquee Tool(M) or the Rectangle Tool with a height of 50px and a width of 960px, fill it with any color.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #3a4d5a Location: 20%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #546a79 Location: 90%
• Color: #2f414f Location: 100%

• Stroke: #2b3b48

Above the nav-bg layer, create a new layer and name it Shine. Using Pen Tool (P) create a shape and make a selection from it as shown in the screenshot below.

Fill it with a white color. Set the layer mode to Screen and Opacity to 10%.

Now select the Text Tool(T) and add these links.

Duplicate the text layer. Now select the original layer and change the color to #1c2730. Position it 1px above the duplicated layer to make it look like it’s beveled.

Now let’s add some dividers between our links. Create another folder and name it divider. Using Line Tool(U) create 2 lines. First line color will be #485d6c, second line color #2b3b48.

Search

Before we make our search bar. Let’s create a new guideline first. Follow the screenshot as shown below.

In the search folder create a new layer and name it search-bg. Using the Rectangular Marquee Tool(M) create a rectangle with a width of 260px starting from the 20px guideline we just created.

Add this Blending Option:

• Drop Shadow: #ffffff

• Inner Shadow: #000000

• Gradient Overlay: #2f404e, #546a79

• Stroke: #2c3c4a

Now open up the search icon and place it at the right side of the search bg.

Add this Blending Option:

• Drop Shadow: #ffffff

• Inner Shadow: #000000

• Color Overlay: #30414e

I also added an italic Mydrid Pro text color #cccccc.

Back to Navigation folder create a new layer above Divider folder and name it below. Using Rectangular Marquee Tool(M) make a selection 5px height 960px width as shown in the screenshot below.

Add this Blending Option:

• Gradient Overlay: #334553, 3e515d, 293743

• Stroke: #293743

Below nav-bg layer, create a folder and name it Client Login. Inside of it create a new layer and name it button. Using Rectangle Tool(U) create a shape about 130px width and 35px height.

Add the same Blending Option as we did in nav-bg layer. In case you didn’t know how just follow the screenshot below.

I also added text to the button using the Text Tool(T). I know you’ve learned how to make it look beveled, so I wont repeat it again.

Duplicate Client Login folder and rename it Sign Up. Select button layer and change the Blending Options as shown in the screenshot below.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay:
• Color: #ffbf60 Location: 0%
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke: #ba8537

For the text, change the color to #b58742.

Step 4: Working with Slider

Select Slider folder and create new folder and name it display. Inside display create a new layer and name it slide-holder, now using Rectangular Marquee Tool(M), create a box with a size of 660 x 300 fill it with #2f404e.

Now grab some dummy pictures the same size or bigger than slide-holder. Place it above slide-holder and link them together by pressing Alt + Click on the line in between.

Create a new layer and name it Caption, using the Rectangular Marquee Tool(M) create a rectangle with a height of 75px and fill it with any color. Set the layer Opacity to 80%.

Add this Blending Option:

• Gradient Overlay:
• Color: #26343f Location: 0%
• Color: #5c6e7a Location: 30%
• Color: #5c6e7a Location: 50%

Add a caption using Text Tool(T)

Hover and Normal

Inside Slider folder create new folders named Hover, Normal. In each folder create a layer name it bg. Using the Rectangular Marquee Tool(M) create a shape 300 x 100 and fill it with any color.

Hover

For the Hover folder bg layer.

Add this Blending Option:

• Inner Glow:
• Color: #ffffff

• Gradient Overlay:
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke:
• Color: #ffffff

Now we will add a shine. Using Pen Tool(P) create a shape as shown in the screenshot below and make a selection from it.

Select Linear Gradient, Foreground to Transparent set the foreground to white. Fill the selection with gradient starting from top to bottom and set the layer Mode: Screen, Opacity: 80%.

Open up This is Art2 icon set we have downloaded. Re-size it to fit, also using the Text Tool(T) add text as shown in the screenshot below.

Create new layer above shine and name it light. Using Elliptical Marquee Tool(M) create a shape as shown in the screenshot below and fill it with #fff070.

Go to Blur > Gaussian Blur to 5. Set the layer Opacity: 60%.

Normal

Duplicate all the layers in Hover folder and place it to Normal folder. All we need to change is the Icon, Gradient Overlay, Stroke, Text and remove the Light layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #4a5f6d Location: 90%
• Color: #2f414f Location: 100%

• Stroke:
• Color: #25333e

For the text change the color to #afdfff and #cccccc.

Shadow and Glow

Below all those folders inside the Slider folder, create a new folder and name it Shadow and also create new layer and name it Shadow-left. Create new guideline as shown in the screenshot below.

Select the Rectangular Marquee Tool(M) create a selection from the new guide. Now using Linear Gradient Foreground to Transparent. Set the foreground color to #000000 and fill the selection with a gradient. After filling it erase the portion that is circled as shown in the screenshot below.

Repeat this step for Left and Bottom. You may have something that looks exactly as shown in the screenshot below.

Create new layer and name it Glow. Set the foreground to #bae0fe. Using the Elliptical Marquee Tool(M) create a selection as shown in the screenshot below and fill it with foreground color. Now add some Gaussian blur radius to 5.0 px.

Step 5: Working with Body

Our Body includes Featured Project, About, Services so go ahead and create those folders separately. Lets first work on Featured Project.

Featured Project

Inside the Featured Project folder create new layer and name it holder. Using the Pen Tool(P) & Rectangle Tool(U) create a shape in separate layers as shown below. Name the Rectangle Front and the other to back.

For the Front layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #3a4d5a Location: 20%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #546a79 Location: 90%
• Color: #2f414f Location: 100%

• Stroke:
• Color: #1d2a33

For the Back layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #1d2a33 Location: 0%
• Color: #151e25 Location: 100%

You will hopefully achieve a 3D like effect that looks exactly like the screenshot below.

Using the Text Tool(T) I added Featured Project Text with a bevel effect. Just remember to create the bevel effect. If the background is dark and your font is light, the shadow should be dark, and if it is dark then shadow should be lighter. Take a look at the screenshot below and you will know what I mean.

Now add some sample pictures for our gallery, it should be 150 x 150. Also, I added some shadow below.

Create new folder and name it Circles. Now using the Elliptical Marquee Tool(M) create small circles as shown in the screenshot below.

For the first circle.

Add this Blending Option:

• Outer Glow:
• Color: #ffffff

• Inner Glow:
• Color: #ffffff

• Gradient Overlay:
• Color: #ffbf60 Location: 0%
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke:
• Color: #ba8537

For the remaining two circles

Add this Blending Option:

• Drop Shadow:
• Color: #ffffff

• Inner Shadow:
• Color: #000000

You should have something that is exactly like in the screenshot below.

About

For the About folder using the Text Tool(T) add some dummy text. As you can see in the screenshot below I used the same font settings as we did in Featured Project. That’s it for our About folder.

Testimonials

In our testimonial folder Using the Rectangular Marquee Tool(M) create a 290px x 220px box and fill it with #31a5db. Base some other info in the screenshot provided below. As you may have noticed, I added a shadow with an Opacity: 60%. First I used a Pen Tool(P) to create a shape and added a Gaussian blur on it to make it look like a shadow.

Services

In this step I simply copy the text and icons from our slider we did earlier. For the icons I re-sized them a bit. I also added a 3px #192229 border on each service and separated each with two lines. For the first line the color is #1a242b, second line is #455865.

Using the Rectangular Marquee Tool(M) make a selection as shown in the screenshot below. Now set the Foreground to #ffffff and select Radial Gradient Foreground to Transparent. Start dragging from right to left and erase some portion that not included.

Step 6: Working with Sidebar

I don’t need to explain this more, I know you’re already familiar with doing this in the previous steps. Just base it on the screenshot below and I’m sure you can do it on your own.

Step 7: Working with Footer

Inside the Footer folder create new layer and name it bg. Using the Rectangular Marquee Tool(M) make a selection as shown in the screen show below and fill it with #151d23.

Add this Blending Option:

• Inner Glow:
• Color: #ffffff

• Stroke:
• Color: #0f1418

Finally using the Text Tool(T) fill the footer with text. I duplicate the logo with no style and color it with #2c3e4c. I also copy social icons and place it below the logo. See the screenshot below for a clearer understanding.

We’re done I hope you enjoyed this tutorial and find it useful. If you have any questions or suggestions for the next tutorial just mention it in a comment. I’m here to help and teach you what I know about design. Thank you!

Final Design Preview:

Editor’s note: DiscountHotels exists in real life and is one of the top services in finding the best deals for flights and hotels. We respect their trademark in every way.

Resources:

• FamFamFam Silk Icons

Final Result:

Step 1

To start our template create a new document with the sizes indicated in the image below.

Step 2

Fill the whole document with a simple gray color for beginning.

Step 3

Fill 80% of that simple gray color with a big rectangle and fill with white.

Step 4

Add this drop shadow effect for the white rectangle we have created in the previous step.

Step 5

Now we’re adding some contact information in the right side of our header. Get the icons from the resources list located at the beginning of the tutorial.

Step 6

Type in “Discount Hotels” with Nevis Font – this will be the text of our logotype, then add these drop shadow details.

Step 7

Now add a gradient overlay effect with the colors indicated in the screenshot.

Step 8

Now we are creating a blue bar where all our navigation links will be placed.

Step 9

Add the following Gradient Overlay effect for the bar we’ve recently created.

Step 10

With the preset Arial font, we are adding nav links which we will add some drop shadow to. Then we must create a 1 px black line, which will work as dividers for the nav links.

Step 11

Add a darker blue shape which fits the home section. It will be a part of our hover effect for nav links.

Step 12

Add gradient overlay style for that blue shape we created in the previous step with the colors stated in the image.

Step 13

As a last element for the hover effect, add some drop shadow style with the details as shown in the image.

Step 14

Get a beautiful landscape image (free or stock one), and place it under our nav links. It should be bright, colorful and high-quality.

Step 15

Create a white, rounded rectangle, where we’ll place some more information and input forms. For beginning add some dummy text “Book Your Hotel”

Step 16

Create a “long” grey rectangle and give it a 1px stroke as stated above. With a darker grey color add some text in that box.

Step 17

Now create a simple grey-colored circle, and add the following gradient overlay details to it. Then add a dark 1px stroke to it.

Step 18

This is our result so far, be sure you followed all steps listed.

Step 19

Now it’s time to create a simple input form for our shape. To do this, just make a white rectangle in the specific zone, and add a 1px grey stroke, and you will achieve such result.

Step 20

Now add 5 more as seen below. For those forms where a drop-down is present, use the Custom Shape (U) and add a simple arrow as seen below.

Step 21

Now it’s time to create another shape, with the following gradient overlay details. It may be rectangle or square.

Step 22

Add some important text in that box, with a simple white and the following style details.

Step 23

Now it’s time to place some text on that stock image we’ve put under the nav links. Use whatever font you’d like, and add the style details indicated on the image.

Step 24

Now as we’ve finished with that image, it’s time to finish with that white box, which keeps those forms and shapes in it. Add a rounded rectangle with this drop shadow effect.

Step 25

Add some Gradient Overlay details with the following colors.

Step 26

Add text for our big 3D button, and then style it with the drop shadow effect.

Step 27

Now we are creating another small gray 3D shape with the following details as stated on the image.

Step 28

Place some gradient overlay styling for that box, by following the colors shown on the image.

Step 29

After we finish the rectangle, it’s time to add some text which will ask your visitors to subscribe to your newsletter. Also, create a simple input box which is identical to the one from step 19.

Step 30

Now we place some simple text and create another drop-down form like in step 20.

Step 31

Under the “hotel deals” text, you should add another big, blue rectangle with hex code #3f8ac1 which is also shown on the image. The color is not so important because it will be changed with a color overlay effect in the next step.

Step 32

Now we must change the color of our rectangle by adding a color overlay effect, you have to add also a 1 pixel simple grey stroke to the rectangle.

Step 33

In the grey rectangle we have recently created, we must add some content. Add a simple square image which will show the location you are featuring. Also a title and some featuring text should be added.

Step 34

To increase the beauty and brightness of that rectangle, we must add a button and a price which will show the price of the “special deal” the website offers. The effect of the text and the button creation techniques are the same as in past steps.

Step 35

Copy that rectangle with special deals, and paste it many times because you won’t have only one deal, but about 6.

Step 36

We are almost done with our content section, and now moving to the sidebar. Take another stock image and add some white text and the following styling.

Step 37

Now we create a new shape under that stock image. The shape is identical to the one we have created in step 2-3 (our background).

Step 38

In the white shape we have created in the previous step, you add a simple rectangle with the following “Gradient Overlay” styling effect.

Step 39

For the same blue rectangle, add a drop shadow effect with the details stated in the image below.

Step 40

With the Arial font, start adding city names. For the font, add the styling shown on the image below.

Step 41

Now add a shape (of any color) which covers one of the locations you have written, then apply the Gradient Overlay styling.

Step 42

Now it’s time to add some simple text, which will define the special deals you are promoting and show in the sidebar of your web layout.

Step 43

Add a facebook fan page screenshot under the last shape we have created in the last steps, then make a box like you did in step #37.

Step 44

Now for the latest rectangle shape, create another also rectangle shape which will be located inside of it. Then set its drop shadow effect by following the image.

Step 45

For the same rectangle shape, add the following gradient overlay styling, with the colors shown in the image.

Step 46

Add a prominent and relevant title, then place some dummy/random text in the shape created.

Step 47

Add one more stock image with text under the section of all “Special Deals”. It will be first element for our footer section

Step 48

This is the last element for our footer. Add all kinds of text, links, also copyright information and you may try adding a big blue 3-d like buttonlike we made earlier in this tutorial.

Preview of Final Result

Resources

• PT Sans Bold – FontSquirrel
• Free App Icons for Developers – WebAppers

Step 1

Open Photoshop and create a new document that is 1200 x 1200 pixels, 72 dpi, and RGB Color. Fill the layer with white. (Ctrl+Backspace or Delete)

Step 2

Now create a rectangle for the header and fill it with a white-grey color, then use the colors on the image for the “Gradient Overlay”. Our search and logo will eventually be part of the header.

Step 3

Create a new rectangle above the previous one, with attributes as shown below. The following drop shadow effect creates a look of a 1 pixel stroke which does increase the look of that simple bar. Note: this step creates a horizontal line.

Step 4

Now add the “Gradient Overlay” layer style with the hex codes indicated.

Step 5

Add a white 1 pixel stroke. The following stroke of 1 pixel will divide the grey shadow effect. It’ll eventually work as a divider.

Step 6

Make one more rectangle in the middle-right zone, and fill it with white and add a 1 px stroke as indicated – it will be our search box.

Step 7

One more rectangle should be created and filled with blue. Set the inner shadow as indicated below, this will be our search button. This blue works great in combination with grey, white and light-grey. Blue will be the major contrasting color we use as we work through this template.

Step 8

Add the Gradient Overlay details to the button with the details from image.

Step 9

Add a 1 px stroke to the button with the color indicated. Take a look at the first and the final result of the button so you can see the difference all these details made.

Step 10

Now add this drop shadow effect for the text placed in the search box, using PT Sans Bold. This will be the final step in creating your search button. You may want to try other fonts, but the PT Sans Bold is really good for this small button.

Step 11

Make another fill under the header section, this will be the navigation area. Here we will place the navigation links of our template.

Step 12

Write your navigation links using a dark-grey color, then add a white “drop shadow” effect. The effect used for the navigation links is the same used for the search button.

Step 13

With 1px vertical line, make divisions between each links. The lines should be black and will really increase the beauty of the navigation area.

Step 14

Over the home section, make a fill with the blue and then add a Gradient Overlay style as indicated.

Step 15

Copy the Home link, this time color it white and add a drop shadow effect.

Step 16

Create a big, grey zone under the navigation, it should be about 30% of the layout. This will be the background for the featured area.

Step 17

Now create a big, white rectangle and add some shadow with the details shown. A big stock image, a big headline and some text with another great button will be added.

Step 18

Add a any dummy image you want to that featured area. Be sure it covers more than 80% of the area. The one I chose is from a stock website.

Step 19

Add some text to it, use the PT SANS Bold font and make the font big.

Step 20

The remaining area should be filled with grey, in it we’ll place some text. This is really a secondary area which describes the image, the services, the company itself, or whatever you’d like.

Step 21

Place some blue-colored text which will be the title of the information below. Use the details in the image for Drop Shadow style.

Step 22

Add some dummy text. This could be some important information or whatever you’d like.

Step 23

Create another grey area under the featured zone, where we will add some text and icons later. Add the details as stated on the image. Mostly, the icons will promote the services offered by the company behind the website.

Step 24

Continue by adding a Gradient Overlay style for the last rectangle we have created in the anterior steps.

Step 25

Now we are adding titles and icons, as well as some divisions. The icons can be found in the resource list at the beginning of the tutorial. Be sure to choose your icons and text thoughtfully.

Step 26

At the border of both zones, create a small circle and fill it with dark brown color. Add some inner shadow as stated on the image.

Step 27

Continue by adding a drop shadow layer style. It is another small detail, but it really makes that button zone minimalistic, nice-looking and well designed.

Step 28

To finish, add a Gradient Overlay effect.

Step 29

By using the Custom Shape Tool (U), create an arrow in both circles. Now add the details shown on the screenshot.

Step 30

Continue by adding some Color Overlay for the arrow. It should also be a blue color because otherwise, it will not fit the contrast and the colors used on the whole template.

Step 31

Add a video screenshot in the free space and place a title for it. For this template, I have used a simple screenshot of a YouTube widget.

Step 32

Add the text “Product Highlights” and “Case Studies.” Let the text under the “Product Highlights” be links so you could showcase some friends’ websites or resources you admire/promote.

Step 33

Finish it by creating another form for e-mails, place all kind of other information, and whatever you’d like.

Step 34

Don’t forget to make a relevant/small footer for our template. If you have paid attention, you should know how to create the same effect as below. 

All done! If you have questions or suggestions, feel free to drop a comment. I hope you enjoyed this whole tutorial!

Here is what we will be making, click on the image for full preview:

Step 1: Download Resources

• 960 Grid System
• Twitter Icon
• Social Icons

Step 2: Setting The Document Size

In the Downloads folder or on your Desktop open up “960_grid_24_col.psd”. First we need to change the canvas size, hit CTRL + ALT + C to access the canvas size option and change the width to 1200 px and height to 1500 px. Make sure to be using pixels as your measurement.

We also need to make sure that Rulers and Guide Lines are visible. Go to View and check Rulers, Guide, and Snap.

Now follow these instructions and place New Ruler Guides at:

• Position: 40px Orientation: Horizontal
• Position: 170px Orientation: Horizontal
• Position: 210px Orientation: Horizontal
• Position: 550px Orientation: Horizontal
• Position: 610px Orientation: Horizontal
• Position: 660px Orientation: Horizontal
• Position: 900px Orientation: Horizontal
• Position: 1180px Orientation: Horizontal
• Position: 1455px Orientation: Horizontal

Step 3: Creating The Background

Fill the background layer with #f3f2ee. Now lets add some texture to it, go to Filter > Noise > Add Noise

Step 4: Organizing The Folders/Groups

It is important to make the Folders/Groups organized in order for the developer to easily locate the elements of the site, or for the future redesigning of the site you, as a designer, can easily locate the elements you may want to change.

Create new Folder(s)/Group(s) and name them as shown below.

Step 5: Creating the Header Area

Top Header

Inside the Header folder create another folder and name it Top Header. Now create a new layer and name it thead, make a selection from the first guide starting from the left across to the right fill it with any color for now. Select Type Tool(T) and type text as shown in the screen shot below according to its character settings.

Add this Blending Option to thead layer.

• Inner Glow

• Gradient Overlay

• Stroke

Header

Create another folder inside header folder and name it header. This folder contains these folders: Logo, Latest Tweet, Navigation, and Search.

Create a new layer and name it header_bg. Select Pen Tool(P), make a shape as shown in the screen shot below and fill it with any color.

Add this Blending Option

• Inner Glow

• Gradient Overlay

• Stroke

Logo

It’s time to add our Logo, so grab the Type Tool(T) and type the logo according to its character settings. Color used for the logo #ffffff and #e66324.

Grab the Pen Tool(P) to create that little shape, fill it with #fb824a and label it design using Type Tool(T).

Navigation

Now lets create our navigation, select Type Tool(T), add the following links according to the settings below.

Using the Pen Tool(P) create a shape as shown in the screen shot below that will serve as a hover or active state, and fill it with any color.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Search

To create the search form first thing we need to do is to select Rounded Rectangle Tool(U), create a shape as shown in the screen shot below and fill it with any color.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Create another shape now using the Rectangle Tool(U)

• Inner Shadow

• Gradient Overlay

• Stroke

Create another shape for the button.

Add this Blending Option

• Drop Shadow

• Bevel and Emboss

• Gradient Overlay

Using the Type Tool(T) type the following:

Tweet Feed

Time to put up our Tweet Feed. Select the Type Tool(T) type “Tweet Feed:” and a sample latest feed. Also open up the twitter icon and place it beside the text.

I added this Blending Option to the Twitter Icon

Step 5: Creating The Slideshow

The first step is to create a big box using the Rectangular Marquee Tool(M). Change the Foreground color to #282828 and Background to #191919. Now select Radial Gradient and fill the selection starting from the center.

Using the Rectangular Marquee Tool(M) create another shape and fill it with any color.

Add this Blending Option

• Gradient Overlay

Using the Pen Tool(P) create a shape and fill it with any color.

Add this Blending Option

• Gradient Overlay

Now above the two shape layers create 2 layers and name them Light and Dark. Now select the Rectangular Marquee Tool(M) and make a selection and fill it with #ffffff.

Add a Gaussian Blur to the layer, to do this go to Filter > Blur > Gaussian Blur.

Set the layer mode to Soft Light and Opacity to 50%. Now select the Dark layer and create a shape using the Rectangular Marquee Tool(M) and fill it with #000000.

Add the same amount of Gaussian Blur but this time set the Opacity to 80%.

Below the Orange and the Black colors we will add a background shadow. So create a new layer below it, select the Elliptical Marquee Tool(M).

Add a Gaussian Blur Radius: 6px.

Using the Type Tool(T) and the Elliptical Marquee Toll(M) create what is shown in the screen shot below and make sure that it is on a separate layer. On the left side I used 12 pt Arial. On the right side I used 16pt Arial.

The first circle will serve as the hover/active state.

Add this Blending Option

• Inner Shadow

• Inner Glow

• Gradient Overlay

The second Circle will be the next button.

Add this Blending Option

• Drop Shadow

• Bevel and Emboss

• Gradient Overlay

I added a small arrow to the second circle using the Pen Tool(P) with fill color #606163. Duplicate it and move the original layer once using the down arrow key. Also, for the text, I duplicated it and changed the color to #5d5d5. I colored number 1 with #ffffff. With this step it will give the arrow and the numbers an embedded or letterpressed effect.

For this tutorial I will not add any slide images. So it’s up to you to add your own.

Step 6: Creating 3 Columns (About, What I Do and Testimonials)

Inside 3 Columns folder create 3 folders and name them About, What I Do and Testimonials. Now we’re going to add our About information, so select the Type Tool(T) and type your information.

Notice that line. I used Line Tool(U) 3px color #000000.

Read More Button

Create a new folder and name it Read More. Using the Round Rectangle Tool(U) with a radius 5px create a shape and fill it with any color.

Add this Blending Option

• Drop Shadow

• Inner Glow

• Gradient Overlay

Using the Type Tool(T) and the Pen Tool(P) I added ‘Read More’ and an arrow shape. You can just duplicate the arrow shape as we did in our slide show. Again you can use the same technique to achieve an embedded effect, just duplicate each layer. The original layer must move once using arrow key and change the color to #ffffff.

Time to add a separator to separate the text and arrow. Using Line Tool(U), add 2 lines the first line must have a fill #ffffff and the second #aeaeaf.

Nice and sexy eh? Now lets proceed to What I Do.

What I Do

For this step simply duplicate all the elements inside the About Folder and move it to What I do Folder, then change the Heading and Information.

Testimonials

Just duplicate again. I added a 60×60 image and added italic text and aligned it to the right.

Step 7: Creating My Portfolio

In this step we are going to display our best designs. To start select the Type Tool(T) and type “My Portfolio” then add a 3px line color #000000 as shown in the screen shot below.

Now were going to add thumbnails for our design images. Create a new folder and name it Thumbnails. Now what you’re going to do is create a new file (CTRL + N) 210 x 150 in this file you’re going to create 4 thumbnails with your chosen images. When you’re done drag it to our canvas and place to the Thumbnails folder.

I added a Stroke to each thumbnail.

Now were going to add a Client Name and Website URL below each thumbnail. So, select the Type Tool(T) and type some dummy text.

Last thing we’ll do for the Portfolio section is add a previous and next button at the right top corner. Select the Shape Tool(U) select an arrow from the list of shape and fill it with #362f2d.

Step 8: Creating The Footer

Inside the Footer folder create a new layer and name it footer_cont. Now select the Rectangular Marquee Tool(M) and create a big rectangle selection from the guide. Set the Foreground color to #151515 and Background to #212121. Select Linear Gradient(G) and drag starting from the bottom up to the top of the selection.

Add this Blending Option

• Inner Glow

• Stroke

We will divide our footer area into four columns, so inside the Footer folder create 4 folders and name it Explore, My Services, Latest Frog The Blog and Stay Connected. Lets work first on heading titles. Using the Type Tool(T) type your heading.

I added a drop shadow in each header

Add this Blending Option

• Inner Glow

Explore

Lets work on Explore folder. Using the Type Tool(T) type create another section heading for Explore.

My Services

Here I used the same character settings but with a different color. Use this color for the text #c3b7a4. I colored it differently so that services is more noticeable than the others.

Latest From The Blog

Here we showcase the 3 most recent article from the blog. I styled it using numbers to make it unique and avoid redundancy of styles.

Stay Connected

Time to open up the social media icons and place them on the canvas. Place it correctly with proper spacing. On this part don’t add a divider :)

Step 9: Creating The Footer Copyright

Make a selection in the remaining white space area in the bottom and fill it with any color.

Add this Blending Option

• Inner Glow

• Gradient Overlay

• Stroke

Time to add your copyright text, so select Type Tool(T) and type in with correct character settings.

Finally we’re done! I really hope that you have learned something from this tutorial that can be used for your future projects. If you have questions just drop it below. Thank you and please don’t forget to subscribe.

Final Preview

Resources you will need to complete this tutorial:

• 960 Grid System
• Social Icons
• Icons
• 3DBox Generator by Artbees

Here is what we will be making, click on the image for a full preview:

Step 1: Working with the Site Structure

Before we get started, download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are visible by pressing

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step 2: Working with the Header

Rename layer1 folder (group) Header, create a new layer and name it header_bg (Create groups for every major section for example you should group: Header, Navigation, Footer layers together to help stay better organized).

Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below and fill it with #191919

Step 3: Working with the Logo

Create a folder inside Header group and name it  Logo, put all your logo related layers there.

Select Text Tool (T) and put up your Site Name and Slogan.

• Site Name: #e0cf39
• Slogan: #ffffff

Separator line: Select Line Tool(U) color #414141.

Step 4: Working with Navigation

Create a new group and name it Navigation, put all your navigation related layers there.

Select Text Tool (T) and add the following text: HOME, PRODUCTS, SUPPORT, ABOUT, and CONTACT.

Create a layer and name it Hover.

Select the Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #282828

Create another layer at the top of the Hover group. Follow as shown in the screenshot below and fill it with #dfce3e

Step 5: Working with Featured Section

Create a new group and name it Featured_Section, put all your Featured-related layers there.

• Create another guideline, 375px Horizontal.
• Set the foreground color to #dcdcdc and background to #ffffff
• Select Linear Gradient

Create another layer and name it img_holder.

Select the Rectangular Marquee Tool (M), make a selection as shown in the screenshot below and fill it with #414141.

Add this Blending Option

Stroke

Open up the 3dbox generator you have downloaded. Create another layer at the top of img_holder and name it img.

Alt + Click between the two layers to link the img to img_holder.

Below the img_holder create another layer name it shadow.

Select the Rectangular Marquee Tool(U), make a selection as shown in the screenshot below and fill it with #000000.

Ctrl + T to transform. Now, Left Click and choose perspective.

Go to Filter > Blur > Gaussian Blur.

Select the Text Tool (T), Grab some lorem ipsum text. Follow the text format as shown in the screenshot below.

Select the Elliptical Marquee Tool (M), make 4 small circles as shown in the screenshot bellow and fill it with #b2b2b2. For the hover fill it with #1b1b1b.

Step 6: Working with Buttons

Create a new group and name it button, put all your button-related layers there.

Select Rounded Rectangle Tool (U), set the Radius to 5px. Create a layer named btn_bg.

Add this Blending Option

Inner Shadow

Gradient Overlay

• #ffffff
• #dcdcdc
• #a2a2a2
• #d7d5d5
• #ffffff

Stroke

Select Text Tool (T)

Create another layer at the top of btn_bg and name it shine.

• Ctrl + Click layer btn_bg
• Select Brush Tool (B), Softness to 0%
• Brush at the center of the selection

Now let’s make a shadow on our button. Repeat the same step as we did on our slide show shadow.
When you’re done duplicate Button folder and place give it a 20px distance.

Step 7: Working with Features

Create a folder named Features, put all your features-related layers there.

Open up the icons you have downloaded. Grab 6 icons that you like.

Place it as shown in this screenshot below and follow the text format.

Step 8: Working with Newsletter

Create a new group and name it news_letter, place all your newsletter-related layers there.

Create another layer named news_bg

Select the Rectangular Marquee Tool (M), and make a selection as shown in the screenshot below.

Select the Gradient Tool (G), set it to Pattern.

Add this Blending Option

Gradient Overlay

• #000000
• #ffffff

CTRL+ T to transform, right-click and choose warp.

It’s up to you how you do the warping. In the image below I curve a little at the top left and a tiny curve on the right side and bottom.

Create another folder below new_bg and name it Shadow

Select Pen Tool(P), make a shape as shown below and fill it white #000000.

Go to Filter > Blur > Gaussian Blur.

Set the shadow layer opacity to 50%.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

• Sign Up For Free: #f4c714
• Name & E-mail: #403f3f

Step 8: Working with About Us

Create a folder named About_us, place all your about us related layers there.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

Step 9: Working with Footer

Create a new group and name it Footer, put all your footer related layers there.

Create a guideline 990px, horizontal.

Make a selection as shown in the screen shot below and fill it with #282828.

Create a folder named Latest News.

Select Text Tool (T), follow the text format as shown in the screenshot below.

Create a folder and name it Recent_tweets.

Select Text Tool (T), follow the text format as shown in the screen shot below.

Create a folder and name it Get Connected.

Open up the social icons you have downloaded and grab Facebook, Twitter and Email.

Select Text Tool (T), follow the text format as shown below.

Select Rectangle Tool (U), set the color to #191919 and place it as shown in the screenshot below.

I also added copyright text and some footer links using Text Tool (T) 11pt color #9d9d9d

Done! I hope you learned something new here. Don’t forget to comment and suggest better ways on how to do things! If you have a tutorial request, or a question feel free to leave them as a comment below. Thanks!

Final Preview

Resources you will need to complete this tutorial:

• 960 Grid System
• 108 Mono Icons by Tutorial9
• This Is Art2
• Vegur Font

Here is what we will making, click on image for full preview:

Step1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed. By pressing

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Using the Paint Bucket Tool(G) fill the background layer to #242b30

Now you need to create a folders. Here is the folders that we will use in order to be organized.

Step2: Working with Header

Make sure that you have downloaded all the resources. Create a new layer inside the header folder and nae it toe header_bg (Make sure that you have finished creating the folders as said earlier). Now create a new Guideline to do this go to View > New Guide, set the value to 100px and set the Orientation to Horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below. Now set the foreground #f4f4f4, background #ffffff. Select Linear Gradient drag it by starting at the top down to the middle of the section .

Logo

Still we were working on the Header folder, create a new folder and name it to Logo. Make sure you installed the Vegur font that you have downloaded. Follow the text formatting as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Gradient Overlay

Color Used

• #191919
• #505050
• #202020

Apply this styles to both texts

Navigation

Create a new folder and name it to Navigation. We will be putting our navigation links and place each icons “108 Mono Icons by Tutorial9″ for its desired link , so grab text tool and place it as shown in the screen shot below.

Add this Blending Option to the Icons

Let see what we have on this step. First we created our header background adding up our Logo using the Veguar font we style it by the power of Blending Options, here we can style it uniquely. Next we added our Navigation menu using simple text and Icons from Tutorial9. Thats it for our Header section.

Step3: Working with Slideshow

Preview of what we will making

Let’s work on first with the dark background. Create a new layer inside the Slideshow folder and name it slide_bg. Next create a new guide Value to 465px, Orientation to Horizontal. Make a selection starting below our header down to the guideline. Now select Linear Gradient, set the Foreground to #0f0e0f and Background to #1a181a start dragging from the top down to the bottom of the selection.

Create a new layer and name it slideshow_holder. Next create a new guideline as shown in the screen shot below. Select Rectangle Marquee Tool(M) make a rectangle at the center of the guideline and fill it with white.

Add this Blending Option

Inner Glow

Gradient Overlay

Color Used

• #ffffff
• #f0f0f0

Stroke

Now we will delete some area in our slieshow_holder to place our Next and Previous buttons. Select Elliptical Marquee Tool(M) and make a selection as shown in the screen shot below. Do this in both sides.

Next and Previous Buttons

Create a new folder and name it to Arrow. Select Rounded Rectangle Tool, radius to 10px and follow the screen shot as shown below.

Place this icons both sides.

Add this Blending Option

Gradient Overlay

• #d7ff00
• #d7ff00
• #fff600

Now add up some text with the font choice of yours and also grab some image for the slide show.

Tabs

Create a new folder and name it Tabs. For the background of the tabs select Rectangular Marquee Tool(M), place it as shown in screen shot below and fill it with white.

Add this Blending Option

Gradient Overlay

• #ffffff
• #dcdcdc

Stroke

• #b8b8b8

Inside the Tabs folder create another folder and name it to hover. Select Rectangular Marquee Tool(M), place it as shown in the screen shot below and fill it with black.

Add this Blending Option

Inner Glow

Gradient Overlay

• #191919
• #5d5d5d

Stroke

• #2d2d2d

Select Text Tool(T) and add this text formatting.

Create another folder and name it to Normal, Select Text Tool(T) and add up texts with the same formatting. Also I added a Divider. Follow the screen shot as shown below.

Let see what we have on this step. We started our slide show by doing first its background follow by the holder of the entire slide show. Next thing we have done is putting up some text and image to contain the slide, then we added Tabs a design for active/hover and the other is styled in a normal state.

Welcome Message

Still were in the slide show folder. Create another folder and name it message. Now select Rectangle Tool(U), place the shape as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Inner Glow

Gradient Overlay

• #191919
• #585757

Stroke

• #2c2c2c

Notice in the Preview of the Welcome Message it looks like it is hanging, so to do that select Pen Tool(P) and create a shape both sides as shown in the screen shot below.

Make a selection of it. Set the Foreground to 0a090a, Background to #1b1b1b. Select Linear Gradient and start dragging from the top down to the bottom of the selection.

Add this Blending Option

Stroke

• #100f10

You may have something that looks like this

Now were going to add the message, so select the Text Tool(T) and put up you message with the same formatting as shown in the screen shot below.

In this step we styled the welcome message to make it looks like its hanging on the design. With the help of the dark background and Drop Shadow we achieve this hanging effect. Also we styled our text to make it looks like beveled effect by duplicating the text place it at the back of original, make the text darker and move it up once by the use of the arrow key.

Step4: Working with Services

Preview of what we will making

In the Services folder create another folder and name it to Service1. Open up “This Is Art2″ and select some icons that is appropriate to each services. Now select Text Tool(T), follow the placement and the formatting as shown in the screen shot bellow.

When you’re done duplicate it 2 times then change it texts and icons. Now were going to add a background to our services section to make it more nicer. Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below. Select Linear Gradient, set the Foreground to #f4f4f4 and Background to #ffffff, start dragging from top down to bottom of the selection.

In this step we simply grab some nice Icons, style our text with a proper font, font size, colors and by the use of proper alignment of texts.

Step5: Working with Information

Preview of what we will making

In the Information folder create a layer and name it to background. Select Rectangular Marquee Tool(M), make a shape and fill it with #eaeaea

Add this Blending Option

Inner Glow

Stroke

• #e0dfdf

Now were going to add the site Information. Select Text Tool(T), follow the formatting and place it as shown in the screen shot below.

Create another folder and name it RSS Subscribe. Select Rectangle Tool(U), create a shape color to #b7b7b7 as shown in the screen shot.

Duplicate the shape. By the use of arrow key move it 1px to the right and 1px to the bottom.

Add this Blending Option

Gradient Overlay

• #eeeeee
• #ffffff

You may have something that looks like this

Select Rectangle Tool(U), create a shape and place it as shown in the screen shot.

Add this Blending Option

Drop Shadow

Inner Glow

Gradient Overlay

• #191919
• #585757

Stroke

• #2d2d2d

In this step we just copy the text formatting of what we have done on our services area. Also we create an RSS Subscribe area where we style the subscribe button looks like it is hanging the same as we did to our Welcome Message

Step5: Working with Footer

Select Footer folder and create a layer name it foot_bg. Using Rectangular Marquee Too(M) cover all the remaining white space below the information area and fill it with #1d1d1d.

Add this Blending Option

Inner Glow

Stroke

• #2d2d2d

To finish the design add up your copyright text using Text Tool(T).

Conclusion:

I really hope that you follow and learn something from this tutorial for your future projects. If there are some steps that you didn’t understand feel free to ask some question below. Also if you like this tutorial please share it to your friends and don’t forget to subscribe to our news letter. Have a great day!.

Stay with me till the end so that you will not get lost in the process, everything is important so do not skip!

Resources you will need to complete this tutorial:

• 960 Grid System
• Icons
• Home Icon
• RSS Icon
• Twitter Icon

Here is what we will be making, click the image for full preview:

Step 1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are in view by pressing:

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Using the Paint Bucket Tool(G) fill the background layer to #151515

Now we need to create folders. Here are the folders that we will use in order to be organized all throughout.

When you’re done let’s get started!

Step 2: Working with Header

Create new guideline by going to View > New Guide and set the position to 150px, orientation to horizontal. Repeat the step and change the position value to 100px and 5px.

Inside the Header folder create a new layer and name it header_top (Make sure that you have created the folders as said earlier).

Select Rectangular Marquee Tool(M), make a selection in the 5px guideline we just made and fill it with #000000.

Add this Blending Option:

Drop Shadow

Now create a new layer and name it header_bg. Select Rectangular Marquee Tool(M), make the selection as shown in the screenshot below.

Set the foreground color to #242424, background to #151515. Now select Gradient Tool(G) > Radial Gradient. Fill the selection by dragging from the center to the right.

Add this Blending Option:

Inner Shadow

Step 3: Working with Logo

Inside the Header folder create a new folder and name it logo. Were going to create a quick logo. Select Text Tool(T), follow the screenshot as shown below.

Add the following Blending Options:

Drop Shadow

For the Quick logo Select Custom Shape Tool(U), follow the screen shot as shown below.

Also add the following Blending values:

Drop Shadow

Gradient Overlay

Step 4: Working with Navigation

Inside the Header folder create a new folder and name it navigation. We are going to add navigation links, so select Text Tool(T), use the values below:

Duplicate the text layer. The duplicated layer will be place on the top of the original layer, select the original text layer and set the color to #000000, press up arrow once on your keyboard. This will make the text beveled.

Now we will create an active/hover effect. Select Rounded Rectangle Tool(T), Radius to 10px. Set the shape fill to 0% at the layers panel.

Apply the values as shown below:

Drop Shadow

Inner Shadow

Gradient Overlay

Step 5: Working with Search and Breadcrumbs

Inside the Header folder above the header_bg layer create a new layer and name it bg. Select Rectangle Marquee Tool(M), make a selection as shown in the screen shot below and fill it with any color.

Then follow the given values for the Blending below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Inside the Header folder create a new folder and name it Search. Now were going to add the search input background. Select Rounded Rectangle Tool(U), set radius to 10px and place it as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Inner Shadow

Select Text Tool(T), label it with any text you are comfortable with.

Now open up the social media icons you have downloaded and place it beside the search bar as shown in the screen shot below.

Inside the Header folder create a new folder and name it Breadcrumbs. Open up the home icon you have downloaded and place it as shown in the screen shot below. I added a Color Overlay #696969 in the home icon also with the same color in the text.

Step 6: Working with Slideshow

Select Slideshow folder and create and new layer inside of it, name it slide_bg. Create a new guide line by going to view > new guide > set Value to 430px orientation to horizontal.

Make a selection in the guide we have created and fill it with color.

Blending values as follow:

Drop Shadow

Pattern Overlay

Stroke

Now were going to add a highlights to our slide_bg create a new layer above it and name it highlights. Select the Pen Tool and make the shape as seen below and make a selection from it.

Fill the selection with #ffffff  and set the layer options as shown in the screen shot below.

Now we were going to add some text in our slide show. Select the Text Tool(T) and follow the text formatting.

Step 7: Working with Read More

Next will be the read more button. Inside the slideshow folder create another folder and name it read_more. Select Rounded Rectangle Tool(U) then set the Radius to 10px. Place it like seen below.

At the layers panel set the fill color to 0%.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Make a selection to the shape we have just created by clicking the shape thumbnail in the layers pannel. Go to Select > Modify > Contract. Set the pixel value to 5px and fill it with any color.

Follow the blending values as set below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Using the Text Tool(T), label the button with read more.

Step 8: Working with Slide Image

Now were going to add the slide image. Select Rectangle Tool(U), set the color to #000000 and place it as shown in the screen shot below.

Set the layer Fill to 0% then go to Blending Options and do the following:

Drop Shadow

Stroke

I placed an image above the layer. So you may have something that looks like in the screen shot below.

Step 9: Working with Next Prev Buttons

Create another folder inside Slideshow folder and name it prev_next. Select Rounded Rectangle Tool(U) and the radius to 10px. Follow the step as shown in the screen shot below.

Name the layer to prev. Set the layer Fill to 0%.

Copy the following values:

Drop Shadow

Inner Shadow

Gradient Overlay

Duplicate the prev layer and name it to next. Place it at the opposite side.

Step9: Working with Active/Inactive Identifier

Create another folder inside Slideshow folder and name it Identifier. Inside the Identifier folder create a new layer and name it inactive.

Now select Ellipse Tool(U), fill it with #000000 and place it as shown in the screen shot below.

Notice in the screenshot they have the same effect with our prev_next buttons. Refer to the layer styles of prev_next buttons or by simply duplicating the styles by holding the Alt + Click to the FX Icon in the layers panel and drag it to the inactive shape layer.

Now we will create the active identifier. Select the first inactive shape. Go to Select > Modify > Contract. Set the pixel value to 5px.

Use the following values:

Drop Shadow

Inner Glow

Gradient Overlay

Step10: Working with Services

Select the services folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting as shown in the screen shot below.

Now let’s add a divider. To do this select Line Tool(U), weight to 1px. Follow the screen shot as shown below.

Create another folder inside services folder and name it service1. Open up icons you have downloaded and select an appropriate icon for each service. Now select Text Tool(T) follow the text formatting as shown in the screenshot below.

When you’re done duplicate it depending on how many services you offer. For this exmaple I duplicated it 5 times and changed every icon for different services. Follow what I did in the screenshot below.

Step 11: Working with Recent Tweets

Select aboutme folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services header title) as shown in the screen shot below.

Using Text Tool(T) put up some about me information. Use the values presented below.

Go to Blending Options and use the values as shown below:

Drop Shadow

Stroke

Step12: Working with Latest Tweets

Select aboutme folder. Now we are going to add the header title and tweets, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services and about me) as shown in the screen shot below.

Add this blending option to the rounded rectangle.

Drop Shadow

Step12: Working with Footer

In the footer folder create a new layer and name it footer_bg, make a selection as shown in the screenshot below and fill it with color.

Add this Blending Option:

Inner Glow

Gradient Overlay

Stroke

Now select Text Tool(T), put up your copyright info and place it on the center.

Finally we’re done! Hope you learned something on this tutorial and I hope you like it. If you have
any questions or tutorial request drop some comments below. Thanks!

Final Preview

We’ll be using really light color scheme and design is meant to be really minimal for portfolio type of website.

Let’s get started – I hope you will make out together with me until successful finish together !

By the way in few days you’ll see also PSD TO HTML tutorial to this design – so keep up, design this template so you can immediately code it into live design!!

*Updated – here is Detailed PSD to HTML tutorial

Resources you will need to complete this tutorial:

• 960 Grid System
• Social Icons
• Icons
• IMac

Here is what we will making, click on image for full preview:

Step1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed, do that by pressing

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step2: Working with Header

Rename the layer1 folder to Header and rename layer 1 to header_bg (put everything in separate folder like Header, Navigation, Footer to help to be organized better).

Create new guideline go to View > New Guide and set the position to 150 px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with any color.

Add this Blending Option:

Gradient Overlay

• #192028
• #2a3642

Step 3: Working with Logo

Create a folder inside header folder and name it to Logo, put all your logo related layers there.

Create another guideline 50px from the top.

Now Select Text Tool(T) and put up your Site Name and Slogan.

• Site Name: any color
• Slogan: #cacaca

Add this Blending Option:

Drop Shadow

Gradient Overlay

• #c5c5c5
• #d7d7d7
• #ffffff

You must have something like this in the result:

Step 4: Working with Navigation

Create a folder and name it to Navigation, put all your navigation related layers there.

Create another guideline 5px from the top.

• Select Rectangular Marquee Tool(U)
• Make a selection from left to right based on our 5px guideline
• Fill it with a color #02abc6

Select Text Tool(T):

Let’s create a hover/active state to our navigation.

Select Pen Tool(P). Create an arrow-head shape and place it as shown in the screenshot below.

We’re finished with our header section, so now let’s proceed with featured section.

Step 5: Working with Featured Section

Create a folder and name it to Featured_Section, put all your Featured related layers there.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #cccdcd.

Add this Blending Option:

Stroke

Create another layer and name it to middle_light. Set the opacity to 50%.

Select Rectangular Marquee Tool(U). Make a selection as shown in the screenshot below:

• Select Radial Gradient(G)
• Foreground color to #e5e5e5
• Background color to #ffffff

Drag the gradient starting from the middle all the way to the right.

Select Text Tool(T), put up your site message.

Now Open up the Imac.psd file. Place it as shown in the screenshot below.

Below the Imac layer Create a new layer and name it Shadow.

Select Elliptical Marquee Tool(U). Make a selection as shown in the screen shot below and fill it with a color #000000.

Remember that while holding shift key you can create multiple selections.

Go to Filter > Blur > Gaussian Blur.

Set the layer opacity to 50%.

Step 6: Working with Read more Buttons

Create a folder and name it to buttons, put all your read more buttons related layers there.

Select Rounded Rectangle Tool(M), place it as shown in the screenshot below.

Add this Blending Option:

Gradient Overlay

• #dcdcdc
• #ffffff

Stroke

Select Text Tool(T) and add text to buttons.

Add this Blending Option:

Drop Shadow

Gradient Overlay

• #1d1d1d
• #4e4e4e

With the help of drop shadow and gradient overlay this effect will make our text look embedded.

Step 7: Working with Testimonials

Create a folder and name it to testimonials, put all your testimonials buttons related layers there.

• Select Rounded Rectangle Tool(U)
• Set the radius to 10px

Apply the same layer style as we did into our header and place Place it as shown in the screenshot.

Select Text Tool(T), add up your testimonials.

Step 8: Working with Hire Me Button

Create a folder inside testimonials folder and name it to hire_btn, put all your hire button related layers there.

Select Rounded Rectangle Tool(U), set the radius to 10px and color to #141a20. Place it as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Ctrl + click to the layer to make a selection.

Go to Select > Modify > Contract. Set it to 3px.

Create another layer and name it to button , and fill it with any color.

Apply the same layer and text style as we did to our button in featured area.

Step 9: Working with Main Area(What I Do, My Portfolio, I Socialize)

Create a folder and name it to main_area, put all your main area related layers there.

What I Do

Create another folder inside main_area and name it to What I Do.

Now Open icons that you have downloaded and grab 3 icons that will fit to (What I Do, My Portfolio, I Socialize).

Select Text Tool(T):

My Portfolio

Create a folder and name it to my_portfolio, put all your portfolio related layers there.

Select Text Tool(T):

Apply this Blending Option to the image.

Stroke

I Socialize

Create a folder and name it to i_socialize, put all your I Socialize related layers there.

Open up social icons and place it as shown in the screen shot.

Select Text Tool(T):

Now were done in our main area lets proceed to footer.

Step 10: Working with Footer(Quick Links, Latest From The Blog, Contact Me)

Create a folder and name it to footer, put all your footer related layers there.

Go to View > New Guide. Set it to 965px Horizontal.

Repeat the step. Set it to 1158px Horizontal

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot and fill it with any color.

Add this Blending Option:

Gradient Overlay

• #2a3642
• #192028

Make a selection in to the remaining white space.

Add this Blending Option:

Inner Glow

Gradient Overlay

• #2a3642
• #192028
• Check Reverse

Stroke

• #192028

Quick Links

Create another folder inside footer and name it to Quick Links.

Select Text Tool(T)

• Header: #ffffff
• Links: #0cb0ca

Latest From The Blog

Create another folder inside footer and name it to Latest_blog

Select Text Tool(T):

• Header: #ffffff
• Links: #0cb0ca

Contact Me

Create another folder inside footer and name it to Contact_me

Open up social media icons and grab an icon for email and rss.

Select Text Tool(T):

• Header: #ffffff
• Paragraph: #cacaca
• Links: #0cb0ca

The last thing to do is add up your Copyright.

Select Text Tool(T). Arial 11pt

Finally were done! Hope you learn something on this tutorial and hope you like it. If you have
any question or tutorial request drop some comments below. Thanks!

Final Preview

By the way in few days you’ll see also PSD TO HTML tutorial to this design – so keep up, design this template so you can immediately code it into live design!!

*Updated – here is Detailed PSD to HTML tutorial

Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

• 960 Grid System
• MacBook PSD

Here is what we will making, click on image for full preview:

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed. By pressing

• CTRL + R (View Rulers)
• CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step1 Working with Background and Header

Rename the layer1 to Header (put everything in separate folder like Header, Navigation, Footer to help to be organized better).

Fill the background color to #131313.

Create new guide. Click on View > New Guide

Select Rectangular Marquee Toll(M) and make a selection from the guide we made, fill it with #0a0a0a color.

Add this Blending Option:

Stroke

• Size: 1px
• Color: #242424

Select Text Tool(T) and add your navigation links, place it at the top right corner.

Create another folder inside the Header name it Logo, put all your logo related layers there.

Next we will create our logo. Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with any color.

Add this Blending Option to it:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Select Text Tool(T) add up your Site Name.

Add this Blending Option to it:

Drop Shadow

Gradient Overlay

Step 2: Working with Welcome Message

Create another folder outside the Header name it welcome_displays, put all you’re welcome displays related layers there.

• Create new Horizontal Guide 130px.
• Select Text Tool(T) and put up your Welcome Message

For the font I used Verdana, or the Highlighted text color is #73cef8.

Add this Blending Option:

Drop Shadow

Step 3: Working with Read More Button

Create another folder inside the welcome_displays name it read_more, put all your read more related layers there.

Select Rounded Rectangle Tool(U) Radius to 15px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

Add Read More text size to 14pt, add a solid drop shadow 2px.

At the very bottom of welcome_displays layers add another layer name it background.

• Select Linear Gradient With a foreground color #111111 and background #181818.

Step 4: Working with 3D like Ground/Holder

• At the very top of our layers panel create another folder and name it 3D
• Create another layer and name it Linear
• Select Rectangular Marquee Tool(U)

Select Gradient Tool and use linear gradient. Foreground Color #111111 background #181818.

• Now create another layer at the top of linear and name it radial
• Hit X to reverse the background color and foreground color
• Make sure you choose radial gradient.
• Drag the gradient starting from the center to right.

Add this Blending Option to it:

Drop Shadow

Stroke

Now Create a 1px line color #272727

Duplicate the line and place it on the bottom:

Duplicate layer again and place it to the top.

Add this Blending Option:

Gradient Overlay

Create another line and fill it with #0b0b0b.

You can see now that we’ve got a nice 3D effect, ok – let’s use that ground effect and put something on it.

Create another layer at the very top of 3D folder and name it MacBook.

Open up the Macbook .psd file that I provided in the resources. Replace the image to some of your works and place it in our layout.

• Below the image layer create another layer and name it Shadow
• Select Elliptical Marquee Tool(M) and fill it with #000000

Go to Filer > Blur > Gaussian Blur;

Step 5: Working with 3 column Information

Create another folder below the 3D folder and name it 3column_info, put all your information related layers there.

Set the foreground color to #111111 background to #181818.

Add this Blending Option:

Drop Shadow

Create a 1px line as shown below.

Create a folder inside 3column_info and name it About Me.

Here is what we will be making:

Select Rounded Rectangle Tool(U) Radius to 10px.

Add this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay

Color I used

• #010101
• #242424
• #1d1d1d
• #575757
• #2b2a2a
• #070707
• #525151

Stroke

Color I used

• #000000
• #5f5e5e
• #000000

• CTRL + Click to the layer to make a selection
• Go to Select > Modify > Contract 3px
• Fill it with any color

Add this Blending Option:

Inner Shadow

Stroke

Color I used

• #000000
• #2a2a2a
• #919191
• #2b2b2b

Above the contracted layer add your image.

Select Text Tool(T) and follow the steps as shown in the screenshots:

Grab a copy of read more button.

Create another folder and name it What I Do.

For the bullet style Select Rectangular Marquee Tool(M) and make a little Rectangle.

Add this Blending Option on it:

Drop Shadow

Inner Shadow

Gradient Overlay

Color I used

• #000000
• #191919

Stroke

Color I used

• #8a8a8a
• #000000

Create another folder and name it My Skills.

For the Photoshop, Illustrator, HTML/CSS WordPress text I used Verdana,bold, size to 18pt.

Select Rounded Rectangle Tool(M). Place it as shown in the screenshot below.

Add this Blending Option:

Drop Shadow

Gradient Overlay

Color I used

• #252525
• #171717

Stroke

Duplicate the layer and clear the layer style by:

• selecting the layer
• right-click
• then select Clear Layer Style

Add this Blending Option to it:

Inner Glow

Gradient Overlay

Color I used:

• #191919
• #282828

Step 6: Working with Recent Projects

Create another folder name it recent_projects, put all your recent projects related layers there.

Apply the same format as to our headers.

Now select Rounded Rectangle Tool(U) Radius to 10px. Create 3 shapes about 12.5 px distance from the right.

• Apply the same style as we did to our thumbnail image in our about me section.

Contract it to 3px and use the same process as we did in our thumbnail in about me. Add up your image.

Step 7: Working with Footer

Create another folder name it footer, put all your footer related layers there.

Select Rectangular Marquee Tool(M). Draw a shape at the very bottom 40px height and fill it with #0a0a0a.

Add this Blending Option:

Stroke

Now add up your copyright text. I used:

• Verdana
• Size:10px
• Color #999999 and for the link #ffffff.

Finally were done! Hope you learn something on this tutorial and hope you like it. If you have any questions or tutorial request drop some comments below.

Thank you and keep coming back!

Final Preview

PSD File can be downloaded HERE.

Follow-up tutorial: Converting PSD to working HTML.