Feb 22nd

Clean and Minimalistic Portfolio Layout in Photoshop

Clean and Minimalistic Portfolio Layout in Photoshop

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Resource List

Lets get started…

1. The first thing we want to do is create a new document with the dimensions of 1020×1180.

2. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

3. Next we want to add some Blending options to our newly created layer. To do so, right click your layer in the layers palette and choose blending options from the drop down menu. Insert the following:

4. Our header will be fairly simple and basic to go along with the rest of the theme. I chose to use the font Chuck from our resource list at the top for our logo, and set my foreground to #4A4A4A.

5. The search field will be located on the right side of our header. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF. Then add some light grey text and an icon from the Nixus Icon Pack in a similar fashion.

6. On your White Rectangle layer, add the following blending options to make your search field stand out from the header:

7. Time to move onto our horizontal navigational menu. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

8. Next add the following blending options to your layer:

9. We then want to add a layer mask of an arrow to symbolize an active link. Using your Polygonal Lasso Tool, create a triangle similar to the following. Then go to EDIT>SELECT>INVERSE. Then choose the layer mask icon at the bottom of your layers palette.

10. The final step for our navigation is to add some links. Using the color white for your font, add some links in the following manner. Then open up the Nixus Icon Pack and add some appropriate icons next to each link, and that is it for our header.

11. Lets go ahead and get started on our featured area. This will hold our slider box displaying our products. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

12. Add the following blending options to your layer:

13. With this layer selected, hit Command+J to duplicate your layer. Then create a blank layer under your duplicated layer and then select your duplicated layer again. Right click your layer and choose “Merge Down”. This will flatten our copied layer.

14. While your duplicated background layer is still selected, go to Filter>Noise>Add Noise and insert the following options in the dialogue box:

15. Lower this layers opacity to about 8%, and then you’ll have something that looks like the following:

16. We then want to move onto our Slider Box. Using your Rectangle Marquee Tool, create a Rectangle that looks similar to the following and fill it with #FFFFFF.

17. Add the following blending options to your layer.

18. Using your Rectangle Marquee Tool, make a rectangle similar to the following and then fill it with black. Then use your polygonal lasso tool to add a little triangular selection to the top of your box and then fill it with black on the same layer:

19. Now insert the following blending options onto its layer:

20. The music Icon used is from the Mono Icon Pack (find it in the resource list), and I set its blending mode to Overlay, and then lowered the opacity to around 40%. Then just add some text and a thumbnail in a similar way to the following.

21. We want to show what our non-active sliders will look like. Using your Rectangle Marquee tool, make a Rectangle similar to the following and fill it with #000000.

22. Insert the following blending options onto its layer:

23. Add some text to describe what your slider represents, and you’ll have something like this after you do this a few times.

24. Next we want to create the little ‘wave’ that is at the bottom of our featured box. Using your Pen Tool with it set to Shape (not path), create a shape similar to the following.

25. Insert the following blending options onto your shapes layer:

26. Your completed featured area will look like this:

27. Our content area is going to be split into two different background colors. The top color is #16273E, and the lower color is #D0E0F3. Use your Rectangle Marquee Tool to make these rectangles, and then fill them with the appropriate color on their own layers.

28. We want to add some noise to each section to give it a little texture like we did for the background of our featured area. Duplicate each color layer for your content areas background, and then repeat step 14 with them selected. On your dark blue layer, lower it’s opacity to about 8%. For the light blue layer, lower it to around 6%. You will have something that looks like this:

29. The client login box is what we will work on next. Using your Rounded Rectangle Tool with a radius of 10px, and a foreground of #D0E0F3, make a rectangle like the following:

30. Insert the following blending options onto your rounded rectangles layer:

31. Using your text tool add a title for your login box with the color #16273E, and then an icon from the Nixus Icon Pack. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF.

32. Lower your white rectangles layer opacity to 30%, and then insert the following blending options:

33. Using your Rounded Rectangle Tool again, we want to make the input fields for the login box. Make a rectangle that looks similar to the following:

34. Insert the following blending options onto your Rounded Rectangle Layer:

35. Add some text and an icon from the Mono Icon pack and you’ll have something that looks like the following:

36. The final step to our Client Login box is to add a login button. Using your Rounded Rectangle Tool again, make a rectangle similar to the following:

37. Now insert the following blending options onto its layer:

38. All that is left is to add some text and an icon from your Nixus Icon pack and you’ll have something like this. I also copied the divider we created under the “Client Login” text and placed it under our login button.

39. The rest of the content area is all about text and icon placement. I arranged it in the following way:

40. The last thing we need to create is our footer. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #000000.

41. Using your Polygonal Lasso Tool, your going to want to make a ridged selection similar to the following

and then choose Edit>Clear. When your finished clearing it, it will look something like this:

42. Insert the following blending options onto your footer layer:

43. Add some text to your footer, and then your final result will look something like the following:

Sign up for testking to learn photoshop and pass ccna and ccnp exam using expert resources.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts37 Comments

  • Imon February 22nd, 2010 at 12:47 am

    Fantastic!
    great work man

  • melek February 22nd, 2010 at 3:56 pm

    yeaaaaaah, great tut, thx

  • Tirath February 24th, 2010 at 9:18 am

    Awesome tutorial with nice weblayout with nice color combo
    Thanks so much for posting & sharing it
    Keep up good work man
    God Bless you :-)

  • Reglan Lawsuit February 24th, 2010 at 5:30 pm

    Excellent work! I like this one a lot.

  • clippingimages June 8th, 2010 at 12:00 am

    Fantastic great man:)

  • Rokaiya Yeasmin Munni July 30th, 2010 at 12:34 am

    I like to create any design in photoshop. For that’s reason this tutorial is very interesting to me.

  • Syscl September 23rd, 2010 at 2:31 am

    awesome work! thank$$$ for sharing to us :)

  • Free Business Cards December 14th, 2010 at 8:56 am

    Seriously, you put in a lot of effort in creating this tutorial. You made it too easy for us and I’m stuck at the simplest step (creating that search box!)

  • Vitaly January 10th, 2011 at 7:17 pm

    It’s perfect. Thanks!

  • free business cards May 12th, 2011 at 12:42 am

    Thanks for the info guys – much appreciated

  • Maxine Plumb July 3rd, 2011 at 2:45 am

    I use Tumblr as a middle-man separating the micro-blogging on Jaiku and Twitter and the weblogs (wherever I appreciate WP too). Tumblr is perfect as most sort of notebook but I wouldn’t use it as the solely way to communicate my personal brand.

  • mobil bekas September 15th, 2011 at 12:12 pm

    Very nice result. Keep up the good work!

  • Daniz usman September 22nd, 2011 at 12:50 pm

    Nice dude.i like your tutorial Matthew, thank you for sharing it.you explain things very well.thnxxxxxxxx

  • Packers Movers October 20th, 2011 at 9:09 am

    Nice Tutorial… Thank you .. !!

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 2:30 am

    Very good written information. It will be supportive to everyone who usess it, including yours truly . Keep up the good work – i will definitely read more posts.

  • tardive dyskinesia October 26th, 2011 at 3:40 pm

    Great article thanks a ton for posting! You make the best tutorials.

  • Injury attorneys in Long Beach November 1st, 2011 at 11:37 am

    I really can’t thank you enough! I got lately into photoshop and i was in need for some good tutorials. Thanks!

  • Aisle Containment January 6th, 2012 at 4:02 am

    Thank you.. This made my day…. Sharing it…

  • Web Hosting February 13th, 2012 at 6:49 am

    clean and neat design! brilliant :)

  • Taupo Accommodation February 28th, 2012 at 1:11 am

    Thanks for the share dude!

  • Building Inspections Auckland March 7th, 2012 at 9:10 pm

    Good job, i really like it a lot!

  • Clipping Path March 6th, 2013 at 10:41 pm

    Some of them are really beautiful. Thank You!

  • Nitai Roy March 26th, 2013 at 7:57 am

    Photoshop is a software where you can give your theme and implement in a perfect eye attract design. I love for working with Adobe Photoshop and this is really a very good tutorial.

    I do believe it is help me a lot.

  • swati April 15th, 2013 at 12:21 pm

    great example, its help me a lot

  • clipping path services May 11th, 2013 at 11:37 pm

    Great, excellent tutorial. So many layout will help to learn.
    Thanks for this excellent post.

  • clipping path services May 11th, 2013 at 11:39 pm

    Great, excellent tutorial. So many layout will help to learn.
    Thanks for excellent post.

  • Wheerureaub July 6th, 2013 at 7:12 am

    Boomers balk on list

    Child boomer Judann Pollack keeps having flashbacks on the days whenever she’d roll upon the college grounds in your girlfriend 1967 Uno Beetle. Now the 51yearold handling editor of recent Yorkbased Promoting Age magazine likes to go partially nude in her completely new convertible Annoy. So it’s understandable the long-lasting car had been top of head when Pollack has been asked to put together a summary of the actual 15 biggest child boomer brand names.http://www.vivienneoutletshop.com/ ヴィヴィアンウエストウッド バッグ In fact, who doesn’t love a vintage that lived through the ’60s nevertheless roams typically the streets decades in the future with fewer creases and a bigger look? However Pepsi rather then Softdrink? Noxzema along with L’eggs pantyhose? What planet did Pollack become adults upon? Their email list has made some hot debate, ” states that Pollack, admitting she’s been overwhelmed with addendums from boomers all over the place, as well as a rebuttal coming from a grandparents class.テンデンス 時計 “Everybody’s a specialist because we’ve in this get older. http://www.tendenceuotti.com/ These kind of brands have progressed, just as we are. “The experienced person watcher of precisely new and mad in the marketing industry was ready for boomer favs with lower limbs, and so Levis were an all-natural. The particular jeans reflect all of our boomandbust means, having produced millions around the backsides regarding Hollywood rebels for example James Dean in the fifties then brushing hand with bankruptcy from the 1990s.

    Pollack’s collection which ran now in Ad Age but has been compiled to the Tom Brokaw movie Boomer$ airing Thurs night in CNBC means to take with you us back to a period and place, much like the Beatles in addition to Saturday Night Are living. “We’re nevertheless watching (comedian Tinaja Fey do) Darlene Palin, micron she says in a telephone interview.ケイトスペード バッグ 新作 “And Typically the Beatles are long-lasting, they’re not going to escape.http://www.katespadesuki.com/ more|much more|a lot more|far more|considerably more} Hell’s Angels than Homer Simpson.プラダ バッグ 新作 “Road hog HarleyDavidson is actually high on record although on-line commenters were rapid to point out that it can be far more Hell’s Angels in comparison with Homer Simpson.http://www.vippradatokka.com/“You satisfy the nicest individuals on a Honda, ” one particular commenter recalled with the 1963 marketing campaign for the “kinder as well as gentler” Japanese cycle, which evolved into the preferred choice for youthful boomers and caught up as they purchased their first autos. ガガミラノ On the subject of littlekid gadgets, Pollack tips in favour on the 65yearold Slinky, yet sounds somewhat regretful that Barbie and Hot Wheels didn’t make the reduce. “It’s a short collection, therefore debatable.http://www.yoigagawatchjapan.com/ Everybody may have their own personal selections. “Many commenters do, raising smash family brands like McDonald’s and also Disney.

    And her personal choice of Noxzema got a few knocks: “I can certainly still smell the item, micron Pollack said of the bluejar face cream. If Pollack has one particular regret, really including Frye Footwear, but the woman sticks by Coach handbags outlet, “the logo you’d arrived” in the nineteen-eighties. Absolut Voddie may be far more a reflection in the Mad Men days of promoting, but Pepsi is more of the boomer manufacturer than Pepsi, the girl contends, mainly because “for months inside the ’70s and also the ’80s many people just blew Cola away in regards to the particular coolness issue. They had big names (in their ads) like Michael jordan Jackson, Donna it doesn’t obtain any larger than which. ケイトスペード 財布 “How really does teen sensation The facebook one of the greatest target market divides come up with a child boomer checklist? “Maybe it’s not 100 per cent there but, http://www.yuuguukatespadejp.com/ yet boomers are asking for that in the big method, ” she says, showing that that individuals over fityfive are posting their particular profiles online throughout record quantities, which makes them the particular fastestgrowing group of Facebook people.

  • hermes pas cher July 9th, 2013 at 11:01 am

    L’anglais est la Hermes, des Hermès fran?ais, les fans très Duoaimashi confondent souvent leur prononciation, la prononciation correcte est: [rms] (ici fran?ais phonétique), “Love and Max”, prononcé similaire à la première une lettre H ne se prononce pas, et r cheveux h (boisson) ton.
    hermes pas cher http://sacamainhermes.164square.com

  • burberry homme pas cher July 13th, 2013 at 7:34 am

    Ralph – smart de Lauren, c’est que nous allons le monde convaincu: pour acheter lauren marque rêve ronde, puis double peine.
    burberry homme pas cher http://burberryenfantpascher.bemecode.com

  • gafas ray ban baratas August 6th, 2013 at 6:47 am

    bares y comercios, y en el extremo junto a la Farola se construirá un ralph lauren espana menos discutibles, pero han permitido que ralph lauren mujer ,ralph lauren hombre será ocupado por venta ralph lauren un museo de escultura al aire libre y un acuario.Según reconoci ralph lauren ninos ,ralph lauren barata ,venta ralph lauren gimnasio.
    gafas ray ban baratas http://gafasisolrayban.com

  • 財布 新作 August 16th, 2013 at 5:26 am

    ブランド コピー

  • レザー 財布 September 4th, 2013 at 9:47 pm

    ナイキ フリー レザー 財布 http://www.bagsinstructi.com/

  • Meer Anis December 25th, 2013 at 11:21 pm

    The thing is now clear to me and hope can do that. It’s very kind of you.

  • shabnam May 3rd, 2014 at 2:54 am

    Thank you for taking the time to publish this information very useful!I’m still waiting for some interesting thoughts from your side in your next post thanks

  • Clipping Path Services July 15th, 2014 at 4:59 am

    this is amazing tutorial and a very helpful for beginners. Thanks for sharing it with us.

  • Image Processing September 24th, 2014 at 5:41 am

    Lots of Photoshop tutorials I have read for creating the portfolio design in photoshop. I am really impressed to this tutorial. I just want to include one thing “Without excercise, practise and experience, the talent is of no use” and You did it. Thank you

Leave Your Response