The migration is complete!

The migration is complete!

I’ve transferred all my interactive work files to my own Web space. This way, barring any unforeseen screw-ups with the servers, etc., the only way the links will be broken will be if I go out of my way to do something to break them.

Keep in mind, however, that some internal content in a few of the projects refers to elements of the company website that no longer exist. When you click on links like that, don’t be confused by being taken somewhere unexpected. Broken links like that should take you to the Tribune-Review’s home page.

Better than a 404 page, I guess… right?

Anyway, it might sound a little too possessive, but I have to say I like the amount of control I have over my own work when it’s all set up this way on my own servers.

Now, I can get back to adding more content!

Fixing interactive troubles

The management at my office has undertaken a major update in its publishing system. The new system is called DTI, and, although I can’t remember what exactly that stands for, I recognize that it will be a great and much-needed step forward into embracing the 21st century. The goal, of course, is to greatly streamline the workflow process when it comes to preparing stories for both the newspaper and Web, but for one reason or another, the process of ironing out the initial wrinkles is bloated with unforeseen expenses and troubles. Not the least of which is the file migration from old to new servers.

Case(s) in point: My interactive projects.

At some point during the transfer of so many files, the Web and IT departments have broken the links to almost all of the interactive work into which I put so much time and effort. Those projects cannot be found on the new version of the website, and they may or may not come back online (it’s a disturbingly minimal priority for them).

The result for you, as a viewer of this portfolio, is that the links to see my projects don’t point where they should right now.

My solution is to migrate all the projects to my own webspace and then fix all the links and buttons as needed. In hindsight, it’s probably how I should have approached things from the beginning, but I wanted to maintain my company’s branding and use the official projects on the official pages.

When it’s all said and done, some of the functions of a few projects still won’t function properly (e.g. calling for news story links that no longer exist), but there’s nothing I can do about that.

Apologies in advance, and consider the lesson learned.

Improved illustration style: Spider-Man

Click above to see a larger version of my improved illustration style

Click above to see a larger version of my improved illustration style

Here’s a great example of the improved illustration style that developed after tons and tons of practice working on the Focus illustrations for my job as well as my own personal artwork (Spider-Man, in this case).

I put this project together as a birthday present for my next door neighbor from the neighborhood where I grew up. Spider-Man tells us in the picture that my neighbor had just turned four. He had gotten to be pretty good friends with my parents as he grew to such a ripe old age, and they told me his favorite superhero is Spider-Man. I knew I absolutely had to put something like this together for him.

It was a great opportunity to exercise my creativity to its fullest extent, instead of lacking motivation and being constrained by templates and color restrictions like I usually am at work. I had such fun, because it let me put together a really fun comic book-type drawing, too.

Looking back on it now, though, I recognize things I’ll do differently in future illustrations (never satisfied!). For instance, the drawing still isn’t inked in the manner I prefer. It’s just been adjusted in Photoshop so the dark lines seem as dark as ink. I know that’s a potential workflow decision that is common in the world of professional artists, but I just think a little differently. I prefer to do my inking in Illustrator for the clean lines and scalability it provides.

Another example of something I would change is the shading. I was able to make some decent dark shading, but not really very much highlighting. And, besides the standard three shades involved in coloring an illustration (flat tones, along with darker and lighter versions of each shade), I feel there are a few areas that should have another level of shading or highlighting in order to make your friendly neighborhood Spider-Man pop away from the background a little more.

Regardless, however, my four-year-old neighbor loved it. He’s much more familiar with my parents than he is with me, so he was pretty quiet when I gave the picture to him. The look on his face was obvious, though. He was thrilled.

It was one of the best and most fun projects I’ve ever put together. The motivation felt great, almost like I was creating just for the sake of fun, and not just for the sake of meeting a deadline. I love that feeling.

Focus illustration: Paying attention?

Click the image to see a larger version of this Focus illustration

Click the image to see a larger version of this Focus illustration

This was probably my favorite Focus illustration to put together for several reasons. For starters, I really liked the story, about children paying attention to their parents’ lessons, but more importantly, I felt a true connection between the story and my own life.

The story came from the memories of the writer who, as a child, was not known for paying very much attention to the “logical” side of life when things were explained to him. He recalled an instance when he was young that also involved his brother and father. His father had the boys outside in the back yard and was trying to explain how a construction level works. The writer remembers how well his brother paid attention to all the details his father was trying to get across, but he also remembers his own thoughts about who would win in a backyard street fight between King Kong and Godzilla, if the two monsters were to come face-to-face right there in the yard.

I thought the story was really entertaining, but I also thought it hit the nail right on the head as a description of my own youth. I also have a brother who, like the writer’s brother, has always been much more keen on learning the technical details of things. As a contrast to my career as a designer and interest in art, he is a software engineer and is interested more in how things work than in making them pleasing to the eye. I completely (and easily) identified my brother with the attentive child and myself with the imaginative one.

Such a connection really gave me motivation to make this illustration really good. Since they were outdoors, I didn’t have to be limited by trying to show “fake” 3D in Photoshop like I was in a few of my earlier illustrations. Often, working with organic pieces in a design project is more difficult than the clean lines of something man-made, but in some cases, it makes things simpler. I was able to focus more of my effort on the drawing in this illustration, although, admittedly, not as much as I would have liked. I really would have liked to put more detail into each monster and do some more with the shading on all the characters, but I didn’t know enough about inking and coloring at the time to work efficiently enough to do everything I wanted. Since doing these Focus illustrations, I have taken it upon myself to learn much more about how to do everything in faster more professional ways and my own personal artwork looks much better because of it.

Sometimes I think it’s really kind of a shame I don’t get to do the Focus illustrations anymore!

Focus illustration about a Christmas Eve

Click here to see a larger version of this Focus illustration

Click here to see a larger version of this Focus illustration

This Focus illustration was put together to run on December 24, Christmas Eve. The stringer writing the story this week told the story of a Christmas from the early part of his marriage, when he and his wife were just starting out living life together.

He recalls that, despite loving each other very much, they were still quite poor. They lived in a small apartment, inadequately sealed from the weather, and they didn’t have the money to even get a decent Christmas tree . There also wasn’t much money for gifts that year, either.

But, the writer remembers receiving one of the best gifts of all that night. His wife told him she was pregnant with their first child.

It was really a touching story about the young couple being happy in the spite of financial trouble and appreciating the things that really matter in life. As I was drawing this illustration, I tried to remember some of the details he wrote about, including a sparsely-decorated apartment, poor insulation with no carpet, ugly curtains and a pitiful tree. I thought of a real-life version of the famous Charlie Brown Christmas tree when I read the tree section, so that’s what I tried to approximate for the illustration.

The point of the story, however, was that his story was so similar to the traditional Christmas story. Like Joseph and Mary in their humble manger, this writer and his wife also spent Christmas Eve in meager surroundings. And, although they didn’t actually have a child, as in the true Christmas story, the story’s writer likened his Christmas to the first one because it was the night his wife told him she was pregnant.

Pre-Christmas Focus illustration

Click to see a larger version of this Focus illustration

Click to see a larger version of this Focus illustration

Long, long ago, in the early days of my employment, when I was merely a print artist, our newspaper ran a Focus section. Inside the section each Sunday, there would be a story written by a stringer (i.e. a writer not on the staff of the newspaper) that would need art to accompany it. Kind of like illustrations in a book, I suppose. I used to really enjoy claiming these Focus illustrations as soon as they would pop up in the assignment tracker, because I was always confident that, out of all of the news artists, I would be the one to put out the highest quality work, instead of just finding some stock photography or clip art to download.

This was one that printed just before Christmas. The story was written from the point of view of the husband, who is overwhelmed each year by his wife’s Christmas spirit, particularly the decorations she puts up. According to him, she goes overboard and gets worse every year, but he enjoys Christmas too, so it’s not the worst of habits.

What struck me in his story was his recollection of how detailed she would get in her decorations. Adding an unsafely-bright amount of lights to the tree was really just the beginning. Apparently, this lady even went so far as decorating the house cat. Now, I don’t know much about having cats as pets (I’m allergic, actually), but I do know that antler collars with jingle bells on them would not be very high on a cat’s list of things to welcome and appreciate.

The cat in this illustration was sort of modeled after the one owned by my coworker, Jen. She once expressed her personal frustration regarding the low number of tortoiseshell cats seen in today’s media. I had never thought about it before, and as I said above, I’m no cat expert, but it does seem true that regardless of their coloring, most of the cats you see on TV sport more solid patterns than the typical mottled “tortie.” I thought I would use this piece of art to help heal some of the pain those cats (and cat owners) must feel over the thoughtless insensitivity displayed by the media when choosing cat actors. I even gave a nod to Jen by naming the cat the same as hers—”Sailor.”

I tried, as usual to draw as much as I could, and I was able to handle some things, but I knew I would never be able to actually draw a tortoiseshell cat pattern and have it look presentable. So, I started to use Photoshop to cut some corners. It worked out really well with the cat, I think. The pattern looks great, if I do say so myself. And I knew it would significantly ease the simulation of light and shadow. But, using Photoshop too much and skipping over the “sketch” phase of the art led to inconsistencies. The room looks three-dimensional, of course, but the walls and decorations hanging on them look two-dimensional. I think most of that could have been avoided if I just would have had a good sketch to use as a guide. Lesson learned.

Looking back and remembering it, I guess this illustration is pretty good, but like many artists when they critique their own work, I’m not satisfied with all the parts of it. There are many lessons and techniques I’ve learned since producing this Focus illustration that I’ve come to practice and rely on in making art since. I now pay attention to certain things when it comes to the composition of the art, there are better ways I’ve learned to ink and color my drawings and there are several tips to keep in mind when I work on my lettering and speech balloons.

Always learning!

Pennsylvania Congressional districts

Click to view more about spending in Pennsylvania Congressional districts

Click to view more about spending in Pennsylvania Congressional districts

The point of this interactive project was to illustrate ideas about overspending in Pennsylvania Congressional districts. Several of this state’s U.S. Congress representatives spent more money on office space, despite having already approved spending caps that were lower than expenditures from the previous year’s Congress. Now, I’ve never been a fan of politics or politicians, so the results of this report came as no surprise to me. But, I like to see the information presented in a more visually appealing way than just numbers in a story. Basically, this project incorporates mapping data to show how Pennsylvania’s members of Congress waste money paying rent on their office spaces.

This required a slightly new and different approach to using Google Maps in Flash. By the time of production for this project, displaying a Google map had gotten to be common enough to almost seem normal. Once you learn how, all that’s really necessary to start is the API from Google and a set of coordinates to use for the map’s center. Everything can be built outward from there. The coordinates don’t even need to be given to me in any specific format. In other words, I have the ability to convert pretty easily from UTM; degrees, minutes, seconds; and some other formats into the decimal degree format needed by the mapping API. Problems can arise when it becomes necessary to plot many locations on a map, because of all the conversions that need to be made. When an entire database of locations needs plotted, it’s best to get the project’s reporter to make the conversions in the spreadsheet so the map can get off to a smooth start.

In this case, while we didn’t really have a whole database worth of locations to show, plotting the locations of each office in the state does yield a fairly large number. So, there were functions and arrays created to handle showing all those. We were fortunate enough also to have access to boundary data for each of the districts, too. The data was in the form of .kmz files that showed one set of coordinates for each little turn and direction change in all the boundary lines. Take a second and realize how many coordinates that is! The ability to “draw” lines and regions on a Google map was always easily doable—the process being little more than playing “connect-the-dots” between sets of coordinates to create shapes—but having such extremely detailed lists for districts all across the state was very rare. Those lists are what allow the Congressional districts to not only be viewed, but also replotted and redrawn consistently when the zooming and panning happen in the Google map. Flash’s actionscripting also allows many of the display characteristics to be altered to suit the design of the project. In this case of this project, transparency, color and stroke were all changed to make things look a little more palatable than the default Google Maps colors, which don’t always match very well with the color templates used at my job.

** EDIT – May 2012 – Due to recent upgrades in publishing and content management systems, links that refer to “news” or other external Tribune-Review sources may no longer work. **

Super Mario Brothers pixel art

Click to see the Super Mario Brothers pixel art full size

Click to see the Super Mario Brothers pixel art full size

This was my first experiment in producing pixel art. I thought an old 8-bit game character, like one of the stars of the Super Mario Brothers games, would be a perfect model for this because of how they were perceived—always limited to being jagged-edged little icons because of the technology of the time. So, who better to use than one of my favorites? The classic depiction of Mario!

I used several “generations” of  Nintendo’s, legendary character, pulling from some of the many incarnations of his game. He’s undoubtedly a favorite for many of the rest of the old-school gamers (so much so, that one of these sprites is used as a favicon for the Nintendo company Website). I grew up playing the 8-bit Nintendo, spending time with the original Super Mario Brothers, Legend of Zelda and other classic games. Of course, as time passed, the gaming systems improved, along with the amount of detail that went into representing all the games’ character sprites.

To create the art, I found some tutorials explaining how to get good results in creating an approximation of a bitmap design using just Illustrator, instead of necessarily including Photoshop. Since Illustrator is one of the programs I use most at work, I wanted to give it a try, because I always love the scalability of finished vector illustrations. The tutorials taught me more about Illustrator’s Live Paint feature, which in this case, let me create a grid and then color in all the small blocks to represent the pixels of the original bitmap piece of art I was using as reference. It was a little laborious, but now I have vector versions of 12 of Mario’s classic poses to use in some sort of future illustration project of mine. Personal projects, of course—not to be released for commercial purposes. ;)   For instance, I’ll be able to import these vector versions into Flash much more easily to use them for actual animation sometime.

What I’m trying to show in this little art experiment is an evolution of the appearance from the very early days of Mario’s “life” down through a few generations into Super Mario Brothers 3 and Super Mario World. Beyond those games, the characters started to get too detailed, and the technology of the gaming systems kept the pixels from being so obviously visible. Good for the gamer, but bad for the pixel artist. I also used a font for my copy similar to that used in the Nintendo logo. The font’s name is “Pretendo,” and it’s available to download for free from several of the font download Internet sites, but I got it from the Nintendo section on The Game Font Database.

Definitions, by Penguins Coach Bylsma

Click to see Penguins Coach Bylsma's definitions

Click to see Penguins Coach Bylsma's definitions

This project was a relatively small one, which I enjoy completing every so often. Often, the quick and dirty projects give me focus more on solving tinier problems and making refinements to my template Flash file. Typically, this is because the deadlines for the small interactive projects don’t allow me to learn something new in order to finish.

Case in point, this project was an excellent way to involve the Website’s viewers in understanding Dan Bylsma, coach of the Pittsburgh Penguins. Our Penguins reporter asked the coach several questions, and instead of simply relying on the inclusion of the answers in what would have been a relatively small and unimportant story, we came up with a much more visually appealing presentation for the material.

The words/phrases reported about were arranged in a way that would resemble a tag cloud, similar to those found on websites and blogs. While the arrangement of words is not truly a tag cloud, in the sense of any change to its appearance based on users’ interest, it provides a stable platform for interactivity. This was never meant to be a story that people would ever return to see over and over again, anyway.

The way the project works is actually quite simple. In order to see the reaction of Penguins Coach Bylsma to being asked what he thinks of each phrase, a user simply needs to click on the word in question. This will cause a quote from the report to fade in to view.

The simplicity of this setup allowed me to finish the back-end mechanics and get everything working properly very quickly, which let me spend more time refining the look and design of things. There are several subtle details in the user interface that make things run in a more smooth and user-friendly way. An example of this is how the words someone chooses stays highlighted until a new word is clicked. This sort of practice is good to incorporate as standard procedure, so users will have an easier time navigating through the project.

** EDIT – May 2012 – Due to recent upgrades in publishing and content management systems, links that refer to “news” or other external Tribune-Review sources may no longer work. **

Pittsburgh Children’s Hospital relocating

Click the image to see the Children's Hospital project

Click the image to see the Children's Hospital project

To both recognize the accomplishments of Pittsburgh’s Children’s Hospital and mark the period of time during which it would be changing locations (from Oakland to Lawrenceville), I worked to put together this interactive piece.

Besides the excellent reporting of our science/environment reporter, we were fortunate enough to have the addition of some really fantastic conceptual 3D art depicting how the hospital would look in the neighborhood. Examples of such imagery can be seen in the image at right.

Much of the extra contributions were architectural-type still renderings, using software similar to Google’s SketchUp, but some of it was exported as Quicktime animations. We set up a clickable, interactive view of the hospital that would allow users to make the most of the 3D images. They would be able to see much of the outside of the hospital, including several surrounding buildings and a parking garage. When they clicked on the hospital itself, they would be able to see some of the insides of the building—patient rooms, hallways, a chapel and even a tranquil garden. I must say, having that 3D imagery really added some nice qualities to the presentation that wouldn’t have been there had we not had access to such quality work.

We dug up lots of photos showing the type of cases dealt with at the hospital. There were actually so many that several rounds of editing had to be done in order to pare down to the 33 we ended up using in our slide show. They show some great examples of real-life cases from some of the more recent years of the hospital’s history.

Also included were a pair of maps to show the locations (old and new) of the hospital. Looking back on the project now, after learning so much since its release, I actually think the maps are sort of ho-hum. They’re just adaptations of the  maps that were used in the newspaper. I’ve since learned how to incorporate some of the extra coolness of Google Maps into my Flash work, but at the time, such things were not even possible. At least I animated the path to be used during the transfer of patients and equipment, though, right? :)

In another section, there’s a collection of headlines as well, along with the first sentence or two of each story in order to give users an idea of what the story is about. Immediately below are links to actually read the full story on its Web page. It was kind of our static hack to approximate the look and feel of a dynamic RSS feed reader without having the proper version of Flash or the proper knowledge about how to actually build a feed reader (another of the things I’ve since learned).

** EDIT – May 2012 – Due to recent upgrades in publishing and content management systems, links that refer to “news” or other external Tribune-Review sources may no longer work. **