photoshoptown.com

If you're new here, you may want to subscribe to my RSS feed.

I am going to show you how to make your web menus looks unique by using a free vector brush pack you can download.


Click Here for Full Image

So first go here and download the brush pack. I am not sure if this works with earlier versions of photoshop. I doubt these will work with photoshop 7.

http://myphotoshopbrushes.com/brushes/id/146

Once you have done that, unzip the file to get the .abr file out. To get brushes into photoshop find your adobe folder in your program files that contains photoshop. Within the photoshop folder there should be one called presets then within that folder you will see brushes. Drag the file from the brush pack in that folder. Or you can unzip it directly in.

Once you have done that we need to load them in photoshop. So once in photoshop get your brush tool and open your brush preset picker



Click on the little arrow at the top right



When the menu pops up to go “load brushes”



Find the brush pack you just downloaded and click “load”.

Alright, that should be it for loading the brush into photoshop.

Now I am going to run you through a quick little menu just so you get an idea on what you can do with the brushes. I am going to start a canvas of 970X300px so I have plenty of space to work in and make the background black.

Make a white rectangle midway down your canvas like this:



Click Here for Full Image

Then apply these blending options to that:

Inner Shadow

Inner Glow

Color Overlay

Stroke

That should look something like this



Click Here for Full Image

After that set its opacity at 90% so we will be able to see our vector brushes through the menu.

Ok for a final touch, in a new layer add a white rounded rectangle at about 10px roundness across the top of the menu less than halfway down.



Click Here for Full Image

Now set its blending mode to overlay and its opacity to about 50%.



Click Here for Full Image

Make a new layer and grab the 3rd brush down in the set. Make your brush color white and put an accent at the bottom left of the menu. I changed the brush size to quite a bit smaller 140px. Add another one to the other side of your menu in the same spot except flip it horizontally.



Click Here for Full Image

Now I want to blend those in to look like they are sort of growing off of the menu so I am going to add some blending options on the left one first. Then I am going to copy its blending options and paste the on the other.

I am going to zoom in about 300% to get a good view of the colors I want to make it.

Add a gradient overlay:

My result:

After that right click on your layer in your palette and click “copy layer style”, then right click on your other layer that doesn’t have color and click “paste layer style” so now it should be the same color.

Start a new layer and grab the last brush in the set and set its size to about 350px and make another vector on the top left so it almost connects to the other

Add this gradient overlay

Now I am going to flatten the layer so it is an editable image. The easiest way I found to do this is make a new blank layer below the layer you want to flatten, right click the layer with our vector and click “merge down”.

I want to make this vector look like its connecting on the front of the menu and the rest of it going behind it so highlight this portion



cut this part and paste it back and make sure to move it back in its original place but behind the menu.

After that duplicate those two layers, flip horizontally, and move them to the right part of the menu or whichever side you need.



Click Here for Full Image

Now I am going to add my menu text.



Click Here for Full Image

Next I am going to add a gradient overlay to the text and a small outer glow.

Gradient Overlay

Outer Glow

Here is my result



Copy and paste that layer style on all the other text.

Now for a little touch on the text I am going to use our brushes to add small vectors coming off of each text using the same method we did earlier.

Here is my result on the first text:



Just add little variations on each one if you want, I added some on and tried to show a different technique on each one.

Here is my final result:


Click Here for Full Image

I hope you learned some simple techniques on to add some originality to your web menus and design using brushes.

Thanks for reading!

Here is the .PSD file..(right click and save as)

In this tutorial I will show you really easy techniques to create aurora borealis (cool lighting effects) in a night sky or for a space project you may want to do. I will also show you an easy way to add stars to an image.

Click Here to View Large Image

(more…)

For this newest update I am going to show you a cool and simple way to create some neat web 2.0 style icons that I am going to use as a menu for a site, but you could use this technique for anything. This is a very easy way to use blending options to achieve a nice effect!

First I started off with a 400X150px canvas and made a new layer. In your new layer use your elliptical marquee tool to draw as perfect of a circle as you can like this:

Next right click or double click on your new layer and use these blending options:

Stroke

Gradient Overlay

I also moved around the colors in my gradient overlay like this:

Inner Glow

Outer Glow

You should end up with something like this:

See I told you this was easy and achieves a cool effect, at least I do anyway. Let me know what you think. Now for a few more touches to make these even better, first I am going to add the web 2.0 feel to it. Start a new layer and get your ellipse tool and change your fill color to white. Make a circle similar to this on the button:

Next you need to grab a soft eraser brush about 45px:

Now position your eraser in the middle over the bottom half of the circle:

While holding down shift click and move the mouse down and up over and over until you get something like this:

Just try it a few times until you get something you like. I think this is looking pretty cool so far what about you? Now I want to add a small shadow underneath to make this really stand out. Yet again we are going to use the ellipse tool, but we want the color to be black. Make a new layer again and make a circle underneath the button like this:

Ok, now that you have that lets add some gaussian blur to it. So go to Filter>>Blur>>Gaussian Blur:

Add a 7.5px radius in the Gaussian blur settings:

Hit Ok and you should see something like this:

I think that would really stand out on a website. Last but not least we are going to add some text to it and see what it would look like as a menu. Use white arial text (or whatever font you want) around 20px and just put text on your button, I am going to put the word “Home”.

Now for the text reflection. Duplicate the text, rotate it 180 degrees and flip it horizontally. In my version of photoshop I just go to Edit>>Transform and both of those settings are in the same window. Position your text below the main text like this:

Its time to use the eraser brush again and just keep the same size you had before because it will work nicely. Pick your eraser, click on the text and a little window will popup saying you must rasterize the layer before you can do this, so of course say OK. There are other ways to make a reflection but I think this is the easiest, atleast to me. So position your eraser toward the bottom of the rasterized text, while holding down shift move your mouse from left to right erasing a little of it.

My result:

That is pretty much it, now you can duplicate that layer and make other buttons as part of the menu. Also it is very easy to change the color of these by changing the gradient overlay like this:

I hope this tutorial helped you learn some new techniques and you enjoyed. Please let me know if there is anything I can clarify or help you with. Thanks for reading!