Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The 'Shop by Category' menu on the left is made of images and uses PNGs. The PNGs look fine at normal zoom but when I zoom out in FF and also on my Ipad white lines appear where the transparency begins.
I know PNGs can cause lots of headaches cross browser but this seems like a different issue. I havn't tested with other browsers.
Thanks
UPDATE - Does anyone know a link to a site where a PNG with transparency is shown over a background image or color? I want to see if this issue happens to other people in case its impossible to fix.
UPDATE2- I think this only happens on ipad and mac, but not pc.
UPDATE 3 - Here is a screen grab from firefox mac when Im zoomed out:
The problem is that your PNGs actually contain white.
Take a look at your PNG with its alpha channel removed
and compare it to this modified version with the alpha channel removed
Here is the modified version with alpha channel intact: - it looks the same as your file, but the transparent pixels are grey and transparent, not white and transparent. Try this version on your site and it should work.
To help you further, we'll need to know what software you are using to save the images. For example, in GIMP you have to make sure that you select "Save background color" when exporting the PNG, but other software may work differently.
Related
I imported a PNG of all of the textures I want to use in a mobile game and when I went into the sprite editor, I noticed that the edges of the sprites were "fading" into the transparent background - and the transparency changes throughout this "fade". Autodesk Sketchbook does something similar when I open the image in it, but GIMP, MS Paint, and Windows Photos don't. I was going to put pictures of what I'm talking about here, but Stack Overflow says I'm not allowed to yet. How can I fix the problem? Is there a setting in Unity that I can change so it doesn't add the "fade" or do I have to change the file format and import it again?
EDIT: I have created an Imgur album with pictures of my problem. Basically, Unity is blending the colors of the sprites and it's blending the alpha too. Also, I made the textures bigger at one point and that improved the problem, but didn't fix it completely. Here are the pictures: https://imgur.com/a/6HGm3fy
EDIT #2: First off, someone commented trying to explain what I was seeing in my imgur pictures and I asked how to fix the problem he was describing without realizing that you can't properly reply to comments, so I'm asking again, how can I fix it? Second, I just tried messing with anti-aliasing in the quality settings of my project and got this error: "Setting anti-aliasing of already created render texture is not supported!" I didn't think I had any render textures - just regular textures - but when I double-clicked the error, an unnamed render texture with an illegal size (55x110 pixels) showed up in my inspector. Changing its settings doesn't seem to do anything, but in the inspector, it still looks like it was changed. What am I seeing?
I just uploaded my first iPhone app. The app icon has a border, sort of like the "settings" icon. However, when I upload my large icon in iTunes connect, there are some weird white edges in the corners. It appears that they might use a smaller corner radius or something. How can I make sure it will display correctly on the apple store?
The image is a jpeg with no transparency.
Thanks for the help!
What's happening is the appstore is expecting a purely square 512x512 image. It then masks it to have rounded corners and then adds a drop shadow automatically.
If you want it to have a specific border like what you've designed you need to match their rounding exactly.
If you search around. there are PSD templates available that will help you design it (i.e. they have the exact mask that itunes uses).
Here's an example: http://www.pixelresort.com/blog/app-icon-template/
Another technique which can work really well is leaving the outer part of the icon square — in your case, the dark brown outer border would extend to the edge of the canvas – and let the roundrect mask handle the corners for you. There's a bit more info in this excellent blog post: All the sizes of iOS app icons
You'd still get the border effect, but let it be cut cleanly by the mask rather than by your icon's transparency.
I believe this to be a bug with iTunes Connect. I've seen the same problem, but it only appears on the Versions summary screen.
I've seen this when uploading a square icon. For example:
In summary, don't worry about it. Your icon should still show up correctly in the iTunes Store and on the Devices themselves. If your icon looked clean in the iOS Simulator and on your device, you're good to go.
I'm developing an iPad application. I have been provided with a PNG image that contains some transparency - basically a drop shadow. The problem I'm having is that this is rendering poorly within the application, both on the device and in the sim.
I've made up some samples to illustrate. The first is how the image appears in the PSD (correctly that is). The second is how it appears on the device. You can see that the strip of shadow in the middle of the image is distinctly more yellow and poorly looking.
PDF http://www.aspyre.com.au/stackoverflow/photoshop.png On Device http://www.aspyre.com.au/stackoverflow/device.png
Any ideas what I'm doing wrong?
Edit: Links to files:
- PNG
- PSD
Edit 2: I've also tried pngcrush to remove the gamma, in case that was causing a problem, but no luck. Directions I followed were here: pngcrush
The reason you're getting a colour in your shadow is because the PSD's shadow layer is set to Multiply and has a colour in it. When you export it without a background, Photoshop is unable to multiply it to anything and just uses the layer as is. You need to grab the selection of the shadow layer, create a new layer, and fill that selection with black. Then set that new layer's opacity to something that mimics the old shadow.
Also I recommend you use Save-For-Web if you don't already. The colour-profile you use isn't much of an issue then as it will be stripped. However the point is valid that you want to be in sRGB when making iPhone/iPad graphics.
Link to your PSD adjusted: PSD
Common mistakes:
Your color space is non-standard. Either use no color space, or specify sRGB (strongly preferred).
You didn't save the PNG with gamma information included.
Without access to the actual files we're grasping at straws.. Maybe you have an 8-bit instead of 24-bit png?
For your shadow, use black instead of gray. Then adjust the transparency. That should fix it.
I had a similar issue that I resolved by disabling compression for an image. This is done in XCode by removing the .png extension. You can disable png compression for an entire project by editing the 'Compress PNG Files' project setting, but it is not recommended.
More details about Xcode PNG compression: http://iphonedevelopment.blogspot.com/2008/10/iphone-optimized-pngs.html
I have a PNG file in a UIImageView, and next to that I have an EAGLView which displays the continuation of that same image (long story) as a texture, carved from the same original PNG. The point is, that these images, which should match up flawlessly, actually have somewhat differing color saturation.
Normally I'd blame my handling of the PNG texture load in GL, but when I hold Preview (with the PNG) up to the iPhone simulator, it's GL that's spot on, and the UIImageView that's wrong! It's taken the image and made it ever-so-slightly more saturated. The image view is opaque with 100% alpha.
I verified this on a clean UIImageView with another PNG file when put next to Preview.
Anyone know what's up?
If you are using Photoshop to save the png using the "Save for Web & Devices" tool, ensure the "Convert to sRGB" option is off and "Embed Color Profile" is also off. If you are using another editor, look for similar settings.
Read this, it will help explain better than I can.
I’ve been busy working on the graphics for my iPhone application. I started working on generating icons for my UITabBar and ran into lots of problems. How do you create these icons?
I created this solution:
http://www.nailrails.com/?p=46
Are there any shortcomings to this approach? It seemed to work for the few icons I created...
Apple's guidelines can be found at http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
The docs are pretty straightforward-- alpha is all that matters when the image gets loaded by the toolbar, meaning that anything that's not at least semitransparent will render in the same opaque shade. As for how I do that, I mainly use Adobe tools. Fireworks is my preferred tool but Photoshop's also more than up to it. Another one I've had good results with is Acorn, which is frankly a lot cheaper while being more than sophisticated enough for this kind of work. I'm not really a graphic designer but a certain familiarity with this kind of stuff goes with the job.
I have an article up on my site that shows how to use OmniGraffle with a template I use to create great iPhone toolbar icons in minutes:
http://steveweller.com/articles/toolbar-icons/
The template sets up a grid to work to that corresponds to one square for each pixel. You draw your icon in white on top of the black template background and then export as a PDF exactly the right area to match the icon size you need (typically 21 pixels high). Then you reimport the PDF, resize it to the final icon size (21 pixels again), and export as PNG. The template does nothing magical; it just provides an already set up working area and helps you get the final PNG right every time to the scale is correct.
You could use the same technique in Acorn or any other app that supports PDF export and layers.
(I use Gimp. Assume your icon layer already has alpha channel.)
Right click the layer, then add layer mask.
Done with option "transfer alpha channel of layer" chosen.
Select the whole layer (but not layer mask), and clear it with pure white.
Resize image to Apple-suggested size, and export it as png file.
You may also paint directly on the layer mask.