02/01/2014 - admin

Creating a mobile app icon in less than 30 minutes

creating-mobile-app Humans are nostalgic by nature. A few months I started to get captivated by the simplicity and beauty of flat design, and I started experimenting with it. But now I think some things are better represented in a realistic way. Simplifying things to it’s minimum is a great option due to the nature of our current devices, which even though they’re fast, they’re not as fast to handle lots of data from different sources and in different sizes and shapes. Skeuomorphic design had its glorious days, and everyone who know a bit about design is assuming it dies. Well, nostalgically, I think we still need it, but that’s a matter of another article. That’s why in this guide I will create a skeuomorphic icon for a mobile app resembling the icon of the Mac Mini. It is a simple icon to create since its shape can be assembled within the confines of the iOS 7 app icon grid. Also, its sleek and clean design makes it look very nice. And for those flat design lovers there’s also something, so let’s begin. The following is the grid we are going to use to know the dimensions of the icon. It is the official grid for iOS 7 and is coming really handy for our design. The good news is you don’t even have to create it because you can download the vector grid for free here. grid Create a new document in Photoshop (I used a 600 x 400px document, but you can use one preferably of 512 x 512px). Locate the grid, and with the rounded rectangle tool, create a rectangle at the bottom of the grid with a radius of 80px. This is going to work as the front part of the Mac Mini. shape-01 Duplicate the rounded rectangle and locate it at the top of the grid. This shape is going to represent the top surface of the Mac Mini. shape-02 Add a linear gradient to the bottom rectangle with the properties you see here... shape-03 ...and the shape you just created should look like this: shape-04 Now, apply a radial gradient to the top rectangle the way it's showing below shape-05 Overlapping these layers will result in a shape like this, which starts looking like the mac mini… shape-06 For this part, create a stroke for the top layer to constitute a subtle integration between both shapes. It also works to mark a more pronounced division between them. The stroke needs these properties: shape-07 It is actually a slight change that doesn’t look like a big deal, but it adds more realism to the design since it sharpens the edge. It will result in something like this: shape-08 After that, create a new squared rectangle and, covering both bottom and top shapes, apply a noisy pattern to resemble the chromed surface of the device. shape-09 Now it’s time to locate the Apple, but creating it would be impractical since there are a lot of people who have already done it and put it online. You can download the vector here for free and integrate it on the design. Be sure to use guides, so it is well centered. shape-10 However, the logo itself doesn’t work well. We need to add a radial gradient in order to make it a little 3d-like. For this,  we do the following: shape-11 After that, you still need to apply a subtle inner shadow to create a division between the logo and the top chromed surface. Make it like this: shape-12 The resulting image would be a nice smoothly illuminated Apple logo. If you have followed the steps correctly, you must have something like this (keep in mind that the apple logo does not have a noise, so you need to put the logo layer at the top: shape-13 Now the only things left are two elements: the LED power indicator, so small that it’s barely noticeable, and the IR sensor, which is the black dot in the front which allows you to control the mac mini with a remote. Create both of them using the simple ellipse tool. shape-14 And that’s it! You’ve just created a skeuomorphic version of the Mac Mini to use as a template for a mobile app icon. mac-mini-icon-final The idea with this kind of experiments is to be creative and imagine how to integrate different elements of real life into the container of the grid; skeuomorphic design gives us the possibility of adapting those shapes to make them part of icons apps. You can also create the flat version of it, which will look like this... shape-15 …and it can be done just by removing any effects, and by altering the colors, so it simulates the authentic design. It is all about preferences anyway; I personally think flat design is awesome, and it needs to be part of the world right now; it just helps users to have a faster experience than any other type of design. However, as devices get faster, we might experience a return to skeuomorphism, or at least some sort of mixture between flat and realistic (which might lead to the return of minimal user interfaces) but only time will tell.


Leave a Reply