Difference between revisions of "Class:Digital Portfolio 2015/Week 4"

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(→‎Image Processing & Image Renaming Tricks)
(→‎Video Notes)
 
(One intermediate revision by the same user not shown)
Line 79: Line 79:
  
 
=== Section A ===
 
=== Section A ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_01_ImageOptimum.mp4 Image Optimum Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_02_FontSquirrel.mp4 CSS Web Fonts - Font Squirrel]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_03_UsingTypekitOnYourSite.mp4 Using Typekit on Your Website]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_04_BetterFinderRename.mp4 A Better Finder Rename Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_05_PhotoshopImageProcessor.mp4 Using Image Processor Pro in Photoshop]]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_06_CSSDivAndSpanAndBasics.mp4 CSS: Div, Span & Refresher]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_07_CCCPositionProperty.mp4 CSS: Position Property]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_08_CSSFloatProperty.mp4 CSS: Floats]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150604_MPS_DPA_09_CSSResetAndNormalize.mp4 The CSS Reset & Normalize]
  
  
 
=== Section B ===
 
=== Section B ===
−
 
+
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_01_BetterFinderRename.mp4 A Better Finder Rename Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_02_PsImageProcesserPro.mp4 Using Image Processor Pro in Photoshop]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_03_CSSDivSpanAndRefresher.mp4 CSS: Div, Span & Refresher]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_04_CSSStylingLists.mp4 CSS: Styling Lists]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_05_CSSPosition.mp4 CSS: Position Property]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_06_CSSFloatsAndReponsiveOverview.mp4 CSS: Floats & Responsive Overview]
 +
* [http://assets.choppingblock.com.s3.amazonaws.com/video/screencast/20150529_MPS_DPB_07_CSSReset.mp4 The CSS Reset & Normalize]
  
 
== Files ==
 
== Files ==

Latest revision as of 14:10, 6 June 2015

Last Week

  • The size of the web
  • Save images for the web
  • Web Fonts
  • Bring in some images!

This Week

  • Image Processing & Image Renaming Tricks
  • Divs & Spans -vs- classes & ID's
  • CSS Floats
  • CSS Normalized
  • CSS Position
  • CSS Offset
  • CSS Sliding Gallery
  • CSS Background Images
  • Tips for styling HTML headers

Notes

Image Processing & Image Renaming Tricks

In class we discussed a few different solutions for streamlining a photographers batch processing needs.

I have updated the Handy Utilities reference page for you here.

A Better Finder Rename (http://www.publicspace.net/ABetterFinderRename/)
Insanely quick and useful way to rename files and folders.
Trial download available from the website, also available in the Mac App Store here.
Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)

http://photoshopscaresme.com/new-version-russell-browns-image-processor-pro/

Fantastic image processing extension for Photoshop/Bridge
Direct link to download right here.

Clearing your CSS Slate Before' You Start

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

CSS Cheat Sheet

Spans and divs are TAGS
Just like <h1>, <img>, <ul>
All tags can optionally have attributes of type class or ID
<div class="header"> is styled in CSS using .header
<div id="header"> is styled in CSS using #header
<h1 class="highlight"> is styled in CSS using .highlight

CSS Floats

CSS Positioning

CSS Overflow

The CSS Box Model

CSS Background Images

Video Notes

Section A


Section B

Files

Assignment

If you did not complete the codecademy.com assignment from last week, please do.
Review as many photo portfolio websites and themes as you can.
Study how they are broken down.
Study how the sections (photography) is organized.
Outline (written, on paper) what the goal of your website is.
Are you building a website for your thesis only?
Are you building your new professional site and featuring your thesis?
Wireframe (sketch) your website sections and your main navigation
Gather Content
Images
About Me / Contact Me - should be one page imho.
How will you link to (or feature) friends?
Blog?
Twitter?
Newslist Signup?
Instagram?
Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2015/Week_4&oldid=278"