<?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>Comics! Games! Anthropology! &#187; webdesign</title>
	<atom:link href="http://keithcchan.com/tag/webdesign/feed" rel="self" type="application/rss+xml" />
	<link>http://keithcchan.com</link>
	<description>Wherein I Discuss Serious Matters</description>
	<lastBuildDate>Mon, 21 May 2012 15:00:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>The Making of an Icon, Part 2</title>
		<link>http://keithcchan.com/2012/05/the-making-of-an-icon-part-2.html</link>
		<comments>http://keithcchan.com/2012/05/the-making-of-an-icon-part-2.html#comments</comments>
		<pubDate>Wed, 16 May 2012 15:00:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[anthropology]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/?p=492</guid>
		<description><![CDATA[After I made the iOS icon, I thought that making an Android version of Anthropomotron would be a good idea as well. Coverting the code to work on Android was relatively painless. When I got to adding the icon, though, I saw that the Android icon design guidelines were very different from the Apple ones. [...]]]></description>
			<content:encoded><![CDATA[<p>After I made the iOS icon, I thought that making an Android version of Anthropomotron would be a good idea as well. Coverting the code to work on Android was relatively painless. When I got to adding the icon, though, I saw that the <a href="http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html">Android icon design guidelines</a> were very different from the Apple ones. In fact, some of the statements between them are complete opposites. Android icons should not be shiny and should use background transparency to make a unique shape. Apple icons should be shiny but have a square shape (which an algorithm will take and round the corners). </p>
<p>My conclusion was that I needed yet another new icon for the Droid version. Looking at their suggestions, they specifically do not want a cut-off object in the icon, so I went back to the full &#8216;A.&#8217; They didn&#8217;t want subtle gradients and shading so those were gone. To give the icon a unique shape, I made the blue background a smaller square than the rest of the elements, so the femur and calipers stick out from the top and bottom, using transparent areas:</p>
<p><img src="http://keithcchan.com/wordpress/wp-content/uploads/Anthropomotron-Icon-Android.jpg" alt="" title="Anthropomotron-Icon-(Android)" width="150" height="150" class="aligncenter size-full wp-image-493" /></p>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2012/05/the-making-of-an-icon-part-2.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Making of an Icon, Part 1</title>
		<link>http://keithcchan.com/2012/05/the-making-of-an-icon.html</link>
		<comments>http://keithcchan.com/2012/05/the-making-of-an-icon.html#comments</comments>
		<pubDate>Mon, 14 May 2012 15:00:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[anthropology]]></category>
		<category><![CDATA[anthropomotron]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/?p=484</guid>
		<description><![CDATA[When I made the original Mac-only Anthropomotron, I had to make its icon as well. Back then I thought it would be neat to make an &#8216;A&#8217; shape using a femur and calipers. The result was this: As I&#8217;ve said before, a lot has changed since 2004. Icons nowadays are even fancier and the old [...]]]></description>
			<content:encoded><![CDATA[<p>When I made the original Mac-only Anthropomotron, I had to make its icon as well. Back then I thought it would be neat to make an &#8216;A&#8217; shape using a femur and calipers. The result was this:</p>
<p style="text-align: center;"><img class="aligncenter  wp-image-485" title="Old Anthropomotron Icon" src="http://keithcchan.com/wordpress/wp-content/uploads/Calipers2-450x450.png" alt="" width="132" height="132" /></p>
<p>As I&#8217;ve <a href="http://keithcchan.com/2012/04/anthropomotron-is-back.html">said before</a>, a lot has changed since 2004. Icons nowadays are even fancier and the old Anthropomotron icon was barely acceptable even for that time. I decided that I would take another stab at making the Anthropomotron icon.</p>
<p>Apple has written <a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html">icon design guidelines</a> for iOS apps (and one for <a href="http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html">Mac icons</a>).<img class="alignright size-full wp-image-486" title="GenericApplication128" src="http://keithcchan.com/wordpress/wp-content/uploads/GenericApplication128.png" alt="" width="128" height="128" />They&#8217;re a fascinating read for those interested in graphic design. They emphasize a sort of shiny realism: realistic elements but simplified. I&#8217;ve also liked the generic Mac app icon, which also has an &#8216;A,&#8217; with a ruler as the crossbar. One of the things i didn&#8217;t like about the old Anthropomotron icon was that it didn&#8217;t look definitively like an &#8216;A.&#8217; It kind of looks like an &#8216;R.&#8217; For the new icon I decided to add a clearer crossbar, adding a ruler to the picture. I drew the concept and scanned it into Illustrator:</p>
<p style="text-align: center;"><img class="size-full wp-image-487 aligncenter" title="New Anthropomotron Icon Draft" src="http://keithcchan.com/wordpress/wp-content/uploads/New-Anthropomotron-Icon-Draft.png" alt="" width="150" height="153" /> I was happy that my drawing skills have improved since 2003. But, there are a few problems. While the proportions are realistic, the legs of the &#8216;A&#8217; are very thin. If the entire &#8216;A&#8217; is visible, the shapes become ambiguously small.</p>
<p><img class="aligncenter size-thumbnail wp-image-488" title="Anthropomotron-Icon-Mockup" src="http://keithcchan.com/wordpress/wp-content/uploads/Anthropomotron-Icon-Mockup-150x150.png" alt="" width="150" height="150" /></p>
<p>Also, I&#8217;m used to the comic art style, which has black outlines defining the shapes. That&#8217;s not realistic. I tried to solve these two issues by removing the outlines in Photoshop and zooming in the image so the ruler is along the bottom edge of the image:</p>
<p><img class="aligncenter size-thumbnail wp-image-489" title="Anthropomotron-Icon-Mockup-2" src="http://keithcchan.com/wordpress/wp-content/uploads/Anthropomotron-Icon-Mockup-2-150x150.png" alt="" width="150" height="150" /></p>
<p>I thought this was better, but it&#8217;s still missing something. It seemed to lose a lot of its &#8216;A&#8217;-ness in this alignment. A little frustrated, I grudgingly went to bed. After a few minutes of laying there, I bolted out of bed, fired up Photoshop again, and did this:</p>
<p><img src="http://keithcchan.com/wordpress/wp-content/uploads/Anthropomotron-Mockup-3.jpg" alt="" title="Anthropomotron-Mockup-3" width="150" height="150" class="aligncenter size-full wp-image-490" /></p>
<p>Tilting everything worked! I saved that, and slept like a baby. The next day I worked towards making the final draft of the icon. I made the blue and yellow match the actual colors in the app. Then I added some textures to the three elements (wood, metal, and actual femur texture), and some gradients and shading for depth. This is the final Anthropomotron icon for iOS:</p>
<p><img src="http://keithcchan.com/wordpress/wp-content/uploads/Anthropomotron-Icon.jpg" alt="" title="Anthropomotron-Icon-iOS" width="150" height="150" class="aligncenter size-full wp-image-491" /></p>
<p>Next: a step backwards for the Android icon!</p>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2012/05/the-making-of-an-icon.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Welcome to My New Home</title>
		<link>http://keithcchan.com/2010/02/welcome-to-my-new-home.html</link>
		<comments>http://keithcchan.com/2010/02/welcome-to-my-new-home.html#comments</comments>
		<pubDate>Sun, 28 Feb 2010 05:24:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[blogging]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/2010/02/welcome-to-my-new-home.html</guid>
		<description><![CDATA[On a late night whim I decided to make WordPress my blogmaker of choice. There was some messing around with my htaccess file so links to the old blog will automatically come here. I believe that was successful. If anything goes horribly wrong, please let me know!]]></description>
			<content:encoded><![CDATA[<p>On a late night whim I decided to make WordPress my blogmaker of choice. There was some messing around with my htaccess file so links to the old blog will automatically come here. I believe that was successful. If anything goes horribly wrong, please let me know!</p>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2010/02/welcome-to-my-new-home.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I&#8217;m Trying to Make My Photos More Visible</title>
		<link>http://keithcchan.com/2009/07/scriptless-flickr-badge.html</link>
		<comments>http://keithcchan.com/2009/07/scriptless-flickr-badge.html#comments</comments>
		<pubDate>Wed, 01 Jul 2009 23:16:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[photos]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/wordpress/2009/07/im-trying-to-make-my-photos-more-visible.html</guid>
		<description><![CDATA[One thing bad about the Flickr badge on the sidebar is that it&#8217;s tiny and easy to miss. I&#8217;m considering making Flickr badges to show off photos as I upload them. I&#8217;m starting with these photos from the Parque de las Leyendas because they&#8217;re cool, and I&#8217;m still experimenting with badge technology. If you missed [...]]]></description>
			<content:encoded><![CDATA[<p>One thing bad about the Flickr badge on the sidebar is that it&#8217;s tiny and easy to miss. I&#8217;m considering making Flickr badges to show off photos as I upload them. I&#8217;m starting with these photos from the Parque de las Leyendas because they&#8217;re cool, and I&#8217;m still experimenting with badge technology. If you missed out on these, enjoy!
<div></div>
<div><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_10"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_10_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_20"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_20_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_30"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_30_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_40"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_40_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_50"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_50_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_60"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_60_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_70"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_70_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_80"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_80_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_90"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_90_t.jpg" alt="Scriptless Flickr Badge" /></a><a href="http://flickrbadge.theducky.com/set/link/41673771@N00/72157618757006057_0_100"><img src="http://flickrbadge.theducky.com/set/photo/41673771@N00/72157618757006057_0_100_t.jpg" alt="Scriptless Flickr Badge" /></a></div>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2009/07/scriptless-flickr-badge.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Oh Ya&#8230;</title>
		<link>http://keithcchan.com/2008/11/oh-ya.html</link>
		<comments>http://keithcchan.com/2008/11/oh-ya.html#comments</comments>
		<pubDate>Tue, 04 Nov 2008 01:07:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[comics]]></category>
		<category><![CDATA[24hourcomics]]></category>
		<category><![CDATA[photos]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/wordpress/2008/11/oh-ya.html</guid>
		<description><![CDATA[I have photos from 24 Hour Comics Day and other stuff on my Flickr. The new Flash Flickr thing is cool, but kinda small so it&#8217;s hard to see when new things show up. Also, I keep portraits and other pictures featuring just people behind a privacy barrier. You can see them if you&#8217;re a [...]]]></description>
			<content:encoded><![CDATA[<p>I have photos from 24 Hour Comics Day and other stuff on <a href="http://www.flickr.com/photos/keithcchan/">my Flickr</a>. The new Flash Flickr thing is cool, but kinda small so it&#8217;s hard to see when new things show up.</p>
<p>Also, I keep portraits and other pictures featuring just people behind a privacy barrier. You can see them if you&#8217;re a Flickr buddy of mine.</p>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2008/11/oh-ya.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I&#8217;m Officially a Twit</title>
		<link>http://keithcchan.com/2008/08/im-officially-twit.html</link>
		<comments>http://keithcchan.com/2008/08/im-officially-twit.html#comments</comments>
		<pubDate>Fri, 08 Aug 2008 23:43:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://keithcchan.com/wordpress/2008/08/im-officially-a-twit.html</guid>
		<description><![CDATA[I scoffed at Twitter and microblogging. Scoffed! Then I realized it&#8217;s kind of cool and tried it out for a month. Now I&#8217;ve gone the next step and integrated it with both my blog and my Facebook status. It clearly is the wave of the future. For thoroughness, here&#8217;s a link to keep track of [...]]]></description>
			<content:encoded><![CDATA[<p>I scoffed at <a href="http://twitter.com/home">Twitter</a> and <a href="http://en.wikipedia.org/wiki/Micro-blogging">microblogging</a>. Scoffed! Then I realized it&#8217;s kind of cool and tried it out for a month. Now I&#8217;ve gone the next step and integrated it with both my blog and my Facebook status. It clearly is the wave of the future. For thoroughness, here&#8217;s a link to <a href="http://twitter.com/chekeichan">keep track of my tweets</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://keithcchan.com/2008/08/im-officially-twit.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

