I'm working on a set of Reddit icons.
#Reddit Icons
tulip dock
50px
unborn sierra
that 50 is way too tall looking
tulip dock
lone stirrupBOT
tulip dock
lone stirrupBOT
tulip dock
lone stirrupBOT
tulip dock
I reduced height by 1 pixel
unborn sierra
it's travelling to the right
tulip dock
lone stirrupBOT
tulip dock
The tricky part with the 50px icon, with a stroke of 3px, is that I need to place the lines at the center of each pixel to ensure that the edges of each line then land between each pixel. This also means for a symmetrical design, it can only be max 49 pixels wide - I have to leave a blank column of pixels on either the left or the right of the icon.
This gives a nicer image in aplite
unborn sierra
you don't have to have all the strokes be 3 wide
some can be 2
with 80px you can have 3px and 2px strokes too
tulip dock
Ah okay, that should make life a bit easier. I thought it was only the 80px, we can use 3px sometimes.
tulip dock
No i think you are right. I just read the style guide again.
I did not realise that for 50px, we can use thinner lines.
lone stirrupBOT
tulip dock
Okay. That is weird. It is in the centre of my image.
it is fine on the website.
tweaked 50px
Set the antenna ball to 2px which i think looks better.
tulip dock
Close to the current logo
tulip dock
25px
for some reason the right side of the smile is coming out different to the left side of the smile on basalt, even though they are perfectly symmetrical
unborn sierra
yeah, it is like that
tulip dock
Is there anything that can be done?
I'm pretty happy with these now. I still need to rework the 80px icon. Any feedback let me know.
unborn sierra
I think it looks nice
tulip dock
Months later, I finally having a go at finishing this!
This is my 80px attempt. I thought it would be fun to do the full Snoo. The svg gets a couple of errors in the pdc export but i was focusing on how it looks in the pdc preview, and it seems to look better this way despite the errors - less anti-aliasing.
unborn sierra
I think there might be too much padding
you could probably make it full height of the icon
especially since it's a thin icon
snoo is also a bit thicker in recent art
tulip dock
Yeah, he's a bit skinny right now, I agree. I'll play around a bit more.
I was starting from this. I used the head that i had already done for the 50px design, but it is maybe a bit too small compared to the body. There's room for improvement.
unborn sierra
I recommend placing snoo somewhere as the transparent non interactable top layer to be able to reference the dimensions
same for most icons
you do still have to make decisions at some point, but at least you end up with a result that makes more sense in terms of dimensions
tulip dock
Yeah, that would have been the smarter approach from the outset, rather than just winging it! I'll try that now.
Coming back to this, I was frustrated to discover that I had totally forgotten everything i learnt about using Inkscape since August. It's like starting from scratch again.
unborn sierra
you should check out the pinned file I sent in #art-design that contains a template for drawing these icons
tulip dock
Found it. Thanks. I had not seen that.
tulip dock
80px:
tulip dock
It finally looks right I think. I updated the PR on Github, if people are happy with this. I also tweaked the 50px and 25px icons.
50px:
25px:
80px (slight tweak to antenna)
unborn sierra
why is the 25px so small?
compared to the canvas size
it's also much narrower than every other of these icons
tulip dock
Currently, it is 24 pixels wide, simply to ensure that it is symmetrical. Otherwise, the stem of the antenna would need to be halfway between two pixels in order to be in the middle.
That said, I have just realised that if I change it so the stem is leaning and not straight, it probably does not need to be precisely in the middle and I can fill the entire width. I drew this icon back in August and it didn't occur to me at the time. I will keep tweaking it.
it is only one pixel narrower than all other icons but I guess the ears make it seem even narrower.
unborn sierra
hm, right
tulip dock
it's tricky because then the eyes need to be off by half a pixel but perhaps i can figure out a way to make it look okay
unborn sierra
do they?
tulip dock
Actually, this might work, with the eyes further apart
Or maybe this:
Hold on, I messed up the stem (wrong angle). Try this:
Perhaps this is better:
Or a slightly shorter stem:
The alternative is the eyes 3 pixels apart rather than 5:
Or do something different to the larger ones:
I worry not having round eyes deviates too far from the official icon
Ok now I am cross-eyed. Too many Snoos!
I can't decide if this one works
tulip dock
I slept on it, and this morning I began thinking that perhaps it should be closer to the modern Snoo design as outlined here: https://redditinc.com/brand
lone stirrupBOT
tulip dock
tulip dock
For the 50px, I will try and do something closer to this, and then the full Snoo for the 80px
unborn sierra
sorry for a rough edit, doing it on my phone, but maybe something like this would be a nice addition
the smile is also a tad wide
tulip dock
Yes, I had planned to do that for the larger icons, but did not think this one needed it. I'll try it though. This icons is probably more rounded than the typical Pebble style, though it still uses only the permitted angled lines. Personally, I think it looks better, than the ones I did above that were more angular - those made Snoo look like a robot.
@proud wigeon Any feedback? I changed the eyes to a vertical line, which looks okay, I think, and matches the Pebble Snapchat icon which is nice. Personally I think this mouth looks so much better than the earlier versions above. I think it has more personality this way. You may diagree.
I will rework 50px now.
proud wigeon
these are much cuter with the ears integrated into the head
yeah these look good!
the mouth being functionally a filled shape doesnt bother me, because it is cute
i'd merge this!
the vertical line eyes look great, fit the style, and the wide smile is readable at tiny size
tulip dock
Ok, let me work on the 50px and 80px.
I don't think this is as good. Even one pixel added is too much. I think i might work with a thinner stroke on the larger icons though.
proud wigeon
hmm yeah
we're looking at the corner between the cheek and the ears, right? it doesn't rasterize as well
tulip dock
Maybe? I just added half a pixel line. It changes nothing on Aplite, but adds an anti-aliased pixel on Basalt, in the bottom inside edge of the ear.
i actually think that's quite nice. It gives the ears a bit of dimensionality on basalt. (is that a word?)
proud wigeon
oh i think i'm confused
tulip dock
yeah, i guess you haven't been staring at these as long as i have!
proud wigeon
Maybe? I just added half a pixel line. It changes nothing on Aplite, but adds an...
oh i see! yeah the extra half-pixel looks very nice here
i was seeing the hard right angle between the cheek and the ear on aplite, and i wrongly assumed it was a regression from some previous look
tulip dock
It's really about whther the one immediately above is better on worse than this one: #1406642736140128296 message
I think it probably is, but at this point I am cross-eyed!
proud wigeon
yeah! i like the tiny extra little bit on basalt
tulip dock
maybe with 45° grade on the bottom?
ok, i will try it
I've been playing around with their current logo in the speech bubble for 50px, but I think the head alone is better. Much too busy otherwise. I figured that would be the case beforehand but wanted to see how it might look. Few people know the Reddit logo with the speech bubble anyway.
unborn sierra
that is significantly too round
#1337544627741397034 might give you a clue on how to handle round shapes
tulip dock
Agreed. I'm abandoning this idea. Snoo alone is enough to recognize it as Reddit, so I think the bubble is redundant
@unborn sierra Was this what you meant for the mouth? (45 deg on either side)
tulip dock
unborn sierra
yeeah
tulip dock
Yeah that's better. I like it!
Perhaps shape-wise it does not match the Pebble style so closely but it does have lots of the Pebble personality.
unborn sierra
it does match pretty good if you ask me
tulip dock
I've had this problem before with Inkscape, but I can't remember how I fixed it. Do you know what causes it?
unborn sierra
what's the line width set to?
tulip dock
3px (except for under the ears that is 2px)
tulip dock
I seem to remember it is something to do with the page ruler settings or scaling or something, but i can't find it. No idea how it broke. I just remember that it happened once before. I'm not that familiar with Inskcape. I mailnly used illiustratotor in the past. I'm working on the 80px right now but will come back to this. Don't worry if you don't know. I'm sure i'll figure it out.
tulip dock
Scale is correct. Weird. I'll keep looking. I bet its something simple.
unborn sierra
what are the units in there set to?
tulip dock
Thanks for having a look
tulip dock
tulip dock
I'm trying to think if there is a way to have Snoo wearing a Pebble in a way that would work, perhaps holding his arm art
tulip dock
Finding the right balance between the cute curvy Snoo and the angular Pebble is really tricky. Too angular and Snoo looks like a robot, too curvy and it stops fitting the Pebble style.
It was closer to the old Pebble logo before but I was trying to get Snoo closer to their modern branding
unborn sierra
robotic is not necessarily a bad thing
I think Snapchat and my Duolingo might be a good example of the full characters, both try to use very few strokes
roundness is implied more than shown
tulip dock
Well there is no actual roundness here. It is all straight lines. But I know what you mean.
I thickened up the internal lines.
I'm going to bed. Late where I am. I will see if I get this nailed down tomorrow.
I just realised Snoo looks like a mermaid now. lol
proud wigeon
💭
tulip dock
Ok, I finally fixed the stroke lines in the 50px file. It somehow had two nested transforms, so the actual stroke was only 1.47 and 0.98, which was then scaled up to 3px and 2px respecitvely. I had to give it to AI to figure that one out!
Right now it is basically identical to the 25px version, just scaled up, and with 3px stroke, though i made the eyes 1px wider because they felt a bit too thin at 3px wide. Perhaps that is against the rules? This is the eyes at 4px wide:
Forcomparison here are the eyes at 3px width
tulip dock
@proud wigeon Was this the sort of thing you were thinking?
i broke the body lines a bit. It really felt to straight with a single straight line.
tulip dock
legs, body, and feet now use one less line each than before
TBH, I don't love it, but it may fit the Pebble icon style better
tulip dock
I have commited what i have done so far. 80px likely needs more work.
proud wigeon
that sort of shape, yeah!
we're getting close
can you knock out the lines separating the feet triangles from the body triangle?
tulip dock
It really needs the line between the feet to stop Snoo looking like amermaid!
tulip dock
Here it is with the top arm line removed.
proud wigeon
It really needs the line between the feet to stop Snoo looking like amermaid!
I like this a lot!
tulip dock
He looks like he's been at the gym a bit though haha
(I keep writing 'he' even though Snoo is apparently genderless)
the only way to stop the arms looking big is to add a new line
make it straight
vertical
unborn sierra
Ok, I finally fixed the stroke lines in the 50px file. It somehow had two nested...
why does the upper part of the mouth go in? it looks like a shocked expression more than smile because of it
tulip dock
it's the way the mouth gets converted. Perhaps there is a better way to draw it.
i tried straightening the arms a bit
unborn sierra
I would do
tulip dock
I tried to bring the arms in a bit so they don't look so muscular. It required adding a vertical line, so if you think it is too curved now, i can change it back.
That mouth is great.
tulip dock
I updated the PR with these revisions.
I lengthened the line under the arms by 1 pixel and I think it suddenly came together
proud wigeon
just looked through your most recent PR
25px and 80px are perfect, i think
50px is a bit too round, particularly around the head
tulip dock
i am just making some fixes to 80px
proud wigeon
If you can squash your branch down to one commit and git push --force, i'll merge it
tulip dock
Ok, will tweak the 50px
some node errors snuck into the 80px in the last round of tweaks and i am fixing those now
I fixed the node errors and made the chin line 3px
proud wigeon
yup! there we go
squash it down to one commit adding all three icons, and I'll merge it this afternoon
tulip dock
It only took 5 months! 🍾
tulip dock
@proud wigeon We are good to go: https://github.com/pebble-dev/iconography/pull/47
(it took me a while to remember how to squash commits!)
tulip dock
For some reason, my 25px icon is missing its eyes and antenna on my Pebble. Any ideas why that would happen?
unborn sierra
that's easy to verify, we just aren't testing it at submissions in the iconography repo
tulip dock
Should I be saving the files as optimized svg? Sometimes, I have left the original trace image in the file reasoning that it could be useful if anyone ever wants to change them. Perhaps I should remove all the extra stuff? I don't why else it would not be displaying certain lines.
It is not just this icon. Airmail icon as well - it is missing the outer border, but the envelope part is fine.
unborn sierra
I would remove all the extra stuff, the renderer is fussy, and it will try to render everything in that file even if it's out of bounds
but I doubt that's the issue
tulip dock
It seems the center of the ball is there for 25px, but the stroke is not visible.
tulip dock
@unborn sierra I found the problem. I had to check the xml editior to see it. The problem elements had a "stroke-width" value that was different to the rest of the file.
unborn sierra
yeah, I already fixed those in my local checkout
tulip dock
The object stroke in the inkscape ui is correct because this seems to be set in the 'style' property
unborn sierra
the file in general is a bit of a mess with embedded images and strokes outside of the viewport
tulip dock
I'm learning way more about svgs than i ever imagined i would
I don't know how i stop Inkscape from doing it
unborn sierra
The object stroke in the inkscape ui is correct because this seems to be set in ...
hmm
optimized svg has an option for this when saving a file I think
I should check the svg standard to see what the order of applying these should be
tulip dock
Here is a good example
In the actual ui, it says 2px, which is why i thought it was correct
pdc_tool does not pick up on this.
I guess when it builds it uses the "stroke-width" value on its own. pdc_tool obviously uses the stoke-width attribute in "style".
If pdc_tool was changed to use this other value first, it would be easier to tell that there is a problem
unborn sierra
pdc_tool is not what the firmware uses
tulip dock
i know but if pdc_tool did used the same behaviour as the build tool, it would render it like the build tool, no? @sinful pasture
unborn sierra
https://github.com/pebble-dev/pebble-firmware/pull/314/changes#diff-675323c21af9e9b6f244e10b9e3fe679cf137621c87772dff93b48269eb8dcc0R234-R249 seems like the order I took on is to prioritize the attribute over style
that is easy to change at least
tulip dock
Wait, did you make pdc_tool? Sorry, I thought it was heiko.
unborn sierra
I did not
this is showing how firmware does it
at least the rebble firmware, core firmware does its own thing
(I have no idea what core firmware does)
sinful pasture
See #art-design message
tulip dock
Changing it would at least identify this problem in pdc_tool before building which would be nice.
I dont feel like a total idot now. This was an easy mistake to miss!
unborn sierra
I can compile svg2png from the firmware into a tool you can chuck your icons into I think
(the firmware already has a way to build it into a mac binary)
unborn sierra
yeah
tulip dock
FWIW, I think creating the optimized svgs fixed the issue as well. I'm not certain but i think so, having looked through the source of the svg.
unborn sierra
yeah, I always export optimized svgs
sinful pasture
I can compile svg2png from the firmware into a tool you can chuck your icons int...
Haven’t looked at svg2png – how does it differ from pdc_tool‘s ability to go from SVG to PDC PNG from a user‘s perspective?
unborn sierra
svg2png was a tool made by pebble technology corp at some point
it lets you enter the directory with icons and it will try to render each of them
it puts all of the failed ones in a failed directory
tulip dock
I am unclear why the affected strokes did not display at all (rather than just displaying at the wrong size), but I assume that is because they were not an integer?
sinful pasture
it lets you enter the directory with icons and it will try to render each of the...
So it’s batch processing vs. single file?
And apart of a less robust SVG conversion historically, there’s nothing else?
unborn sierra
there's a couple of things, but they don't matter for most things we use the script for
the script doesn't handle colour names from css other than black and white, but there's very little need for that in our case
there's also no support for use element, but that relies heavily on transforms being supported
tulip dock
@unborn sierra I made a PR earlier today with optimized svgs that should have fixed most of them, even though at that point I didn't fully understand the cause: https://github.com/pebble-dev/iconography/pull/52/commits
