Web 2.0 Design Kit, Part 2

In this continuation of the Web 2.0 Design Kit I’ll show you how to do a few more simple effects that I’ve seen becoming more popular in web design.

Diagonal Line Patterns

There are a lot of websites out there that use some sort of variation of a diagonal pattern. One of them being this website (look up) and a few other sites. The hardest part of this is creating the actual pattern.

The first thing you’ll want to do is create a new document by going to [File > New] or pressing [Ctrl + N]. When the New Document dialog opens, set the Background Contents to [Transparent]. The dimensions settings will depend on the size of the line you want to create and the amount of space between the lines. For this first example I’ll just be using 1-pixel wide lines spaced 1-pixel apart, so my dimensions will only have to be 3px x 3px.


Since my document is so tiny I’m going to zoom in as close as possible, 1600%, by pressing [Ctrl + =]. Using the Pencil Tool with a Brush Size of 1, I’ll draw three dots in a diagonal.


Select All by pressing [Ctrl + A] and go to [Edit > Define Pattern...]. You can then name your pattern in the Pattern Name dialog box.


Your new pattern is now ready to use. Create a new Pattern Fill Layer by going [Layer > New Fill Layer > Pattern] or by using the button on the bottom of the Layers palette.


You can click on the down arrow next to the current pattern, if your new one isn’t selected, to find your pattern. Click on the small right-facing arrow and choose “Small List” to see the names of your patterns.


Press OK to finish the new Pattern Fill layer. You’ll now have your diagonal pattern.


It’s pretty ugly right now, so I’m going to drop the Opacity of the new layer to around [15%].


To create a thicker line pattern we’ll have to determine our size and spacing then create a new layer. I’m going for 4-pixels wide spaced 4-pixels apart, so I’ll create a new document [Ctrl + N] 12px x 12px. Select the Line Tool and set the options in the Options bar to [Fill pixels], Weight [4px], and [Anti-alias] unchecked.


Draw your line diagonally holding the [Shift] key to make sure it’s completely diagonal. Then zoom in really close again.


Select the Square Marquee tool [M] and draw a 7px x 7px square and drag the corner to the line like shown:


Press [Ctrl + J] to duplicate the selection onto its own new layer. Drag that new layer to the corner. Then make another square selection starting in the corner like shown:


That selection is going to be the new pattern, so, go to [Edit > Define Pattern] and follow the steps from before.


Rounded Corners

Rounded corners are nothing new in web design. It became trendy then died down a little bit, I think, because it’s hard to program for (I’m a web developer), but with some new solutions popping up, they’re becoming easier to deal with.

This method will show you how to create smooth rounded corners that can be fine-tuned. A little more flexible and technical than just going [Select > Modify > Smooth] or using the Rounded Rectangle Shape tool.

Starting with a square or rectangle selection, create a new Solid Color (or Gradient) Fill Layer, making sure your selection is smaller than your canvas.


Now we’ll add a small Gaussian Blur by going [Filter > Blur > Gaussian Blur]. Setting the blur higher will make a more rounded corner; lower setting for a smaller corner. A good average is usually [3.0 pixels].


Now we can use two methods to finish our corners, Curves or Levels, so I’ll show you both. Personally, I like using Curves, so I’ll show you that method first.

Bring up the Curves dialog box by pressing [Ctrl + M].


Click on the Curves line to create an adjustment point. Add a point to the upper end of the line and drag it towards the middle. Do the same with the lower end of the line. Adjust the points until you see your blur start to sharpen and your rounded corners appear. Use the image below for reference.


You now have rounded corners.

To use the Levels method, bring up the Levels dialog box by pressing [Ctrl + L].


Drag the two side sliders towards the middle and you’ll see the blur disappearing and the rounded corners starting to show.



With a little experimenting and a combination of these techniques, you can make your website design a little more modern and (maybe) a little more trendy.


Note: If you want to make an angry “Web 2.0″-related comment, please read this first.

Thanks and enjoy!

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).

Medications are sumptuous, and some men cannot get the medicaments they need. Absolutely, one of the exciting place where Americans can order remedies is online pharmacy. You must always ask physician for vocational consultation about the treatment. What about sexual dysfunctions and vardenafil 20 mg? Certainly it isn’t all. Conceivably you read about vardenafil dosage. More information about the matter available at levitra dosage. Hardening of the arteries can contribute to erectile malfunction. The truth is that nearly all prescription remedies have some kind of unwanted side effects, from headache to death.

Comments Spill 12 Comments »

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

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

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

    [...] 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 Colour Palette 62. The Web 2.0 Secret Weapon – [...]

  3. August 6, 2008 11:10 pmorlybabe

    Can I please know what theme / WIndows style are you using on your Windows (in the screenshots shown on the tutorial)? It looks really nice…

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

    [...] 61. Web 2.0 Design Kit, Part 2 | Photoshop Lab [...]

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

    [...] 61. Web 2.0 Design Kit, Part 2 | Photoshop Lab [...]

  6. October 29, 2008 1:10 amBookmarks « Kathirvel K Blog

    [...] Photoshop Lab.com – Web 2.0 Design Kit [...]

  7. November 23, 2008 6:32 amWeb 2.0 Design Kit | websiteinseconds.com

    [...] You can now read Web 2.0 Design Kit Part 2. [...]

  8. January 5, 2009 8:16 pmBookmarks for Enero 6th from 00:39 to 02:10 | FACIL TUTORIALES

    [...] Web 2.0 Design Kit, Part 2 – [...]

  9. February 11, 2009 5:59 pmWeb 2.0 Webdesign-Tutorials

    [...] 60. Web 2.0 Design Kit, Part 2 | Photoshop Lab [...]

  10. April 4, 2009 2:45 amWeb20 Design Kit - Header im Glossy Stil herstellen | WEBSTYLE-BLOG.DE

    [...] Hier gehts zu Teil2 des Tutorials: Klick mich! [...]

  11. May 29, 2009 7:13 pmWeb 2.0 Layouts, Menus, Gradients, Headers | Design Dazzling

    [...] Web 2.0 Design Kit, Part 2 | Photoshop Lab [...]

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

    [...] 61. Web 2.0 Design Kit, Part 2 | Photoshop Lab [...]

Leave A Comment TrackBack URL

Warning: Creating default object from empty value in /nfs/c01/h02/mnt/709/domains/photoshoplab.com/html/wp-content/themes/champ/functions.php on line 114

Warning: Creating default object from empty value in /nfs/c01/h02/mnt/709/domains/photoshoplab.com/html/wp-content/themes/champ/functions.php on line 114

Warning: Creating default object from empty value in /nfs/c01/h02/mnt/709/domains/photoshoplab.com/html/wp-content/themes/champ/functions.php on line 114

Warning: Creating default object from empty value in /nfs/c01/h02/mnt/709/domains/photoshoplab.com/html/wp-content/themes/champ/functions.php on line 114

Warning: Creating default object from empty value in /nfs/c01/h02/mnt/709/domains/photoshoplab.com/html/wp-content/themes/champ/functions.php on line 114