Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New version of Studio #246

Closed
Delapouite opened this issue Oct 17, 2016 · 19 comments
Closed

New version of Studio #246

Delapouite opened this issue Oct 17, 2016 · 19 comments
Labels

Comments

@Delapouite
Copy link
Member

@Delapouite Delapouite commented Oct 17, 2016

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:

  • new shapes (horizontal hexagon, octagon, star)
  • glow effect on foreground
  • optional clipping of foreground
  • independent text color
  • text size
  • more presets

Many things can still be improved / added.

Here are a few I have in mind:

  • more than 1 text
  • live dragging for text instead of setting the x/y coordinates
  • choose text stroke background

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

@Delapouite Delapouite added the studio label Oct 17, 2016
@Zuvix
Copy link

@Zuvix Zuvix commented Oct 17, 2016

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
Copy link

@Zuvix Zuvix commented Oct 17, 2016

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

@Delapouite
Copy link
Member Author

@Delapouite Delapouite commented Oct 17, 2016

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
Copy link

@VorpalPapercut VorpalPapercut commented Oct 18, 2016

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
Copy link
Member Author

@Delapouite Delapouite commented Oct 18, 2016

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

@rafraser
Copy link

@rafraser rafraser commented Oct 21, 2016

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

@Delapouite
Copy link
Member Author

@Delapouite Delapouite commented Oct 21, 2016

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
Copy link

@salattu salattu commented Oct 22, 2016

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
Copy link
Member Author

@Delapouite Delapouite commented Oct 22, 2016

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
Copy link

@VorpalPapercut VorpalPapercut commented Oct 22, 2016

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

@VorpalPapercut
Copy link

@VorpalPapercut VorpalPapercut commented Oct 22, 2016

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

@Delapouite
Copy link
Member Author

@Delapouite Delapouite commented Nov 15, 2016

A new update is ready:

  • more background shapes (star5, rhombus…)
  • rotation ratio has been changed from 90° to a more precise 45°
  • more control over the foreground shadow (blur, x/y, in/out, color)
  • better preset dropdown
  • link to help
@Delapouite Delapouite closed this Jan 6, 2017
@ryanabrams
Copy link

@ryanabrams ryanabrams commented Jan 25, 2017

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
Copy link

@ishmadrad ishmadrad commented Feb 16, 2017

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
Copy link
Member Author

@Delapouite Delapouite commented Feb 16, 2017

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
Copy link
Member Author

@Delapouite Delapouite commented Mar 7, 2017

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
Copy link

@perlDreamer perlDreamer commented Mar 7, 2017

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
Copy link
Member Author

@Delapouite Delapouite commented Mar 23, 2017

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
Copy link

@parduz parduz commented Apr 4, 2018

Many thanks for this!!!

What i'd like to ask for is:

  • new background shapes like various shields, flags/banners, and anything else you could use to make "araldic symbols" with the icons
  • Ability to pick an icon as a background shape (maybe just the ones that will have a new tag "vaild background")
  • the ability to "pick" more than one icon, edit them as a whole in the studio (so i can see, for example, what stroke width is good for all of them), and download all of them.
  • 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

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

Thanks again for this invualuable resource

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.