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 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!
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).
- Posted at June 5th, 2006 06:30am
- Posted by Tommy Maloney
- Filed under Effects, Tutorials, Web
- Tagged with design kit, Effects, photoshop, tutorial, Web, web 2.0
- 12 Comments have been made
- Web 2.0 Design Kit
- Digital Painting with Light
- Peeling Sticker Effect
- Pixelated Mosaic Edges
- Lightbox 2.0 Web Photo Gallery