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  One 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

Add a

links  Make the s be links About Me /a> Copy and paste 9 times

Add null links, plus s  Use copy/paste

Paths  Absolute and relative  Absolute: The complete URL, starting with “  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 R ed, G reen and B lue.  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 print

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 “#”) Click OK

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 page save 2x Once as psd Then 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 J MA260/Images as banner.psd

Adding to index.htm  Replace the first row with:

Use the banner for our index.htm  Modify the index table, row 1 to include the png version of the banner Rendered version Read about pseudo classes (A word document)

END