<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Travis Dunn &#187; Reference</title>
	<atom:link href="http://www.travisdunn.com/tag/reference/feed" rel="self" type="application/rss+xml" />
	<link>http://www.travisdunn.com</link>
	<description>There is neither speech nor language but their voice is heard among them</description>
	<lastBuildDate>Tue, 26 Jan 2010 19:47:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>iPhone Guidelines and Resources for Artists</title>
		<link>http://www.travisdunn.com/iphone-guidelines-and-resources-for-artists</link>
		<comments>http://www.travisdunn.com/iphone-guidelines-and-resources-for-artists#comments</comments>
		<pubDate>Tue, 28 Jul 2009 20:37:12 +0000</pubDate>
		<dc:creator>Travis</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Reference]]></category>

		<guid isPermaLink="false">http://www.travisdunn.com/?p=235</guid>
		<description><![CDATA[I compiled a summary guide for artists working with the iPhone and its own brand of specs and constraints. ]]></description>
			<content:encoded><![CDATA[<h4>The Basics</h4>
<p>Screen Resolution: <em>320&#215;480 (or 480&#215;320 landscape mode)</em><br />
Colors: <em>262,144</em><br />
Resolution: <em>160 dpi</em><br />
Contrast: <em>use higher contrast than normal for art on the iPhone screen</em><br />
Preferred Graphics Format: <em>.PNG</em></p>
<p>Fairlady Media has a great instructional post covering a variety of topics about creating iPhone graphics: <a href="http://fairladymedia.com/node/10" target="_blank">http://fairladymedia.com/node/10</a></p>
<h4>Application Logo and Icon</h4>
<p>In order to distribute an application in the App Store, Apple requires two main  graphics:</p>
<p>(1) <em>A large 512&#215;512 logo, and;</em></p>
<p>(2) <em>a smaller 57&#215;57 version of the same.</em></p>
<p>The small logo must resemble the large logo, although there can be minor differences in perspective and detail, or the application may be rejected for inconsistent logo design. The 512&#215;512 logo is what people see when they are browsing iTunes, while the 57&#215;57 logo will be the application&#8217;s icon on the iPhone itself.</p>
<p>The App Store and the iPhone will apply additional effects to the app logos by rounding the corners and applying a light gloss. One of the tasks when designing a logo is to ensure that it will look good with the iPhone effects applied.</p>
<p><span class="post-author vcard"><span class="fn">Jeff Lange has published a photoshop action that does exactly that: <a href="http://www.collegekidapp.com/2009/06/iphone-icon-photoshop-action.html" target="_blank">http://www.collegekidapp.com/2009/06/iphone-icon-photoshop-action.html</a></span></span></p>
<p><span class="post-author vcard"><span class="fn">Robert Banagale also published a similar macro here: <a href="http://banagale.com/iphone-developer-resource-preview-application-icon-3d-effect.htm" target="_blank">http://banagale.com/iphone-developer-resource-preview-application-icon-3d-effect.htm</a><br />
</span></span></p>
<h4>The Tabbar</h4>
<p>The tabbar is a native UI element displayed at the bottom of the screen. Each tab button may contain text and an icon. The following guidelines apply for tabbar icons:</p>
<ul class="ul">
<li class="li">Use the PNG format.</li>
<li class="li">Sized 30&#215;30 (roughly &#8211; you have a little leeway, ~25-35)</li>
<li class="li">Use pure white with appropriate alpha</li>
<li class="li">Do not include a drop shadow.</li>
<li class="li">Use anti-aliasing.</li>
</ul>
<p>There&#8217;s a painstakingly informative <a href="(http://osmorphis.blogspot.com/2009/02/tab-bar-icons-part-1_4115.html" target="_blank">tutorial at Osmorphis</a> about the process of creating tabbar icons (<a href="http://tuts.suspendedstudios.com/2009/04/making-tab-bar-icons-for-iphone.html" target="_blank">summary here</a>), but the thing that deserves special attention is that the icons must be drawn in B&amp;W alpha, and in negative. The Osmorphis tutorial covers the steps on how do this pretty efficiently in Photoshop.</p>
<h4>Layout, Templates, Mockups</h4>
<p>The following PSDs contain templates and native iPhone UI elements that you can use as building blocks for your mock ups.</p>
<p>iPhone GUI PSD<br />
<a href="http://www.teehanlax.com/blog/?p=1628" target="_blank">http://www.teehanlax.com/blog/?p=1628</a></p>
<p>iPhone Kit<br />
<a href="http://andrewbadger.deviantart.com/art/iPhone-Kit-108089727" target="_blank">http://andrewbadger.deviantart.com/art/iPhone-Kit-108089727</a></p>
<p>Resizable iPhone Shell PSD<br />
<a href="http://twotoasters.com/index.php/2009/06/02/resizable-iphone-psd/" target="_blank">http://twotoasters.com/index.php/2009/06/02/resizable-iphone-psd/</a></p>
<h4>Fonts</h4>
<p>These are the standard iPhone system fonts available. It&#8217;s much harder than it should be to use a custom font on the iPhone.</p>
<p><em>American Typewriter, AppleGothic, Arial, Arial Rounded MT Bold, Arial Unicode MS, Courier, Courier New, DB LCD Temp, Georgia, Helvetica, Helvetica Neue, Hiragino Kaku Gothic ProN W3, Hiragino Kaku Gothic ProN W6, Marker Felt, STHeiti J, STHeiti K, STHeiti SC, STHeiti TC, Times New Roman, Trebuchet MS, Verdana, or Zapfino.</em></p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 9px; width: 1px; height: 1px;">Colors: 262,144</div>
]]></content:encoded>
			<wfw:commentRss>http://www.travisdunn.com/iphone-guidelines-and-resources-for-artists/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
