Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Need icons for all supported file formats #600
Currently Sumatra only has one icon for all file types. We need a unique icon for every file type we support (8 icons: .pdf, .chm, .epub, .mobi, .xps, .djvu, .cbz, .cbr).
The current icon: https://github.com/sumatrapdfreader/sumatrapdf/raw/master/src/PdfDoc.ico
The idea is that they are all based on the same template, but with differences (e.g. differ in colors used).
The final icon must be in standard .ico format, each .ico file has 4 sizes of the same icons: 16×16, 32×32, 48×48, 256×256. We also need the source, presumably in vector (.svg) format, so that we can easily create derivative icons for more file types in the future, if the need arises.
The icon must be somewhat distinct when rendered on small sizes (16x16, 32x32), preferably related to main application icon (https://github.com/sumatrapdfreader/sumatrapdf/blob/master/gfx/SumatraPDF-256x256x32.png)
More information on the format of Windows icons:
I can't really judge without seeing the bigger sizes. No offense, but the quality of the smallest icons is somewhat adequate (there's only so much that can be done), but the larger icon is far from being good enough. It doesn't even try anti-aliasing to smooth out the curves.
"Pixel Fitting" has some merits over anti-aliasing for icons as described by Dustin Curtis the Markdown Mark [M↓] logo artist in https://dcurt.is/pixel-fitting
Above is your 16x16 pixel stock anti-aliased ICO but stretched slightly wider for stroke width clarity. The X-height is kept at 5 pix high and thus characters are 3 pix wide (=6x4 pixel character TILES that in theory would allow 4 chars for a total of 16) but this is highly limiting as kerning is severly restricted and would not allow for broad characters such as M in chM or Mobi, hence my suggestion to simplify with a larger font.
Thus I am suggesting you as developer nominate your desired simplest shapes
Again as developer I suggest you nominate desired colours (in rgb/hex values?) for each extension and try to accept 2 or 3 chars would be the max readable at the two smallest sizes, so DjVu / Mobi / CB7Z would needs be avoided at that level although they could be accommodated at 48x48 upwards
In summary I suggest for 16 and 32 square Icons something along the lines of
I think the icon in the below link is very good except the snake.
So I replace it with Sumatran rhinoceros
PS: I am not a designer and I hope some one can polish the work of mine to replace the snake.
Using animals as the icon have many benefits in software, and the rhino is the animal in Sumatra.
The topic can be found in the link.
You know from experience the colours especially yellow will bring strong comments, I think I understand your aversion to 100% red, and the other colours above are the developers house colors except CBZ & CBR which shoud be mid grey but that would be very drab, hence I suggested you put your foot down as to what colours you wish to defend.
In 32x32 I ran out of space (perhaps they could be taller by a pixel). In 64x64 I made them smaller compared to 32x32 so they don't dominate; they are legible there.
@mikekov looks good. In smaller sizes (16x16, 32x32) we could even get rid of the book background and just have different text/color of the badge, taking as much space as possible.
Another aspect of this is to do a really good job at bigger sizes. When you look at https://github.com/sumatrapdfreader/sumatrapdf/blob/master/gfx/SumatraPDF-256x256x32.png, what really makes the difference in quality of the icon are the subtle gradient changes.
I would be fine with just that icon (https://github.com/sumatrapdfreader/sumatrapdf/blob/master/gfx/SumatraPDF-256x256x32.png) being used as a template, even without additional background. Just produce high-quality variants (matching the subtlety of the icon) with different text/background color for different file types and simplified, decent versions at really small sizes (16x16, 32x32). 48x48 could probably look good enough as 256x256 scaled down..
@kjk You are the master here and you decide what your product icons look like, but I'm afraid our stylistic judgements are at odds. I used to design photo-realistic icons in Blender 3D, but no more. Good design has to stand on its own, without being propped up by some cheap fake shadows and gradients.
I completely agree. Maximum legibility/clarity at 16x16 is important to me because I always stick to Details view in Explorer.
Hi, I'm a professional designer. I think Sumatra PDF is fantastic and I would be interested in contributing a logo and icons for the program.
IMHO the current icon doesn't work very well - it's impossible to read at 16x16, and the plain white colour isn't at all distinctive, meaning you can't quickly identify PDF documents at a glance.
Before I can think about concepts, let me ask KJK, why was the name "Sumatra" chosen? Is there any meaning to it, or was it random? Also, to check, would you be OK with me suggesting both a logo and icon? I really think there needs to be consistency to your branding, as it makes your product visually stronger.
Regarding the name: there is not deep meaning behind the name. Naming is hard, I was trying to find a unique name. I've considered a few and picked this one. I don't even remember why it was one of the names I considered. So just a random connection I made at the time.
Regarding the icons: I would love help in this area.
I'm reluctant to change the main icon of the program (i.e. https://github.com/sumatrapdfreader/sumatrapdf/blob/master/gfx/SumatraPDF-256x256x32.png) - it would confusing for current users if the icon changes dramatically.
But I would love your help in icons that show for file associations in explorer.
As this bug describes, we need icons for .pdf, .chm, .epub, .mobi, .xps, .djvu, .cbx, .txt
A logo for branding (to maybe show on the webpage and on main screen would be great too).
I did some work myself but it's rather uninspired: https://www.figma.com/file/P5DWXO4ZG73B9ATNjYPhvGgD/Sumatra-icon?node-id=1%3A2
The main criteria here is:
I can make the final .ico from the vector art in figma.com, but if you know how to do it, that would be great.
It's probably good to work on 256x256 canvas in Figma and the generate smaller versions by downscaling.
Hi KJK. Thanks for your reply.
Apologies but Figma would be a problem for me. I've never used it. Never even heard of it before. Plus, if it's vector-based software then I doubt it would be suitable for designing small icons, which need pixel-perfect precision.
Yes, I can make .ico files and have done plenty of them. I would be working in Photoshop (been using it 25 years), and I'd be happy to provide my Photoshop files when I'm done, which could then be updated by anyone with Photoshop (which is just about any designer). Then again I'm not planning on going anywhere and would always give you my email to keep in touch. And if I wasn't around, someone could just copy the style I'd done - it's a good idea to 'freshen up' logos every few years anyway, to keep things from looking dated.
Anyway, if you are still interested, I'd like to share some initial thoughts I had about the design, which would be the basis for my concept...
From what I understand, the key "selling point" of your application is that it's lightweight, easy-to-use, and uncluttered. (That's what I love about it!) So that would be my starting point and overall objective - to give a feeling of ease and simplicity.
Now one thing I always like to do is tie the name of a product together with its graphical style, to give a sense of cohesion. At the moment "Sumatra" is kind of meaningless, and a little confusing. Sumatra is a tropical island - something of a paradise by the look of it. So my initial thought is to draw upon this tropical theme, creating a graphical style which suggests "free and easy".
Acrobat Reader is bloated and feels highly commercial and kind of stressful and pushy, as well looking very "dark" (like all Adobe's products now are). In contrast, I would want to pitch Sumatra as the exact opposite - light, cheerful, simple, yet reliable and a viable option for professional use.
A palm tree came to mind, though obviously I would only be using very simple shapes in the icons, nothing cluttered or distracting. I would want the logo/icon to kind of give the feeling: "using this software is as stress-free as lying on a tropical beach".
As you mentioned, I would be mindful of abruptly changing the style, and confusing existing users. However, I would argue that any confusion would be short-lived, while many users would appreciate a fresh new look. The existing icon is pretty good, though I think it currently looks too industrial (power tools come to mind), and a little harsh. I would want to soften it, while still keeping bright colours, including a strong yellow element, for consistency.
Well that's my initial thoughts. Though, once again, I can't use Figma, so the ball's in your court if you'd like me to proceed or not :-)
Sounds good, let's give it a try. As long as I have access to source material, like .psd file, I can archive it.
I totally agree with the "light, easy, fast, free" theme.
I wouldn't necessarily apply "tropical" but I don't want to constrain you on that one way or another. In the end the quality of execution is just as important as the conceptual design.
From my point of view, the must-have are the file association icons for for .pdf, .chm, .epub, .mobi, .xps, .djvu, .cbx, .txt that share a common theme but possibly differ visually a bit (e.g. with different colors).
Those are nice haves:
Thanks for your help.
OK great, I'll see what I can come up with. Like you, I'm also very busy, so it may not be immediate but I'll fit it in when I get a chance over the coming days.
My plan would be to start with the logo, and then if I am able to create something you like for the logo, then I can translate that style and theme into icons. I know it's the icons you need, but logically the style really should start at the "top" and filter down into the icons. Hope that makes sense.