Learn how easy it is to sync an existing GitHub or Google Code repo to a SourceForge project! See Demo

Close

New icon set

General
Uzair Asad
2013-04-09
2013-05-15
  • Uzair Asad
    Uzair Asad
    2013-04-09

    Hello again!

    Now that I've finished the new logo I've also had enough time to finish up the new icon set I've made for eViacam. The complete icon set zip file is available below:

    http://uzair.parasestates.com/eviacam/icons.zip

    There's a png set and an xpm set. I'd prefer if you could use the png set because the xpm image format causes the edges of the main window icons to be rough, regardless of my output settings. The png files have much neater edges!

    Cesar, can you kindly make me a developer build (for windows preferably) to preview the icons? I have Ubuntu 13.04 and Windows 8 installed and can't get the dependacies to work when compiling on either :P

    Let me know if you need any more icons. Next up is the website!

    Best,
    Uzair

     
    Last edit: Uzair Asad 2013-04-09
  • Thanks Uzair. The new icon set looks great!

    I've created a development build for win32 that can be downloaded here:

    http://www.crea-si.com/download/eViacam-1.6.1-dev_new_icons.exe

    I needed to fix some minor details:
    - .ico format not recognized by VS.NET
    - some files renamed
    - names of .xpm contained absolute paths
    Here is the updated version (it's a git repo so that you check the specific changes if you want):

    http://www.crea-si.com/download/icons_rev.zip

    Unfortunately, I cannot use .png directly for icons (at least not easily). Most icons look nice, I only notice rough edges for eviacam.xpm and eviacam_mini.xpm. The icons for the Click Window are great but I feel they lack some contrast so that is difficult to know which option is selected. Finally, it would be great if I had an icon for the installer.

    I cannot produce a build for Ubuntu 13.04 easily because I don't have such version installed, but you could try fulfilling the following development dependencies and compiling it (let me know if you need further help):
    debhelper (>= 7.0.50~), po-debconf, autotools-dev, libwxgtk2.8-dev, libgtk2.0-dev, libcvaux-dev (>= 1.0), libhighgui-dev (>= 1.0), libpng12-dev, libxtst-dev, libxext-dev, libv4l-dev, libopencv-dev | libcv-dev

    Best
    Cesar

     
  • Uzair Asad
    Uzair Asad
    2013-04-11

    Really appreciate the dev build! I just used GIMP to save the png files as xpm files, not sure why that happens, will try imagemagick next time. The icon format contains 23 different size and color depth variations. You should use my ico file for the program shortcut file (so it contains all high and low res icons) and a simple ico file for VS.net as you made, if that is possible.

    I've fixed up some of the icons (quickup mockup below):

    http://uzair.parasestates.com/eviacam/eviacam_icons2.png

    Notes about the image above:
    - Made an installer icon!
    - Gave eviacam_mini.xpm a square background so it looks better. (Solves rough edges)
    - Gave eviacam.xpm a square background too. Can we make eviacam.xpm a 48x48 pixels icon instead? Or atleast use a 48x48 one for the clickwindow since that makes it the same size as the other click window buttons.
    - Added play/pause indicator on the NoClick buttons in the click window
    - Updated Show/HideMainWindow icon because it didn't look right :D
    - In the dev build the toggle clickwindow icon doesn't change state (is it meant to be like that?)
    - Most importantly, to increase the contrast in the selected button states in the click window should we use the navy blue or black selected state? (Both shown in the image above)

    Also, I think you should use the eviacam_title logo in the about window since I'm using that one for the website. (Still WIP, but you can check it out below)

    http://uzair.parasestates.com/eviacam/website/

    • Just remembered to put a square background on the users.xpm file as well since it will show up in the settings window with the squared eviacam file.

    I'll try building on Ubuntu after installing those packages and see what happens.

     
    Last edit: Uzair Asad 2013-04-11
  • I updated VS project files to compile using VS 2008. Now the original .ico file works fine :-)

    Regarding the eviacam_mini.xpm, is it possible to remove the background? What about creating it pixel by pixel?

    For the eviacam.xpm, I guess it is OK to create a 48x48 icon, please, use the same grey color for the background.

    In the dev build the toggle clickwindow icon doesn't change state (is it meant to be like that?)

    No. Fixed.

    Most importantly, to increase the contrast in the selected button states in the click window should we use the navy blue or black selected state? (Both shown in the image above)

    I think the blue should be lighter.

    Also, I think you should use the eviacam_title logo in the about window since I'm using that one for the website. (Still WIP, but you can check it out below)

    Done.

    Good job :-)

    When I receive the updated icons I will generate a new development build.

    All changes are available on code repository, branch "new_icons", in case you want to build it.

     
  • georgn
    georgn
    2013-04-15

    Careful with the colors, because colorblind users (about 12 % of humans) won't be able to distinguish red and green and grey because they blend into each other.

    Here is a tool that lets you switch the current screen to the three most common forms of colorblindness:
    http://colororacle.org/

    Perhaps you could make the clickwindow in bright grey and the mouse outlines in thinner black and the right/middle/left state filled button in black ?

     
  • Uzair Asad
    Uzair Asad
    2013-04-21

    Been quite busy lately, have some time now so...

    Applied the following as shown in the preview image below (new changes marked by red arrows this time):

    http://uzair.parasestates.com/eviacam/icons/iconsnap1_normal.png
    -As you said I tried fixing eviacam_mini.xpm pixel by pixel and gave it a grey border which looks much better now (a black pixel border makes it way too rough)
    -Made the background of the 48x48 eviacam.xpm same as the clickwindow
    -For the selected state in the click window, added a lighter blue - it's cyan now :D as shown in the preview image, which works well.

    Awesome that you updated the project files!

    New and updated icons (only) are here:
    http://uzair.parasestates.com/eviacam/?dir=icons%2F18april2013

    (Only png files since I can't make xpm files properly =P and I'll make the new selected state click window icons once we've set the color.)

    Thank you for the wonderful suggestion georgn! I've looked it up, and I think we should consider deuteranopia and protanopia which are the most prominent.

    Here is how the above preview image looks to someone with deuteranopia :
    http://uzair.parasestates.com/eviacam/icons/iconsnap1_deuteranopia.png

    And here is how the above preview image looks to someone with protanopia:
    http://uzair.parasestates.com/eviacam/icons/iconsnap1_protanopia.png

    Looking at those images if we decide to design primarily for color blindness then we should use yellows, blues, whites, and blacks. We shouldn't use red and green since it will appear too similar to yellow/grey to color blind users. (If we really want to design for all kinds of color blindness then we would design monochromatic icons as much as possible, each with distinct forms.) Waiting for your thoughts on this.

    However, I think that considering the color blind preview images above our icons don't really need changing since their forms are quite distinguishable, expect perhaps using yellow instead of red in the click window mouse buttons.

     
    Last edit: Uzair Asad 2013-04-21
  • Uzair Asad
    Uzair Asad
    2013-04-26

    Thanks Cesar! That is a great method to design for color blindness. I ended up using red and blue because yellow is too bright (and too similar to the white mouse frame) and the light blue (cyan) is too similar to the gray click window background in grayscale. So I gave the color differences of the buttons some form differences to make the icons more distinguishable. Preview image is below:

    http://uzair.parasestates.com/eviacam/icons/iconsnap2.png

    (Only changed mouse buttons in the click window since my last post - it took a lot of time tinkering around to get the icons to work well in grayscale.)

    Black instead of red and blue provides the best contrast (since it's monochromatic) but I felt that the forms differences of the icons were enough now to let us add some color for the majority of users to view, while keeping the icons distinguishable enough for color blind users too.

    I'll post a xpm zip file when I get your final thoughts on preview image above since it takes quite some time making all the click window icons and states over again. I'm keeping my eye on the new_icon branch too.

    By the way, Ubuntu 13.04 is officially released now =) I'll see if I can build it by installing the packages you suggested earlier.

     
    Last edit: Uzair Asad 2013-04-26
  • Thanks Uzair. Certainly the icons are now quite distinguishable, even in grey scale.

    I guess the small triangles in the bottom point to the selected action. For me it is fine.

    The only (little) concern is with the dots over the buttons. May be the double click and drag&drop icons do not need such a dot (in the first case the cross could be over the left button so that in the future we could add right button drag&drop if needed). Another idea is to use a pattern to fill the button area for the rest of buttons.

    Anyway, the current icon set is fine!

     
  • Uzair Asad
    Uzair Asad
    2013-05-13

    Hi Cesar! You can get my finished up icons (xpms and pngs) below:

    http://uzair.parasestates.com/eviacam/icons/icons_14MAY2013.zip

    Notes about this icon set:

    -Based on the new_icons branch

    -Contains all the new clickbar mouse buttons as well as the new icons from before

    -Modified all locked states triangles so they are distuingable from the selected states triangles (else you can have you 2 sets of triangles in the clickwindow at once [in a few situations] which is confusing)

    -I've added a new 32x32 file "eviacam_small.xpm" which I think you should use in the configuration window since the 48x48 "eviacam.xpm" now has a grey background for the clickwindow (so edges render well in xpm file) and wouldn't look consistant with the 32x32 "users.xpm" file.

    There are dots on all the mouse function buttons for consistency which helps convey button purposes well (lack of the dot may suggest different nature of functionality than the other buttons). Changed double click icon to have 2 dots to make its function clearer. Drag&drop has a dot on the left mouse button because it means you drag with the left mouse button. The dragging cross is on the right so you can see the dot on the red left button, the lock, and the triangles clearly (its the only space left to put the cross in). A right click drag button would simply be a mirror image of the left click drag button if we ever need it.

    Sorry it took so long; I had (still have some) exams and finals :P

    Looking forward to a dev build to see how they look now! Now I'll be working on the website from time to time - design is done, just need to write up the content and then cut up the sections into php files for translations. You can follow the website work at the link below:

    http://uzair.parasestates.com/eviacam/website/

    EDIT: Corrected "eviacam_mini.xpm" and updated zip file at top of this post.

    EDIT: Screenshot from Ubuntu 13.04 with new icons!

    http://uzair.parasestates.com/eviacam/screenshot_14MAY2013.png

     
    Last edit: Uzair Asad 2013-05-14
  • I've uploaded a dev build here:
    http://www.crea-si.com/download/eViacam-1.6.1_new_icons.exe

    As usual latest changes are available on branch 'new_icons'. Let me know if everything is OK, I plan to release a new version soon.

    Regarding the website, attached is the source of the current website in case is useful for you.

     
    Attachments
  • Uzair Asad
    Uzair Asad
    2013-05-15

    I've checked it out and it looks good! Heres a screenshot on Windows 8:
    http://uzair.parasestates.com/eviacam/screenshot_win8x64_15MAY2013.png

    Didn't notice any issue.

    Thank for the website files, I'll let you know when I've made some progess. I'm also thinking about updating User Manual as well (starting with the images in the manual).

     
    Last edit: Uzair Asad 2013-05-15
  • Uzair Asad
    Uzair Asad
    2013-05-15

    Hi Cesar, I've been looking at the docs folder to update the images for the new icon set. Should I capture all the needed screenshots using Windows 8 or Ubuntu 13.04 (default theme) or both? (I'll do it for every language in the eViacam options so that when we get new User Manual translations, we'll have the necessary screenshots already.)

    EDIT: Should I include both of the adsense blocks on the new website?

     
    Last edit: Uzair Asad 2013-05-15
  • Hi, I merged the 'new_icon' branch into the 'devel' branch, so the new icon set is now officially integrated into the project :-) Thanks for your nice work!

    Regarding the user manual screenshots, it is fine if you capture them only on Ubuntu with the default theme (the linux version provides more features and maintaining different versions of the manual would be a pain).

    And yes, include the adsense blocks on the new website. Perhaps you might want to suggest better locations or sizes for these ads.

     
  • Uzair Asad
    Uzair Asad
    2013-05-15

    Awesome, kindly remember to mention me as "Uzair Asad" =)

    I touched up the edges of eviacam_small.xpm a little bit:
    http://uzair.parasestates.com/eviacam/icons/eviacam_small.xpm

    Also, I will probably reposition the ads a little bit.

    EDIT: I am waiting till you finish up the new release, then I'll update the User Manual screenshots in case anything changes.

     
    Last edit: Uzair Asad 2013-05-16