bit-team/backintime

Use distinctive application icon/logo for Back In Time (icon proposals)

Germar opened this issue ยท 100 comments

Hello, I'm AZorin from the Zorin OS project. I believe that Back In Time is a brilliant program although it seems to be missing an independent icon. I have created one which I have attached to this message.
Some credit goes to the Oxygen Icon theme. I hope you will like this icon and decide to choose it for your program.
Best regards,
AZorin

backintime


Imported from Launchpad using lp2gh.

(by danleweb)
Hi AZorin, thanks for your interest in the project.
I like the idea of having a special icon for BIT but I'm not so crazy about the one attached.
I would like one that suggest "going back in time" or "pause time".

Thanks,
Dan

(by azorin)
Would something like a clock with a rewind icon work or would you like something more flashy?

(by danleweb)
Hi,

Sorry for the late answer but I was on vacation.
I do prefer something like a clock with a backward flash.
Something like the attached image or even better.

Best regards,
Dan

document-open-recent

(by azorin)
I made a new one. It is attached to this message.

bit

(by danleweb)
I like this better.

folder-recent

(by mastropino)
I think that we need a custom icon for the Notification Area!

(by azorin)
Maybe this one?

document-open-recent svg-g6000-90

I'm not really excited about the previous proposals. I'd like to have something like a glowing Flux Capacitor

Until you choose, as a result the worthy program will remain without icon ;)

buhtz commented

I think because of the nerd-factor of the "flux capacitor" it wouldn't be hard to find someone how would provide an icon for this. ;)

Some examples we could build on or we could contact.

I would suggest trieing to contact people on this plattform: http://www.iconarchive.com/
Maybe we find a nice icon or a person who would be willing to produce one for BIT. And it is a nice website to get inspired by different design styles.

back-in-time

@NikoKrause developers will use all the same standard "save"))))))

buhtz commented

I really like it. Minimalistic but with the fluxcompensator.

I like it, too. Only the arrow looks a bit wired. Maybe we could rotate it so the arrow head is on 7 o'clock and has enough space to be a full arrow head. Start of the circle would be on 4 o'clock.
Could you send me the svg please?

This was just a raw draft.
Base icon was the Moka icon for Deja-Dup:
https://github.com/snwh/moka-icon-theme/blob/master/src/D/deja-dup.svg

The flux-compensator is a bad hack. Maybe someone with more Inkscape skills can create a better version.

The Material Design Icon theme has a simple, but perfectly fitting icon for BackInTime:

Available here: https://github.com/google/material-design-icons/blob/master/action/svg/design/ic_restore_48px.svg

Last comment is more than a year old...
Still no decision on an icon for this great program?

buhtz commented

Just for information to all subscribers.
We have a discussion on bit-dev mailing list about Back In Time having it's own icon.

We would be glad if someone with graphic design experience would join the discussion.

buhtz commented

Germar offered me a contact to a designer he was working with some years ago. But I couldn't reestablish the contact because the mail address did not work and the real name is unkown.

About "flux-capacitor": There are some icon themes offering such an icon. But I wasn't able to get contact to the artists. I don't feel well with just downloading such an icon even if the licences is "free". This is to anonym for opinion.

So I was asking in the Inkscape community about a designer contact and also about alternative design ideas. The thread is here. There we have an idea and a draft using an hour glass with a back-circled arrow around it.

Saw your logo request at Inkscape.org

Drew a Flux capacitor for you. Let me know what you think

flux capacitor 7

I like this one

Flux Capacitor 9

3D version

image

buhtz commented

Thanks a lot for all your ideas and your drafts.

We will take this into account. We need to discuss this in the team and make some decisions. This will take some time because all team members do their work in the project voluntary and not on a regular basis.

Kind

Christian

@buhtz THX for bringing up this issue again, using our own app icon is the only way to be sure to finally fix our "missing app icon" issues.

I saw all the excellent icon proposals and love the fancy idea of the flux capacitor as logo.

Still I would like unleash the creative power of the icon designers to propose any kind metaphor that

  • easily recognizable to "back in time" or "backup"
  • does not require background knowledge (e.g. having seen a film)
  • is understandable in may cultures of the world
  • may not have another meaning in another culture (e. g. the icons proposed by @meetdilip are really beautiful and esp. the minimalistic use of drawing elements brings a modern style IMHO but the three lines could be confuse with the letter "Y" which may have another meaning somewhere or at least people may wonder how "back in time" is related to the letter "Y")

Edit: One specific requirement is to also support an icon size of 22 x 22 pixels since we are using the app icon also as system-tray icon (so there is not much space for a 3D/perspective view in the icon I guess):
https://doc.qt.io/qt-5/qsystemtrayicon.html#icon-prop

Furthermore I think the icons should finally (after choosing one) adhere to guidelines of major Linux desktops like Gnome and KDE, see e.g. these guidelines:

Hi, feel free to share ideas you have in mind. There was a specific request for Flux Capacitor at Inkscape Forum. I am glad you liked that concept.

Created a neutral concept. Let me know what you think

image

buhtz commented

Furthermore I think the icons should finally (after choosing one) adhere to guidelines of major Linux desktops like Gnome and KDE, see e.g. these guidelines:

Never noticed such guidelines. Great that everything has a guideline. โค๏ธ

One more :)

image

I have another (purely technical) requirement:

One specific requirement is to also support an icon size of 22 x 22 pixels since we are using the app icon also as system-tray icon:
https://doc.qt.io/qt-5/qsystemtrayicon.html#icon-prop

So I guess there is not much space for a 3D/perspective view in the app icon to make it still recognizable with this small size (remember: according so icon guidelines there should be a one pixel border around the icon that is kept free so the effective size for a recognizable icon is only 20x20 px - good old home computer resolution ;-)

I personally find it quite intuitive to see a clock/watch in the icon (analog or digital) and indicate somehow that there is a timeline (blurred, fading or similar) to the past or perhaps markers to different points in time...

buhtz commented

I forgot to mention my thread in the Inkscape forum.
Here two other ideas from there.

"Time3 by Razr"
image

"BIT 1b by Tyler Durden"
image

I like this one

Flux Capacitor 9

I love this simple and clear design and would just give up the idea of a flux capacitor in favour of a clock.

How about putting the bottom-left circle (indicates "back") into the middle of the icon (same size) and render the three lines (that form a "Y") currently into the big and little hand of clock. The idea of a clock could then be indicated a little bit by e.g. adding some hour ticks (similar to this icon: document-open-recent svg-g6000-90)

Alternative: The "back" circle at the bottom right could stay there and make the rest look more like clock (like described above). I am only afraid that the bottom-right circle takes to much (border) space for the whole icon being recognizable even with 22x22 pixels (required for the system-tray icon)...

I forgot to mention my thread in the Inkscape forum. Here two other ideas from there.

"Time3 by Razr" image

"BIT 1b by Tyler Durden" image

What I like here is the big "back" circle and the rectangle as visual element. I would prefer to use clock (analog or digital) instead of an hour glass (since the hour glass brings the major interpretation of "waiting" since Windows ;-)

Please comment

clock 1

Please comment

clock 1

THX, that is really cool!

One more thing: I am partially color-blind (red-green only) and small lines or pixels in red or green blur in my vision.

Would it be possible

  • to use other colors besides pure red, green (and even blue)
  • use thicker lines (if the icon resolution is reduced to 22x22 pixels I am afraid the lines are no longer visible)

Another add-on idea (but probably difficult to realize): How would it look like if the outer squares looked like a document or folder?
Then we had all major aspects of BiT in the icon: Documents, time, back :-)

Thanks. I was working on the 22px tray icon. What do you think?

image

PS: The smallest is 16x16px

I will try to accommodate the other points you raised. :)

Fixed the colours issue

Clock 2 accessibility

buhtz commented

I think the circle arrow sticks out too far.
Might it make sense to modifes theclocks time, maybe resize the circle and move it more into the middle direction.

Am I a talent? ๐Ÿ˜†
image

Color + line sizes are perfect for my eyes now, the inner bevel makes it even more 3D alike.

I think the circle arrow sticks out too far. Might it make sense to modifes theclocks time, maybe resize the circle and move it more into the middle direction.

It wouldn't look good.

I think the circle arrow sticks out too far. Might it make sense to modifes theclocks time, maybe resize the circle and move it more into the middle direction.

Yes, optically very nice (asym) but icon space is limited unfortunately.

How about moving the circle into the middle, make it more look like clock + use a document-alike icon, e.g. like this (I know, my graphics skills are really bad ;-)

image

Edit: I just saw my idea looks too similar to a synced folder: https://iconscout.com/icons/sync-folder

I think the circle arrow sticks out too far. Might it make sense to modifes theclocks time, maybe resize the circle and move it more into the middle direction.

Am I a talent? laughing image

definitely better than me ๐Ÿ˜„

Still I think the "back"-circle needs to be either in the centre or reaching a little bit over the edige otherwise it looks strange...

buhtz commented

Like this yellow one. A compromise between my version and Dilips version. Over the edge but more over the icon then the edge.
image

Tried to accommodate further suggestions

folder clock

Document folder type

folder clock 3

One more

folder clock 4

More..

folder clock 5

@meetdilip THX a lot for your engagement!

This is my current favorite, all metaphors contained in a clear "language":

folder clock 4

Perhaps the little "back" indicator at the bottom right could become too small in 22x22 px but the rest is simple and clear
(colors are not my thing, so I can't comment on that).

I could imagine that the bottom right round arrow could be replaced by a "back" round arrow going around the border of the clock.

"back in time (for files)" would be then recognizable quite intuitive even in small px sizes...

image

22 px variant

The smallest one in the image is 24x24

( folder clock 5 22px 4 - file name)

Alternative 22px version

image

image

22 px variant

The smallest one in the image is 24x24

( folder clock 5 22px 4 - file name)

This is my favorite (although the alternative with the back arrow would even be better to recognize in the small icon and I start to prefer it more and more the more often I look at it ;-)

Edit: I just saw that even Evolution uses a straight arrow lurking over the edge so this is a common design element:
image

BTW: We had a smilar icon proposal in 2015:

folder-recent

@buhtz I have taken much influence so far and would stop here now to give you (and others) the chance for alternatives...

buhtz commented

image
I also prefer this version.

image
This orange version is also nice. Maybe we can keep this in the back when the users have their dark mode activate. I assume the first version doesn't look so good in dark modes.

@meetdilip I wouldn't say there is consensus in the team about a new icon but I feel some harmony. โค๏ธ Can we get in contact via email to better know each other and discuss some organizational details? You find my mail in my primary profile.

Hi, I am glad you like the concepts. It is ok to take time :)

@buhtz Unable to find any email ID in the link you shared.

This orange version is also nice. Maybe we can keep this in the back when the users have their dark mode activate.

@meetdilip There is an app to test the icon(s) in different sizes and color schemes but I don't understand how to convert the icon into format required for this app. Do you have an idea how this works?

@buhtz I am growing fan of this icon too because the "back" idiom is very strong ("back button of a browser") and cannot be confused with a "sync" interpretation like the circular arrow does:

image

Perhaps @emtiu could give us his vote too...

@aryoda what is the name of the app? I can try and find out what kind of input it takes.

@aryoda what is the name of the app? I can try and find out what kind of input it takes.

Sorry, I forgot to paste URL to the app: App Icon Preview
which is recommended in the Gnome Icon Guidelines: https://developer.gnome.org/hig/guidelines/app-icons.html

I tried, the input format is SVG. But it does not show anything even if I open an SVG file. Not sure why.

emtiu commented

@buhtz I am growing fan of this icon too because the "back" idiom is very strong ("back button of a browser") and cannot be confused with a "sync" interpretation like the circular arrow does:

image

Perhaps @emtiu could give us his vote too...

I love it! :)

buhtz commented

@buhtz I am growing fan of this icon too because the "back" idiom is very strong ("back button of a browser") and cannot be confused with a "sync" interpretation like the circular arrow does:

image

I'm convinced! ๐Ÿ˜„ ๐Ÿ‘

@meetdilip The mail is hidden under the profile picture.
image

I tried, the input format is SVG. But it does not show anything even if I open an SVG file. Not sure why.

@meetdilip Saving the icon as SVG does not seem to work. Instead I clicked on "new app icon" when opening the app, entered an app name and saved the empty template as SVG.

This SVG can now be opened in Inkscape. There is marked section in the SVG file where the big and small icon can be put into:

image

I don't know inkscape and did not manage to paste your icon into this SVG file but I have just moved one of the existing icons in this SVG file into above marked section and it was shown after saving and opening the SVG file in the "App Icon Preview" App.

How can I paste your PNG icons in this SVG file in Inkscape?

I did it for you

image

image

One more..

image

Dark Blue

image

I reworked the Symbolic icon

image

Yellow

PS: All screenshots use colours from Gnome HIG colour palette

image

buhtz commented

They all look gorgeous.

In which situations is the "symbolic" icon used?

I wonder how a desktop environment select between a dark and light icon? I couldn't find something about it in the desktop-file specs.

Where is this icon used?

  • In the desktop environments application menus.
  • In the applications main window title bar.
  • In the taskbar.
  • In the systray.
  • On the website, in the About menu, in the documentation.
  • Somewhere else?

Thanks :)

In Ubuntu, it is White symbolic icons all the time, in top panel.

buhtz commented

Symbolic icons seems to be used in systray like situations when the systray is a very small one.

In Ubuntu, it is White symbolic icons all the time, in top panel.

I'm not sure but I assume that desktop environments do display different application icons based on the selected dark- or light-mode. Am I wrong?

So do we need to decide about two icons for each mode or just one icon that have to work in dark- and light-mode?

I am not sure. I made both of them, to be safe

symbolic dark 22px

symbolic white 22px

Bigger size as well

symbolic dark 256px

symbolic white 256px

[meetdilip] I did it for you

THX a lot, @meetdilip now it is very easy to get an impression the icon details and colors!

[buhtz] I'm not sure but I assume that desktop environments (DE) do display different application icons based on the selected dark- or light-mode. Am I wrong?

@buhtz This is not the case in general since there is no standardized API for all desktop environments to identify the currently active style as "light" or "dark" but only names of the styles.

Exceptions may apply on a per-DE level where specialized APIs may exist but this then does not work universally for DEs (what we want to achieve).

Icon themes are bundles of standard icons under one name (and installation folder), but app icons are application specific and installed with the app.

Of course we could bundle different app icon for all major icon styles (to stick to their color palettes) and load the best app icon (fitting the active theme) in our python code...

[buhtz] So do we need to decide about two icons for each mode or just one icon that have to work in dark- and light-mode?

No, the main app icon (the big ones) should work under all themes and stay the same. This is why I wanted to check the icons via the "App Icon Preview" tool.

The symbolic icons are handled differently from the main app icons (and even more complicated: also on different DEs): E.g. Gnome does recolor symbolic icons to the "context" (whatever this is). So the symbolic icon should use a single (or only a few) (high-contrast)color(s).
KDE also recommends: "Use a monochrome, shade black icon and use color only to communicate state."

To make it more complicated: Our Qt5 GUI framework requires 22x22 px system-tray icon size which then may be scaled down as need for the active DE (16x16 px = symbolic icon size on Gnome I think, but 22x22 px for KDE).

TLDR ;-)

  • We only need one app icon for all themes
  • meetdilip's monochrome symbolic icons will work for different themes (only one color needed, though I have to test it on different DEs and themes)

@meetdilip Could you please attach an original svg file that is in the "App Icon Preview" format and includes the proposes icon (color doesn't matter, only the symbolic icon needs to be black/white). I would like to do some tests in different DEs using the symbolic icon.

I need this SVG file since it can export the icon in different sizes...

You are welcome. Attaching the SVGs :)

Back in Time Colour

Back in Time symbolic

@meetdilip I have tested the app icon svg file and it works (even as system tray icon).

The symbolic icon (black 16x16 px) is problematic because the color does not change to white (or another light color) if the system tray has a dark background color. I suspect that Qt5 always renders the icon as-is without using the API of the desktop environment (which would possibly adjust the icon color).

So I propose to use the same foreground color(s) for the symbolic icon as for the app icon (even though this breaks every style/theme) but is at least (almost) always visible on light and dark sys tray backgrounds.

Also I need two app icons in different colors for BiT running as user and BiT (root) to make it clearly visible to the user which version is running. How about using

  • the orange icon for BiT (root)
  • a blue (or other) icon for BiT (normal user)?

I have also discovered another requirement in the code:

  • The sys tray icon shall show an progress indicator for running backups/restores.
    The existing code did try to render a progress bar into the sys tray icon but this code was disabled due to a rendering issue (#902).

Would it be possible to create seven versions of the sys tray icon with

  • no progress bar
  • 6 versions with a progress bar and the (indicative) progress of 0, 20, 40, 60, 80, 100 %? Or at least in 25-%-steps...

I could switch the icon then via code to the most appropriate progress version whenever the rsync progress is updated.

IMHO the "progress bar" does not need to be a bar, we could also change the fill color of the clock or the folder
(but this would be a non-standard behavior).

Sorry for so much work, I never would have expected that "just for an app icon"!

PS: If this is too much work we could also only use different icon variations that show the status "backup/restore running" and "error". @buhtz Any preferences or ideas?

Edit: I would use the 16x16 symbolic icon now as sys tray icon (no need to create a 22x22 version for KDE if the upscaling is working good enough)

Hi, nice to see that you have identified your exact needs

I covered everything other than the progress bar variants in the zip file. Let me find a good approach for the symbolic variants.

BIT variants.zip

6 versions with a progress bar and the (indicative) progress of 0, 20, 40, 60, 80, 100 %? Or at least in 25-%-steps...

Not sure how to accommodate these fine details in a 16x16 px space. Will see what I can do.

What do you think?

image

image

Monochrome view

image

All steps

image

image

image

It's complicated. The designing part is easy. But to fit it into the Gnome template is considerable work.

I had to rework the symbolic icon

image

From App Icon Preview

Preview new symbolic

@buhtz never got a reply to my email

buhtz commented

@buhtz never got a reply to my email

Got your mail. Just hadn't time to reply you back.

Take your time :)

@meetdilip I am still busy with fixing another bug and one more week to continue working here I am afraid.

We are really happy about your engagement and creativity to help us with the new icons.

For licensing reasons (your are the copyright holder of your creative work!) we still need a confirmation from you

  • that the icons are your work (or in case they are derived from other's work: A reference/link to the original work + the license conditions)
  • that you are contributing your icons to BiT under the GPL3 GPLv2 license (which is used for all our work here)
    or (if you prefer) a CC* license
  • if and how we shall mention you as contributor of the new icons in BiT (alias or real name, link to a web site or similar - please keep in mind that if you want to publish contact data like an email address this may cause a lot of spam)

Hi, take your time. No hurry.

I am not sure which licence is the best choice. They are 100% original, hand/mouse drawn.

It would be nice if you can link my GitHub profile in credits (if possible). But I am quite if you can say " artwork by meetdilip ".

I am not sure which licence is the best choice.

Licensing is extraordinary complicated due to the many different licenses on the market.

I think a good starting point is

https://choosealicense.com/

If you want to contribute your creative work using one of the "creative commons" (CC) licenses (which are in fact quite common for non-source-code work) a simple license configurator is offered here:

https://creativecommons.org/choose/?lang=en

The different flavors of CC (indicated by 2-letter groups appended to "CC") are described here:

https://creativecommons.org/licenses/

A typical CC BY-SA for example means "Attribution" (quote your name) + "ShareAlike" (= same license for derived work): https://creativecommons.org/licenses/by-sa/4.0/

On the other hand using GPLv2 (the license of BiT) you achieve almost the same like CC BY-SA and would make it easier for us to maintain only one license but if others copy + modify + publish your icons there is no obligation to name you as author ("attribution"):

https://choosealicense.com/licenses/gpl-2.0/

Whatever you choose I would recommend to embed your license as meta data (RDFa or similar) into the SVG files you contribute to ensure the license is not lost when the files are copied (separate license files are more complicated to keep together with your files IMHO).

Ok, I have no particular preference. :)

@emtiu Here you can find our up-to-date icon draft (designed by @meetdilip) with two different colors (one for BiT root and one for BiT user). Any comments or vetos?

The systray icon shall look like this (black/white due to newer color style in Gnome, but the colored versions may be more easy to recognize since they correspond to the app icons):

#215 (comment)

#215 (comment)

Note: The numbers in the the systray icon shall indicate the progress of a backup or restore in percent but it may be still be difficult to read this (I will prepare add the icons to a feature branch soon to test it).

emtiu commented

@emtiu Here you can find our up-to-date icon draft (designed by @meetdilip) with two different colors (one for BiT root and one for BiT user). Any comments or vetos?

No veto, I really like it :)

buhtz commented

Just noticed our boring icon that reminds me about this issue here. ;)

To my understanding after reading this thread @meetdilip just need to decided about a licence. When you need assistence choosing one I would suggest to contact the community of Inkscape, or the Free Software Foundation (Europe) or the "Open Source Initiative".

aryoda commented

@meetdilip gave us the freedom to choose:

Ok, I have no particular preference. :)

It is now my turn to incorporate the changes and I would like to use the new icons in our upcoming Qt6 version now

FYI: We might get got a small press release on linuxnews.de. The author asked me for our logo. ๐Ÿคฃ
In the end I provided a screenshot of the main window.

I would like to bring this to an end. We need some decisions and statements from @meetdilip about it. It is not possible to give us the choice. He is author and copyright holder and need to decide. But we can assist this.

Our goal is to use the logo for Back In Time but other projects shouldn't be allowed to use it in another context.

Dear Dilip, your answers to the following questions would help us to direct you to an appropriate license.

  1. Is it OK for you if the use of the logo is exclusive to the Back In Time project?
  2. Is it OK for you if Back In Time as project can access the logos source file (an svg?)?
  3. Is it OK for you if Back In Time project members do modify the source file? Modifications for example are changing the color palette, use another size/resolution, add the logo to another picture (e.g. on to a screenshot).

One licensing model could be that Dilip keep authorship and copyright and give the BIT an exclusive-use license with rights to modify in perpetuity. But I am not clear enough about it today. We need to consider two relationships: 1) Between Dilip (the author) and the BIT project 2) the BIT project and the rest of the world.

Collecting some information and opinion about this topic

Hello Dilip,
long research, short answer. The easiest for all parties would by if you would release the logo with the same licence as we use in Back In Time project. The license is "GPL-2.0-or-later".

The meaning is (in short) that everyone, not only members of our project, can use, modify and publish the logo.

What do you think?

It seems this won't come to end. Without license we can not use it. Anyway...

I think about looking for a new creator somehow. Now we are more clear about what we need and how it should be licensed. So we can communicate that before someone starts to be creative.

I can contact again the BIT and creator community in several ways.
Or what might reach more people I could add a request-for-icon-creator-message-dialog to BIT itself. We have done this with a request for translators, too.

Does someone has mail contact to dillip?

Just in case if we can not finish with Dillip I have another quick n dirty "concept" for a logo. This drawing is just a concept done with MS PowerPoint + MS Paint, to give you an idea.

The idea is based on "backup" logos like this.
image

Most of them are stack of discs.

This is my "drawing":
image

One of our main features is to use hardlinks to save storage space. This is what I try to impress in my drawing with the vertical bars, sometimes separated by horizontal lines. My example is stack of 5 discs, 5 snapshots. The 3rd bar is not separated by a horizontal line so it is one unchanged file stored via hardlink in this snapshots.

Got the idea?

A symol like this might be easy to draw and to scale. And it might work with colors and in grayscale. Of course someone more professional need to do it and decide about the colors, bars and horizontal lines. My example is to noise.

Because there is no more feedback I will close the issue soon.
I opened a follow-up issue #1961 with improved and clearer details about what this projects need and what need to be done about a logo, especially when it comes about licensing. My hope is to attract more designers when the tasks are described more clearly.

I will also come up with some ideas and sketch ups about a logo. ๐Ÿคฃ

I am sorry. But the work still done was worth it but even if we are not using the results we learned a lot about the process and can make it better next time.

Closing this ticket based on the comment above. Feel free to reopen
if the problem still exists. Thank you for your efforts. If you have
any further questions, ideas or encounter any other issues, please
don't hesitate to let us know.

Best regards,