Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
I decided to make some changes to a few of iOS 7's icons. Here's a screenshot with Voice Memos, Photos, Game Center, Safari, Camera and Stocks all changed:
i_OS_7_new_icons.png

(Full size)

Altered icons

Icons.png


Safari
-Icon (120x120).
-I still need to make the compass slightly bigger to fit the Grid System. The current iOS 7 icon does fit this system because the circle border around the compass touches the most outer circle on the Grid System icon. Removing the white border means nothing is touching that outer circle, so I would have to make the compass itself bigger to touch the outer circle (it helps a lot if you've seen the iOS 7 Grid System: there's a link down below). I also need to make a 256x256 version.
Game Center
-Original Fresh Pie fix-up (120x120)(256x256). Thanks!
-Purple (120x120).
-Green (120x120).
-I altered the dart board so that it fits with the Grid System. To compensate for the central position of the board, I made the dart smaller (otherwise it sticks out too much). I also made a purple version in an effort to make my icon feel more consistent with the app's purple UI. Considering I only used MS Paint and Aseprite, it looks quite nice, but it could still do with a bit of fixing up. Also, that purple background colour is a bit too dark for me, but I did just pull it from the WWDC icon.
Photos
-Fresh Pie icon (120x120).
-Fresh Pie made this icon himself, and it looks great! Thanks for letting me use it here. If you want to know more about the changes, ask Fresh Pie yourself! He's usually quite active on this thread.
Voice Memos
-Icon (120x120)
-I based this on the iOS 6 icon, while keeping the iOS 7 aesthetics. I completely re-drew the microphone, but modeled it entirely around the Grid System to make it feel consistent with the other icons. For the colours, I experimented with several different combinations, and while I found Weather-like blue to work quite well I didn't use it due to how many blue icons already exist. In the end I chose the Music icon background (flipped) for the microphone colour, while maintaining the white backdrop.
Camera
-Icon (120x120).
-All I did was remove the small orange/yellow dot next to the lens, but I think it makes it look a bit nicer without it. I need to make a 256x256 version, but I can't do that until I get hold of a high-res version of the original.
Stocks
-Icon (120x120).
-After completely removing the stripes last time, I decided to add them back but make them more subtle. Again, I can't make a 256x256 version without a high-res original.

To-do list
-Rework all changed icons to fit the Grid System. - The only change left is to make Safari's compass ever so slightly bigger, but it's so unnoticeable that I can't be bothered.
-Produce 256x256 versions of all changed icons. - Not possible until we get higher quality versions of the originals.
-Edit/redesign more icons people don't like (Contacts?).

iOS 7 icon Grid System
This is what I'm talking about (1024x1024).

Use the icons in iOS 7!
It's actually possible to use these icons in iOS 7. Use this site and the guide below (for the Web Clip section) to create a home screen shortcut to each app:
-Set the label to the app's name (Safari, Game Center, Music etc.).
-Set the URL to either any site you want as a sort of home page, or to one of the ones listed below for specific apps.
-Un-tick removable so that it will only be deleted when you uninstall the profile from the Settings app.
-Set one of the 120x120 icons (up there) as the icon.
-Tick precomposed icon.
-Tick Full Screen unless you are linking to Safari.

By changing the URL you can link to different apps. Here are a few URL examples:
about:blank -Safari app (make sure Full Screen isn't ticked).
gamecenter: -Game Center app.
music: -Music app.
videos: -Videos app.
photos-redirect: -Photos app.
ibooks:// -iBooks library (if installed).
fb://profile -Facebook app on your profile.
You get the idea. Try the ones on here.

What do you think? Should Apple do something similar to the icons for the final release?
 
Last edited:

GrandPhrase

macrumors 6502
Jun 16, 2012
431
1
Mmm... I like this very much!

On a side note: Do you think Apple should make all the gradients equal or did they do it intentionally as so not to create a sense of monotony? Currently, some apps like mail go from dark to light, while others like iTunes Store and App Store go from light to dark.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
On a side note: Do you think Apple should make all the gradients equal or did they do it intentionally as so not to create a sense of monotony? Currently, some apps like mail go from dark to light, while others like iTunes Store and App Store go from light to dark.

I think that having each gradient different helps to easily distinguish between certain icons. Weather and Mail have the same styled gradient, but the gradient in Weather is far less harsh which helps to make the icons look different. It's probably why Apple made Safari like it is: otherwise it would look too similar to App Store.

While I think the icons should be made to look more consistent, they should all still have slight differences from one another.
 

Vane

macrumors newbie
Jul 10, 2013
13
2
Your Safari icon looks absolutely gorgeous. I always hated the white frame around the compass on the current design.

For the camera icon:
I prefer Apple's design over yours. You made it a little simpler but I kinda miss that yellow dot. :D

Btw, there is this site (NeuevsOld) where people can compare the icon designs (iOS 6 / iOS 7) and choose their favorite.

Here's the result so far:

Neue-vs-Old-500x1405.jpg
 

Apple blogger

macrumors 6502a
Feb 28, 2013
889
174
The safari icon is a 1000 times awesome! I don't like the stock and I don't notice any diff in camare ... You should report this to apple at bugreportapple.com please do it for the safari
 
Last edited:

batting1000

macrumors 604
Sep 4, 2011
7,451
1,840
Florida
I decided to make some changes to a few of iOS 7's icons. Here's a screenshot with Camera, Stocks, Safari and Game Center all changed:
Image
(Full size)

Here's Safari and Game Center by themselves:
Image Image
Game Center - I pulled one of the 4 pictures from the original icon, but as a result it's a bit rough around the edges. Feel free to fix it up.

It's actually possible to use these icons in iOS 7. Use this site and the guide below (for the Web Clip section) to create a home screen shortcut to each app:
-Set the label to the app's name (Safari, Game Center, Music etc.).
-Set the URL to either any site you want as a sort of home page, or to one of the ones listed below for specific apps.
-Un-tick removable so that it will only be deleted when you uninstall the profile from the Settings app.
-Set Safari or Game Center as the icon.
-Tick precomposed icon.
-Tick Full Screen unless you are linking to Safari.

By changing the URL you can link to different apps. Here are a few URL examples:
: - Does nothing (stays in Safari).
gamecenter: - Game Center app.
music: - Music app.
videos: - Videos app.
ibooks:// - iBooks library (if installed).
fb://profile - Facebook app on your profile.
You get the idea. Try the ones on here.

What do you think? Should Apple do something similar to the icons for the final release?

I'm not wishing to play a game of darts when I go into Game Center.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
I'm not wishing to play a game of darts when I go into Game Center.

I'm not wishing to use a compass when I go into Safari, but that still remains as the icon.

Also, the darts board was one of the 4 pictures in the original Game Center icon. I didn't create this icon from thin air.
 

0000757

macrumors 68040
Dec 16, 2011
3,894
850
What do you think I should do for Game Center then? I've got enough complaints about it for me to change it.

1) The App icon is dangerously low-res compared to all the other icons.

2) The dart-board isn't bad, but the green doesn't fit. Game Center is bright with a main blue theme. A Blue icon with the white dartboard OR probably a white icon with a blue gradient on the dartboard would look good too.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
1) The App icon is dangerously low-res compared to all the other icons.

2) The dart-board isn't bad, but the green doesn't fit. Game Center is bright with a main blue theme. A Blue icon with the white dartboard OR probably a white icon with a blue gradient on the dartboard would look good too.

1) I'm currently doing my best to fix up the dart board. It's edges are very jagged and rough as a result of my pixel editing skills. Trust me, it's not intentional.

2) The neon-green does look a bit off with the overall feel of Game Center. The problem is I can't change it to blue because that would leave us with just too many blue icons and not enough of other colours. I could try some colours, but due to limitations in skill I can only use backgrounds that appear on other icons. Here's a list of the coloured backgrounds I could do:
-Green (Phone, FaceTime, Messages) - the one used at the moment.
-Blue (App Store, Mail)
-Blue (Weather)
-Red (Music)
-Pink (iTunes Store)
-Purple (WWDC 2013)
-Grey (Camera, Settings)
-Any of the above with flipped gradients (Mail, Weather)
-White with the center image having the gradient (like you suggested)
 

batting1000

macrumors 604
Sep 4, 2011
7,451
1,840
Florida
I'm not wishing to use a compass when I go into Safari, but that still remains as the icon.

Also, the darts board was one of the 4 pictures in the original Game Center icon. I didn't create this icon from thin air.

The compass represents what Safari lets you do. The compass helps to guide you to places and Safari helps guide you to websites.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
The compass represents what Safari lets you do. The compass helps to guide you to places and Safari helps guide you to websites.

The dart board is used (in this case) as a symbol for games in general. There's a reason why Apple have been using it for Game Center since iOS 4.1, and are still using it in OS X.
 

batting1000

macrumors 604
Sep 4, 2011
7,451
1,840
Florida
The dart board is used (in this case) as a symbol for games in general. There's a reason why Apple have been using it for Game Center since iOS 4.1, and are still using it in OS X.

Game Center is the social aspect of games. You don't go to Game Center to play games. You go there to see achievements, leaderboards, etc.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
Game Center is the social aspect of games. You don't go to Game Center to play games. You go there to see achievements, leaderboards, etc.

What would you replace the dart board with then? Because to me the bubbles don't portray Game Center's social aspects, but rather the design of the app.

Besides, it's just an image that you can easily associate with games, hence why it was chosen before. If Apple used a dart board in their previous icon then they're quite likely to use it again, which is why I used it.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
To me the bubbles represent a fun, playful, social atmosphere.

It's all just personal preference. I assume then that you want the bubbles, or is there perhaps another image that you'd prefer?

I'll try to redesign the icons based on your's and other people's feedback. If enough people like the bubbles (or something else) then I'll do my best to shape the icon around that. Keep in mind I'm only using the feedback of those who actually want the Game Center icon changed.
 

batting1000

macrumors 604
Sep 4, 2011
7,451
1,840
Florida
It's all just personal preference. I assume then that you want the bubbles, or is there perhaps another image that you'd prefer?

I'll try to redesign the icons based on your's and other people's feedback. If enough people like the bubbles (or something else) then I'll do my best to shape the icon around that. Keep in mind I'm only using the feedback of those who actually want the Game Center icon changed.

I don't really know to be honest. The icon does match the app though, so you'd have to redesign the app if you want the icon to make sense.
 

cobbyco

macrumors 6502a
Original poster
Aug 6, 2012
740
91
Game Center is bright with a main blue theme.

I've just realised that Game Center actually has a more purple theme (just look at the tab buttons), which would mean I could use the WWDC app's background. What do you think?

----------

The icon does match the app though, so you'd have to redesign the app if you want the icon to make sense.

Some of the other apps don't have matching icons, but their icons still remain relevant. I think as long as it relates to gaming or the bubbles it should work as a good icon.

I'll let some more feedback roll in before making a decision.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.