Last posts from our blog
This essay focuses on the simple rules of creating a user friendly website design. The design concept of the website is created following a target analysis for the site, ensuring the surfer is
Call to Action: The Element that Makes or Breaks a Web Marketing Plan

This essay focuses on The web marketing Call to Action element that is crucial to high conversion rates in your website. The Call to Action

Apple designed buttons

apple designMacintosh had always taken the lead with their interface designs and in their operating systems. There is no doubt that with the new Mac X-OS operating system they have set new standards in interface design. One of the main features in their design is the buttons design, and when it comes to menus, you can find it as a common web design on many websites.


In this guide we will go over the process of creating that sort of a button, step by step. As I wrote on other articles, In Photoshop you can create almost anything, in several ways, and on this guide I will show you one of them. Once you understand the principle, you can work with it on other elements and not just buttons, for example - on texts, figures, etc.
A new File:
In order for the effects to come out the same, you should create a file with the same parameters (size, resolution) as I use in this guide. So lets start by creating a new file by the name MyButton, with the following size: 400x150 Pixels, and Resolution: 72dpi




Creating the Background:
If you are A professional Photoshop users, you can skip this part. Let's start with the creation of the background which is identified with the Macintosh interface. It is not important for creating buttons, but it is a good opportunity for me to explain the action of creating backgrounds for beginners.


We will make two stripes, of 1 pixel width, when one of them is light gray and the other is even a lighter gray. Like this:




Good. Now let's select the surface of the two stripes (without the white surface around it). Like this:




Now, Lets define the surface we picked out as a Pattern (a sample which repeats itself)


Edit > Define Pattern


and name it myPattern .Like this:




Now we have a new pattern template that we can use over and over again on other works. We can erase the two stripes we just made off the file, and leave the working space empty (white). Now we want to fill the entire surface with the pattern template that we created. All we need to do is to choose the entire working space (Select All) and fill it exactly like we paint a surface, by using the Fill command, only this time we will define the filling not by color but by the pattern template we have just created.


Edit > Fill




And here is the result:




And now for the button:
We will make a new "Shape" layer by using the Shapes tool, and choose the square one with the round corners. We will define the radius of the corners as 30 and draw the new button in a new layer.




Let's paint that layer in blue for demonstration.




Now we need to apply the Layer Style on the blue button layer. The problem is that the Layer Style has many parameters and it is difficult to explain them all in this guide. To my opinion, the best way to learn the style topic is by studying different styles that others have created. Therefore, I will give you the source file of this button so that you are able to copy its style and apply it on your button layer. While at it, look at its parameters and styles and try to understand them.






And that's how it would look after applying the styles on the button layer.


The great thing about defining the styles is that you can modify the color of the layer to any color you want and the style would be applied in accordance to fit the new color.


Now, let's select the button shape by clicking the icon of the button layer while holding down the CTRL key. (on Macintosh it's the OPTION key) and narrow our choice by 10 pixels so that we will get a smaller selection of the button shape.


Select > Modify > Contract > (10 pix)




And now we need to subtract the lower third of the chosen area. Press the ALT  and with the selection tool select the lower third area.




And here is the result after removing the lower third of the button



Now that the selection is still active, let's give it a 1 pixel Feather.


Select > Feather > (1 pix)


Let's switch to the Channels window. We create a new channel and erase the selection from it.




Now, cancel the selection and use the Gradient tool and choose gradient from color to transparency, when the colors on the tools menu are set to black on front and white on the background. We will create different hues a bit above the button and a bit below the button.




.That's how the channel should look like



Select this channel by clicking the icon of the channel when holding down the CTRL button. Let's get back to the RGB display and to the Layers display. Create a new layer and color it white (when we started we used only the fill command with the Pattern, so now you will have to retrieve the fill definition to the front color Foregroundcolor). And now your work is supposed to look like that.




Good. Now we want to twist our new layer (with the white) in perspective and free transform it towards up.

Edit > Transform > Perspective >
Edit > FreeTransform >



That's it.. We are almost done
Now lets work in the Edit in Quick Mask  mode and select from the tools menu the Gradient tool (again, when the color change is selected, from color to transparency).




Now lets create a mask by designing the gradient to apply from left to right when the "Quick Mask" mode is active. We finish, we go back to the normal mode, where the gradient selection we established becomes selectable.




The active selection is applied on the right side of the work, when the white layer is selected. We simply erase the selected area and there you have it... just add text and you are done!




So... 'Till next time, Good-Luck
Rami Ben-Ami and Staff

| mac buttons || apple design || photoshop tutorial |