In this page I will watch tutorials for different skeuomorphism parts and will write down what I’m doing and thinking while following the tutorial.
Firstly you want to create a bit of text and create an auto layout using Shift-A, you then want to create borders around the box and round the corners.
Then edit, put colour whatever, in the box and change font if necessary
Then go to effects and add a white inner shadow with a 35% opacity adjust if necessary, ensure it’s at the top by setting the Y Co-ordinate to 4
Then you want to add a drop shadow of black, ensuring it’s below the button. Then add another inner shadow, making it black and put it inside the bottom of the box, to do so you enter the y co-ordinate as a minus, so -4 in this example.
That’s it, you change colour if necessary, but I want to make it a component so here’s how I did it
I created components and added variants, for normal, hover, clicked, disabled. the hover is quite easy, I just changed the colours opacity to 80%
For the clicked button I had to adjust the drop shadows by changing their Y position and increasing the blur
I then prototyped and connected the buttons, then I added a disabled button by making it grey and lowering the opacity of the button
Reminds me of apple’s old buttons. I think it’s not too bad but can be better overtime and if I watch and do more tutorials.