Critiques on Instructions Project

1. Very text document like
There are occasions for that but this being the
first thing they see when they open the box, should be a little more
exciting and attention grabbing.  I wanted it to be immediately
identifiable as instructions.

2. Layout should immediately convey... first step1, then step 2.  Its very important when designing
to think of what the piece is supposed to do, and how can it best covey that.  Another thing that just didn't feel right about the first one wasthe phones.  They felt as though they were just used to quickly fill a
hole rather than used as a part of the whole design.  Notice on the new one how the phones have the rich diffused shadow that gives they the feel of really being physical objects, and how the phone breaks out of the border.  Anytime I have a project to be printed in house with no bleed, I try to think of a way to make that work for me rather than against.

3.  I often see big differences in designers styles when
creating in ID or PS. 
It usually becomes flatter and more Word Doc like.
And that is because InDesign is just MS Word on steroids.  It is
essentially just a page layout and text editing tool.  I always use it
(or Illustrator) for my final export to get nice reliable vector text,
but I always design it in photoshop first.  Trying to design in InDesign
limits you and because of the differences in how they work you
subconsciously even don't do things you would do if you were in
photoshop. 

Linking Images

Absolute vs. Relative

An absolute link is if the URL and file name can be found from anywhere on the Web, not just from a single Web site. An absolute link specifies a fully-qualified URL; the protocol must be present in addition to a domain name, and often a file name must be included as well.

A relative link specifies the name of the file to be linked to only as it is related to the current document
This link will be valid only from within the same directory that jpg.html is saved in.

For example the absolute link for the files I work from are...
http://www.affinity4.com/misc/email/a4-email/2011.7.5_ConsumerNews
(for the consumer news letter).

Paste the path and before the slash add the a4 info.
Or whatever server you work from.

Notes from EPAC Interview

CMS =Content management system, allows content creators to submit content without requiring any technical knowledge of html.  (example = joomla).

HTML = building block of all websites, allows image & objects to be embedded and can be used to create interactive forms

CSS = Cascading style sheets = define the layout and appearance of text and other materials

Make efforts to memorize these.

Buttons & Verticals

Buttons
If you do fancy bevels/drop shadows for website >it has to be made into a piece of art> so it is best to minimalize amount of work on objects that are repeting.

Verticals
The outer edges need to be matching solids so the graphic will be portable (ex. Andy Andrews).

All about click generating. 

HTML in the beginning

HTML = Content
CSS = Design

Start with New CSS & New HTML file

Save everything in one folder. 
Make image folder, make background. 


Padding is inside the box.
Margins are outside the box.
Padding goes bottom, left, right, top (0)
Margin left = Auto (0)
Margin right = Auto  - this centers it in the screen.
(leslie scan your picture and add it here).

Header = H1 tags

Span asks what to define something as.
Like for example half red text half black text.

Headlines don't get class.

Class = many different types of formats for a single HTML tag. 
The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element.

Change one page -

You can't do rollovers in emails (can't set rollover colors)
You can do animated gif's in emails.

(leslie wrangle your notes and put them here)

Reflection on computer/tv screen

To set up shortcuts (these will help with any action you do repetively)
Preferences > Over 100 history states
Window
Workspace > keyboard shortcuts & menus > application menus (be careful)

Reflection

  1. Make solid color larger.
  2. Make shape with gradient mask (white - transparent foreground).
  3. Keep more than you will need.

Split > b > move tool
copy
fix vertical > touch > complex reflections

Use marquee select where reflection the touch
Apple t> command
Command d > select
Shift click to turn mask off

(leslie scan notebook page to understand this)

Goals by January 2012

1. Edit html at site level.
2. Basic understanding of web standards. 
3. Increase photoshop knowledge; as well as continue to use & learn shortcuts. 

Strengths: Very willing, eager to learn as well as help. Good with organization & timelines, excellent with quantity of work (easily competitive with ad agency).

Score: 3, 2, 4, 3 -- Need to get all 4's for raise.

Weaknesses: Quality (I'm ambiguous on this one, but with the above in mind I'm gonna roll with it.

Play more with divs (divs are the boxes).

July 4th week continued..A4 Digital Newletter



This is an electronically formatted newsletter for Affinity4, it can't be shown in it's full size because it's entirely too large.  T created the original template losely based on a header and footer that I pulled together, and this month's version has been built half in Dreamweaver. I will post a functioning link to the entire piece when it's completed next week.