To get started open photoshop and a new blank document. It is a good idea to make the document bigger than you need, you can always shrink images but you can't always enlarge them. Work big then scale down.
A Cheap Tab Shape
The first step is to get the general shape of the tab on the screen. It would be possible to draw a path in the shape of the tab, but the outline would be inconsistent and hard to make look good. Instead use the pentagon shape that is a preset of the pen tool. Press 'd' to reset your colours to black foreground and white background. Now click near the center of the document and drag outwards and down. Align the float side up, it helps to hold shift while dragging because it locks the shape so the line is horizontal.
The pentagon is defined with a vector mask in photoshop, right click on the layer in the layers palette and click rasterize. This discards the vector mask and creates a representation of the shape that can be editted. Now use the marquee selection tool to select the lower half of the image and fill it in with black. The edge of the pentagon will be slight grey so make sure you fill that with black as well.
Smoothing the Corners
By this point you should have a tab looking object that is made of straight lines and sharp angles. Real tabs are curved so these must be as well. To round the edges you will first blur the image slightly with gaussian blur. I would recommend using a radius of 5.5 to get a nice curvature but you may need to tailor that depending on the image size you are using.
Now that it has been blurred we can use levels command-l (ctrl-l) toconvert the blurriness to a nice smooth curve. It is important to note that this step requires the black blurred object to be on a white background. If you don't have a white background: add a new layer beneath the object layer and ensure it is filled with white. Now click on the object layer and press command-e (ctrl-e) to merge it with the layer beneath it.
Open the levels dialogue and bring the black and white markers close to each other. Note that if you bring them right together the line will look alittle jaggy, you want to keep them apart slightly to retain some of the blur and give the curve a smooth look
Final Thoughts
At this point you have the outline of a tab defined in black and white, you can use this image make selections and and the appropriate graphics. I just wanted the outline so I used the wand to select the black portion then I shrunk the selection by 2 pixels (select > modify > contract) and filled it with white.
This outline can be copied a few times and combined to give more tabs. You will need to set the layer blending mode to darken so the black shows through for each layer. You will also need to manually earse some of the lines to make it look realistic.
Whether you use the outline or use the black/white mask to make give them a different look, it is time to add the finishing touches. For my tabs I just added a slight gradient inside the tab, grey normally but orange on roll-over. I also have me setup to have the current tab forward, this is alittle tricky and should be left for another day. If anyone is really interested in how I coded the tabs on filbar.org send a message to vfilby@gmail.com.
great technique!
simple but very useful :ok:
Glad you liked it. There was much more to getting it to work dynamically with css rollovers and the current tab forward, but if anyone actually wants to know how it could be done I'd be happy to add that as well.
Cheers,
Vince
That would be great if you could do that tutorial also. I would like to implement CSS rollovers on my site one day, guhappy.com
What a horrid way to make the tab shape.
What's a better way, hot shot?
To make tabs in Photoshop, I'd recommend using vector-shapes and the pen tool. It's easier, faster and you can edit the shape and size at any time after creating the tabs...
It depends on your version of Photoshop though, the more recent versions are quite good at vector-stuff.
Could you please have a tutorial for the css rollovers! Thanks. I love it!
Using vector shapes and the pen tool seems like too much overhead for these simple web graphics. If I needed to be able to enlarge it I would also have used vector shapes. As it stands this method takes about 30 seconds and I doubt that I could the vector equivalent in the same time.
It maybe that I just don't know some of the tricks to working with vector tools, so I encourage you to write up a tutorial and email me the link (vfilby@gmail.com). I am always up for learning new tricks.
How about giving a tutorial to display the instructions to make the file tab buttons animate exactly like it does on this site; i.e. when you press "home" and are at the "home" page the nav bar shows "home" being selected.
GREATLY APPRECIATED!!!
I'll get on it, but after I finish my thesis. So count on sometime in early december. In the meanwhile feel free to send a message to vfilby@gmail.com, I will make a list of the addresses and email everyone when I put it up.
Cheers,
Vince
thank this has helped alot
After you add the shape and have it the way you want, make sure that layer is selected and go to layers > rasterize > layer, this should accomplish the job. You can also right click on the vector mask and click rasterize.
I know of a tab tutorial using fireworks if you want it. It's really easy!
Tried this tutorial, either steps are left out or there's are configuration options that are set differently from the default. The output I got from following these steps to a T ended up with a jagged edge and a black layer that was semi-transparent.
A number of other people successfully completed this tutorial and I am pretty sure they didn't have a telepathic link, which leads me to the conclusion that you missed some steps or fudged something up.
If you want help then ask, I would certianly try to figure out what went wrong.
Gewoon echt hartstikke bedankt hey!
Could not replicate the levels part. I did the gausian blur, combined the layers on a white background and nothing happened, no curve! I also tried adjusting the levels with the layers apart (hexagon plus menu bar) and I had the same result. What was I doing wrong?
Update: Done it! What I was doing wrong was that the background layer wasn't merged with the other layers. Merge all of your layers (menu bar, hexagon and bg), gausian blur of 5.5 as stated, then 185,1,203 on the levels as stated. That should work.
That is correct, you need to have the black on white (or vice versa) to get the correct blur.
This is great! Just a note to anyone messing with this - to make this hoverable (if there is such a word) - simply settle on a static background colour for outside the tab, and make the inside of the tab transparent.
Creating a stroke around the tab will help give a little definition to this. Also, remember to save as either GIF or PNG to retain transparency.
Then in your CSS, use the tab image as a background image on your link element, defining a background colour for both the a:link and a:hover elements.
Sweet tutorial, just what I have been looking for! Well Pleased...
Wow...what an excellent way to creat the shape of the tab.
This is something that I have been fighting with for some time now, and usually try to draw the shape by hand, as you can imagine the rusults are not that good.
Thank you for sharing this excellent tutorial.
Kevin
Thank you, it was very interesting to write yet
[url=" http://forums.megagames.com/forums/member.php?u=203944 "] cheap propecia [/url]
[url=" http://forums.megagames.com/forums/member.php?u=203946 "] cheap soma [/url]
[url=" http://forums.megagames.com/forums/member.php?u=203948 "] cheap zoloft [/url]
[url=" http://www.bebo.com/CheapV8 "] cheap viagra [/url]
[url=" http://www.bebo.com/OnlyT7 "] cheap cialis [/url]
[url=" http://www.bebo.com/PropositI "] buy viagra online [/url]
[url=" http://freeiq.com/zoloft "] buy zoloft [/url]
[url=" http://freeiq.com/soma11 "] buy soma [/url]
[url=" http://freeiq.com/levitra "] buy levitra [/url]
[url=" http://www.bebo.com/UchL4 "] cheap tramadol [/url]
[url=" http://freeiq.com/lexapro "] buy lexapro [/url]
[url=" http://freeiq.com/lipitor "] buy lipitor [/url]
google
mania.
celebrex online
buy plavix
buy acomplia
buy rimonabant
buy fluconazole
buy diflucan
buy lipitor
order xenical
order carisoprodol
order propecia
buy propecia
buy acomplia
Post new comment