1. So far  Reviewed CSS  Added a table  3 rows  Copy/paste from course syllabus Anchorsandlists.pptx 01/22/2016

2. 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

3. 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?

4. 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

5. Add a

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

7. Add null links, plus s  Use copy/paste

8. 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

9. Row 3

10. Save and render: should be on USB

11. Publish  i.e. copy index.htm, USB  to pub/jma260  test

12. 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

13. 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

14. Photoshop  Edit/create raster, bit mapped, images  Limited ability to enlarge or shrink

15. Color Models  RGB  CMYK

16. 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

17. 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

18. My Selected colors  Colors I selected  Text on the banner #EFEFFA  Banner Background #9DB2F3  Body Background: # EFEFFA  Body Text: #666666

19. The basics  Start Photoshop (64 bit)  File>New> name it Banner  Width: 1024 pixels  Height: 65  Background: Transparent :,  Resolution 72 ppi ( pixels per inch )

20. Opening window

21. Preferences  2 columns  Workspace—essentials  Note small white triangles on some tools

22. Layers  What are they?  Show panel

23. 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

24. 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

25. Colorizing…  Click with Paint Bucket tool  May hide under gradient

26. Layer Effects  Click fx in Layer panel

27. Fx…  Choose bevel and emboss :  Check Preview  Make adjustments as you see fit  esp Size

28. Add text  Select Type>Panels>Character Panel:

29. My selections:  I chose: Trajan Pro Bold, size 48 points (pixels)  Q: ppi?  #efeffa as the color  Click OK

30. 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

31. 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

32. Contrast via stroke  Put stroke on outside of each characater

33. 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

34. Graphics formats  Three basic graph formats for Web  GIF  Jpeg  Png (8 and 24)  Tiff for print

35. GIF  Only 256 colors  OK for graphics (banner probably OK as GIF)  Handles transparency

36. jpg  Also jpeg  16 million colors  For photos on Web  Some compression (lose some quality)  Note, also tiff, for print  With, without compression

37. Png: Portable Network Graphics  8 bit is 256 colors  Png 24; 16 million colors  Png 8  Default for Photoshop

38. 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…

39. Save #1  Choose File>Export>Quick Export as png

40. Save #2  File>Save  Save in J MA260/Images as banner.psd

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

42. 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)

43. END