Now that we’ve gotten familiarized with putting a basic HTML document together, now things should start getting more fun, because we’re going to start filling such documents with content. We’ve learned how to put images into our HTML documents, but since we don’t want to just build a website where we rip off other people’s image content (since in most instances that is downright illegal! That just won’t do, you know, assuming you want to show your website off at some point.), we’re going to want something that will allow us to digitally edit, customize, and even create images. We COULD use Photoshop, but that is so, what’s the word? That’s right: EXPENSIVE! And in this class my goal is to introduce you to quality FREE software, because it isn’t always easy to find something with that price tag that is quality. GIMP is definitely quality, and you can do almost anything you can do in Photoshop with the software package. So let’s get started…
First and foremost you need to download GIMP:
Here are some reference docs/videos that might help you if you get stuck trying to run the software:
Getting Started with GIMP:
http://docs.gimp.org/en/getting-started.html
Installing GIMP on Windows 6 and 7:
https://www.youtube.com/watch?v=QewBtpplRzA
First I’d ask you to play around with it. I recommend you do this before doing anything else. See if you can use the pencil or paintbrush tool to draw a stick figure, or use the text tool, and see if you can get some witty saying to display. Maybe something like “Prof Anderson is incredible! He would be an incredible MTV VJ.” Do they still have MTV VJs? I digress…
Back to reality: What are some things you might do in an image editor? Well maybe you, as a budding scholar, want to write some commentary on a documentary film, and you want to customize and display some images to put said commentary into proper context? Surprise alert: That is exactly what you’ll be doing for the homework due during our next Tuesday class meeting.
HOMEWORK ASSIGNMENT:
Watch Downloaded, perhaps Bill S. Preston Esquire’s cinematic swan song…
http://on.aol.com/video/downloaded—full-documentary-film-517844258
You need to find 3 scenes from this film that you feel you can write some commentary on. Take 3 screenshots, size each screenshot at a width of 640 pixels and a height of 360 pixels, put the images into an html document, and beneath each screenshot write 200 words (600 words in total), and e-mail me the document and the images.
There are a lot of ways to take a screenshot on your computer. I’m on a Mac at home, so I can literally just hit [COMMAND]+[SHIFT]+[4]. There are different techniques on Windows and Linux. For the sake of getting you familiarized with GIMP, I’d ask you try to take a screenshot with this program.
Once you have GIMP open just go up to the top of your screen, find FILE, and beneath file you should see CREATE>, when you move your mouse over the word CREATE> you should see a SCREENSHOT option. Move your mouse to SCREENSHOT and click. You should have the video you are watching open at this point (Downloaded in the context of this class), and select “Select a region to grab”. Now you should be able to hold your left mouse button down, or click your trackpad and hold, and you can select the video screen and let go when you’ve created a box around the image that you want to capture.
Note that my version of Gimp will almost certainly look slightly different than yours, as it is a customized version.
The image will now appear automatically in your GIMP editor window. Now go back to the top of your computer screen and select the IMAGE option on the top toolbar. Underneath you will see the CANVAS SIZE option. Click this and in the WIDTH box write 640 and in the HEIGHT box write 360.
Now your canvas is the correct size, but your image… well… isn’t! Well we can fix that. Right click on the image and find the option TOOLS and hover your mouse over this option now move your cursor slightly to the right and select TRANSFORM TOOLS and now once again move your cursor to the right and select the SCALE tool. Now make sure the four large squares that appear around your image touch the corners of the canvas. Now in the SCALE interface window that should have appeared hit the SCALE button. TA DA! You now have an image that has the required dimensions.
See the 8 bigger boxes surrounding the square? Click and drag those with your mouse to resize the image.
Now you need to save your image. Go to FILE > EXPORT AS. Save each image with an extension (the three letters that follow the period in the file name) and write .png.
Now you should have an image that you can use your most non-heinously honed HTML skills to include in your HTML document (Remember make sure that whatever folder you store your image in, you store your html image in that same folder, or else your image will not show up (easily) when you are previewing your work before submission.
EXCELLENT!
So that’s it! Again we’ll be going over this in class, but remember if you have any trouble JUST E-MAIL ME! And I’ll walk you through the issues.
BONUS: Anyone that was enjoying the snippets of the Mailer v. Mcluhan video in class here is a link to the full video:
