The VG Resource

Full Version: Improved Icons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5
Hello,

I'd like to put forward some efforts that myself and the staff have been knocking about regarding the icons on the site. As it stands, we currently struggle - not just the staff - with not only consistency, but decent representation. For sprites, the area we give ourselves is far too small to suit recent games, post Playstation era. For models, the icons are practically useless due to their tiny size.

So, I came up with a few different options; but ultimately they all looked off. After collaborating, the staff and I have come to the conclusion of a design. This is still subject to change based on discussions that can occur in this thread, should one come about that ultimately works better.

[Image: pGnVF0e.png]

On the left is our new icon style, on the right our old. The benefits of the left are extreme.

- Larger area for image.
- Separated backdrop from foreground; sprites are transparent images overlayed on the icon, instead of being a solid image.
- Text is rendered by the browser, not solidly attached to the image.
- Said text is called from the data. Edits made to the sheet from the database are called to the icon straight away.
- 3 lines worth of space on the text area.
- Wider text area for more input.
- Text is generated by a custom made font, that replicates Verdana but with a minor amount of anti-aliasing. This means that even if you have ClearType enabled in windows, the font remains extremely close to the original style.
- Full consistency throughout the site. No more random slightly-darker icons, or incorrect font size, or anti-aliasing, or wrong font all together.
- Easy to alter later in the game.
- We can theme icons for seasons if we want Big Grin

With these changes means that, in years to come, should we wish to change any aspect of the icons, we can do so with great ease. A single change would be a matter of editing 1 set of files, instead of 56,000+


Now, the tricky parts;
- We cannot change the size of the sprite area later. What we pick now sticks until we do this again:
- We need to make new "icon images" for 55,000 sheets...

This is a big task, but not too hard. Sheet icons will now look like this:
[Image: D6NZy0y.png]
148x125
Simple crop, with transparent background. This means that making new icons to put on the site after the initial batch will be incredibly easy. No longer will you need to write out the same name, twice, and try to compress the name to fit in the textarea.

We will also need to increase game icon sizes to relate to these larger icons; this is still a pending decision, but it'll be the exact same style as it is current, just... bigger.



This decision comes from the fact that these icons were designed when 800x600 resolutions were the norm, and CSS was but a weak, and PHP was but a developing language. We need to utilise these features, and we need to do it before we get into 100,000 sheets...

I will work with Pete to make a simple submission method for revised icons. If you'd like more information, or have any questions, or any suggestions, please fire away.

[Image: qVB4QOY.png]
(That first icon has the longest name currently found in our database... That's how well it fits Wink)
How it the size as compared to the Gameboy/Gameboy Color resolution?
[Image: tetris-gameboy-screenshot.png][Image: zerIAf1.png]
[Image: zerIAf1.png][Image: tetris-gameboy-screenshot.png]


[Image: 0G0GsIa.png]
(01-11-2014, 12:06 PM)Deathbringer Wrote: [ -> ]How it the size as compared to the Gameboy/Gameboy Color resolution?
GB/GBC is 160x144 so a screenshot will fit inside just fine.

I'm also fine to create new icons for all 1 of my sheets submitted.
This is perfect. It's a small difference, but it will help you guys immensely Heart
Actually now that you guys brought the GB/GBC's resolution up... I just realized that with game icons, some GB games already have an annoying bit of blank space on the sides (like this);

[Image: 2224.png]

with the new larger icon, there will probably be even more blank space, right? @__@

Probably can't be helped, but it might look kind of unsightly.
I've already started with preparing my sprite sheet icons for the new system. 108 down, 812 left to go.
So we'll just need to submit already formatted images instead of the full icons.

Like this:
[Image: tsr__gagyson_zps037170d8.png]

Or will that cause some sort of problem with the new system?
Dazz says that's absolutely perfect.
(01-11-2014, 12:57 PM)Mongoose Jetters Wrote: [ -> ]Actually now that you guys brought the GB/GBC's resolution up... I just realized that with game icons, some GB games already have an annoying bit of blank space on the sides (like this);

[Image: 2224.png]

with the new larger icon, there will probably be even more blank space, right? @__@

Probably can't be helped, but it might look kind of unsightly.
[Image: 2113.png]

We just do this for ever super-low-res title. It's not too bad.



Also, a word of warning; if you want to do your own icons, please name them with the same ID as the sheet has on the site. You can see this by trying to save the sheet right right-click and save as, or by looking at the URL of the sheet in question.

This will allow me to easily implement the icons into the site; when there's 55,000 like this, I'm thinking the best method is to just simply duplicate the folder structure we currently have, and change where the images come from. Otherwise we'll have to manually add them to the correct sheets, and that could take a while.

Glad this is going down so well!

Deathbringer, what you have there will produce this:
[Image: 9L2nqvl.png] (obviously with the right name)

If you didn't have the transparent bit, I'd suggest removing all of the empty space around the sprite. that would produce this:
[Image: g7V8xQT.png] out of [Image: ifHuL04.png]
Although when things come out this small, I'd suggest a 2x size.
A few questions -

One, can you post the blank icon so I can update my icon maker. One for each color scheme please.

Two, there seems to be a clearcoat effect on the text in these new icons. Is this going to be the standard practice, because not every computer will produce the effect exactly the same. (It also makes modifying the icon maker a bit more difficult).

Three, are you planning on changing the game icons as well, because they now look puny in comparison to the sprite icons.
The icon maker won't actually be necessary with this new system. All you'll be uploading is the image part which will be overlayed on the icon background.

I can't comment on the clear coat as I'm not sure what you're referring to but we will be increasing the game icon sizes as well.
(01-11-2014, 03:17 PM)Drshnaps Wrote: [ -> ]One, can you post the blank icon so I can update my icon maker. One for each color scheme please.
Icon makers are no longer required with this system; a way of making images transparent may be of use though.

(01-11-2014, 03:17 PM)Drshnaps Wrote: [ -> ]Two, there seems to be a clearcoat effect on the text in these new icons. Is this going to be the standard practice, because not every computer will produce the effect exactly the same. (It also makes modifying the icon maker a bit more difficult).
This is why I've made a custom font; if you see the images I've posted, I actually have that "clearcoat" effect in question enabled. Zooming in, you'll see a slight amount of blur to the font, but nothing too dramatically obvious.

(01-11-2014, 03:17 PM)Drshnaps Wrote: [ -> ]Three, are you planning on changing the game icons as well, because they now look puny in comparison to the sprite icons.

Yes, we are; read the post Tongue
Ignore me I'm an idiot. I only really quickly glanced through this and should have read it more carefully before asking anything.

The request for the blank icon still stands though, for my own purposes. I'd like to keep my own personal database looking consistent for my own satisfaction of being sure everything looks good before I submit them. Call me anal retentive if you like.
[Image: i2B4Cks.png][Image: 369.png]
Pages: 1 2 3 4 5