TOWSON: FALL 2017
Instructions on how to use the "Actions" window in Photoshop, to resize your images:
1) Once Photoshop is open, and you have images (saved in a single directory) to work with, open the "Actions" window.
2) Open an image, create a new "Action" (just like a new layer in the layers window), name your actions, and start recording.
3) All images should have a resolution of 72 pixels per in. I'd recommend keeping your full size images under 1000 pixels, approximately 400 - 700px; while thumbnail images should be 200px or less (roughly 100 - 150px).
4) If you record these actions, resize, desaturate, etc… Then, using Photoshop, you can choose FILE > AUTOMATE > BATCH. The "Batch" window allows you to add actions to multiple files in a single folder. Be careful, there's no way to go back (no "command Z"), so you might want to back up your own work!
Week #4
* Talk about "PROJECT #1"
examples :
Beatriz Martin Vidal
Chuck Close
Banksy
Class work:
*Review file management
Open up "Dreamweaver"
*experiment with some CSS, maybe try something we haven't talked about...
CSS3
Review:
**External Style Sheets
<link href="365.css" rel="stylesheet" type="text/css" >
CSS:
an
example of a CSS page
body{background-color:black;}
styling links
a:link {color:#FF0000;}
h1{
background-color:#CC0;
padding:.5em;
text-align:center;
}
open "
image_gallery.zip"
Open up Photoshop:
review file formats:
.
jpg, gif, png, pdf, txt, html
Using the "Actions" window
*FILE > AUTOMATE > BATCH
*
CSS Opacity
More CSS (continued from week #3)
Center divs using CSS:
#wrap{
text-align:left;
max-width:1000px;
min-width:600px;
margin-left:auto;
margin-right:auto;
width:60%;
background-color:white;
padding:10px;
}
****changing the background with CSS
....... CSS3:
html{
height:100%;
overflow-y: scroll;
background: url(images/bg.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Google fonts
why not use "
daFont.com" ?
ID vs. Classes
* htmldog.com
( review : reading materials )
* CSS styles can be applied to general page elements, CSS Classes, and specific items:
img { border: solid #000 10px; }
this applies to every image tag in the HTML document
.classy { color: red; }
this applies to a CSS class called classy.
<span class="classy" > Example of classy red text </span>
#about { background-color: #ccc; }
This rule applies to just the specific element that has an ID value of about:
<div id="about"> About stuff goes here </div>
Example of good CSS positioning
Here's the CSS code
by Larry Ullman
Homework :
"Work in progress" w/CSS is due next class.
- This means that (next week) you should have a "rough draft" of your website.
- Please have your images, CSS, and HTML pages neatly saved in one directory (proj_1).
- All html pages should be properly linked.
- "Lorem Ipsum" text is alright for now.