Gun Girl 2 – storyboards,Button stages, and Mockup pages

iOS7 icon re-design: Icons in iPhone mockup

Today we completed the icons required for our classes brief, we did not make enough to cover the iPhone menu, so I put in some current iOS icons.

Overall I am quite happy with how they turned out, I would have to say the icons we made in Photoshop are the ones I am alot happier with. If there was anything I would change it would be the earlier icons I made using Illustrator (eg. Calls and maps), as I learnt alot more the further I worked through the icons. I would like to see the same techniques I learnt applied to these.

iOS7 icon re-design: Passport

Reference images:

http://www.patentlyapple.com/.a/6a0120a5580826970c0192ac4ef070970d-pi

http://www.patentlyapple.com/.a/6a0120a5580826970c0192ac4ed7c3970d-800wic4ed7c3970d-800wi

Roughs:

Final:

iOS7 icon re-design: Review

Below are the first 7 icons I have made in Adobe Illustrator, the next are going to be done in photoshop.

iOS7 icon redesign – Calls

Images used for references:

http://cdn.itproportal.com/photos/iphone-call-icon_original.jpg

http://www.rightawaybails.com/Social_Newtork_Icons/telephone-icon.jpg

http://newmansgroundcare.com/images/iphone.jpg

http://www.r2revents.com/images/contact/phone_icon.png

Roughs:

again I am using, the same style theme as the current iOS but changing the buttons to how I believe they should look. the phone icon I wanted to alter but not too much, I added a phone chord around the phone to box it in, keeping the striped background style.

Calls roughs

Final:

Here is the final design for the calls icon, I applied a striped background using the blend tool and allocating how many steps it needed to cover the box. I made the phone from various shapes and then merge them together as one piece. I applied a soft drop shadow to the phone, also applying a gradient to the bottom left corner.

** Updated Tues 24th Aug**
Here is the final design with the grid system applied to the icon. The phone chord gives creates more of a wall around the phone, going close to the edges.

iOS7 icon redesign – Messages

Images used for reference:

http://cdn.redmondpie.com/wp-content/uploads/2011/08/iphone_messages_icon_thumb.png

http://www.evpdiscount.com/home/wp-content/uploads/2011/09/sms-texting.jpg

http://www.dondrup.com/tou57f/text-message-icon

 

 

Message roughs:

I wanted to stay with the same style theme as the current iOS but changing the buttons to how I believe they should look. Two speech bubbles seemed appropriate as its a conversation from both ends, adding another speech bubble to the current style, I felt was necessary.

Message final:

Here is the final icon I made using a drop shadow effect on the bubbles, and a gloss look to the icon itself. Again, I kept it quite simple, as the original icon design was.

** Updated Tues 24th Aug**

I applied the grid system to the messages icon, also fixing up the gloss reflection to look more fitting, also adding a semi transparent layer on the top half of the icon.