Advanced Photoshop Techniques for Web Designers – Part 2

This is my second article about about advanced Photoshop techniques for web designers. In case you missed my previous article, we have already covered buttons, navigation, shadows and a few other useful techniques. In this article we look at how to create fold and light Effects as well as 3D elements. This is going to be a long tutorial so grab your favorite biscuits and cup of tea and let’s get started!

Editors Note: Andy Clarke will be teaching an interesting session called “How to Design in the Browser” and Elliot Jay Stocks will be showing you how to design the “The Perfect Portfolio” at The Future of Web Design Tour.

Fold

Now let’s fold some papers, shell we? Used to be, and probably still is, the top feature of Web 2.0 design. You have probably seen this on peel stickers that appeared on almost every website not long ago. I still like this type of fold better then peel stickers, so I’ve chosen this example for you. This example is from Bridge 55

Fold example

Step 1

Open New Document, set canvas to 470px wide and 300px high, fill it with #d4cdb1. Create a new layer and with Rounded Rectangle Tool draw in this shape, about 310px wide and 400px high. Fill it with #391e0b.

New Canvas

Step 2

Using Pen Tool create a rectangle like shown in the image. Fill it with #e5e2d1.

Triangle path

Step 3

Select the path of the rectangle with Direct Selection Tool. Now, choose Pen Tool again, come near the path and you will notice a small “+” sign appear near the Pen Tool. Click on the path to add two extra points just like shown in the image.

Add points

Step 4

With Direct Selection Tool click on one point and bend the curve like shown in the image. Do the same with the second point.

Transform path

Step 5

Ok, we’re almost done with the fold. No we need to hide the rectangle corner. We will do this almost the same way as we did the actual fold (triangle). Select the path and add few more points where we will transform our path. See the image.

Brown box add points

Step 6

Move points like shown in the image.

Transform path

Step 7

Here we need to do a little bit of extra work to nicely curve the shape. Move the point of rectangle to the nearest point of rectangle shape (fold) just like shown in the image. Notice the handles and their position now.

Adjust fold

Step 8

Adjust the handles just like shown in the image. This way we curved the edge of rectangle to follow the fold.

Resize handles

Step 9

Almost done. Just add a Gradient Overlay to rectangle shape. Use the settings like shown in the image. Also, add a tiny Drop Shadow.

Apply filters

Step 10

After adding some navigation items, this is how it should look like. Pretty easy, don’t you think?

Final preview

Out of the Box

Another nice 3D effect to gain more attention to some parts of the website. This example is from Dave Jay

Out of box example

Step 1

Open New Document, set canvas to 470px wide and 300px high. Create a New layer. Fill the document with #15100c. Draw in a rectangle that divides the canvas (about 280px x 310px)and leave only one side of rectangle (left) inside the canvas. Give it a stroke 2px, inside, #918972. I added a shadow using the same technique I explained in Part 1 of this tutorial (Faded shadow). You should be getting something like you see in the image.

New Canvas

Step 2

Draw in a Rounded Rectangle, radius 3px, filled with #3e726e.

Draw shape

Step 3

Rotate the shape like you see in the image.

Rotate shape

Step 4

Now we need to draw the fold. Select the Pen Tool, click once near the edge of the green shape. Second click should be little lower, but this time click and drag to create the curve. You will notice the handles that appear as soon as you drag the point.

Draw path

Step 5

Now close the path. Move the layer under the green shape layer.

Shape preview

Step 6

With Direct Selection Tool select the green shape. You will notice that two points and handles will appear.

Select green shape

Step 7

With Direct Selection Tool click and drag the right point down to the half of the white shape (fold). Use the image for reference.

Adjust handles

Step 8

Adjust the handles of the green shape a bit and you will get the same result as you see in the image below.

Preview

Step 9

Select the green shape layer. Add a 3px white outside stroke. Now we need to delete the right end of the stroke. We will do this by distributing the stroke effect to a separate layer and masking the right end. While green shape layer selected go to Layer>Layer Style>Create Layer. Take a look at your layer palette now and you will notice an extra layer above the green shape layer. Select it and add a Quick Mask. With Lasso Tool create a selection like you seen in the image and fill it with black.

Mask stroke

Step 10

This is how it should look like now.

Masked stroke Preview

Step 11

Now we’re almost done, just a few finishing touches. Let’s create a shadow inside the fold. Select the white shape layer (fold). Create a new layer above. Select a 17px Soft Brush, set background color to black. Now, carefully click few times on top of the selection so that the edge of the brush touches the selection.

Shadow

Step 12

This is how it should look like. I have created a few more effects on the green stripe that I will explain in next few steps (Light Effects).

Stripe preview

Step 13

I just copied the whole stripe, duplicated it and changed base colors of shapes. Done!

All stripes preview

Blur

This effect is really neat and simple. Hardly noticeable, yet without it the design would be missing that extra touch. This example is from Phodana

Blur example

Step 1

Open New Document, set canvas to 470px wide and 300px high. Background used for this example taken from Digital Juice Juice Drops Collection.

New Canvas

Step 2

With Rectangle Tool draw in a shape about 390px x 225px and fill it with white.

Draw Rectangle

Step 3

Create a new layer and draw in a smaller rectangle about 330px x 195x and fill it with light gray color.

Draw smaller rectangle

Step 4

Now, Ctrl (Cmnd) + Click the big rectangle layer shape to create a selection. Select the Background layer (image). Go to Filter>Blur>Gaussian Blur and enter 2px for Radius.

Make selection

Step 5

Lower the opacity of big rectangle shape layer to 35%. This is how it should look like.

Blur filter

Step 6

Add a tiny Outer Glow effect to transparent rectangle. Use settings like shown in the image. Set the glow color to #004e84.

Add effect

Step 7

That’s it!

Final preview

Light effects

If you don’t add that extra layer of top light, your site design is rubbish. :D No, just joking of course. These are really that extra touches that make some sites better then others. For this example I used one of my own templates I crated. This example is from PRO Design. More about light and shadow here.

Light effect example

Step 1

Open New Document, set canvas to 470px wide and 300px high. Fill it with #3b3a3a. Draw in a rectangle about 60px high and 470px wide. Fill it with #eae7e7.

New Canvas

Step 2

Create new layer above and draw in another rectangle about the same dimensions like the previous one. Fill it with #28b9c6.

Draw shape

Step 3

Now add some effects to blue rectangle. Gradient overlay, use settings from the image. Stroke 1px, inside, color #27c4d3.

Gradient overlay

Step 4

This is what you should get by now.

Gradinet preview

Step 5

Now, this looks nice but something is missing though. We need to simulate light and shadow even more. We will do this by adding 1px dark and light lines on top and bottom of the shape. For dark line set #000000 and for light line set #6d6d6d as background color.

Draw lines

Step 6

This looks much better don’t you think?

Lines Preview

Step 7

Adding light effects. Ctrl (Cmnd) + Click the blue rectangle layer. Go to Select>Modify>Contract and enter 1px. Create a new layer and change mode to Overlay. Choose a 300px Soft Brush,set background color to white and click few times with the edge of the brush near the selection where you want to apply the light effect.

Selection and brush

Step 8

Subtle but nice.

Effect preview

Step 9

Do the same for the top part.

Selection and brush on top

Step 10

Overall it looks better, definitely!

Top light effect preview

Step 11

I added some navigation items and logo.

Final preview

Background effects

Even with one good background you can achieve great visual experience. These can be sometimes hard to create and take more time then other stuff but it’s definitely worth it. This example is from FortyTwo

background effect example

Step 1

Open New Document, set canvas to 880px wide and 560px high. Fill it with #002142.

New Canvas

Step 2

Draw in a rectangle half the height of the canvas.

Rectangle shape

Step 3

Apply Gradient Overlay with colors and settings as shown in the image.

Gradient overlay

Step 4

Create a new layer above and draw in another rectangle to fill the canvas. Apply the same Gradient Overlay, set it in opposite direction this time.

New Rectangle shape

Step 5

Place a Light bulb graphic. I used one from iStock.

Place light bulb

Step 6

Let’s do some light effects. Ctrl (Cmnd) + Click the upper rectangle layer to create a selection. Choose a 600px Soft Brush, set color to #4a7ba5 and click one or two times so that the top edge of the brush touches the top of the selection. Now, choose a smaller brush size, 300px, set color to #8cb9da and click again two times little lower. Finally, choose 100px Soft Brush, set color to #e5e9ec and click again two times almost at the bottom of the selection (behind the bulb). Copy this layer one time. Set layer mode to Overlay and set opacity to 65%.

600px soft brush

Step 7

This is how it should look like.

300px soft brush

Step 8

Copy these two layers and merge them together. Go to Edit>Transform>Flip Vertical and nudge the layer down just like you see in the image. The top side of the flipped light effect layer should be touching the top side of the bottom rectangle shape we drew few steps before.

Copy and reflect

Step 9

Add a Quick Mask to it and with 600px Soft Brush delete the edges of the flipped light effect layer, just like you see in the image.

Mask layer

Step 10

Create a new layer under the flipped light effect, set background color to white and with big 800px Soft Brush draw in more soft light (click once). Again, add a Quick Mask, and with a smaller brush mask the edges. This doesn’t need to be perfect.

300px soft brush white

Step 11

In order to add a Pattern overlay, we need to create pattern first. I have created this pattern for you, so all you need to do is apply it to the document. Create a new layer above everything, fill it with #ffffff, set mode to Overlay and reduce opacity to 3%. Add a Pattern Overlay with this pattern here:

Pattern

Step 12

This is how the effect should look like.

Pattern overlay preview

Step 13

We need to create a Light bulb reflection on the surface. To do this, copy the light bulb and flip it vertically, nudge it down. With Marquee Tool create a rounded selection about the same size like shown in the image. Go to Select>Modify>Feather and enter 30px. Press Delete few times to delete the bottom of the reflected Light bulb.

Copy light bulb, reflect, make selection, delete

Step 14

And, we’re done.

Final preview

Wait a minute! Where did these two circles behind the bulb come from?

Yup! It’s a small detail that makes the design complete. Let me show you how to create it.

Final preview

Step 15

Ctrl (Cmnd) + Click the top rectangle to make a selection. Choose a 800px hard Brush, set color to #b4e8ff and click one time to create the circle.

Final preview

Step 16

Set the layer opacity to 2%. Copy this layer. Go to Edit>Free Transform and scale the copied circle a bit down. Done!

Final preview

Final Preview

So we’re done with this. I hope you could easily follow my tutorial and managed to recreate the same effects as shown. Here is the final image preview. Btw. the guys at FourtyTwo used an image from iStock

This is it for Part 2 of our Photoshop Techniques, I hope you enjoyed it as much as I did. Furthermore, I hope you also learned something new that you will be able to apply to your next web design job.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

81 comments on “Advanced Photoshop Techniques for Web Designers – Part 2

  1. Some handmade soap are made with the riches ingredients and not made with something that was a ‘melt and pour’ type of soap. The ‘melt and pour’ soaps are not true handmade from scratch soaps. If the soap includes glycerin than by the chemical makeup of soap and glycerin, the soap has been made by sodium hydroxide or a strong alkali product. In addition, a lot of homemade soaps boast that they do not contain lye and if this is so, than you can bet that you are going to be getting a bar of detergent, which, for several people, is very drying to their skin.

  2. Pingback: 16 fresh design and development related links! « Adrian Zyzik’s Weblog

  3. Pingback: Carsonified » Advanced Photoshop Techniques for Web Designers – Part 2 « Alicia Wilkerson

  4. Pingback: Advanced Photoshop Techniques for Web Designers – Part 2 | Choose Daily

  5. Pingback: elegant business card designs | WebDesignExpert.Me

  6. Pingback: furiousBlog – in my diatribe » Blog Archive » yes, another lame post

  7. Pingback: 5 Advanced Photoshop Techniques For Budding Web Designers - T-Shirt Forums

  8. Here in the office we’re always looking for ways to tune up our Web Designs for clients, this list of techniques is fantastic, definitely have to pay more attention to fine tuning lighting effects within our designs.

  9. Pingback: Carsonified » Advanced Photoshop Techniques for Web Designers – Part 2 | Web advertising live today

  10. Great tutorials! Thanks so much for the mention of my blog’s “Out of the Box” menu. I fiddled with that for a while to get it just right – great job of outlining the process.

  11. Pingback: Mes favoris du 28-08-09 au 29-08-09

  12. Pingback: Web Goodies for August 28th & 29th « I Speak Web Stuff :: Blog of Jack Franklin

  13. Great Tutorial, will definitely be practising some of these techniques for future designs.

    The only thing I would say though is that the first page-corner-turn-down doesn’t look right somehow – It looks like the curled down part is too long for the amount of paper that would be able to be turned down, if that makes sense? Very useful nonetheless.

    Look forward to seeing more like this!

  14. Pingback: links for 2009-08-29 | Appunti di storie di web

  15. Pingback: Carsonified " Advanced Photoshop Techniques for Web Designers – Part 2 | Squico

  16. Pingback: BlueHatDesign» Blog Archive » Advanced Photoshop Techniques for Web Designers

  17. Pingback: Carsonified » Advanced Photoshop Techniques for Web Designers – Part 2 | Squico

  18. One of the very best and informative tutorial on the entire net.
    I’ve really learned a lot reading this tut.
    Please continue this series.
    Thank you so much.
    God bless you.

  19. Pingback: Kick-Ass Squeeze – August 2009

  20. I just have to say wow!!! I’m gonna try this when I get home from work, not sure if I will be able to do it, but sure gonna try, thanks for your nice well layed out article on that.

  21. I’d like to comment on the technique about the “light effects”.
    The steps 5 and 6 are OK but the colours should be switched for better effects, i mean the bottom of the “blue part” must be stroked with lighter blue, or it should be much darker, while the “gray part” should be stroked light. With the 1st technique you will embed blue part over the dark and grey, and with the 2nd they will go one after another.
    That’s just my opinion, everything else is awesome. Regards!

  22. Thanks I really enjoy the techniques you looked into and I also appreciated how you explain them I have recently found some demonstrations to miss steps and or not offer as much detail as you have gone into but I can relate to the way and imagery you have used to guide you through the steps – thanks I may become a photoshop pro soon.

  23. Pingback: Link bucket: More on this whole Internet thing | Jay Small | Small Initiatives

  24. Pingback: ITキヲスク | 2009年8/30~9/5の週間ブックマーク

  25. Pingback: Designer Silverlight » Blog Archive » WPF, Silverlight and Design Links for 09/08/09

  26. Marko, thanks so much for simplifying these tricky designs!

    I have a question about the “blur” design. When this is put into a website, how do you make sure the text stays in the white box?

    Also, I noticed you’re not using web-safe colors. Do you think the colors work OK on most browsers?

  27. Pingback: Page fold effect

  28. Pingback: Tabbed 3d menu

  29. Hello! I have tried your Blur tutorial but it does not work… at the time of setting the gradient (step 4), I am told that the shape must be rasterized… and I get lost here.

    I am trying to create a transparent blurred layer (png I suppose) that will give a blur effect to any portion of a photo that lies underneath…

    Is this the right tutorial for me? Or , would you tell me how to do that, more simply?

    Thanks… you would save me!

  30. Good tips… I would advise ALOT of websites out there there to take note as the amount of high PR badly designed sites out there is unbelievable.. I think it puts you off shopping when you click a site and first thing you see is a low resolutuion pixelated banner.

  31. The thing is Josh, not everybody is technically great on Photoshop and understand image resolution etc.. We have are fortunate enough to have people working in that dept for us but not every website does.

  32. I have tried to create it but my output is quite different unlike what you have shown in step 10.
    Seems like I have missed something. I will retry it again till I get the exact design.

  33. Lee, I can appreciate that, im just saying as a customer it looks more proffessional to put a bit of effort into the graphics on your website home page as you only get one first impression. There are many tutorials like this which are here to help those who don’t have a great understanding of photoshop.

  34. Great tips and step by step instructions there Marko, thanks for sharing and I’ll be sure to subscribe up to read future tuts!

  35. What can I say, I am speech less – I would like to say only one work “AWESOME” the light effect is amazing…..

    Thank you very much for this article, actually I am not a designer but I am trying to learn designing…. very useful article for me.

    Thanks,
    Vivek [Founder of DeveloperSnippets – http://www.developersnippets.com

  36. I’m sorry, but I don’t think there’s anything advanced about any of those techniques or tips.
    Sure, they might be informative for Photoshop novices, but I would not call these techniques advanced. Also, they’re symptomatic in my opinion of a style over substance mentality, i.e. the ‘web 2.0′ glossy, bevelled look thats executed across sites without much thought.

    Also, I hope Carsonified/Thinkvitamin isn’t going to join the glut of the ‘inspirational’ blogs and websites rife with below average superficial tutorials on how to mindlessly repeat visual effects.

  37. There are design challenges that really benefit from designing in Photoshop, specifically when more flowing, non-linear layouts are called for and experimentation is key.

  38. You are kind of negative. Instead of judging someone’s work as not ‘inspirational’ do something about it and add to their tutorial and ‘inspire’ the rest of us.