Week 03

Daniel Arnold, Campaign for Kaithe

Today

Homework 1&2 review
Depth of field (Camera fundamentals, cinematography, and post-production)
More on framing and composition
More on Depth of field (applied or digitally recreated)
New Intro HTML, Cyberduck.

HTML

*HTML - hypertext markup language

*Makes up the basis of web coding and was designed to be universal, able to be understood by any machine (past, present, and future)

*HTML is the simple, declarative foundation of building websites and can be paired with CSS and Javascript for more advanced, stylish, and interactive web experiences.

*Cycling between these three languages creates a dynamic, resilient building system that can withstand changing technology

SETUP

*HTML is comprised of various tags and attributes that act as the elements and functions of our site

*A standard opening tag looks like: <p> The format: <tagname>

*While a closing tag looks like: </p> The format: </tagname>

*These tags (in most cases) wrap around their content - whatever is contained between the opening and closing tag is information used by and displayed with that tag’s particular function

*REMEMBER to close your tags otherwise they won’t work! Don’t forget the “/” in your closing tags!

WHERE TO START:

1 <!DOCTYPE html> This tag establishes your document as an html page - this has no closing tag

2 <html> This tag marks the following code as HTML (has a closing tag that should come after all of your code)

HEAD

*The head section of your code contains all of the metadata to the site - metadata is not the content of the site, it is data that provides information about your website (relevant to search engines and back-end processes)

3 <head> This tag establishes your document as an html page - this has no closing tag

4 <title> Hello World </title> Title of the webpage used in the browser tab or bookmark

5 <meta charset=“UTF-8”> Establishes the character set the website will be using (The standard is UTF-8)

6 <meta name=“viewport” content=“width=device-width, initial-scale=1”> Scales the website depending on device screen width

7 <meta name=“description” content=“A description of this site that will show up in search engine results”>

8 <link rel=“stylesheet” type=”text/css” href=“main.css”> If using CSS, this is where we link our HTML code to our CSS code so that they can work with one another

9 </head> Don’t forget to close the head tag! Now, we move on to the c o n t e n t of the website

BODY

*The body of your website contains all of the visual content, functions, and features with which users will interact. There is a plethora of tags and attributes with unique roles and functions. We will explore a handful in the coming slides to customize your websites!

10 <body> This tag marks the beginning of your code relevant to the visual and functional content of your site

## </body> Don’t forget to close the body tag when you are done with the code for the content of your site

## </html> This should be the last line of code at the end of each project

TAGS AND THEIR FUNCTIONS

*The following tags can be used to create different visuals and effects on your site

<p> paragraph tag

Ex: <p>This is the text for my website. It’s really great! I hope you enjoy it.</p>

<h1-6> headline tag

This tag creates headlines in descending size (h1 being the biggest and h6 being the smallest)

Ex: <h1>Article Title!</h1>

<h2>Article subtitle</h2>

Nesting tags - These tags can be put inside other text tags to emphasize your text:

<i> italic - creates visual italics

<em> emphasize - for e-readers and digital accessibility: denotes emphasis in cadence and phrasing

<b> bold - creates visual bold

<strong> strong - for e-readers and digital accessibility: denotes importance and urgency

MORE TAGS (Links, Images)

<a href=”...”>Your text here</a> Creating hyperlinked text

Ex: <a href=”https://google.com”>This is a hyperlink to Google!</a>

<img src=”...” alt=”...” width=”...” height=”...”> Adding images, has no closing tag!

Ex: <img src=”images/image.jpg” alt=”Picture title” width=”400” height=”300”> **size = in pixels

<br> creates a line break, no closing tag

<pre>...</pre> text inside these tags maintain however many spaces, entering, and indentation you type into it unlike the standard paragraph or head line tags

HOW TO CREATE COMMENTS IN YOUR CODE:

anything inside of those brackets will grey out and won’t be read as code

FTP and Cyberduck

Video: FTP (File Transfer Protocol), SFTP, TFTP Explained 🎬
Video: How to FTP on Windows and Mac with Cyberduck (an FTP client) 🎞️

WHAT CAN WE DO WITH THE APERTURE?

WHAT IS DEPTH OF FIELD (dof)?

Video: Depth of Field: F/Stop Examples (1:46 min) 🎞️

Video: Blurry Backgrounds Are (Not) Cinematic (4:59 min) 🎬

BEST TO-GO SETTINGS for photography

Camera mode: Aperture Priority or Manual

Aperture: f/8 and narrower

Shutter speed: Above 1/125s

ISO: 400 and higher

Focus mode: Manual (zone focusing -- see image below) - Autofocus

White balance: Auto

IN LAB EXERCISE

Take two photographs with the same composition and exposure (1/125, f8, ISO 400):

Shallow depth of field
Deep depth of field

Optional: Take the same 2 photographs with the same composition, but different exposures:

1/250, f11, ISO 400
1/1000, f2.8, ISO 800
1/500, f4, ISO 3200

Photoshop

Create a shallow depth-of-field effect with an image that you’ve taken.
Camera Raw filter: adjust the exposure (adjust the underexposed and overexposed areas with histogram and clipping warnings for each adjustment)

Create lens blur effect with photoshop

Video: End of Buying Costliest Pro Lenses? NEW “Lens Blur” In Photoshop! Photoshop Tutorial 2024.

resources: Depth of Field

Photoshop 2024 Essential Training 👀

Chapter 5. Adobe Camera Raw

A tour of the camera raw interface
Enhancing contrast, color, and tone
Using the masking tool to adjust a portion of an image
Saving and opening files in Photoshop

Chapter 14. Smart Object Essentials

Creating and editing smart objects
Opening Raw Images as Smart Objects

Chapter 17. Essential Filters

Filter essentials
Applying filters non-destructively
Creating blurring effects
Applying Camera Raw as a filter

After Effects Guru: Advanced Photoshop Integration 🟩

Chapter 8. Creating Realistic Focus Effects for Backdrops and Keying

homework #3

DUE: 9/20

Part 1: Take two photographs with the same composition and exposure.

One photograph with a shallow depth of field and the second one with a deep depth of field.

Try creating multiple pairs of photographs with shallow and deep depth of field to experiment with shutter speed, aperture, and ISO. Compare your experience behind the lens with the tutorial above (The Lens Blur effecft) by creating a shallow depth-of-field effect with an image that you shot.

Post one shallow depth of field, one deep depth of field, and one Photoshopped Field Blur image to your website on a new page and link this new page to your homepage. Please make sure the images are under 2 MB in their file size.

Part 2: Using the Camera Raw filter in Photoshop, adjust the exposure of two images.

Using the tutorial linked above, follow the steps that show how to deal with underexposure, clipping warnings, and the histogram.

In addition, use the straighten tools in the Camera Raw filter to level and straighten your images.

Save the before and after images and post them each side by side on a new page of your website making sure no image is greater than 2 MB.

Page updated

Google Sites

Report abuse