Glassy Show Icons for SageMC - Coming Soon

[MeInMaui]

Hi all,

We've been discussing putting together a set of semi-transparent glassy show icons for SageMC in the Addons thread. It seemed about time to breakout and start a new thread for this. I have a preview of the ones I have done so far. I still have to generate the Encoder Markers before I release them. I'm hoping to finish and post the icon pack over the weekend.

I'd like some feedback. Are the meanings of the icons obvious enough? Also, I have made two versions of the watched and favorites (series record) icons. I will include both version in the icon pack, but which should I make the default? I personally prefer the eyes for the watched icon and the heart for the favorites icon, but they may be too silly for some. I am also planning on releasing large (60x60) and small (30x30) versions of the icons as well. As always, suggestions are welcome.

Aloha,
Mike

http://img266.imageshack.us/img266/9666/glassythumbnails12li.png (http://imageshack.us)

[millers_35]

Ah Man great job. Those look awesome!!! Cant wait till you release them. I like the heart and the eyes as well but some may not but definetly put them in as an option.

Miller

[evilpenguin]

Just an observation, but they look a little weird with the light hitting them dead on the top of the sphere. Perhaps you could try moving the "reflection" (or whatever you want to call it) slightly askew and give them a little more of a natural feeling? Maybe something like this...

https://home.comcast.net/~zadigian/nav_forward_nofocus.png

Otherwise, I like where your going with this :thumb:

[MeInMaui]

Thanks for the feedback everyone. Please keep it coming.

Perhaps you could try moving the "reflection" (or whatever you want to call it) slightly askew and give them a little more of a natural feeling?

I'll try a couple variations of the reflections and see what I can come up with. I'll post an example of each and see what is preferred. Since I'm planning on releasing different versions anyway (large and small) I might make up a couple of sets with different reflections and such. It just depends on how much time it all takes. (I really want to finish the skin I'm working on :D )

jds23,

Additional glassy graphics are on my todo list for my orbital skin, so I think I'll be able to address your requests. It might just take a little while.

Thanks again!

Aloha,
Mike

[kricker]

Mike,
Your graphic work is getting better and better with each thing you do. I read thru some of your other posts where you are using Illustrator and Photoshop. As a graphic designer and animator, I use these every day. If you have any questions on how to do some things, or even how to make things easier on yourself, feel free to contact me. I'd be glad to give you some help.

[MeInMaui]

Thanks for the encouragement kricker. I have so far to go it isn't funny, but I have lots of years to get better. I can guarantee I'll take you up on your offer. But don't worry, I'll try not to be too much of a pest. Thank you very much, I really appreciate it.

Aloha,
Mike

[kricker]

No prob...pester away! :)

[geogecko]

Nice job MIM. I agree, the reflection could go a little, maybe to the left (as if the light source was coming from the left), but other than that, they look great. Can't wait to use them.

[MeInMaui]

Ok, so I've learned alot about using layers upon layers for generating highlights and shadows. After seeing a finished example, I have to agree that moving the reflection works much better.

So, which version do you guys prefer: original, revision1, revision2, or am I completely out to lunch? I personally like the effect of revision2, but additional suggestions are welcome.

Aloha,
Mike

http://img72.imageshack.us/img72/4967/iconcomparison6ud.png (http://imageshack.us)

[kricker]

I vote for revision 1. Drop shadows are way over used. Also in this case, as most cases, it just looks cleaner and more professional without them.

Also if you really want a glass look, there should be some small highliting on the dark side as well. example (http://www.istockphoto.com/file_thumbview_approve/627564/2/istockphoto_627564_glass_balls_still_life.jpg)
tutorial with a really shiny ball (http://www.interfaceuniversity.com/tutorials/ShinyGlassBall/page1.php)
If you make your ball a black one, then you place it on your top most layer using transfer modes to "apply" the shiny ball look to the layers below. Then you can make multiple "shiny ball" icons in no time.

You might also wanna try it without any lighing on the "icons" inside the balls.

[gplasky]

I vote for revision 1. Drop shadows are way over used. Also in this case, as most cases, it just looks cleaner and more professional without them.
I'd have to vote for Rev. 1 also. The drop shadows actually makes the graphic more confusing. In Rev.1 you clearly see the graphic.

Gerry

[viper99]

Rev 1 but a litle bit brighter like the Original.

They look great, can't wait.

[geogecko]

Tally another for Rev. 1. These are going to be so cool. Finally, an artist willing to do some cool stuff for Sage...

[MeInMaui]

I vote for revision 1. Drop shadows are way over used. Also in this case, as most cases, it just looks cleaner and more professional without them.

Also if you really want a glass look, there should be some small highliting on the dark side as well.

Thanks for the advice. It really helps to have someone who know what they are doing give input.

I'd have to vote for Rev. 1 also. The drop shadows actually makes the graphic more confusing. In Rev.1 you clearly see the graphic.

Thanks. You guys have me convinced.

Using rev1 as the starting point, I've added some highlight on the dark side, reduced the lighting on the inner icon, and increased the transparency a notch.

Now I'm starting to feel like I'm at the opthamologist. 1 or 2 ..... 1 or 3 :D

Aloha,
Mike

PS. geogecko: I'm no artist, but I really appreciate the support. Thanks.

http://img526.imageshack.us/img526/6906/iconcomparison22pa.png (http://imageshack.us)

[kricker]

Looking good. Sitting back a few feet and looking at it gives me the idea of what it will look like within Sage. I like rev 3, but depending on the size of the users TV set and if they are HD or not, it could be hard to tell the difference between the 2.

The following are only suggestions, ignore them if you like:
If you stretch that lower highlight a bit more around the edge. Like something similar to a very thin moon shape. Then you should definately tell the difference in the 2. You also might want to boost the contrast a little as well, so it looks a bit more glossy.

[MeInMaui]

Looking good. Sitting back a few feet and looking at it gives me the idea of what it will look like within Sage. I like rev 3, but depending on the size of the users TV set and if they are HD or not, it could be hard to tell the difference between the 2.

The following are only suggestions, ignore them if you like:
If you stretch that lower highlight a bit more around the edge. Like something similar to a very thin moon shape. Then you should definately tell the difference in the 2. You also might want to boost the contrast a little as well, so it looks a bit more glossy.

Good point. I hadn't even thought of sitting back a few feet. I was worried about overdoing the contrast, but I guessed I erred a little to much on the side of caution. Thanks.:thumb:

[evilpenguin]

I'm a huge fan of rev 1. It looks like it will match the SageMC themes very well. Great work!

[ToxMox]

I like the icon ideas.

Just want to give a pointer coming from designing the default STV icons. Stay away from things that are too detailed and try to use bold lines otherwise when Sage scales them down it will be very difficult to see what they are.

[kricker]

I like the icon ideas.

Just want to give a pointer coming from designing the default STV icons. Stay away from things that are too detailed and try to use bold lines otherwise when Sage scales them down it will be very difficult to see what they are.
Exactly. Good GUI design usually follow the KISS theory (Keep It Simple Stupid). But just because something might look simple doesn't mean the underworkings, or the path to it actually are ;) I have found the more simple things appear, the more difficult it is to get them to "look" that way.

[insomniac]

i hate to critique something so cool. I love what you have done so far. Question:

Is there a way that you can bleed the very clean lines of the reflection a bit? With something like the photoshop correction brush or something similar? To me the clean lines just stand out too much.

I can say that I would definitely use what you have done so far! Im just giving my 2 cents worth i guess...

I.

[MeInMaui]

Ok guys,

I have some good news and some bad news.

The good news is that I've incorporated pretty much all of the great suggestions that everyone has given. I have no idea what I am doing, so the input on these has been invaluable to making them much better than I could have ever done on my own. At this point, I'm back to having all but the Encoder Icons made.

The bad news is they look horrible in SageMC. They're fine in the guide, but in the menus the edges (especially the lower right) don't blend properly and they just look awful. Sorry I don't have a screen shot of this. I didn't get to check it until nearly midnight last night and I had to get some sleep for work. The icons seemed to work better before with darker edges, so I'm hoping that if I add a very slight shadow or dark outer 'glow' this might fix the issue.

Kricker, do you have any suggestions on how to address this?

As soon as I get this worked out and add the encoder icons, I'll release them. Hopefully that will be in the next couple of days. Thanks for your patience. The picture below shows what I have so far.

Aloha,
Mike

http://img352.imageshack.us/img352/4702/glassyiconset26jq.png (http://imageshack.us)

[ToxMox]

Mike,
I don't know if you are doing this but the proper way to output them from Photoshop would be to make sure the icons are on a transparent background then do File - Save for Web... and choose PNG-24 in the preset menu and make sure Transparency is checked.

EDIT: There is also an issue with how Sage antialiases images that could be causing your problem.

[MeInMaui]

Thanks ToxMox.

That is exactly how I am saving them. Interesting point about the anitaliasing. Is there somewhere I can get some more info on this?

Mike

[ToxMox]

Mike,
No place to really get info about it. It is currently in the early stages of being looked into by Narflex. Issue being that bitmap images don't anti-alias as well as they could when they are scaled.

[kricker]

If you can send them to me Mike, I can take a look at them and make sure the transparency is working properly.

[MeInMaui]

Thanks kricker,

If you PM me with your e-mail address, I'll send them tonight. Do you want the .psd files, the .png images, or both? I'm 5 or 6 hours behind you, so you probably won't see them until tomorrow. I'll mess with them tonight and see if I can get anywhere with them as well.

Thanks again,
Mike

[geogecko]

New thread started.

http://forums.sagetv.com/forums/showthread.php?t=18778