You would know I have regularly started to post tutorials related to web design on every Friday, here’s the dose for today. This is a Photoshop tutorial for creating a Portfolio web design layout. It can be very useful for photographers and designers who need a stylish portfolio.
One thing special in this portfolio is that you can create is very very quickly, it’s really very simple and hence quick to create. As usual, I’ll be making a follow-up tutorial for converting it into HTML CSS. I think this time I’ll convert it in HTML5.
Step 1: Blank Document
A blank document, size of your choice, resolution 72. We do this every time.
Step 2: Gradient for Background
Let’s put a Gradient on Background.
Step 3: Background Pattern
Over that gradient background, I placed a pattern from here on our background.
Step 4: Logo
Step 5: Header Result
Now I added twitter and facebook links on the right end side. I’m not including a step for this thing because you can create it using any simple method of a Brush Stroke or you can use Rounded Rectangle Tool for creating these black boxes. Over them I wrote the text and we got ourselves a minimalistic header.
Step 6: Featured Area Background
I selected Rounded Rectangular Tool and draw this shape for featured area in the center of the page.
Step 7: Content Holder
Select Rounded Rectangular Tool once again and draw this shape over the shape we just created but this time we’ll fill White color in it.
Step 8: Featured Image
Now just place an image over the content holder, then Alt + Click>Hover to Content Holder Layer> Create Clip Mask. As you can see I have drawn Arrows on the both sides of the image. I used Custom Shapes Tool to find the arrows and just placed them over a round circle filled with solid black color and 80% opacity.
Step 9: Navigation Bar
Let’s use Ellipse tool and draw a circle.
Step 10: Nav Bar Button
After this use the Drop Shadow on this shape.
Step 11: Button Styling
Use Gradient on this Shape.
Step 12: Button Final Touches
After Gradient and Drop Shadow time for a little Stroke.
Step 13: Menu Final Result
There you go, a beautiful stylish navigation bar.
Step 14: Footer Notice
Portfolio sites don’t need big footers, I selected an image from here and added some text.
Tell me what do you think of it and please don’t forget to make your requests and guide me for my forthcoming tutorials in the comments section.