How to use free tab bar icon images as bar button image? - ios

I got some free image icons for iOS, for example, http://glyphish.com/
but I think these images is for tab bar icons, not for bar button images. I used these images to bar button, but it isn't good to look due to alphas in image. Pure-white image is needed for bar button image.
Is there any good images for bar button?
or, how can I edit image to use in bar button image? I'm not familiar to graphics tools like photoshop.
or, can I use images by changing bar button properties? I think if images can be inverted, it'll be better.

Assuming you are developing an HTML/CSS/Javascript app - have you looked at Jquery Mobile?
You can use their standard bar icons, which are white with alpha background - see the JQM-docs on button icons here.
So regarding your questions:
1) Yes, you can for example stick with the custom icons provided by frameworks
2) You can always draw your own icons in Photoshop or (I prefer) Inkscape (free & easier). I did this in Inkscape for example. Works nicely in Jquery Mobile.
3) Inverting images - if you are talking about using an image as a "mask" - you can only do this on Webkit browsers using the -webkit-mask-image property without changing the icon (example: here. If you need this across different devices, you have to cut out icons from a background-image. I did this in my cross-browser tab-bar

Related

Is there a correct way to tint PDF icons for iOS?

I'm a UX designer - so bear with me. We have an issue where we want to use PDF files as icons for our iOS app. This works fine if we were to only use them in one color. However we have situations where we need to change the color based on the BG they are used on.
The issue is that we are not able to tint the PDFs - they remain white.
The icons are all made in Figma and are used for web / android and iOS. They work perfectly as SVGs and are flattened - so that should not be the issue. Might it have something to do with the way PDF exports work from Figma perhaps?
To tint the PDFs we use renderingMode(_:) which does not seem to actually tint our PDF icons. It works for PNGs, which of course is not optimal as the icons turn out very grainy.
Here is an example of the code used:
SwiftUI.Image.init(uiImage: uiImage)
.renderingMode(.template)
.foregroundColor(label.tintColor)
Here is an example SVG & PDF from the icons that do not work:
Icons from Wetransfer

UITabBar Image is not clear

I just recently got a new set of icons for my app (from an external designer) and I am trying to implement them, but for some reason it ends up looking like this (the new icon is the one in the middle):
I have tried setting the image of the tab bar to have UIImageRenderingModeAlwaysOriginal, but that's given me no luck.
Here's the icon (it kind of blends into the background but its a white envelope):
Any reason why this is happening and how I can fix?
The problem is that the entirety of your image is opaque - at least part of it needs to be transparent to appear as you want it to.
In the below image (since the entire thing is white now, it's directly below this text), I have removed the black line and made that transparent. I then added this image to a tab bar, and it worked fine for me.
Here's the link to the image, as well.
What I ended up doing was setting using UIImageRenderingModeAlwaysOriginal for the tabbar image in the awakeFromNib method...that seemed to fix the issue.

Change Background Color For Images.xcassets Images?

I would like to change the background color of the editors preview of added images. All my images I get from the art team are white. Can I set the background preview of the Images.xcassess screen to be black somewhere?
I dont want to set the default tint of these images to non-white.
There is a plug-in for Xcode which take care of that pretty nicely...
TOCAssetCatalogBackground:
https://github.com/toco/TOCAssetCatalogBackground
recommend to install and look for it via Alcatraz - Very simple & very easy.

Tab Bar application inside a Navigation-based application

I'm developing an application which is designed to hold lots of instances of the same thing.
For example, amateur football teams can sign up and add their information to the app, and then browse through navigation controller/table-views to find their team amongst other teams.
Selecting a team would then open an instance of a view which would be tab-bar based.
The issue I'm having is the displaying of the tab bar icons. Other than that, it works perfectly.
There isn't any code involved, so my I can only really use images to explain.
Unfortunately I can't post images yet and can only post 2 links
Please look at the links:
http://s28.postimg.org/nxk8r1vst/IMG_3954.png
http://s28.postimg.org/6j00irynx/IMG_3955.png
When the tab-bar view is first opened in 1, you can see the icons aren't displayed correctly - the current tab is white tinted, the text of the other tab is default but the icon is white tinted. In links 2 and 3 they are highlighting and dimming properly BUT not picking up image tinting at all - i had set image tint to red to test it.
Image 4 is my storyboard for this. Doesn't seem to be anything wrong, as I said the navigation all works fine.
Apologies if this question isn't formatted properly. I haven't been able to find any answers and could really do with some suggestions.
Thanks
Are you sure you use the images for the UITabBar in correct format:
It should be in png format and in the following size:
About 50 x 50 pixels (96 x 64 pixels maximum)
About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution
Also the image should be white on transparent.
I'm almost positive that goes against an apple design directive.
Don't you mean several NavigationControllers one under each tab of a TabBarController i.e. NavigationControllers inside TabBarControllers and not the other way around?
By the images it looks like they are separate navigation controllers under distinct tabs

Where to find glossy background images for UIButton?

I want to have a glossy button in my iPhone app (in the style of the black toolbar). However, as you all know, those are not included in the SDK.
So I wonder if anyone knows where to get ready to use button images.
I have of course googled for that, but I could not find any useful graphics. My requirements to button graphics are:
should match Apple's style used in the black toolbar / titlebar
should have resolution high enough for retina devices
should be available for commercial use (does not need to be free)
I have also taken a look at some programmatic solutions like Michael Heyeck's Shiny Red Buttons which are quite well done. However I would prefer to have a simple png file to use as a button background image.
You can try the link here - it might help .

Resources