Welcome to BCC’s Photoshop 1 Instructor / Revered Master / Fearless Leader John Herring.

Welcome to BCC’s

Photoshop 1

Instructor / Revered Master / Fearless Leader

John Herring

Things you’ll need to know . . .Schedule

Five meetings, 3 hours each.Total: 15 hours.

June / July 2008S M T W T F S

22 23 24 25 26 27 28

29 30 JULY 1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

Mondays 6:30 pm - 9:30 pmUsually one break, halfway through.

How to reach me by e-mail:[email protected]

Please place “BCC Student” in subject line.

Class Web Sitehttp: / / johnherring.net / bcc

You’ll be visiting this address, and related addresses, frequently.

Changes / announcements / files / resources will appear on the class web site . . .

The best design toolsever invented . . .

Pencil and paper

Good Supplies

USB key1 GB < $102 GB < $154 GB < $25

Necessary Supplies

Brands: SanDisk, Kingston, PNY

Vendors: CompUSA, BestBuy, BrandsMart, Target, Staples, Office Depot, Amazon.com

A free e-mail account.

It’s best to use one of these, instead of a BellSouth or AOL account, and I’ll help you get one.

Required Supplies

Yahoo Unlimited

Gmail 6.8 GB

MSN / Hotmail 5 GB

The General Idea

The General IdeaTo learn to create web pages . . .

Write code according to simple rules. Create basic page with text. Revise the page by editing the text.

Add images to web pages.

Add links to other pages and other sites.

Arrange text and images on the page. Change the arrangement to improve it.

Make changes to the arrangement, or some part of it, and re-publish.

Publish the whole thing to the web.

Creating Web Pages

Creating Web Pages and Web Sitesand Putting them on the Net

<html> <head> <title>Welcome to my Web Site! </tite> </head> <body bgcolor="yellow"> Hello! </body></html>

<html> <head> <title>Welcome to my Web Site! </title> </head> <body bgcolor="yellow"> Hello! </body></html>

<html> <head> <title>Welcome!</title> </head> <body bgcolor="yellow"> Hello! </body></html>


<html> <head> <title>Welcome!</title> </head> <body bgcolor="lightgreen"> Hello! </body></html>

<html> <head> <title>Welcome!</title> </head> <body bgcolor="lightblue"> Hello! <img src="usb.jpg" /> </body></html>

<a href="home.html">Go to Home Page</a>


<a href="blue.html">Go to Blue Page</a>

<a href="http://yahoo.com">Go to Yahoo</a>

Putting Web Pageson the Net


HostHost


TheWeb Host

TheWeb Host

Web Site HostingNaturally, these services aren’t free.

You can expect to pay at least$5/month (long-term contract;

more if you want to paymonth-to-month) for a good web host.

Free hosts, like Tripod or Freewebs or Yahoo GeoCities, always have some kind of drawback – ads, pop-up panels, etc., on your web pages. If you’re OK with these, go for it. If you want your

own space, you must have your own domain name . . . .

Domain Names

Domain Names

Pines Lincoln-Mercurypineslm.com

Doctors Talking

drstalking.com

Your Name?yourname.com?

I can help you look up domain names,and even buy them, if you want.


http://mywebsite.com

http://mycompany.com

http://anothername.net

http://anonprofit.org

http://broward.edu

http://whitehouse.gov

http://nasa.gov

http://noaa.gov

http://af.mil

http://www.mywebsite.com

http://www.mycompany.com

http://www.anothername.net

http://www.anonprofit.org

http://www.broward.edu

http://www.whitehouse.gov

http://www.nasa.gov

http://www.noaa.gov

http://www.af.mil

Your Domain Name

http://806.com http://806.the-village.com

Getting your domain name has nothing to do with getting web hosting. They are

two separate things.

Many companies offer both,for “convenience,” but this

approach can backfire.

These are two separate things.

Domain Names

Domain Name RegistrarsRegister your domain name, like

mycupcakes.com or joesmithphotos.com,for a period of time, and a small fee

(about $10/year).

If this registration isn’t kept current, your domain (including e-mail) just won’t work.

The registrar might offer to host your web site in addition to registering your domain, but this is

not required. (Your web host will likely offer domain registration too – maybe even for free –

but this too isn’t required, and may be a bad idea.)

The Keyboard

Escape

Exclamation, Bang, Slam

At (from e-mail)

Pound, number, hash, octothorpe

Percent

Ampersand

Star, asterisk

Hyphen, dash / Underscore, underline

Equals

Braces, curly braces

Quotes (shift character)

Colon, semicolon

Brackets, angle brackets (open / close)

Control, Ctrl

Arrow / cursor keys

HTML DocumentStructure

</html>

<head>

</head>

<body>

</body>

<title>

</title>

title of page

other things that belong in the head, if any

everything else

Entire HTML file

<html>

</html>

<head>

</head>

<body>

</body>

<title>

</title>

<html> <html> <head> <title> This is the title </title>

</head>

<body>

Hello, world!

</body></html>

<html> <head> <title> This is the title </title>

</head>

<body>

Hello, world!

</body></html>

<html><head><title>This is the title</title>

</head>

<body>

Hello, world!

</body></html>

<html><head><title>This is the title</title></head><body>Hello, world!</body></html>

<html><head><title>

This is the title

</title></head>

<body>

Hello, world!

</body></html>

<html><head><title>This is the title</title></head><body>Hello, world!</body></html>

Hello, world!

Hello, world!

Hello, world!

Hello,world!

Hello, world! Hello, world!

Hello,

world!

File Names

Naming Your FilesFor the UNIX Platform

Mac

CreateHostView

CreateHostView

CreateHostView

Things NOT to do . . .

consistency (with index.html)

my-web-page.html

UNIX Filenaming Conventions

use hyphens (dashes) to separate parts

mywebpage.html all-lower-case, no spaces, no special characters, ends with .html

mywebpage.htmMyWebPage.htmlWEBPAGE.htmlmy First webpage.htmlMy*First webpage!.htmlweb_page.html underscore (UNIX convention)

special charactersspacescapitalization issuescapitalization issues

web-page-001.html numbers are OK

file-name.html File-Name.html

Windows (not case sensitive)

UNIX (case sensitive)

<a href=“file-name.html”>link text</a>

<a href=“file-name.html”>link text</a>

file-name.html

File-Name.html

Cannot Display

Web Page

image of ipod.jpg Image of iPod.jpg

<img src= “Image of iPod.jpg” />

<img src= “Image-of-iPod.jpg” />

Image-of-ipod.jpg

Image-of-iPod.jpg

Windows (not case sensitive)

UNIX (case sensitive)

Things NOT to do . . .

consistency (with index.html)

my-web-page.html

UNIX Filenaming Conventions

use hyphens (dashes) to separate parts

mywebpage.html all-lower-case, no spaces, no special characters, ends with .html

mywebpage.htmMyWebPage.htmlWEBPAGE.htmlmy First webpage.htmlMy*First webpage!.htmlweb_page.html underscore (UNIX convention)

special charactersspacescapitalization issuescapitalization issues

web-page-001.html numbers are OK

File Sizes &Image Formats

File Size and Image Formats

Digital cameras often save images in one of several formats:

JPG BMP TIFF RAW Others

Most of these are unsuitable for use on the web, and even JPGs (which are suitable) can be much too large or can have other issues that should be dealt with before putting them on the web.

But, most image types that are unsuitable can be made suitable, using appropriate free software (available here in the lab and at home).

There are also other sources for images, like the web itself, but just because it came from the web doesn’t mean it’s right for what you want to do. Be careful.

So what’s a suitable image type? Glad you asked . . . .

Most of the images you want to use in your web pages will be in either

JPG (pronounced jay-peg) or in GIF (usually pronounced giff)

formats. There is also PNG, but this is less common. If you’re looking at any other image type, you should consider converting it before you do anything else with it.

In general, JPGs are suitable for photos and other complex images with lots of different colors, while GIFs are suitable for simple images with few colors, large areas of single colors, or with transparent areas, or with animations. JPG images cannot have transparent areas or animations. JPGs for photos, GIFs for everything else.

JPG –Photo, many complex colors

GIF –Only a few solid colors

Smaller File = Better

File Size and File Formats

Smaller File = Quicker Download

JPGJPG

GIF

Smaller File = Better


Smaller File = Quicker Download

256 KB17 KB

15JPG BMP

1 2

1

1 2

1

Bits and Bytes

A bit is the smallest unit of data a computer can work with, a 1 or a 0.

A byte is eight bits.

File sizes are measured in bytes, because it’s important to know how big they are – how much room they’ll take up, how long they’ll take to download, how well they’ll print, etc.

A smaller file size is better than a larger file size, but this usually means the quality of the image suffers. In general, the larger the image, the higher the quality – but the slower the download time, etc.

A kilobyte is 1000 bytes (1 KB), and is usually fairly small by web standards. Most images for the web fall into the range of about 10 KB (kilobytes) to 80 KB -- total -- for the page. Anything larger than about 100 KB -- total – for the images on a page, and you should ask yourself if there’s a better way. There usually is.

An image that needs 100 KB on disk, or 200 KB on disk, or even 1400 KB on disk, needs to be reduced (optimized) before use on a web page.


96 KB8 KB

12

45 KB4 KB

11

240 KB 20 KB12

JPG BMP

BMP JPG

GIF BMP


616 KB

63 KB

9

JPG

JPG


54 KB

54 KB1

JPG

JPG


28 KB

237 KB

8JPG

JPG


DO USE

JPG (photos)*

GIF (solid colors, or if transparency or animation is required)

PNG (any)

*JPGs can still containlarge amounts ofinformation if notproperly optimized

DON’T USE

BMP, WMF, TIF

Other formats

CONVE

RT A

S NEE

DED

FTP(File Transfer Protocol)

FTPFile Transfer Protocol

httpHyper-Text Transfer Protocol


HostHost


FTP

FTP

1. A connection to the internet.

2. A program to send and receive files (an FTP client).

3. A host name / address.

4. A user ID.

5. A password.

FTP (File Transfer Protocol)requires the following things:

Program to send and receive files (FTP client)

Host name / address

User ID

Password

Your FTP Account

(I suggest writing this downor memorizing it.)

Your FTP User ID

your first name:

thomaspatriciaelizeealan

alijosemaria

Your FTP PasswordYou should memorize your password.

You should also keep it safe and private(once you get a new password).

All passwords are set to 12341234 at first.

If you want yours changed, send me e-mailand suggest a new password.

It must be at least 5 characters, cannot belonger than 8 characters, and you may

or may not get exactly the password you want.Only I can change the passwords.

[email protected]

Your web pageswill appear at this address:

http://johnherring.net/bcc/0806/yourlastname

(if you upload a file called “index.html”,this is all you need to type to see that page)

or

http://johnherring.net/bcc/0806/ . . .yourlastname/file-name.html

for files with other filenames.

Daily File Storage Procedures

At the end of class each day, you should e-mail your files to yourself. Remember, you should have a free e-mail account with Yahoo (unlimited), gmail (6+ GB), or MSN / Hotmail (5 GB).

You should also upload all your files to the server via FTP if you want to see them on the web. You should check to be sure your files actually got uploaded safely – use a browser to check that the files are on the server. If you omit this step, you may get an unpleasant surprise later.

You may also want to copy your files to a USB key.

Other Items

Colors, color pickers, color utilities

Broward Convention Center site

Welcome to BCC’s Photoshop 1 Instructor / Revered Master / Fearless Leader John Herring.

Documents

Transcript of Welcome to BCC’s Photoshop 1 Instructor / Revered Master / Fearless Leader John Herring.