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.

web2021

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.

web2022

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

web2023

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.

web2024

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.

web2025

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

web2026

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

web2027

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.

web2028

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

web2029

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

web20210

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:

web20211

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

web20212

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.

web20213

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

web20214

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

web20215

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.

web20216

You now have rounded corners.

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

web20217

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

web20218

web20219

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.

web20220

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

Thanks and enjoy!

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