PSDFan Extra

Design a Sleek Textured Blue Portfolio

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (1080X1200px).

We’re going to use guides in order to set out our layout. In order to set a guide, go to view>new guide and then specify either horizontal or vertical, as well as a distance for your guide. The default guide setting is in cm, but you can simply type in px.

To start with we’re going to set out our main content area’s width, and so set vertical guides at 90px and 990px. This will mean that we have a 900px wide content area, which is 90px away from each side of your canvas.

Step 2

Now we’re going to lay out the rest of our layout’s guides. These will all be horizontal guides and need to use the following measures:

20px
170px
200px
650px
1000px
1165px

You can see the final canvas with all guides visible below:

Step 3

Now we can start building up the design! Create a new layer called ‘gray background’. Select your entire canvas and fill it with B2B2B2. Then select top half of your canvas (from the 650px guide upwards). Create a new layer called ‘blue header’ and fill your selection with 0BA5D1.

You can see the basic layout below:

Step 4

Create a new layer called ‘main content area’. Then use your shape tool to create a rounded rectangle shape, with background: EFEFEF and corner radius: 10px.

Create this rounded rectangle so that the bottom starts from the 1000px guide, going upwards, and that the top of the shape disappears beyond the top of your canvas.

Step 5

Now apply the following blending options to your ‘main content area’ layer:

Drop Shadow – 25% opacity, distance 3, size 0, color: black

Outer Glow – Blend Mode: Normal, Opacity: 5, Spread: 40, Size: 30, Color: black

Inner Glow: Blend Mode: Normal, Opacity: 5%, Choke: 40%, Size: 30px, Color: black

Stroke: Size: 1px, Opacity: 60%, Color: White

You can view the results of these steps below:

Step 6

We’ll continue building up the layout now.

Create a new layer called ‘top bar’ and use your marquee selection tool to select from the 20px guide upwards. Fill this selection with darker blue than your blue header: 007BA4.

Create a new layer called ‘blue header cover’ and select over the remaining main content area, that is covering up the blue header area. (See below image for what I mean). Fill this selection with the same blue as your original header area.

Now create a new layer called ‘footer’. Select from the bottom guide downwards, and fill this with a darker gray than your main gray background. I used: 8F8F8F.

I also reduced the opacity of the ‘stroke’ effect on my rounded rectangle layer to 20%.

You can see the updated layout below:

Step 7

Create a new layer called ‘header lights’. Then grab a large, soft paintbrush and randomly apply markings over your blue header area. The idea is to create random highlight ‘light spots’ to break up your blue surface a bit. When you’re done, changing this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 40%.

Step 8

Create a new layer called ‘header shadows’. Use the same technique but using black paintbrush markings. Use layer mode: overlay, and layer opacity: 30%.

Step 9

Download this great Old Paper Texture, courtesy of Bittbox.com.

Resize it to 1080px wide, and the paste it onto a new layer in your layout document called ‘paper texture’. Then go to image>adjustments>desaturate to grayscale the texture. Change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 50%. Finally, go to filter>sharpen>sharpen more just to really bring out the detail of the texture:

Step 10

The ‘header highlights’ and ‘header shadows’ layers are looking a bit too obvious, we can’t to blend them more subtly into their blue background. To do this, select each layer and then go to filter>blur>motion blur. Apply a motion blur at 25 degree angle, and 150px strength.


Step 11

Now I want to start adding some cool details to my layout. The stroke from my rounded rectangle shape is providing a nice subtle white border for my inner blue header area. However, I want to add a messier border effect.

I create a new layer called ‘white border left’. Make sure that this layer is below your paper texture layer, but above all other layers (so it should be your second to top layer). I select a 1px white paintbrush, hardness: 100% and draw a really wavy line going over my current straight border line.

Now go to edit>transform>free transform. Drag in the sides of your wavy line shape, until the line becomes thin, yet still a bit messy. Doing this will make your line fainter, as you’re making it thinner than it started off. To make it a little bolder duplicate this layer, and merge the duplicate down with the original wavy line.

Step 12

Duplicate your wavy line layer and move the duplicate to cover the right side of your inner blue header area. Then use the same technique to draw in wavy dividing lines for the dark blue top bar area, as well as darker wavy lines for your main content area.

I draw out sketchy lines dividing each section of the layout, duplicating some of the lines in order to save myself time.

Step 13

Download this free stock image of clouds.

Paste a section of it into your document. Make sure that this layer is beneath your paper texture layer.

Change this layer’s blend mode to ‘multiply’ and reduce it’s opacity to 50%. Then use a large, soft eraser brush (100%) opacity to erase away parts of the image. You want to leave a subtle, cloud heading in your blue header section.

Step 14

Using your guides, identify the area meant for your menu (it should be between the 170px-200px horizontal guides). Use your type tool to type out your menu links. I used 14pt Arial (-50 kerning), bold, for my text. Make sure that your menu text layer if ABOVE your paper texture layer.

Create a black rounded rectangle (5px radius) behind the word ‘home’, on a layer beneath your text layer. Reduce this shapes layer to 25% to make it more subtle. This provides a hover effect for your menu item.

Step 15

Add some further header content, by including a logo and design related quote to the top of your header.

Step 16

Now add in some more content to the bottom of your layout. I used Arial as the font, and used icons from this fantastic free set, courtesy of
Tutorial9:

30 Web Icons – Hand-drawn Icon Pack

The bottom area of the layout would be used for client logos, but I’ve simply used low opacity icons:

Step 17

Now paste in an example of your work into the center of your blue area.

Step 18

Now create a selection above your work image. Create a black to transparent gradient going down over the image. For the areas of the selection that jut out to the sides of the image, use an eraser brush to fade these into the background. Finally, reduce this layer’s opacity to 35%.

Then duplicate your gradient layer, and go to edit>transform>flip vertical. Move the flipped gradient to overlap the bottom of your work image. The resulting effect should be that your work image appears to be contained within your blue area, and slightly sunken.

Step 19

We’re going to create buttons that will allow the user to scroll through featured examples of the designers work.

Start by using your circular marquee tool to create a circle selection that fits over the left half of your featured work image. Hold shift as you create your selection in order to create a perfect circle. Then fill your selection with dark gray, and go to select>modify>contract. Contract your selection by 2px, and then fill your inner selection with a light gray gradient. You can see the result of this below:

Step 20

Now create a dark gray arrow pointing left. Merge this new shape layer down onto your button layer. Then apply the layer blending options shown below:

Drop Shadow: Opacity: 30%, Distance: 2px, Size: 5px.

Inner Shadow: Opacity: 30%, Distance: 2px, Size: 5px

Here is the result:

Step 21

Now duplicate this layer, and go to edit>transform>flip horizontal. Move the flipped button to cover the adjacent side of the featured image.

Then create a new layer called ‘button shadows’. Make sure that this layer is BELOW your work example layer. Use a low opacity, soft black paintbrush to brush in shadows, either side of your arrow buttons. This should give your buttons more depth, and make them stand out.

Step 22

Finally, create a new layer, just above your blue header area layer, called shadows/highlights. Use a large, soft brush to add in additional shadows and highlights where you see fit. This should enhance your overall layout, making it bolder with more definition.

And We’re Done!

I really hope that you enjoyed this tutorial and would love to hear your feedback!

If you want to view the full sized final image, then click here:

FULL SIZED FINAL IMAGE.

Download Source File for this Tutorial


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

38 Comments:

  1. Eric Shafer says:

    Hey Tom,

    It’s a pretty nice tutorial, very detailed so the beginners can follow. The bottom part seems like it could be fleshed out a bit better, but the top and header is brilliant. Keep it up!

  2. thats a pretty cool tutorial. also teaches about making textures easily in it.

  3. Tom says:

    Thanks for the constructive comments Eric. It’s been a while since I’ve written a tutorial, and I’m looking to really get back into doing more of them. I’ll be doing several more web design tutorials in the near future, so will definitely try to make the bottom section more detailed for the next one :) .

  4. Tom says:

    Online Photoshop: Thanks! The idea was really to show how to integrate textures well into a web design.

  5. luheou says:

    I like the wavy line, looks very cool! many thanks to share this article. :)

  6. This is a really cool, really simple and easy to follow, i like the icons at the bottom at the page, the sketchy effect goes hand in hand with the paper texture.

  7. Hermitbiker says:

    …. another cool tutorial…. this time it’s showcased at “PSDFan”…. and sent to me by Brukhar !! Design a Sleek Textured Blue Portfolio…. I like the “non-cluttered” look…. but really it’s a great tutorial for getting a “basic textured blue look” for all of us basic beginner blog hopefuls !!

  8. Tom says:

    Thanks for the great comments guys! I’m glad that you enjoyed the tutorial and learning this sketchy technique.

  9. Ted Rex says:

    Nice tutorial; clearly explained with great step-by-step images to show the process.

    I made this one of my three links for the day on my daily “Design Thought for the Day” blog:
    http://designthoughtfortheday.blogspot.com/2010/01/01-19-kill-your-web-business-nice.html

    All the best, Ted

  10. The layout is really awesome.
    I like the design. Good work!

  11. Thomas says:

    Woow, Great tutorial, I really love the final result.

  12. final result looks great! Keep up the good work.

  13. deeps says:

    hey, i am new to photoshop,i really like the whole thing,u have given in steps by steps.thank a lot .i want to make my webite in photoshop but am confused with slicing can u help

  14. Hi Tom, great tutorial, a whole bunch of excellent techniques and I love the sketchy look and the use of textures to add depth.

  15. Tom says:

    Thanks for the comments everyone. I’ll definitely be writing another web design tutorial soon!

  16. Jose says:

    Can anyone recommend a good tutorial on how to import this into Dreamweaver? With such a complicated background, I’m having an issue figuring out what to slice up. Do I accept a basic pattern block and run with it?

    I’m extremely new to this and am trying to figure my way around Photoshop.

    • Tom says:

      Hey Jose. For coding, I would recommend fading out the texture in the background at it’s edges, and then just use plain colors for your background. That way you can just have a fixed central background for your texture, but subtly blend it into solid colors either side.

  17. jose says:

    Thank you Tom!

  18. Mason says:

    is step 6 a bit off? the image you have there shows the “main content table” shadows through the “header cover” but there is no explanation how you do this. but love it so far lol :)

  19. kang says:

    Cool!!
    I like its.

  20. Davor says:

    Very nice one, I like the approach!

  21. oyunlar1 says:

    hi tom. thanks for this article. i liked texture effect and clouds..
    looking for next tutorial.

  22. day says:

    Great job!
    Thanks, this is very helpfull tuts for me as a beginner in design. Nice cool blue website! I love it!

  23. Umesh Katkar says:

    nice one……thanks for to share this one

  24. Xenadrine says:

    Cool! i try to create this theme. andl got many technic to make website.
    THX :TOM P

  25. JB says:

    I will be using this technique in my site. Really cool!

  26. organizasyon says:

    thanks for this article. this is great !

  27. Gaurav says:

    i liked it very much gr8 tut sir :)

  28. hi thanks for the great tutorial ive learnt a lot from doing it, Is there a way for me to use this new template in dreamweaver??

  29. nitos says:

    Hi Tom, I really like this design, although I think the previous and next button could be more elegant, or at least it would be better with a more elegant look.

    Also the bottom part is left behind, but I love the header part, good job.

    :D

    • Tom says:

      Thanks a lot nitos, good to hear from you again :) . I agree about the previous/next buttons, they would definitely look better more sketchy. I appreciate the constructive feedback though.

  30. MarkT says:

    Tom, this is just brilliant; my favourite design of yours I’ve seen so far. I wouldn’t change a thing, in fact, I think you should make the fanextra site look like this!

    Love the sketchy icons at the bottom and the tip on getting the roughed-up borders is genius (and something I’ve been looking to do myself but didn’t know how before). Thanks for showing us. :D

    • Tom says:

      Thanks so much Mark! :) I think it may be a little too arty for the FanExtra network, as we need to make our content not our backgrounds/design the most prominent thing. I may integrate this style for my personal portfolio though. I’m glad you found the roughed-up borders technique useful, it’s a technique I discovered a couple of years back, and it’s always been really useful.

  31. Matt says:

    Stunning no less, Tom. Incredibly beautiful and you make the design process so easy for us to understand. I really appreciate it.

  32. Balloon says:

    I like the edges on this one, good tutorial!

  33. Christian says:

    Muchisimas gracias!!

    Thanks a lot!!

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY