Lesson 10 - Using Images

LEARN

Today's Agenda

• Using Images

Daily Reading

• Read 2.3 Comments
• Follow Reading Schedule

Professional Image

• Every time you communicate you leave an impression
• Build the image that you want
  • Be a blogger
  • Be a curator
  • Use each communication to reinforce your image

Today

• Use free images and video from the internet

Goal - Communicate with Style

• Visual content connects with the emotions
• Persuasion requires feeling
• Use accent graphics on every page
• Go for highly styled pages

Using Images & Video

• Use what others produce
• Understand licensing
• Stay out of the gray area

Ethics Go Beyond Legal

• Consider that your actions will appear in the news
• Everything you do is observed
  • Camera
  • Electronic footprint
  • Purchase info

Legal Issues

• Intellectual Property is protected by law
  • Text
  • Images
• If you make money you are a legal target

Image Licensing

• All images are copyrighted
• Read the License Agreement
• Know the history of every image you use
• Options
  • Create your own artwork
  • Purchase images
  • Get permission to publish images
  • Open source licensing - Creative Commons

Read the License Agreement

• Understand the terms for using material from others
• Open Source - Creative Commons Agreement
• Always attribute work you use
• Invite collaboration

Legal Issues

• Copyright
• Trademark
• Patents

Produce your own

• Types of Images
  • Raster Images - Adobe Photoshop
  • Vector Images - Adobe Illustrator
• Image Editor Software

Stock photos

Images you pay for

• istockphoto.com
• gettyimages.com
• everystockphoto.com

Sources of Free Images

Respect the license

• unsplash.com
• pexels.com
• freeimages.com
• google.com/imghp

Icons

Review these sources of Icon artwork

• fontawesome.com
• glyphicons.com
• glyphish.com
• material.io/icons
• flaticon.com

BUILD

Great Design

• Be creative
• Leverage your projects

Adding Video

• Search for videos on Google (eg. TED YouTube)
• Some videos support embedding (use these)
• Right click on video (choose Copy Embed Code)

```

```

Unsplash

• unsplash.com
• Tower Photo

Unsplash

• Give me a bear photo that is cropped to 600x400

<img src="https://source.unsplash.com/random/600x400/?bear">

View My Solution

• Visit my website
  • Visit Project 1
  • Visit Project 2
  • Visit Project 3
  • Visit Project 4
• View page source and copy to your page

HTML Page Template

• Create your own page template
• Use mine as a model Sample Page Template
• View the source code in the browser (Ctrl-U in Firefox)
• As you learn new things update your template

HTML Validator

• Validate your pages to check our HTML
• HTML Validator
• Point to your page and it will check it
• Bookmark this page in your Toolbar

Start work on Project 4

• Project 4 Instructions