Magazine Cover

I thought of a magazine idea i though of Photography. after I started by getting some Pictures that I had taken a while ago for Photography. i Sorted through the pictures and choose the ones I thought were the best. Then I edited the photo graphs in Adobe photoshop. I then went to Illustrator and created a design for the magazine. I put the photo with the graphic design I came up with. The photo was of a sunset so i decide the Magazine issues would be on sunsets. I then transferred the design to Adobe indesign were I added the text.

Step one Picture

Step two Design

Step three Text

Poster Design

I frist created a hand drawing sketch design to give my self a rough idea on what i could do for my poster. I then took some basic elements from my hand drawing and applied them to a digital document. I used adobe illustrator to do this when i had a basic design i started to develop certain graphic designs and colours. When I was happy with my design I rendered it for web and design as a Jpeg. (All Graphic art work is originally designed by me.)

Hand drawing

Finial Digital design

Logo comparison

1. What are the major differences in the two versions?

One of the major differences in the two designs is that one is digital and one is a pencil hand drawing. another is that the logo text is a lot more noticeable in the second design than in the first design. The text is also.

2. What design issue caused a change in the final art work?

The design issues is that the logos graphic art work is more noticeable than the logo text which causes the consumer to over look the text which could cause problems.

Logo Scale

I used the logo that I had made and designed from scratch and used adobe illustrator to scale the vectors  to different sizes, I didn't edit the designs i only used this to see how far my design can be scaled to look good and professional.

Logo Scale

Logo development

I first brain stormed 25 different ideas for a logo design. Then I took 3 of these designs and Created them in more detail as a hand drawing. I then got feed back and choose the most popular on to re-create as a Digital design. I developed the design in adobe photoshop.

Hand drawing

Black and white design 

Colored design 

Logo Concept Development

I created these hand drawings after thinking of a brand name I then developed different concepts of the design.

15 Logo Design Styles

I created these different styles of logos using adobe illustrator. I used a verity of skills and techniques to show examples of the different styles. For this project I had to create different logos and ad different styles to each set of three.

Logo styles

1. Typeface only

2. Typeface's combined

3. Type face plus an art element

4. Typeface plus a shape or symbole

5. Shape or symbole with typeface

Logo Re-Design

I decided to re-designed the fox racing logo. i sketched out ideas on paper and then transferred my best one to Digital and developed it from there. I used adobe illustrator for this project. i decided to take some elements from the original design so that people could still recognizes the logo.

Product Packaging

I created this packaging by copying a template for a cereal box and the coming up with an idea. I then put my design on to the template when i was happy after editing my design. I printed the design and put it together. This was done ]using adobe illustrator with a few different techniques.

Digital net design

Net after printing

 Assembled net

Front

Left side

Back

Right side

Notes on Helvetica

• Where does Helvetica originate from? What country?

-Switzerland

• What does the original name mean? What is it's translation in English?

-Neue Haas Grotesk this translates in english to mean: the swiss type face

• What year was Helvetica created?

-It was created in 1957 and had its name changed in 1960.

• What is the design style that Helvetica brought to popularity worldwide?

-It give socialism and it is available everywhere and to everyone it is also in everyday lives even without people noticing.

• List the names of 3 different design styles or design movements that are discussed in the film.

-Georgia

-Auria

-Akzidenz-Grotesk

• Write about some of the insight about design you have taken away from the film. You can provide quotes if you like.

-The people are affected by the typeface as actors are in a film role. It affects how we feel our emotions and what we think of the design we judge by first look so this is why it is important.

• Different designers in the film.

Rick Poynor

Rick Poynor is a British writer on design, graphic design, typography, and visual culture. He began as a general visual arts journalist, working on Blueprint magazine in London.

-http://en.wikipedia.org/wiki/Rick_Poynor

Harry Carter

Typographer

Harry Carter was an English typographer and writer. He was a well-known historian of type. He was the father of typographer Matthew Carter

-http://en.wikipedia.org/wiki/Harry_Carter_(typographer)

Matthew Carter

Film actor

Matthew Carter is a type designer and the son of the English typographer Harry Carter. He lives in Cambridge, Massachusetts, United States. He designed the early 1.0 web fonts Verdana and Georgia.

-http://en.wikipedia.org/wiki/Matthew_Carter

Wim Crouwel

Graphic Designer

Willem Hendrik Crouwel is a Dutch graphic designer and typographer. Between 1947 and 1949, he studied Fine Arts at Academie Minerva in Groningen, The Netherlands.

-http://en.wikipedia.org/wiki/Wim_Crouwel

• Example of helvetica in everyday life.

Hand lettering to Digital lettering

In this project i created some sketch drawing on paper and then turned the one i liked most #4 into a Digital drawing using adobe illustrator. I did this using the pen tool and traced around the letters. Then i added colour and a background to make the letters stick out. 

Hand drawing sketches

Digital drawing #4

Perspective

I created a few different drawing of cubes using adobe illustrator. These cubes have differnt perspective outcomes one, two and three perspective. I also created a picture of a street with a different perspective of buildings.

Cubes

Street cornner 

Design The Principles and Elements

People ignore design that ignores people- Frank Chimero

What is Design?

• Design elements are the basic units of a visual image.
• The principals of design govern the relationships of the elements used and organize the composition as a whole.

Graphic design elements.

• space

Can exist in two dimensions or three dimensions. it can be referred to as positive space with an object or negative space where the object could be. space can also be referred to the foreground mid or background elements.

• line

Can make up other shapes. It can have texture or can be wavy straight or curved.

• color

Pop Art, russian poster art, metal, earth, beach, flowers, fruit vegetables

• shape

Helps us identify things in our mind shapes can be geometric or organic. shapes can convey a lot of information.

• texture

Texture can be implied and be an illusion. Or there can actually be texture for example an embossed business card .

• value

Helps give an illusion of depth and can give a object shading with light and dark areas.

Design Principles

• Unity

Can give a sense of order or pattern which can show unity or lack of unity.

• variety

can be utilised where they are different but nearly the same. There is unity but variety.

• repetition

• harmony

is what we get when thing look like they are in their place and meant to be there. everything is happening right its all in the “beat”.

• Proximity

is where everything is aligned right and in a certain order.

• Proportion
• Functionality

A certain design that convey it purpose but does not serve no purpose.




i then created some examples on paper of the different types of design and scanned them into the computer and transferred them to be a Digital design. I transferred the drawings into adobe illustrator so that i could create a Digital version.

Hand drawings

Digital transfer

Type Face

i decided to do a reaction of a leopards face using different types of text i did this in adobe photoshop.

Sugar skull project

I created this "sugar skull" in adobe illustrator. i started with a basic ellipse shape and then edited it to form a skull. then i started to add some patterns using different tools and effects in illustrator. i then choose my color that i wanted it to be miked with (yellow,black and white).

sugar skull

Graphic Design

Colour Theory

“I found that i could say things with colour and shapes that i couldn't say any other way….things i had no words for.”

Colour is light.

Colour spectrum= Rainbow.

colour properties

• cold
• warm
• bright
• dark
• saturated
• unsaturated

• ROYGBIV= Red,Orange, Yellow, Green, Blue, Indigo=(Purple), Violet.

• Mantis shrimp can see more colours than a human can.

• Red, Yellow, Blue= Pigment for all colours can be made.

• Red, Green, Blue= Colours for computers to make all colours.

• CMYK= Cyan, Magenta, Yellow, Black.

• Grayscale= Black and White.

• Monochrome= Tints, Shades and Tones of a Single Hue.

• Web Safe RGB = Hexadecimal Compatible

Color Harmony

Complementary Colours= Is where colours on the colour wheel are opposite each other.

ANALOGOUS= Neighbor colour either side one colour.

SPLIT COMPLEMENTARY= two colour and the one on the opposite side in the middle of the two.

TRIAD= Triangle points are colours that go well .

TETRADIC= The four points are the colors that go well together.

QUADRILATERAL= The four points the the square has are the colour that is good together.

Colour Palettes= Different color can invoke Mood, Location and Emotion .

Colour Associations

Why colour matters  73% of products are brought in store because of how the colour makes people feel.

colour affects appetite

blue is a rare occurrence in nature.

colours affect mind

pink is a tranquilizing colour that drains your energy.

primary colours become secondary colours when mixed which then become tertiary when mixed.

color wheel

color palette for picture

Random Gif

This is a little animation i made using photoshop it was just to test the stop the stop-frame animation within photoshop.

creepy face

Advanced Gif

Washington Memorial transforms into a rocket ship

I created this Gif using Adobe photoshop, i opened up the animation window and started to turn my layers that i had made into separate frames by hiding and showing the objects inside the layers. it took some figuring out and over coming problems but i managed to get it to how i wanted it.

Animated Gif

I made this Gif using different layers converted to frames. I decided to do a countdown using digital numbers, this was made using adobe photos hope using the animation window

COUNT DOWN

Animated Gifs 

These are the animated Gifs i made using photoshops animation window. The first animated Gif i made a used the timeline to make the animation using key frames. The second Gif i made was using different layers converted to frames.

1) Timeline Gif

2) Layers to frames Gif

Extra credit work

Theater interior

I designed this piece of work by using adobe illustrator, i used a range of different tools and gradient styles to add the 3-D effect.

File formats

These are different file formats and how they effect you image quality

Graident-64-Dithered

Graident-64-No-Dither

Graident-GIF-32-Dithered

Graident-GIF-32-No-Dither

Graident-GIF-128-Dithered

Graident-GIF-128-No-Dither

Graident-GIF-Restrictive

Graident-JPEG-High

Graident-JPEG-Low

Graident-JPEG-Medium

Graident-PNG-8-128-Dithered

Graident-PNG-24

Tree-64-Dithered

Tree-64-No-Dither

Tree-GIF-32-Dithered

Tree-GIF-32-No-Dither

Tree-GIF-128-Dithered

Tree-GIF-128-No-Dither

Tree-GIF-Restrictive

Tree-JPEG-High

Tree-JPEG-Low

Tree-JPEG-Medium

Tree-PNG-8-128-Dithered

Tree-PNG-24

some notes on file formats

GRAPHIC FILE FORMAT

File Formats

-all computer docs are packaged in different formats

-format is determined usually by file origin

-graphic files (video, image) can be reduced in file size by using image compression formats

Lossy vs. Lossless

-Lossy: Image data is “lost”/reduced for smaller file sizes, causes poor image quality

-Lossless: retains all image data but results in large file size, does not compress image

GRAPHIC FORMATS

-TIF, JPG, and GIF are 3 most common formats, used for printing, scanning, and displaying images on web

-PNG is a common web format and can contain a transparency channel

TIF

-stands for Tagged Image Format

-common format for desktop publishing

-LOSSLESS

-not browser compatible

JPG (JPEG)

-Joint Photographers Expert Group

-created for digital photography

-LOSSY

-can reduce image file size by 10 to 1 without compression artifacts

-compression level is adjustable

GIF

-stands for Graphic Interchange Format

-Great for images with flat colors, web friendly

-Not printer compatible