How to create an awesome portfolio layout
Hello my friends. Another day means another resource, or tutorial released on Graphstock.com
Today i will show you how to create a nice looking portfolio layout, or you can use this PSD layout to create a wordpress theme. In both cases this layout is made to showcase your portfolio in a proper way.
Step 1 – Download our framework
Your first step is to download the PSD framework. Here is the download link
Step 2 – Open the PSD layout, and make sure the guides are visible
Open the PSD Layout, and with Paint bucket tool fill the background with the following color: #d8d8d8
For your own good is to enable the guides. In this way you can align all the elements from this portfolio layout very easy.
Step 3 – Create a gritty background
Duplicate the background layer and then go to Filter > Noise > Add noise
Step 4 – Create the slides how for this portfolio layout
Create a big shape in the middle of the layout. Here we will add a nice looking slides how later in this tutorial.
These are the layer styles used to create the background of our slideshow
Step 5 – Add noise on the slides how background too
I will duplicate this layer ( press on cmd + J on MAC or CTRL + J on Windows ), and with this shortcut you will create a new duplicate layer for the blue one. Please note that you need to select the layer first before you use the shortcut.
Then you have to add the same amount of noise to this second layer. The easy way is to press on CMD+F, and this shortcut will add the last filter effect you have used. In our case the same Noise effect will be used to make the layer a little gritty.
Step 6 – Add highlights on the background of your slide show
I will create a new layer on top of all layers ( press on CMD+ALT+SHIFT+N ) and with Brush Tool i will add a white area, in the middle of the slideshow.
Then for this layer i will change the blending mode to Soft Light, and my result will be like in the following image.
Step 7 – Create the header of your portfolio layout
Now we will use Rectangle tool to create the header of the layout. If you apply for a Premium Account you will be able to download all the Gradients we have for premium users. Today we have over 11.000 Photoshop Gradients. I am sure you will be able to design faster with our sets of gradients. Here you can see all the gradients.
Step 8 – Use a simple pattern to create a great header
Now i will create a nice pattern. This pattern was made with a simple round shape, which was sliced in 2. Please note that the following image is zoomed at 500 %. You can go to Edit > Define pattern, then you can close this document.
Then i will create a new layer on top of all layers, and i will make a selection with rectangular Marquee Tool, like in the following image.
Step 9 – Add your own logo on the header of the website
I will make sure i have the new layer selected, and then i will select Paint Bucket Tool, and i will make sure i will use the pattern from above. This is my result so far, after i will add the Graphstock.com logo.
Step 10 – Use our premium layer styles
The layer styles used to create the logos you can find them here: Download pressed layer styles
Step 11 – Create the top navigation menu
On the top right side i will add some icons, and under each icon i will add some lights with brush tool.
Between icons i will add some thin vertical lines. It si very easy to create this types of lines. First you need to create two lines. each line needs to be at 1 pixel width. One line needs to be white, and the other one needs to be black.
Select both lines in your layer palette, and then press on CMD+E ( to merge both layers into a single one )
Both lines needs to be merged, because in your next step you need to delete the top part and the bottom part with Eraser tool ( use a smooth round brush)
After you follow very carefully my steps from above you should have something like me.
Step 12 – Let’s create a curved slide show.
I will use rectangle tool to create a simple shape
Then i will go to Edit >Transform > Warp, and if you change the arc lower settings like mine you will have the same nice rounded effect
For this layer i will add the following layer styles
This is my result so far.
Step 13 – Create a place holder for your slide show images
Now i will create another shape, and this one will be place exactly in the middle of the previous shape. Here you can create the slideshow with jquery, or any other framework you want.
Here you can download the layer styles used to create the shape. Please note that you need to register for a premium account to download this set of layer styles.
Step 14 – Add lights in front of the slide show
One a new layer i will make a horizontal white drawing, with a smooth brush.
Step 15 – Change the blending mode for a more realistic look
Then i will change the blending mode to overlay, and in teh same time i will change the opacity value to 60 %
This slide show is not so realistic without a shadow.
Step 16 – Create the shadow for this layer
To create the shadow for this slide show is very simple. First you need to create a black shape like in the following image.
Now i will go to Filter > Blur > Gaussian blur, and i will choose a random value. I will not show you the value because this is a matter of taste. If you want a darker shadow, then you need to choose a smaller value in the Gaussian blur window.
Then you need to go to Edit > Transform > Warp, and you need to use the same Arc Lower settings as above. this is how my slideshow will look like.
Step 17 – Create slideshow buttons
The next step is to add two buttons.
Step 18 – Add icons on your layout
Now i will create a area where you can outline your best services, or products.
I will use some of the icons from this set: Download 81 vector icons
Step 19 – Create the body of the layout
For this layout i like to keep the things quite simple, because it is very important to outline your best work, and not your current layout. In case you want to use the layout for another types of websites, then you can add there more design elements, but for this type of websites i recommend you to keep the things as simple as you can.
With horizontal type tool i will add some text
Under this area i will add some places where you can display some of your best work.
Step 20 – Display your portfolio on the main page
With Rectangle Tool you need to create a shape like this one
Then i will create a smaller shape, and i will use the same layer styles
Now i will show you how to create a nice shadow for this photo placeholder. With Ellipse Tool, i will make a dark shape, and i will place it under the white place holder.
I will go to Filter > Blur > Gaussian blur, and here one more time i will choose a random value. if you want a darker shadow, then please choose a smaller value.
After you apply the blur filter, you need to choose the eraser tool, and with a smooth round brush delete the middle part of the shadow.
Step 21 – Make room for more portfolio images
Duplicate this layers several times, and place them like in the following image
Step 22 – Create a call to action area
Right under the portfolio area, i will create a call to action area. With this you will allow your users to request a quote for your products or services.
Step 23 – Create the footer of the website
I will create some shapes, and i will use the same layer styles i have used for our slide show.
Step 24 – Add details on your footer
Then i will add here with Horizontal type tools some text, and in the same time i will add also some images, and vector icons
Final result
This is my final result.Click on the following image to see the full size layout
Want to download this PSD Layout ?
Want to download this PSD layout ? Register for a Premium account and you will be able to download all our existing resources, + the one we will release in the next year.
If you are a PremiumUser you can download this PSD layout from here
or you can download it from Buysellgraphics.com
That’s really good design.. is there any theme like this in wordpress with all working features or nearly like this.
nice design, I will sure use some of your ideas
thanks
I love this tut
please tell me where you downloaded that icon set? its sexy as!
I am glad you like my style
very nice and great tutorial, i really like some of the techniques and styles you did
great looking template thanks for all the tips
Try to create a small circle,and then you can use crop tool to select only the bottom part of that circle. After you have the half of the shape, please go to Edit > Define pattern
Choose a name for you pattern and click ok
Please let me know if you still have problems
I keep getting stuck on step 8. When i do the pattern it never comes out like in the picture you have shown. Help please?
There is another way to add a filter
1. Create 2 identical layers with the same layer styles.
2. Select both layers in your layer palette
3. Press on CTRL+E ( or cmd+E )
4. Add any filter you want
on point 3. you will merge both layers into a single one. In this way you preserve the layer styles, and you can add the filter you like.
Please let me know if this works for you
Thanks
We will create a tutorial on how to convert a PSD layout into a wordpress theme.
Hi,
I’ve solved the problem. But I don’t know if it’s the finest way. After I add some layer styles to any layer, it’s not possible to use any filter on this layer. To use a filter, I have to convert the layer into a smart object. Then it works. But I don’t know why. Do haver any idea about this?
Kind regards
I love your design. I was wondering though once you make a website in Photoshop how do you create a wordpress site out of it?
Awesome tutorials with nice web layouts tutorials
Thanks so much for your valuable post
Keep up good work
God bless you
Make sure you have the right layer selected.
If you still have problems, then please create another layer, and fill it with gray. To fill the new layer with a color you can use paint Bucket Tool
Make sure you have this layer selected, and then go to Filter > Noise > Add noise
Try to use a value between 5-10 to see better the noise on your new layer.
I think you try to add noise on a empty layer, and that’s why you don’t see the right result
Please let me know if it works
Thanks
Very nice tutorial! Thanks!
But I’ve one question. In step 5 the filter “add noise” doesn’t add any noise to the layer. What do I wrong?
Good design especially footer, thanks