LAB4 --- Advanced Image Processing and Beginning HTML

 

ADVANCED IMAGE EDITING

1.  Check out the Filters you can use in Photoshop.  I almost never use filters, except for the Sharpen filters which help when an image is a bit blurry. 

 

2.  Layers.  Layers are an incredibly central part to why Photoshop is so great.  You really need to understand how they work, but it is also the hardest part of Photoshop.  Layers allow you to have separate "image parts" that can be manipulated independently of one another.  Go to the Layer Window.  At the top of the window is a little circle with an

arrow pointing right.  Select this arrow and when the menu comes up, select New Layer.  Try cutting and pasting from your current image or another image into the New Layer.  Spend some time “playing” with layer options both in the Layer Tool and under “Layers” in the menu of Photoshop.  Don’t worry if you don’t “get” layers fully. 

 

3.  You are going to make an animated GIF of an animal flying or moving.  To do this, you are going to basically treat each layer like a frame of a movie.  Here are the step to do this:

a. Find an object you want to animate.  Search the Internet for a picture of a butterfly or another object or animal that moves.

b.  Try removing the "background" from the image to isolate just the animal if you can't find one that is already like that.

 c.  Either make a new image with nothing in it that is the size you want (File -> New and set the image size)  r increase the canvas size of the existing image to be large enough for the animation. 

d.  Copy and past the animal you have selected into a New Layer and position it where it looks like it belong for the next frame of the animation.  You may also rotate the frame or edit the animal to make it look like it is moving.

e.  Repeat number 4, copying each new version of the animal into a new frame. 

f.  When done, save this image as a Photoshop Image using File -> Save As

 

3b.  Now, select Palettes from the top menu and find the animation palette.  There is an "Animation window" on the lower  art of the workspace.  Select the circle with the little arrow in it and choose "Make Frames From Layers" (this may or may not still work in the new version of Photoshop --- if not, I can show you how to proceed from here).  Now select the "Play" arrow from the bottom of the Window.  You can also set the timing of the frames to be faster and slower under each of the frames (it should be set to 0 seconds as a default)

 

3c.  You should be able to optimize and save your animation by using the Optimize Animation feature of the Animation Palette Menu and then Save For Web making sure that the .gif extension is appended.  Now open it in a web browser. 

 

A nice tutorial with more details is here: http://www.artcone.com/photoshop-tutorials/sun_animation_in_photoshop_cs2.html

PART 2.  BEGINNING HTML

 

1.  To create a website, there are a few things to understand:

            a.  Any computer hooked to the Internet can distribute web pages

            b.  In order to serve web pages, you need to install a web server

            c.  Microsoft bundles a web server with WindowsXP professional

            d.  You can find other web servers, however.

i.  Check out Tucows (http://www.tucows.com/downloads/Windows/IS-IT/Servers/WebServers/) for other web servers one can download

e.  You can still make web pages without a web server installed and open them locally.

            f.  Web pages on Windows boxes are text files that end in .htm extension.

g.  There are more services like Google Page Creator that allow you to create a web page on somebody else's server without needing to install a server yourself.  There are advantages and disadvantages to this.

           

2.  We will make a very simple web page today that you can open on your local machine

            a.  Many web pages are designed using a markup language called HTML

            (it stands for HyperText Markup Language)

b.  Web browsers access HTML pages and can "read" the format and convert it into a form we recognize.

            c.   HTML has a distinctive format

                        i.  Each HTML page, like a letter, has a HEADER and BODY.

ii.  HTML uses tags that the browser knows what to do with but that isn't shown to the reader of the page

            d.  Open Notepad and make your first HTML page

                        i.  Type in the following:

                                    <HTML>

                                    <HEAD>

                                    <TITLE>MY HTML PAGE</TITLE>

                                    </HEAD>

                                    <BODY>

                                    This is my first html page!

                                    </BODY>

                                    </HTML>

                        ii.   Save this as mypage.htm

e.  Open a web browser (Firefox or IE) and go to Open File, browse to the location of mypage.htm and open it in the browser.  Notice that what is bracketed in <TITLE></TITLE> above shows up on the top bar of the browser.

 

f.  HTML is all about linking in images and links to other HTML pages.  Inserting an image into a web page is simple and just requires you to point the image you want to insert.  The syntax is <img src=[filepath/imagename]>

where [filepath/imagename] is the location and name of the file relative to the htm page you have created.  So you made an animated GIF earlier in lab.  Put the animated GIF in the same directory where your .htm files resides.  Then in your

webpage above add the following line <img src=[yourfilename].gif>.  For example, if you named the file butterfly.gif, the syntax would be <img src=butterfly.gif>. 

 

g.  Hypertext linking is an essential part of the Web.  You can link to any other page on the Internet with ease in HTML.  The syntax is <a href=URL>any text that you want to appear hyperlinked</a>.   URL refers to Universal Resource Locator.  The format is almost always http://hostname/filename.  You can copy a URL right from your browser window.  It is always in the text box at the top of the browser.  Add a hypertext link to your blog in your web page (eg.

<a href=http://blogtrainerblog.blogspot.com/>Laureen's Blog</a>). 

 

NEXT WEEK:  We will learn about how to deal with separating content (images, words) from structural elements from layout elements in HTML. 

 

HOMEWORK:  Please select a paper from: http://www.archimuse.com/ichim07/ or from

http://conference.archimuse.com/biblio/conference/mw that you are interested in and post a link to the paper to your blog.  We will start, the week after next, spending a bit of time in the class period discussing papers.  Next week, we will make a schedule for you to be able to spend a bit of time discussing papers in class.