- How to start a Blog - see: http://asksusib.blogspot.com/ I have been playing with this already
- Alcohol-Free Living - choices for alcohol free products and places to go like Restaurants, etc.
- Energy Remedies for Pets - e.g. Flower Essence Remedies for Cats
- The Art of Vienna - The Artist's Guide to Vienna
- The Subtle System - Energy Centres and Channels, Chakras, Channels and their qualities
3.1. Theory
3.1.1 Reading: Basic Navigation: Understanding the User Experience
Basic Navigation:
Understanding the User Experience
In general, most people need to know some basic things in order to orient themselves — both in the virtual world and the real world:- Where am I?
- Where can I go?
- How will I get there?
- How can I get back to where I once was?
The Real World | The Web World | |
Where am I? | We're surrounded by clues about location:
| Very little sense of where you are. |
Where can I go? | If you're planning a trip, you can research various transportation systems to see what goes where you want it to go. Where else can you go if you are visiting Perth ? | On the web, you need to determine how to get from the main page to any other page within. You also need to know what possibilities exist in getting there. (links, search engine, site map, etc) |
How will I get there? | How do you get to Fremantle, for example, coming from Perth ? If you are not familiar with the Perth metropolitan area, think about how many different ways you could get to Uluru. | How often do you really know the route you're traveling on the Web? How do you find the information you want on the Web? Think about different Search facilities on the Web, for example. What about Web directories? How easy is it for you to recall a site you stumbled across yesterday? |
How can I get back to where I once was? | How do you find your way home again? Do you have to go the same way? Can you return another way? | What navigation tools are used to help you re-trace your steps on the Web? What alternatives so you have to using the back button on your browser? (colored links, breadcrumb navigation, etc) |
 | References |
Fleming, J 1998, Web Navigation: Designing the User Experience, 1st edn, O'Reilly & Associates, Inc., Sebastopol, California. |
3.1.2 Reading: Ten Qualities of Successful Navigation
10 Principles of Successful Navigation
- Navigation should be easily learned
- Navigation should remain consistent
- Navigation should provide feedback
- Navigation should appear in context
- Navigation should offer alternatives
- Navigation should require an economy of action and time
- Navigation should provide clear visual messages
- Navigation should use clear and understandable labels
- Navigation should be appropriate to the site’s purpose
- Navigation should support user’s goals and behaviours
3.2. Practice
3.2.1. Exercise: Style Sheet Basics
| Tutorial Exercise | |
Tutorial for Manipulating Styles It is important to test your Web designs on a variety of popular Web browsers. While Microsoft's Internet Explorer is still the world's most popular, Mozilla's Firefox has developed increasing popularity over the past few years.One of Mozilla Firefox's greatest strengths is in its expandability. There are a number of free and very useful Web development tools you can add on to Firefox to help you develop Web sites. Download the latest copy of Mozilla Firefox from http://www.mozilla.org and install the software. Once the software is installed on your computer, open it up and choose “extensions” from your Tools menu. A dialog box will open listing any extensions you have previously installed. Choose the link to “Get more extensions” from the bottom of this window and you will be redirected to the Firefox Extensions page at Mozilla. Click on the link to “Developer Tools” on your left, and you will be presented with a range of useful extensions. Find the “Web Developer” extension and follow the instructions to install it on your computer. **Alternatively, you can find the home page for the Web Developer extension here: Mozilla Firefox usually requires that you close and restart the software after adding extensions. Do this and see if you can find a new Web Developer tool bar at the base of your other toolbars. You can toggle this Web Developer toolbar on and off under your View > Toolbars menu. Visit some of your favorite Web pages and disable the styles there. You can do this by choosing Disable Styles from your Disable menu (actually under the 'CSS' button on my toolbar) on the Web Developer toolbar. Observe what role style sheets play in the visual design of these Web sites. One of the more interesting tools on this Web Developer toolbar is the “Edit CSS” function found under your “CSS” menu. If you select this, your screen will split in two, showing the Web site your viewing on the right, and the styles for that site on the left. If you fiddle with the text on the styles listed in your left window, your changes will automatically be reflected in the Web page shown in your right window. Visit the CSS Vault at http://cssvault.com/ [old link disabled!] Try here: CSS Zen Garden.com and fiddle with the styles to get a new look for the site. You can use Appendix B in your Castro book on page 439 for a list of possibilities. You can also use the colour table flap on the back cover of Castro's book to choose different colours. [access table here: http://www.elizabethcastro.com/html/extras/cssref.html] Once you're happy with your changes, save the styles you've been editing as yourname.css and upload it to the Flecs-Blackboard discussion board. |
3.2.2 Reading & Exercises: Web Page Construction: Building Blocks
| Tutorial Exercise | |
| DONE :) | Read and do the exercises and quizes in Chapter 3 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 77-123). Learn from your mistakes by checking to see if your solutions are correct. |
3.2.3 Reading & Exercises: A Trip to Webville: Getting Connected
| Tutorial Exercise | |
Read and do the exercises and quizes in Chapter 4 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 125-164). Learn from your mistakes by checking to see if your solutions are correct. |
3.2.3. Photoshop Tutorials
3.2.3.1. Tutorial: Photoshop Magic Wand Selections Overview
Making selections with the Magic Wand tool*
One of Photoshop’s most powerful selection features is the Magic Wand Tool. The
Magic Wand Tool allows you to easily select irregular shaped objects. Just select the
Magic Wand from the Tool Bar, and click on an object in the image you want to select,
and Photoshop will look for and select similar colored and connected pixels. You can
adjust the Tolerance setting for selection accuracy.
Once a selection has been made with the Magic Wand Tool, its
borders can be modified in a variety of ways. By choosing the
Select > Grow option from your Photoshop Menu, you can increase
the size of your selection by adding adjacent pixels to the selection.
similar colored pixels throughout
the image.
Select > Modify > Expand, or
Contract, or Smooth will allow
you to refine the borders of your
selection.
You can also Inverse selections from your Select Menu. Sometimes it’s easier to choose
a solid background with the Magic Wand Tool (as seen with the dog image above), and
inverse it in order to get a complicated wide-ranging colored object in a photo if it
happens to be on a solid background.
3.2.3.2. Tutorial: Photoshop Quick Mask Selections Overview
Using the Quick Mask Mode for difficult selections *
When you’re having difficulty making a selection using the previous standard “marching
ants” options, try selecting the Quick Mask Mode button on your Photoshop Toolbar.
The Quick Mask will allow you to paint a mask blocking the areas you don’t want
selected, and erase the areas you do want in your selection using the basic painting and
editing tools we’ve already learned about. Double clicking on the Quick Mask Mode
button will allow you to change the color and opacity of the mask to make it easier for
you to see and use. When you're finished, you can return to Standard Mode by selecting
the Standard Mode button on your Photoshop Toolbar.
3.2.3.3. Tutorial: Photoshop Selecting By Color Overview
Making Selections of a Range of Colors
Photoshop's Magic Wand Tool allows you to make selections of individual colors (with
some degree of leniency via the tolerance setting), but how can you make a selection of
two or more distinctively different colors?
Choose Color Range from your Select Menu
to access the following Color Range Dialog Box.
Once you're satisfied with the colors you have chosen from your image, select OK to
close the dialog box. You will find all the colors you have chosen with the eyedroppers
selected and surrounded by "marching ants" on your image.
Use the Fuzziness Slider to adjust the tolerance of your selection
Use this eyedropper to make the first
color selection off your image
Use this eyedropper to add other colors to your selection.
Use this eyedropper to subtract any colors
you may have accidentally selected.
Color-correcting a selection
To replace colors in an image, choose Image > Adjust > Replace Color. You will be
able to sample the shades of color you want to change with the plain eyedropper then
adjust the Hue, Saturation, and Lightness
sliders to get the color you desire. You can usethe Eyedropper + (plus) tool to add colors to
your selection mask, or the Eyedropper -
(minus) tool to subtract colors from your
selection — even after starting the color
replacement process.
Ticking the Selection option will show you a
mask of those colors in your selection, while
ticking the Image option will give you a
preview of your changes. The Fuzziness slider
will determine how exact the color replacement
process is. You may want to create a selection
beforehand if you only want colors in one part of your image adjusted.
3.2.3.4. Tutorial: Photoshop Selections Overview
Saving selections
1
Your ability to make accurate selections is very important to your success using
Photoshop 4.0. Making selections of images can be very tedious work. Photoshop will
allow you to save specific selections you have worked hard to make by choosing Save
Selection from the Select Menu. The selection will be stored as a separate mask in
Photoshop’s Channel Palette.
Loading a Selection
To load an existing Channel you have previously saved, just choose Load Selection from
the Select Menu.
12.02 Making selections using the pen tool
When you use the Pen Tool on your Photoshop toolbar, your paths are saved under your
Paths Palette. Using the Pen Tool, you can manually draw selections around the objects
you want by using the pen tools in your Paths Palette. To make straight lines, select the
regular Pen from the Path Palette and click where you want your points to be —
Photoshop will automatically connect the dots with straight lines. You can use the Pen+
and Pen- pens to add or remove these connecting dots if you want to make any
modifications.
Using the pen tool to make perfect curves can be a little tricky to get used to and will
require some practice. Instead of click points, you will need to drag a short straight line
in the direction you want your curve to go, followed by another similar short straight line
at the end of your curve. Once again, you can use the Pen+ and Pen- pens to add or
remove these connecting dots for making modifications.
The mouse pointer shaped arrow icon can be used to move your anchor points. The angle
icon can be used to convert curved anchors to angular anchors.
Photoshop 4.0 will allow you to create selections out of paths as well as paths out of
selections. Try making a selection of part of your image, and then converting it to a path
using the appropriate icon button on the bottom of your Paths Palette (see the Paths
Palette diagram above).
3.2.3.5. Tutorial: Photoshop Changing Selections Overview
Shifting Selections*
You can shift selections by dragging your mouse within the "marching ants" boundaries
or by using your arrow keys. If you hold your Ctrl key down while attempting to shift
your selection, you'll also move the contents of your selection.
Alternatively, you can use move your selections around in a variety of ways using your
Move Tool from your Toolbar to move your selection wherever you want. If fact, your
Move Tool can be used to drag and drop selections into other images.
Adding and Subtracting from selections
You can further adjust selections by manually adding and subtracting areas you want
changed. To manually add to your selection, use your Lasso or Marquee Tools while
your Shift key is pressed. To subtract from a selection, use your Lasso or Marquee
Tools while your Alt key is pressed.
3.2.3.6. Tutorial: Photoshop Filling Selections Overview
6.15 Filling a selection with a color or a pattern*
You can fill selections with varying shades of colors or patterns. If you choose Edit >
Fill while a selection is highlighted, you will have the option of filling with a variety of
colors and at varying degrees of opacity.
Adobe Illustrator texture files can be used to add patterns to a selection. Several EPS
Vector (*.ai) Adobe Illustrator textures come with Photoshop, and can be found in your
\photoshp\patterns directory. To use a pattern, open it from your File > Open menu,
choose Select All from your Select menu, and then choose Edit > Define Pattern. This
will copy the pattern to your Windows clipboard. Close the EPS file (without saving
changes), and then choose Edit > Fill, making sure that Pattern has been selected from
the Fill menu’s Content options.
6.18 Painting with a pattern
In addition to filling a selection with a pattern, Photoshop will also allow you to paint
with patterns using your Rubber Stamp Tool. You will need to copy the pattern
information (from an EPS Adobe Illustrator file, for example) in the same manner you
did to fill the selection with a pattern (see Section 6.14). Open a Pattern, choose Select >
All, and then Edit > Define. Once Photoshop has memorized the pattern, you'll be able
to use your Rubber Stamp Tool with the option Pattern (aligned) checked from Tool
Options Palette to paint in a repetitive pattern.
6.16 Filling a selection with a gradient
Selections can be filled with gradients that will range from your selected foreground
color to your selected background color or in other ways (see your Gradient Options
Palette). Just select the colors you want to use, and choose your Gradient Tool from
Photoshop’s Toolbar. You can drag a line to mark the beginning and ending points of
your gradient.
Gradient tools can be used to create many effects, including three-dimensional shaped
objects. To create any of the following objects, draw an empty selection in the shape you
want and fill the space with a linear or radial gradient. For best results, draw your linear
gradients from outside of your selected area through your shape and out past the other
side — this will give you more defined edges.
*
Your version of Photoshop may vary somewhat from the one illustrated here. Consult with your help file
or one of our recommended texts for version specific instructions on how to use the tools highlighted in this document.
No comments:
Post a Comment