search

Noitidart / NativeShot

Firefox Addon :: Freeze frame screenshot tool to capture and edit anything on any monitor
https://addons.mozilla.org/en-US/firefox/addon/nativeshot/?src=github
17 stars 11 forks source link

icons not pixel-perfect #33

Open Merci-chao opened 8 years ago

Merci-chao commented 8 years ago

The icon of toolbar buttons are not pixel-perfect. If you are using PS or AI, you can enable the snap to pixels option and tune your icons.

Noitidart commented 8 years ago

Hi there Merci! I'm actually very poor with graphics. I tried my best. Would you be able to help me out with it? Someone just sent me this attached PSD that gives all the different variations for the different operating systems. He discussed it here - https://discourse.mozilla-community.org/t/ux-the-different-colors-for-toolbar-icons-per-platform-win-nix-mac/8655/8?u=noitidart

Please see attached. skin.zip

Noitidart commented 8 years ago

Oh! Are you talking about the icons in the toolbar of the image editor?

Those I got from http://www.flaticon.com/ and then I dropped them into fontello to make a font out of them - http://fontello.com/ - it was really hard for me. I would love to collaborate with you on images. If you are available. If not, no problem! :)

Merci-chao commented 8 years ago

Well, I'm just actually the someone who sent you the PSDs. XD I thought maybe you were using PhotoShop or Illustrator to draw your icons with vector images. The files I sent to you may be useless if you are not familiar with drawing vector icons in PhotoShop...

Noitidart commented 8 years ago

Oo! Haha that is so cool of you to follow my work from that topic dnd provide feedback on it! I really appreciate it! You are probably very busy supporting your addon. You are so right, I opened up those PSDs and was totally overwhelmed! Haha I'll understand it sooner or later

Merci-chao commented 8 years ago

No pain no gain, brother. I have done the aero version of your toolbar button for you. (Luckily the icon is simple enough and I need not spend much time. : p) https://drive.google.com/open?id=0B3rlip_sagCYZGhvTFA2bEV5MjQ For example:

  1. Open the "toolbar-inverted.psd" I sent to you previously;
  2. Find the "Layers" panel in PhotoShop, right-click on the only layer, choose "Copy Layer Style";
  3. Open the "dark.psd" in the zip file above, right-click on the layer, choose "Paste Layer Style";
  4. Now you can see it changed to the inverted style;
  5. File -> Save as -> PNG file;
  6. A "dark-inverted.png" is done.
Noitidart commented 8 years ago

Oh wow!! Thank you so much friend!! This will really help me get them done. Sincerest thanks!!

Merci-chao commented 8 years ago

Anyway, in my example, there is not enough available pixels to draw. The middle of dashed outline looks like a dot more than a dash. You may need to think about how to tune the icon, using 3 pixels but not the 2 pixels of current, etc. dark

Merci-chao commented 8 years ago

It seems I forgot to enable the sharing of the link above. It should be accessible now.

Noitidart commented 8 years ago

Wow very interesting @Merci-chao thanks for this info!

noureddin commented 8 years ago

Hello, I'm sorry for commenting on this old issue, but I find it still open. I'm a graphic designer. Assuming there is no technical difficulty, it's better to use vector (svg) icons instead of raster (png) ones. You will need only one icon for all sizes of an icon, and it'll never look pixelated. I can help vectorizing the icons if needed.

Noitidart commented 8 years ago

No way! That is so awesome @noureddin! There is no problem at all for commenting on old issue, it is very very much appreciated! Old issues are the most troublesome because I was not able to do it. With all the other coding development and performance enhancements I couldn't find the time to learn graphics to do this. If you can really help me out here that would be sooooo awesome! Barakallahfi!

Noitidart commented 8 years ago

@noureddin this is where I got the icon from - https://www.iconfinder.com/icons/99958/screenshot_icon#size=128 - in case it helps :)

noureddin commented 8 years ago

I thought the needed icons are those in your attached file "skin.zip", so I began with them. This file, modes@2x.svg.zip, contains the vectorized version of modes@2x.png in "Linux" folder in your attached file "skin.zip". Please try it and tell me how it works, and if I should continue the same way, or I should do something different.

Actually, If the site allows downloading the icons in a vector format like svg, I don't need to do anything. But it doesn't seem to do so.

Noitidart commented 8 years ago

Oooo haha @noureddin those are files for @Merci-chao's addon. He gave me them as example.

noureddin commented 8 years ago

Ok, No problem. :D Where can I get the icons used in your addons?

Noitidart commented 8 years ago

I just need this one here please - https://www.iconfinder.com/icons/99958/screenshot_icon#size=128

:)

The other icons are png but the issue @Merci-chao refers to only affects this one.

noureddin commented 8 years ago

I thought it's about the icons in general. Anyway, this is the logo in svg, Screenshot.svg.zip. Please try it and let me know if it could be improved in anyway. :)

Noitidart commented 8 years ago

Wow thank you! So cool! I struggled so much to make it haha its a joke

Could you please make the different colors for the different systems. As @Merci-chao did in his addon - he lists paths to the images based on platform here - https://addons.mozilla.org/en-US/firefox/files/browse/498411/file/chrome.manifest#L4

And then his images are here - https://addons.mozilla.org/en-US/firefox/files/browse/498411/file/chrome/skin/menuPanel@2x.png#top

He says:

it supports all default themes, including XP, Luna Silver, Aero, Win 8, Win 10, Linux, OS X and Yosemite, and all corresponding menu panel, inverted and 2x versions.

I did some research and mentioned in the original post of the topic - https://discourse.mozilla-community.org/t/ux-the-different-colors-for-toolbar-icons-per-platform-win-nix-mac/

But the way @Merci-chao did it is the perfect way. @Merci-chao may you please chime in if you have some time, it will really help @noureddin :)

noureddin commented 8 years ago

SVG files use CSS attributes, and can use an external CSS file. Extract this file, Screenshot.zip, and open the SVG file in Firefox, and hover over the icon, then take a look the contents of the CSS file. ;)

So, all those versions can be made with only two files: an SVG and a CSS.

Noitidart commented 8 years ago

Oh wow! No way! That is super duper cool thank you @noureddin !! I will definitely try that right now! :)

Noitidart commented 8 years ago

Im having a tricky time getting it to work. This is my code:

<link href="Screenshot.css" rel="stylesheet" type="text/css" />
<img src="Screenshot.svg" />

Its showing as black for me. :(

noureddin commented 8 years ago

As far as I can understand from this page (Sections "Using SVG as an <object>" and "External stylesheets for SVG"), the SVG must be linked as <object>. So, your HTML file should contain this instead: <object type="image/svg+xml" data="Screenshot.svg"></object> And there is no need to link the CSS file again, unless it's used in the HTML itself.

Noitidart commented 8 years ago

Ohh sweeet!! That fixed it! I'll go collect the different styles of the different OS and share with you the result, this is real exciting!

Noitidart commented 8 years ago

I just created branch osversion-icon. I got the stylesheet overriding per os and it works when access raw, but when used as list-image-style it wont work and thats how the CustomizableUI.jsm makes the the toolbarbutton :( - need to figure out how to get the internal style sheet to work with list-style-image otherwise we'll have to make unique image per, which will stick. the unique styleshet per is much better.

@noureddin do you know how ot make the internal stylesheet apply when the svg is used as list-style-image?

Here is inspection on it:

noureddin commented 8 years ago

@Noitidart I don't know but I try to find a solution.

Also, if it's possible to embed the CSS in the SVG file, it may work. But it may not be easy in this case.

noureddin commented 8 years ago

I can't find an easy solution, sorry! I am not an expert, so there may be a solution but I couldn't find it.

Anyway, it should work with internal CSS (written inside the SVG file), so you can tell me all the fill attributes, and I'll generate the required SVG files.

Noitidart commented 8 years ago

Thanks @noureddin for that offer. I'll do some research to get all those. But I wanted to ask @Merci-chao if he could share the style attributes. He is familiar with it.

Hi @Merci-chao, could you please share how the style i would apply to each image? Not the exact thing, but how you think it would look, like color gradient, you can just say it in words too and I can hammer out the code. :)

Merci-chao commented 8 years ago

It is impossible to apply styles to the SVG image referenced by list-style-image. So you can only embed the style inside the SVG file.

If you want to have a dynamic appearance, there are two ways to achieve:

  1. Use "icon.svg#aero" to reference specified image inside your SVG file. It means you may need to draw multiple images in a single SVG file.
  2. Use "icon.svg?style=aero" to provide arguments, embed JavaScript inside SVG file to extract the arguments, and apply the styles dynamically.

I've tried to use SVG file with the second method at the first time. However, it is difficult to implement the inner shadow effect in SVG, and the outcome is not perfectly matched with the Firefox default style.

There is not much information in MDN, so you may need to Google the documents and examples. Gradient Shadow Inner Shadow

noureddin commented 8 years ago

Great! Thanks a lot, @Merci-chao!

After searching, I found out that using icon.svg#aero is called "SVG Stacking". I tried it and it works fine, although it was a little difficult at first.

Anyway, this file, Sceenshot.zip, contains the logo with four styles and an HTML page to try it with list-style-image. I tried to use a CSS gradient, but it didn't work. Only an SVG gradient worked (I don't know way). The MDN page, you mentioned, about SVG gradients really helped me. Thanks!

Preview: screenshot

Noitidart commented 8 years ago

@noureddin oh wow thank you so much! I missed your reply, those are so beutiful!

noureddin commented 8 years ago

@Noitidart You're welcome! No problem. You can give me a list of the required colors/gradients and I will put them into the SVG.

Noitidart commented 8 years ago

Hey @noureddin I'm going to get v1.12 out and then I have to take a break. I have to work on future compatability so am learning some C++. Firefox is moving to WebExtensions and my addons like NativeShot will be hit hard. I'll get back to you on these images in the future (near future hopefully) please. :)

noureddin commented 8 years ago

OK. No problem! Good luck! :)

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.