[Android Themes] pooley:):
Ok folks !

Here we go for another tutorial !

First I wanted to do clipping mask and fusion mode but... finally I will also show you how to do a steel button as base !

and then how to customize this base with clipping mask and fusion mode to create an iconset !

Thank you to BBB for the inspiration, but I finally don't took your button, and wanted to show you guys how to quickly create it too.

So bonus for you here :)

The *.psd of this tutorial is available here

---------------------------------------------------------------------------------------------------------------------------

Tutorial made with Photoshop

[PS6] Tutorial made in Photoshop CS6

First open new doc like 600x290 for the dimensions and 96dpi for the resolution

Tips : on old screen dpi was 72, but now we have some nice IPS and LCD screens we raise the default to 96dpi,

In order to "dress" your creation you can made a gradient background like I did (layer effect gradient set to radial gradient).

I also add some Noise (Filter > Add Noise) but not too much.

Now create a round shape in the middle of your doc.

Press U (to select shape tool) select the round one, now click in the middle of your document then press shift+alt and slide bottom right

(normally a perfect round must grow from the middle of your screen)

... And as we want to develop good habits you will name the layer "base" ;)

Now double click the shape layer to enter layer styles,

- select the gradient overlay effect (1)

- set the style to angle mode (2)

- then click the gradient overview to open gradient editor (3)

Now set the gradient like this :

Click under the preview to add steps to your gradient then change the colors.

press alt+click/slide to duplicate step.

(Shouldn't be a problem for you now you followed the first tutorial your a gradient chief ;) )

Ok, now your steel button start to look like something :)

Now, just give it a real brushed steel look by adding some noise.

Press CTRL and click the shape layer in this specific zone,

(This will make a selection of your actual round shape).

Now look at the bottom of your layer list and create/add new layer by clicking this bottom icon.

Your selection is still active on the highlighted new layer so now,

press CTRL + Return to fill the selection with white (background color).

(tips press CTRL + Return to fill with background color (default white) / press ALT + Return to fill with foreground color (default black))

Now you should have another white round layer on top of "Base" layer.

- Select Filter > Noise > Add Noise,

- Select Uniform, then set amount around 50%.

- Press Ok.

Now click Filter > Blur > Radial Blur

- Set amount around 100, the blur method to Spin, and quality to Best

- Press Ok.

Now you can press CTRL+D this will desactivate your selection (not needed anymore),

and set the layer fusion mode to multiply.

Fusion Mode is a drop down menu, it's located at the top of your layer list, at the left of your opacity setting (it's set to normal by default).

tips : you can navigate throught your fusion mode by pressing SHIFT+ALT+ + or - and see live result on your document

you can rename your new layer and, if needed, decrease the opacity if the top blur/noise layer if effect is too much (personnaly set my opacity to 70% after taking that screenshot).

Now, button need to be realistic, what about an edge !?

Double click the Base layer to enter layer styles

- Select Stroke (1),

- Set the size (2),

- Set position (3) I personaly choose Inner,

- Set fill with gradient (4),

- Set angle to 90° (5),

- Enter the gradient editor and set your gradient colors (6).

Now you should have something that looks like this :

Last thing concerning the button, the shadow.

- Press CTRL and click the base layer shape to make that shape your selection again,

- create new layer then press ALT + Return to fill the new layer (with round selection) with black (foreground default color),

- press CTRL + D to desactivate selection.

- Then select Filter > Blur > Gaussian Blur

- Set it to 4.0, hit Ok.

- Move the layer down a bit.

Now you should have something like this :

Ok Steel button done :) Now let's quickly customize it !

First, hide the background (we don't need it no more)

Ok, now choose an app icon. I took Gmail one.

- now open your icon image and insert it in your steel button document (on top of all your layers)

- change the app icon layer fusion mode to multiply.

- right click on your app icon layer (in the layer list), then choose create clipping mask,

(this will automatically hide the part of the app icon layer that is out of the layer beneath) et voilà !

... Be curious, Photoshop is a great tool, this tutorial is not just an "how to". You will surely reproduce the tutorial, keep in mind that Photoshop is nothing without the main ingredient : your overflowing creativity :)

It's 5:00 am here, my creativity needs a rest, have a good night !
​

Sent from my toilets