Week 15 Outside Class

Finished work on artist's webpage for Kyle Cooper, famous title sequence designer/director.

I began my design by creating a few box models. One for the title of the page, another for the content body.

The title box of the page consists of his name, Kyle Cooper, and a description of what he does, design and directs. Both of the text has effects on them, such as a shadow. Also used headings such as H1, H2, H3, etc.

The body consists of text about the artist, a photo, and text on his work.

Week 15B

Continued work on artist's webpage.

..

Week 15A

Continued work on artist's webpage layout.

I am having an issue with getting the image I created to work on my webpage. Will continue to sort through that.

Also a note, the text that is currently in my "About" section, is just test text to see how my page looks filled up. I took the text directly from my artist's own webpage and I will be removing it and writing my own bio on him.

I also need to work on centering all my content to the middle of the webpage. Currently everything sits towards the left side.

Source: Kyle Cooper, http://prologuepictures.com/about.

Week 14 Outside Class

No specific homework assignments for class due over break.
I did not work further on my webpage layout, but I did do some research on W3 Schools website as I was having issues with some coding.

Week 14B

No class. Thanksgiving holiday break.

Week 14A

Began class with a short 30 min project to create a logo for the English department here at Millersville University.

Used the rest of class time to work on our webpages for our chosen artists.

Got my background working properly on my webpage. Also edited my background in illustrator so that it would be larger so that it would fit in larger resolution screens, like the mac ones we are using.

Used a texture that I found using Google Image search. Source: http://www.texturehd.com/data/media/8/cracked_wall_texture.jpg

Just created some simple lines in illustrator that will sit behind my content box models in the layout. Trying to create some extra texture and graphics, something edgy like Kyle Cooper uses a lot in his work.

Week 13 Outside Class

Very basic start to my webpage layout using HTML and CSS. So far I just have the header bar and content box in place, which will hold the header and general information about my artist; Kyle Cooper.

I had made a background in Illustrator but for some reason it will not show up in my coding. Will continue to work on the issue.
~Image of background I'm going to use:

And an image of a template/design I made using just Illustrator. This is just a design for me to go off of while coding.

Week 13B

Began class going a group project  on creating a hover-over effect on a image using coding.

Once we were finished we were able to begin working on our page. I started on just creating different style backgrounds I might use, as well as a feel for the typefaces.

Week 13A

Week 12 Outside Class

Continued working on color sketches for webpage layout.

Also began base layout for webpage with HTML and CSS. My design is very simple and empty right now.

I need to figure out how to combine the two top banners into one - or have all the text onto the first banner. I want them to all be together. I am also still figuring out what typefaces I would like to use in my layout, so for now I just have a simple typeface as a place holder.

Week 12B

Discussed ways on how to layout webpage with CSS. Different box options and background settings.

Week 12A

Went over some moodboards in class and talked about ideas for creating web pages for our designers.
Created some quick sketches for class to illustrate some ideas for my designers web page.

I wanted to try and emphasize his edgy style and incorporate the jagged, broken lines pattern which is found in a lot of his designs. Another one of my sketches I also tried making his name large and bold to look like some other styles he worked with; for example the Doom 3 and Superman logos. Both of which he emphasized in their respective title sequences.

Week 11 Outside Class

Homework for class
Notes on what I've learned from the Lynda.com HTML and CSS videos.

Saved an image of a chart that shows different commands for HTML and CSS. It seemed very helpful to save so that I can refer back to it if I need to in the future.
Looking at how HTML handles "white space", which is the spaces between lines of text in a HTML document. HTML can take any amount of white space that you put into your document, it compresses them together.
How to control line spaces and breaks. You can use a <br> </br> tag to create line breaks where you might want spaces between lines of text or paragraphs.
Also looked at how to create box models in CSS, since I had a little more difficulty making this command work for me. They determine how much space an element would need in a CSS document. You can also assign elements such as borders, styles, and colors to the box models. If a property is not desired, the automatic variant is 0.

Week 11B

Homework for class on Wednesday
Worked on a MoodBoard for my designer Kyle Cooper.
We weren't allowed to use any images directly of the designer or any of their work. This created a problem for me as I was trying to find images for Kyle's style. Kyle has such a large spectrum of works, it's hard to pinpoint one main aspect about him that doesn't involve using example images from his works. He has created so many title/ending credit sequences for movies and everyone is different from the other.

One of the aspects I caught from his style is he using a lot of typography and textures. He uses words and designs to grab your attention.
His style is also very "edgy", so I used a pattern to use with all of the pictures, kind of like what he does with his title sequences; he creates art with credits.

~
Watched Lynda.com videos on HTML and CSS in class time. 10 videos of my choice in each section. I chose to watch beginners videos to help me remember everything once again. I started getting really lost as we continued using more complicated commands in both.

Week 11A

Did another CSS tutorial during class time.

There is so much new stuff to learn with CSS it's starting to feel a little overwhelming. The large spectrum of codes that exist to create the nice looking pages we see online everyday is amazing.

Learned how to use class selectors, such as a Full Stop ( . ) and an ID selector ( # ). These are preceded by a name and used for different elements, such as #top or .intro.
When your HTML document refers to the CSS document is can use attributes such as "id" and "class".
An ID can b used to identify one element while a class can be used for multiple elements.
Another element that was very handy that I learned was you are able to shorthand commands instead of listing each one, such as "margin-top: 1px; margin-right: 2px;"
You can combine them together in one simple line. "margin: 1px 2px;
It was a lot easier to create multiple elements for one part of the page. The same could be used for text and borders.
Also learned how to place background images into the page. The only trouble I had was finding an image large enough to use that would fit into my HTML webpage, most were too small and would leave white edges where the background couldn't reach. Would need to find a larger resolution image for future designs that will fit any webpage on any computer.

Week 10 Outside Class

Did a CSS and HTML exercise outside of class. Working with separate files instead of using internal CSS commands (did external).

~

Also worked on research for our next major project in class. We will be creating a webpage for a given artist/designer using what we have learn with HTML and CSS.

My designer was Kyle Cooper.

Kyle Cooper is a designer best known for his work in film title sequences. He was co-founder Imaginary Forces, which is a design company for branding, digital design, commercial production, and experience design. He has produced more than 150 film title sequences, which include some popular titles such as Braveheart, Spider-Man, The Walking Dead, and American Horror Story. Kyle has also been named as the Honorary Royal Designer for the Royal Society of Arts in London.

He studied in graphic design under a designer, Paul Rand (best known for his corporate logo designs), at Yale University. Kyle later moved on to join Prologue Films in 2003, and in 2008 he was a finalist for the National Design awards. Kyle has also received five Emmy nominations and one win for the 81st Annual Academy Awards.

Sources:

• http://www.imaginaryforces.com/
• http://www.artofthetitle.com/designer/kyle-cooper/

Week 10B

Created a simple resume for HTML homework exercise outside of class.

Week 10A

Began work in HTML.

Took notes and learned how to use simple commands in HTML. Such as creating a header, making bolder headings, creating bullets, making paragraphs, inserting links, inserting pictures.
Difference between Rich Text Format and Plain Text.
Took notes on internet/www.

Started a exercise in class using HTML basics.

Week 9 Outside Class

No homework due for next class.
Just worked on finishing up some posts for my blog that were behind.

Week 9B

Finished 404 Error page I did for Just Press Play video games site.

Picture of their website.

Elements I used in the design.

Photo I took of my computer's hardware to use as the Xbox's hardware. Left is original (glows blue from LED lights) Changed it to red in Photoshop.

Crack I made in Illustrator to use for broken case.

Made a play button in illustrator to use throughout piece to tie into the original design for Just Press Play's website.

Ad I scanned and used for the Xbox 360.

Week 9A

Continued work on 404 Error page project.
Found a different image I scanned for the Xbox 360 that I liked better.

Scanned image of Xbox 360 from ad.
Cracked case outlines I made in Illustrator.
Re-touched red photo in Photoshop I took of my computer hardware to use as the Xbox's hardware.
Xbox ring re-colored in Photoshop; was originally green, made it red for the "red ring of death".

Week 8 Outside Class

Beginning design for 404 Error Page project.

Layout is pretty plain right now, this is the start of the design I would like to go with.

I wanted to focus on the aspect of the red ring error that xbox 360's use to commonly get and would often frustrate users.

Week 8B

Missed class due to being ill.

Week 8A

No Class. Campus closed.

Week 7 Outside Class

Watched Linda.com videos for homework assignments.

Chapter 11: Working with layers. Explored some basics to understand with layers like selecting, organizing and merging. Some of the concepts I already understood with some Illustrator practice, but it was helpful to know because I'm completely new to Photoshop.
Chapter 13: Color adjusting. How to adjust color like tone values and contrasts. How to shift colors users the sliders bars/text boxes to change color hues, or how to convert to black and white. Had some beginning practice with this section doing the color exercise in class with our scanned images.
Chapter 17: Filters. How to use filters to add some effects like burs, sharpening/unsharp, tilt-shift, oil paint filter (I thought this was a neat filter to use, as I enjoy to paint myself, and thought it gave a nice touch to some photos).
Chapter 18: Blend modes. Cycling through different blending options, applying lens flare effects, how to make a cast shadow, how to sharpen an image.

Week 7B

Missed class due to being ill.

Week 7A

Began work on new project in class. Going to continue to work in Photoshop and create a image using three different elements. A scanned image, a captured image, and a created image in Illustrator.
We will be creating a image for a website's 404 Error page.
We started with researching some web pages that might not have a interesting or user friendly 404 page for users. I began with looking for web pages that involved something I enjoyed in my free time. Drawing, video games, pets. The best one I could find was for Just Press Play's website (a local owned video game store).
http://www.justpressplayonline.com
Their site does not have a visually appealing 404 Error page.

First thing that came to my mind with a 404 page for a video game store was something broken or faulty. One of my personal experiences is having a "red ring of death" appear on a faulty Xbox 360 I owned. Just Press Play was able to repair it for me.
I started a sketch with an Xbox, because I want to emphasize the red ring that they get. I also experimented with a hammer and a broken Xbox in part of the sketch, like someone was frustrated and bashed it in.

Week 6 Outside Class

Finished our photoshop ad with ourselves in it!

I had some little issues with photoshop just because I was completely new to the program. It took me awhile to crop out the original photo of myself using the pen tool. I then got my selection into my ad, and placed in some extra text, "New Rookie on the Squad!". To fit the picture of myself in, I carefully erased the edges back until I hit the background behind me, making sure the edges looked crisp and realistically looking too.

Also watched videos for Lynda.com on Photoshop tutorials.

First was the intro to photoshop and some basics. How to get photos from a camera. Customizing your thumbnails to create a personal workspace by dragging new windows together. How to change file names. Creating keywords to images. How to view images in full screen mode.

Some camera essentials. Difference between RAW (minimally processed formats) and JPEG (digitally processed files made with pixels) files. 

How to navigate tabbed documents on the header bar. Arranging your documents on the header bar. Straightening a crooked image by using the arrow symbol when selecting a image. How to use your layers, selecting and hiding (clicking on what layer you want to use, selecting the eye symbol to hide the selection, or selecting the lock box to lock a layer you don't want to mess around with yet)

Week 6B

            Original Image                               Line Art Version                           Grayscale Version

Duotone Image

RGB Color Modes - Used for TV's and other displays.

Red, Green and Blue

 

CMYK Color Modes - Used for printing. Shades of the ink.

Cyan, Magenta, Yellow and BlacK - The "K" is capitalized to represent the color black, since the "B" is already taken for the color blue. 

 

Lineart Version

Traced version of original image in Adobe Illustrator

Week 6A

Self picture of the scanned image I used for our in class project we started. Finished project will be due next class.

Learning how to use Adobe Photoshop and touched basis with InDesign. We scanned a random image we liked from magazines and opened them up in Photoshop. We then took the photo and changed the colors, grayscale, RGB, CMYK, lineart, and vector.

For next class:

• Bring in Camera
• Bring in Magazines w/ celebrity Adds
• Finish project and put on blog

Week 5 Outside Class

No homework assignments due for next class.
We finished our calendar critique in class and gave feedback for everybody.
Our calendars were due at Midnight on Wednesday the 25th. We were allowed to make adjustments from what we learned from the in class critique. We were to save all of our files, for "Cal" and "NoCal" as .png and compress the folders into a zip file. Also had to fill out a form for SmashingMagazine with our info and description for the calendar.
Emailed all of these files to SmashingMagazine and also emailed to our professor.

Week 5B

Finished project for Smashing Magazine October calendar contest.

Made different wallpaper sizes:
320x480 - Smallest of the wallpaper sizes. Decided to crop out a small section of the original to create a different view. The composition was very tall and thin, so I used the scarecrow to fit the shape.

1024x1024 - Next smallest of the wallpapers. I cropped out this section of the artwork because the composition was square. So I chose to emphasize the trees and cat family.

1280x800 - The rest of the sizes are all varying rectangles. So all I did here was resize the image larger to fit.

1440x900

1920x1200

I also got some great feedback from my classmates. The left side of my design was very heavy compared to the rest of the piece. I should try to balance out my drawings more throughout the page.

I also need to work on my color choices. My scarecrow feels very washed out compared to the rest of the colors. I should try a dark or tan color instead of the yellow face. Also with the colors I should make the outlines for the grass darker so they pop more.

A personal opinion. I wish I worked more on the scarecrow and the cat's scarf. The fabric looks very flat. I need to play around more with textures to give them a more lifelike feel.