How to Make a Vibrant Portfolio Web Design in Photoshop

Preview

This is the web layout that we are going to create. Click on the image below to see the full size version.

Resources

Step 1: Understanding the grid

Download the 960 Grid and unzip the archive. Inside the Photoshop template folder, you will find three .PSD files. Each one has a grid with certain number of columns (12, 16, and 24). For this layout, we will use the 16-column grid. So, open the file 960_grid_16_col.psd file in Photoshop. As you can see, you have 16 red (almost pinkish) vertical stripes inside your document. We will create the layout within these red vertical stripes.

In the Layers Panel you have two groups: “16 Col Grid” (which contains all the red vertical stripes) and “Layer 1” (we don’t need this layer, so you can delete it).

To show or hide the grid, click on the eye icon of the “16 Col Grid” group in the Layers Panel to toggle its visibility. All the elements of the layout should be created beneath this group, so it has to be on top all the time. The .PSD file contains guidelines as well, which will be very helpful. To show or hide the guidelines go to View > Show > Guides (or press Ctrl/Cmd + ;).

This is pretty much everything you need to know about the grid.

Before we begin, make sure that your Info Panel is opened (Window > Info). During the tutorial, I will ask you to create shapes with a certain size and you will be able to see the exact width and height of your shapes in the Info panel while you are creating them.

Step 2: Modifying the size of the canvas

To give us more room height-wise, we need to increase the size of our canvas. Go to Image > Canvas Size and change the height to 1920px.

Step 3: Creating the layout’s background

Select the Rectangle Tool (U) and create a white rectangle with the size 940px by 1920px. Make sure that Photoshop’s Guides are activated (Ctrl/Cmd + 😉 so that you can create the rectangle easily. Name this layer “bg“, double-click on it to open the Layer Style window and use the settings from the following image to apply an Outer Glow and Stroke layer style.

Step 4: Creating the header

Create a new group and name it “header“. Then select the Rectangle Tool (U) and create a rectangle using the color #aedee1. Name this layer “header bg“, double-click on it, and use the settings from the following image for a Gradient Overlay layer style.

Step 5: Site name letterpress type treatment

Select the Type Tool (T) and write the name of your layout using the color #93b9bb. I have used the font Museo 700 for the word “creative” and Museo 300 for “folio”.

Now we will create a letterpress type treatment using Photoshop’s layer styles. Double-click on your text layer to open the Layer Style window and use the settings from the following image for Inner Shadow, Inner Glow, and Bevel and Emboss layer styles. By the way, if you want a more detailed tutorial on this technique, check out Jacob’s Inset Typography tutorial on Six Revisions (which uses a different technique).

Step 6: Creating a small cloud in the header

Create a new group and name it “cloud“.

Then select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a few white circles with different sizes.

Then arrange all these circles using the Move Tool (V) to form a cloud. Set the opacity of the “cloud” group to 80%.

Step 7: Creating a “hire me” banner

Now we are going to create a small piece of paper and write a call-to-action text over it that will attract possible clients. A strong call to action is very important for a portfolio website because it encourages visitors who might be looking to hire a designer to get in touch with the website’s owner.

Create a new group and name it “hire me“. Then select the Rectangle Tool (U) and create a small rectangle in the right side of the header using the color #f7efda.

Name this layer “paper“, double-click on it to open the Layer Style window, and use the settings from the following image.

Step 8: Bending a corner of the paper

Now I will show you how to create a bended corner effect in Photoshop. First, click on the vector mask of the “paper” layer to make it active.

Then select the Pen Tool (P), make sure that the “Shape layers” button is activated and select the Subtract from shape area button from the Options bar.

Now use the Pen Tool (P) to create a triangle over the upper right corner of the yellow rectangle as you see in the following image.

Step 9: Apply a Gradient Overlay on the bended paper

Create a new layer and use the Pen Tool (P) to create a triangle like the one you see in the following image using the color #f1e9d3.

Name this layer “corner“, double-click on it and use the settings from the following image for Gradient Overlay.

Step 10: Adding shadow to the paper corner

Create a new layer beneath the “corner” layer.

Select the Pen Tool (P) and create a black triangle like the one from the following image.

Right-click on the new layer and select Convert to Smart Object.

Then go to Filter > Blur > Gaussian Blur and use a 2px radius.

Add a mask to this layer (Layer > Layer Mask > Reveal All), select a small black brush tip (B) and paint with it over the shadow from the right side of the paper corner to erase it.

Name this layer “shadow” and set its opacity to 15%.

Step 11: Adding noise to the paper

Now we are going to add a little bit of noise to the paper to make it look more realistic. Ctrl/Cmd-click on the vector mask of the “paper” layer to make a selection of the paper. Create a new layer above all the other ones from this group and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).

Convert this layer into a smart object, then go to Filter > Noise > Add Noise and use the settings from the following image.

Name this layer “noise” and set its blending mode to Multiply and layer opacity to 15%.

In the following steps, we will add noise to other elements of the layout as well and I will refer to this step, so you might want to keep in mind this method.

Step 12: Adding a text over the paper

Now it’s time to add your call-to-action text. Select the Horizontal Type Tool (T) and write a text over the paper using the color #514c3f and the font Museo.

Step 13: Adding a paper airplane

Download a paper airplane image from the Internet and open it in Photoshop. Then use the Move Tool (V) to move the airplane into your document. The image I used is from GraphicRiver and it costs $3 (or $1 if you have a prepaid deposit).

Convert this layer into a smart object. Then go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key to maintain the proportions, change the size of the paper airplane, and rotate it. My airplane is pointing to the call-to-action banner to make it even more noticeable.

Go to Filter > Noise > Add Noise and use the settings from the following image.

Then name this layer “paper airplane“, double-click on it to open the Layer Style window and use the settings from the image below for a Drop Shadow layer style.

Step 14: Creating a dashed line behind the airplane

I used Adobe Illustrator (yeah, I cheated just a tad bit, but you can use Photoshop for this too – it just won’t be as easy) to create a dashed line behind the plane. If you don’t have Illustrator, you can download and use my dashed line PNG image called dashed_line.png (tips for Windows users: right-click on one of the links and select Save As). Open it in Photoshop and position it on your canvas using the Move Tool (V).

Optional: for Adobe Illustrator users

If you do have Adobe Illustrator and know how to use it, you can follow the next steps. Open a new document (Ctrl/Cmd + N) and use the Rectangle Tool (M) to create a big gray rectangle. Then select the Pen Tool (P) and create a path like the one from the following image. Use a 1pt white (#ffffff) stroke and no fill. Then open the Stroke Panel (Window > Stroke) and use the settings from the following image.

Select your dashed line using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop, and paste it as a smart object (Ctrl/Cmd + V).

Name this layer “line” and put it beneath the “paper airplane” layer. Use Free Transform (Ctrl/Cmd + T) to rotate this line the way you want.

Step 15: Creating the navigation bar

Create a new group beneath the “header” group and name it “navigation bar“.

Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 40px and the color #c0e332. Name this layer “navigation bar bg“, double-click on it and use the settings from the following image.

Step 16: Make 1px lines for detail

Select the Line Tool (U), set the weight to 1px and create a horizontal line at the top of the navigation bar using the color #7e961d. Name this layer “1px dark line“.

Hit Ctrl/Cmd + J to duplicate this layer and move the new line at the bottom of the navigation bar.

Step 17: Give the 1px lines some depth

Create a new line with the weight of 1px using the Line Tool (U) and the color #d8fd42.

Name this layer “1px light line” and put it beneath the first dark line.

Duplicate this layer (Ctrl/Cmd + J) and put the new one above the second dark line.

Step 18: Type out the navigation menu items

Select the Type Tool (T) and write the name for your navigation menu items. Use the font Museo 700 and the color #336600.

Step 19: Creating the featured content area

Create a new group above the “navigation bar” group and name it “featured“.

Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 450px using the color #e6b633.

Name this layer “featured area bg“.

Step 20: Add 1px lines for detail

Web design is all about the details. Use the Line Tool (U) to create two horizontal lines with the weight 1px at the bottom of the yellow rectangle.

  • For the dark line, use the color #755c18 and name the layer “1px dark line“.
  • For the light line, use the color #ffdf87 and name its layer “1px light line“.

Step 21: Adding noise to the featured content background

Now we will add some noise to the background of the featured content area just like we did with the paper. Ctrl/Cmd-click on the vector mask of the “featured area bg” layer to select the yellow rectangle. Then create a new layer and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).

Convert this layer into a smart object.

Then go to Filter > Noise > Add Noise and use the settings from the following image.

Set the blend mode of this layer to Multiply, lower the layer opacity to 25%, and name it “noise“.

Step 22: Creating a blue bar for the headlines

Create a new group and name it “blue bar“.

Then select the Rectangle Tool (U) and create a rectangle like the one you see in the following image using the color #1e92e4.

Name this layer “blue bar” as well, double-click on it to open the Layer Style window and use the settings from the following image to add a Gradient Overlay and Stroke layer style to it.

Then select the Move Tool (V) and move your rectangle 10px beyond the left edge of the layout and at a distance of 20px from the navigation bar.

Step 23: Create the 3D effect

Create a new layer, select the Pen Tool (P) and create a small triangle beneath the lower left corner of the rectangle to make the blue bar look like it’s 3D.

Name this layer “triangle“, double-click on it and use the settings from the following image for Gradient Overlay.

Step 24: Add the text on the blue bar

Select the Type Tool (T) and write “Featured »” on the blue bar using the font Museo 700 and the color #ffffff.

Step 25: Adding images to the featured content area

Create a new group and name it “images“.

Then open three images that you like in Photoshop and crop each one to the dimensions 290px by 260px. I just used some random images and screengrabs from Six Revisions and from my site PSDBURN.

Move each image in your canvas using the Move Tool (V), arranging them like you see below.

Add an Inner Glow and a Stroke to each image using the settings from the following image to create a double stroke effect.

Step 26: Creating a “read more” button

Create a new group and name it “buttons“.

Then select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle using the color #f8c539.

Double-click on this layer to open the Layer Style window and use the settings from the following image.

Then select the Type Tool (T) and write “Read more »” on your button using the font Museo 500 and the color #3d382a.

Step 27: Creating a “view portfolio” button

Duplicate the rounded rectangle layer which you have created at the previous step (Ctrl/Cmd + J) and move the new rounded rectangle to the right. Then change its color to #dfd7c0, and the stroke color to #ccc5b2.

Use the Type Tool (T), the font Museo 300 and the color #3d382a to write “View Portfolio” on your button.

Step 28: Creating a lamp

Now we will create a lamp that will light the middle image from the featured content area. Create a new group and name it “lamp“. Then select the Rounded Rectangle Tool (U), set the radius to 7px and create a small rounded rectangle using the color #8f631e.

Double-click on this layer to open the Layer Style window and use the settings from the following image to apply Inner Shadow, Inner Glow, Gradient Overlay, and Stroke layer styles.

Name this layer “wood“.

Add a little bit of noise to the wood part of the lamp just like you did with the paper at the Step 11. Use an amount of 5% uniform and monochromatic noise.

Set the blend mode of this noise layer to Multiply 35%.

Step 29: Creating the lamp shade of our lamp

We’ll create a lamp that sort of illuminates our featured work, which is not only symbolic of what the featured area means, but also to bring more attention to this section of the web layout. Select the Rounded Rectangle Tool (U) and create a rounded rectangle like the one from the following image using the color #9ce340.

Make sure that the vector mask of this layer is selected, click on the Exclude overlapping shape areas button from the Options bar and drag a new rectangle over the bottom half of the first one to erase that area.Take a look at the following image for reference.

Then double-click on this layer and use the settings from the image below to add Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke layer styles.

Step 30: Giving our lamp a nice gradient overlay

Duplicate the layer which you have created at the previous step (Ctrl/Cmd + J) and set its fill to 0%. Right-click on this layer and select Clear Layer Style.

Then double-click on it and use the settings from the following image for Gradient Overlay.

Step 31: Add another gradient overlay on the lamp shade

Duplicate the layer from the previous step (Ctrl/Cmd + J) and use the settings from the following image for Gradient Overlay.

Step 32: Add noise to the lamp shade

Add some noise to the lamp to give it a bit of texture using the same technique which you have used for the paper at the Step 11. Set the blend mode of this noise layer to Multiply and set the layer opacity to 15%.

Step 33: Giving the lamp shade some depth

Duplicate the layer which you have created at the Step 29 (“Shape 1”) and put it above the “noise” layer.

Clear the layer style and change the color of this shape to #eef8e2.

Go to Edit > Free Transform (Ctrl/Cmd + T) and decrease the width of the shape as you see in the image below.

Add a mask to this layer (Layer > Layer Mask > Reveal All), select the Gradient Tool (G) and drag a black to transparent gradient from the bottom to the middle of this shape.

Name this layer “highlight” and set its blend mode to Overlay and layer opacity to 20%.

Step 34: Creating a light bulb

What would a lamp be without a light bulb? Create a new layer beneath the “Shape 1” layer, select the Ellipse Tool (U) and create a circle (hold down the Shift key to create a perfect circle) using the color #f6f3a2.

Name this layer “light bulb“, double-click on it and use the settings from the following image for Inner Glow, Gradient Overlay, and Stroke layer styles.

Step 35: Creating the light sourcing from the lamp

Create a new layer above the “light bulb” layer.

Then select the Pen Tool (P) and create a white shape like the one you see in the following image.

Convert this layer into a smart object.

Then go to Filter > Blur > Gaussian Blur and set the radius to 7px.

Name this layer “light” and set its opacity to 25%.

Step 36: Creating the right arrow of the image carousel

Create a new group and name it “right arrow”. Select the Ellipse Tool (U) and create a circle in the middle of the right edge of the featured content area. Use the color #e6b633. Name this layer “circle“.

Step 37: Add noise to the right arrow

Add some noise over the yellow circle using the same technique which you have use at the Step 11 for the paper.

Step 38: Adding a stroke to the circle

Duplicate the “circle” layer (Ctrl/Cmd + J) and put the new one beneath it.

Double-click on this layer and use the settings from the following image to add an Outer Glow and a Stroke layer style.

Then add a mask to this layer (Layer > Layer Mask > Reveal All).

Select the Gradient Tool (G) and drag a horizontal black to transparent gradient from the left side of the circle to the right side. Take a look at the following image for reference.

Name this layer “stroke“.

Step 39: Create the actual arrows

Select the Custom Shape Tool (U) and create two arrows on your circle using the color #fbf2db. The custom shape used below is called Arrow 2 (it comes as a default shape in Photoshop as part of the Arrows custom shape group). I chose this shape because it most resembles the arrows in the “Featured” blue bar text, giving us some repeating design elements in the layout.

Step 40: Creating the left arrow of the image carousel

Duplicate the “right arrow” group (right-click on it and select Duplicate Group).

Go to Edit > Transform > Flip Horizontal and use the Move Tool (V) to move it in the left side of the layout.

Name this group “left arrow“.

Step 41: Adding the name of the images

Create a new group and name it “image names“.

Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a white (#ffffff) rounded rectangle at the bottom of each image from the featured content area.

Add a Stroke layer style to each of these rectangles using the settings from the following image.

Then select the Type Tool (T) and write the name of your images inside these rectangles using the font Verdana and the color #38352c.

Step 42: Creating the “services” area

Create a new group and name it “services“.

Select the Rectangle Tool (U) and create a rectangle with the height 340px using the color #e6e2d5.

Name this layer “services bg” and set its opacity to 25%.

Step 43: Add the “Services” blue bar

Duplicate the “blue bar” group from the featured area and move it inside the “services” group.

Then use the Type Tool (T) to change the text “Featured” into “Services“.

Step 44: Adding a list of services

Create a new group and name it “navigation“.

Select the Rectangle Tool (U) and create a rectangle beneath the blue one using the color #edeadf.

Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

Duplicate this rectangle three times and arrange all of them using the Move Tool (V).

Step 45: Create separators

Select the Line Tool (U) and create lines with the weight 1px to separate the rectangles which you have created at the previous step. Use the color #d9d6c9. Then group all these layers (Ctrl/Cmd + G) and name the group “separators“.

Step 46: Write out services you offer

Select the Type Tool (T) and write a list of services using the font Museo 300 and the color #3f3d36.

Step 47: Adding an image for each service

Now we will add a representative image for each service listed. Create a new group and name it “images“. Then add an image cropped to the dimensions 160px by 210px. Copy the layer style from one of the images from the featured content area and paste it to this image to get the same double stroke effect.

Use the Rounded Rectangle Tool (U) to create a white rounded rectangle at the bottom of this image.

Then add a 1px #999381 stroke to this layer.

Select the Type Tool (T) and write the name of the first service from your list inside this rectangle using the font Verdana and the color #38352c.

Step 48: Add more images

Add three more images and repeat the previous step for each one.

Then move the second and the fourth images 20px down (select the images, chose the Move Tool (V), hold down the Shift key and hit the down arrow key twice). This looks a little bit more interesting than having every image aligned the same way.

Step 49: Adding two call-to-action buttons

Duplicate the two buttons from the featured content area and move them beneath the images from the services area using the Move Tool (V). Then change the text of the yellow button into “Hire me today!” and write a few words before it. Take a look at the following image for reference.

Now the visitors/potential clients who like the works presented in the portfolio site have two options here: to hire the designer or to view more of his work. Through these call-to-action buttons, we want to encourage the potential clients to take action and get in touch with us for a new project. Since “Hire me today!” is our most desired call-to-action, we use a more prominent color for it, as well as position it to the left, which for left-to-right English language readers, would be the first thing they would see.

Step 50: Adding two separators

Create two lines with the weight of 1px at the bottom of the services area. Use the color #c0bcb1 for the first line and #ffffff for the second one.

Step 51: Creating a background for the blog area

Create a new group beneath the “services” group and name it “blog“. This will feature excerpts from blog posts, which many portfolios nowadays have.

Select the Rectangle Tool (U) and create a rectangle with the height 345px using the color #f8f5ec.

Name this layer “blog bg” and set its opacity to 25%.

Step 52: Adding a blue bar to the blog area

Duplicate the “blue bar” group from the services area and move it down.

Use the Type Tool (T) to change the text “Services” into “Blog“.

Step 53: Writing the blog’s categories

Duplicate the “navigation” group from the services area and move it into the “blog” group.

Then use the Move Tool (V) to move the rectangles beneath the blue bar of the blog area. We’ll use this list for the blog’s categories.

Select the Type Tool (T) and change the text of the list. If necessary, add more rectangles by duplicating one of these layers as many times as you need.

Step 54: Adding two blog posts

Create a new group and name it “posts”. Add two images to your blog area with the dimensions 340px by 140px.

Copy the layer style from one of the images from the services area and paste it to these two images to get the same double stroke effect.

Then select the Type Tool (T) and write some text beneath your images. Use the font Verdana with the color #222222 for headlines and #444444 for the block of text.

Step 55: Call-to-action to read your blog

Use the Type Tool (T) to write the question “Want more articles and tutorials?” beneath the blog posts. Then add a button next to this question with the text “Read the blog“.

Note: you can duplicate this button from the “services” group.

Step 56: More separators

Duplicate the two separator layers from the bottom of the services area and use the Move Tool (V) to move them at the bottom of the blog area.

Step 57: Creating the “About me” area

Create a new group, name it “about” and move it beneath the “blog” group.

Select the Rectangle Tool (U) and create a rectangle with the height 200px and the color #e6e2d5. Name this layer “about bg” and set its opacity to 25%.

Duplicate a blue bar group which you have created at the previous steps, move it in the upper left corner of this area and change the text into “About me”.

Write a couple of sentences beneath the blue bar using the Type Tool (T). Then you can add some social icons beneath this text. The ones which I have used are from Function and you can download them for free.

Finally, add two lines with the weight 1px at the bottom of this area.

Step 58: Creating the contact area

Create a new group beneath the “about” group and name it “contact“.

Use the Rectangle Tool (U) to create a rectangle with the height 450px and the color #f8f5ec. Name this layer “contact bg” and set its opacity to 25%.

Duplicate a blue bar group which you have previously created.

Move this new blue bar in the upper left corner of the contact area and use the Type Tool (T) to change the text into “Contact“.

Step 59: Create the contact form send button

Use the Rectangle Tool (U) to create a contact form. Set the color of each rectangle to #ebe9e5. Then use the Type Tool (T) and the color #8c8a86 to write the name of each field of the contact form inside it.

Add a send button beneath the contact form.

You can duplicate one of the buttons which you have previously created and change the text to “Send“.

Step 60: Creating the footer

We’re coming to the final step of this tutorial, so keep at it! Create a new group and name it “footer“. Then use the Rectangle Tool (U) to create a rectangle with the height of30px and the color #e6e2d5.

Name this layer “footer bg” and set its opacity to 25%.

Add two lines with the weight 1px at the top of the footer.

Then select the Type Tool (T) and write a copyright statement.

Use the font Verdana and the color #595753.

Conclusion

I hope you enjoyed this tutorial as much as I did writing it. We covered so many aspects of creating design elements that are currently popular, such as the 3D effect, the letterpress text treatment effect, using a grid for layout out our web page, and more. After 60 steps, you’ve made it! This is our final layout. Click on the image below to enlarge it.

If this tutorial has inspired you in some way, show us your work by including it in the Design Instruct Flickr Group pool please!

Download Source Files

  • Nick O’Sullivan

    Nice, looking forward to more posts here 😀

  • Excellent tutorial. Many thanks for sharing this.

  • Great.
    Nothing really new, these techniques are over and over again everywhere…but very well explained. And everything in 1 tutorial is great compilation. Congratulations. I’m not designer and this step-by-step needs to be bookmarked now!

    Thanks

  • Very goo and thorough tutorial. Looking forward to reading more.

  • holy crap, how long did it take you to write that?! Anyway, good tutorial. I like that it is a different style than most “Create a website in Photoshop” tutorials. Looking forward to seeing future articles from this site!

  • Great first tutorial, can’t wait for more!

  • Very nice tut! I see you are from Romania. I`m From Slovenia. We are not so far away.

  • Wow… very detailed tutorial but really informative.

    Thanks

  • Daniel

    Good man!

    Excellent tutorial.
    When you write a tutorial(specially about web design), every detail is important to be explained. Some authors fails on do this, because they think we already know the techniques. Please, treat me as a kid and explain everything to me. This way I will learn and not copy.

    Thanks!

  • my real name is a mystery

    Great start, i wish you luck and will be coming in from time to time!

  • Reich Hansten

    ugly design. good tutorial

  • Great tut for starting off a great new resource… congrats gang!

  • Awesome tutorial. Next should be how to take this design into XHTML and CSS. I am a designer trying to learn more about web coding and development.

  • Very good tutorial! Congrats!
    Are you also going to explain how to html and css this layout?
    Thanks!

  • That sort of thing would probably fit better on our other site, Six Revisions. So we may occasionally do cross-site tutorial series where we’ll present how to create the design here and follow it up on Six Revisions.

    Although, I do plan later on to include an HTML/CSS template of each of these web design tutorials in the source file download.

  • Hey Aaron, thanks for stopping by!

  • Ionut’s tutorials are always very detailed and lengthy. Having written numerous tutorials myself, I can probably speak for him and say that it took him many, many hours to write. Just the screen shots alone can take you hours to create and process. I remember writing this tutorial on Six Revisions, which takes 10 minutes to actually do, but took maybe 6 hours to write up. That tutorial is a fraction of the size of Ionut’s tutorial.

  • Great tutorial as usual Ionut, I can’t imagine how long this took to write! ;D

  • Shane

    Excellent work. Look forward to following you.

  • Your first tutorial rocks!Great explanation.

    I hope to see more articles like this on Design Instruct.

    Ciao 😉

  • That’s a nice tutorial!
    Love the outcome
    Can’t wait to see more of these tutorials

    Tomas

  • Commenters above me have already adequately expressed the praise deserved for a well done layout, however I have a few points to make that I haven’t seen here.

    I think this is good overall, but I don’t really agree with the color choices or certain aspects of the layout.

    The color scheme is just way too busy. My eyes are just attacked with some blindingly bright colors all right next to each other. They don’t know where to look or focus. Thanks to this, your call-to-action buttons aren’t as apparent as they should be.

    Also You could use some more white space around.. well everything. Negative space is just as important as positive space.

    And the Orange header section is lacking some depth. Despite the corner-wrapping ribbon on the left, there is no shadow from its main part to the orange page. They are on the same plane, yet it wraps around it? The lamp and the pages then all exist, what appears to be embedded into that same plane.

    I don’t want this to sound as negative as it does, just offering what I think is the most useful of what I have to say.

  • Hey Dan. Thanks for your detailed feedback. It’s not a secret amongst content-centered sites that the comments is where you can learn the most at, and your comment is a testament to this notion. So thanks for taking the time to share your thoughts. It’ll only help us as editors and also the authors to see where they could possibly do better next time.

    I can see where the color choice can be a concern: when I first saw it, the first reaction I had was “that’s a loud design”. But I also thought, “wow, that was a memorable design” because of it’s high impact colors. There are certain situations where this type of design would work, and situations where it wouldn’t (could you imagine a bank with this color scheme?)

    Thanks for sharing your thoughts and we promise to learn from them.

  • socorsan

    just great – keep the good work, please! :^)

  • Great tutorial technically, nice summary of the various web design memes floating around the internet.

    Nothing new though, and put together it’s cluttered and messy.

  • czarina

    great tutorial! can you possibly create a part two with focus on slicing and coding?

  • Vadim

    Bravo Iounuts, tine-o tot asa 🙂

  • awesome work you have done here my man! :))

  • To be as transparent to readers as possible, I’ll have to admit that we didn’t make plans for having slicing/coding here on Design Instruct. But if this type of tutorial will be of value to readers, then we’d love your input.

    I’ll discuss this with Ike and see if this is a direction that he wants to pursue. Then, we’ll maybe put it up on a vote here on the site and ask for readers’ feedback. I know from my experience in writing coding/slicing tutorials, that they’re the most difficult type of tutorial to write. We’re more than happy and willing to take on the challenge, but we also want to make sure that you guys wouldn’t rather see something else, and that you won’t think that it’s out of the scope of Design Instruct.

    However, we do plan in the future, to include an HTML/CSS template along with the design tutorial of web designs, in the source package downloads. We’ve also considered cross-site tutorial series where we do the design here on Design Instruct, and then the coding/web design part on Six Revisions.

  • Ed

    Thanks for sharing. Great tutorial and so well explained!
    Designinstruct, thanks for hosting another great creative inspirational website!

  • bob

    I can scroll up and down you articles all day long. Each time, sucking your bandwidth / server hits with complete disregard TO YOUR COSTS. If implementing such ‘heavy’ articles, you may wish to seek ways of dealing with / reducing the sever load. Or not. Just a thought…

  • I agree with Jacob, this tutorial shows only detailed work with the tool: Photoshop, and for that it is a great tut!
    Although it would be great if in the future you could propose a colour tutorial, we hope for it!

    Thanks!

  • @Cinthy Revilla: A tutorial on color theory… now that’s a thought! Thank you for that suggestion. I myself would love that tutorial. I’ll see what we can do!

  • We’re in the process of gradually scaling our resources to meet the demands. We’re also going to be implementing things to make the web pages load faster, and caching to reduce the amount of work our servers are doing. We’re already on a CDN even though we’re still quite new because I know that our web pages will be ultra-heavy versus the typical web pages on the internet.

    If you spend all day here on Design Instruct, scrolling up and down our articles, and you’re enjoying your stay here and you learn and get inspired from the content that we publish here, then we don’t have a problem with the resource costs. 🙂

  • Good luck with this endeavor. I hope you are able to grind this out into a success. I look forward to another resource.

  • Good luck with your endeavor. Good start.

  • karina

    Wow tats great >_<
    I got this link from my friend and thx to him XD

  • Thanks for your kind words. We’ll definitely be working hard to give you nothing but excellent content! Subscribe to our RSS feed to keep up to date with new content.

    In the meantime, follow us on twitter. we’ll be doing giveaways and promotions from our twitter account so stay tuned. Again, thanks.

  • THANKS! we look forward to giving you nothing but excellent work!

  • Daniel

    Jacob and Isaac,

    Don’t change your plan. If this website was created to provide real web design tutorials, keep it like this. For coding, use your sister website as you said before. If you start to mix things, soon the website may lost identity. A very well explained tutorial some times is better than a whole book.

    Anyhow, this is just my idea, in the end up to you guys.

    Best

  • Hey Jacob,

    Wow, that is a long tut, but great detail and a good one to start off the new site. Is there a post on 6R that explains why you use the 960grid system and some detail on how to start (psd) and finish(xhtml/css) a site with it?

    Thanks,

    I don’t see a checkbox to subscribe to comments. I will check for an RSS find to check for responses.

  • Mostly I am interested in taking a 960 grid system from psd to css/xhtml. Not specifically one of your themes, but maybe just a basic, maybe a word press theme.

    I do think you could run the psd stuff here and the other over at your site, that works good for everyone, I think.

    Looks like you and your brother will be busy with this site, good luck.

  • dini

    Great Resource!

    It may be even better if you can provide screen cast.

  • thanks for sharing, thats great!

  • Nice template

  • @Jim Gaudet – we’re going to enable the “Subscribe to comments” within the next two days. It’s in the works. However, right now, you can manually subscribe to the RSS feed of the comments of each post. Here is the link to the comments RSS on this tutorial:

    http://designinstruct.com/web-design/how-to-make-a-vibrant-portfolio-web-design-in-photoshop/feed/

  • Thanks for this Daniel. That’s exactly what we were thinking, we can do the coding parts on Six Revisions. I hope more readers feel the same way.

  • Adil

    I was really impressed with how in-depth this tutorial was!

    I do hope to see more HTML/CSS tutorials in the future, if possible.

    I, too, like the idea of cross-site tutorials; you could put a link on the PSD tutorial to visit 6rev for the CSS/HTML tutorial, and vice versa.

  • Brilliant start for this new blog; I’m very excited to see what’s coming up!
    All the best, Oliver.

  • what a great tutorial!!. You were able to cover different style that are commonly use today in web design. We are looking forward for the coding tutorial of this. Thanks

  • criest

    Hi, could you help me a bit please?
    I am a bit stuck now, coz i m newbie.
    At the step no. 8 Bending a corner of the paper.
    when i tried to create the triangle, the fill color of the triangle outside the rectangle becomes yellow (the same color as the rectangle). Why it cannot becoming all blue color like yours?
    Please help me out.

    Thanks.

  • Great tutorial, thanks!

  • Edison A. Leon

    Nice tutorial, thank you!

  • I think I’m stuck in the same boat. Help or an explanation of this step from anyone on here would be appreciated.

  • Hey you guys, help’s on the way. I’m trying to figure out what could be causing the situation you’ve described. I’ve also contacted Isaac and Ionut who are better Photoshop’ers than I am to see if they can provide an explanation.

  • Brayden Styles

    Amazing Tutorial Loved it

    Super super super !!!

    Cheers
    Brayden

  • Make sure you follow these steps:
    1. Click on the vector mask of the “paper” layer to make it active;
    2. Select the Pen Tool (P);
    3. Make sure that the “Shape layers” button is activated and select the “Exclude overlapping shape areas” button from the Options bar (these two buttons are selected with a red rectangle in the screen shot from step 8);
    4. Create the triangle over the upper right corner of the yellow rectangle.

    I hope this will help you. If you still don’t get the right result, can you please take a screen shot when you are at this step and share a link to it here? This way it will be much easier for me to figure out the problem.

  • I think the problem might be coming from failure to click on the “Paper” layer’s vector mask. In the layers palette, click the “paper” layer’s vector mask to make it active and then start drawing the triangle. let us know if this gets you out of your jam.

  • Overall I think it’s a very useful tutorial, many great tips there!! I also don’t necessarily agree with the color choice, but that is just a matter of personal preference. The fact is, anyone who uses this tutorial can easily do so by using whatever colors they choose.

  • fresh!!! how to convert that web design into html? is it not heavy to open in browser?

    good job, Ilke the colours combination

  • This site is awesome. Going straight to my RSS reader 🙂

  • criest

    Hi, i have tried about 5 times but still remain the same.
    Please advice me.
    here is the link to my Screen Shot http://studiofoto.co.cc/error.jpg

    Thank you & appreciate your tutorial.

    Regards,
    Criest

  • Thank You! We’re glad you like it. Stay tuned for some truly excellent tutorials!

  • Wow. This is really helpful.

    I’m pretty handy with the actual coding of sites, but absolute rubbish at using Photoshop, Illustrator et al. I had to google how to find the pencil tool the other day, so I’m looking forward to actually learning how to use the expensive graphics programs I paid so much for.

    That said, I subscribed to your feed, and it may be an idea to provide a link to the tutorial in the feed so that we know we haven’t got the whole article in our feed reader (I would ordinarily say that a full article feed is better than an excerpt, but in your case, I’ll make an exception :P)

  • My image looks just like the one that criest posted. I’ve made sure the vector mask of the paper layer is active and I’ve selected the Shape Layers and Exclude overlaping shape areas buttons several times and still get the same results.

  • This is the first time I have visited the site from six revisions, and I am impressed allready.

    Nice tutorial – picked up quite a lot from that – plus I must say it was very easy to follow.

  • zhangchen

    nice website.Great job.I’m from China.thanks!

  • criest

    post again here, so you guys can see easily.

    Hi, i have tried about 5 times but still remain the same.
    Please advice me.
    here is the link to my Screen Shot http://studiofoto.co.cc/error.jpg

    Thank you & appreciate your tutorial.

    Regards,
    Criest

  • Davito

    Great tutorial! The only thing I’m missing is the code for the actual navigation arrows at the sides. This is mostly why I never do this kind of navigation solutions. Any tips where someone could find the source code for it? Doesn’t matter if it’s css, javascript, jquery or flash. Thanks mate!

  • Davito

    I’m more of a Illustrator guy, but I think you must change the foreground colour for the triangle form. Change it to blue & you’ll make it.

  • Hey Deanacus,

    Thanks for the positive thoughts and I’m glad you enjoyed this tutorial!

    I know exactly what you mean about “expensive graphics programs” that, if you’re more of a web developer, sits idly! So this is definitely the spot for you to learn the software by way of practical tutorials that allow you to learn by doing.

    We’re improving the RSS feed items. We’d like to show the final result of the tutorial and also have a “read more” link in the body (which I realized just now, isn’t showing up”).

    With regards to full feeds: Here’s my thoughts on them and some discussion in the comment thread of another tutorial.

  • Joe

    Nice attention to detail and subtleties. I included a wrap around banner for a navigation system like you have here on a site I did for a client and they said “We don’t like that triangle hanging off the side.” Kinda funny. They didn’t get it. Thanks for posting! Good site!

  • Mj

    I tried IT and it was good! I published a post about in my blog. Nice work

  • criest

    already tried to change the foreground color..
    need some more hints..
    thx..

  • Great Tutorial!!! But why you didn’t explain the 960 grid in depth. Coz, the HTML & css structure are defined for these grid based layout(as per what I have seen). Felt, it would have been a great help for me to easily understand the 960 grid. Anyway, Thanks a lot for such great tutorial.

  • Hi Daniel, I’m glad you like this tutorial. I spend a lot of time trying to explain everything in a way that even a Photoshop beginner can understand the techniques used.

  • Thank you very much, Callum. It took me many hours to write this tutorial, but when I read all the kind comments here I know it was a well invested time.

  • Kevin Esther

    Great tutorial. Very detailed i am using this a inspiration for my design blog, love the layout, more like this would be great. well done

  • CD Smith

    This tutorial is great! I teach web design, and this tutorial would be one I would recommend to my students without hesitation! Regardless of the outcome, I think it illustrates wonderful ways of using PS tools to create a visually interesting site, and gives wonderful examples of what can be accomplished. Thank you!

  • hohow! very nice work! thanks 🙂

  • Very good tutorial of web design. Clear and direct.

  • Alvarix

    Amazing!!! Really good job…

    I love it.

    You are in my favorite sites now 😉

    Bye!

  • thank you for this wonderful tutorial – clear as day, and I am even using an old version of photoshop (6.0) and still able to get basically the same result. I would also like a tutorial on how to get it to the web via css/html…

  • Bobby

    great tut, keep up the good work. did you ever create a tut on how to export and code this in dreamweaver? thanks again.

  • We haven’t created a tutorial on how to create this into an HTML web page yet.

  • Sasank

    Thanks for the tutorial

    It would be great if you can make a tutorial for creating the same template into HTML ,CSS and jquery

  • Omar

    Me estoy iniciando en el diseño gráfico y cada vez con los aportes que encuentro en la red me sigo alimentando de nuevos conocimientos, MUCHAS GRACIAS, éxitos. Espero muy pronto brindar mi aporte.
    Desde Perú
    Omar

  • You raise some good points, however , I believe your main analysis is probably off base, beneficial piece though, congratulations are in order. Cheryl

  • Really good tutorial! Thanks!

  • So good, this tutorial of web design.

  • jon smith

    they’re over and over again because they are that good that they can be redone over and over again.

  • Calin

    Excellent?
    I just as your tutorial make a page, the result is very perfect!
    Thanks for the detail tutorial!
    I come from China.

  • Fabian

    Good tutorial!, thanks

  • baobaoyeye

    Perfect design!Thanks!

  • awesome tutorial and very detailed walkthrough thanks for sharing 🙂

  • how to make my web design into HTML and into a web site?

  • Excellent stuff, well done, thanks for sharing

  • sima90

    it’good but not clear tutorial!!!!!!!!!!!!!!!!!!!!! ):

  • abhay

    awesome tutorial i also seen your website the design is great prefect design.
    i am new in photoshop and had just started learning photoshop this is my first tutorial and i have many things in tutorial using the gardint in other style
    and may more things once again awesome and perfect tutorial.Keep it up posting
    this type of tutorial and if you have any tutorial please send me on my email id which i had given in email box.Thanks very much 🙂

  • Sus (Denmark)

    Hi there
    Thank you for a really nice tutorial.
    I would very much like to see how it is combined into Dreamweaver, eg the portfolio gallery with the arrows, how could this be done?

    Kind Regards

  • Nice tutorial, thank you

  • Great tutorial thanks for sharing 🙂

  • Maryum

    Hey promising folks,

    Simply, I couldn’t do the 3rd step 🙁 let me help please…

  • nirajan

    I like this tutorial very much. great work.

  • I’m from China?I like this tutorial very much.
    I will share your tutorial with my friends?Thank you for a really nice tutorial?

  • Yuvraj Khavad

    Thank for sharing nice tutorial with us …keep it up….

  • john

    Thank for sharing this nice tutorial with us.

    Very nice 😉