.:Tagboard:.

(click to view)

.:Mini Gradient Bar Tutorial:.

This is an effect I thought of (although other people may have thought of it too) so this may be an more 'original' effect. This tutorial was requested by two people, and one of them really suggested me to put it up.... so here it is! XD If you've taken a look at my layouts, you'll notice that I used it on my Kitty Love and Miyavi layout, shown below ( The parts in the green borders is what I mean by a "mini gradient bar".):


Open Adobe Photoshop (my version is 7) and open the image you wish to apply the gradient bar on.


As you can see in the two layouts I've used this effect on, I apply the gradient bar between the content and navigation area.


Create a new layout and select the lightest color and apply it in the center (at where you want your gradient bar to be) on the NEW layer. I usually make my center colour 1 px high and 4 px wide. Then, select a darker colour and apply it on the left AND right of the "center colour". (I usually make the "side" colours 1 px high and 2 px wide) Continue the process so you'll get an effect like the image below:


Now click the skinny marquee tool () and click on the line of the pixels you created. Press CTRL + T and drag all the way down the page. (read the Image Stretch tutorial if you're unsure)


Add a border if you wish (I prefer adding a border XD)


And you're done! =D This is how mine turned out:


OR, you can do something slightly different.
You can stretch the navigation so that it would touch the top of the image, and stretch the gradient bar so that it would touch the top of the image as well. (I personally like this way more) Look at the example to see what I mean:


I hope this tutorial will help, and don't forget to link back. =) And please DO NOT copy/steal any of my tutorials either!!


Last updated: 09/08/09