HTMLGoodies
The ultimate html resource
Earthweb.com


About the Double-Underlined Links


Become a Partner




Search Clipart.com:



internet.commerce















HTML Goodies : Primers : Banner Primers: Basic HTML: Banners: Cropping An Image

HTML GOODIES TO GO NEWSLETTER


Other Related Newsletters

Basic HTML: Banners: Cropping An Image


By Joe Burns

(with updates by editorial staff)

Use these to jump around or read it all
Cropping An Image
Crop It!
How We Do It

 


Cropping An Image

What we are going to do here is take the movie ticket image and cut it into two images. In technical terms, we will crop out two sections. First, you need the image. Click on the ticket below to get it all by itself, then save it by choosing "SAVE AS" from your browser's FILE menu.

Make sure you save the image in the same directory as you saved the image you made in Banner Primer #2. In fact, make sure you save all the images you make during these primers in the same directory.

Crop It!

Crop me? Crop you! (Sorry -- easy joke). This is so easy you won't believe it. What we are going to do is turn that ticket image above into two images that look like this:

               


How We Do It...

First off, open the ticket1.gif image you just downloaded by choosing "Open..." from under the FILE menu in PSP, as shown to the right. It should be sitting there waiting for you in the same directory where you saved your first image. Choose the image by clicking on it twice. It should open up in the PSP window.

     Now let's put PSP in the crop mode. Look at the screen. There should be a little button that looks like this: . Click on it. Now you have placed PSP in the mode to crop out a section of the picture.

Once the crop button is clicked, place your mouse pointer over top of the ticket1.gif image. The pointer should change into this:

Do this: Put the cross in the upper left-hand corner of the image. Left click and hold, then drag the mouse down and to the right. See the box forming? Try to cut the ticket perfectly in half. Once you have one half of the image set aside, let go of the mouse button. Now the box will become a dotted line. It should look like this:

 

Got that? Good! Now let's perform the actual cropping. Look again at the top of the PSP window. There should be a menu called IMAGE. Click on it. A few commands down, you should see "Crop." It looks like the item at right.

     Once you choose Crop, you should now get this:

How about that, huh? Now, follow the same instructions as above and save that half image as "leftticket.gif". After you've saved that new image, close it by clicking on the grey X in the left-hand corner of the image -- not on the PSP program, but the X on the image.

Open the ticket1.gif image again and perform another crop, only this time crop the right side of the image and save it as "rightticket.gif". Do your darndest to get the crop line in the same place as the last one. I did it by making the crop follow the left vertical line of the "M" in the word "Admit."

You now have the the ticket images you'll need to animate the ticket opening up.


Done For The Day!

Now you can crop with the best of them. I use this function constantly. It is a very basic image creation. But there's also importing images. Thus we move on...

Use these to jump around or read it all
Cropping An Image
Crop It!
How We Do It

Tools:
Add htmlgoodies.com to your favorites
Add htmlgoodies.com to your browser search box
IE 7 | Firefox 2.0 | Firefox 1.5.x
Receive news via our XML/RSS feed

IT Management Networking & Communications Web Development Hardware & Systems Software Development Earthwebnews.com

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V
Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware
Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
  PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES