I was actually trying out a few ways to make a nice looking button when I realized this button actually looks like a keyboard key. It’s really simple to make, anyone can do it.

First off, select the rounded rectangle tool.

Next we want to set the radius of the corners to 8px (px = pixels). The picture shows the top toolbar on Photoshop, when you select the rounded rectangle tool, this is where you set the radius.

Now we can create a rounded rectangle, for this tutorial, use 83px by 83px, you can see what size your rectangle is by using the info panel (you can activate this info panel by pressing F8). Also you can hold the SHIFT button to make it easier to create a perfect square. You should end up with:

Now you can rasterize your image to get rid of the path lines:

Ok, now for the layer styles. Double click on the layer with the rounded square and go to the ‘gradient overlay’ menu. Change the gradient colors to #CFCFCF on the left and #FFFFFF on the right side. Now input the following details:

Your rounded square should now look like this:

After that you will need to add a simple stoke, this should be 2px wide and on the outside of your rounded square. The color of this stroke is #ABABAB. The stroke, like the gradient overlay is in the layer styles.

Your rounded square should now look like this:

This is the biggest step, but the most important. In your layer styles select the ‘Bevel and Emboss’ menu and do the following settings:

Please note that the ‘highlight mode’ color = #FFFFFF and the ‘Shadow mode’ color = #000000.

Also don’t worry about the ‘Gloss contour’, that’s the next step.

Ok, now for the ‘Gloss Contour’, click the little image (shown in red below) and then simply input the following settings and click ok:

Your rounded square should now look like this:

Now customize it how you like, maybe add a letter or number, or create a keyboard from it haha. Here is my final work:

I use so many shortcuts while working on Photoshop to save time and the frustration of trying to find the right function in a menu and then ending up clicking the wrong one. With keyboard shortcuts it’s usually a combination of three keys that you press at any one time and it will carry out a specific function, such as ‘undo’, but you can get more advanced then that.

Okay, here are the all time must-know Photoshop keyboard shortcuts:

1. To hide or show all toolbars and panels press TAB
2. To undo one or more steps press CTRL + ALT + Z
3. To redo one or more steps press CTRL + SHIFT + Z
4. To transform an image or selection press CTRL + T
5. To scale an image or selection proportionally from the center (while in transform mode) press ALT + SHIFT while dragging it. Also, you can just use SHIFT while dragging, but it will not be from the center.
6. To temporary use the hand tool press and hold the SPACEBAR, when you let go of it, your tool will change back to the previous tool you were using.
7. To save your work, press CTRL + S
8. To zoom press CTRL + = to zoom in, OR CTRL + – (hyphen) to zoom out.
9. To inverse a selection press CTRL + SHIFT + I
10. To deselect a selection press CTRL + D and to reselect press CTRL + SHIFT + D

Well there it is, the 10 best must know Photoshop keyboard shortcuts. Practice them every time you use photoshop and you will be much more efficient and you will impress anyone watching you design so efficiently.

I noticed there are way more then 10 useful keyboard shortcuts especially for selections, fonts (type) and zooming/view, so you may see 3 more posts about them in the future.