DesignerTuts » Website Templates

Grunge Template in 10 minutes

admin — Thu, 14 Feb 2008 10:00:53 +0000

I absolutely love when clients want a grunge or gothic looking template. They are by far the easiest to create simply because they are chaotic, random, and should look rough around the edges. For this tutorial, I set my stop watch for 10 minutes to see what I could create in that time. Without further ado, here’s the 10 minute grunge theme.

We’ll start with an 800×900 image:

We’ll also create a second image in order to make a custom grunge brush. In that second image I simply made a bit of a scribble and then defined it as a custom brush below:

After I defined the brush, I then selected it from the brush menu. I hit F5 to bring up the Brushes box, which allows me to edit a brush and turn it into a well designed tool. In our case, let’s enable shape dynamics with the following settings:

Also, we’ll enable scattering with the default settings, smoothing, and finally Dual Brush, with the following settings:

With our brush defined, let’s use it to create this:

Using the text tool, I’ve now written our site’s name. I used a light outer glow set to blue:

Now let’s change the brush to gray and let’s fill in the body like so:

Next, let’s use the Rectangle Tool to create a black box. We’ll then create a new layer above the box and use the brush (back to black) to make the sides look like they’re leaking:

Combine the box with the layer above it into a new smart object, and then rasterize the layer. We’re doing that, because now we’re going to add a light blue Stroke, set to 1px and inside. Once that’s done, convert the layer to a smart object again and rasterize. Then select Filter > Blur > Motion Blur and set the Angle to 0 and the Distance to 42px:

Now let’s go down below the very first layer and add some pink splashes with our brush:

On the sidebar, let’s create a pink box using the Rounded Rectangle tool. We’ll want a 1px black stroke, a pink color overlay, an overall opacity of 90%, and the following Bevel and Emboss:

To top it off we’ll add a menu (the text has a 3 px, light blue stroke.)

And with the 10 minute alarm going off, here’s our final result:

Update:

Just found this great collection of Grunge Fonts

Userbar

admin — Tue, 25 Dec 2007 16:56:40 +0000

In this tutorial I’ll teach you how to make a simple userbar for use in a forum signature for example.

To start this tutorial you’ll need to create a 350×19px document.
Fill your document with a colour. I am using black for this tutorial as I think it has the best effect.

Once you have filled your document you need to select the elliptical marquee tool, you can see this in the image below.

You now need to select roughly half of your userbar, you can do this from either the top or bottom. You can see me select the top half of the userbar below.

We are rougly half way through the tutorial. You now need to edit the hue/saturation of the selected half. To do this you need to click the button shown in the image below and then select Hue/Saturation. Both buttons are highlighted in the image below.

You should now see a box that says hue, saturation and lightness. We only need to edit lightness, in the lightness box you will need to enter 30. You can see the box you need to enter 30 into in the image below.

You should now have something like this.

We now need to add text using your favorite font. My result with text is below.

You have your simple userbar! You can now learn how to add images to it and make it even better. I would advise you add a 1px black border around the userbar too make it better. To make it even better I’ll show you what the userbar can look like with say, an msn icon.

Cut out your small icon, it has to be small otherwise it won’t fit on the userbar. Once you have cut out the little icon just paste it onto your userbar and position it and add a 1px white stroke. My outcome is below.

Good luck on creating many more userbars and advancing your userbar creating skills.

Tech Website Layout

admin — Mon, 17 Dec 2007 12:59:54 +0000

A website layout with a hi tech feel. This tutorial will show you how to create the layout together with some hi-tech buttons.

Create a new 800 X 200 file. Now, go to your tools, right click on your lasso tool and select ‘polygonal lasso tool’

Now, create a new layer (rename it layer 1), select something similar to what I have below:

Fill your layer with the color code: #E1E1E1. Now, double click on your layer 1, the layer style window will pop up. Fill in the following properties for Inner Shadow ,Inner Glow and Gradient Overlay

This is what you should have so far:

Create a new layer below layer 1 and rename is layer 2. Import one of your abstract graphic art or an abstract photograph.

Create a new layer above layer 1 & 2. Repeat steps 2 & 3 for the bottom part of the header:

Create another new layer above all of your other 3 layers. Type in the your website’s name with stylish font using the color #E1E1E1.

On top: click > Layer > Layer Styles > Stroke… Change your size to 3 px and color to black.
Create a new layer below your text layer. Using one of your custom tools, draw it out using the same font color, then add the same layer style stroke to this layer. (If you have a logo, you can place it here instead). Change your layer’s opacity to %65:

Now that your header is complete, you need buttons for your website. Create a new 200 x 35 file.
Create a new layer, fill it in with the color #E1E1E1. Go back to your header’s photoshop file. Right click on layer 1 > copy layer style. Return to your button file > right click on the layer > paste layer style. The layer style should now be copied into your layer.

Create a new layer above this one. Type in your button’s name. Go back to your header style > right click on your text’s layer style > copy layer style. Return to your button layer > right click > paste layer style:

Now that you have a completed header and buttons, you can easily code them together (using CSS or tables). Now you’ve learnt how to create a quick and fast appealing design!

Website Panel

admin — Tue, 11 Dec 2007 12:46:05 +0000

Its difficult to describe what this is. I’ve called it a panel. Whatever you call it, its the sort of thing you would use in a website perhaps to contain your navigation controls.

Start off with a shape. Use your custom tool to create the shape below (The corners are at radius 20 px). Fill it with the color code: #D9D9D9. Rename the layer “base”

Add in the following properties to this layer’s layer style:

The Stroke color code is #949494

Create a new shape above the ‘base’ layer.

Add in all of the same layer style to this layer except for the drop shadow. Click on Gradient Overlay, check off ‘Reverse’ beside the gradient.

Add in a circle shape above the 2 layers. Use the same layer properties as the layer above, but make the gradient slightly darker and do not reverse the gradient.

You can add in a logo and arrow to the circle button to dress it up.

You can also add in layer styles to the second layer to make it look more realistic or to add more color to your graphic.