June 6, 2009

Rocketship Hugo

When we moved from Austin to Arlington, I was bored. The teachers apparently didn't believe my old school, my mom or me that I was far ahead of their students and so they put me in the second high groups in reading and math. Cuz you know, that's what you do with an advanced kid - bore the crap out of them.

I quickly realized that my new school's library sucked. I was going through books at a ridiculous pace and my teachers were already getting tired of letting me go to the library after I finished my schoolwork and homework before class was over.

So I searched until I found the thickest book in the library. It was called Space Cadet by Robert Heinlein.

I had found a new obsession. I read every Heinlein book in our library, devoured Asimov with abandon and dabbled in Andre Norton and then Katherine Kurtz. As our selection began to expand, I eventually discovered Tolkien as well.

But I always went back to Heinlein, who was for me then, the end-all be-all of science fiction. Eventually I branched out into other authors ... but the one time I wrote a paid-academic piece, it was about Heinlein's novella Waldo.

So when I heard that the Hugo Award was looking for an actual logo to use - something the organization could use in print and use on stickers for the winning books and materials, I knew I wanted to throw my hat in the ring.

Unfortunately, I was rather swamped with two other projects at the same time and really didn't get much beyond the sketch stage. Here's the first two rough sketch ideas that I did not submit to the contest:

I wasn't fully sure that I wanted to let go of my little creature there ... so I did not even attempt to vectorize those sketches and turn them in to the contest.

Instead, I did work up the second concept I came up with. Unfortunately, I really didn't have time to do the concept the justice it deserved, but here's the image I finally turned in:

I thought for the printed pieces, the rocket portion of the logo should be a silver foil, preferably embossed. I wish I'd had time to work up a font closer to the one I sketched in the other concept, but ... *sigh* you do what you have time for, right?

Posted by Red Monkey at 9:04 PM | Comments (2) | Design | Sketches | Stumble

April 23, 2009

Announcing ...

Well, the freelance job I took back in September? October? has finished the first phase. We still have several pieces of the original plan to accomplish, but Sherry K's new website is up and running. Check her out at http://www.sherryk.com/ and take a moment to listen to her music.

Meanwhile, I've got several refinements to make to the site still, mostly on the programming end, which is certainly the slower aspect for me.

Her music is available at iTunes, CDBaby, eMusic and directly from her through PayPal. I'll tell you, I'm not usually big on instrumental music, but I really love Sherry's stuff. I wasn't sure I'd ever totally enjoy hearing piano music again after listening to my little sister practice Fur Elise at 6 a.m. whilst I was in high school (sorry, sis, wasn't your playing so much as the time you chose!)

Anyhow, go check out her site - leave her a comment and let her know what you think of her music.

Posted by Red Monkey at 5:57 PM | Comments (0) | Design | Stumble

March 22, 2009

Creative Suite 4

I've been limping along with Macromedia's MX04 for Dreamweaver, Fireworks and Flash. Fireworks - once a beloved staple of my web designing process - had become somewhat unstable and I've grown so proficient in Photoshop that I just didn't use it much anymore.

I had also purchased - on a last gasp student discount - Adobe's Creative Suite 2 for Photoshop, Illustrator and InDesign. Love, love, loved it.

I skipped the update to CS3 ... design software is just so damn expensive and many artists just don't make the moola to hit every upgrade. Generally I strive for an every other upgrade, but after the events of the past couple of years, I was considering waiting for CS5 ... or maybe even 6 (or whatever it morphs into by then). Then I attended one of Mogo Media's CS4 launch demos and oh man. Let me put it this way. The rest of the designers were laughing at me the whole day as we watched the presenters put CS4 through some paces - some showing stunning brand-new features, others showing some features that were introduced in CS3 (or even CS2) that not everyone knew about.

Then I realized that since I'd gotten CS2 with an educational discount ... it was not eligible for upgrade pricing. CRAP! I frantically looked to see if Adobe was still offering upgrade pricing from Macromedia products ... yes! Chances are, though, CS4 will be the last opportunity to upgrade to Creative Suite from the Macromedia suite. So, I bit the bullet and killed my tax return on an upgrade.

Holy cow, I'm so glad I did. First, Photoshop has some just freaking incredible changes. I do a lot of web design and it's difficult to count pixels in a design sometimes. For example, I might want to crop an image right along a particularly fine line. To do that, I'll pump up the view to 1600% (which used to be as high as you could magnify - you can go bigger now, too). But, even at 1600%, if you wanted to count pixels to make sure something was even on two sides, it could be difficult. Now, though, it's a snap - the pixels are clearly defined, even when seeing a solid colour. Check it out:

It seems like such a small thing - and really it is. But it makes a HUGE difference when I'm doing detailed work. It makes using the magnetic lasso easier, makes pathing something easier, it's just amazing what a difference it makes. We did have a situation at work where one designer had an image that did not do this ... and we've yet to figure out why. But luckily I've not had that happen to me yet.

The other new feature of Photoshop that is just freaking incredible is Content Aware Scaling. Basically, let's say you need a picture that's 400 pixels wide. And the image you do have is 300 pixels wide. That's 100 pixels you have to figure out what to do with. If you just stretch the image, it's going to look all stretched and distorted. So, you can attempt to use the cloning tool or something and kind of fake a background extension. Or you can add another image there to fill up the space - maybe make that area black and then put some type in there. Or, maybe you just leave that area white.

Here's an example from crondeau at sxc.hu:

The gridded area represents the area that you still need to fill up somehow. If you just use regular stretching, you get a rather stetched out looking adult and kid. The buoys are really weird looking as well. Not the best effect.

But the new Content Aware Scaling does this:

As magic as it looks, if your background has too much detail, it won't really work. Likewise, it's not going to be able to triple the width of your image - maybe not even double it. But it's an absolutely amazing tool.

There were definite improvements in other programs as well - most joyously for me was the ability to sketch with my Wacom tablet in Illustrator. Every time I've tried to sketch before, Illustrator would simply re-draw lines that it thought were too close to one another. Now? Now you can sketch on the computer like you do by hand, making the Wacom tablet an even better tool. WOOHOO!

Posted by Red Monkey at 5:21 AM | Comments (1) | Design | Stumble

March 17, 2009

Whatever Happened to Dreamweaver

When I first started building websites, back in the days of completely grey backgrounds, Mosaic and that upstart Netscape, I coded a site "by hand," that is, I used a simple text editor and wrote all the code myself. It wasn't hard. You put < p > at the end of every paragraph (I know, I know!) and animated GIFs were the height of kewl. As the web left kindergarten and moved on to junior high, coding a design meant using tables to contain chopped up bits of images and the tables could get pretty complex. It was easy to get lost in the code trying to figure out which cell you were in now if you'd spanned 3 rows and 2 columns ....

And then there was Dreamweaver, Macromedia's way to make web design easier.

For most web professionals this meant you could visually design a table - and then flip back into the code and clean up the mess that DW had made. Not perfect, but much faster than trying to code a complex table completely by hand. Basically, you'd design the site in Fireworks (think Photoshop but instead of editing photos, you edited shapes and buttons and such). When you had the design looking all purty, you began thinking, "Okay, I want text to go here, here and here. So, let's cut these images here and here and then code a table to make the images "glue" back together and put the text where I want it."

What made this work was the fact that you could flip from the visual look of a site (WYSIWYG editing) back into the code, make a change and then flip back to the visual to make sure it still looked right. You see, most designers are visual people. That's kind of why they're into design.

As the web graduated and headed off for college and then the big bad corporate world, it matured. Both those who coded and those who designed wanted the language of the web to be more semantic, to make more structural sense.

Back in the day, the code to make a word bold, was < b >. When you wanted to turn off bold, it was . Pretty simple and semantic, but it could be better. You really wanted a strong emphasis on that word or phrase and that's why you made it bold. So today, the code is < strong > instead. Italicized text's code is < em > for "emphasis." But looking at the code: < td colspan="5" > is not really very semantic. What does that mean, really? The web began using something called CSS to structure pages, a way of styling different elements in a semantic way.

The first time I ran across CSS, I was webmaster to four university sub-sites, plus my own webspaces. I discovered it in Dreamweaver's interface - I could suddenly style text! I could declare a style .times14 and then every time I wanted to use that typeface and size, I could just click a button and Dreamweaver would make it happen. Wonderful!

The truth of the matter was that I had grown far too reliant on Dreamweaver and I wasn't keeping up with my handwritten coding as much. This was the smallest portion of what CSS could do even then.

Today, many sites (particularly most blogs) take full advantage of CSS, although the "quirks" of how it displays from browser to browser still cause as many headaches as the "quirks" of how tables once displayed still making coding a site a challenge. Now, you can create a "div" to contain a section of the site. For example, a div might be called "content" and you put all the styling you want for your content into that div (and its specific components). In other words, maybe the main column of your blog is your content div. You (or the person who wrote your theme) coded that div to tell the browser, "Hey, we want this to be 400 pixels wide and to appear about 10 pixels to the right of the left sidebar. Also, the background of that content area should be this particular nifty image (that is contrasting enough that the text can still be read easily.) In addition, every paragraph should be in the font Arial (or, failing that, Helvetica or some other sans-serif font). Also, the title of a blog post should be about 18 pixels high and dark blue and italicized."

In other words, using CSS meant you could place sections of your site, set backgrounds and even code the look of the font just one time instead of for every paragraph.

When I first started really utilizing CSS, I learned it the same way I did HTML: I looked at websites who used it and figured out the code that way. I began coding my websites by hand again, partly because I enjoy knowing I can do that (I am, after all, a major geek), partly because coding for the web was suddenly semantic and easy again, and partly because Dreamweaver's support for CSS seriously sucked. The "design view" portion of the program just didn't display CSS very well.

Now, I've been using Dreamweaver since oh, version 2, I think. I loved it for years. It beat the socks off Microsloth's FrontPage and Adobe's GoLive left me cold at first.

Today?

Well, Adobe purchased Macromedia back in 2005 and I wondered if it would be GoLive or Dreamweaver that would "win" the merge. I was rooting for Dreamweaver ... and then I used GoLive. It actually rendered CSS in the design view! I had never managed to get Dreamweaver to do that (except for some textual stuff - but never the placement of a sidebar, content, sidebar kinda thing). I wasn't an instant convert as I had far too many sites being maintained in DW and I didn't want to migrate everything, but I was definitely thinking of starting new sites in GoLive instead.

Dreamweaver, it seemed to me, had grown old and stale and was no longer really conversant with what designers wanted. Its original big draw was the ability to visually design something ... and have it write the code ... and then have the ability to go in and "correct" or simplify that code. (And then go back into design view to verify that you had not, in fact, screwed something up with your simplified code.)

So when I began working somewhere that used GoLive instead of Dreamweaver, I was not really concerned about it.

Unfortunately, GoLive is no longer being produced - Adobe has thrown itself fully into Dreamweaver. Even more unfortunate, they've left the best things about GoLive behind instead of integrating them into Dreamweaver.

Just one quick example before I head out to work:

The place I work now owns about a bazillion websites. All of the designers work on all of the sites at some point or another. Hence, we have a Websites directory from which we work on Brand A site, The Music Site, Brand B site, Our Main site, etc ad nauseum. This makes sense to me. We use a versioning software to keep conflicts between designers to a minimum and, in fact, merges our changes (in other words, I might be working on page x in Brand A for a project ... and another designer may be working on a project which also means he has to edit page x). We do not include our images folder on our hard drive or in our versioning software. Those are stored on an images server, and it serves out those images to all of the sites.

GoLive understands that our images are out on another server. And when we flip to design view, it knows where to get those images and display them for us so we can make sure the code we just changed still displays everything correctly.

Dreamweaver doesn't get it. It cries. It cries piteously and repeatedly, "HEY! HEY! HEY! You put the images folder outside of the main folder! HEY!!!!11!"

In addition, GoLive understands that when we pick harddrive/documents/websites/OURCOMPANY/brandA/ as the root directory for the Brand A site, that it's the ROOT directory. In other words, when a page is coded to refer to an image or a stylesheet (that's what a CSS file is called), it knows that it should look on the website at the top directory for it. Likewise, when it's looking on my hard drive to show me how a page will look, it will use the root directory I set as the "top" directory - instead of using harddrive/ as the top directory. (Basically your computer's hard drive is the top directory for your computer. When you code a site, you often code it to refer to the top directory of the website - so any design program you use needs to be able to say, Oh, you mean the top directory of the website, not the top directory of your computer.)

Dreamweaver doesn't get it. It won't find your stylesheets if you coded them: /stylesheet.css. Instead, it looks for your stylesheet in the top directory of your computer.

This means that NONE of the styling in the sheet will work in Design View.

Which makes the visual editor pretty much useless.

And the Dreamweaver team seems to think this is actually a selling point - you can see your page uninhibited by all that pesky design.

And if you absolutely insist on viewing it with the stylesheet, well, you can manually add it. Manually. Add. To. Each. Page.

And, if you're unlucky enough to be working on a huge e-comm site wherein different pages use multiple stylesheets? Add each stylesheet manually. Separately. You can't even multi-select from the dialog box!

So now we seem a bit stuck at work. GoLive is old enough now that it is pretty common for it to crash. Dreamweaver totally screws up our workflow and doesn't understand much of what we need it to understand. Do we limp along with crashes for now and hope Dreamweaver gets it eventually? Do we bite the bullet and make the switch now? Do we completely change the way we code AND the way IT has all of our sites set up?

I don't know.

But I no longer think that Dreamweaver is the best WYSIWYG web program. In fact, I'm thinking right now, that it's more than a little over-rated.

Too bad our sites are too complex to just code by hand all the time.

Maybe now is a good time for us to simplify ... of course, that would mean a total redesign of every site ....

Posted by Red Monkey at 5:38 AM | Comments (1) | Blog | Design | Stumble

February 17, 2009

Illustrated MP3 Player - continuing

Working on this particular MP3 player skin has mostly been an exercise in design choices. I have the programming pieces in another file and have simply been taking my time to try to think through how this will display as both an illustration and a functioning MP3 player.

The original idea had the controls for forward and back located in the headlights of a car and the volume slider on the fender. It very closely matched the client's first CD cover, with the exception that the car was coming toward the viewer instead of away. Sherry K, however, adores her motorcycle and wanted a cycle instead of a car. Now, I can draw people in the "this is a distinct person" kind of way, but I can't seem to caricature someone I know (even from a plethora of reference pix). Perhaps I'm too hard on my own attempts, but they just never seem to work to me. At any rate, I used the dog who is the major feature of her logo on the motorcycle instead of attempting to draw Sherry K herself. (I think she's more comfortable with that anyway.)

Of course, changing from a car to a motorcycle completely changed the metaphor for a functioning MP3 player as well! Cycles have just the single headlight, afterall, and the front fender does not lend itself to a volume slider. After playing with several angles, I settled on this slightly angled view where both turn signals could be seen.

I took my time with the volume slider, trying to put it on the exhaust pipe ... and well, it just made the composition too busy, so I finally dropped the idea of making all the controls integrated into the vehicle and placed the slider down at the bottom and put the play control on a sign as well.

My next concern was working in a reference to her tagline with the lime and salt. I have it in here temporarily, but now I'm thinking that I may just enlarge the player as once again, it's getting a bit too crowded. I had originally thought that her CD covers would make up some little signs around the larger billboard - and if you've ever driven through a small town, you know those little signs do become busy and crowded, vying for space and attention as you shoot down the road at 70 mph. But, I like the idea of the saltshaker extending from the small billboard ... which means that the foreground with the slider down below now, is becoming more crowded more quickly than I had anticipated. Besides, I want that "Listen to Sherry K" sign to look more like an actual advertisement rather than a bunch of junk stuck in that spot. A little more height and perhaps a tad more width to the right of the billboard and I should have enough room to expand that area with her additional CDs as she puts them out - as well as have a little more room to make that smaller billboard look more like a real 50s billboard.

It's coming along. Not as quickly as I'd like, but I think it will really be worth the extra time when it's complete.

Posted by Red Monkey at 4:59 AM | Comments (0) | Design | Stumble

February 8, 2009

Illustrated MP3 Player

Last time, I posted the rough sketch of the MP3 player for a client. After talking with the client, she indicated the car was cool, but she preferred motorcycles. I'm still in the process of adapting the various buttons to work on a motorcycle, but here's the current update:

Hopefully I'll have this completed and working by the end of next weekend.

Posted by Red Monkey at 6:22 PM | Comments (2) | Design | Sketches | Stumble