Why it is nice to be as rich as Neil Gaiman; or Why Neil Gaiman makes a pretty website

Considering that Neil Gaiman is not only a god of words, but also creates decently kickass graphic novels, I thought his website would be an appropriate example of a well-designed website that blends images and words together to make a deliberate seeming website.

Does anyone else immediately think of this CD any time someone says "images and words"?

Gaiman’s site offers a variety of venues—examples of his work, tour information, his personal blog, and information about him. I very much like how the navigation options are at the top of the screen, but don’t like how smooshed together they are, I sometimes have a hard time reading layout that is cramped like this. However, each link is a different color so that makes it easier to navigate and I’ve seen plenty of sites get away with this as well as Gaiman does so I’m sure this complaint is more of a personal gripe than a design error.

His color choice is intriguing and I’m convinced that he chose the grays because they reflect his dark sense of humor and imagination. Color is extremely important to me and his scheme of white, gray, and black is professionally straightforward as well as easy to read. Like the color of your bedroom, the color of a website reflects who you are and I wonder if his house is similarly decorated. Some further probing might overturn more potential similarities between interior design and website design, but I suspect that’s not what I’m supposed to get out of this assignment.

This page is especially relevant because it uses the icon design that I plan on using in my own humble website. That’s pretty straightforward though, so I’ll move to a more interesting idea than clicking buttons as links. (Though as a side note I’d like to say that my website will hopefully enlarge the buttons when the mouse hovers over it.) While his page is divided into 4 sections (including the 2 boarders), the middle two sections are not the same size. Rather, the third area is a good bit smaller than the others, which is technically appropriate since it is only a picture of him and his cat, but different than other sites. I guess this is due to the fact that there are no ads here, and other sites generally have them on either side of the text but most often on the right.

If I were as rich as Neil Gaiman I wouldn’t have advertisers on my website either.


Interactive Fiction

This is less of a how-to post and more of an introduction to some of the digital media already out there that most will have probably missed.

Interactive Fiction (IF) is one of the oldest forms of digital media composed in a literary mode. IF was hailed by people on the forefront of new media as the future of storytelling and was expected to grow into a genre of writing in its own right. However, in 2012, 37 years after the first canon Interactive Fiction game (Adventure in 1975), the form remains incredibly niche having been financially undercut by graphical videogames, critically ignored by the literature community, and virtually unknown to the general public.

Interactive Fiction is often referred to as Text Based Adventures which is a pretty accurate descriptor of the genre’s historical examples, if not its present forms. These were the first video games. Just the player, a block of amber text on a dark display, and a blinking cursor.The poster child of the form is the adventure game Zork by Infocom, was was coded at MIT on their university server in 1977. In that game you wander around a network of caves below the white house collecting objects, solving puzzles, and earning points while trying to find a way out.

The form has since become far more experimental, exploring both the nature of games and the power of interaction in storytelling. A game titled Pick Up the Phone Booth and Die (PUtPBaD) put the one way to lose the game in it’s title. This is the opposite of most games where the rules tell you how to win. Instead, in PUtPBaD figuring out how to win is the game. Another game, called Aisle, takes place in a grocery store asile where you are allowed one action (in contrast to the many many actions of a game like Zork). There’s even a remix that mashes the two together called PUtPBaAisle. These and other IF titles try to explore the medium of interactive text, a subset of digital media as a whole.

For a insider take on writing text adventures, this guest lecture (on iTunes U)1 by Steve Meretzky, creator of Planetfall and an IF version of Douglas Adam’s The Hitchhiker’s Guide to The Galaxy, has a bunch of interesting insights.

If you are interested in creating your own interactive fiction there is a relatively non-techie tool for writing it called Inform. It allows you to create adventures (or more literary explorations) through short declarative english sentences. Follow the included tutorials (on the right, “Writing with Inform”) and you shouldn’t get too lost.

1. “Interactive Storytelling”, Free Audio File, iTunes U, MIT, Comparative media Studies, Media Industries & Systems, Spring 2006, Week 6: Interactive Storytelling

Pigeon Picture

Pigeon and People Photograph curtosy Matt Stuart Photography

I found this photograph on roadsideschoalr.com and think it is a really interesting way that a talented photographer such as this one might interpret the first phase of the photo essay assignment.

This picture not only has a perfect example of lines—the sidewalk crack draws the eye to all the people in the background—but unique angle that distorts the perceived size of the subjects.  This is how something very small, perhaps an ant or a fly, would see the city. I was initially drawn to this picture because of the similarities between the pigeon and the people. Both are walking purposefully in the same direction and presumably the man and the bird each feel that their destination is most important.

The final aspect of this picture that makes this a clever interpretation of the assignment is that it fits well into the idea of narrative, it tells a story well on its own but could easily be arranged to further the story of the man, the pigeon, or maybe even both. The size distortion makes it seem like it would be fun to Photoshop, creating a mashed-up image that could be interpreted as either a man or a pigeon.

Make those Colors Pop!

A fun and simple technique to use in Photoshop, isolating colors allows certain hues to POP in your pictures.  I never knew how to do this, then finally looked up how to do it using the most useful tool on the web, GOOGLE, and… VIOLA… it’s simple as pie!  Follow these few steps and you’ll be a pro in no time!

Step 1: Choose a pic

I chose my beautiful sissy Rihanna as my practice muse… haha. But feel free to pick whom or whatever you’d like! Open the picture in photoshop.  Double click the background layer to unlock the layer. Rename it and press OK.










HINT: The better quality your picture, the easier it will be to isolate the colors in your pic.

Step 2: Magic Wand Tool

Use the Magic wand tool from your toolbar to select the part of the image with the color you want to POP.  Zoom in to make your selection more precise. I chose RiRi’s red hair and lips. Notice the marching ants surrounding my selection in the picture below. After selecting copy and paste (command C + command V) your selection into the layer section, which should create a new layer.







Step 3: Turn everything else black and white

Finally, turn your background layer black and white by clicking the menu bar —> image>adjustments>desaturate.  Your background image should now be black and white.











Step 4: Congrats! You’ve isolated colors in Photoshop.  Your final image should look something like this:











VIOLA! It’s done 🙂


Age Progression

A fun way to pass the time in Photoshop is through celebrity photo manipulation (or manipulation of pics of friends and family). Whatever your preference, making the young look old would be a great way to have a laugh at someone elses expense. I found a helpful tutorial online that allows you to age a picture to your liking.

Step 1: Find your pic!

The tutorial I found decided to pick on Katie Holmes — although there are about a million other people’s mugs I would rather manipulate than hers.

Step 2: Start manipulating!

This is easier said than done, obviously. To start, the user should thin the hair of the eyebrows and eyelashes using the Clone Stamp tool at 100%. Also use as thin a brush as possible.

Step 3: Mold the Face

In this step, careful attention is given to specific parts of the face that go through the aging process. Using the liquify tool, the push option can create sagging effects to the cheeks, chin, and eyes such as this:

Step 4: The Double Chin

Adding a double chin makes for a roaring good time, and doing so is pretty easy. Using the air brush tool, the user is able to blend in the skin from the neck with that of the face, eliminating the shadow and making it look like the neck has gained fat.

Step 5: Wrinkling the Eyes

This is an important step that makes the aging process look believable. Using the stamp and brush tools, the user can extend and widen features that are already present, or make some new features of their own.

Step 6: Reducing the lips

Making the lips look thinner is an easy step that makes your youngster look old. Using the stamp tool, sample the skin around the lips and then carefully take off enough of the lips so that there is the right amount of thinness.

Step 7: Planning more wrinkles

Using the brush tool, you can sketch out new types of wrinkles on a different layer that can then be placed over the original image.

Step 8: Add nuance

You can add ages spots, discolor teeth and more to create the ultimate old image. All that’s left to do is gray the hair!

Source: http://www.exguides.org/photoshop-tutorials/age-progression.html

Skip the Dye Job; Edit Hair Color in Photoshop

Ever wonder what you would look like as a redhead? Instead of going down to Rite Aid and spending $14.99 on a messy hair dye kit, why not opt for something less permanent and just spend $423 on an Adobe Creative Suite Master Collection?

Through some Internet browsing, I found an easy way to edit hair color using Adobe Photoshop CS5. If any of you have pictures of people in Phase I of your Photo Essay and need a way to manipulate them for Phase II, here’s your chance.

I experimented with this method using a picture of the one and only Michael C. Hall (of Dexter fame) with his natural, magnificent ginger beard, and attempted to match his beard color with his hair color.

To adjust the hair color of your photo –

  •  First open up the picture in Photoshop, and add a Hue/Saturation adjustment layer.
  •  Upon selecting the Hue/Saturation layer, you will see a tiny box called ‘Colorize’ to the right of the three eyedroppers – select that, and then your entire photo will turn a shade of red (regardless of what hair color you are trying to achieve, it was only ironic in my case because I was trying to turn him full ginger).

  • Next, adjust the ‘Hue’ setting until you find the color you want to change the hair color in the image to; once you find that, adjust ‘Saturation’ to alter the intensity. This will alter the color of your entire image, but don’t worry – that will be rectified later.
  • The next step is simple, but the concept is quite complicated; just click ‘Ctrl + Backspace’ on a Windows computer or ‘Command + Delete’ on a Mac to change the layer background to black. This gets rid of the colorization, which we will now bring back to the area where we want it – the hair!

  • Making sure your foreground color is white, select the brush tool and begin to paint over the hair in your image to get the colorization you chose back. You can adjust the opacity of the brush to take care of any strands that might be difficult to paint over.

  • Now, Michael is more noticably ginger! Happy dye-ing!

Embedding JavaScript

One of the great features of JavaScript is that you can pop it directly in your .html file using a few simple tags. While you can write your web page HTML code in notepad or any word processing application, notepad++ makes everything easier. It will  align your code, tell you when you’re doing something stupid or even if you are forgetting a tag or two. It’s magical, but you don’t need it to start coding in JavaScript.

So let’s get started. I’m going to assume that you already know what a generic HTML page looks like. By adding the <script> opening and closing tabs, as seen below, you can embed your code right in the file. When any new web browser attempts to set up your web page as you described it with HTML and CSS it will also start whatever task you set your JavaScript program to complete.


                <script type=”text/javascript”>

                               document.write(“Hello World!”);


Here, the tag <script type=”text/javascript”> tells the web browser that you are about to write some JavaScript and the </script> tag tells it to continue reading the HTML. The crazy looking statement in the middle is called a function. A function is basically a small program that takes some data (in this case, the data is “Hello World!”), and then does some task. In this case, the task is writing to the web page. The word “document” in this case refers to a collection, called a Class of functions, which are understood and executed by web browsers. One of the functions within the document Class is the write() function. The dot ( . ) operator allows us to use any function within that Class.

The code above will write “Hello World!” to a blank web page and display it for the user. You may be thinking, why not just do that in a paragraph tag? Well, we could have the statement appear only when an incorrect password was entered into a form or as a response when Hello was entered into a form. We’ll get into that later. For now, work on grasping the concept of a function. Can you think of any reason why forms in HTML can be named with a unique ID?