Learn5 Advanced Photoshop Techniques for Web Designers

Treehouse
writes on August 21, 2009

Share with your friends










Submit

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.

In this step-by-step tutorial, I’m going to show you how to create five killer effects for your site.

When I was choosing examples for this article I visited some design galleries and roundup posts and took screenshots of design details that are used (sometimes overused) in web design. I don’t encourage you to follow trends but rather develop your own style. Nevertheless, it is always useful to polish your Photoshop skills a bit more. Let’s get rockin’!

Editor’s 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.

#1 Awesome Buttons

Now what is a site without a great “Call to action” button? The design style and colors will depend on your overall site style and importance of each button. Here is one example of a simple but effective button that we’ll be trying to recreate (taken from transmissionapps.com).

Step 1

Open New Document, set canvas to 470px wide and 350px high. Create a new layer and draw in this shape with Rounded Rectangle Tool with radius set to 80px.

Step 2

Right after that we will add some layer filters to make this button immediately awesome. Drop Shadow – Color: Black, Opacity:65%, Distance: 2px, Size:2px, the rest leave by default.

Step 3

Gradient Overlay. Just copy these hex codes for gradient colors and place color buckets in approximately same position as you can see in the image.

Step 4

Inner Shadow will make this button stand out even more. Notice that this is just a subtle effect. Inner Shadow – Color: Black, Opacity: 15%, Distance: 0px, Size: 5px;

Step 5

Finally add some Stroke. You will notice that this is a Gradient Stroke with same colors as our buttons Gradient Overlay. The only difference here is that gradient direction is set -90, which is the opposite of buttons Gradient Overlay. With this little trick we made a nice light effect to our button and made it stand out a bit more.

Step 6

Done with effects, time for some shine! Create a new layer above others.

Step 7

Cmnd (Ctrl) + Click on Button shape layer. We have made a selection out of it.

Step 8

Choose Marquee Tool. Hold down the Alt key and Subtract the half from selection.

Step 9

Choose Black to White Gradient Tool, set the layer mode to Screen and pull upwards from bottom of selection to about 30px outside the selection. There you have it! A nice shiny button.

Step 10

Add some text like I did here. Draw in a circle and position it like you see it in the picture. Add a Gradient Overlay with same values like shown in the screenshot. Finally give it a 2px white Inside stroke.


Step 11

Choose Shape Tool. From presets choose an Arrow. Rotate it.

Step 12

Like the image says, position the arrow in bottom direction.

Step 13

Now choose Direct Selection Tool and select the shape. Next, select two points from upper part of the arrow and move them with Arrow Keys few pixels to the right. Do the same with the right top side of the arrow, just shift it to the left. This way our top part will become a bit thiner. With the same tool adjust the bottom part (triangle).

Step 14

This is how it should look like. You can also see the layer structure.

#2 Navigation Menus

The most important part of a website: the navigation. I’ve chosen the example that uses some transparency and fade out effect (taken from legacylocker.com).

Step 1

Open a New Document, same dimensions from previous example. Create a New Layer and fill it with Gradient Overlay using the color hex values you can see in the image.

Step 2

For the purpose of this example I added few clouds :)

Step 3

Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.

Step 4

Add a Quick Mask to this layer. Choose 200px radius Soft Brush, set the color to Black and mask the ends of this rectangle, like you see it in the image.

Step 5

Draw in another Rectangle, but much higher. Put it under the small rectangle. Use the same color and Opacity. Again add a Quick Mask to this layer.

Step 6

Choose 600px Soft Brush and carefully mask bottom of the rectangle os that top line stays visible across the document.

Step 7

Now we can play a bit with the small Rectangle by adding some light and shadows. Cmnd (Ctrl) + Click small Rectangle to make a selection out of it. Go to Select>Modify>Contract and enter 1px. Create a New layer and set Mode to Overlay. Choose 200px Soft Brush, color white and click few times the top part of the rectangle just like you see in the image.

Step 8

Do the same with bottom part just change the Brush color to Black.

Step 9

Here you can see how this looks like. It’s really a subtle effect of light and shadow which you can use wherever you want.

Step 10

With Line Tool draw in a line just the same width as small rectangle. For color choose #8dd1fe.

Step 11

Mask the ends of the line just like we did in Step 4. Copy this line and shift it to the bottom of the small rectangle.

Step 12

Finally I added some Navigation items and that’s it!

#3 Typography Inset

Even though we’re used to seeing this technique now, it’s still a good skill to add to your toolbox. Please use it only if you have to :) The example was taken from forabeautifulweb.com.

Step 1

Same New Document filled with #aa8e5c.

Step 2

I added some floral brushes just to recreate the same background from the example :)

Step 3

Choose Type Tool, set font to Times New Roman. Choose color #591e0d and type something.

Step 4

Add Inner Shadow filter and use settings like shown in the image.

Step 5

Add 2px Outside Stroke with color set to #bc9f6c.

Step 6

Done! What, that’s it? Yes, that’s it! Simple and effective.

#4 Faded Shadow

With a little bit of Blur and Quick Mask we can create shadows that fade out in any direction we want to. With this effect you can make boxes look like they pop out of the background. This example is from mint.com.

Step 1

First thing first, the background. As usual by now, within New Document same dimensions like previous ones.

Step 2

Draw in a white Rectangle.

Step 3

Create a New Layer and place it under the white rectangle layer. Cmnd (Ctrl) + Click white rectangle shape. Fill the empty layer with Black.

Step 4

Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.

Step 5

Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and carefully mask all

Step 6

Now this was pretty easy, don’t you think? Now you can play around with this technique and who knows what awesome results you’ll get.

#5 Depth and 3D Space

More and more interesting 3D elements are being used in web design lately. Here you can see how with just few extra layers, you can create an illusion of 3D space. This example is from mosaiko.com.br.

Step 1

New Document filled with Black.

Step 2

With Rectangle Toll draw in rectangle and fill it with #21262a.

Step 3

With same tool selected draw in another, this time smaller rectangle and fill it with #191b1d. These two rectangles will create our space on canvas. It will look like a wall is passing through it.

Step 4

Cmnd (Ctrl) + Click bigger rectangle shape to get a selection. Create a New layer. Choose 300px Soft Brush, color Black and click few times in top center of the selection.

Step 5

Do the same with smaller rectangle but this time click on bottom center part of the rectangle.

Step 6

Now, do the same for the background layer itself just use White as Brush color.

Step 7

Draw in a 85×20 px rectangle, fill it with #555759.

Step 8

Add following effects. Drop Shadow – Color: Black, Opacity: 25%, Angle: 90, Distance: 1px, Size:4px. Inner Shadow – Color: White, Opacity: 7%, Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay, use values provided in the image.


Step 9

Choose Pen Tool and draw in a shape like you see in the image. Fill it with #555759.

Step 10

With a little use of Quick Mask and some Brushing we will create the illusion of 3D space. First add a Quick Mask to the layer and with 100 px Soft Brush mask the sides of the stripe.

Step 11

Next, select the whole stripe and choose 100px Soft Brush again. Create New Layer, set color to white and click few times at the beginning of the path but only with the top of the brush just like shown in the image.

Step 12

I added some navigation links, copied few more stripes, modified the perspective a bit and there we have it.

I hope you enjoyed it and hopefully learned something new. Watch out for Part 2 where we will be covering more interesting Photoshop techniques.

138 Responses to “5 Advanced Photoshop Techniques for Web Designers”

  1. I do a lot of PSD to WordPress work and these are definitely some of the more common design elements being used at the moment. Nice round-up!

  2. A handful of quite common but immensly useful/re-usable tips.

  3. Thanks guys. Watch out this Blog for more Killer Photoshop Techniques next week. Definitely worth it :)

  4. Cheers Marko, some stuff there that’s certainly worth using – nice to hear we’ll be getting some more to play with.

  5. Fantastic tips and techniques. Stumbled and Retweeted :)

  6. Thanks a lot Marko. You know your stuff! Rock on.

  7. @Editor:
    should really pay more attention to typo´s and missing punctuation, leave this space/blog above the rest as it used to be.

  8. fabbbb, really it was very nice, i like that

  9. Like it! The way you teach it is so easy and straight to the point. Simple but importants techniques. I learned a lot.
    Continua – Keep it up

  10. I ever took a photoshop course but do not remember this.Thanks for the techniques.
    ภูเก็ต

  11. WOW! Very good tutorial, thanks

  12. wow, in my opinion one of the coolest posts of the year. simple yet invaluable techniques

  13. Good stuff! I need to try some 3D effects!

    *this HUGE comment box is sick! haha..

  14. The 3D depth suggestions were particularly helpful. Great simple tips!

  15. Eeeeexcellent….

  16. Awesome, and thanks a lot.
    The 3D tut helped me so.

  17. Travis Holliday on August 21, 2009 at 5:56 pm said:

    Excellent round up of quick photoshop tips. Thanks, Marko!

  18. Thank you all for great comments. Will be posting more great PS stuff next week so stay tuned :)

  19. Why don’t you give any credit to the designers/agencies who’s work you’re using as an example? A simple link to “Original” would probably suffice, but some mention of their mad skills would be nice. In one example (http://forabeautifulweb.com/) you can’t even see the full name of his site.

  20. good little collection of tricks. this is the kind of thing that every beginner designer is hoping to add to their arsenal.

  21. I have a problem with the way the examples are done. You make it seem as each was your original work, when clearly you’re copy/pasting the work of other designers and treating it as your own, without due credit. Poor form.

    • Sorry Kyle, but if you read the article carefully you will notice that it is more then obvious that I used some example sites here.

      • Perhaps rather than adding credit after the fact, and making off-hand references to their workshops, it’d be best to at the very least attribute each site’s screenshots to the designer. I don’t believe that will repair relations with those offended, but it makes it immediately more clear who you’re being inspired by.

        For example, if I wasn’t familiar with Andy Clarke’s “For a Beautiful Web”, I wouldn’t know that it was his sight you were using as an example. You’ve also only given two of the designers any mention thus far. It comes across as a PR patch, and perhaps a poorly done one at that.

        I’m sure you had no ill intent, but perhaps once any complaints came your way a full crediting of each source would at the very least help clear the air.

      • I missed your latest comment, where you sourced your material. As a result, please disregard my last paragraph of my last comment. Perhaps your attribution would work better if it was more visible at the top of the article?

  22. Example sites I used for this article:

    1. Transmissionapps
    2. Legacy Locker
    3. For a beautiful Web
    4. Mint
    5. Mosaiko

  23. This is an awesome list of effects. Much appreciated.

  24. Great article, but I don’t think your method for #3 is quite right. The highlights don’t seem to be close to the original site you reference.

    Personally, I call it a “letterpress effect” and do it by duplicating the text layer, changing the color to white, moving it behind, and dropping it down 1 pixel. If it’s light text, change the duped layer to black and move up 1 pixel. Adjust opacity accordingly.

    Good stuff overall … nice work.

    • Yes Erik, it can be done in few different ways. Personally I add a Drop Shadow 1px, Distance: 1px, Size:0px. I avoid having one extra layer. But what you suggested is also a way of doing it. Thanks.

  25. Thanks for those tips. Nice and simple – but its good for newcomers to get straightforward directions.

  26. with regards to the 3d technique, i would recommend using a single vanishing point to add to the illusion of depth.

  27. Awesome tutorials !

  28. Amazing! Thanks!

    Will be checking you blog a lot more :)

  29. Thank you so much for this useful tutorial, the tips could be used for badges and quite alot of other stuffs.

  30. Great article! Lots of useful techniques! Thanks for the props in using Rockbeatspaper’s design on Legacy Locker as an example! http://rockbeatspaper.com/work/legacy-locker Check our case study and browse our site.

    Look forward to reading more of your excellent posts in the future!

  31. I think all of us Web Designers on occasion are looking to finer tune our Photoshop skills, these tutorials are a brilliant resource for that. Are there any other good resources out there for advanced photoshop tutorials?

  32. Great article! I’m looking forward to trying out the button technique!

  33. awesome that’s great idea for editing photoshop… Thanks for nice tips…

  34. Brilliant post, would love to see more of this kind of info from you guys!

  35. Oh yeah, your tips are terrible !

  36. Thanks a lot, will use a couple of these techniques for my next design 😉

  37. Excellent! Thanks for the effort. Great set of tools for any designer (web or graphic).

  38. Any tips on other useful tutorials are welcome.

  39. Abhijeet on August 30, 2009 at 8:42 pm said:

    awasome dude thanks for very usful tips

  40. This One was really great, thanks Ryan.

  41. Hey there, not sure if you’re taking requests but I’d love to see a from PSD to HTML on the 3D layout shown in this posting.

  42. I always saw these styles and never knew how it was done. Thank you so much so this. Will be implementing these soon :)

  43. Awesome post, great read. thanx! Also, great looking site!

  44. awesome post!

  45. whoa, that is sweet. Im gonna go try a few of these..

  46. Great article, I especially benefitted from the faded shadow tutorial.

  47. 5 Advanced Techniques on Being a Modern “Web Designer” (a.k.a., “Do a couple of web sites in a trend-driven style, and call yourself in expert in only five steps…”)

    Step 1. Do a design. Get a snippet of it used in a post, whereupon the author never even hints at the source material being their own work.
    Step 2. Author spends lots of time creating a helpful tutorial for people to enjoy.
    Step 3. Whine and tweet about not getting sourced amongst your equally whiney friends on social media outlets.
    Step 4. Cry some more, and then go post on the author’s blog about it.
    Step 5. Profit. Because, not only did you just get site traffic, you also made yourself look like an insecure whiney dodo.

  48. Thanks for sharing Marko.

    I’ll have these in a PSD, for later use, in no time!

    Honest articles that reveal design secrets, like this one, always make the design industry cry a little. It’s fear driven Tweets and comments that show the true insecure nature of these person(s).

  49. holy cr*p, that is an amazing collection of tuts!
    Thanks.

  50. pretty nice theme thank alot !!

  51. nice tutorials!

  52. Does anyone proofread these before you post them? In the second example “#3dsdsd” is not a hex color code. And in the first example, in the first gradient, “#173760″ is not the pale gray that you’re showing.

    You’ve got some nice work, but your blog would benefit from having someone proofread for obvious errors like these.

  53. Photoshop is a must to use and a very fantastic tool for web designing. Thanks for your kind and valuable suggestions.

  54. Thanks for these. The simple clean button was the best.

    .bless

  55. Waaw! you’re soo cool… thanks for the share!
    I’ll try m’

    Keep In Touch!
    tha collector.

  56. Nice tutorial.. but your hex values are pretty much a mess. (#3dsdsd on tutorial no.2? And #173760 from Step 3, tutorial no.1 is not gray, but blue)

  57. very nice and cool.. thanks :)

  58. very nice thank’s :)

  59. Ok, some nice Tips, but really, there is nothing advanced.

  60. The depth & 3d space mention is something I’ve never thought of before well done!

    Will be using this soon :)

  61. WOW. really cool.
    but would you tell me how can I encode PSD to HTML or XHTML?

  62. Step 2 of #1 Awesome Buttons – You changed the layer style to normal instead of default multiply and didnt mention it. Just thought you might want to update it. Very good article… off to read the second one now :-)

  63. It’s awesome, i love the tutorial about Depth and 3D Space :)

  64. Isn´t example three missing a step? The first example does not look like the outcome. I think you are missing a highlight step..? Like a tiny dropshadow or, as someone else posted, a new white layer below. The stroke do add some depth but not enough, imho.

  65. 非常实用的技巧,在做网页设计的时候经常会用到,学习了,谢谢!

  66. thanks for sharing this awsome tuto 😉

  67. awesome techniques, thanks

  68. all of these tutorials seem to be missing steps.

  69. Pratikwaghela on January 20, 2011 at 12:23 pm said:

    nice tutorial for understanding some basics of graphics
    thanks marko

  70. super cool FX. We will give some of the tips a try on the next project.

  71. Chip Frapper Mocha on April 10, 2011 at 2:09 pm said:

    i like #5 it nice tutorial

  72. Chip Frapper Mocha on April 10, 2011 at 2:09 pm said:

    i like #5 it nice tutorial

  73. Thanks for this excellent tutorial. It was very practical and useful for my own needs. How did you add the clouds though? I’d be interested in how those sorts of elements are incorporated in the PSD design. Thanks!

  74. Hey great tutorial…thanks!

  75. Novies on May 31, 2013 at 11:03 pm said:

    no images..pls update the source…

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more