Download Lightroom presets and LUTs, absolutely free. Use the presets to add creativity and style to your photos.
Next select Move Tool (V) and using keyboard arrows move the stroked layer 1 or 2 px down, to get something silimar to the image below.
Step 44
Now grab Pen Tool (P) and draw an X shape.
Step 45
Make sure you give it a bright tone (#a2a2a2). Then create new layer under the stroked layer (the one with white stroke we just made), hit Ctrl+Alt+G for clipping mask, and this time use black brush for painting. As the red arrows indicate, try to add just a touch of shadow all around the shape (to get a better depth).
Step 46
Now move to the X shape layer, duplicate (Ctrl+J) it and resize down (Ctrl+T) or recreat it completely using Pen Tool (P) and black color. Make sure it looks similar to the one below.
Step 47
In Layers Palette select the back X shape layer, click on Add Layer Mask icon to add mask and then use soft black brush to paint on it. Paint where the red arrows indicate to give a nice depth to the white shape so it looks like edge light.
Then move to the front X shape (black), add a layer mask to it, then use soft white brush to paint on it. Paint where the red arrows indicate to erase the black shape and reveal some light from the shape in the back. Make sure you do it with small brush diameter to fit the shape.
Be accurate while you do this masking. If you do too much you might get kind of different results. Some make sure you getting as close as possible to the result shown below.
Also keep in mind, while masking you should use a very soft brush - let's say 2-3% Flow.
Step 48
Now select all the button layer and merge them (Ctrl+E). Then create new layer above, hit Ctrl+Alt+G for clipping mask. Change layer's Blending Mode to Overlay. Select white brush and softly paint as the red arrow indicate. Cast some light from the top.
Step 49
Repeat the previous step but this time create new layer with Multiply Blending Mode and use soft black brush for shading. Paint where the red arrow indicate.
Step 50
Finally create new layer below the screw, set its Blending Mode to Multiply and use soft black brush to cast shadow below the button (downwards).
Step 51
Duplicate these screws as many times as you want (Ctrl+J) and make sure their placement is symmetrical. Also if you want to place them in a holes like I did, just refer to the earliest steps (for example step12) but in this case for a hole simply use a rounded shape layer. Everything here works on the same routine, the only thing that changes is the shape, which here is a circle.
Step 52
Alright we have the first screen done. Now stay on the same project file and let's move further. Go to the top of layers palette and create a shape layer, use Rectangle Tool (U) with very dark color (#0a0a0a).
Step 53
Duplicate one of the top buttons (Ctrl+J) and place it in the central part a little bit below the top buttons. Make sure it fits the gap (that was in the same spot) in the previous screen. Remove the gloss layer, change the text to "Song list" and leave it this way.
Step 54
Now as you roll the group of this new button you have the exact same layers as we had before in these top buttons. So just select the layer on the very bottom that's our black gap, duplicate it (Ctrl+J) and place it in the on the top.
14 comments on “How to Create a Beautiful Audio App User Interface”
The instructional exercise was extremely useful… Here I figured out how to make a UI of an applications. I'm extremely grateful to you.
Sensacional
Great
This tutorial was really helpful... Here I learned how to make an user interface of an apps. I'm really thankful to you.
Helo Wojciech,
Great. Only with elements of Photoshop this strong statement. And--an insane fleiss work.
alexisonfire YEAH!
this is cool
Nice technique. Really useful…thanks for the post…
Great job! Interesting process, love to make it.!
good job but it dificult for me
i want to learn photoshop so that i can also share it with others
can you plz send me some ps shortcuts on my email id.
I want to learn Photoshop and wave page dissing. I am very happy to see your system.
I want learn all posses of Photoshop. If you share with me by bangla language, I will very pleased.I also want to learn wave page dissing