| Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6 |
|---|
Week 1
In searching through all my static pieces from previous classes, I only came across a few that with some needed revisions, I thought may become "portfolio-worthy". One was the Jolly Humor project. Although I realize this is probably a very common project added to student's portfolios, it is basically the only digital image manipulation example of mine that I can think of. So in order to make it a bit more unique, I took Carolyn's advice and at least changed the name of the imaginary client.
The second project is from Color Theory. It is a winter scene demonstrating the principles of color theory. This was one of my first projects using Illustrator (which is now my favorite all-time application), and although it can still use some work, it is one of my favorite class projects.
I have done very little "field-oriented" work outside of class, but in the past few years, I have been doing some freelance work designing metal lapel pins. I have worked on projects for some well-known clients but I think I am most proud of the Olympic pins I designed for five National Olympic Committees for the Beijing Olympics. Being that I guess "lapel pin design" is a specialty niche I have fell into, I would like to include this work in my portfolio--I'm just not sure exactly what category I should put it under. I only have the five Olympic Pins included here, but I do have plenty more designs I can include in the future.
Lastly, is a wine scene, something I was playing around with just to learn a little about Illustrator's 3D capabilities and to attempt to create some realistic looking vector illustrations. It really served no purpose other than that. For that reason, it is a bit incomplete as I haven't figured out what to put in the background, if anything. But I do think it shows some promise. Any suggestions as to where to go with it would be greatly appreciated.
Digital Image Manipulation: Ice Cream Ad
As you know, for this exercise the imaginary client, Good Times Ice Cream, was looking for fresh imagery not of the old-fashioned nature to redesign and update their image.I choose to go with an advertisement of an unusual nature that combines realistic photography with the whimsy of cartoon-like illustration. The concept behind the ad is that anyone, even the most unexpected of people, can become the life of the party by simply serving and enjoying Good Times Ice Cream.
This ad was created entirely in Photoshop utilizing the Polygonal Lasso tool, Magic Wand tool, Layer Masks, Brush tool, Pen tool, Type tool, Gradient tool, and Filters and Effects.
Color Theory: Winter Scene
I'm trying to recall the exact guidelines that were given for this project, but from what I can remember at this point, within a limited solid-color palette (I believe it was 16) and without the use of transparency or gradients, we were to demonstrate the principles of color theory such as harmony, unity, depth, and balance.
This illustration was created entirely in Illustrator primarily utilizing the Pen and Pencil tools.
Product Design: Albania National Olympic Committee Lapel Pin
The client, the National Olympic Committee of Albania, wanted a metal lapel pin to be presented to their Olympic athletes and delegation for the 2008 Beijing Games. They supplied an image of their logo which consisted of the crest and rings. Their only instructions were to make it simple yet elegant without any extraneous verbiage or design elements. I recreated the logo in Illustrator and placed it within a basic oval.This design was created entirely in Illustrator utilizing the Pen Tool and Pathfinder.
Product Design: Antigua-Barbuda National Olympic Committee Lapel Pin
The National Olympic Committee of Antigua-Barbuda was looking for an unique design that featured its NOC logo and an element that related to the Olympic host city of Beijing. They expressed interest in including the Great Wall of China if possible. I developed a design concept in which the sun of their logo seems somewhat to be rising over the a mountain range featuring the Great Wall of China.This design was created entirely in Illustrator utilizing the Pen Tool and Pathfinder.
Product Design: Bermuda National Olympic Committee Lapel Pin
The National Olympic Committee of Bermuda expressed interest in a design that represented their beautiful island country. In conducting research, I discovered that one of their well-known national symbols is the Bermuda Longtail--a tropic bird that nests on the sea cliffs of Bermuda. I instantly knew this was the element that I wanted to incorporate into the design. I searched out images of the bird and once I found one to my suiting, I drew up a tropical scene featuring the white and black bird along with a stylized version of the Olympic rings.This design was created entirely in Illustrator utilizing the Pen Tool and Pathfinder.
Product Design: Grenada National Olympic Committee Lapel Pin
The National Olympic Committee of Grenada was looking for an unusual yet appropriate design for their Beijing Olympic pin. Supplied with a raster image as a guide, I redrew the Grenada Olympic Committee logo in Illustrator and placed that logo within a shape resembling a Chinese Pagoda.This design was created entirely in Illustrator utilizing the Pen Tool and Pathfinder.
Product Design: Lesotho National Olympic Committee Lapel Pin
This was a rather straight-forward project. The National Olympic Committee of Lesotho supplied me with a raster image of their shield logo. I then recreated the logo in Illustrator, and being that the shield itself is quite busy, I opted to place it in a simple yet elegant circle.This design was created entirely in Illustrator utilizing the Pen Tool and Pathfinder.
Illustration: Scene from an Italian Restaurant
This was a personal project I began in an attempt to learn more about Illustrator's 3D engine while also attempting to expand my illustration style into that of the semi-photo-realistic.This project was created entirely in Illustrator utilizing the 3D Engine, Pen tool, Gradient Mess tool, Clipping Masks, Transparency, Blending Modes, and Effects.
Week 2
So much to consider this week.
Before I went any further reviewing, revising, and reworking any other pieces, I decided to try to put together a wireframe of the actual portfolio site. I realized that until I had an idea of how I wanted to display my pieces, I wouldn't know exactly what sizes I needed them to be. It didn't make sense to me to rework the pieces if I was going to have to go back and re-rework them to fit my portfolio plans.
Being that this is a portfolio to be viewed on-screen, and that most screens have a 4:3 aspect ratio, I've decided that is the ratio I would like most of my pieces to fit into, if possible. Since I'm figuring most users will at least have a 800x600 screen, I think a 512x384, and size will fit nicely without the need to scroll. To coincide with these dimensions, I have decided to make the thumbnails 100x75--also a 4:3 ratio.
One of my biggest concerns with my pieces is that I do not do much raster work. If anything, I would have to say that illustration and web design are my strengths. So even though I want to highlight my strengths, I do want to include some more raster work also to not only add variety, but to also demonstrate that I at least can work with PhotoShop when needed. Again, since I do not do much Photoshop work, I was thinking I would have to create some just for my portfolio, which I will still probably do. But then I remembered a couple pieces I did just a few weeks ago for my niece's wedding. They are not particularly outstanding but I reworked and resized them a bit in hope that I could use them. I'm not sure if I should include them or not though.
In trying to storyboard my portfolio, I realized that I am having problems categorizing my pieces. Most of my pieces were created in Illustrator, but having one "Illustration" section doesn't seem like a good choice. So I figured I would break the pieces up into several categories. "Illustration" would be reserved for illustration pieces that don't fit into the other categories I use. But those other categories is what I'm having problems with.
Firstly, the only professional pieces I have are the many lapel pins I have designed in my freelance work the past few years. It is a very specialized design discipline, creating designs small enough to be created in pieces of metal no bigger than a nickel. So I would very much like to highlight that specific genre of my work. But I'm not sure how I should categorize them. I was first thinking simply "Lapel Pin Design", but I'm not sure it that is a good choice. Right now I am going with "Product Design", but again, not totally sure of that either.
Then I have a couple logos I created, and a few online and print ads, but not many of each. So instead of having a "branding" or "identity" category with only two samples, and a "Print" or "Advertisement" section with only a couple pieces, does it make sense to group them together under a heading of "Marketing"? Or should I separate them and just add to the categories in the future?
As far as the pieces I am submitting this week goes. The first is a poster I created for my niece's wedding reception. It was a large-format print job done in CMYK. So I had to reduce it's size considerably and convert it to RGB for a better screen presentation.
The second is another poster created in typography class. The original had to be monochromatic without any effects. And I think it was still quite effective, but I decided to spice it up a bit with color and drop shadowing for my portfolio.
The third is a screen ad I created for an imaginary company, Global Designs, that I used as a sample client for a couple of my courses. I just needed to resize it's dimensions a bit to fit into my 4:3 ratio plan.
The fourth is a print piece that I also created for my nieces wedding. I only show the cover here, but I had created an entire wedding program.
Lastly, I follow up with some more lapel pin designs I created for various clients.
Reception Poster: Italian Riviera
This large-format poster was created for a recent wedding reception. The happy couple wanted a poster to greet their guests, set a romantic atmosphere, and explain the reception's theme, which was "the Italian Riviera" where the groom had popped the question. Along with this poster, matching placement cards, table cards, and menus were created. I'm not exactly sure what category I should create to include this in.The image of Manarola, Italy was digitally manipulated in Photoshop while the border and heart logo were created in and imported from Illustrator.
Awareness Poster: Big Brothers Big Sisters of America
An awareness poster promoting Big Brothers Big Sisters of America comprised purely of text.Created entirely in Illustrator.
Global Design Ad
An online advertisement for an imaginary client.This project was created entirely in Illustrator.
Wedding Program
This couple (my niece and her fiancee) wanted a playful and unique spin on the classic wedding program. After consulting with the clients, a Playbill-themed concept was developed. This is the cover art. The booklet was a huge hit.
This is also a piece that if I include it in the final portfolio, I'm not sure what category to put it under.
Couple's image manipulated in Photoshop and them imported into Illustrator. Inside pages (not shown) were created with InDesign.
Product Design: Geller Media International Pin
This client wanted a lapel pin to distribute during the Beijing Olympic Games. The client had a very specific concept of a panda bear, not too cartoonish, but holding out some bamboo as if it was a microphone. It took several attempts to nail the design down, but the client was thrilled with the final product.This design was created entirely in Illustrator, primarily with the use of the Pen tool.
Product Design: UPS 100 Year Anniversary Pin
This was a prototype design for a lapel pin commemorating UPS's 100th Anniversary. It is actually one of a set of three similar designs made. The others displayed an UPS airplane and an UPS Tractor Trailer.This design was created entirely in Illustrator, primarily with the use of the Pen tool.
Product Design: Mississippi Crossroads Pin
This pin was produced for the Mississippi Team to attend the 2008 National Kidney Foundation U.S. Transplant Games. The client supplied the idea of basing it on a well-known state landmark--the large guitar and road sign marking "the crossroads" were legend has it that a dark Mississippi night, Robert Johnson traded his soul to the devil for fame and guitar-playing genius.This design was created entirely in Illustrator.
Product Design: Oklahoma Dream Catcher Pin
Representatives of the Oklahoma Team attending the 2008 National Kidney Foundation U.S. Transplant Games were looking for a creative design for their team's sports pin. Their only instruction was to create something with a native American look. This is the first of two designs developed for them.This design was created entirely in Illustrator.
Product Design: Oklahoma Tomahawk Pin
This is the second design created for representatives of the Oklahoma Team attending the 2008 National Kidney Foundation U.S. Transplant Games.This design was created entirely in Illustrator.
Online Resume
Here is what I have so far for the online version of my resume. There are links to my PDF files included there also.
Business Card
This is the business card I have developed for myself.Week 3
I was a bit confused as to what exactly we were to submit as "interactive pieces". From what I gather from some of the instructions, we are to submit web interfaces, such as websites. But isn't animation such as splash pages also considered interactive pieces? I looked ahead in the upcoming weeks to see if one week called for us to submit animation pieces, but all of the assignments state we should submit static pieces and do not mention animation at all. So I'm figuring this is the week that we are supposed to do that. So for this week, to cover all bases, I have one complete Interactive Computer Based Training program on Personal Watercraft I made last session in my CBT course.
The second is a Web Site on the Sea Shepherd Conservation Society that I created in my Interactive Telecommunications Course. The problem I foresee using it for my actual portfolio is that many of the images and copy were taken straight from the actual site. Since the course was focused on using ActionScript, we were instructed not to get too involved with creating content and just base our project on an existing non-profit agency's website.
The third is a website I created in my Web Development course. It is based on a fictional company Global Design Studios that I created and used as the subject of several projects. I'm including this website because it showcases some clean design and functionality, but most of the content is either greek text or image placeholders. There is no way I could make up a bunch of imaginary content for it in the little time we have in this class. But as I mentioned, I think it is a good "template" and illustrates some of my web creation skills.
The fourth is the website for the Father Ryan Arts Center I helped create last summer as a special project course here at Ai. The version of the site we created is no longer in use, so I only provided a screen capture of the home page.
The next two submissions are Flash animation pieces that I created for the FRAC project. The FRAC Splash Page was used on the finished site but the Theater project was just a concept I came up with and created on my own. It was never submitted to the client.
Interactive CBT (Flash): Personal Watercraft (PWC) Basics
This CTB was designed to be an introductory training program on Personal Watercraft. The splash page was created in Flash using timeline animation and tweens while the graphics were created in Illustrator.The CBT itself was created in Flash using similar methods. The quizzes and exam were created with the use of Flash Learning Interactions and Quiz Templates. Photographic images were optimized in Photoshop and all graphic elements and illustration were created in Illustrator.
Web Sites (Flash): Sea Shepherd Conservation Society
This site was created in Flash using ActionScript 3.0. Most of the user interface and content is dynamically created. Photographic images were optimized in Photoshop while graphical elements were created in Illustrator.
Web Sites: Global Design Studios
This site was created in Dreamweaver, utilizing CSS and the Spry Framework. The spinning world animation was created in a combination of Illustrator and Flash. The logo and other illustrations were created in Illustrator while photos were manipulated in Photoshop.
Web Sites: Father Ryan Arts Center (FRAC)
The Father Ryan Arts Center is a non-profit community center in McKees Rocks, PA. This site was created free of charge for the client. Although I started out as a utility member for the Design, Interactive, and Programming teams, I soon ended up being completely responsible for the design concept and creation, having created 95% of all design elements and layouts. I was also responsible for 99% of the CSS creation as well as incorporating the pre-written photo Javascript slideshows used as the header and event highlight sections.This version of the site is unfortunately no longer up.
Flash Animation: FRAC Splash Screen
This Splash page was created for the FRAC website mentioned above. The animation was created in Flash utilizing motion guides and object masks. Illustration elements edited or created in Illustrator. Audio was edited in Audacity and supplied photos were digitally manipulated in Photoshop.
Flash Animation: FRAC Theatre Intro
This short animation was a concept piece created with the FRAC in mind. All animation is timeline-based, utilizing both tweens and frame-by-frame techniques. All elements, from the seats, to the stage, to the curtains are vector-based and created in Illustrator.Week 4
Adding pieces this week was a bit difficult for several reasons. First was that I have been spending a lot of time designing and developing the portfolio interface. Second is that since I've already submitted over 20 pieces in the first 3 weeks, I really don't have anything else that I think is worth including. So I had to try to whip up some quick pieces for this week.
You'll notice this week's thumbnails and images are different dimensions than previous weeks. This is because I'm pretty sure I have finally settled on the thumbnail and image sizes for my final portfolio--which as a feared means I need to go through and revise all the previous piece submissions.
Image Manipulation: Hello, my name is Mike
This image was created for my "about" page. It was accomplished by using my favorite photo of the New York skyline, a stock image of a figure, image extraction, clipping masks, layer blends, image adjustment tools, and vector shapes and text for the name card.
Illustration: Road to Success
Just playing around with a tutorial on simple gradient meshes in a recent issue of one of the trade periodicals. Before you know it, an ad concept is developed. This piece was created entirely in Illustrator mostly with use of gradients and gradient messes.Week 5
To start of with, I ran out of room on the school's server last week. I contacted Student Support on Friday and requested that my storage capacity be increased. I was told that a request would be made and that it could take 24 to 48 hours to process. As of Wednesday evening, I still couldn't upload anything to the server. I contacted Student Support once again and was told that a second request to increase my webspace would be made. It is now Saturday morning and it still hasn't been taken care of. This has been making updating my portfolio very difficult and time-consuming. For every new file I want to add, I have to go through the server files and find something to delete to wiggle out some room. I am absolutely dumbfounded that I am a Web & Interactive Media Design student and the school doesn't provide enough web space to do my assignments...and that it would take them so long to help!
As far as my pieces go, I would like to add preloaders to the flash projects I have already included since only one currently has one. Problem is that I have totally forgotten how to create a preloader. I created the custom one for the FRAC Splash screen project over a year ago and that was based on a tutorial I found somewhere. If I find myself with some time, I would like to find tutorials on preloaders and get that taken care of. But I don't think that is going to happen.
UPDATE: I was able to work on the preloaders. I was able to get preloaders working for all my pieces that were done in Actionscript 2. Although I found an excellent tutorial (http://www.youtube.com/watch?v=oC31Pc5SCHM) on how to create a preloader in Actionscript 3 and followed the steps exactly, I cannot get the preloader to work for my PWC CBT piece.
Anyway, since I already have well over the 12 portfolio pieces required and I've received permission from Carolyn, my efforts this week have been focused on the portfolio interface and textual content instead of additional pieces and revisions.
Portfolio Interface
I have added content to my home page but it is still lacking the main element. I believe this should be some sort of imagery, possibly something that helps describe the purpose of the site, but I have drawn a blank on how to go about it. In conjunction with not coming up with what I want to include there, I am not even sure of what format it should be. If it is imagery, I do not know if it will be a Flash piece or a static. UPDATE: I created a simple image based on the background I used for my business card and used that on my homepage.I have completed the contact page utilizing Spry forms and validation. Unfortunately, out of all the classes I have completed in the AS degree program, I never had any scripting courses that taught how to create the code to process the information once the user hits <submit>. So right now, that information goes nowhere and the form is completely useless.
I have also used the Spry framework to create a tabbed panel for my "services" page. The most difficult aspect for this page has been creating the write-ups for each service. Being that I am not in the field yet, I have no idea what I should write here.
I have made small refinements to the portfolio section layout, design, and interface also. I believe this increased the readability and usability of this section.
Flash Animation: FRAC Theatre Intro
I realized that I can simply use the same custom preloader I made for the FRAC Splash for this piece. So this one now also has a preloader.Interactive CBT (Flash): Personal Watercraft (PWC) Basics
I altered that same preloader to work with this piece. Now, not only does the main swf file have a preloader, but so does all the swf files that are loaded during the course of the program.Week 6
Wrapping it up (at least for as far as this class goes).
I am continuing to make tweaks, updates, and revisions to my portfolio interface. I believe I have everything working smoothly (except for what I have been mentioning about processing the contact form information). At this point, most of the content is in place although the "services" section still needs a lot of attention.
After receiving feedback in the live critique teleconference, I went back and worked on some of the elements that I agreed needed revision. Among the revisions was moving my "site last updated on" code from the top of the page to the footer area.
I also corrected the problem I was having with the listing of services on my homepage that was shifting to the far right in IE 7.
The biggest revision also had to do with this list of services. I had to go online and do a lot of research on how to target a specific tab of a Spry Tabbed Panel from an external page. The solution had to do with a special Javascript file supplied by Adobe and some scripting code on the pages. So now, when you click on "Web Design", you are brought to the services page with the Web Design tab pre-chosen.
Another critique that I have yet to address was the dislike for my homepage in general. I believe the majority of people expressed that the homepage had an aesthetic problem. It was suggested this may be due to the lack of imagery and/or that the page seemed too text-heavy. I agree with this some what. I actually like the homepage but there does seem to be something lacking. I will have to consider some of the suggestions offered and see if anything works to my liking.
Lastly, since I do not know how to script yet, I need to partner with someone to create the form processing code for my contact form.