So far
Reviewed CSS Added a table
3 rows Copy/paste from course syllabus
Anchorsandlists.pptx 01/22/2016
Overview• Create a list of projects we will create throughout the remainder of the course• Use null links• Use Photoshop to create a banner• Discuss 2 color models• Create a 3-row table
Add ordered list
Use <ol> One <li> for each project we create Start with null links Q: How do we format/show/indicate a null link? Q: Were does a null link send the viewer?
OL (bullets or numbers as the list items?)
Open index.htm from previous module (htmll-2-1) Or download and change myIndexv2.txt to htm extension, save in JMA260
Add <ol>
Add a <li>
links
Make the <li> s be links
<li ><a href=“#”>About Me /a> </li>
Copy and paste 9 times
Add null links, plus <li>s
Use copy/paste
Paths
Absolute and relative Absolute: The complete URL, starting with “http://www.....
Rule: Use complete (absolute) paths when the destination page is outside your pub folder, if inside pub, we use relative paths
Row 3
Save and render: should be on USB
Publish
i.e. copy index.htm, USB to pub/jma260
test
Banner/Photoshop
We need 4 colors: We need four colors that “go together”:
The banner’s background color The banner’s text color the html body’s background color, body text..
We also need to create the actual banner. Use Photoshop to create the banner, color.adobe.com to choose the colors.
See link to the adobe site
10 points
List your name What are 4 analogous colors (in RGB format)to #efeffa (5 points) Complementary colors to efeffa? (5 points) Hand in Friday
Photoshop
Edit/create raster, bit mapped, images Limited ability to enlarge or shrink
Color Models
RGB CMYK
RGB
It uses varying amounts of Red, Green and Blue. Each color values range between 0 and 255. Using base 16 (hexadecimal), the values the RGB values range between
0 and FF. A hash tag indicates that the specified value is hexadecimal
0-9, A,B,C,D,E,F
Another color model:CMYK
The other model uses percentages of Cyan, Magenta, Yellow, and Black. Each model has a set of colors it can display; it’s called the gamut or.
color space Choose RGB if for Web. RGB; gamut larger than CMYK, which is used for
My Selected colors
Colors I selected Text on the banner #EFEFFA Banner Background #9DB2F3 Body Background: # EFEFFA Body Text: #666666
The basics
Start Photoshop (64 bit) File>New>name it Banner Width: 1024 pixels Height: 65 Background: Transparent:, Resolution 72 ppi (pixels per inch)
Opening window
Preferences
2 columns Workspace—essentials
Note small white triangles on some tools
Layers What are they? Show panel
Layers Rename Layer 1 to Banner by double-clicking it, and specifying the
new name Analogy
Transparent sheets of plastic Each having a single shape
Coloring the banner
Double-Click the Set foreground color tool,
Recall my selected banner color was #9DB2F3 Type that into color picker: (Don’t need the “#”)
Colorizing…
Click with Paint Bucket tool May hide under gradient
Layer Effects
Click fx in Layer panel
Fx…
Choose bevel and emboss: Check Preview Make adjustments as you see fit
esp Size
Add text
Select Type>Panels>Character Panel:
My selections:
I chose: Trajan Pro Bold , size 48 points (pixels) Q: ppi? #efeffa as the color Click OK
Add the text
Use horizontal type tool Type Your name , then vertical bar then Digital Portfolio
Q: What’s wrong? How fix? (Might find move tool useful) Watch what layer you’re on at all times Note the new (text) layer
Contrast Using Drop Shadow
Want text and banner to use contrasting colors… complementary colors OR, choose layer styles (fx) and choose drop shadow
Experiment with the parameters Try it on your own, now
Contrast via stroke
Put stroke on outside of each characater
Add contrast via stroke
Save so we can use on our index.htm pagesave 2xOnce as psdThen as one of the following:• Gif• Png• jpg
• On your own: Add a 1 px stroke (border) around the text• Choose to add the stroke to the outside of each character
Graphics formats
Three basic graph formats for Web GIF Jpeg Png (8 and 24) Tiff for print
GIF
Only 256 colors OK for graphics (banner probably OK as GIF) Handles transparency
jpg
Also jpeg 16 million colors
For photos on Web Some compression (lose some quality)
Note, also tiff, for print With, without compression
Png: Portable Network Graphics
8 bit is 256 colors Png 24; 16 million colors Png 8
Default for Photoshop
Back to photoshop…
Will save as a Photoshop Document (psd) Q: Why the psd? And png 8 Save in JMA260/Images as banner.png and banner.psd…
Save #1
Choose File>Export>Quick Export as png
Save #2
File>Save Save in JMA260/Images as banner.psd
Adding to index.htm
Replace the first row with:<tr><td><img src="images/banner.png" width="1024" height="65" alt="banner for Joe Smith’s banner“/> </td></tr>
Use the banner for our index.htm
Modify the index table, row 1 to include the png version of the banner
Rendered version
END