Wednesday, 6 October 2010

Unit 65 - Rollover Buttons with Rob

Last weeks lesson with Rob he showed the group how to make basic rollover buttons, This week he showed us a bit more, he had us make our new rollover buttons look more detailed and unique. But first he wanted us to design a more detailed version of a flash button using photoshop, we played around with the setting to make the button look more realistic and to make it have a shadow before the cursor moved over it. This is how mine turned out.





I'm pretty happy with these buttons, it worked will. After making them on photoshop we created a scene on flash to make the button have it's rollover effect. I was pretty pleased.

After completing the first button we started making our second button on photoshop. This button was designed to be more detailed and have a lot more effects. Layers were used to created a scene within the button, placed to give the button more character. I used a custom brush for the background which looks like the ubisoft logo in my opinion but that doesn't matter and used the colour green to make it standout. I added similar effects from the first button to the second to make the button look like it was physically press able. I added one of my favourite gaming characters ever to be the centre piece of my button, Solid Snake. removed the colour to make him blend in with the scene more and turned down the opacity to make him slightly visible. After that we make a custom effect using another layer, we created a very small L shaped icon to have a grid effect on the button, like the pixel lines you see on smart phones. This made the button look even more realistic and I loved this layer effect. Last but no least we added a little shine to the button, like what you on iphone apps, a small semi-circle on top of the icons that give it a 3D effect, then I moved it under some of the layers.




Overall I'm seriously happy with how it turned out, it looks realistic and I could see it looking good on a smart phone screen. A really enjoyable lesson with Rob and all the tasks was gone.

No comments:

Post a Comment