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

Comments

Projects
None yet
9 participants
@Delapouite
Member

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

@sweil9

This comment has been minimized.

Show comment
Hide comment
@sweil9

sweil9 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 :)

sweil9 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 :)

@sweil9

This comment has been minimized.

Show comment
Hide comment
@sweil9

sweil9 Oct 17, 2016

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

sweil9 commented Oct 17, 2016

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

@Delapouite

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Oct 17, 2016

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@VorpalPapercut

VorpalPapercut 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.)

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

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Oct 18, 2016

Member

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

Member

Delapouite commented Oct 18, 2016

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

@FluffyXVI

This comment has been minimized.

Show comment
Hide comment
@FluffyXVI

FluffyXVI Oct 21, 2016

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

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

@Delapouite

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Oct 21, 2016

Member

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/

Member

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

This comment has been minimized.

Show comment
Hide comment
@salattu

salattu 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.

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

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Oct 22, 2016

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@VorpalPapercut

VorpalPapercut Oct 22, 2016

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

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

@VorpalPapercut

This comment has been minimized.

Show comment
Hide comment
@VorpalPapercut

VorpalPapercut Oct 22, 2016

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

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

@Delapouite

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Nov 15, 2016

Member

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
Member

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

This comment has been minimized.

Show comment
Hide comment
@ryanabrams

ryanabrams 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.

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

This comment has been minimized.

Show comment
Hide comment
@ishmadrad

ishmadrad 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

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

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Feb 16, 2017

Member

Thanks for you feedback @ishmadrad .

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Mar 7, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@perlDreamer

perlDreamer 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.

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

This comment has been minimized.

Show comment
Hide comment
@Delapouite

Delapouite Mar 23, 2017

Member
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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@parduz

parduz 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

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