31
How to Create a Slick and Clean Button in Photoshop Six Revisions Home All Articles Tutorials Freebies About Contact Follow on Twitter Subscribe: RSS Feed | Email How to Create a Slick and Clean Button in Photoshop May 7th, 2009 by Jacob Gube | 52 Comments | Stumble It! Delicious This Photoshop tutorial shows you how to create a simple and clean "Web 2.0 style" button sprite with a rollover state. Youll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement). The button on this tutorial was inspired, and is modeled after, the Campaign Monitor web interface. By following along, youll learn how to create a very similar button. Final Result Click on the following image to see a working demo (mouse over the button to see the rollover state). Sponsors Subscribers 00:26:32] http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (1 of 31) [25-10-2009

Slick and Clean Button in Photoshop

Embed Size (px)

DESCRIPTION

button creation

Citation preview

How to Create a Slick and Clean Button in Photoshop

Six Revisions

Home

All Articles

Tutorials

Freebies

About

Contact

Follow on Twitter

Subscribe: RSS Feed | Email

How to Create a Slick and Clean Button in PhotoshopMay 7th, 2009 by Jacob Gube | 52 Comments | Stumble It! Delicious

Sponsors

This Photoshop tutorial shows you how to create a simple and clean "Web 2.0 style" button sprite with a rollover state. Youll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement). The button on this tutorial was inspired, and is modeled after, the Campaign Monitor web interface. By following along, youll learn how to create a very similar button.

Final ResultClick on the following image to see a working demo (mouse over the button to see the rollover state).

Subscribershttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (1 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

Search

Search

Download source filesIf youd like to download the source files used in this tutorial, go ahead. The following download link contains the Photoshop PSD file, the finished CSS image sprite in PNG format, and an HTML demo with the HTML and CSS source code.

campaign-monitor-button.zip (ZIP, 58 KB)

Lets get started with the tutorial, shall we?

Setting up the document1 The buttons dimension will be 250px wide and 50px high. To accommodate both the idlestate and rollover state, double the height (100px).

TopicsAJAX CSS Design Showcase / Inspiration Flash Freebies Graphic Design JavaScript Photoshop Project Management Resources Tools Tutorials

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (2 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

Usability / Accessibility User Interface Web Applications Web Design Web Development Web Standards WordPress

Recent

Favorites from the Feeds #08 Leafd: 10 Free High-Res Photoshop Leaf Brushes Create a Clean Business Web Template Design in Photoshop 35 Creative Twitter User Profile Designs How to Create Remarkable 3D Text in Photoshop

2 Drag a guide to the 50px mark to clearly delineate the top half and bottom half of thedocument. Make sure that Rulers are turned on (Ctrl + R) by checking to see that View > Rulers is checked. Drag a horizontal guide from the Ruler down to half of the document (50px marker).

Friends

1stwebdesigner Blog.SpoonGraphics Burbia Chris Wallace Css Globe Design Bump DesignM.ag fudgegraphics Function InstantShift LaptopLogic.com

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (3 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

Naldz Graphics NETTUTS Noupe psdfan.com PSDVIBE [Re]Encoded.com Smashing Apps Smashing Magazine Stylegala Stock Footage - Foto Search Stylized Web TheBestDesigns.com Vandelay Design Walyou Web Designer Help Webdesigner Depot Web Design Ledger WPBeginner

Creating the shape3 Activate the Rounded Rectangle Tool and set the radius of the rounded corners to 3px.

4 Drag the shape over the top half of the document. The color of the shape doesnt matter,as youll soon see. The dimensions of this shape should be 250px wide and 50px high.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (4 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

5 Create a selection around the rounded rectangle shape by Ctrl+ clicking on the shape layer.

6 With the selection still active, create a new layer (Ctrl + Alt + Shift + N). Name it Idle.With the new layer active, fill the selection by going to Edit > Fill (Shift + F5).

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (5 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

7 Delete the Shape layer of the rounded rectangle, its no longer needed.

Adding some layer styles8 Double-click (or right-click > Blending Options) on the Idle layer to open up the LayerStyles dialog box.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (6 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

9 Add a Gradient Overlay. Double-click on the Gradient to open up the Gradient Editor dialogbox. For the left Color Stop, use a dark green color #618926 and for the right Color Stop, use a lighter green color: #98ba40. Move the Color Midpoint to 35%.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (7 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

10 Add an Inner Shadow. Change the Blending Mode to Normal. Change the color to a lightgreen color, #c6d894. Set the Opacity to 100%. Give Distance and Size a value of 2px. See figure below for the settings used.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (8 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

11 Add a Stroke. Set the Size to 1px and Position to Inside. Set the color to the dark greenas in step 9 (#618926). See figure below for the settings used.

Heres what you should have so far.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (9 of 31) [25-10-2009 00:26:32]

How to Create a Slick and Clean Button in Photoshop

Adding a Radial Gradient12 Create another layer on top of the Idle layer, name it Radial_Gradient. Switch theforeground color to # b8cf69. Make a selection around the rounded rectangle shape by Ctrl + clicking on the Idle layer. Then switch back to the Radial_Gradient layer.

13 Switch to the Gradient Tool (G). Set the gradient style to Radial Gradient. Click on thegradient to open up the Gradient Editor dialog box.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (10 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

14 In the Gradient Editor dialog box, select the Foreground to Transparent Preset. Makesure the left color stop is set to light green color, #b8cf69.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (11 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

15 Make sure you still have a selection around the rounded rectangle shape and that theactive layer is Radial_Gradient. Make sure that Rulers are turned on. With the Gradient Tool (G) active, drag from the top of the selection to about 30px below the selection.

16 Adjust the Opacity of the Radial_Gradient layer to 80% or to a level that you like.

Creating the rollover state shape17 Duplicate the Idle and Radial_Gradient by first Shift + clicking on each one and thenhttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (12 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

right-clicking to open up the context menu. Select Duplicate > Duplicate Layers

18 Move both duplicated layers down to the bottom half of the document by clicking onthem in the Layers palette and then using the Move Tool (V). Rename the duplicate layers use Rollover for Idle copy and Radial_Gradient_Rollover for Radient_Gradient layer.

Tweaking the rollover state layer styles19 Except for the colors, well keep everything the same. Double-click on the Rollover layerto open the Layer Styles dialog box. For Inner Shadow, change the color to a light blue, #839dbf. For Gradient Overlay, change the left color stop to a dark blue, #0f2557 and the right color stop to a lighter blue, #245293. Finally, change the Stroke color to a dark blue, #0f2557.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (13 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

20 Well add a Color Overlay layer style for Radial_Gradient_Rollover. Double-click on thatlayer to open the Layer Styles dialog box. Add a Color Overlay style and set the color to a blue color, #5c737c.

Adding the texthttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (14 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

21 For this, well use a simple font family: Arial. Feel free to use whatever you like, but forthe following techniques, something thats bold/thick is suggested.

22 Use the Horizontal Type Tool (T), set the font family to Arial, font style to Bold, font sizeto 16px, anti-aliasing to Smooth, and the color to white (#ffffff). Type in the text youd like the button to have.

Giving the text a drop shadow23 Double-click on the text layer you just created to open up the Layer Styles dialog box.Set the Blending Mode to Normal, the color to a dark green color (#618926), Opacity to 100%, uncheck Use Global Light, Angle to -60%, and finally Size and Dimension to 1px.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (15 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

Centering the text24 Ctrl + click on the Idle layer to make a selection. Make sure that the text layer is theactive layer.

25 Center the layer vertically by going to Layer > Align Layers to Selection > VerticalCenters.

26 Center the layer horizontally by going to Layer > Align Layers to Selection > HorizontalCenters.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (16 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

Duplicating the text layer for the Rollover state27 With the text layer still active, right-click on it and select Duplicate Layer (or Alt + downarrow key if you have the Move Tool active). Move it down to the bottom half.

28 Ctrl + click on the Rollover layer to create a selection around the lower shape. Use LayerAlign to Selection > Vertical Centers. If you somehow moved the duplicated text layer to the left or right, you should also do Layer > Align Layers to Selection > Horizontal Centers to recenter it.

Change the layer style29 Double-click on the text layer you just created to open up the Layer Styles dialog box.Set the color to a dark blue color (#0f2557), leave the rest the same.

Youre done (with the Photoshop part)!If you followed along, this is what your button sprite should look like.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (17 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

Now lets do the HTML and CSS to get your button working.

30 Save your creation for the web, name it campaign-monitor-button.png. 31 Create an HTML document. Save it in the same location as the campaign-monitorbutton.png file.

The HTMLThe markup is basic, a link inside a paragraph tag. I chose to use a paragraph tag as a wrapper/container because I dont think elements should stand alone. It would work without the tag.

Click this button

The CSSThe CSS is a simple CSS background sprite image replacement technique. I chose the text-indent method because it has been tested to work with screen readers; the downside is that it doesnt degrade well in the CSS on / Images off scenario (which is a rare situation and usually done out of choice by the user). Giving the element a CSS property of outline: none removes the gray outline in Mozilla-based browsers.

.button { display:block; width:250px; height:50px; text-indent:-9999px; }http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (18 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

.button a { display:block; width:100%; height:100%; background:transparent url(campaign-monitor-button.png) no-repeat top left; outline:none; } .button a:hover { background-position:0 -50px; }

Demonstration

Slick and Clean Button demo

CreditThe button on this tutorial was inspired the Campaign Monitor web interface which has these call-to-action buttons in their interface. Check them out when you have a chance, they provide a great service for designers and developers!

Questions and thoughts?If you have any questions or if youve found errors, leave us a note in the comments! Also, feel free to showcase your work here by sharing a link to your finished product if you followed this tutorial.

Related content

How to Make a Stylish Glowing Box in Photoshop How to Create a Sleek and Textured Web Layout in Photoshop How to Auto Caption Images Using MooTools Related categories: Photoshop Tutorials, Tutorials

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (19 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

52 CommentsGabe

May 7th, 2009

Thanks for the tutorial I always struggle with getting my text to look good, your drop shadow on it looks sweet: crisp and clean.

Matthew HeidenreichMay 7th, 2009

simple and effective tutorial! Thanks for sharing.

Ben

May 7th, 2009

This was a good tutorial. Campaign Monitor uses Gotham as the main typeface on buttons, navigation etc. Gotham isnt cheap, but its a nice touch of professionalism for buttons. http://www.typography.com/fonts/font_overview.php?productLineID=100008

David

May 7th, 2009

Fantastic touch making use of sprites, thanks!

Mike

May 7th, 2009

Great tutorial looking forward to seeing more on Six Revisions.

Jacob GubeMay 7th, 2009http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (20 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

@Gabe: Thanks, I like experimenting with Blending Modes in the Layer Styles to create clean, simple text effects. The one on the leading image was by accident (inner glow set at weird settings), but it turned out great. @Ben: Cool beans, thanks for identifying the actual font. I used Arial simply because I know everyones going to have it so that if they really did want to follow the process stepby-step, they wouldnt be stuck. Id use my favorite font, Rockwell, if it wasnt a tutorial. The dropshadow used in this tutorial would be killer with that font.

mishoo

May 7th, 2009

I would keep the shape layers and just change the fill to 0% in case you ever wanted to make them longer or shorter you still have the shapes which allow you to use the handles to resize without compromising the corner radius. Also, keeping the shape makes recoloring the lower shape easy as pie. Nice tut nonetheless.

SebastianMay 7th, 2009

Step 11s image should be 04-15_slick_clean_14.png

alex

May 7th, 2009

Nice tutorial thanks

Warren

May 7th, 2009

Great tutorial, especially the outline:none for mozilla.http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (21 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

William

May 7th, 2009

Very thorough tutorial, and simple, a great combination. Really cleared up some confusion for me over setting up CSS sprites, I hope to implement this into my personal design practices soon.

Seven

May 7th, 2009

Nice tutorial! Ill try it in Gimp, I guess this should work, too.

Patricia

May 7th, 2009

It never occured to me to use photo shop for buttons. I have some button maker I am using- it does not give me nearly as many options as you have shown.

Tatu

May 7th, 2009

It would have been a whole lot simpler to just use a Hue/Saturation adjustment layer with a mask to change the color of the bottom button. No need to change the layer styles and you can easily change the hue afterwards.

Paul SaundersMay 7th, 2009

Cool learned something new here with Align Layers, and red arrows in tut allow me to home in immediately on action reqd. Rollovers still have power. Thanx.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (22 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

monie

May 7th, 2009

Nice tutorial..

Steve RobillardMay 7th, 2009

Great tutorial and very timely as I have gone through I dont know how many button styles for a project lately. You may want to swap your p tag for the more semantic button tag instead.

Pali MadraMay 8th, 2009

Great tutorial thanks. Noob question. Why in the tutorial did we not use the shape tool itself to build the buttons but instead choose to create another layer with a similar mask. The buttons came out really nice and if I could follow the tutorial anyone can! Thanks again

Claire WebMay 8th, 2009

I dont think i have ever seen a tutorial on creating cool buttons. I think it is something most designers need to improve a lot. Hopefully they will take this information on board and improve the badly looking buttons they should be banned!

Chantelle TibbsMay 8th, 2009

Look at those shiny beautiful buttons:)http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (23 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

Very well done. I want three of those for my site! I used DaButtonFactory.com and they are good. Super quick, just not as smooth as these buttons

Paolo

May 8th, 2009

Great tutorial! Thanks.

Will MorganMay 8th, 2009

Removing outline: none; is a bad idea as people using keyboard navigation wont know where their focus is. Just be aware that the outline only displays when the element has focus, which is how a user knows where they are in the DOM. Also, if you centre the text, then why not centre the radial gradient? It looks a little bit off. Another note on the Campaign Monitor website, /designer/ gives you a JS prompt, and if you say no, youre locked into going elsewhere. A nice touch, but you shouldnt restrict someone from browsing the website based on their profession, IMHO. Im a UI developer by trade, not quite a designer, but I still wanted to browse the site nonetheless.

ThillaiArasuMay 8th, 2009

Can you post articles for gimp

Jacob GubeMay 8th, 2009

@mishoo: Yeah, that would be a good option. I just always preferred working with layers but youre right, keeping the Shape object makes it more flexible to changes.http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (24 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

@William: Well, thats great I wasnt intending to teach CSS sprite positioning here, but I guess seeing it in actual use helps explain the concept. @Tatu: Great tip, my methods seem to be destructive methods where I dont normally account for changes to the design later on. The Hue/Saturation Adjustment layer is a good call. @Steve Robillard: I struggled as to what tag I wanted to use for this tutorial. I figured a link is semantic, you click on it and it takes you some place. The text Click this button will throw people off (those that use screen readers, for example) but a meaningful title attribute and replacement of the text link will make it semantic and accessible. I have to admit that I rushed the HTML/CSS part on this one, again, because I wanted it to be a Photoshop tutorial and not an (X)HTML tutorial. @Pali Madra: Good question, its just been my method, you could have used the shape layer instead. @Will Morgan: Theres got to be a compromise right? Having the outline there sucks using the text-indent method for CSS image replacement because the gray outline would extend to the left of the browser.

Jacob GubeMay 10th, 2009

@Sebastian: Fixed it, thanks for letting me know!

Lee MunroeMay 10th, 2009

Great tutorial nice standard for effective buttons

Devlinhttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (25 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

May 11th, 2009

Cool tutorial. Pretty slick.

Jahangir aghaMay 11th, 2009

Nice tutorial. I dont know about the CSS part because I am only a Graphic Artist. But the Photoshop part is nice :)

Sean McKennaMay 12th, 2009

Any web designer should easily be able to make this. Anyone that knows photoshop should be able to make it.

Trip

May 13th, 2009

Instead of outline: none, you can give it overflow: hidden which will restrict the outline to the dimensions of your button.

David P CrawfordMay 13th, 2009

Fireworks?

Recruitment SEOMay 21st, 2009

Good tutorial like your others. I particularly like the simplicity of the CSS moving of the image to get round the image preload problem (nothing more annoying than waiting for a hover image!)

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (26 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

Thank you.

Joe

May 30th, 2009

Great tutorial Thank you so much for the info. Im new to Six Revisions and just love your site!

Piya

May 30th, 2009

Wonderful tutorialI tried it..It looks amazing..However, when I uploaded it on website, it displays Green as well as Blue button. Can you suggest why?

Erik ArckensMay 31st, 2009

Hi, just the most fantastic tutorial I have seen on rollover buttons! Too good for words. Just a question: can you show generic css and html code in case of hundreds on buttons on lots of pages on a site? I have trouble getting the right code to work for some fifteen pages with tens of different buttons.

Erik ArckensMay 31st, 2009

Another question: why do you use a .button and another .button a css-element? What do you think of this styling:

#button { display:block; width:100%;http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (27 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

heigth:100%; background: transparent; url(campaign-monitor-button.png) no-repeat top left; outline:none;} #button span{ display:none;} and of course also the hover style. The actual text link can be inside a span element, and the the link text can be hidden with css and the image displayed instead (so that search engines still see the text).

Jacob GubeMay 31st, 2009

@Erik Arckens: For your first question, do you have an example link? It should work fine multiple times, except if you have another .button style rule. Second question: that code should work, but its basically the same as mine, except instead of a p > a, you use a >

span. The reason I did it my way is because I dont like having an a element outside of a pelement. If you want more than one button in a page, you should really use a class instead of an ID (.button versus #code). By the way, the height property is spelled wrong, so you might have issues with that.

Erik ArckensMay 31st, 2009

Would it be possible to create a button that includes instead of a href link a php function? I need a contact us button, which activates this php function:

Erik ArckensJune 1st, 2009

Would it be possible to create a button that includes instead of a href link a php function? I need a contact us button, which activates this php function:(I did not include thehttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (28 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

because it does not display in the blog) ?=createMailto([email protected])?

Randy

June 11th, 2009

What a great tutorial. Many thanks for taking the time to do all that. My goodness, very thorough!

Arken69

June 18th, 2009

HEY!!! this one is good. thanks a lot for this posting.

Liviu A.

July 2nd, 2009

Hey, great tutorial, thanks for sharing!!! Really awesome!!

joyoge

July 9th, 2009

nice helpful button tutorial, thanks a lot..

varun

July 12th, 2009

thank yo so much, it is a great tutorial

Junix

July 14th, 2009

Wow, your so proficient in photoshop. i love that.http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (29 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

well, am a newbie of webdesigning, am actually a programmer kaya lang, i nid to design. hehe, akin lahat.. Praise God sa lahat.

soumya

July 15th, 2009

oh!my god this is my favorite website its improves my professional aspects i like this tutorials very much thank you so much for easy going tutorials

Chris

July 15th, 2009

This tutorial is great does anyone know how to make the button drepress when cicked? Is that something you can do with the html or css or do you have to design the click pannel? If the former, what would the code be?

Rach

July 27th, 2009

Thanks for sharing this tutorial. Finally I could make my own rollover effect button, as I am only a beginner in photoshop. Thanks once again

Richard

August 21st, 2009

Great Tutorial. Love the site. Now here is a question. What is the easiest way of coding this kind of button if there were say five buttons instead of one?

Jiva

September 7th, 2009

I also would appreciate an example of the code that would be necessary to display multiplehttp://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (30 of 31) [25-10-2009 00:26:33]

How to Create a Slick and Clean Button in Photoshop

buttons. ex. vertical menu bar with multiple links/button running down it.

Christian

September 23rd, 2009

Thank you very much! Just what i looked for. (Sorry my bad english)

shimon

September 25th, 2009

Thanks for this great tutorial I stumbled it. Just one question how can I make the button smaller?

Leave a CommentName (required)

email (will not be published) used for Gravatars (required)

Website

Subscribe to the comments on this article.

Submit Comment

2009 Six Revisions. All Rights Reserved. Theme Design by Jacob Gube. Six Revisions mobile version by Mobify.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/ (31 of 31) [25-10-2009 00:26:33]