I am developing an universal Windows 10 App. My problem: In the list "All Apps" on Windows 10 Desktop (Build 10586) is the app icon verry blurry. Also there is a border in the system color around it. I provided for the Square44x44.png the scales 100, 125, 150, 200, 400 and the targetsizes 24, 32, 40 and 48 (all unplated). The Icon in the app list has the dimensions 32x32 so I thought, windows uses the targetsize-32 icon. But it looks like a bigger resolution is downsampled with a very bad algorithm. The Icon in the Taskbar shows sharp and without any border.
Use a high resolution, square image as base image for generating icons and splashes to get better result. I use UWP Tile Generator extension myself. Also there is UWP Visual Assets Generator extension that I did not check yet. Also try to design your icon with suitable thickness, it help to have less blurry effect in sizing.
To get an icon with no border set a background color suitable for your app in Package.appxmanifest, it's transparent by default.
If you did not yet, take a look at Guidelines for tile and icon assets.
Related
I have a logo with a blue background, I've picked the colour via Chrome inspector (matches Firefox colour picker as well), yet on mobile the logo stands out on the background.
What's going on/how can I prevent this?
Why you see another color on another display?
That logo has at least 5 colors in the background. That's the reason you can not match it.
Your monitor and mobile displays are not accurate, and it seems your contrast and brightness of the screen are not correct. In the professional photography and video editing, they call it color blind.
That's the reason professional designers do not use consumer monitors.
If you are a designer you need to have color accurate monitor and you need to calibrate it.
If you want to keep working on the current monitor at least change your monitor brightness, contrast and color settings, close to the natural settings.
What is the software solution?
Get the logo in SVG, PSD or PNG file from the designer. SVG files are better because they are vector files that you can open it with free software like Inkscape. Change whatever you like and export it to the PNG.
If your logo is a text like what you have here, Search font by image and recreate it with Inkscape. The logo you mentioned here seems to be two fonts. Clinica Pro and Sixta. and both of them are not free font.
You can remove the background using Gimp, Layer > Color to Transparency > Color to Alpha, and select background color.
Useful links:
Changing Background Color
Making the background of an image transparent in Gimp
Anyway, I did remove the background from that logo for you (Transparent Background):
In some application icon on store windows disappear, only gray background are shown (as shown in this link: https://drive.google.com/open?id=0B4oRSWSS0hKDOVZNNjhRNlR1LUk)
Whereas once downloaded and installed, the start screen wide screen (310x150) and other icons can be displayed in windows 8.1.
Icon that I use: https://drive.google.com/open?id=0B4oRSWSS0hKDNlNaQ290b3RmTE0
How to handle it?
I also had a problem where inside Windows Store, empty gray logo was displayed instead of the one I set inside App Manifest as a wide logo. Gray logo was only visible inside the Store, but once downloaded and pinned to the start, wide logo was displayed without problems. I also noticed problems were only inside Store on Surface 1, but not on PCs and Surface 3.
The solutions seems to be to set images for all scales. So open Package.appxmanifest > Visual Assets > Wide 310x150 Logo and under Scaled Assets, set all four sizes. Then you have to create new App Package and update your submission with it on Windows Dev Center.
Hopefully this works for you as well.
I had the same problem on the Windows Store on Windows Phone 8.1. It had nothing to do with the Package.appxmanifest > Visual Assets, since all the icons were filled and uploaded. Solution: When submitting the app to the Store, go to Description > App Tile Icon for Windows Phone 8.1 and upload a 300x300 icon.
I got pictures in the isolated storage and i want to display them as well as the WINDOWS PHONE APP does.
I would like to reproduce the same effect that the Windows phone app does when you open the camera roll and you scroll through the images..
I find it particularly difficult because of the image orientation (horizontal and the vertical ones). I fit the vertical ones, but as soon as there are an horizontal picture any fit procedure fails!
Example?
thank you
Take a look at the MediaViewer class in the Silverlight Basic Lens sample. http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b
My Chrome Packaged App has 3 icon sizes for the moment: 16x16, 48x48 and 128x128. But I haven't find any information about a 256x256 icon for retina displays like Chromebook Pixel or rMBP.
I haven't these computers so I cannot test, did someone know if Chrome use a big icon format when you launch a Chrome Packaged App on a high-resolution display?
Thanks for your help.
If you put a 256x256 icon in your manifest, Chrome will make use of it wherever necessary. When Chrome creates icons for the app in the operating system's menu, it will store the full resolution icon, so it will be up to the operating system to decide when to use them.
To the best of my knowledge:
On Windows, you will hardly ever see it, but if you create a Desktop icon, then set the Desktop to show "Extra Large" icons, you will see it. (I don't know why anyone would ever do that.)
On Mac, the dock can be set to show a large icon when the user mouses over, and on a retina display it probably uses the 256x256 icon (but I haven't tested this).
On a Chromebook, I don't think the icons are ever shown big enough that the 256x256 icon would be useful, even on a high-res display. However, this may change in the future, so it is always good to supply an icon in as high resolution as possible.
So in summary, it is worthwhile making a 256x256 icon if it's not too much trouble, because it will be used in some situations. But an ordinary user will probably not see it very often.
In documentation stated that it is enough to keep the only WXGA splashscreen file and it will be scaled by windows Phone OS automatically.
To display a splash screen for all resolutions, use a single image
file named SplashScreenImage.jpg that is 768 × 1280. The phone
automatically scales the image to the correct size.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx#BKMK_Splashscreens
But when I'm using the only file no scaling occurs. I still could see black line on the top of the phone during app start.
Sample here:
https://dl.dropboxusercontent.com/u/19503836/SplashSample.zip
Thanks for any suggestions
You'll notice that it says "scale" and not stretch - which is exactly what's happening. Windows Phone 8 supports 3 resolutions (so far)...
480x800 (15:9)
720x1280 (16:9)
768x1280 (15:9)
You'll notice that the aspect ratio of #1 and #3 are the same, but #2 is different - and that's the problem.
For an image to fit all resolutions it would have to be stretched, which would look very bad so Windows Phone 8 doesn't do that. Instead, it scales the image to fit the screen but a black/white bar appears at the top of screen for #2.
The only way to avoid the black/white bar at the top of the screen is to create 3 separate splash screen and specify them in the WP8 manifest file.
Note: Making your app work and look correct at multiple resolutions is what every app developer should do. All the major platforms (iOS, Android, Windows 8, etc) support multiple screen sizes and/or resolutions so creating multiple icons sizes, splash screen sizes, background images, and other assets is part of the jobs.
I don't think a "splashscreen.jpg" is a good choice in wp8 any longer, even the templates of sdk doesn't have one.
The reason is if the firts page of your app is massive and your have a splashScreen, you may find your screen blink when starting.
So I would add a blank page and set it as the first page. Also you can add your "Splashscreen" Image here.