How do I replicate the effect that the app launcher uses on a square .png to show my users what their icon will look like as an app badge.
NB - I want to do this in code on the iPhone, not in photoshop on my computer.
Thanks!
edit: trying to be really clear here. How do I do this with code!
I have tried creating an overlay, but the shine apple does actually brightens the top, so just putting a png over the top will not give the same effect.
Presumably the app launcher applies some CA effects - does anyone know how to duplicate them???
Create a transparent shine overlay in Photoshop on your computer and merge the two images in code.
Short of hard-coding the shine mask, or building a mini ray-tracer, that's probably the easiest way to do it.
There's even a link to a photoshop tutorial/template here:
http://www.keepthewebweird.com/iphone-icon-psd-template/
Another more simple approach is to save your icon as a 57px x 57px PNG called "icon.png" without any shine effects, then FTP it to the root folder of a web server and create a file there called icon_test.html containing the following code:
<html>
<head>
<link rel="apple-touch-icon" href="/icon.png"/>
<title>The App Name</title>
</head>
<body>
iPhone test page
</body>
</html>
Then just browse to the icon_test.html file in mobile Safari on your iPhone, tap the "+" button in the toolbar to save the page as a bookmark, tap "Add to Home Screen", and tap "Add" in the top right. You'll then see your icon appear on the home screen, complete with Apple's shine overlay.
Related
I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.
maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.
There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.
Is there a way to make Top Bar background absolutely transparent? I'd like the page title to be visible along with buttons but make the rest completely invisible? Anything I can do with the appearance API?
that's something that i was looking into and it seems like it has to do with the meta tag in the beginning of the page
i found out that if your using
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
then you have a transparent background, only with white text and icons, there's no way to change it into black/dark text to fit into anyones CSS.
also you have an issue where the top of the page is right at the pixel line of the iOS 7 device.
which is retarded
i've been doing tests on here
I am using mathjax for loading the mathematical function, while i am loading the html content into the UIWebView some of the content color will br changed into blue color,
But i load the same html content into the browser means, it is displaying correctly
Please share if anyone have any idea about this issue,
Thanks in Advance...
In iOS, Webkit tries to recognize phone numbers and turn them into links. I'm wondering if your stacked fractions of small integers look like phone numbers to iOS. Are the blue ones acting as links, and if so, to what?
You can disable this phone-number-recognition feature by adding
<meta name="format-detection" content="telephone=no">
to the <head> of your document. Hope that takes care of it for you.
I am creating a new iphone apps using phonegap(cordova).I had one problem on my app.If i click anyone input field the iphone keyboard is popup and also whole page positon was changing. Like the fixed footer is popup above the keyboard.Please guide me.
Thank you
This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.
After much trial and error, I came up with this interesting solution:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}#media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!
Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.
IE9 has the concept of pinning a particular website to the Windows7 task bar. For certain sites (such as Facebook), it will then display an extra large favicon in the task bar, and also next to the back button.
How do I tell IE to do this for my site?
It's a bit late, but I found the answer above to be somewhat incomplete.
ico files can contain multiple images at the same time. So you can for example put a 16x16, a 24x24, and a 32x32 image inside a single ico file. This way IE can use the image with the most appropriate size. So it will use 16x16 inside the addressbar, the 32x32 for the taskbar (pin), and the 24x24 for next to the back button. If you want them to look better on hi-dpi screens you could use 64x64 instead of 32x32, and 48x48 in stead of 24x24.
You could even use different kinds of images instead of the same image in differently scales; so e.g. just the logo on the 16x16 and 24x24, but the logo and brandname on the 32x32.
One tool for creating such icons is the commandline application png2ico, or icoFx if you like a GUI.
Please read the following article
How to enable IE9 pinning and Jumplists
Create a High Definition Favicon
Standard favicon files are usually 32x32 or 16x16 pixels in size. These look great in the browser but when you pin it to the taskbar it can be a little small and pixilated.
To give the best pinning experience you should use a 64x64 favicon. I used http://www.favicon.co.uk/ to create a 64 x 64 icon file and then uploaded it to my site.
You then need to make sure you are using the new favicon by checking the tag is pointing at the new 64x64 fav.ico file.
Basically you now can create a larger favicon file, and IE9 will use it in the task bar. However, if you have a standard size favicon, IE9 will still use it.
An added benefit is that you can implement an awesome JumpList to enhance the visitors browsing experience.
Further reading: http://www.hanselman.com/blog/IE9SiteSpecificBrowsersAndAddingYourOwnJumpListItemsToPinnedTabs.aspx