Week 5

Fireworks Terms

Layers –> Like Photoshop layers; All of the top layers is shown and the bottom layer is covered by the layers above it.
Frames –> Controls the image, don in animation.
Guides –> Divide up the image. Shows lines without effecting the image.
Slices –> “chops” the image up
Web layer –> Holds slices and is not editable

Uses of Banners

  • Masthead of page
  • Seen in social media sites
  • used as the footer of sites
  • most are advertising banners
  • can be static or animated
  • using reflect style and color scheme/treatment of the website


Texture give an appearance to the surface of an object. A pixel is a square dot while a point is a round dot. Points are the fundamental part of design, it is what makes lines, shapes, and volume.

A line is two or more points connected  A diagonal line has energy and many diagonal lines gives on the edge feeling. Horizontal lines provide texture to a design. Jagged lines make it feel dangerous and frantic. Gentle curves make everything feel relaxing and smooth.

Shapes are two end points of a line coming together. Most shapes are circles, triangles, and rectangles. Free form shapes are abstract and have random and irregular lines. Rounded corners create a more organic smoother feel then a square.

Rotation also make them more organic and gives movement to the page.

Perspective and proportion helps to create volume and depth to a page in a 2d space.

Light and shadows gives cues to depth and volume, a drop shadow gives the illusion the object is above the surface. A linear gradient can create movement. Radial gradient gives light and darkness to give volume and depth to an object.

Patterns add richness and interest to a design.


Week 4

CSS or cascading style sheets are the rules that guide design, typography, and the layout of a page. It is in fact the instructions for the browser telling it how it should look. CSS is what gives flexibility to your layout, it will provide hierarchy, and makes it possible to update lots of pages at once.

Good typography is rather a simple to figure out, it has to work with the message that the words are giving and with any other typography that is going on on the page. Good typography has good hierarchy, emphasis on important context, and a good relationship to the page. Browsers implemented @fontface CSS property which allows you to link to any font file and out it on a page. The choices for  font are/weight/variant/style/size.

ID’s are elements you can have only one of and the page can have only one. When IDs have a #comment in the url the browser find it on the page. Classes on the other hand can use the same class on multiple elements and can use multiple classes on the same element. CSS does not care if it is an ID or class but Java Script does. At the end of the day if you don’t need them don’t use them.

CSS Layouts

1. Fixed-width- Lack of control

2. Fluid/Liquid- Proportion to the browser window

3. Elastic- width set proportion to a design elements

4. Hybrid- uses fixed and fluid layouts

5. Responsive- uses different stye sheets based on audience

6. Fluid/Elastic Grid- Uses a grid; good for maintain order inside a container

Tools for Image Optimization 

Depending on the file type or size, the link above will help optimize the image.

Week 3

One of the most important things to do as a graphic designer is to make sure you have clearly communicates your ideas to other people. If something is more important, it needs to be have more importance on the page. Usually done by making it bigger and bolder. The color can also be changed  but it needs to be changed to the right that will influence how the person feels about the page (see last week blog). Contrast brings out thing that are important when there is more then one text on the screen. Alignment gives order to the page/how it will be read. Proximity is a good way to contact content together. The need to space every thing just right on a page make it a successful page.

More about hierarchy

There are three types of photo files I want to take about, jpg, gif, and png. A jpg or joint photographic expert group is a “lossy” file; a small part of the file is compressed. It would take a lot of saves to notice the compression. Jpg work best if you are saving photographs. A gif or graphic interchange format is a lossless compression, is preferred for simple graphics, and animation is possible with a gif. Gifs are best for type, vector, flat, or hard edge files. Png or portable network graphic, was done to replace older gif formats and it is also a lossless compression. Pngs work best for web images or images that require transparency. All of these formats need to be optimized to help them download faster. This can be done be reducing the size, colors, palette, and through compression. Images should be 72dpi and in RGB for the web.

More about file formats

File Formats 2

Absolute links takes you to a place on someone else website while relative links take you to a place on your website. The code of adding images looks like this: <IMG SRC=”graphic/dot.jgp”> or <“http://www.pnc.com/dot.jpg”&gt;. SRC is the source of the file, alt is the alternative text, Vspace/Hspace is the margin space around an imag, Boarder is around the image, width/height is the dimension around the image. CSS (Cascading style sheet) is how things will be  design and how you create a more effective web page. For CSS you need to be literal and detailed. The language is similar to verbal description but the syntax is different. Visually CSS can do block elements, that set itself apart from the rest of the text. It can also do an inline element that makes everything displayed inline with other information. Selector declaration are the rules defining the elements on a page. Declaration are separated by a semi-colon.

Video 1

Video 2

Week 2

Most of week 2 had a lot to do with color.

  • The color green for example has many associations like heaven in Muslim culture and luck in Ireland. The green fertility god from celtic myth evolved down to the green m&m being sexy.
  • Red is the color of passion, it raises blood pressure and your adrenaline.
  • The color orange makes people happy and is not seen often so it is used for items that keep us safe.
  • Yellow is highly visible and used for anything that wants your attention.
  • Blue can be calming or it can show trouble ahead, it all depends on the shade of blue.
  • The color purple is also a color not used much and for that reason it a great color for power. 
  • White in the western world is the idea of clean and purity but in chinese culture it is the color of death.
  • Black is the color of evil and death which gives it a sense of power.

Basic web design information:

Url is a uniform resource locator. It is a file or resource on a machine on a network. It reference to resource on the internet.

Your protocol identifier is http

Your resource name: http://www.digital jenn.com

An absolute line is added to any page on a site, does not mater where on the page sits. It creates a link to a page on someone elses website. A relative link are only related to the page they are placed on and dependent on the directory structure of your site.

A DTD is a document type definition or declaration and on HTML5 it is

In order to do well with web design you need to learn html and css, need to make all its content accessible and have usability. To define a site in dreamweaver you need to click manage sites, enter your local site folder, and add your server.