In class Tue Sept 7th - Day 3

.

 

Photoshop Basics

Bit Map vs Vector Graphics

memory vs math

Resoultion

72 dpi traditional screen resolution
180 dpi lowest printing resolution
300 dpi + good printing resolution
600 dpi + high resolution printing

 

File Types

Working File Types

---- Photoshop = .PSD = working file, the one you keep forever

End Product Files

---- JPEG = .JPG = web and email (Flickr) file
---- GIFF = .GIF = web file
---- TIFF = .TIF = full quality print file
--- RAW = .RAW = raw camera data uncompressed file

---- Portable Document File = .PDF = compressed print file

File Management in Photoshop

- Opening a file
- Save / Save As a file
- Windows
- File --> New

 

 

 

 

 

Laying out a design in Photoshop

before Photoshop

1) paper size

2) single or multiple designs on the page?

in Photoshop

3) size and resolution

4) define print area 

* Offset press - requires cut lines, a bleed and image area to fit within the paper size (print on anything thats flat)

* Laser Printer -  1/4",1/4",1/4", 1/2"
-- standard sizes 8.5x11",8.5x14", 11x17"

* Inkjet printer -  1/4",1/4",1/4", 1/2"
-- standard sizes 8.5x11",8.5x14", 11x17", 19" wide, 24" wide, 36" wide, 42" wide

5) Define the Middle

6) save as a template file named appropriately as a .psd.

ex LP_cover_Template.psd

Walk Through. Creating an 11x17" mini poster for a local event.

 

 

Assignment #1

create and save a template at 180dpi for each of the following:

• movie poster - with guides for unprintable border and center
  
• 8.5"x11" business flyer - with guides for unprintable border and center
• business card - with center guides
• postcard - with center guides
• bumper sticker - with center guides
• CD cover - with center guides

Work on Assignment

In class thur Day 2

The creation of reality!

Early Manipulations

Early Alterations

Photographs have always lied

The LA Times 2003

Photo tampering through out history

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

How to use a Mac

Login name = student
Login pass = artist

1) Desktop
2) The Dock
3) Top Menu
4) Making a new Folder
5) Renaming files and folders on the desktop
6) Opening a program
7) Opening a file
8) Saving a file
9) Closing a program


Using Safari
1) Tabs and Windows
2) Searching
3) downloading a file

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

 

 

Free Photoshop

FireAlpaca & the Gimp

Quick Intro to Photoshop

1. Making a new document

To do this you need to know what you want to make. the first question is, is the final product for print or screen. There are different rules that apply.

for Print
- you need to know the width and hight of the final product. Is it a movie poster? a post card? a flyer, will it be in a book, if so what size book?

- you need to pick a resolution. This is how many dots appear in an inch, generally referred to as DPI (dots per inch). 

180 dpi = minimum print resolution
300-600 dpi = professional print resolution 

for Screen
- you need to know the pixel dimensions for the final product. This changes a lot depending on what form of media you need. Adobe has a lot of templates ready to go, so you can usually find what you need in there. 

some examples
HDTV = 1920 x 1080
4KTV = 3840 x 2160

iPhone X = 2436 x 1125
Pixel 3a = 2220 x 1080

Macbook Pro 13" = 2560 x 1600
Lenovo ThinkPad 13" = 1920 x 1080


2. Saving a document

Photoshop is the great image translator. It can open up almost any image file type and can save into most any image file type. 

the most important file you save is the working file. This is always a photoshop file also known as a 'PSD'. As long as you have the original PSD, you can make any 'final' files.

PSD = working file, has layers, can make all other files

JPG = flattened file, good at compression and photo realism.

GIF = flattened file, good at transparency, can animate, limited to 215 colors, good for graphics

TIFF = flattened file, no compression, photo realistic

RAW = original camera file, uncompressed, un-rendered, pure unaltered image data



3. The tool bar

Each tool in the tool bar has sub tools. To see them jut click and hold to see the pop up menu. Hover over a tools icon to see how a tool works.


4. Getting an image from the internet into Photoshop

1) search for an image

2) make sure the smallest side is at least 1000 pixels

3) make sure to download the largest version of the image

4) drag and drop the image onto the desktop. if it won't let you do that, Hit 'control' and click on the image. From the pop up menu, choose 'save image', and save it to the desktop. If it will not let you do that, hit 'shift' + 'command' + '4' and select the part of the image you want to take a screen shot of. The file will appear on your desktop.

 5) drag and drop the image file (usually a jpg) onto the Photoshop icon in the 'dock' at the bottom of the screen. It will open as a new tab in photoshop.

6) use the hot keys 'command' + 'a' to select the image

7) use the hot keys 'command' + 'c' to copy the image data

8) navigate to the tab withe the image you want to add to

9)  use the hot keys 'command' + 'v' to paste the image data into the new document. This image will appear as a new 'layer'


5. Layers

Layers are a very useful aspect of Photoshop. They stack in visual order from the top down, and you can have as many as you want in a single document.

- the background layer
- layer visibility
- naming layers
- changing opacity and using blend modes
- erasing to create 'transparency'

Finding and Installing new fonts

Free Fonts - dafont

Double click on a font to install it!

Project 1 Assigned


Blogging
- How to hook up and use a blog.

* if you took the digital is fundamental class, you can use the same blog.


A blog is many things, a personal website, an archive of media, the ability to broadcast a message to a greater audience, even an art piece in itself. 



Lets make a blog using Blogger
1- Search for Blogger
2- Login using your school email and password
3- Create a new blog

4- Make a test blog post

Posting to your blog is similar to composing an email. You need to put in a subject line and then fill out the body of the email (blog post). You can post text, images, videos and links. 

Show Joe your post and email your blogs URL before you leave!

 

 

 

Welcome Day 1a

Hello and welcome to the Art213 Intro to Digital Media blog. This blog contains up-to-date information on the class, assignments & projects. There are also important links from this blog to other class resources. This blog is the hub of the class, so don't forget to check if frequently. Make it an icon on your smart phone. I usually updated the blog within 24 hours of class.

Part of your first assignment is to bring your laptop to class and show me the bookmark to this site.

Make a link to this blog on your smartphone

1) open Safari or another web browser on you phone

2) add a bookmark to the home screen

The Intro to Digital Media class presents an introduction to print based media through image manipulation & graphic design, time based media through motion graphics, and 3d design and 3D printing. These areas of media are explored through the use of Adobe Photoshop, TinkerCad & Makerware, as well as a hand full of useful shareware and web applications (Google Photos, YouTube, & Blogs).

We will investigate the mechanics of creating Digital Media as well as consider the roll of media within American society and it's potential to alter our society. We will also look to consider the many facets of technology that interact with digital art.

Creating Reality with Imagery!

.

.

In 2017, Secretary of State John Kerry referenced this photograph when making a speech. He presented the image to point out how awful the Syrian chemical attack to present a reason for why  America should go to war. Unfortunately the picture wasn't from Syria. It was from Iraq and form the year 2003! Photographer, Marco di Lauro said he nearly "fell off his chair" when he saw it was being used to promote a war in Syria. "It's getting pretty disturbing to see how far our politicians, both Republican and Democrat, are willing to go to drum up support for a war nobody wants"

Ultimately, it is really hard to know the authenticity of an image without doing specific research on it!

Another factor to consider is how humans utilize visual information. Humans have two modes of visual awareness. 

- Through quick reflection and auto reaction. Used to navigate our everyday experience.

- Through thoughtful consideration. Used to gain a deeper understanding.

 

 

Lets take the Awareness Test!

 

 

 

Examples of Digital (New) Media Projects

 

 

  

 

 

  

How to use a Mac

Login name = student
Login pass = artist

1) Desktop
2) The Dock
3) Top Menu
4) Making a new Folder 
5) Renaming files and folders on the desktop
6) Opening a program
7) Opening a file
8) Saving a file
9) Closing a program


Using Safari
1) Tabs and Windows
2) Searching
3) downloading a file

Summer Break

. .

logo project

In class Thur April 30th

Project 6 Blog Makeover
For the final project you will be changing the fonts, colors and creating images to theme a blog up on the "Blogger"web service. 


You need to do the following


1. Create a Blogger account [click here]
(Blogger is part of Google so you can sign in using your school gmail name and password)
2. Make a Favi Icon
3. Make a visual for your Header
4. Pick fonts and font colors
5. Pick Background Colors and/or Images
6. Make 5 posts with the 5 best designs you created from the projects in this class (CD covers, Movie Poster, Logo, Motion Graphic)






Making images for the web
- You can just rag and drop an image from a blog!
- You can look up dimensions
- 72dpi but really its about pixels
- Flatten and use Save for Web to make a .jpg
- Upload it to your blog. The Banner will go in the "Header" of your Blog in the "Template" section.

The "background" image can be changed under " "Customize" in the "Templates" area 

Making a Favicon

- Create an image 16 pixels X 16 pixel image in Photoshop

- Use Save for Web to create a .jpg

- Go to favicongenerator.com to translate it into a .ico file

- Upload your file onto your blog under "Layout" at the top. 

Putting Links on your Blog
- Under "Layout" select the area you want the links.

- Hit add Gadget and find the Link List. (notice there are a lot of things you can add to your blog) 

- add your link and the link name and save





Work on Projects

In class Tue Apr 28th

Check in on Zoom at 2pm look for a link in your email and on Google Calendar.

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

Work on Projects



Ways to get video files to use in Photoshop:

- Shoot it yourself. Pick up your phone, turn it horizontal and start filming!

- Get it online:

• free stock video check out Makerbook
• Pexels and Stockfootageforfree
• Open Source Archive.org
• on Youtube using Youtube to MP4

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
'Exporting' your video out of Photoshop

Step 1: Under 'File' go to 'Export' then select 'Render Video'

Step 2: Set up your video as seen below. 

Make sure to save it to the Desktop

It will take a few minutes to export

The .mp4 file will appear on your 'desktop'

In class Tue Apr 20th

Today we will have a quick meeting online at 1:30pm!

Check your email for the zoom link

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-

How to animate layers in Photoshop

Time 23min 34 sec

Using the Timeline 0 - 5:25

Moving a graphic (position change) 5:26 - 11:50

Moving Text (opacity change) 11:51 - 15:54

Moving an Image (create a smart object and transform change) - 15:55 - 23:34