Casey Reas Notes & Site Design Using XD

Casey Reas


His 6 minutes video on “How to Draw with Code”, vimeo “video of his works”, website, twitter,


Can’t find the background graphic of Logo.


Iterative Design


Investigate H.264 and mp4 video coding

After working with A/E, it came to me that I did not understand H.264 and mp4 video coding.The relation between H.264, and mp4 and mov files.

I stack with rendering my video mp4, and it kept me render as mov file.

Finally, Adam suggested me to use another  Adobe Media Encoder or some other application to convert mp4.


Alternative to Adobe and Other Tools

Affinity Photo  $49 Similar to Photoshop

Affinity Design  $49 Similar to Illustrator

ArtRage  $79? ?

Gimp open-source raster graphics editor – Similar to Photoshop

InkScape ?

Sketch for Mac  a tutorial $99 a proprietary vector graphics editor for Apple’s macOS
Sketch – Look at the CSS Attribute of feature to develop HTML and CSS.
Sketch Plugin – AutoPlugin-How to align center horizontally & vertically.

Webflow a tutorial – drag and drop tool built for designing websites

Squarespace – hosting?




Background transparency CSS

transparency of background color:

<!DOCTYPE html>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;

This is some text that is placed in the transparent box.