Welcome
Got no idea how you make your own buttons? Well, I will learn you now with this simple tutorial written by me.
I use Adobe Photoshop CS4, note that I have it in Dutch but there shouldn't be a huge problem as the order is like any other CS4. You can download and try the 30-day trial from Adobe
Let's go:
_______________________
Step 1. First we start a new document, do this by clicking on "File ->New" a dialog will popup. We use width: 300px, height: 120px and background white. Then press 'OK'.
Step 2. Now go to this rectangle tool (press U):
Step 3. Make a new rectangle (color: #255d9b) by clicking and dragging it so you can change the format like this:
Step 4. Now go to the layerstyle (Menu ->Layer ->layerstyle ->Drop shadow)
And change the settings as below:
Step 5. Move on to Inner Shadow and change the setting to this one:
Step 6. Go to Gradient Overlay and change the settings again:
Step 7. Last but not least got to Stroke and just edit it like this:
Step 8. If you did what I told you then will get it like this:
Step 9. But this only a really easy button, we will now change some other things, like the corners will be more rounder. To do this we will use the "Add anchor point" tool which is this one:
Step 10. You might be confused how this works, but I will explain what we need to do:
The button you have so far is a shape, this shape is just one path with points that form the shape and these are named 'anchors', to make the corners of the button rounder we will have to add some new anchors with the "Add anchor point tool" which is in the sub menu like the picture above.
Now mouse click on the layer and the gray field in it aswell so the path will be visible.
Step 11. While you have the layer selected (you might want to zoom in closely) go to the button and go with the "Add anchor point tool" to press ctrl + left-mouse click on the path which is a small line that goes around the button then the anchors will be visible, see here:
Step 12. The corners which are selected in red are the anchors now we add some new ones like this one:
Step 13. Now do the exactly the same with the other corners. If you did it like me and you zoom out to the normal view you will get it something like this:
Step 14. Now we're going to add some reflection(s) on the button, first create a new ellipse shape, with the same tool that you created the button with. make a round shape with the bottom of the shape on the top of the button
Step 15. Then go to this ellipse shape layer and right-mouse click and you will see a list you select "Create clipping mask" then set this layer to "soft light" and the ellipse will be in the button. Just like this:
Step 16. Right-mouse click on the ellipse shape layer and press "rasterize type" this will make it into pixels instead of a path. (note that you will lose the abilities that a path has)
Step 17. Take the "rectangular marquee tool" and when you select it you get some options in the menu above, change the "feather" to '10 px' like the image says below:
Step 18. Now select the half of the right side of the ellipse shape and then press on your keyboard the delete key. (how more you press the 'delete key' how more it will fade) Do this also on the left side.
Step 19. This is what you should have by now:
Step 20. Last but not least add some simple text on your button and you're finally finished well done!
Result:
If you need help with this tutorial then feel free to post it here. (do not pm me)
I would be pleased if you could give me some of your reputation for creating this tutorial.
Kind regards,
Xenios
Got no idea how you make your own buttons? Well, I will learn you now with this simple tutorial written by me.
I use Adobe Photoshop CS4, note that I have it in Dutch but there shouldn't be a huge problem as the order is like any other CS4. You can download and try the 30-day trial from Adobe
Let's go:
_______________________
Step 1. First we start a new document, do this by clicking on "File ->New" a dialog will popup. We use width: 300px, height: 120px and background white. Then press 'OK'.
Step 2. Now go to this rectangle tool (press U):
Step 3. Make a new rectangle (color: #255d9b) by clicking and dragging it so you can change the format like this:
Step 4. Now go to the layerstyle (Menu ->Layer ->layerstyle ->Drop shadow)
And change the settings as below:
Step 5. Move on to Inner Shadow and change the setting to this one:
Step 6. Go to Gradient Overlay and change the settings again:
Step 7. Last but not least got to Stroke and just edit it like this:
Step 8. If you did what I told you then will get it like this:
Step 9. But this only a really easy button, we will now change some other things, like the corners will be more rounder. To do this we will use the "Add anchor point" tool which is this one:
Step 10. You might be confused how this works, but I will explain what we need to do:
The button you have so far is a shape, this shape is just one path with points that form the shape and these are named 'anchors', to make the corners of the button rounder we will have to add some new anchors with the "Add anchor point tool" which is in the sub menu like the picture above.
Now mouse click on the layer and the gray field in it aswell so the path will be visible.
Step 12. The corners which are selected in red are the anchors now we add some new ones like this one:
Step 13. Now do the exactly the same with the other corners. If you did it like me and you zoom out to the normal view you will get it something like this:
Step 14. Now we're going to add some reflection(s) on the button, first create a new ellipse shape, with the same tool that you created the button with. make a round shape with the bottom of the shape on the top of the button
Step 15. Then go to this ellipse shape layer and right-mouse click and you will see a list you select "Create clipping mask" then set this layer to "soft light" and the ellipse will be in the button. Just like this:
Step 17. Take the "rectangular marquee tool" and when you select it you get some options in the menu above, change the "feather" to '10 px' like the image says below:
Step 18. Now select the half of the right side of the ellipse shape and then press on your keyboard the delete key. (how more you press the 'delete key' how more it will fade) Do this also on the left side.
Step 19. This is what you should have by now:
Result:
I would be pleased if you could give me some of your reputation for creating this tutorial.
Kind regards,
Xenios