flukeout luke pacholski's design & illustration blog

Last summer I played Softball on a team with a long-running history of hilarious team names. That year was no exception. I made our logo and we got these printed large and proud on our shirts and looked fab all season.

Seems like Flash has become a dirty word on the web now, but one of the coolest parts of working at Future Shop was working on animated banners for product promotions. Here are a couple of my favourites.

Refresh the page to see the intro animations.

Satellite Radio

This was for the launch of Sirius and XM Satellite radio service in Canada.

XBOX 360 Release

This was for the launch of the XBOX 360.

Up4 was a Facebook app I worked on while at ActiveState. It was a casual hang-out enabler meant to complement Facebook’s native event system. It was a passive approach to getting friends together – you’d list when you were up for certain activities, and friends could join if they were interested. I was responsible for all of the visual design, markup and illustrations. Here’s a few selected screens.

Calendar View

This was the main view of what you were up for. We divided the day into sections keep the events more flexible. You could click anywhere on the calendar to start creating a new “up for”.

Creating an Up4

Once you made an event, other friends you’d invited to the app could find it on the “what your friends are up for” tab and join in.”

Up4 Details

Examining an up4, you’d be able to see who joined, have a discussion with other participants and also share with Facebook friends who you think might also be interested.

Facebook profile box

You could choose to include this Up4 box on your Facebook page. This would allow friends who weren’t Up4 users (yet!) to see what you were up for and join in.

I posted this one earlier as a collection, but figured it deserved its own post.

Here’s an older drawing I did from a photo of my bro Adam and our family dog Baca. They’re both a lot older and bigger now.

When redesigning the Vibes Sign In page, one of the concepts I came up with was a threaded SMS-style conversation. Vibes is all about mobile so it seemed fitting. Try it out, it has a very rudimentary capacity to carry (a pretty boring) conversation about signing you in. Bonus points if you get the hunter 2 reference.

Click the Boring Sign In link at the bottom see a static version of the final design.

Try out the Prototype Use Firefox – It’s going to look terrible otherwise!

At Vibes, we offer a cool system that lets our customers display interactive, SMS-driven visualizations on large screens in front of an audience. To control these visualizations (I’ll post some examples later), we built a remote controller. The controller lets users select the visualization they want to show, configure it to fit the screen they’re displaying it on, and control what’s being shown on the screen.

The controller below controls a vote visualization. People at the venue text in to choose the next song they want to hear. The remote controller shows the state of the visualization (currently displaying the vote options) as well as the number of votes received.

When time is up, the person in charge of the clicks the Winner screen to display the vote winner to the audience.

Putting a Visualization on a Screen

When the user selects a visualization, the remote controller and popup appear. To put the visualization up on the large venue screen, the user follows the instructions on the popup. When the visualization popup is put into fullscreen mode, it automatically resizes it’s contents to best fit the available screen real estate.

The screen adjustment controls in the remote controller help fine-tune the display and when everything looks correctly positioned the visualization can begin.

The Visualization Popup

Here are some components of the Zeep Mobile website I designed. Zeep is basically an API that allows developers to interact with their website users via SMS.

Homepage

Sign-up Panel

To subscribe users to receive text messages from a website, the developer would embed the Zeep Mobile panel into their site with an iframe (so web 2.0!!!). Here’s the panel.

Here are the business cards I made for the Zeep guys. I got called out for the styluses, but I guess back then there was still a chance some mobile devices had them, so I don’t feel too bad. I got these printed in China with rounded corners, they turned out great!

The Post-it on the back is there for notes.

I mentioned in a previous post that one of the products I work on at Vibes allows people at concerts or other venues to text messages to a big screen for everyone to see. Texting’s great and all, but we want to come up with cooler, more interactive ways for people to send messages to the screen.

Enter the slingshot, it lets people type out a message and then aim it at a target. The message would appear on the big screen according to where it was aimed. This would allow people to shoot over other people’s messages, or to combine their message with an existing one for potential comedy gold.

Try out the Prototype Type a message and launch it with the mouse!

How is it built?

The prototype is built using HTML/CSS + jQuery + CSS animations. I made another version that works on mobile devices via jQuery Mobile. On the iPhone pure jQuery animations are quite slow, but mobile Webkit’s hardware-accelerated CSS transitions came to the rescue.

CSS animations got the job done, but I can’t say I’m a fan. Most of the slingshot animations are triggered by adding a class to some DOM element via jQuery, which then causes the corresponding CSS animation to trigger, seems clunky.

As co-founder and VP of Pixels of Zeep Media, I was in charge of basically everything visual. Here’s a roundup of some of what I made.

Name & Logo

The name Zeep Media came out of day-long brainstorming session (read: beating my head against desk). I think it references the sound of a cell phone when it both beeps and vibrates on a hard surface.

Website

I was in charge of designing and implementing the HTML/CSS layer of the website, as well as light front-end programming duties.

Homepage

The homepage was meant to get potential advertisers going right away. They could fill out their ad copy and move directly to the next step of creating their first campaign.

How it works

This is a step-by-step explanation of the campaign creation process. I included it to show some of the icons and illustrations I made.

Creating a campaign

This is one of the steps in our “wizard” style interface for creating a campaign.

Design for the Vibes dodgeball team shirt. It was pretty hard to make a character out of a phone that looked like it could kick ass at dodgeball so I took a different approach.

The non-basic app icons falling off the phone are the logos of the other companies competing in the tournament.

Here’s the team all geared up.

One of the things I work on at Vibes Media are large-scale visualizations that people at a venue can interact with via SMS. For example, at a concert people can send text messages that will then appear on a big screen everyone to see.

I built Tic Tac Tailgate as a prototype of a SMS-driven multiplayer game where large teams can alternate texting in their moves (each square corresponds to a number from 1 to 9).

Try out the Prototype Click the numbers to make moves as both sides. Use Firefox!

How’s it work?

Guys and girls play against each other. Each turn, while the turn timer is running, players from that team text the number corresponding to square they’d like to place their piece. Each team has a unique shortcode assigned to it to make texting easier. Every time a vote comes in, a small puff of fire appears in that square to help the rest of the team clue in to what other people are doing.

Once the turn timer runs out, the game figures out the most voted for square and makes the appropriate move. In case of a tie, the game randomly chooses between the tied squares. If there are no votes, the game chooses a random square for the team.

The game continues until there’s a tie or a winner.

How’s it made?

It’s all a bunch of HTML/CSS driven by some messy JavaScript. The animations are powered by jQuery with a little bit of help from Spritely for the smoke and fire sprites.

What’s next?

I’m planning to finish the prototype and have some folks at the office give it a try. Text-based interactions are kind of limited, and we’ve also started to experiment with web-based UIs that people can use on their smartphones. This would dramatically increase the depth of interactions available. I’d like to take a crack at making some more elaborate games.

A bunch of us at Vibes have entered the Chase Corporate Challenge race. 3.5 miles of pavement pounding in downtown Chicago. Here’s the logo I designed for our shirts. I’ll post photos when they’re printed.

Here’s how I made it

• 

  1. Sketch

  I made a few sketches using my running shoe as a reference. I chose this one and took a picture of it with the Photo Booth app.

• 

  2. Start a-Vectorin’!

  In Illustrator, I placed the scanned image as the top layer, set it’s opacity to 30% and it’s blending mode to Multiple. This let me create the vector shapes underneath the scan while using it as a reference.

• 

  3. BAD Vectors!!!

  So here’s a view of the finished illustration that shows all of the vector shapes that make it up. The negative shapes between the white parts of the illustration are actually strokes. This is kind of a disaster when trying to print on a shirt because you really only want one shape to describe the white image.

• 

  4. Ahh, that’s better

  After about an hour of cleaning up the vectors, I’m done. Check out the difference between this version and the one above it. Way cleaner and easier for a printer to interpret where the ink needs to go.

• 

  5. Halftone

  Because this is a one colour print (white on blue shirt), I needed to convert the faint speech bubble behind the shoe into a halftone pattern. This lets the printer simulate a fainter shade of the color it’s printing.

I’ve been having too much coffee at work.

On a shirt

Here’s the design as it might appear on a shirt. I used a halftone pattern to fade out the sunshine rays and shadow.

This is the logo, business card and letterhead I designed during my brief time at Verb Exchange.

The typeface is Cronos Pro.

Got down with a sketchbook on Sunday morning and made this. Pencils into Photoshop. I’ve been thinking of putting together about 10 images in this style or so and printing some shirts eventually.

For an internal app at Vibes.

Here are the sketches I built the final vectors from.

It’s a pencil drawing coloured in Photoshop.

Here’s a scan of the original.

Over the years I’ve worked on a bunch of web projects and have somehow managed to work the Pawns into most of them. The early green Pawns are from a (now gone) Facebook application called Up4 and the ones at the end are from my time at Zeep. They’ve also been making appearances in various demos and presentations at my current company, Vibes.

Godspeed you Pawns!

A design I made a while ago and submitted to Threadless.

This is a logo for probably the coolest web project I’ve been involved with, a Facebook-driven social restaurant review site. I’ll post a link and screenshots later, but here’s the logo I made for it.

I went for a Vegas-themed logo both for the relationship to all you can eat buffets and that “Jackpot!” feeling of discovering an awesome new place to eat.

And here’s the web-app

This shows the main page of the app, where users interact with the map to discover restaurants.

Guitar robot based on my old Yamaha acoustic.

Logo for a Revelstoke (small town in British Columbia, Canada) community blog and classified section. Love the mountain lifestyle? Check out thestoke.ca!

Quick illustration for a section in an internal newsletter about an RSS project. Inspired by Leo Blanchette’s RSS Robot.

A blast from the past, but one of my favourites.

Working on a drawing of a boombox/tuba combo. Drew this from a picture of myself. Might just do a drawing of the boombox itself though, not sure if the figure adds much to the concept.

PS – It’s a CSS border-radius joke.

I had the pleasure of playing with some great folks on a volleyball team this past summer and we needed a logo. We’d met in a guitar class so this seemed fitting…

I printed these on shirts later, check out the printing process.

And here’s the team all dressed up.

I’ve been enjoying drawing hands lately and drew these concepts. I’ll probably make some finished pieces in a similar style.

Been a while since I posted, here are some recent drawings. Click for bigger versions.

Gave myself an assignment to do a piece over the weekend and here’s the third. This is Sharpie and Tombo Markers on marker paper – 17×11.

Not really a self-portrait, but I used my own face as a reference.

Gave myself an assignment to do a piece over the weekend and here’s the second. This is Sharpie and Tombo Markers on marker paper – 17×11.

Gave myself an assignment to do a piece over the weekend and here it is. This is Sharpie and Tombo Markers on marker paper – 17×11.

Here’s the second in the series.

I’ve always liked drawing with Sharpie pens and have started drawing on small canvases. I made this for my roommate Benita for her birthday.

I’ve got another on the go which I’ll post sometime over the weekend when I finish it.

I’ve received quite a few comments and emails asking if I’d print this design on a shirt. I caved to the pressure, and now you can…

…buy it on a T-shirt!

Get it at my Etsy store! →

Another day another portrait. Sort of. I did this one in about three hours from a photo. Got lazy on the background. I used a grid to figure out the proportions etc.

Here’s another portrait. It’s Matt Parkman form the TV show Heroes. It took me about 6 hours total over about a week. I started saving some progress pictures, but they were so far from how it finally turned out that I didn’t bother. I’ll post the reference photo later.

Painted in Photoshop with some standard brushes.

I made these weather icons several months ago with the intent on posting them on iStockphoto as paid downloads. It started taking too long to get them just right, so I bailed on the project before finishing the whole set. So instead, you can have them for free!

Download the Illustrator File

I’ll slap some kind of Creative Commons license on these later. IIRC – it’s the one that says “use this as you will for whatever reason you want, but give me credit somewhere” kind. Preferrably with a link to this site. Cheers!

Painted this morning with mah little Wacom tablet and Photoshop. From a reference photo.

Son House was an influential Delta blues musician, and composed one of my favourite songs – Death Letter. Watch him lay it down.

So after watching Joe Bluhm YouTube videos earlier today, I felt inspired to do a portrait. Digging through my photo collection I found a pretty good photo of my brother Adam and went to town. About four hours later I ended up with this…

In case you’re noticing some weirdness around his left eye, it’s because it was swollen. The photo was taken a day after he got into a fight!

As the title suggests, I painted a picture of Kevin Spacey. I tried to capture the most important lines from reference photo, then added a couple skintones.

The right eye isn’t quite right, and I’m missing some of the emotion from his face, but overall I’m pretty happy with it.

I’ve been playing a bit of magic again, and loving the awesome artwork. I did a cover of one the cards I liked this morning. It’s a work in progress. Things to remember:

• Use a low opacity brushes to slowly build up colour
• Try to find a better way to paint the background, large protoshop brushes leave their telltale signs (especially with lowered opacity)

I’m happy with it so far. Right now the city in the background and the wizard pretty much share the same colour scheme. I should try to differentiate that a little bit to bring him to the forefront. Maybe I can do some out of focus type blur for the background. I had trouble mimicking the range of colours in the spirit thing from the original. There’s some yellow / beige / peach / green / blue in there and it all somehow fits together. Something to keep working on. Here’s the original:

So I had this idea to do an illustration showing that the Easter Island statues have an underground component. I finally got it done and made it into a tshirt design.

I don’t think it makes a great tshirt design – it’s a pretty illustration and has lots of little details to look at. On top of that, many of the comments suggest people can’t make out the underground part very clearly. In retrospect I agree, and have some ideas on how to fix it. I don’t think I’ll resubmit an updated version, but might revisit it in case I want to make a print.

Anyway, it’s up on threadless.com for voting. Click the little banner below:

About a week ago I picked up a copy of ImagineFX, a digital sci-fi art magazine. It’s a really great magazine, full awesome art and tutorials. Anyway, it inspired me to do some digital painting of my own.

Lately I’ve been learning to play blues on my acoustic guitar, so I wanted to paint a guitarist. I like the look of those old school guys, but none of them are that recognizable (at least to me), so I picked Mark Knopfler instead.

Here’s what I came up with:

I’m pretty pleased, but also feel that it needs a bit more work to feel really finished.

Here’s how it went down

I used this reference photo.

I placed the photo into my Photoshop CS2 document and started painting using my small 4×5 Wacom Graphire tablet.

First, I tried painting from the unaltered original photo but it wasn’t turning out very well. I was having a hard time picking out the key shapes and details, and was also screwing up the proportions.

Here’s how it looked:

Not satisified, I decided to adjust the contrast (via the Curves dialog) of the original photo to help simply the image. Once I was happy with the contrast adjustment, i started painting.

This helped a lot, and my painting was fairly close to the original.

Here it is:

I used a chalky brush to define the outside of the black areas to make it seem more like a non-digial piece. I found a brown paper texture and a photo of a Fender Stratocaster to complete the piece.

In the future, I plan to use this technique as a starting point to a painting. Once I establish the general shapes / shadows, I can fill in the smaller details.

I was drawing some pigs for Donna’s mom, overdosed on cuteness, and came up with Griswald.

And here are the cute ones:

I was looking through my projects folder and found this motorcycle. I remember at the time that I was painting it, I was really happy about the new techniques I was learning about. I was also really excited about maintaining momentum and to keep on painting and learning. That was two months ago and I haven’t finished it. Regardless, here it is. I’ll make some time to finish it soon.

I thought I liked painting. Rather, I wanted to like painting. Turns out I don’t. I wanted to like it like I like drawing. But it’s not the same. I don’t have the same control. What I visualize in my head doesn’t materialize. Maybe it’s because I never learned to think like a painter. I can certainly think like a drawer. Or any other piece of furniture.

Maybe my frustration is limited to physical paint. I’ve had better success with digital painting.