Web 2.0 Design Kit

Web 2.0 is a term coined by O’Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular “Web 2.0″ design effects using Photoshop.

Gradients

The reflective or glass effect was first popularized by Apple. There have been many tutorials about creating Apple’s “Aqua Buttons” and this is a similar effect.

After making your selection, create a new Gradient Fill Layer [Layer > New Fill Layer > Gradient...] or use the Fill Layer button at the bottom of your Layers palette.

web201

Click on the Gradient to bring up the Gradient Editor. Select the “Foreground to Background” preset from the list of presets. Click on the first Stop on the left and set the Location to 50%. Then set the color to something a little darker than your base color. I’m going to use greys because it leaves me some flexibility for changing the color later.

web202

Create another Stop to the left of the gradient and set the Location to 49%. Set the color to something slighter darker than the 50% Stop. Create another Stop at Location 0% and make it slightly darker than the Stop at 49%.

web203

Press OK and you now have your gradient.

web204

To add some color, create a new Solid Color Fill Layer [Layer > New Fill Layer > Solid Color...] or, again, use the button at the bottom of the Layers palette and select a color for the gradient. Press [Ctrl + Alt + G] or [Layer > Create Clipping Mask] to create a clipping mask of your new layer. Scroll through the Layer Modes [Shift + -] until you find one that you like.

web205

web206

Reflections

Reflections have become a huge trend for website design lately. We’ll first start by selectin the Type Tool [T] and entering the type we want to reflect.

web207

Duplicate that text layer by pressing [Ctrl + J]. Drag the duplicated layer below your original in the Layers Palette. Right click on the duplicate layer in the palette and choose [Rasterize Type].

web208

With the duplicate layer chosen in the Layers Palette, press [Ctrl + T] to bring up the Free Transform. Right click in the transform binding box and choose [Flip Vertical]. Drag your flipped layer so that the bottoms match.

web209

Add a Layer Mask by click on the button at the bottom of the Layers Palette or by going [Layer > Layer Mask > Reveal All].

web2010

Press [D] to reset your colors and then press [G] to select the Gradient Tool. With the layer mask selected in the Layers Palette, which it should be already, drag from top-to-bottom with the Gradient Tool until you get the fade you desire.

web2011

You now have your type reflection. You can use the same method for any object also.

web2012

Soft Shadows

Another popular effect is the soft shadow. It’s actually more of a glow than a shadow, so we will approach creating the effect this way.

Select the layer of the object you want to add the shadow to, in my case it’s the gradient layer I created before, and click on the Add New Layer Style button (at the bottom of the Layers Palette) and choose [Outer Glow].

web2013

Set the Blend Mode to [Normal];
Color to [Black] or [000000];
Size to something like [8], and
Opacity to [35-40%].

web2014

You will now have a soft shadow that should look similar to this:

web2015

Star Shapes (Violators)

Another trend popping up is the star shapes or violator (thanks comment-er) for getting attention.

Click and hold on the Shape Tool until the sub-menu opens and choose the Polygon Tool.

web2016

Create a new Solid Color Fill Layer and choose whatever color you want your shape to be. Press [D] then [Ctrl + Backspace] to fill the layer mask with black.

Up in the Options Bar, click on the down-facing arrow to bring up your Shape Options. For my shape I checked the [Star] checkbox on and set the Indent Sides By to [20%]. In the Options Bar I checked [Anti-alias] on and set the Sides to [20].

web2017

Now I’m ready to draw out my star:

web2018

web2019

To style it a little more, I used a Gradient Fill Layer instead of a solid color and I added a tight Drop Shadow Layer Style, settings: Opacity [60%], Distance [1px] and Size [2px].

web2020

In the next installment of this 2-part series, I will show you how to create diagonal line patterns, rounded corners and some other Web 2.0 effects.

You can now read Web 2.0 Design Kit Part 2.

MASTER FILE DOWNLOAD
I’ve decided to make my master .PSD file for these tutorials available for download.
Download the Web 2.0 Design Kit Master PSD file (82.5kb ZIP).

Comments Spill 31 Comments

  1. May 26, 2008 10:02 amEthos Blog » Blog Archive » Web 2.0 Style for Designers

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  2. June 3, 2008 9:32 pm105+ Logo Design Tuts And Resources

    [...] Web 2.0 Design Kit – Learn how to create some of the more popular “Web 2.0″ design effects in Photoshop. [...]

  3. June 16, 2008 4:34 pm71 Gradient Resources for Web Design | Vandelay Website Design

    [...] Web 2.0 Design Kit from Photoshop Lab. [...]

  4. June 28, 2008 11:23 amWEB STREET - web2.0 Photoshop??????????

    [...] Web 2.0 Design Kit | Part 1 [...]

  5. July 2, 2008 5:49 pm68?web2.0?????? « ????

    [...] Web 2.0 Layout – Tutorial Kit 57. Web 2.0 template tutorial 58. Irish Content Box Tutorial 59. Web 2.0 Design Kit | Photoshop Lab 60. Web 2.0 Design Kit, Part 2 | Photoshop Lab Web 2.0 – Was es sonst noch gibt…61. Web 2.0 [...]

  6. July 29, 2008 4:46 amWeb 2.0 Tutorials Round-Up | Tutorials | Smashing Magazine

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  7. August 16, 2008 5:12 pmlinks for 2008-08-16 « Doug - Off the Record

    [...] Delicious Account Web 2.0 Design Kit | Effects, Tutorials, Web | Photoshop Lab August 17, 2008434 + essential web 2.0 Tools in one place! August 17, 2008Little Hacks | [...]

  8. August 18, 2008 3:58 amSave the Pixel - the Art of Simple Web 2.0 Design :: Asia Access

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  9. August 18, 2008 7:52 am???? ???????? ????? » ??????? ??????? (?????) » ?? 2 ?? ????? ????

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  10. August 23, 2008 3:59 amlinks for 2008-8-18 « Doug - Off the Record

    [...] Web 2.0 Design Kit | Effects, Tutorials, Web | Photoshop Lab This tutorial will show you how to create some of the more popular “Web 2.0? design effects using Photoshop. (tags: webdev webdesign web2.0 web tutorials tips) [...]

  11. October 1, 2008 6:09 amWeb 2.0 Tutorials Round-Up « Wish Upon a Star

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  12. October 20, 2008 2:42 amWeb 2.0 Trends « Khansuhel’s Blog

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  13. October 27, 2008 9:10 amPhotoshop tutorials: photoshoplab « Being No Other

    [...] ???????? ??????Web 2.0 Design Kit part 1 ??? part2 [...]

  14. November 17, 2008 2:04 pmSmart besöksstatistik (och testverktyg) | Design pending

    [...] någon av mina dagliga surfarrundor sprang jag på en i sedvanligt Web 2.0-manér designad sida som hette Crazyegg.com. De lovade att leverera något spektkulärt när de blev [...]

  15. November 23, 2008 6:31 amWeb 2.0 Tutorials Round-Up | websiteinseconds.com

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  16. November 23, 2008 6:31 amWeb 2.0 how-to design guide | websiteinseconds.com

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  17. December 1, 2008 11:36 pmWeb20 Design Kit - Header im Glossy Stil herstellen |

    [...] Hier gehts zum Tutorial: Klick mich! [...]

  18. December 9, 2008 7:49 am26 Logo Design Tutorials

    [...] Web 2.0 Design Kit [...]

  19. January 5, 2009 4:40 amWeb 2.0 Webdesign-Tutorials

    [...] 59. Web 2.0 Design Kit | Photoshop Lab [...]

  20. January 18, 2009 4:59 amVoorbij web 2.0 design: 3 tips - Frankwatching

    [...] behoefte voor ordening. En je zult zien dat je in staat bent om drop-shadows, spiegelingen, kleurverlopen en grote stervormige emblemen achter je te [...]

  21. March 13, 2009 1:17 amBest of the Logos | Tips and Inspiration for creating killing logos » Blog Archive » Huge Logo Inspirational Resources

    [...] Web 2.0 Design Kit – Learn how to create some of the more popular “Web 2.0? design effects in Photoshop. [...]

  22. March 28, 2009 10:01 amWeb 2.0 Tutorials Round-Up | Web design, graphic design resource and JavaScript code library

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  23. March 30, 2009 1:58 amA Quick Reflection « My Photoshop Notes

    [...] Tutorial Here [...]

  24. April 10, 2009 3:57 pm40+ Tutorials on Photoshop Website Design and PSD to HTML | tripwire magazine

    [...] Web 2.0 Design Kit [...]

  25. April 13, 2009 5:27 amHow to Create Web 2.0 Site | Theme Heven

    [...] Web 2.0 Design Kit [...]

  26. May 27, 2009 2:03 amPHP Lovers’ Blog » Web 2.0

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  27. May 29, 2009 3:29 pmAdept > Web 2.0 design guide

    [...] Here’s how to do it (from photoshoplab.com) » [...]

  28. June 9, 2009 6:35 pmUsing Photoshop Styles to create awesome web2.0 effects in no time | tripwire magazine

    [...] Web 2.0 Design Kit [...]

  29. July 16, 2009 1:41 pm105+ Logo Design Tuts And Resources | Web Design Tuts

    [...] Web 2.0 Design Kit – Learn how to create some of the more popular “Web 2.0″ design effects in Photoshop. [...]

  30. July 28, 2009 3:19 amTutoriales para diseño Web 2.0 | VisualGraf Comunicación

    [...] 60. Web 2.0 Design Kit | Photoshop Lab [...]

  31. September 26, 2009 12:24 pmWeb 2.0 Design Tutorials « Miss Doofus

    [...] Web 2.0 Design Kit – by photoshoplab [...]

Sorry, the comment form is closed at this time.