Portfolio Web Design In Photoshop

This tutorial about Portfolio Web Design.From here,you will improve your skill web design photoshop and hope will give you inspiration for feature.

portfolio design

Step 1  Open up a new document (20X900px). Select your entire canvas (option+a) and fill it with a light cream color (F6F3EA). Then use your rectangular marquee selection tool to create a thin, slightly darker line down the right side of your canvas. This bar should be EFEBE1 in color. Then go to edit>define pattern and define your pattern as ‘creamstripespattern’

web design

Step 2  Now create a new document (960X900px). Create a new layer called ‘background’ and fill your entire canvas with any color you like. Then go to blending options for this layer and apply a pattern overlay effect, selecting your newly created ‘creamstripespattern’.

Step 3  Now paste in a photo of some ripped cardboard. Position the cardboard in the top of your canvas and call this layer ‘header’. I cut out the photo from it’s original white background using the magic wand tool.

web desigb

Step 4 Now go to image>adjustments>desaturate to grayscale your cardboard layer.

web design

Step 5  Now go to blending options for this layer and apply a gradient overlay, ranging between very dark grays. Then reduce this overlay’s opacity to 90% to allow your cardboard to show through a little more. Then set your overlay’s blend mode to ‘multiply’.

web design

Step 6  Now duplicate your header layer and call the duplicate ‘footer’. Go to edit>transform>flip vertical, and then move the flipped cardboard down to the bottom of your canvas. I chose to crop away the bottom of my canvas, making the overall layout less tall. Finally, to make my footer area thinner than my header, I go to edit>transform>scale and then reduce the height of my footer area.

web design

Step 7  Now grab a radial gradient, ranging from white to transparent. Then create a new top layer called ‘header gradient’. Pull out your gradient from the top left of your dark header area.

web design

Step 8  Now reduce your gradient layer’s opacity to 15%. Also part of the gradient is jutting out into your cream area, which you don’t want. Therefore select your header area and click beneath your header area using your magic wand tool (to select the cream area beneath your header). Then return to your gradient layer and hit delete.  This should give you a subtle highlighted effect in the top left part of your header.

web layout

Step 9  Now repeat the same step but in the center of your cream background area. To do this create a layer called ‘background gradient’ below your header/footer layers but above your main cream background layer. Then create a much larger radial white-transparent gradient ranging from the center of your canvas outwards. To measure exactly from the center go to view>rulers to turn on your rulers. To make the effect more subtle reduce this layer’s opacity to around 30%.

web layout

Step 10 Now type out some text for your logo, using the free font Museo. Apply the blending options shown below.


web design


web design

Step 11  Now to make a sleek logo icon. Start by making a rounded rectangle. Now create a smaller rounded rectangle above your main shape. Option+click on your layer in your layers palette to select all of your smaller shape. Then go to select>modify>contract and contract your selection by 4px. Then hit delete. This should leave you with a briefcase shape created by your two shapes.  Finally, right click on your logo font layer and click ‘copy layer styles’. Then right click on your icon layer and click ‘paste layer styles’.

photoshop design

photoshop design

web design

Step 12 Now add some menu text. I went with Arial, at -50 kerning.

web design

Step 13  Now type out some full stop marks multiple times to create dividers between your menu links. Once you’ve typed a line of dots, go to edit>transform>rotate 90 clockwise. Then duplicate this layer each time you want another menu divider.

navigation menu design

Step 14 Add some text to your footer.

web design

Step 15 Paste in a thumbnail of a website that you want to display in your portfolio. Then go to edit>transform>scale and resize it to fit into your cream area. Then go to blending options and apply a stroke effect.

photoshop design

web design

Step 16 Add some text to the left of your thumbnail. Be sure to give plenty of line padding, and keep your text nice and dark to give contrast against your light background.

web design

Step 17 Now create a button using your rounded rectangle shape tool. Then apply the blending options shown below:

And We’re Done!  I really hope that you enjoyed!!

“Everything ok? I really hope this tutorial  that i share for you could help for your first portfolio design in photoshop”

wwb design

About Aoqy

Hye guys,i would like to share about me and hired me if you would to do project with me.Overall,i like everything about design.anything as long i could create for you very soon.I just hope that i could help many people about development about thier company.So on my site is all about guide and how to develop more easier way to let your project much easier.so find out more .Many thanks
This entry was posted in Tutorial and tagged , , , , , . Bookmark the permalink.

13 Responses to Portfolio Web Design In Photoshop

  1. Pingback: AoQy Site | Learn How To Create Web Design Italian Restaurant In Photoshop

  2. Magnificent beat ! I wish to apprentice whilst you amend your website, how can i subscribe for a weblog web site?

    The account aided me a appropriate deal. I have been tiny bit familiar of this
    your broadcast offered vivid clear idea

  3. Johnny Rapid says:

    It’s amazing to go to see this web site and reading the views of all colleagues regarding this article, while I am also keen of getting experience.

    • Aoqy says:

      thanks for free your time here.
      I’m very happu you liked my site.
      Thanks for the great feedback.

      Keep in touch with us

      Many Thanks

  4. I visited several blogs except the audio quality for audio songs current at this website
    is really wonderful.

  5. Hurrah! Finally I got a webpage from where I can really take helpful
    information concerning my study and knowledge.

  6. Wilton says:

    I think this is among the most important information for me.

    And i am glad reading your article. But wanna remark on some general things, The web site style is perfect, the articles is really great : D.
    Good job, cheers

  7. Thanks a bunch for sharing this with all folks you actually
    realize what you are talking about! Bookmarked. Kindly also seek advice from my website =).
    We may have a link alternate arrangement among us

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s