search

game-icons / icons

All SVG icons available on https://game-icons.net
Other
1.09k stars 122 forks source link

New version of Studio #246

Closed Delapouite closed 7 years ago

Delapouite commented 8 years ago

Hello all.

What I call the studio is the set of tools that appears in the left colum on each icon page ; this is the place where you can tweak lots of things like colors, sizes…

Today a new version of the studio has been released, totally rewritten from the ground up.

New options have been added:

Many things can still be improved / added.

Here are a few I have in mind:

Feel free to add your suggestions in this thread if you have any feedback or ideas. Thanks!

Zuvix commented 8 years ago

Please can you add the transparent background option back ? It's really the only one i used in my project, thanks. And good job on improvements :)

Zuvix commented 8 years ago

Ah there is a way to do that, nevermind ty :P

Delapouite commented 8 years ago

Hi.

Yes it's a bit different now. The new color picker is more powerful than the previous one. You can select the alpha of each color. So if you set the alpha to 0 for the background color, you get the previous behavior.

VorpalPapercut commented 8 years ago

Looks good! However, PNG icons are now downloading at size 512 regardless of the size picked. (SVG, however, now pays attention to size picked.)

Delapouite commented 8 years ago

Good catch @VorpalPapercut. Thanks! It should be fixed now.

rafraser commented 8 years ago

Thankyou so much for the colour palette! It makes things so much easier, especially choosing white.

Delapouite commented 8 years ago

Yes, the new color palettes are indeed quite cool and a true improvement over the previous version.

We have to thank the tremendous work of those people : http://casesandberg.github.io/react-color/

salattu commented 8 years ago

Superb! The studio is now very powerful - I see a future parallel site for people to post their designs made with just the studio.

One thing comes to mind: a toggle for a serif font would help increase readability in small icons.

Delapouite commented 8 years ago

Yes, a user creation gallery would be great. But it's currently impossible to implement it since the site is not dynamically generated.

Meanwhile, I've just added a dropdown to select between serif / sans for the text (you may need to F5 the page to get it).

It's difficult to add more fonts because it depends of the platform (windows, mac, linux…). I'll see later to maybe introduce async loading of web-fonts.

Also, an accordion has been added. This studio is starting to get quite crowded, and this way, I'll be able to put more stuff in each section soon.

VorpalPapercut commented 8 years ago

@Delapouite, it was definitely working earlier, but looks like your additional changes have unfixed the PNG size issue. =P

VorpalPapercut commented 8 years ago

And already it is fixed. My hat is off to you, sir.

Delapouite commented 7 years ago

A new update is ready:

ryanabrams commented 7 years ago

I'd love the ability to move the icon around within the background shape.

For example, shrinking it, then moving it upwards so there's room for text below, etc.

ishmadrad commented 7 years ago

Probably I can't find it, however I can't export the icon (SVG or PNG) with NO background at all. Ie. I want to obtain the simple icon with a transparent background. I really can't figure out how to obtain it. Thanks in advance for the info.

EDIT: ok, I finally found it. For other people interested in, if you want a total/partial transparent background, you need to click on Background>COLOR, then, there you'll find R G B and A, with values. "A" means Alpha (ie. transparency), so if you put A to 50, you'll have a 50% transparent background, if you put A to 0, you'll have a totally transparent background. Easy, if you know what that A means... ;-P

Delapouite commented 7 years ago

Thanks for you feedback @ishmadrad .

I've added a section in the help page http://game-icons.net/studio.html explaining what RGBA means.

Delapouite commented 7 years ago

New big update for the studio! Be sure to clean your cache (CTRL+F5) to get it.

You can now style each sub-paths of the foreground individually. Click on the Break Apart button in the Foreground section to let the magic happen. break-apart

Here are some examples of what can now be achieved:

yolo

perlDreamer commented 7 years ago

I'd like to suggest that you open source this so we can help you work on it, fixing bugs and adding new features.

Delapouite commented 7 years ago 
I'd love the ability to move the icon around within the background shape.

For example, shrinking it, then moving it upwards so there's room for text below, etc.

@ryanabrams

-> You can now drag the foreground shape with your mouse. Make sure to hard refresh the page (CTRL+F5) to get this feature.

parduz commented 6 years ago

Many thanks for this!!!

What i'd like to ask for is:

As a programmer (in a different field) i see that i'm aking hard things.

Thanks again for this invualuable resource

JR-Utily commented 3 years ago

I agree with the All parameters as a string of text to be copied (and saved by user in a text file) and pasted in the future to get the same setting used in the past To serialize the configuration and to make it available again would be awesome. I'm doing different sets of icons, which some should be consistent between them, and some should not. I'm currently writing all config to apply (like RGB colors and so on) on a text file in the project to be able to switch from one context to another one.

ghost commented 3 years ago

How about a randomize button? Oh and would love to save settings. Love the site.

snappedToGrid commented 2 years ago

Awesome tool and site!

It would be amazing to have some sort of a way to apply a pixel-art style to the icons? Perhaps there's a way through an SVG displacement map filter like shown here:

https://stackoverflow.com/questions/37451189/can-one-pixelate-images-with-an-svg-filter

snappedToGrid commented 2 years ago

Here's a quick example of how I pixelated this icon using the displacement map:

https://game-icons.net/1x1/delapouite/boat-propeller.html

image

DragonSlayr15001 commented 2 years ago

i think it should be possible to delete unwanted paths after splitting them

marcusmattingly commented 1 year ago

Love this thing! So useful.

BUG: If you reposition the foreground at all then the clipping doesn't work correctly. I wanted to reposition a dagger so you see the hilt and part of the blade and then clip the rest to a circle background. Could not get it to work. Clip works fine as long as you don't move the foreground.

nanoscotish commented 5 months ago

Hello, would it be possible to upload an icon to the website?

Aaron-triplett-Work commented 3 months ago

Is it at all possible to layer some of these icons on top of each other either as separate layers or if easier using the second layer as a badge. not sure how hard this is to do for the back end, you can do it in GIMP as a current solution if anyone else needs this resolve but was asking if there is an in house ability for this?

Shieke commented 2 months ago

Hello, hi! Would it be possible to add an option to save and import kind of a "User-made" preset to the studio? So if I had an icon set that I was working on with a circle background and frame, I could save it for later so that if I had to do other icon sets, it would be easy to come back to that one later? Not sure if that's possible with how the site's built, but it's an idea!