Feel free to use these in any project commercial or otherwise. Leave me a comment if you do use it please.

udc_xray_freebies

This is a quick tutorial on how I created the stencil effect for the poster.

Quick Steps

• Select background (expand and smooth your selection).
• Fill with white.
• Black and white (not an adjustment layer) your photo and up the contrast.
• Merge the photo w/ the background.
• Make your photo a smart object.
• Apply Gaussian Blur and Cutout(In that order).
• Tweak both filters (every photo is different).
• Live Trace it in illustrator to and color each shape.
• Expand and Tweak the trace.

Detailed Steps
Select background (smooth the edges out)
Using your favorite selection tool to select the background of your image. Smooth out your selection by going to Select>Refine Edge and use the smooth slider to smooth out your edges.

It also helps to contract your selection a bit this creates a darkened border around your subject.

Fill with White
Fill your Selection with white.

Black and white (not an adjustment layer) your photo and up the contrast
You have to use the Image>Adjustment menu for this step because you want the filters applied in later steps to affect the edited version of the image and not the original. Not the best practice to completely destroy your image but a necessary one.

Merge the photo w/ the background
Fairly self-explanatory when you apply the filters to the image you want to make the entire image reside on one layer.

Make your photo a smart object
Go to Filters>Convert for Smart Filters to make your image a smart object this will let you adjust filters to get the best image later.

Apply Gaussian Blur and Cutout(In that order)
I used about 4px Gaussian blur. For the cutout I used 3 levels with 0 edge simplicity and 3 edge fidelity. If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Tweak both filters (every photo is different)
If your image doesn’t have enough detail and is muddy, try taking down Gaussian blur. If your image has to much detail for you take the blur for edge simplicity up.

Live Trace it in illustrator to and color each shape.
Open your image in Illustrator and release the crop area and delete it. Also get rid of any clipping masks ect. Then go to Object>Live Trace>Tracing options. You can use my settings below or find your own.

Expand and Tweak
Live Trace is hardly ever perfect, by expanding your trace you can tweak individual paths. Go to Object>Expand and then click OK. Now you have all the individual paths for your tweaking pleasure.

1. Would I be a better designer to work with if I knew coding myself? Do developers appreciate knowledgeable designers?

The designers at EMU Marketing code our own pages in XHTML and CSS this takes the pressure off of the developers to make things “look right” and lets the designers have control over the entire visual appeal of the site.

I think developers appreciate designers who have at least some knowledge of how difficult a certain feature will be to implement, or know roughly what the process will be in creating the development back end.

2. Designers: Developers don’t like you because you represent Work and don’t see why said work is wholly necessary. Developers: Designers are scared of you because you are the gatekeeper. This is the dynamic. Discuss.

Because the designers and developers work in the same room and we critique and review each other project regardless of experience with that area it gives our designers a sense of the development process and a general understanding of how the websites work. It gives the developers a chance to see how the design process works and eliminates this problem.

3. How can stronger communication be developed not only between designers and developers, but also between designers, developers, and creative teams (art director, copywriter)? How can a team bring them into the fold more effectively?

Strong communication is one of the great things about EMU Marketing we are always looking at each others projects and keeping up on how things are working. Bringing developers into the project early to help work out features and to give them an overview of the site is always helpful.

4. To developers: if there was one thing ― an ability, a bit of knowledge, an understanding ― that you could instill in all designers with the wave of a magic wand, what would it be?

I would be very interested to know what this is.

5. How do you keep the goal of the project front and center so that design and development can keep a “common good” as their primary function?

The goal is always to give the client a site they can be proud to show off to people. It is up to both parties to do thier part. Designers need to make the site flow well and the information easy to access. Developers need to make the site easy to use and the information flow out the databases and into a readable format. Everyone has the same goal, I think once everyone understands that its easy to keep it front and center.

6. What’s the most helpful thing a designer can do before handing over design files?

Here is the checklist that the developers wrote.

1. Discuss site functionality with programmers.
2. Code XHTML and CSS.
3. Look at site with no styles, does it make sense?
4. Recode CSS from scratch if necessary (should be much quicker the second time).
5. Once site is valid, get approval from programmers.

That makes it pretty clear what the developers want valid and understandable XHTML and CSS from the designs to plug into the framework.

7. How soon should a developer be engaged to sense-check a design? At design brief? Before it goes to the client?

As the list above makes clear sense check occurs after meeting with the client but before the design goes to code.

8. Is it a mistake to make the lead developer the project manager?

Probably not but that might be a mistake and take away from the visual appeal of the site. Just the same and making the lead designer a project manager might create a mess for the developers. The best solution is to have someone outside the web design and development process. In this case it is our boss Lee who has a background in print design.

9. How can I get the developer to give me an absolute answer on whether something is doable?

Do your research and know their skill level. See if an open source project exists that does what you want or have an example ready. I find myself say “you know like how Wordpress does it.” when I’m explaining a feature to the developers.

Its also good to know what the developers know how to do. In my case there is nothing it seems our developers cannot do. See this post on what was going to be the tag cloud for Cultural Forum.

10. It seems that designers are under pressure to design an exceptional and unique experience and developers are under pressure to produce sites with high performance and little/no errors. Designer’s goals add pressure to developers and vice versa. How can our goals work together instead of causing pressure on each other?

Exceptional user experiences and high site performance are not mutually exclusive. These problems are problems of experience and dedication. Because designers are in charge of the front end code developers are not responsible for that area. They are free to focus on performance issues and creating error free applications. designers and focus only on the user experience.

Pantone Mugs

These great Pantone Mugs would be an awesome gift but at 130$ they might be a little to much. But I have heard of a few places that sell them individually.

T-Shirts

T-Shirts are something no one can ever get enough of. This one from Bad Designer Threads is sweet.

Design Magazines

MOMA Under 50$ sections

The Museum of Modern Art Store has sections for gifts under $25, $50, and $100. The under 50 and 25 dollar sections have some cool gifts, the Munny toy is especially cool.

Veer

Veer has some great merch the Pentagram Calender is especially awesome.

At the end of winter break (early January) I’ll scan all of drawings and make a post about it.

Anyone else want to join me? Maybe you could get back into the swing of something for the break.

Human Flipbook

Erbert and Gerbert did this great using tshirts with various amounts of ripping and tearing to create a flipbook/stop motion animation commercial which went viral on the internet.

Save Polaroid

If you dont know Polaroids Instant Film will be gone soon. The group trying to save it is already up and running. Meanwhile stock up on the film if you use it.

Sovergn Back

I found Sovereign Beck through the Cool Hunters Video Podcast. Put simply they make awesome ties. No this isn’t an ad I just really want one.

Pantone Shoes

Another awesome peice of designer clothing. Pantone shoes though at 200+ dollars they are a little out of my league.

Pixel perfect

Every pixel counts and the less you have the more each one matters.

One of my first jobs was working on banner ads for food services to go up on the Oregon Daily Emerald website. Being just 685×60 pixels cramming all the information in required some creativity on my part, but also imparted the lesson above.

Content makes the site

The most important thing is your content, don’t neglect it. Don’t let your clients neglect it either.

My coworker Tristan is working on a case study on the EMU Ticket Office website. If you take a look, the real focus of the site is the content. It is well written and correct. The photos are vibrant and fit the website. There is no horrific use of bold and italics to mar the readability of anything.

If any of those elements were out of place the whole site would be ruined, The Ticket Office handles all of their content. Because of the minimalist design they control how good or bad the site looks.

Push it to the limit. Then pull back.

This is actually something I learned back in my theater days. Our teacher always told us to push it to far and then he would tell us to pull it back.

When I was working on the Civil War LAN posters I did the same thing by going out on a limb and taking the minimalist flag and character design and adding both smoke and black bars on the top and bottom. The smoke stayed and the black bars went. My coworkers know when to say somethings goes too far. Just goes to show you to get the opinion of others. Which leads me into my next point…

Always get a second opinion

If you don’t get a second opinion something will be wrong.

Most of the mistakes or slip ups come around when things happen to fast and no one else takes the time to look over simple information like times and dates. Getting a second opinion helps you make better designs and catch silly mistakes that you wouldn’t notice.

Recycle, Reduce, Reuse (your designs)

If a design doesn’t work out save all the parts they might come in handy later.

This should be a no brainer. Saving parts of designs helps you get ideas and save time later.

Make it flexible (Raster vs. Vector)

Vectors are easy to scale and can be easily redesigned across all the different media.

Another lesson the Civil War LAN posters taught me was that a raster image is a pain to transfer across loads of different ads. Having to wait several minutes to open up a 600mb file just to resize the component to make a 2×3 ad is a pain. Use vectors for as much as you can to speed stuff up.

When I say redesign I mean everything

Just trash the old design and start over.

I learned this doing the new Cultural Forum website. I tried using the original colors from the website for the new and the same rounded corners. And everyone hated it. Including me. So I trashed the old design totally for the new grungy headers and striped color bars.

Be a packrat (design freebies)

They are free. That means you should have them. Even if you don’t use them.

Having a collection of freebies is a great way to get inspiration quickly as well as adding subtle effects to your designs like paint splats, subtle watercolor effects, grunge textures etc.

Proofread as much as possible

No matter how many times you proofread there will always be something wrong.

I rely on my girlfriend, since she’s a grammar Nazi and has a good eye. Things will always go wrong. After 6 proofreading sessions and well over 4 people looking at it we still get basic errors on some project. Make sure to triple check dates, times and costs.

If you make a mistake, don’t sweat it fix it

Don’t worry about that important bit of information you just forgot. Think about how you are going to fix it.

I’ve done matching stickers to go over bits of info on posters that have had gone to press with the wrong information. I didn’t sweat it and tried to keep my cool and come up with the best solution.

Let it stew

Try to let your projects stew for a week or two to get ideas going.

I try to know what I will be working on a month or a few weeks in advance. This gives my brain time to work on the problem and gives me an idea of where to when I start it. Times when I have had to start a project cold have always been the hardest to get going.

So digging into my old supplies from drawing for and some sketchbook paper yielded quite an awesome array of brushes. You can look at the example above for a practical example or at the screen caps below for some samples.

Thumbnail Preview

Ink/Watercolor Stroke Preview

Pencil Stoke Prevew.

Usage Tips

These are all sized to be used at 300dpi if you are designing at 150 or 72 for the web just make sure you make the sizes smaller.

I will be releasing the raw tip shapes sometime later this week so you can add your own options and create your own brushes.

Most of these are pressure sensitive and work really great with a Wacom tablet. If you dont have a tablet make sure you change the options.

Download

Feel free to use these for commercial and personal project. If you can try to give me a link back somewhere so other people can find these and use them to.

22 Artistic Brushes.zip

One of the project I recently finished up was the poster for the Civil War Lan. This poster had originally been designed as a spin-off of the emu lan 3.0 poster. However the design ended up not working out so well. Lee asked me to look into doing a kind of “capture the flag” themed poster.

Someone had been looking into the capture the flag theme to and found an awesome Unreal Tournament fansite kit with some nice hi-res character photos. After several hours of painting some grungy watercolor flag and slapping the character and some text over it I came up with this.

1st Draft

2nd Draft

At this point the general design was working out well and the flags were looking betting the more I added to them but the whole poster felt stale with the grungy battle scared flags and then the clean computer render and text so I began looking up some ways to add to the design.

3rd Draft Smoke Added

4th Draft Smoke and Bars Added

At this point the rest of the office started to chime in on the poster. Everyone liked where it was going until made the point that the character was a copyrighted image and this would be going out to Corvallis for the OSU part of the event so the character had to be scraped. The poles also needed more grunge as Paul also pointed out to match the same battle scarred appearance of the flags.

5th Draft No Character

With out the character to anchor the whole design it started to unravel a bit as I messed around with the proportions and text placement.

6th Draft Different Text Placement

The text placement in this version is close to where it ends up in the final poster. But the proportion and size of the flags still isn’t working out.

7th Draft Smoke Flags Changed

8th Draft Flags and Text Different

This draft also includes the flags attaching to the poles differently (as you can see in the drawings at the top) and moving Civil War Lan back to the bottom to try and anchor the flags.

9th Draft Bars Reappear Some stuff is removed to redo

Trying to add some weight to the poster mean I bring back the black bars from the start. I’m also reworking how the flags attach to the poles after overdoing it the first time around.

But the design still isn’t working so Lee asks me to look at stock robots we could use. What I come up with enthuses no one.

10th Draft Version A Stock Character

10th Draft Version B

Neither of these robots work at this point Paul wanted this to work as much as I do and offers to do a character illustration for me to drop in.

11th Draft Pauls Character

This looks promising but the coloring doesn’t work out on the character and then Lee comes to the rescue with the computer graveyard idea that ends up on the final poster. An hour or so of searching IStock gives me the this mock-up.

12th Draft Stock Photomockup

This gives me a good feeling and Lee agrees so net is the first mockup with the stock photos edited and placed.

13th Draft Hi-Res Stock Added

This is what the final poster ended up being. I just went in and added the smoke back in.

14th Draft Final Image

And there it is in all its glory. Notice the misspelling of “Oregon State University” which someone catches right before we go to press and which remained misspelled throughout 14 drafts and almost 30 print outs.

The final file wieghs in at several hundered megabytes over 50 layers and half a dozen smart objects each containing an additional 10 layers. The 32×57.5 version that will be outside the Fish Bowl soon weights in at almost a gig.

I recently thought about The Rasterbator at a meeting for the UO Digital Arts Student Group, ASDA, where we discussed doing some large scale outdoor art with it. It takes an image you upload and turns it into a massive halftone reproduction, on letter sized paper. Take a look at the gallery for more ideas and inspiration,

This is a new tutorial from Digital Arts. In it the author take some extruded text in illustrator and warps into abstract shapes I’ll post my results with this technique this week end, as I’m using this for a new poster design.

In case you live in a hole (you would have to if you haven’t found this yet) and you haven’t found Designers Toolbox yet, it’s now your new best friend. Loads of templates and other goodies are in here just poke around and you will find something you need.

Context Free. One of my favorite little tricks. It generates vector objects based on certain rules you define the code looks a little like CSS and is easy to learn. I’ll probally post a basic tutorial on how to use it later with some examples.