History of Wikipedia's logo

Wikipedia was created by Jimmy Wales and Larry Sanger. They lunched wikipedia on January 15 2001. There first logo was short lived. Changed the first logo in the same year Wikipedia was launched. Wikipedia's second logo was used in 2001 to 2003 properly doing it's job of representing Wikipedia. A international contest held from July 20 to August 27 2003, gathering 150 proposals. After the early proposal by Chuck Smith on October 12, 2002, the contest was first proposed on June 14, 2003 by Erik Moeller, who argued that the logo (adopted in January 2002 from the Logo suggestions) was unaesthetic, not international, and portrayed a text-only Wikipedia.
The winner was Paul Stansifer and his design was the best fit for Wikipedia, but some changes was needed. After remodeling Paul Stansifer's Wikipedia's logo the official Third Wikipedia logo was created. By 2007, users discovered that the logo had some minor errors. The errors were not immediately fixed, because, according to Friedland, he could not locate the original project file. Friedland added that "I have tried to reconstruct it, but it never looks right" and that the logo "should be redrawn by a professional illustrator." Kizu Naoko, a Wikipedian, said that most Japanese users supported correcting the errors. In an e-mail to Noam Cohen of The New York Times, Kizu said that "It could be an option to leave them as they are. Most people don't take it serious and think the graphical logo is a sort of pot-au-feu of various letters without meaning."

Wikipedia's First logo
2001-2001

Winner of the international
contest for wikipedia's logo

Wikipedia's second logo
2001-2003

Wikipedia's Third logo
2003-2007

wikipedia's forth logo
2007-present

Logo notes

What is a Brand?

• Brand is the "perceived" emotional corporate image as a whole,it is the reputation both claimed and perceived.

What is Branding?

• An organization brand or branding is essentially their public image
• A designer can create the framework for a brand, colors, fonts, artwork, style

Branding Example

• Apple is an IT company that projects a humanist image, positive corporate ethics, and support of good causes
• When people use the products they connect the brand emotionally

What is Identity

• Corporate Identity is comprised of the visual aspects that form the brand
• Close attention is paid to executing a consistent experience for the viewer 

What is Identity Design?

• The corporate identity includes strict usage of colors, font families, graphic elements and other guidelines, usually detailed in a corporate identity guide
• The identity can include the logo, logo variations, business cards, labels, envelops, letterhead stationary, advertisements, tv commercials, packaging, etc.

What is a Logo?

• A logo is for identification
• A logo is the simplest way a company or organization can represent itself, through the use of a mark or icon.

Summary

• Brand-The perceived emotional corporate image as a whole
• Identity- The visual aspects that form part of the overall brand
• Logo- Identifies a business in its simplest form via the use of a mark or icon

Logo Design

Why Vector Art?

• We create logo's as vector art because it is flexible, power and easily edited, this is important when clients what to makes changes
• Vector art can be scaled up infinitely without losing quality!

Pencil to Vector

• Creating a logo design required many phases
• Many meetings and review sessions are required to arrive at a design that work
• Converting a simple pencil sketch to vector art requires establishing graphic style, color, line shape and typography

Final Art: Graphic Style

• Decide what your "graphic style" will be
• Will it be bold, simple
• Will it be sleek, technical and sedate?
• Will it be cartoony, fin and cool?
• Will it be high tech and 3D?
• There is a wide range of style to choose
• Choose what fits your concept and market

Final Art: Line Quality

• Line Quality refers to the smoothness and precise nature of your lines
• We use the pen tool to create perfect smooth lines
• Take your time with this part, if it doesn't look right try again!
• If you have line art in your logo your line shape is important!
• Do you want an artistic look to your line? 
• Try a custom "Art Brush" from the Brush Library in AI
• These line shapes are all created with the Stroke Palette in AI

Final Art: Line Shape

• If you have line art in your logo your line shape is important!
• Do your want an artistic look to your line? Try a custom "Art Brush" form the Brush Library

Color Matters!

• Color makes a huge difference, use color that are appropriate for your design 

Logo Design 

• General Rules and Styles for Designing Logo's

Logo Design Rules

• Describable
• Effective without color
• Memorable
• Scalable

Design Style

• Style 1: Typeface Focused. This style relies on typeface to create the logo design, creativity is utilized in the proximity, contrast, color, customization of the letter forms
• Style 2: Mixing typeface. This style uses 2 different type faces to create the logo design. Strive to create to the logo design. Strive to create a balanced design, typeface that are too similar will lack contrast in style.
• Style 3: Typeface plus graphic elements. This style uses simple graphic elements in addition to the typeface to create an emphasized and balanced design. Graphic elements remain abstract.
• Style 4: Typeface plus shapes/symbols. An even balance between art and typography is achieved in this style.
• Style 5: Graphic focused design. In this design the graphic elements are the focus or dominants aspect of the design, the typeface plays a supporting role.

ROP Career Skills

ROP Career Skills
How to Write a Great resume

Your ROP Portfolio

• A portfolio contains three or more of your best work samples and a written explanation of each 
• Letter of introduction
• Resume 
• List of References
• Letter of Recommendation
• Use the ROP Portfolio Handbook as a Guide

Job Seekers Trifecta

• A solid well written and well designed resume
• An equally well crafted list of positive references
• A flawless handwritten job application

Your Resume Should Have

• Who you are and how you can be contacted
• Your job objective
• Your level of education
• Your work history or experiences
• Your special skills and ability

Edit and Refine your Resume

• Take time to write your resume
• No typo's, use spellchecker
• No mistakes, look for double works, grammar error
• No misleading information
• Format your text for easy reading and searching

Resume Writing Tips

• List more recent job experiences first
• List most important skills first
• Leave out the obvious
• Avoid negativity
• Go with what you got: summer jobs, volunteer experience, clubs, relevant hobbies
• Don't have a degree or diploma? State your estimated date for completion, class of 201X Proofread!
• Ask at least 3 people to read your resume in detail to spot mistakes. Catch them before your interviewer does!

Style Can Vary

• Just keep it professional, well organized and easy to read

ROP Portfolio Handbook

• Contains tips and guides for all aspects of your portfolio
• Has 2 samples resumes and a resume template to fill out so you can get started
• Link is on class blog, download the PDF file to your computer and read it thoroughly

How to get started...

• Find a program to write your resume with, such as Word, Google Docs or Pages
• Think of what your ideal job might be this summer or in the future, align your resume info and objectives to that job
• use the Resume Template in the ROP Portfolio Handbook and list all your important details

Naruto Quote

TSL

Quote poster

color questions

1. What are the 3 primary colors?  
The three primary colors are Red, Green, and Blue.

2. How are secondary colors created?

Secondary colors are created when two primary colors are blended together


3. How are tertiary colors created?

Tertiary colors are created when any three colors are blended together
4. What is the difference between subtractive and additive color models? 

additive colors are colors which are "pure", i.e. colors add up to form white light. A Red light looks Red because it emits Red light.

while subtractive colors are "impure". You perceive Red pigment to be Red because it reflects Red light and absorbs everything except Red light falling on it.

5. How can color affect our perception? 

A website might have content that is eloquent and clear, but the color choices for background and other elements could send a contradictory message. Many companies choose their colors based off of personal preference or the corporate logo, but fail to realize that the website says much more than what is presented on the conscious level.  Design elements such as color choice that reach visitors on the subconscious level deliver just as strong of a message as written content.

6. How does one color affect another? 

Two colors, side by side, interact with one another and change our perception accordingly. The effect of this interaction is called simultaneous contrast. Since we rarely see colors in isolation, simultaneous contrast affects our sense of the color that we see. For example, red and blue flowerbeds in a garden are modified where they border each other: the blue appears green and the red, orange. The real colors are not altered; only our perception of them changes. This effect has a simple scientific explanation that we will uncover.

                                                                                           

swatches

color wheel

Typography:

Legibility: Choose classical time-tested typefaces

Serif vs Sans Serif: Serif reads best at smaller sizes, can be complimentary

Font Variance: Too many confuse the reader.

Definition: Fonts that are too similar cause ambiguity.

Readability: Use upper and lower case letters for optimum clarity.

Alignment: Left alignment reads easiest, consider eye flow as it moves down a page.

Emphasis: Use these tools with discretion and without disturbing eye flow.
(Italics/Bold/Size/Color/Typestyle Change)

Integrity: Avoid stretching or distorting type.

Weight: Strive for a sense of balance.

The mac is not a typewriter

Kerning: The individual space between letters.

Tracking: Applying Kerning to the entire word.

Large Text Blocks: Rags

Color Theory Notes

Color Theory Notes

Color Theory:

ROYGBIV:
Red, Orange, Yellow, Green, Blue, Indigo, Violet

Primary:
Pigment generated colors are derived from these primary colors: Red, Yellow, and Blue
Light generated colors are derived from these primary colors: red, Green, and Blue

Secondary:
Mixing primary colors creates other colors. For example: blue + yellow = green blue + red = violet

Tertiary and Beyond:
A secondary color wheel can expand to tertiary and beyond

Color Mixing:

RGB
Red, Green, Blue
Light Generated Model

RGY
Red, Green, Yellow
Pigment Generated Model

CYMK
Cyan, Magenta, Yellow, Black
Print Process Model

Color Modes:

Monochrome
Tints, shades and tones of a single hue

Grey Scale
Black and White only

Web Safe RGB
Hexadecimal compatible

Color Modification:

Tints
Add white to a pure hue

Shades
Add black to a pure hue

Tones
Add grey to a pure hue

Color Harmony:
Use complimentary colors
Split complementary
Analogous
Triad
Tetradic
Quadrilateral

Color palettes:
Different color palettes can invoke mood, location, and emotion

Color properties:
Cool, Warm, Bright, Dark, Saturated, Desaturated

Color Intensity:
Color Intensity changes in relation to its surrounding color

Color Intensity Illusion:
Using lighting to change shade

Color Associations:
these types of color associations are universal to all people

Cultural and Psychological Color Associations:
These color associations are generated from cultural and contemporary sources and may not be universally recognizable.

Why Color Matters:
73% of purchasing decisions are now made in-store
Catching the shopper's eye and conveying information effectively are critical to successful sales
Color increases brand recognition by up to 80%

Color Affects Appetite:
Blue is a rare occurrence in nature
We have no appetite response to blue food

Color Affects The Mind:
Pink is a tranquilizing color that drains your energy
Used in prisons, holding cells, opposing team locker rooms

Design Element Notes

Design: The Principles and Elements

What is Graphic Design?
Design elements are the basic units of a visual image.
The principles of design govern the relationships of the elements used and organize the composition as a whole.
All imagery, art, design, and photography alike, are comprised of elements that can be broken down and analyzed. This goes for web design as well.

What are the Elements and Principles?
Design and art elements are the basic units of a visual image.
The principals of design and art govern the relationships of the elements used an organize the composition as a whole.
All imagery, art, design, and photography alike, are comprised of elements that can be broken down and analyzed by it's visual components and the principles that guide them.


Design Elements:

Space:
Can exist in two dimensions or three dimensions.
It can refer to a positive space or a negative one.
It can also refer to foreground, mid, or background elements.

Line:
Line is a basic element, it can vary in thickness, texture, direction, etc.

Color:
Color consists of many pallets, and are use in different situations, depending on the project different pallets say different things.

Shape:
Shape is used for memory and keeping things in people's mind, iconic logos and shapes.

Texture:
Used to invoke people's likes and dislikes, depending on the market you wish to sell or show your product off.

Value:
Value is used to add dimension to something/anything.

Balance:
The properties of an image that allows it to be balanced/unbalanced or symmetrical/asymmetrical.


Design Principles:

Unity:
Unity creates a sense of order, a consistency in size and shape.
Proximity can create a sense of unity, it can also show a lack of unity.

Variety:
A sense of change yet similar colors or shapes to engage eyes in difference.

Repetition:
The use of one kind of object or color to improve upon a design.

Harmony:
The use of colors and objects blending together in a larger picture to improve upon the design.

Proximity:
The amount of space and curvature in a design to get as much information as tightly packed as possible, so the eye does not get bored.

Proportion:
The size of one or multiple objects in a design to give it more detail and/or depth.

Emphasis (Focal point):
Using color to emphasis what the user/client is supposed to be focusing on.

Functionality:
Making the design that is useful, necessary, and has a playful or comedic aspect to it.

bus and tree files

my bus and tree 11 both have the highest memory and tree 9 and bus 9 both have the lowest memory amount

This is CatStroke

Cat Planet

Dark Souls Ornsetin

Graphic Design Notes #1

-Graphic file formats
-Compression
-Choice and image
Understanding Format
All computer documents, or files, are packaged in different formats
The format is determined often by the files origin, such as a software program like photoshop, or a device such as digital camera
Graphic files such as a photo, video, or artwork can be reduced in file size by using image compression formats.

Lossy vs Lossless
Graphic image formats under 2 categories of compression, Lossy and Lossless
With lossy, images data is "lost" or reduced for smaller files but can cause poor images quality.
Can result in showing "compression artifacts"
Lossless retains image data for higher quality, but larger file size.

Graphic Formats
TIF, JPG and GIF are the 3 most common formats for common activities images over the internet
PNG is a common web format, is high quality and can contain an alpha (transparency) channel
Each format has its own its own advantages, disadvantages

TIF
Stands for Tagged Image Format
Common format for desktop publishing, print, photo and graphic design.
Is a LOSSLESS file format. It retains images data for maximum image quality.
Can result in larger file size, not fit for display over internet, is not browser compatible.

JPG
Stands for Joint Photographers Expert Group.
Created for digital photography and works best for photo content.
Is a LOSSY format.
Can reduce an image file size by 10:1 without showing significant compression artifacts.
The level of compression is adjustable

GIF
Stands for Graphic Interchanges Format.
Is best for graphics or images that have flat color or even tone, such as cartoon.
Reduces image size by "indexing" color from 3 channels to 1.
Is adjustable by changing color bit level from 1 to 8.
Contains no DPI (Dots Per Inch) data for printing. Not a proper format for print.

Photographic images:
Photos are continuous tones, 24 bit color or 8 bit Gray, no text, few lines and edges, (proprieties).
TIF or PNG (lossless compression and no JPG artifacts)(For unquestionable best quality)
JPG with higher quality factor can be decent. (Smallest file size)
TIF or JPG for maximum compatibility.
256 color Gif is very limited color, and is a larger file than 24 bit JPG (Worst choice)

Graphics, including logos or line art
Graphics are often solid colors, up to 256 colors, with text or lines and sharp edges. ( For unquestionable quality)
Worst choice for graphics and such are GIFs

Know your pixels

TIF and JPG are best for images with pixels that blend in color, these are called "contiguous pixels".
Gif is best for images with flat even flat tone, or "Non-contiguous pixels".

Pen Art

Box to car

My first graphic design art