I'm developing a WinForms c# 3.0 application. Our designer created quite a lot of .ico files containing all the needed art. The choice of .ico was made because quite often, the same image is needed in several places in different dimensions.
Now, it seems .ico files are really annoying to use in visual studio. The only way to use those images seems to be through images list (which aren't supported by all controls).
Compared to other resources, you can't write this :
foo.Image = global::RFQHUB.RFQHUBClient.Properties.Resources.foo; // Cannot implicitly convert type 'System.Drawing.Icon' to 'System.Drawing.Image'
Here are the options I'm considering :
create ImageLists of all possible sizes referencing all my icons in my main window. Link these ImageLists from other windows and find a way to export Image objects from the ImageList when I can't use it directly ; since ImageList contains a Draw() method, this should probably be possible.
convert all the x.ico I've got in several x16.gif ...x48.gif, and use those through resources.
I'd be interested to know if some people have been successfully using .ico resources in a Winform application. In so, how did you set up things ?
ICO isn't quite an obsolete format, but it's close. It's still useful for your application icon, but for almost everything else, it's better to use an ImageList for each size that you need. And it's much faster to populate an ImageList from a bitmap that contains multiple images layed out in a grid.
You also want to use an Alpha channel transparency in your bitmaps to get the best result, so storing them as .PNG files in your resources is the best way to go, since PNG supports an alpha channel. ICO and GIF files support only single bit for transparency - every pixel is either fully opaque or fully transparent. An 8 bit alpha channel for transparency looks much nicer.
If you can send your artist back to the drawing board then you should do so, and have him/her do full anti-aliased images with alpha. If you can't, then I suggest that you write a small program to convert all of your icon files into bitmaps suitable for loading into ImageLists.
Convert the images into PNG. Point. Whoever decided to use .ico files to start with should get talked to in private - the argument holds no ground.
Related
I have a video with transparent background in .avi format (Made from Adobe After Effects), but the transparent background appears black in mediaelement. Media Player has no background property also.
What should i use so that this media element plays the file and when placed on an image takes that image as its background. (No i cannot embed that image in the avi file as my image keeps changing).
*If my approach is wrong please let me know.
I'm afraid using the normal wpf media player this can't be done.
The mediaplayer ignores the transparent regions, even with video formats that accept it. From memory, i dont think AVI files support transparent regions. MOV files do.
Having said that, and although it could be a very complicated task, it may be possible to enhance the WPFMediaKit mediaplayer to do what you want.
http://wpfmediakit.codeplex.com/
J Morrill the author of wpfmediakit may be able to let you know if it is possible or not.
I might add that i got around this problem in a project once by using a sequence of .png files that played a short 10 second movie. Of course this is not an ideal solution, but it got me out of a jam
Another workaround is to use color keying - assing a color (or more colors) in your video, which you translate to the transparency by a WPF Effect(BitmapEffect or ShaderEffect).
If i have a logo, let's say done as a jpg or even a png. Any suggestion for how I can use that to define a path geometry? It would be really good if any suggestions could be provided for how i can do it in blend.
Thanks
Yes - I just tackled this problem for an LOB application two days ago.
I can't offer advice for Blend (though I've read that it can be done in Expression Designer). However, the best free tool I've found for this is called InkScape (http://www.inkscape.org).
It's opensource, and while it's intended primarily for editing SVG vector-based images, it has two key features that are useful to us WPFers:
It can vectorize (i.e. "trace") raster images like bitmaps and jpegs, albeit not as well as one would hope, and
It can export the vector image as XAML
You'll invariably find that you get better results from loading vector formats (like SVG, EMF, WMF, etc) and saving to XAML, than if you try to convert a bitmap/jpeg... simply because the process of vectorizing a raster image is error prone at best. So if you want to bring a company logo into XAML, try to get hold of the source files used to create the logo (perhaps done in Illustrator?) and import that into InkScape.
If this post is helpful, please be kind and give it a one-up.
Jasema is a terrific tool right for the job.
Also, don't be shy to use Blend - it is somewhat more difficult to use (drawing shapes using pen) but it gets easier pretty fast. Switch on gridlines and optionally snap to them for good results.
What both Jasema and Blend are lacking, is the ability to easily create shapes with a central symmetry (like stars), so I took parts from Jasema and created my own tool (named Radius) that works a bit like a combination of a ruler and compass.
I have a good idea but you're png, bmp, jpg or other non vector file is must be very simple because we need best scan results and only use inkscape.
Step: Drag and drop your file workspace on Inkscape, download free.
Tip: If your image is color white, Top menu item File->Document Properties-> heck Checkerboard Background and if you want uncheck Page border show.
Step: Top menu item Path-> Trace Bitmap-> Mode check what you want property, i usually use color property and if your file is png check Remove Background then click OK, then wait again Ok button is Enable and close window.
Step: Now you have a two layer, top layer vektor file and bottom layer your file. Select vector file and top menu item Edit-> XML Editor-> select svg path and look side column, d name propery in your data path value.
But this method may not always work or may not give the desired results and draw your own shapes with the scape so you can get the path data from the XML editor.
Example, my first tests this like:
and after working on it some more:
I've solved my problem (export an image as XAML) using Microsoft Expression Design 4 (Free Version). I've downloaded from the link
http://www.microsoft.com/en-us/download/confirmation.aspx?id=36180
As input, I had Adobe Ilustrator files.
Adobe Illustrator / CorelDraw is perhaps the best tool out there for these operations that I have used.
Personally, I prefer illustrator for on-screen media. These tracings can be exported into several formats such as EPS, SVG, AI, or even XAML (with this plugin)
Best of Luck !!!!
I have recently been struggling with this myself. I had a set of icons done in data and needed to update them to look nicer.
I tried everything, manually typing them out. drawing in svg, converting svg to xaml.
in the end i found a list of open source icons from google material icons.
I then used this to convert from the svg files to data
https://github.com/BerndK/SvgToXaml
It works well but not for the icons i drew myself.
I decided to place all the icons data i convert into an app i built myself that will give you the data and a preview of the icon. feel free to use and contribute. I will keep updating as much as i can.
https://github.com/sgreaves1/XamlIcons
Convert your image from png to svg in online converter, then drop file into this site http://inloop.github.io/svg2android/ and you will see pathData of your image like below shown in my image.
When a child window of my application is opened and I view the ALT+TAB menu, the application icon looks pixellated. I assume that Windows uses a low resolution version of the icon (16x16 pixel I think). What can I do that Windows selects the right version which would be 32x32 pixel?
I assigned an icon to the window in question that has 16x16, 24x24, 32x32, 48x38 and 256x256 in true color. Please note that VS says in the proterties that 32x32 is used and that it works fine for the main window of my application where I assigned the exact same icon.
The caption bar of a Windows application window display icons in 16x16 pixels. The Alt-Tab list, however, shows icons in 32x32 pixels. It uses the same icon as is set for the window. If you only set a 32x32 one, the caption bar has to scale it down, which tends to look ugly as it uses nearest-neighbor interpolation. So how does one support both?
The answer is the ICO file! It supports embedding multiple icons in one file, typically the same (or similar) icon in various sizes and, less commonly, color formats.
Browsers, Windows, and others are typically designed to smartly use the appropriately sized variant within a given ICO file. So the answer is to have an ICO file with both sizes (or more) inside. The result is that the caption bar correctly uses the 16x16 version and Alt-Tab uses the larger 32x32 one.
The methods for saving an ICO file with multiple icons inside varies from program to program. However, GIMP can easily do it (and it's free). The trick is to have your variously-sized icons as separate layers. When you go to save it as an ICO file, GIMP will prompt you with the ability to set the size and color format of each layer. A good tutorial, with images, can be read here.
If anyone has any links or suggestions for creating multi-icon ICO files in other programs, feel free to add them. Also, I'm unsure if the Visual Studio built-in image editor can do it or not — I've rarely bothered with it.
Fixed the problem. I put the icon on the wrong form. As I don't think that this question will be of any help for anybody feel free to delete it.
When designing a website, what do you consider the best image format to use for a particular task?
I always find myself in a dilemma when trying to figure out what format to use for a specific task...like for example, should I use .jpg all round? or, when and why should I use a .png?
For example, taking Amazon's website, they use .jpg for product images (Example), .gif for this transparent pixel (Example) and .png for their CSS Sprites (Example)
On the other hand, Play.com use a .gif for their website logo (Example), but use .jpg for their website products (like Amazon) (Example) and as far as their main page goes, they dont have any .pngs on it.
So what formats should I use for my websites? and why should I use them?
[UPDATE]
Thanks CruellO for this link for explaining the differences, and also Dustin for giving reasons on what to use.
You should be aware of a few key factors...
First, there are two types of compression: Lossless and Lossy.
Lossless means that the image is made smaller, but at no detriment to the quality. Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.
There are also different colour depths (palettes): Indexed color and Direct color.
With Indexed it means that the image can only store a limited number of colours (usually 256) that are chosen by the image author, with Direct it means that you can store many thousands of colours that have not been chosen by the author.
BMP - Lossless / Indexed and Direct
This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.
Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.
GIF - Lossless / Indexed only
GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.
GIF images can also be animated and have transparency.
Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.
JPEG - Lossy / Direct
JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!
Good for: Photographs. Also, gradients.
PNG-8 - Lossless / Indexed
PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.
Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.
Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.
PNG-24 - Lossless / Direct
PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.
Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than the equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about file size, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
JPEGs are for photos. I see JPEGs with text in them occasionally and they just look awful. Text is best for text, otherwise use PNG.
If it's not a photo, but you want a graphic of it, use a PNG. A PNG is almost always smaller than the equivalent gif and will not lose quality like a JPEG file. A PNG equivalent of a JPEG will typically be a lot larger (assuming it's photorealistic). There may be times where this is still desirable.
PNG does allow for 8-bits of transparency, but if you have to support IE, you'll find that they continually refuse to support that correctly. They do support a single bit of transparency in an 8-bit image (essentially the same as gif) as far as I know. There are also numerous hacks to get 8-bit transparency to work in IE. I've never bothered, myself.
In summary:
Photos → jpg
!Photos → png
PNG can be used when:
You need transparency (either 1-bit or alpha transparency)
Lossless compression will work well (such as a flat-style icon or logo)
JPEG can be used when:
Lossless compression will not work well (such as a photograph)
GIF can be used when:
Animation is necessary, and video is not possible (though you should really try and use video; animated GIFs are poor quality and very inefficient)
Despite myths to the contrary, PNG outperforms GIF in all like for like comparisons. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and multi-bit transparency (alpha transparency). Note that multi-bit transparency used to be a problem back when people used IE6.
PNG modes include (this is just a small subset)
Palette colour of 2 to 256 colors (like GIF)
Palette colour of 2 to 256 colors, with transparent color (like GIF)
True color (24 bit color)
True color with alpha channel (24 bit color + 8 bit transparency)
For best compression in PNG for the web, always use a palette mode. If you find PNG files are larger than the equivalent GIF files, then chances are you're saving the PNG in 24 bit color and the GIF in palette mode (because saving a full color GIF always requires translation to palette mode). Try converting the image to palette mode before saving in both cases.
PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this work in browsers but software like Photoshop have (or once had) problems with creating or working with them due to not supporting those image modes.
If you are storing or presenting a large number of images the new Google WebP format might be worth considering as it is 25% smaller than PNG/JPG.
Note this is not supported by all browsers at the moment.
NB. This came out in 2010 after this question was posted.
JPEG FILE FORMAT
Great for images when you need to keep the size small
Good option for photographs
Bad for logos, line art, and wide areas of flat color
GIF FILE FORMAT
Great for animated effects
Nice option for clip art, flat graphics, and images that use minimal colors and precise lines
Good option for simple logos with blocks of colors
PNG FILE FORMAT
Lossless
Excellent choice when transparency is a must
Good option for logos and line art
Not supported everywhere
You can see this infographics for more detailed information, Image File Types: When to use JPEG, GIF & PNG
I have an AI file. I paste it into Expression Blend and then export the XAML for use in my WPF project. Works for most of my files, but some export the XAML plus a seperate png file. What can I do so that the png is embedded into the paths of my image and not a seperate image? Can it be done?
Checkout this page that describes converting raster graphics to vector and then XAML -
http://weblogs.asp.net/rrobbins/archive/2007/11/11/how-to-convert-raster-graphics-to-xaml.aspx
Another route that you could try is to use Expression Design to convert the .ai file.
(Please note that once you have Expression Design open, you need to create a new document before the File->Import menu item is even enabled.)
However, once you convert the .ai file with Expression Design, you will likely still have the problem of having some raster information in the .ai ... which as Terrapin already mentions is hard to convert to vector (and usually brings a high memory footprint to get even close to the quality of the raster image).
But to help you out there, Expression Design also comes with some ability to convert raster information into vector. If you select the image that you want to convert, just go to Object->Image->Auto Trace Image in order to convert it.
See this StackOverflow question for more info, but basically Microsoft allows you to download a trial that you can use for 90 days.
Hope that helps.
It sounds like the PNG that is generated is probably the raster part of your AI file, and it can't be converted to vector graphics. Are you importing PNGs, or JPGs, or another raster graphic into your AI file?
To convert raster images to vectorial images, I found Inkscape (free) to do an excellent job (comparable to VectorMagic, which is not free anymore by the way).
In Inkscape, import your image and use the Path/Trace Bitmap function. It has a lot of control.
Once you converted to a vectorial image, save it as a SVG. Then, using ViewerSvg, you can convert to XAML vector data. (Path & Canvas)