Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Tuesday, May 3, 2011

Honest Ape Productions Presents: Zoo Fling 3D


I'm currently in a class called IM 313: Intermediate Interactive Media Authoring, which as it turns out is a big fancy way of describing a class that goes through the complete process of creating, designing, developing, and promoting a video game. There were three local "topics" to randomly chose from which required various levels of involvement or thematic punch. My group, upon naming ourselves Honest Ape Productions, received on a slip of paper the simple words Peoria Zoo. 


I took charge of the 2D art of the game, creating a GUI, menu screens, buttons, etc., in Photoshop that were given to our programmer. I also created our app icon, and dabbled in some sound effects.

The real brunt of the work actually came from creating the website, which I designed off of a free template and made various modifications. I learned a few new things for this, including some basic Java editing for the dynamic slider on the home page. I also used anchor tags for the first time, to link to sections on the page (so I only had to create 4 pages instead of 7.) I did all the artwork for the site, and wrote all the copy besides a few programming paragraphs and bios. I'm very happy with the website, and if you want to learn more about the game and the art for it, check it out!

http://honestapeproductions.com



Monday, March 28, 2011

Offerbug.com

It's been a while since I've updated the blog, but that doesn't mean I haven't been busy - the folks over at PulseTV.com asked me to design and develop their latest deal of the day website - Offerbug.com. I was part of the creative process from the beginning, forming the logo and solidifying a suitable tagline "We take the "bite" out of retail!"

The logo went through several changes, and that cute little bug initially started out as a bee - but it turns out there was already a similar mascot for a different deal of the day site. So I created this hybrid-beetle-thing and selected the color scheme of black and green.

I eventually created a Photoshop mockup of the page layout, playing off the established color scheme and strove for a minimalist site, since there really is not too much going on besides product description. The mockup was then sent to the developers and coders over at PulseTV, and they reproduced the look as faithfully as possible while we collaborated on updates, and necessary graphic work.

Check out the site here http://offerbug.com

Sunday, September 26, 2010

Silent K Records: The Blanks

This is the second full assignment we had gotten in my web design class, and we were asked to create a one page press release. It had to be some kind of music release - so we needed images for a parent company or record company, and another image to put in the article, like a CD cover. So I (of course) used my Silent K Bunny, and stuck with a red/black color scheme.

I found a nice picture of a black and red Gibson SG, and threw some downloaded paint brush effects on top of it to serve as a giant (web-optimized) image for the background. The rest of the design was positioned to that one background image.

I created the album cover by taking a high resolution image of a Hulk action figure and applied a "Cut Out" filter in Photoshop. I then turned it red and messed with the Saturation and Contrast filters. The hardest part actually came from cropping the image of the hulk on the CD cover. Depending on how close it was cropped, it would have completely different looks and feels to the design, and I wasn't quite sure what I wanted. I asked for opinions, and narrowed it down to two choices, and wound up solving the problem by using them both! One extreme close up for a CD cover, and one cropped out a little further to be used for the DVD cover. I threw a glow effect on them and saved the .png so I could position it anywhere on the site.

The copy is all original content and contains a bunch of little "inside jokes" of my favorite musicians, directors, actors, and things from my personal interests. The band name itself - The Blanks was a two-man-band I had in high school. (The logo was also very similar, but I recreated it for this project). It a fun project, and I think this was the project that cemented Trebuchet as my favorite typeface (you are reading with it now in fact!)

Check out the fake site here (hosted on my website) Here.

Wednesday, September 22, 2010

Dee-Xign-A-Day Blog/Face Morph

For my web design class, we had to create a non-functional Blog-like space. I remember that it was just one of those days where a bunch of projects were intersecting, and I had to crank this one out in a few hours. I really liked the header, even though it was pretty simple - just a half-tone effect of red and black, and a cool font (Cooper!) in front of a simple bullseye shape.

We needed to come up with something clever to denote it as a design blog, and you know how those clever designers love spelling things differently, so I chose to spell it "De-Xign".

I divided up everything which was pretty monocromatic with blacks and grays, with red borders. It was right after this project that my teacher told me I needed to experiment outside of red and black... lol. But on to more interesting things: the face morph. The story on the site is true, so I'll just repaste most of it here. You can see it hosted on my site Here.

One night, I was working on some video stuff. I revisited an old project (Out of Batteries) to change a few title sequences and alter the credits a bit, but the process was basically done. Anyone who has ever worked with video editing knows that the last part of completing a project sucks - cause that means you have to spend a bunch of time rendering (especially if you are working in HD). To kill some time, I surfed Facebook, stumbled upon this picture of my friends, and decided to alter it.

It took about ten minutes and the process went very smoothly. First I Lasso'd the guy's face, Refined the Edge and copied it over the girl's face. With the Hue/Saturation tool, it was easy to get the correct skin tone, altering mainly the Saturation and Brightness.

After that, just took the Eraser tool and made sure the edge was highly feathered and I was done. It's real easy (especially if the copied face is right in the picture), and usually has a good effect for humor...plus it's fun to do and to kill time with.

There ya have it, perhaps one of my best face morphs.