Photoshop - Infographic

Infographic

1. What is an infographic? Give a definition - best to use your own words (no mark otherwise)

2. 4 examples (in a table) - make it colourful

4 Infographic Examples
Jeep	cigars
golf	scotch

try this: <table border="10" bordercolor="blue">
Consider the layout of the examples, choice of colours, images and words. Make your infographics as pleasant to look at.


3. Create your own - use photoshop
   1500 w x 1000 h
 - use of layers
 - naming layers
 - cropping tool
 - filters
 - text tool

title of 1st infographic: 

About me

title of 2nd infographic:

How-To Guide
(a step by step instructional infographic)

title of 3rd infographic:
About This

TOPICS for the 3rd:

Woodstock 50th anniversary

Howard Schultz

Huawei

Brexit

Apollo 11 - 50 year Anniversary

Apollo 11

50 Anniversary of the Moon Landing

July 20, 1969

Real?

Provide 3 reasons why it's real

Provide 3 images to prove it's real

Provide 1 embedded YOUTUBE video to prove it's real

(all in table 1)

*match bgcolor of cells between words and corresponding picture

Fake?

Provide 3 reasons why it's fake

Provide 3 images to prove it's fake

Provide 1 embedded YOUTUBE video to prove it's fake

(all in table 2)

*match bgcolor of cells between words and corresponding picture

Video

ADDING A BACKGROUND IMAGE
<div style="background-image: url('http://dl.dropbox.com/s/whm9i7s7o88llle/260px-Aldrin_Apollo_11_original.jpg');">


</div>

to limit the width of your table to 75% of the page

<table style="width: 75%">

Blog Enhancers

Blog Enhancers

create 

•  https://www.blogger.com

 fix

•  make the theme simple
•  set the width to 1500 (Layout-Theme Designer)

enhance

• add Blog Archive (set to Hierarchy)
• add a link list 

        (5 students plus this course blog{at top of list})

• add a banner http://www.bannersnack.com/

              custom size 1500 x 200   (Edit Header)

• alien avatar http://chir.ag/alien (image gadget)

favicon

• design it https://codepen.io/thatguycraig/pen/kIeAK
• make it  https://www.favicon.cc/

NOTE: background gradient : FOUND here

turn their code:

div {
    background: linear-gradient(to bottom, #cc00ff 0%, #ff0000 100%);}

into our code - note the difference using STYLE= 

<DIV style="background: linear-gradient(to bottom, #cc00ff 0%, #ff0000 100%);">

</DIV>

Predicted Grade

Predicting your grade at interim 

• 4 transparent animated GIFs
• 2 numbers
• 1 % sign
• 1 letter

• Add a background colour

<div style="background: peru;">

</div>

Use the following CODE to fix the background issue behind the transparent images.

Go to:

Design - Layout - Template Designer - Advanced - (scroll down to) - Add CSS

then paste in the following:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: 0 !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

PLACE your ANIMATED gifs INTO a TABLE
place bgcolor ="red" behind all cells
choose your own colors
colour options

Predicted Grade