- May 30, 2011
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
Final Result
This is what we are making.
Preparation
Open a blank PSD file. This is the standard web template size 1000px wide and of course, I am using resolution of 72DPI.
Background
Now we come at Background Layer, so first we apply Vertical Gradient on the background layer.
Background Result
This is what we should get as the result background after applying the gradient.
Menu
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.
Menu Styling
We have the base, now let’s add some styles.
Note:
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.
Adding Gradient.
Menu Bar Final Result
Now we made ourselves a very elegant Navigation bar.
Socialize
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.
Featured Area
After this, we move on to featured area. Select a Rectangle Tool and draw a block. Add a Stroke of 1 px solid black.
Featured Slide
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.
Banner
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.
Banner Result
Now we get an elegant Header and Featured area.
Content Area
Select a Rounded Rectangular Tool and Draw a box with 1 px Stroke value.
Filling Data
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.
Footer
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 🙂
Final Result
We 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.