<?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>Andrew's Home On The Web &#187; gimp introduction</title>
	<atom:link href="http://www.ahotw.com/tag/gimp-introduction/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ahotw.com</link>
	<description>A blog of my random adventures with technology.</description>
	<lastBuildDate>Sun, 27 Sep 2009 20:04:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>GIMP &#8211; Image Cropping for Web</title>
		<link>http://www.ahotw.com/2008/08/09/gimp-image-cropping-for-web/</link>
		<comments>http://www.ahotw.com/2008/08/09/gimp-image-cropping-for-web/#comments</comments>
		<pubDate>Sun, 10 Aug 2008 01:05:35 +0000</pubDate>
		<dc:creator>Andrew</dc:creator>
				<category><![CDATA[GIMP]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[gimp beginner]]></category>
		<category><![CDATA[gimp introduction]]></category>
		<category><![CDATA[gimp tutorial]]></category>
		<category><![CDATA[image cropping]]></category>

		<guid isPermaLink="false">http://www.ahotw.com/?p=34</guid>
		<description><![CDATA[After talking to some people, I&#8217;ve decided to write up some tutorials for using GIMP. At work, I use Ubuntu, so Photoshop isn&#8217;t really an option, but I need a way to prepare photos of products for our website. For many products, I not only crop down the photo to show just the product, but [...]]]></description>
			<content:encoded><![CDATA[<p>After talking to some people, I&#8217;ve decided to write up some tutorials for using <a href="http://www.gimp.org/">GIMP</a>.  At work, I use Ubuntu, so <a href="http://www.adobe.com/products/photoshop/index.html">Photoshop</a> isn&#8217;t really an option, but I need a way to prepare photos of products for our website.  For many products, I not only crop down the photo to show just the product, but I also remove the background from around the product using the path tool.  This first post will just focus on cropping down an image and preparing it for a website.</p>
<p><span id="more-34"></span><br />
<strong>GIMP Save for Web</strong><br />
The first step of this process is to grab the Save for Web plugin for GIMP.  If you are running Ubuntu, grab the .deb from <a href="http://www.alepe.com/about_computers/about_linux/save_for_the_web_in_gimp.html">here</a>.  Windows users and users of other Linux operating systems can grab it from <a href="http://registry.gimp.org/node/33">GIMP&#8217;s plugin site</a>.</p>
<p><strong>Image cropping</strong><br />
The first step is to open the image in GIMP.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop01.jpg" alt="" title="mousecrop01" width="500" height="279" class="alignnone size-full wp-image-38" /></p>
<p>Next, select the rectangle select tool.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop02.jpg" alt="" title="mousecrop02" width="450" height="255" class="alignright size-full wp-image-39" /></p>
<p>Make a selection around the part of the image that you want to crop out, you don&#8217;t have to be exact at this point, we will adjust later.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop03.jpg" alt="" title="mousecrop03" width="349" height="281" class="alignright size-full wp-image-40" /></p>
<p>To adjust the selection, move near any edge or corner.  The mouse will change to an adjusting handle, and you can proceed to drag to the desired size.  Unlike nearly any other image editing program, you do not need to be right on the line, rather anywhere in the box will work.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop04.jpg" alt="" title="mousecrop04" width="282" height="212" class="alignright size-full wp-image-41" /></p>
<p>Once you are happy with your selection, the next step is to crop the image down.  This is easily done by selecting &#8220;<u>C</u>rop to Selection&#8221; from the &#8220;<u>I</u>mage&#8221; menu.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop05.jpg" alt="" title="mousecrop05" width="487" height="262" class="alignnone size-full wp-image-42" /></p>
<p>You will be left with just the selected area.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop06.jpg" alt="" title="mousecrop06" width="500" height="425" class="alignnone size-full wp-image-43" /></p>
<p>This next step isn&#8217;t required, but now is the best time to introduce it.  You can easily zoom into the image using the handy zoom feature on the bottom left corner of the image window.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop07.jpg" alt="" title="mousecrop07" width="266" height="272" class="alignnone size-full wp-image-44" /></p>
<p>We are now ready to save the image for uploading to a website.  At this point, the image I&#8217;m working with is too large to upload as is, but otherwise it is ready.  We will now select &#8220;Save for Web&#8230;&#8221; from the &#8220;<u>F</u>ile&#8221; menu.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop08.jpg" alt="" title="mousecrop08" width="423" height="318" class="alignnone size-full wp-image-45" /></p>
<p>What we now see is the Save for Web window.  On the right of this window we see the image, as it will be saved.  Below that is the file size that it will be when saved.  To the left, we have options of the file type, along with other miscellaneous options.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop09.jpg" alt="" title="mousecrop09" width="500" height="325" class="alignnone size-full wp-image-46" /></p>
<p>The left side of this window has two tabs.  We are interested in the second one, which will allow us to resize the image.  Enter the width you desire and hit tab.  The preview image will change to that size, and the height will be updated to match.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop10.jpg" alt="" title="mousecrop10" width="200" height="231" class="alignnone size-full wp-image-47" /></p>
<p>Finally, when you are happy with the way it looks, hit the &#8220;<u>S</u>ave&#8221; button, and select where you want it saved.<br />
<img src="http://www.ahotw.com/wp-content/uploads/2008/08/mousecrop11.jpg" alt="" title="mousecrop11" width="500" height="326" class="alignnone size-full wp-image-48" /></p>
<p>A side note: You will notice the cropping options in the Save for Web window under the resize options.  I prefer not to use these, as when I save something, I have the size in mind that I want the saved image to be.  The cropping done in this tool takes place <strong>after</strong> the resize instead of before.</p>
<p>The next tutorial will teach you how to remove the background from around an object of any shape or size using the path tool.  If you would like to know how to do something in GIMP, leave a note in the comments and I&#8217;ll work on that for a future tutorial.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fwww.ahotw.com%2F2008%2F08%2F09%2Fgimp-image-cropping-for-web%2F&amp;linkname=GIMP%20%26%238211%3B%20Image%20Cropping%20for%20Web"><img src="http://www.ahotw.com/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.ahotw.com/2008/08/09/gimp-image-cropping-for-web/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

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