Design custom logo

[joshwcomeau]

Right now, the Guppy logo is the Apple "tropical fish" emoji (assuming you're on a mac, 🐠)

This is likely a copyrighted thing, though, so we should really get a custom one.

I've purchased no fewer than 3 logos on Fiverr, and I've since learned that there's a reason everything is so cheap on Fiverr. I haven't been super happy with any of the results.

If any graphic designers are reading this, help! Ideally the Guppy logo should be similar in tone/feel to the Apple tropical fish emoji; a round fish with some interesting gradients/patterns. Ideally it'd look more serene, maybe with a subtle smile?

[AWolf81]

I've created some drafts and the following is my favorite. (The others aren't suitable for smaller icons because of too fine details.) It should be also OK for smaller icons. I'm no designer but I took the tropical fish emoji and I've re-drawn it with slight modifications.

Please find enclosed the Affinitiy Designer file and the SVG. If you need it in a different format/size please let me know.

I've uploaded the files to Google Drive. https://drive.google.com/file/d/1MGYxzPvvWbvdH_9sgsKy__5XJF_24zt7/view?usp=sharing https://drive.google.com/file/d/1xxwt2QD4y_EIMSXEzy9MXmrqfMpIio98/view?usp=sharing

PNG file 256x256px

PNG 32x32px

If I should modify some details please let me know.

[superhawk610]

This isn't a tropical fish, but it is a guppy 😃

[joshwcomeau]

Oh wow, thanks to both of you! These look great :D

Of the two, I think I prefer @superhawk610's. Captures the fun and colour that I was imagining. Curious to get thoughts, @bukharim96 @Haroenv @karlsander @bennygenel

For @superhawk610's two iterations, I think I prefer the second one, with the mouth :D maybe it could be a bit subtler though (maybe 75% opaque or something so it'd be a dark orange instead of black?).

@AWolf81's looks great at a small size, but the neat thing about this not being a webapp is we don't have to worry about a 16x16 favicon. Still, might be worth testing @superhawk610's at a smaller size, and maybe having a more minimal one for if/when we need smaller icons?

[superhawk610]

Alright, here it is with a subtler smile and at a few sizes. What jumps out to everyone as areas that are confusing/difficult to interpret at the smaller sizes? As is, no changes have been made at the smaller sizes.

My first impressions are that it starts to wash out below 64x64 and it looks like the eye disappears at 32x32. I'll try reducing the complexity of the colors and see if that helps at low resolutions.

If anybody else wants to work on it, I can email you the AI file, just let me know.

[bennygenel]

@AWolf81 and @superhawk610 great work and thank you both. I'm really in the middle of both designs. Each have their advantages and disadvantages. I believe logo should be simpler, it should feel like you can draw it by yourself on a piece of paper with a pen yet it should have its details. Because of this I liked @AWolf81's design more but @superhawk610's design looks more like a guppy then a tropical fish. Maybe someone can end up with a design something in between (I would try but I have no knowledge on design any software).

With these in mind I would like to point out some thoughts on sizes. Although we don't need to worry about favicon.ico we should worry about Windows I think. Below is the size table taken from Windows Desktop App Design Guidelines. Although it is for Windows versions after Vista, I think it is still applicable.

From documentation;

Toolbar icons: 16x16, 24x24, 32x32. Note that toolbar icons are always flat, not 3D, even at the 32x32 size

I think we should at least have a logo that is looking good at 32x32.

Windows documentation is talking about icon variations for smaller sizes. Maybe we can consider doing that.

In the smaller sizes, the same icon may change from perspective to straight-on. At the size of 16x16 pixels and smaller, render icons straight-on (front-facing). For larger icons, use perspective.

Maybe I am thinking too much on it but I just wanted to add my thoughts.

Again, Thank you for the great work @AWolf81 and @superhawk610

[baeyun]

I think a simpler version of @superhawk610 design would be ideal.

[joshwcomeau]

After sleeping on it, I really like @superhawk610's design (@AWolf81 yours is wonderful too, but I feel like @superhawk610's version is more in-line with what I was imagining)

RE: sizes, good call-out @bennygenel, agree that 32x32 is important.

@superhawk610 smile looks great! I think it actually looks alright at 32x32; it's true that the eye disappears a bit, but it still seems recognizable to me, and it's still pleasing. Maybe if the eye was a bit bigger it might help? Another thing is, maybe we should have 2 versions; a simpler, larger-feature version for use at 64x64 and below, and the rich full-detail one for larger sizes. It's not clear to me how easy that would be to set up across the different platforms, but I think that's a problem we can defer to later.

Truthfully I'd be happy to just ship the latest version of @superhawk610's design, we can always iterate on it later?

Thanks again so much to @AWolf81 and @superhawk610 for the amazing designs!

[superhawk610]

I'll go ahead and work on a PR with my icon - fair warning, I'm pretty new to Electron so I'll need someone to check behind me and make sure I've caught everywhere the icon is used across multiple platforms. Should be up later this evening.

[AWolf81]

I also like the design from @superhawk610. The details and shading are great. Well done. 👏

I created two more drafts - just for fun and I'd like to share them. One is inspired by this shutterstock image - maybe this is a bit too comic like but I think it's a funny looking smart fish 😄

Shutterstock like

Fish with geometeric shapes. It's OK but nothing special.

Here is also a screenshot from all 4 icons on my desktop (just the icon top left is a bit smaller because it's 32x32).

[superhawk610]

@AWolf81 the one with glasses is really cute! I like the second one too, but I think the triangle washes out the fish since it's the same color, what if the triangle was a darker color (maybe dark gray or the blue-purple gradient used elsewhere in the app)? I also think the fish would look better with a linear rather than radial gradient but that's more of a personal opinion.

[AWolf81]

@superhawk610 yes, you're right the triangle washes out and looks more like a round fish swimming in front of a triangle background. But the triangle was intended as fins. I wasn't sure how to improve this but I'll try your ideas to change the triangle to a darker color and a linear gradient. With a linear gradient it then looks not like a ball.

[joshwcomeau]

@AWolf81 that first one is really cute, glasses are a nice touch! And I like the geometric-ness of the second.

I wasn't sure how to improve this but I'll try your ideas to change the triangle to a darker color and a linear gradient. With a linear gradient it then looks not like a ball.

I've found that radial gradients are hard to make look good, so when I want a ball-like thing like that I cheat a bit; I just add different box-shadows of different colors (or even just large-brush single-clicks in photoshop outside the shape, so that I get a gradient-like bleed). A while ago I was making SVG planets and came up with this:

---

But yeah, I think my heart is still with @superhawk610's guppy. Thanks for offering to open a PR for implementing it! IIRC, these are the steps:

• create an icns format for Mac (there are online tools that will do this for you, I forget which one I used), and overwrite the existing one at src/assets/icons/mac/logo.icns
• create an .ico file for Windows, put it in src/assets/icons/win/logo.ico
• Create a bunch of PNGs at different sizes (I actually did this manually, but surely there's a service that will help) in src/assets/icons/png. This is used for Linux, as well as for the icon in dev mode.

Let me know if you get stuck on anything!

[Haroenv]

I love the one by @superhawk610 as well

[gejoreni]

I noticed that if you rotate & flip the guppy - it becomes a G. You might be able to take advantage of that - Could be cool. [image: Artboard Copy.png]

On Fri, Jul 20, 2018 at 12:36 PM Haroen Viaene notifications@github.com wrote:

I love the one by @superhawk610 https://github.com/superhawk610 as well

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/joshwcomeau/guppy/issues/42#issuecomment-406655851, or mute the thread https://github.com/notifications/unsubscribe-auth/AD_ZeFiYCJ5T-7ZJOPt6oZR_zR6buZUjks5uIgcXgaJpZM4VJWW6 .

[superhawk610]

@gejoreni That was actually my original basis for that pose, but I couldn't seem to get anything to work that didn't look like it was trying way too hard 😬 I'll keep fiddling around with it though, I agree that it would be really cool if pulled off correctly.

[superhawk610]

Alright, I submitted #89. For anyone coming across this in the future, electron-icon-maker is a great tool for Electron apps.

npm i -g electron-icon-maker
electron-icon-maker -i /path/to/logo.png -o /path/to/repo/src/assets

[joshwcomeau]

@gejoreni That was actually my original basis for that pose, but I couldn't seem to get anything to work that didn't look like it was trying way too hard 😬 I'll keep fiddling around with it though, I agree that it would be really cool if pulled off correctly.

Interesting! Yeah, I think it's ok that it doesn't try and look too hard like a G :)

[joshwcomeau]

Our new logo has landed! Thanks y'all. Gonna close the issue, but feel free to keep iterating on it!