Archive for March, 2011

Response To Typo/Graphic Posters

Posted in Photo Shop For Internet Graphics with tags , , , , on March 31, 2011 by zach-attack-shaw

As part of the 8th reading/viewing response for MSIT 3810, we looked at the website TypoGraphicPosters.com. The site, as you probably figured already, features collections of poster work done by various artists with the goal to “be a timeless source for studies, inspiration and promotion of good design through poster culture and cultivation of typography and pure forms of graphic design.”

One collection of work that stood out to me was from Christos Kontogiorgas. Something about the placement and collage of images and text, along with its gritty color, enticed me. Although, why it did so isn’t exactly clear to me. Maybe I simply like the gritty style and coloring of these posters.

Ironically, even before knowing about the site, I had already started work on a poster for my final project (promotional material for my sketch show, The Kevorkian Slips). I decided to use screen shots of multiple cast members’ intro/prison lineup shots for a poster. Since these shots are the viewers first introduction to the cast and show, I figured that the poster should reflect that too. I played around with each pictures hue, lined them up in rows, and used the see through red bar I’ve used previously in other promo clips. While I originally used them to maintain that “prison” look, my professor, Lynn Simmons, pointed out how the placement of the bars, along with the black and white pictures, actually made it resemble old film reel strips. This was a cool surprise.

You can see the poster above. What do you all think?

 

The Logo’s Font Type

Posted in Photo Shop For Internet Graphics with tags , , , on March 24, 2011 by zach-attack-shaw

Zeldman starts off chapter 13 of Designing With Web Standards by saying the following:

“Along with positioning and color, typography is an essential tool of design. Print designers spend years studying the history and application of type… When these traditionally educated designers come to the web, with its limited tools and unpredictable outcomes, they have often been less well equipped to navigate its rocky shoals than those from a nontraditional design background.”

This paragraph stood out to me this past week mainly due to the focus I’ve found myself applying to type and font as of late. For those who don’t know (and as a way to recap), I decided to create web banners, print flyer designs and a website design/idea for my sketch comedy troupe The Kevorkian Slips. When I first started working on the group’s first episode, we had yet to have a real “logo.” I knew, though, how important it was for the logo to not only come off as “well done,” but to also replicate the edgy and mostly politically incorrect humor of The Kevorkian Slips. With that in mind, I created the following through Final Cut:

The image above is a screen shot taken from the video. It’s pretty much been used in anything related to The Kevorkian Slips. The problem, which I didn’t find out until after the first episode aired, was that the font style I used for the logo (known as Cracked) is only “offered” with Macs (and I’m a PC user). I’ve used multiple sites to try and find a similar looking font on Windows and PCs, but nothing comes completely close. Despite this, though, I still didn’t want to change my font type, partly because it’s already been used multiple times and too late to change it in the videos, but mainly because to me it is the perfect fit for the troupe. This meant, then, that I needed to find a way to take all of the text (in its Cracked font) and place in on a transparent and/or blank background so as to use it for other projects.

Because of this, I had to use the magnetic lasso to cut/copy each letter of the logo image so as to place it on a transparent background (I tried magic wand and because the edges are to ragged it didn’t work). It was a long and tedious process, but in the end worked out pretty well. The image at the very top is the resulting product. I also went ahead and started to place the transparent logo on other screenshots taken from the episodes to see how it would look in the bottom corner (in addition to adding clear red bars), which can be seen below.

So, what do you all think? Does the logo’s text replicate the style of the show?

 

Class Exercise 5/Reading Response: My Roots

Posted in Photo Shop For Internet Graphics with tags , , , on March 3, 2011 by zach-attack-shaw

On page 115 in Graphic Design: The New Basic, the following quote struck me:

“Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity. A designer’s approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period.”

Normally I would create a new picture to try and replicate a thought that a certain passage from a reading assignment gave me. However, I found that the class exercise that we conducted last week actually somewhat reflects the reading. In fact, I believe the assignment was somewhat influenced by the “Hierarchy through Contrast” project discussed on page 120 in Graphic Design: The New Basic (please correct me if I am wrong Professor Simmons). To recap, though, here is what we were assigned to do for class exercise 5:

“Create an 8 x 8 inch flyer using color and a grid system to direct the viewers’ eye and to establish visual hierarchy. Select various tools and strategies from Photoshop to develop your composition. For instance, color shapes at various opacities can be added as another layer of information or parts of one image can be cloned into another. Attention will be given to effective use of typography, line, image, figure/ground relationships (open space) and experimentation. Use the whole page. Make sure your document is RGB and properly resized for the web before saving as a jpeg and uploading to the blog.

Process:

1. Write a set of facts about your life, and create a photographic image of your hand. Other images can be used but your hand should be clearly represented.

2. Map your life onto the image of your hand. Position each element on a 30 or 45-degree angle. Use scale, position, color and transparency to organize the information to create visual interest.”

With this in mind, I decided to use the image of a tree stump and its roots as a mini timeline of my life (much in a similar way as this). I cut out my hand and placed the stump inside it, in a sense cropping the root’s images to make a new frame, and thus new meaning (page 103). I also used saturation to create a black and white visual to give it an almost contrasting texture. I then placed different text at certain points of the stump/roots to signify the timeline. You can view the original images of the hand and stump after the jump/down below.

As explained in chapter 13 of Digital Foundations: Intro To Media Design, “The grid is the principal way of organizing page elements in multi-page documents.” In a sense, the frame of my hand serves as a way to unite all the elements/events that have shaped me into the person I am today. In other words, it has helped organized a hierarchy of my life/outline from the start of my life to where I am currently and hope to be in the future. (Brownie points if you can determine the significance of where I placed 2013:?)

As I always ask: What do you think? Continue reading