They’re called “Facebook Challenges” by DBH. New contests run every 2 weeks or so.

http://www.facebook.com/?ref=logo#!/photo.php?pid=3573346&id=52286741191

This week, the challenge is to make a word look like the word it is.
There’s $100 prize money for both the fan fave and staff pick. It’s also a fun little way to flash your name around.
Have fun! =]

1. Portfolio Box:
   A well constructed portfolio box, available in standard sizes such as 16″ x 20″, 14″ x 17″, and 11″ x14, is a relatively quick and painless presentation. Pieces are recommended to be mounted on black or gray foam core boards. A large box will allow a large collection without having to reduce pieces. A smaller box is easier to travel with and is simple to store.
2. Bound Portfolio:
   A bound portfolio creates a very professional and holistic presentation of your work. Project images will need to be reduced in size and restricted to paper but the finished project is often quite impressive. Process work can be incorporated in the page design to show the development of projects.
3. An Online Experience:
   Sending your book to as many people as possible is optimal. This is difficult when making physical forms of work, however sending a URL to a person is as easy as setting up a laptop in a Starbucks. Since this web page is your first impression it should be beautifully and conscientiously designed as well as graceful and easy to use.

Note: As important as it is to have strong work, it is equally important to be able to communicate aspects of your work to other people. Poor communication skills portray lack of knowledge and experience.

Assembling the Portfolio:

1. Ordered by Strength of Work:
   Pick your three strongest pieces. Place your first piece, your strongest, in the very front. Put the second on the last page, and your third somewhere in the middle. The main advantage of this strategy is constantly reminding the reviewer of your strengths. The primary disadvantage is all your work should be on close par with your best work.
2. Ordered by Design Specialties:
   If you come from a generalist background, it is beneficial to organize your portfolio in categories like branding, packaging, interaction, advertising, etc. The disadvantage of this is that some categories blend into other categories. Web Design for example, might blend into branding and interaction. To challenge is to not be too stiff on dividing works into categories.
3. Ordered by Skill Sets:
   A more conceptual approach is to arrange your portfolio in categories such as Leadership, Collaboration, and Communication. This allows for greater flexibility and creativity in organization. Use of dividers and tabs is strongly recommended with this form of hierarchy.

Other Portfolio Tips:

1. Your first piece shouldn’t be too complex, but should have a quick impact
2. Have one “story” piece in the middle. The story should have a positive experience that will engage and impress a reviewer.
3. High quality craft is essential.

Conclusion:
Not only is a portfolio a keystone to one’s career, it is also a reflection on everything that a designer has done. It is very important to be proud of your work. Although I am young in my career, I’ve already started to collect my previous portfolios and compiled them into an archive. It’s amazing to see how I’ve grown as a designer. How have you organized your portfolio? How has constructing a portfolio made you grow as a designer? What is the best feedback you have ever gotten from your portfolio? Please feel free to comment and link your portfolio below.

 

Print ready PDFs (Up to 16X20)
Blue Poster – Comedy For A Cure 2010
Green Poster – Comedy For A Cure 2010

Congratulations Kyla!

 

Feel free to comment and let the artists know what you think!

 

At our design-a-thon on the 14th, one of the things you can work on is a 2010 calendar poster. We will vote after the holiday break on which one we like best, and we will get it printed for members to take home. These posters will be due the week we come back from break..

Here are the requirements of the poster:

• Must be 16″ x 20″
• Must be 300DPI
• Contain every day of the 2010 year (I don’t say every month because you are not restricted to the typical monthly grid layout)
• Must use images you are allowed to use (creative commons, purchased stock images, etc.).

These are just a few requirements, if we think of any more we will let you know!

Here are some links to help you with some inspiration:

Creative Calendar Designs – Smashing Magazine

10 Creative Calendar Designs For Inspiration – Best Design Options

Various Calendar 2009 Designs – Design Inspiration Resource

“Make Think focuses on taking on the dichotomy of designers as both the makers of artifacts and masters of integrative thinking, and exploring the contrast between tangible/physical solutions and the strategic/innovative ways that designers use their creativity to defeat habit. This issue is especially relevant today, as we position design and its competitive advantage to emerge stronger and even more essential to business and society coming out of the current economic downturn.”
- Taken from “How does AIGA come up with a theme for the design conference?” by Richard Grefé

Passing this theme along to her students, Karyn Jimenez – Johnson & Wales University Design Professor and AIGA Rhode Island member – assigned a project to her students which she hoped would inspire them to “Make Think”.

“This project was assigned to my Digital Media Perspective Freshman Class. Each student was given a female and male t-shirt template and asked to hand draw a t-shirt design for AIGA that conceptually was around the idea of “Make Think” or actually contained the saying “Make Think”. Each student was given 2 days and presented their idea to the entire class.

Being the Digital Media Perspectives is a class where the computer is not used, It was an introduction for them into basic design practices involving, composition, color, hierarchy and hand drawn typography.”
- Karyn Jimenez

Here is a gallery with what the students designed.

The shirt design that wins the voting will be printed.

 

Voting

Choose which one you like best and then vote for it below. Use the number listed under the image as circled below.

For the past month or so I’ve been reading a lot up on Augmented Reality in the flash environment. According to Wikipedia, Augmented Reality is “is a term for a live direct or indirect view of a physical real-world environment whose elements are merged with (or augmented by) virtual computer-generated imagery – creating a mixed reality.”

I observed many examples including useful applications like the United States Postal Service Virtual Box and GE’s Smart Grid. I wanted to develop something similar but on a simpler scale. After a couple of hours of work, and a few energy drinks later, I created a virtual world for my DME1020 class using Augmented Reality. I’d like to share this experience with the JWU AIGA community.

1 ) There are a few files we need before we begin the project. The Flash Augmented Reality Toolkit (FLAR), some attributes from the Flex framework, the Papervision3D library, and a small adobe air application to create our marker, as well as a .dat file that will control the parameters for our webcam. All of these files can be downloaded via this link.

2 ) We need a 3D object to load whenever we see our marker. Since it is so close to Thanksgiving, I’ve decided to use a turkey. Using Google SkethUp’s 3D warehouse I found a .zip of a turkey to use, which includes the necessary files and textures needed. First, click on “Download Model” and “download Collada .zip”. Extract the zip to a folder on your desktop.

3 ) File and folder management is critical in this type of project. So in order to make sure we can access all of the files later on, we should invest some time in getting it neat and straight now. Below is a screen shot of proper folder management for this project:

Copy the contents of the turkey folder we downloaded from Google SketchUp and paste them into the Flash Project > assets > models folder. Copy the files we downloaded earlier and put them in the corresponding folders.

4) Next, we can make a marker for our project. The marker is what the camera will recognize and use as an x, y, and z axis for rendering our turkey. I created a 600 by 600  px image. Black background with a 450 by 450 px white square in the middle. I put the text “JWU AIGA” in the middle, but you can put whatever you wish. It is important to follow this black and white colorscheme or else the FLAR package won’t recognize our marker. Save this in the root of our Flash Project Folder as a jpg, gif, or png.

5 ) Next step is to print out, or load this new marker that you’ve made on your smart phone. Open up the ARToolKit Marker Generator that came in the zip file included above. If you hold up the marker you’ve made a red outline should appear around the marker. While this red line is there, click “Save Pattern” and save it as Flash Project > assests > FLAR > FLARpattern.pat.

6 ) Now it’s time to jump into flash. Create a new Actionscript 3.0 .fla, 30 fps with dimensions 640 by 480 px.

7 ) Create a new Actionscript File (.as). This is where we will adding all of our code, we will attach this .as file to our .fla in a later step. First thing we will do in our code is add all of our imports:

--------------------
package {
import flash.display.BitmapData;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.media.Camera;
 import flash.media.Video;
 import flash.utils.ByteArray;

 import org.libspark.flartoolkit.core.FLARCode;
 import org.libspark.flartoolkit.core.param.FLARParam;
 import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
 import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
 import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
 import org.libspark.flartoolkit.pv3d.FLARBaseNode;
 import org.libspark.flartoolkit.pv3d.FLARCamera3D;

 import org.papervision3d.lights.PointLight3D;
 import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.parsers.DAE;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.render.BasicRenderEngine;
 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;
--------------------

What this code does is imports all the external classes needed from the flash player, flash ar tool kit, and paper vision 3d needed for this project to work properly.

8 ) Next we will define our class, setup our class properties and variables

--------------------
public class AugmentedReality extends Sprite
 {

 private var video    : Video;
 private var webcam    : Camera;    

 private var flarBaseNode                : FLARBaseNode;
 private var flarParam                   : FLARParam;
 private var flarCode                    : FLARCode;
 private var flarRgbRaster_BitmapData    : FLARRgbRaster_BitmapData;
 private var flarSingleMarkerDetector    : FLARSingleMarkerDetector;
 private var flarCamera3D                : FLARCamera3D;
 private var flarTransMatResult          : FLARTransMatResult;
 private var bitmapData                  : BitmapData;
 private var FLAR_CODE_SIZE              : uint         = 16;
 private var MARKER_WIDTH                : uint         = 80;

 [Embed(source="./assets/FLAR/FLARPattern.pat", mimeType="application/octet-stream")]
 private var Pattern    : Class;

 [Embed(source="./assets/FLAR/FLARCameraParameters.dat", mimeType="application/octet-stream")]
 private var Params : Class;

 private var basicRenderEngine           : BasicRenderEngine;
 private var viewport3D                  : Viewport3D;
 private var scene3D                     : Scene3D;
 private var collada3DModel              : DAE;

 private var VIDEO_WIDTH                 : Number = 640;
 private var VIDEO_HEIGHT                : Number = 480;
 private var WEB_CAMERA_WIDTH            : Number = VIDEO_WIDTH/2;
 private var WEB_CAMERA_HEIGHT           : Number = VIDEO_HEIGHT/2;
 private var VIDEO_FRAME_RATE            : Number = 60;
 private var DETECTION_THRESHOLD         : uint   = 80;
 private var DETECTION_CONFIDENCE        : Number = 0.5;
 private var MODEL_SCALE                 : Number = 0.2;                

 private var COLLADA_3D_MODEL            : String = "./assets/models/models/bird.dae"; // make sure you rename the original .dae file
--------------------

9 ) Next we will setup the constructor. The constructor will do 4 things. It will prepare the webcam, the marker detection, and the rendering for papervision3D. Then, it will repeatedly loop to update the marker and the rendering of our turkey

--------------------
public function AugmentedReality ()
 {
 prepareWebCam();
 prepareMarkerDetection();
 preparePaperVision3D();
 addEventListener(Event.ENTER_FRAME, loopToDetectMarkerAndUpdate3D);
 }
--------------------

10 ) Next step we will define all of the methods listed in step 9.

--------------------
private function prepareWebCam () : void
 {
 video = new Video(VIDEO_WIDTH, VIDEO_HEIGHT);
 webcam = Camera.getCamera();
 webcam.setMode(WEB_CAMERA_WIDTH, WEB_CAMERA_HEIGHT, VIDEO_FRAME_RATE);
 video.attachCamera(webcam);
 addChild(video);
 }

private function prepareMarkerDetection () : void
 {
 flarParam = new FLARParam();
 flarParam.loadARParam(new Params() as ByteArray);
 flarCode = new FLARCode (FLAR_CODE_SIZE, FLAR_CODE_SIZE);
 flarCode.loadARPatt(new Pattern());

 bitmapData = new BitmapData(VIDEO_WIDTH, VIDEO_HEIGHT);
 bitmapData.draw(video);
 flarRgbRaster_BitmapData = new FLARRgbRaster_BitmapData(bitmapData);
 flarSingleMarkerDetector = new FLARSingleMarkerDetector (flarParam, flarCode, MARKER_WIDTH);
 }

private function preparePaperVision3D () : void
 {
 basicRenderEngine     = new BasicRenderEngine();
 flarTransMatResult     = new FLARTransMatResult();
 viewport3D             = new Viewport3D();
 flarCamera3D         = new FLARCamera3D(flarParam);
 flarBaseNode         = new FLARBaseNode();
 scene3D             = new Scene3D();
 scene3D.addChild(flarBaseNode);

 collada3DModel = new DAE ();
 collada3DModel.load(COLLADA_3D_MODEL);
 collada3DModel.scaleX = collada3DModel.scaleY = collada3DModel.scaleZ = MODEL_SCALE;
 collada3DModel.x = -30;
 collada3DModel.y = -530;
 collada3DModel.rotationX = 90;
 collada3DModel.rotationY = 0;
 collada3DModel.rotationZ = 0;

 flarBaseNode.addChild(collada3DModel);
 addChild (viewport3D);
 }

//and finally

private function loopToDetectMarkerAndUpdate3D (aEvent : Event) : void
 {
 bitmapData.draw(video);

 try {

 if(    flarSingleMarkerDetector.detectMarkerLite (flarRgbRaster_BitmapData, DETECTION_THRESHOLD) &&
 flarSingleMarkerDetector.getConfidence() > DETECTION_CONFIDENCE                            ) {

 flarSingleMarkerDetector.getTransformMatrix(flarTransMatResult);
 flarBaseNode.setTransformMatrix(flarTransMatResult);
 basicRenderEngine.renderScene(scene3D, flarCamera3D, viewport3D);
 }
 } catch (error : Error) {}
 }
 }
}
--------------------

11 ) This concludes the amount of code we need. Lastly, let’s jump back to the .fla we created and attach this Actionscript (.as) file to it.

12 ) That’s the last step, export the fla, grant the swf permission to use your camera and hold your marker up to the webcam.

All in all, augmented reality is still low in functionality and uses a large chunk of CPU power, however there is a pretty big “awe” factor involved. I put a custom marker of my own on the back of my business cards and it goes over extremely well during interviews. It shows that you are up-to-date on web trends and are there to impress.
And of course, I’ve included the source files with all of the work. However, in order to get the most out of this tutorial I recommend following the tutorial and only making references to the source for help if you get stuck. The source files are greatly //commented for this reason.

Thanks a lot for taking the time to read my blog post and tutorial. If you get the opportunity post your own AR experiments in a comment.

Also, if you have any questions please post them in a comment so everyone can benefit from them.

Pepsi

The first example I noticed was from Pepsi. They launched their “Refresh Everything” campaign that was the first major advertising campaign with their newly redesigned logo. They used the 2009 Presidential Inauguration as a vehicle to get their message out there. They launched their campaign and put it EVERYWHERE replacing all ‘O’s with the new Pepsi logo.

 

They also launched a television spot:

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

South Park

Mocking Pepsi, South Park Studios used this same ad format and produced a parody ad, which was played on Comedy Central last Winter.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Ford Motor Company

The trend has now filtered into the automotive industry with Ford Motor Company using it for their F-150 commercials. There have been several so far, and it seems that they are sticking to the style.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

****UPDATE****

I recently picked up on another Ford commercial that uses this type of style, the Ford Taurus SHO.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Fox Broadcasting Company

Fox Broadcasting Company has recently started to use this as well in their national commercials that explain their nightly schedules. These have not yet made it onto the internet yet.

Charlie Moore: The Mad Fisherman

Even local area stations have started employing the trend on ads. Mad Fish is a show on NESN, New England Sports Network, featuring Charlie Moore. Recently they have launched an ad featuring the same kinetic typography style as the Ford commercials. I also could not find any clips of this online.

Zombieland

Another example I noticed was in the film Zombieland. Throughout the film, viewers are reminded of the basic rules of survival in Zombieland by typography creatively placed and animated within the scene.

These are just a few I have noticed. I am sure there are many more. Don’t be scared, share yours, and share your thoughts!

****UPDATE****

In a comment below, past member Ryan Paul pointed out another great example.

Starbucks

Starbucks joined Pepsi encouraging people to vote by offering them a free cup of coffee if they voted in the 2008 election.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

They also used this advertising style to raise awareness for their Red fundraising efforts to help fight AIDS.

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Photo Credits: atwatervilage, ourtimelost1, ourtimelost2, kbolde, c2k, reyobkram, ryaninman, Pepsi

Here is a taste of what she mentioned:

“Here are a few things we are looking to create:

• A JWU Relay specific logo (something that would incorporate aspects of the official American Cancer Society Relay logo but with a little JWU flare).
• A t-shirt design for the committee to wear to promote the event and cause.
• Any kind of poster designs we can get!  We are looking to do some event promo after the first of the year.  But we are also looking to do an informational/educational campaign on campus as well.”

Tracy will be attending one of our upcoming meetings to better explain what the committee is looking for, and even though the event is a long ways off, it is not too early to start brainstorming, and/or drafting designs.

If you are interested in participating and helping out with this cause here are some resources for you:

1. Relay For Life Logo – The American Cancer Society’s Logo for the Relay for Life event.
   • .gif format
   • .eps (vector) format
2. Johnson & Wales University Logo – JWU Crest Logo
3. Johnson & Wales University Identity Guidelines – While we are not designing for official university print, it is good to have a familiarity with Johnson & Wales’ logo and font-face guidelines. Download the PDF

While we do not have specific guidelines for any of these things, feel free to draw up some ideas and get a head start!