Time for a portfolio web template tutorial. This kind of web designs are suitable for personal websites of Photographers, Graphic Designers, Artists and such individuals running a small business. This is a super-easy well defined tutorial so even if you are not a pro, you should give it a glance.
As usual, we are making this web design in Adobe Photoshop
and will publish the downloadable PSD file in two days. So stay updated with the latest postings on Designzzz by Subscribing to our RSS or Following us on Twitter.
You can download the PSD of this layout here
This is what we are making.
Open a blank PSD file. This is the standard web template size 1000px wide and of course, I am using resolution of 72DPI.
Now we come at Background Layer, so first we apply Vertical Gradient on the background layer.
This is what we should get as the result background after applying the gradient.
After this we move on to the Navigation Bar, so first thing first, we chose the Rounded Rectangle Tool and create a base for the bar.
We have the base, now let’s add some styles.
Below we are adding an Inner Shadow, a Stroke and a Gradient Fill. The same styles containing the same values will be repeated wherever we need a dark background in the design.
Add Gradient in the navigation bar.
also give it a Solid Black Stroke.
Menu Bar Result
After applying those effects, this is what we should get.
Menu Button Hover
In navigation bar one more element to include is hover effect. We select a Rounded rectangle tool and draw a box. You can fill it using the same gradient we filled in the background.
Menu Bar Final Result
Now we made ourselves a very elegant Navigation bar.
We move to next step of adding Social Media Icons. . I selected my favorite Rounded Rectangle Tool again for making space for the icons.
Social Icons BG
Added some Inner Shadow and Stroke in this box.
Final Header Result
Cutting the long story short, this is the header we get in the end. A pretty navigation bar, social media icons and a space of a your beautiful logo. The design is elegant, fast loading and minimal.
After this, we move on to featured area. Select a Rectangle Tool and draw a block. Add a Stroke of 1 px solid black.
I added an image in this area and also an overlaying layer for the title and/or description. Opacity of this layer is 50% and it is filled with solid black.
Featured Area Result
Made a few boxes on the right side and filled them using the same styles we used for the Nav-Bar BG. The text is plain, no effects and solid white color.
Down to the featured area we draw a banner. This banner could hold anything, from an advertisement to a an update of your twitter status. I’m putting a “hire me” sign here. Fill this bar with Gradient. You already know the values.
Now we get an elegant Header and Featured area.
Select a Rounded Rectangular Tool and Draw a box with 1 px Stroke value.
In this box we are now adding thumbnails of the Artist’s works. Of course this area will be adjusted according the needs.
Content Area Result
Now we get a simple content area, added some description in the content area and this content is the heart and soul of a Portfolio of any artist. As you can see, we did do anything too flashy, its just the color scheme and the method of working which makes this style look classy. I also added a testimonial below the thumbs, but that’s optional.
Almost everything is done. So let’s also complete the footer. Choose a Rounded Rectangular Tool add same Gradient and stroke. Just type “Copyrighted Material” over it and the footer is ready 🙂