PS Frame Animation

PS Frame Animation

Open Photoshop
NEW - 300x300
Transparent

Add Letter G - size 300
Duplicate layer 3 times to get 4 layers


Window Time line. - select frame animation
Chose 'TINY' menu - select make frames from layers

go to each layer - manipulate it - colour -  transform

make sure the last frame transitions to the first frame nicely

add watermark

1. G R A D E - each letter separately



G - colour change
R - Rock left then right - colour change
A - full rotate - colour and font change
D - smaller return - larger return - font - colour - warp text
E - Colour, font -rasterize then FILTERS- and LAYER EFFECTS (5 changes to each E)

2. Predicted - spell it out slowly then reverse and fade away!

 P - Pr - Pre - Pred   etc 
- colour blinking
NOTE: to FLIP multiple layers - high light the layers - choose LAYER - Arrange - reverse

-add water mark

3. Your First Name - first name - do something great
4. Your Water mark - do something greater.
5. CREATE YOUR MARK -a letter - two numbers - a percent sign

PLACE everything in a 5x5 table try this    style="width: 90%;"
add colours, border, border colour, 
row 1 SPAN all 5 - Predicted goes here
row 2 G R A D E
row 3 Letter blank cell NUMBER NUMBER %
row 4 SPAN all 5 - first name
row 5 SPAN all 5 - water mark

<div style="background: lightpink;">

</div>

table demo

table demo

Predicted Grade

Table

Tables

Predicted Grade

example table code:

<table border="10" bordercolor="blue">

  <tr>

    <th colspan="3" bgcolor="red"></th>

  </tr>

  <tr>

    <td bgcolor="saddlebrown"></td>

    <td></td>

    <td></td>

  </tr>

  <tr>

    <td></td>

    <td></td>

    <td></td>

  </tr>

</table>

Customize YOUR blog

Customize YOUR blog

Avatars - two of them

• https://getavataaars.com/
• https://avachara.com/avatar/
• use one for a favicon https://www.favicon.cc/
• and the other for an image gadget

Banner
https://www.bannersnack.com/

• 1500 x 200
•  – course – semester – year – first name  - etc...

Blog archive (gadget)

Link list of websites (gadget)

Predicted Grade

this is moccasin

Predicted Grade

------------------------------------------------------------------------

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;

}

-----------------------------------------------------------------------

<div style="background: peru;">

</div>