Final Project: WEB ADS!

The semester for MSIT 3810 has come to an end. It’s been a great learning experience, and my skills with Photoshop have truly improved since January. Thank you to Professor Simmons for her help, advice and knowledge.

Throughout the semester, I have been working on my final project. As you may recall, I decided to create promotional goods for my sketch comedy show/group The Kevorkian Slips. Rather than go on and on with what I attempted or tried to express, let me just show you the work I’ve done! I’ll be showing what I’ve done through multiple posts (one for print flyers, one for web ads, one for website layouts, and one for an animated video I created).

Without further ado, here are the web ads I created for The Kervokian Slips:

Final Project: ANIMATION!

The semester for MSIT 3810 has come to an end. It’s been a great learning experience, and my skills with Photoshop have truly improved since January. Thank you to Professor Simmons for her help, advice and knowledge.

Throughout the semester, I have been working on my final project. As you may recall, I decided to create promotional goods for my sketch comedy show/group The Kevorkian Slips. Rather than go on and on with what I attempted or tried to express, let me just show you the work I’ve done! I’ll be showing what I’ve done through multiple posts (one for print flyers, one for web ads, one for website layouts, and one for an animated video I created).

Without further ado, here is an animation I created for The Kervokian Slips:

Final Project: WEBSITE LAYOUTS!

The semester for MSIT 3810 has come to an end. It’s been a great learning experience, and my skills with Photoshop have truly improved since January. Thank you to Professor Simmons for her help, advice and knowledge.

Throughout the semester, I have been working on my final project. As you may recall, I decided to create promotional goods for my sketch comedy show/group The Kevorkian Slips. Rather than go on and on with what I attempted or tried to express, let me just show you the work I’ve done! I’ll be showing what I’ve done through multiple posts (one for print flyers, one for web ads, one for website layouts, and one for an animated video I created).

Without further ado, here are the website layouts I created for The Kervokian Slips:

Final Project: THE PRINT FLYERS!

The semester for MSIT 3810 has come to an end. It’s been a great learning experience, and my skills with Photoshop have truly improved since January. Thank you to Professor Simmons for her help, advice and knowledge.

Throughout the semester, I have been working on my final project. As you may recall, I decided to create promotional goods for my sketch comedy show/group The Kevorkian Slips. Rather than go on and on with what I attempted or tried to express, let me just show you the work I’ve done! I’ll be showing what I’ve done through multiple posts (one for print flyers, one for web ads, one for website layouts, and one for an animated video I created).

Without further ado, here are the flyers I created for The Kervokian Slips:

The “Rant” Response/Design Expanding Communication As A Tool

As I was reading Rants + Rave editor in chief Aaron Kenedi’s editorial (featured in Print Magazine, Vol. 64, No. 4, August 2010) assigned for our MSIT 3810 reading assignment, the following quote on page 41 really stood out to me:

“Design as an art form and communication tool is more formidable now than ever.”

We can easily see this quote apply to the popularity of phone apps, as Khoi Vinh highlights in the article “New Balance: How Apps Are Changing The Way Designers Create On The Web” (featured in the same issue of Print Magazine). This further explains why in our final projects for the course we must include some form of digital representation. The web and new portable technologies have become the new and most used ways to access information. As technology enhances, so does its design.

It’s important to remember how every detail, every texture, and each use of color can affect the message being enforced through the design and image. With that in mind, I realized that the web site design layout I’ve created niggt need enhancement in order to portray the message I’ve been trying to portray with my digital and print flyers.

First, take a look what I originally created for the home page of my web layout:

 

Now, take a look at what I added to the background of the head banner:

 

Both versions have their pros and cons. The original is sleek and relatively simple (nothing too distracting), however it lacks a connection to the print and web ads that I’ve created. The second/experimental one gives the site that connection and a little extra edge. My only fear is that it may be too distracting or too much.

What do you all feel? Which style do you prefer better?

Reading Assignment: Brainstorming To This Point

I particularly found Elizabeth Resnick’s discussion about brainstorming (more specifically through thumbnails on page 19) from Design For Communication: Conceptual Basic Design Basics. Reading her instructions of how to go about creating thumbnails reminded me of the experience I went through when creating web and print flyers for my final project.

It took me a little bit of time to discovered the red bar idea (that replicates a sense of prison or jail bars) and the type of blending mode I wanted for it. At the same time, I thought I had come to the conclusion that I would use screen shots from the skits as the background image. However, after I created the big print flyer that featured each cast member’s mug shots from the intro, I realized that my original purpose of the ads were to highlight raunchiness/grittiness of the show. While the screen shots did so, they also gave away key visuals of the actual skit. It gave away premise more so than entice the audience to further watch.

Thus, this process took me from creating the image below (which uses the screen shot of the skit) to the image above (featuring a cast member’s mug shot and a funny tag line).

After observing this transition, what do you think?

In case you also want to see more of what I’ve done so far for the project, you can check out what I just posted on the MSIT 3810 blog as well.

Reading Response/ Creating A Button

Information Architecture: Blueprints For The Web’s third chapter starts off with a direct but extremely important point that must be implied to creating websites:

“It’s a simple fact: when you have a certain amount of stuff, you have to organize it. Otherwise, you can’t find anything.”

While chapters 3 and 4 in this book discusses multiple ways to strengthen a website’s organization (such as search engines and metadata), the one that stood out to me was navigation, or even more specifically global navigation (as mentioned in chapter 8, page 192). Navigation in general is a great way to link a lot of information for the user together without compressing too much “stuff” into one page. I think another reason why global navigation especially attracted my attention was because at the moment I am also creating image buttons (a great visual tool to create navigation) for my final Webmasters course project.

In the Webmasters course (which is also in the COPACE department), we have been taught to use GIF constructer to create animated/java buttons. However, I am not a fan of the GIF constructer software (uber sketch in my opinion). That’s why I was excited to see that in addition to this week’s reading for MSIT 3810 (Photoshop class), there was a great instructional video on making rollover graphics. I was hoping that there was a way to create rollover graphics through Photoshop (rather than through GIF constructer), but wasn’t entirely sure how.

I started to play around and follow the steps in the video. However, though her instructions are relatively clear and taught me new tricks I never knew about before, I seem to be having troube with the text reappearing in the new “style.” I am not entirely sure what I am doing wrong or how to fix this error. I am hoping that I can receive some additional help during tonights class (Professor Simmons, is this possible?).

But for now, check out one of the buttons I created for The Kevorkian Slips website layout. I’ve actually finished creating a website layout for the homepage, though am not ready to show it publicly yet. However, while it is still a little rough, I am excited about how it looks so far.

What do you think of the button thus far?

Response To Typo/Graphic Posters

As part of the 8^th 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

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

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?