<?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>Urbano&#039;s Blog &#187; Graphic Design</title>
	<atom:link href="http://urbanoalvarez.es/blog/category/graphics/feed/" rel="self" type="application/rss+xml" />
	<link>http://urbanoalvarez.es/blog</link>
	<description>Words from Alejandro U. Alvarez</description>
	<lastBuildDate>Tue, 01 Jun 2010 14:30:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>iPhone web development [Part 2]</title>
		<link>http://urbanoalvarez.es/blog/2010/05/21/iphone-web-development-part-2/</link>
		<comments>http://urbanoalvarez.es/blog/2010/05/21/iphone-web-development-part-2/#comments</comments>
		<pubDate>Fri, 21 May 2010 13:40:49 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[detection]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[landscape]]></category>
		<category><![CDATA[orientation]]></category>
		<category><![CDATA[portrait]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=465</guid>
		<description><![CDATA[In part one of my tutorial on iPhone web development, we talked about the basic stuff (Recognizing iPhones or iPods, setting up special HTML and CSS tags... ) we will now move on to the really clever bit: Orientation detection.
For many sites, we may just have the same thing both on portrait and landscape. But  <a href="http://urbanoalvarez.es/blog/2010/05/21/iphone-web-development-part-2/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2010/05/21/iphone-web-development-part-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPhone web development [Part 1]</title>
		<link>http://urbanoalvarez.es/blog/2010/05/05/iphone-web-development-full-guide/</link>
		<comments>http://urbanoalvarez.es/blog/2010/05/05/iphone-web-development-full-guide/#comments</comments>
		<pubDate>Wed, 05 May 2010 20:33:15 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[compatible]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[ipod]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=425</guid>
		<description><![CDATA[Even if websites look great when seen on iPhones, having an iPhone-specific website improves a lot your site's usability, and in spite of what you may think, it doesn't take that long to develop it, here I will show all the necessary steps to develop a great site for iPhones, and making it look as  <a href="http://urbanoalvarez.es/blog/2010/05/05/iphone-web-development-full-guide/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2010/05/05/iphone-web-development-full-guide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fast and dirty CSS trick for IE</title>
		<link>http://urbanoalvarez.es/blog/2010/03/11/fast-and-dirty-css-trick-for-ie/</link>
		<comments>http://urbanoalvarez.es/blog/2010/03/11/fast-and-dirty-css-trick-for-ie/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 17:16:22 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[easy]]></category>
		<category><![CDATA[fast]]></category>
		<category><![CDATA[fix]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[trick]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=213</guid>
		<description><![CDATA[I actually think that we the developers need IE, it is like the bad guy in an action movie, the good guy wouldn't have a life without him, although sometimes you really wish it never existed! Haha just kidding, we all wish it didn't exist... But well, there are some times when we need something  <a href="http://urbanoalvarez.es/blog/2010/03/11/fast-and-dirty-css-trick-for-ie/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2010/03/11/fast-and-dirty-css-trick-for-ie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Our of the oven Flash Templates:</title>
		<link>http://urbanoalvarez.es/blog/2009/11/03/templates/</link>
		<comments>http://urbanoalvarez.es/blog/2009/11/03/templates/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 20:56:36 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[rotate]]></category>
		<category><![CDATA[tabs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=347</guid>
		<description><![CDATA[I was building a site for a relative new company a couple weeks ago, and they wanted "A professional looking, brilliant display" for their products, I know Flash, and can do decent stuff with it, but seriously, how long does it take to do something really cool?
So I headed to the only place where I  <a href="http://urbanoalvarez.es/blog/2009/11/03/templates/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2009/11/03/templates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Perfect jQuery UI rotating tabs</title>
		<link>http://urbanoalvarez.es/blog/2009/10/20/perfect-jquery-ui-rotating-tabs/</link>
		<comments>http://urbanoalvarez.es/blog/2009/10/20/perfect-jquery-ui-rotating-tabs/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 21:07:23 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[rotate]]></category>
		<category><![CDATA[tabs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=343</guid>
		<description><![CDATA[Tabs are nice. They create a very elegant interface, and jQuery UI does this marvelously, here we have a little preview of this:


How to do that?
Include the files
With jQuery and jQuery UI it is dead simple. First, load the JS libraries, I recommend using the hosted files at Google for jQuery:
&#160;
&#60;script src=&#34;http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;script src=&#34;path/to/jquery UI&#34;  <a href="http://urbanoalvarez.es/blog/2009/10/20/perfect-jquery-ui-rotating-tabs/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2009/10/20/perfect-jquery-ui-rotating-tabs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stylish CSS trick for your Website</title>
		<link>http://urbanoalvarez.es/blog/2009/10/19/stylish-css-trick-for-your-website/</link>
		<comments>http://urbanoalvarez.es/blog/2009/10/19/stylish-css-trick-for-your-website/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 16:11:31 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[elegant]]></category>
		<category><![CDATA[shadow]]></category>
		<category><![CDATA[stylish]]></category>
		<category><![CDATA[trick]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=338</guid>
		<description><![CDATA[Maybe a few of you noticed this on some websites, maybe some of you even use it.
Right now this works in Safari, Opera, and Konqueror and Firefox 3.x. (I think it doesn't work in Firefox 1 or 2, correct me if I'm wrong)
What I'm talking about is the text-shadow, wisely applied to your design, it  <a href="http://urbanoalvarez.es/blog/2009/10/19/stylish-css-trick-for-your-website/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2009/10/19/stylish-css-trick-for-your-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 New features &#8211; Interesting info ;)</title>
		<link>http://urbanoalvarez.es/blog/2009/06/11/css3-new-features-interesting-info/</link>
		<comments>http://urbanoalvarez.es/blog/2009/06/11/css3-new-features-interesting-info/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 20:21:49 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Layout/Styling]]></category>
		<category><![CDATA[Web-related]]></category>
		<category><![CDATA[corners]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[rounded]]></category>
		<category><![CDATA[transparency]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=290</guid>
		<description><![CDATA[Hello fellow developers,
I'm sure all of you have heard of the "new" CSS3 stuff, it's been around for a while now, and it certainly has some very interesting new features.
First, I'll review some of the things that were the hardest to develop, yet they looked so damn well:

Rounded corners - We all love them, but  <a href="http://urbanoalvarez.es/blog/2009/06/11/css3-new-features-interesting-info/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2009/06/11/css3-new-features-interesting-info/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating original website backgrounds</title>
		<link>http://urbanoalvarez.es/blog/2008/12/30/creating-original-website-backgrounds/</link>
		<comments>http://urbanoalvarez.es/blog/2008/12/30/creating-original-website-backgrounds/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 10:18:08 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Cool pics]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[fyre]]></category>
		<category><![CDATA[gimp]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=268</guid>
		<description><![CDATA[This tutorial is all about creating beautiful backgrounds for website with a modern/stylish look, have you ever wondered how those curved shapes were created? Here is a preview of one I created for this tutorial: 
The image is only 300x300px, I didn't want to make anything huge, since it was only a test. The program  <a href="http://urbanoalvarez.es/blog/2008/12/30/creating-original-website-backgrounds/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/12/30/creating-original-website-backgrounds/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>The future of the web</title>
		<link>http://urbanoalvarez.es/blog/2008/11/22/the-future-of-the-web/</link>
		<comments>http://urbanoalvarez.es/blog/2008/11/22/the-future-of-the-web/#comments</comments>
		<pubDate>Sat, 22 Nov 2008 14:37:16 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[General talk]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[future]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=258</guid>
		<description><![CDATA[I like to think from time to time of the future of the web. Being a web developer/designer myself, and working on every-day basis many times I just sit back and try to see where all this is going.
We can all surely appreciate the evolution of the last years, first with an increase in the  <a href="http://urbanoalvarez.es/blog/2008/11/22/the-future-of-the-web/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/11/22/the-future-of-the-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Apply a background image to an image</title>
		<link>http://urbanoalvarez.es/blog/2008/09/15/apply-a-background-image-to-an-image/</link>
		<comments>http://urbanoalvarez.es/blog/2008/09/15/apply-a-background-image-to-an-image/#comments</comments>
		<pubDate>Mon, 15 Sep 2008 11:58:47 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[display]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[image]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=249</guid>
		<description><![CDATA[this is quite a neat trick, and it can look really good depending on your design and the image you put as background...
To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:
&#160;
img&#123;
	display:block;
	padding:10px;
	background-image:url&#40;image.gif&#41;;
&#125;
&#160;
Here is a very smart use of this technique, where a  <a href="http://urbanoalvarez.es/blog/2008/09/15/apply-a-background-image-to-an-image/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/09/15/apply-a-background-image-to-an-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Urbano&#8217;s Blog redesign</title>
		<link>http://urbanoalvarez.es/blog/2008/09/09/urbanos-blog-redesign-2/</link>
		<comments>http://urbanoalvarez.es/blog/2008/09/09/urbanos-blog-redesign-2/#comments</comments>
		<pubDate>Tue, 09 Sep 2008 14:45:21 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[General talk]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[redesign]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/2008/09/09/urbanos-blog-redesign-2/</guid>
		<description><![CDATA[Well, after a while with this new design I felt the urge to redesign the whole thing. I am not changing the style, I'm quite comfortable with this idea of header / sidebar / footer style and I won't try to reinvent the wheel...
I will still go into "Grunge" kind of artwork and style, but  <a href="http://urbanoalvarez.es/blog/2008/09/09/urbanos-blog-redesign-2/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/09/09/urbanos-blog-redesign-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Create cool default avatars</title>
		<link>http://urbanoalvarez.es/blog/2008/08/29/create-cool-default-avatars/</link>
		<comments>http://urbanoalvarez.es/blog/2008/08/29/create-cool-default-avatars/#comments</comments>
		<pubDate>Fri, 29 Aug 2008 10:49:35 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Web-related]]></category>
		<category><![CDATA[avatar]]></category>
		<category><![CDATA[custom]]></category>
		<category><![CDATA[default]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/2008/08/29/create-cool-default-avatars/</guid>
		<description><![CDATA[If you are designing a website where users can register and have avatars, and you want them to have those cool "Human shape" avatars as default, well, here is how to do them  
This are some avatars I've created for my websites:



How to do this
I recommend using a small size, 100x100 is best for  <a href="http://urbanoalvarez.es/blog/2008/08/29/create-cool-default-avatars/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/08/29/create-cool-default-avatars/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Beautiful lighting effect in Photoshop</title>
		<link>http://urbanoalvarez.es/blog/2008/08/25/beautiful-lighting-effect-in-photoshop/</link>
		<comments>http://urbanoalvarez.es/blog/2008/08/25/beautiful-lighting-effect-in-photoshop/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 16:34:22 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[lighting]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=198</guid>
		<description><![CDATA[This is the effect we are aiming for:



Step 1
Let's get this started, so first create a new document. For the example I'm using a 500x500px document which I will then fill with black.
With a dark tone of purple/pink create a radial gradient around the center. It should look like this:



Step 2
Now we need to get  <a href="http://urbanoalvarez.es/blog/2008/08/25/beautiful-lighting-effect-in-photoshop/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/08/25/beautiful-lighting-effect-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Best unobtrusive anti-spam technique (Not CAPTCHA)</title>
		<link>http://urbanoalvarez.es/blog/2008/08/23/best-unobtrusive-anti-spam-technique-not-captcha/</link>
		<comments>http://urbanoalvarez.es/blog/2008/08/23/best-unobtrusive-anti-spam-technique-not-captcha/#comments</comments>
		<pubDate>Sat, 23 Aug 2008 22:38:36 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[anti]]></category>
		<category><![CDATA[captcha]]></category>
		<category><![CDATA[prevent]]></category>
		<category><![CDATA[spam]]></category>
		<category><![CDATA[thomas landauer]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/2008/08/23/best-unobtrusive-anti-spam-technique-not-captcha/</guid>
		<description><![CDATA[I know you are probably thinking that this will be some silly thing, but this idea that Thomas Landauer came up with is by far the best I've seen in a long time.
How does it work?
Well the idea is relatively simple: Add CSS-hidden fields that a user won't see, but a spam-bot will fill. Then  <a href="http://urbanoalvarez.es/blog/2008/08/23/best-unobtrusive-anti-spam-technique-not-captcha/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/08/23/best-unobtrusive-anti-spam-technique-not-captcha/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>GTA-like portraits in Photoshop</title>
		<link>http://urbanoalvarez.es/blog/2008/06/15/gta-like-portraits-in-photoshop/</link>
		<comments>http://urbanoalvarez.es/blog/2008/06/15/gta-like-portraits-in-photoshop/#comments</comments>
		<pubDate>Sun, 15 Jun 2008 11:06:48 +0000</pubDate>
		<dc:creator>alex</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[broken glass]]></category>
		<category><![CDATA[gta]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[portrait]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://urbanoalvarez.es/blog/?p=177</guid>
		<description><![CDATA[This is what you will achieve at the end of the tutorial:

Click to enlarge
The Tutorial
To start things up you'll need several things, first of course Photoshop, then look for a picture of yourself or a friend looking "GTA-style". I found this one in a friends' profile:

Click for full-res photo
Starting up
To start up, remove all background  <a href="http://urbanoalvarez.es/blog/2008/06/15/gta-like-portraits-in-photoshop/" class="more-link">More &#62;</a>]]></description>
		<wfw:commentRss>http://urbanoalvarez.es/blog/2008/06/15/gta-like-portraits-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 1.810 seconds -->
