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.

I should really start reading the development blog news on my dashboard. The message to upgrade my WordPress install is five days old. So, guess what I’ve done this morning? Welcome to my upgraded new site. The good news is that I now have a backup of my assignments.

The aim of this post is to cover basic disciplines to writing specifically for the web. Here are my five top rules to writing online.

1. Write Scannable Text—Web users do not usually sit down to read the whole text on the web page. They skim the page and look for the next link to click on. There are things you can do to help them:
   • Start with the most important stuff at the beginning. The first sentence in the first paragraph should be a summary.
   • Divide the text into logical divisions and use semantic markup to mark them up accordingly. Simply, break your content into smaller paragraphs.
   • Provide informative headings—Users will scan the headlines to know what the main ideas presented in the page are.
   • Draw attention to keywords by marking them with boldface (using <strong> tags) or using bulleted lists. This will highlight main points and will make easier to scan.
   • Use excerpts from the text through the text using <blockquote>.
2. Be Clear and Concise—don’t waste your audience time with blurbs or marketing texts. Keep it short and to the point. On the other hand, don’t be afraid to elaborate on the point if need be. There are studies that show web users are more comfortable with scrolling down nowadays.
3. Use simple language, not marketing or technical lingo—write to your audience in a way that will be easy for them to understand.
4. Spell Check—On the web, as opposed to print media, you can always go back and correct a misspelled word. Therefore, there shouldn’t be an excuse to have misspelled words in your text. Furthermore, this will give you a good chance to review your draft and edit it before publishing.
5. Use Meaningful Links—particularly important for screen readers, a link that says ‘Click Here’ is generic and doesn’t have a meaning. Use links that indicate where they lead you. The links you provide support and authenticate your arguments. Some believe that links within the text can become a visual distraction, offer half-told stories and recommend avoiding them within your text. A different solution is to use a list of references in the end of your article (as done in this one).

Further Reading:

1. Jakob Nielsen’s Alertbox, 1997, How Users Read on the Web, (accessed on March 05, 2007)
2. Sarah Horton, 2001, Writing for the Web, From Web Teaching Guide, (accessed on March 05, 2007)
3. Aaron Swartz, 2001, Don’t use “click here” as link text, W3C Tips for Webmasters (accessed on March 05, 2007)
4. William Strunk, Jr., 1918, The Elements of Style, (accessed on March 05, 2007)
5. Mary K. McCaskill, 1998, A Handbook for Technical Writers and Editors, Langley Research Center, Hampton, Virginia (accessed on March 05, 2007)
6. Jared Spool, 2006, Long Pages Rule!, on User Interface Engineering, (accessed on March 05, 2007)
7. Nathan Wallace, 1999, Web Writing for Many Interest Levels, (accessed on March 06, 2007)
8. A List Apart, Online Magazine, Articles on the topic of Writing, (accessed on March 06, 2007)

I just finished reading Rebecca Blood’s Weblog Ethics and I thoroughly enjoyed her writing. I have been following 80 odd blogs for the last few months and usually the first thing I do is go to the ‘About’ page to check out who the writer is. It’s one way for me to know whether to trust what that person is saying or not. I also noted many things that she mentions in the article but never knew the reasons behind them. It is nice to know there are a few rules that most follow when blogging.

Further Reading: Stuart Brown, Ethical Blogging 101, March 02, 2007

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.

Just checking if anyone in the course is signed up for LinkedIn?

I just signed up this morning to everyone’s feeds. I think this will make it easier to keep up with everyone’s work.

I tried to connect to Curtin anonymous server but it was taking too long to connect. Then i tried to figure out how to connect to my student web server account. I found this in the 2007 Student Publication:

The information you will need for connecting to your home drive via FTP is as follows:

• FTP Server: ftp.student.curtin.edu.au
• Username: Your Curtin Student ID
• Password: Your OASIS password

So, I tried that as well, but it didn’t work. Any ideas, anyone?

There is something I don’t understand. I checked my stats this morning and I found a referer link from forum.impactmissions.com and when I clicked on the link I looked at my blog site but with their web address. What the hell is happening? Does anyone have an idea?

• Andrew Brean
• Anne Belle
• Belinda McDowall
• Brendan Maurer
• Christine Binns
• Conrad Kelleher
• Drew Strachan
• Deborah Roberts
• Gail Cumming
• Garry Cheney
• Greg Williams
• Helen Di Giunta
• Ivan Ocampo
• Felicity Mann
• Jaclyn Power
• Jalah Miller
• Jane Leggate
• Jasmine
• Jeremy Neyman
• Jon Hayward
• Josephine Franklin-Paddock
• Kelly John
• Kelly-Eleanor Coldwell
• Kerri Bennett
• Laura Goss
• Lin Boadicea Campbell
• Lisa Christian
• Lisa Findlater
• Lisa Langdale
• Marnie
• Mary Castieau
• Matthew Finch
• Nikki Mouton
• Pamela Boner
• Renee Treweek
• Robert
• Sonia Quinn
• Steven Barrett
• Steven Cahill
• Tamara Paton
• Tracey Burr

And we can safely say that most chose Blogger as their blog choice.

I will update this list as more create their blogs.