Internet Studies

Many think of Photoshop as a very complicated application that is hard to learn how to use. Photoshop does have many advanced features but for simple operations, it can be quite intuitive. In this tutorial we will cover the following:

1. Introduction to Raster Images and Resolutions
2. Toolbox
3. Zoom and Marquee Tools
4. Deselect and Tab Key
5. Options Bar
6. Layers Palette
7. Image Size
8. Undo Command and the History Palette
9. Filters

Introduction to Raster Images and Resolutions

A raster (or bitmap) image is made out of pixels—small rectangular units that are set in a grid. Each pixel has one colour. The image resolution is set by the number of pixels there are per square inch. The more pixels there are the better the image quality but also the bigger the file size. A file size is a combination of its height, width and resolution. When we prepare images for the web, we do not need to save the image in a resolution higher than the screen resolution, meaning 72 pixels/inch, but it is better to have your work files in a higher resolution to have more subtle effects.

When you work with a raster image, you select a group of pixels to manipulate. For example, if you work on a person’s photo, you can’t just select his eye, but you can select the pixels that make his eye. I will get back to this concept in a minute. Let’s start by opening Photoshop and having a look at our Toolbox.

Toolbox

In the image below, I specified the different groups of tools you have in your toolbox.

If you hover your mouse over each tool, a popup tip will come up with the tool’s name and its keyboard shortcut. Tools that have a small arrow at the bottom right corner have more tools hiding underneath them. If you click on the tool and hold down the mouse, a menu will come up with the other tools that are available. The tools I use the most are: all your selection tools, the crop tool, healing tool, stamp tool, all the drawing and type tools, the hand tool and the zoom tool. We will be using a few for this tutorial. Next, open any photo.

Zoom and Marquee Selection Tools

Select the zoom tool and click anywhere in your photo. If you look at the bottom left corner of your image, you will notice that every time you click the magnify glass in the image, the zoom percentages increase. You can also click in that box to specify your desired zoom. Let’s type in 1600%—the biggest available zoom. You can see all the individual pixels that make your image. Now double click on the Hand tool to fit the image on your screen.

Next, select the marquee tool (top left tool in the toolbox).Click, hold down and drag it a cross your image. When you let go, you will have a rectangle that looks like it is made out of moving ants. This shows your selection. Whatever action you will do next will only get applied to these selected pixels. You can zoom in again (try a keyboard shortcut Spacebar + CTRL on Windows or Spacebar + CMD on a Mac to bring up the zoom tool) to see the edge of your selection. If you wish to zoom out, hold down the Alt key (OPN key on a Mac) as you click.

Deselect and Tab Key

To get rid of your selection, the easiest way is to use a keyboard shortcut CTRL + D (CMD + D on a Mac). Some might be used to using other vector programs that allow you to deselect an object by pressing Tab. If you press Tab in Photoshop, it will hide all your palettes. Press it again to get all your palettes back.

Options Bar

Every time you select a different tool in your toolbox, the Options bar (at the top below the menus) will change to reflect different options that are available for that particular tool. For example, with your marquee tool selected, you can see a drop-down menu that I use a lot. In it, you get a choice between normal selection, fixed aspect ratio (for example 3:2 like your usual printed photos) and fixed size (where you define the size of your selection box).

Layers Palette

The layers palette will be a good one to get to know. It will help you tremendously when you create a web page mock-up. If it is not already open, you can find it under the Window menu (or press F7). As you can see in the image below, I like to keep my Layers, Channels and Paths palettes grouped together. You can separate palette to float independently by clicking on the palette’s name tab, holding down and dragging it out. You can also group a few palettes together by dragging a palette into another till you see a black border.

Also, in the image, you can see that my layer is called Background and has a lock next to it. Most images that you will open for the first time in Photoshop will have only one Background layer. This means, there isn’t any layer below it. An image can have only one background. You cannot change the stacking order of a background, its blending mode, or its opacity. You cannot apply transparency to the Background layer. However, you can convert a background to a regular layer by double clicking on it. A window will open up asking you to give the layer a name (default name is Layer 0).

Layers allow you to stack groups of pixels on top of each other. Great when you are creating compositions. I will not cover how to use layers in this tutorial. Just wanted to mention them so, you are aware that you should use them.

Image Size

Go to the Image menu > select Image Size. In this window you can view your image dimensions in pixels and in other measurements units as well as its resolution. You can also change them. A couple of notes to remember: you can make an image smaller, but you can’t really make it bigger. When you make the image bigger, Photoshop will add pixels to your image that are not there and the image’s quality will decrease. Secondly, unless intentionally, you should always keep the Constrain Proportions checked.

Undo Command and the History Palette

Photoshop only has one Undo. Yes only one. To undo an operation, press CTRL + Z (CMD + Z on Mac). If you press it again, Photoshop will redo your last operation. Sounds scary, right? Good news is, you can use the History Palette to return a few commands back.

Filters

Photoshop offers many filters that create many effects. Go ahead and test them. You can undo/redo to see how a certain filter affected your image. Just remember to select No to saving changes when you close the image.

This was a very quick overview of some of the basic function in Photoshop that will help you start exploring it further. Hope you found it helpful.

This is a summary for me of module 6 that discusses site navigation.

Navigation should…

1. be easily learned
2. remain consistent
3. provide feedback
4. appear in context
5. offer alternatives
6. require an economy of action and time
7. provide clear visual messages
8. use clear and understandable labels
9. be appropriate to the site’s purpose
10. support user’s goals and behaviors

Copyright Curtin University, Internet Studies, NED11 Internet Design, Module 6

Task: Once you have completed the lessons, you should have a page with all the above elements—save it as ‘index.html’ and upload to your space in the presentations page of webct.

I didn’t need to go through the lessons to learn something I already know. I created my page, validated my markup and my CSS and uploaded it to my space in the presentation area. I also uploaded it to NED11 Students Web Space area. The page include links to all my tasks and answers that I have completed so far. I will update it as I keep progressing.

I styled the page to be scrolled horizontally. This is not something that I would normally do, but I felt like doing something different—a change. Here’s a screenshot of the page I uploaded.

I have a confession to make: I don’t have the book required for NED11 module. I don’t need it as I am already familiar with XHTML and CSS (And I have Elizabeth Castro’s book on XML) but it does create a problem that I can’t submit any of the execises and tutorials that are in the book.

So, to prove that I do know what XHTML is, here’s a link to a site I created in my previous course: Certificae IV for Web Site Design. My assignment was to create and implement an Instructional Design Plan. I created instructional materials to teach my clients how to update the site I created for them. This site includes an introduction to XHTML, XHTML Tags Primer, Introduction to Character Entities, Introduction to FTP and a couple more things that are relevant to the actual site and my assignment.

I tried to make it really simple and to use clear language, but even though, my clients got confused. So, I guess, it wasn’t simple enough.

Anyway, here’s the link: Instructional Design.

1. How do you provide invisible information on a Web page that allows you to only provide messages for people who read your HTML code?

<!--This comment will not be displayed-->

2. How can you make your text appear on a Web browser exactly as you typed it in your HTML code?

Use <pre> tag

3. How can you provide additional information in HTML in the form of a small pop up message that is otherwise not apparent if you don’t roll your mouse over it?

Use <title> tag

4. How can you create a hypertext link that will allow you to link to a specific part of the same page?

Use an anchor.

5. If you were to create an empty table of two rows by two columns, what do you need to do to it to show the borders around each empty cell?

Define border preferably in CSS using similar to the following rule:
td {border:1px solid #000;}

6. How do you turn an image into a hypertext link? How do you influence whether or not such an image has a border?

Define a img {border:none;} in CSS.

7. How do you change the colors of your hypertext links? How do you change the background color?

Again preferably in CSS for example:
a:link, a:visited {color: #777;}
a:hover {background-color: #777; color:#fff;}

1. What tags make up the basic structure of an HTML document?

<html> tag wrapping <head> and <body> tags

2. What tags do you use to denote a paragraph?

<p>

3. What is the difference between a paragraph tag and a line break tag?

The paragraph tag starts or finished a new paragraph (just like pressing enter or return in a word processing application). The <br /> doesn’t start a new paragraph, just a new line (just like pressing shift+enter or return in your word processing application).

4. How do you create a bulleted list?

<ul><li></li></ul>

5. How do you create a numbered list?

<ol><li></li></0l>

6. There is title information that appears for Web pages in the title bar of a Web browser, in your bookmarks when you choose to bookmark a site, and as a listing in the search results when you do a search for information using a search engine like Google. How do provide this very important information in your HTML code?

<title>What ever comes here will show up when your bookmark the page. Therefore, you want the first word to be your web site name’s so it will be easier for your user to find.</title>

7. How do you add an image?

<img src=“path/to/image” alt=“alternate text here” />

This will probably change to object in the next version of XHTML.

8. How do you add a link?

<a href=“path/to/link”>Link text</a>

This will probably change to <link> in the next version of XHTML.

9. How do you make an image a link?

Insert your image tag where the link text is.

10. Provide the code for an empty table, 3 columns long and 4 rows high.

<table>
<tr><td>First Row</td><td>TD</td><td>TD</td></tr>
<tr><td>Second Row</td><td>TD</td><td>TD</td></tr>
<tr><td>Third Row</td><td>TD</td><td>TD</td></tr>
<tr><td>Fourth Row</td><td>TD</td><td>TD</td></tr>
</table>

Comments are off for this post

My take on the 5 Milestones relevant to the world Wide Web:

1. 1961-First paper on packet-switching (PS) theory published by Leonard Kleinrock that started the idea of networking. I also consider all the events that lead to the creation of the network as important.
2. 1969-ARPANET commissioned by DoD for research into networking and being connected to 4 universities.
3. 1983-Name server developed at Univ of Wisconsin, no longer requiring users to know the exact path to other systems. In the same year, desktop workstations come into being, many with Berkeley UNIX (4.2 BSD) which includes IP networking software.
4. 1984-Domain Name System (DNS) introduced.
5. 1990-The World comes on-line (world.std.com), becoming the first commercial provider of Internet dial-up access.

Link: Hobb’s Internet Timeline

It will be very interesting to see what others think the 5 milestones should be. If you can, leave a link here to your answers.

My Answers:

1. W3C director and assisted in research into future applications.
2. XML, RDF, Semantic Web, SVG, Voice Input and Output and XML Signatures. A couple of things were new to me (XML Signatures) but I do believe these languages are still valid today. RSS feeds based on XML are more common nowadays. XHTML (again based on XML and on valid code) and the semantic web are still under discussion and gaining popularity. SVG support hasn’t been integrated into current browsers enough as yet. I guess the Voice Input and Output has developed into today’s screen readers or VOIP and XML Signatures is a new subject to me.
3. I was surprised to see the page using a definition list. Also the markup is not wrapped in an element. Besides that the markup seems to be valid HTML.
4. The W3C started with publishing recommendations not standards but a few years ago a few believed that standards will be a better selection of words to convince others to follow the W3C lead and specifications.
5. http:au/edu/curtin/students/administration/admissions/
6. The first GUI browser was WorldWideWeb invented by Tim Berners-Lee. 5 different browsers examples: Safari, Flock, KHTML, Camino and Safari. Unfortunately the most popular one today is still Internet Explorer but hopefully this will change.
7. Black, Blue, Green

Link: Tim Berners-Lee’s answers to Frequently Asked Questions by the Press.