Prone To Ponder - Home

The Perfect Screenshot

2009-10-29T00:13:00Z

Since the introduction of the reflected screenshot by Apple, they’ve shown up on many a homepage from web design firms to software developer sites, portfolios and more.

Creating a screenshot to feature on your site isn’t difficult, but it does take a certain amount of patience and attention to detail to achieve an impressive result.

The following video tutorial is a Photoshop CS4 walkthrough of how to create the infamous screenshot with reflection, but with a unique twist.

Photoshop CS4 Tutorial: Screenshot with Reflection and Shadowy Floor Effect from Elizabeth A. on Vimeo.

If you’re interested in grabbing a copy of the PSD file for this tutorial just drop a line in the comment section.

How to Be a Better Client

2009-07-09T21:12:00Z

www.toothpastefordinner.com

Freelance designers know how to be freelancers, and if they don’t there are plenty of quality articles that can tell them how to.

There are the ‘How Much Do I Charge’ articles the ‘How Do I Write A Service Agreement’ articles and of course the ‘But How Much Do I Charge If It’s A Good Friend” articles. What seems to be missing however, are articles that describe what should be expected of the client. Or in other words, the ‘How To Be A Good Client’ article.

The really good freelancers have learned by trial and error the detrimental effects that lousy clients can have on thier business and sanity. Many have even learned to smell a crooked potential client a mile away.

But at times, even the best of us can end up with the short end of the stick, doubting our skills and our worth.

Although this article may not be read by the one’s who need to see it the most, It may be just as helpful to freelancers who don’t yet know what SHOULD be expected of a client or potential client.

Addressing this to someone who is looking to hire a freelancer and assuming that said freelancer is somewhat seasoned, here are a few guidelines of note.

Figure Out What You Want – A designer needs a little more than “I want a modern looking site for my business”. You may not be the most tech savvy dude on the planet, but you should at least have a solid idea of what you do and do not want. A little research goes a long way. Check out some other sites or logos on the web that interest you and refer to them when talking to your freelancer.

Dont’ Be Cheap – If you hire a designer for $25 an hr. your design is going to look like you hired a designer for $25 an hr. Designing is more than just pixel-pushing. It takes a plethora of various refined skills, from understanding of typography to extensive knowledge of various software design platforms, not to mention the industry and market research that your designer engages in before beginning your project. This is your web presence, corporate identity or possibly your attempt at becoming the next Google or Facebook, either way it is being custom made to your specifications. How much is that worth to you?

Sign the Bloody Contract! – Yes, It is standard for a freelancer to send you one. Yes, it is standard for a freelancer to deny you speculative work and require a deposit before they begin working on your project. Remember a service agreement is not a ransom note, the designer most likely does not have an evil master plan to kidnap your project details and mocks until you pay up. it has been designed and put into place in order to protect the interests of all parties involved. If you have concerns about the terms and conditions set forth in the agreement you can negotiate some mutual changes, but first make sure you’ve done the following:

1. Read the contract.
2. Respond to the freelancer and let them know that you will be looking it over and getting back to them shortly.
3. Read the contract.
4. Make note of anything that you might find suspicious or disagreeable.
5. Read the contract.
6. Have your lawyer read the contract (although rarely necessary).
7. Don’t skip to step 4 if you haven’t yet done step 2.
8. Don’t do anything until you READ the contract.

You get the idea.

Send Them What They Need to Work With – Do you have a logo? Did you provide them with a project scope or details? Some examples of what design elements interest you? You don’t need to do the work for them, but letting them know that you hate bright purple or that you like tabbed navigation can save you alot of time (and money) down the road.

Don’t Call Them if You Get the Urge to Change the Header Font at 6am – The designer needs time. Time to do a little research or look over the project scope and details that you provided them. Tiny technical revisions are annoying when they are trying to get thier creative juices flowing and conceptualize the project. Make a list of all the things that you think you might want to change. Bring them all up at the appropriate time. Keep in mind that many freelancers keep strange hours and may end up working on your project while the rest of the world is sleeping. Don’t worry it WILL get done.

The Designer Knows Best A persistent client who doesn’t take the advice they’re paying for is cursed to get what they insist upon. The freelancers first mock is a sea foam green logo with a nice Sans-Serif Tahoma for the site content. Sure, you like the color red and you really really want to use that cool Captain Podd font. But what you may not know is that Captain Podd will look more like Captain Illegible when rendered in any web browser besides your own, and unless you’re sending out an SOS, red might not be the best choice for your healthspa logo. Have you thought about that? No? Well your freelancer did.

It’s Teamwork – Never mind the ‘client’, ‘freelancer’ labels, in the end you’re just collaborators on the same side of the line whose ultimate purpose is to produce great (and hopefully lucrative) work. Work that with a little cooperation might just surpass either one’s expectations.

Case Study Part 1: Logo Design with a Taste of Ginger

2009-01-30T20:18:00Z

Every once in a while, I come across a great design project with just the right balance of technical challenge and creative freedom. The recent restaurant logo design I did for Wild Ginger was one of those projects. The owners of Wild Ginger Japanese Restaurant wanted a unique look, something with traditional Eastern flavor but with a modern edge. They planned to use the design for their restaurant building sign as well as feature it on their menus, take out boxes and the like. I was particularly excited about this project because I had never designed a sign for a building before and the prospect of having one of my creations glowing in neon at the entrance to a restaurant sounded really cool : )

This post is part creative encounter, part design tutorial, as I thought there might be other designers out there stepping into the print world for the first time, that could benefit from a recount of some of my design foibles and triumphs.

Where To Start

The only compulsory design elements that needed to be incorporated into the logo were a ginger plant and the restaurant’s name. Everything else was pretty much up to me. Now I’ve seen a ginger root, but a ginger plant? I decided to start with a little research. Using a few pictures of vibrant green ginger plants that I found around the web, I tried to sketch something that reflected their best angles and qualities. I wanted it to look fresh, clean, but also a little bit wonky and well… wild! My doodles resulted in this:

Not much to look at yet, but my mind was already bubbling with ideas for color and shading. I jumped into Photoshop to setup my workspace. To keep things nice and tidy, I setup my layers panel like this:

Next I created a single image made up of a few different vector shapes that resemble my sketch.

It’s All In The Name

Time to move onto the wordmark. Just to refresh, in logo design there are really three main types of logos.

1. Wordmark – Which consists of the company name in a stylized type that may include small abstract or pictorial elements. Examples include:

2. Abstract Mark- Which uses abstract shapes and symbols to convey an idea or attribute about the organization. Examples include:

3. Emblem- Which features the name of the company typically enveloped by a pictorial element or shape. Examples include:

Regardless of which of the three design types I’m working on, I think it’s the wordmark that is most important. The brand name is what represents the business and it’s also how people will find the establishment and how they will associate their style. Only a handful of companies are privileged enough to go ‘sans wordmark’ so unless your Nike’s next trainer or on the McDonalds dollar menu, the focus and emphasis should be first on Wordmark (typography, kerning and layout) and second on Abstract Mark or Emblem incorporation.

In the case of Wild Ginger, their logo design needed to be a combination of a wordmark (the restaurant name) and an abstract mark (the ginger plant). Since this was going to be on the restaurant building (and thus blown up to Google Maps sized proportion), I didn’t want to go with your average Helvetica or Arial, no, this needed to special and one of a kind.

Typography

I knew the perfect font to start with, a little something I purchased a while back and have rarely if every used commercially. It’s ultra modern and a little playful, yet not too so much so that it’s unreadable or unprofessional. You can download this font for free here!

Now while I adore this particular font in it’s entirety, It just wasn’t custom enough for my client, so I decided to deconstruct it, keeping the letters that I really liked and replacing the ones that I wasn’t so keen on with others. But I saved a copy of the original font for the Wild Ginger text untouched on a hidden layer so that I could refer back and always have a fresh working copy.

Then I retyped the letters that I wanted to keep from that font, with each letter on a separate layer, so that I could manually adjust the kerning (space between the letters).

I had a pretty good idea of the attributes I was looking for in the letters and with a little trial and error I came up with a 5 font combination that really fit. I kept each letter on it’s own layer so that I could change the size, height, baseline etc of the different fonts. Because as you know, not all fonts are created equal :)

Next I messed around with the placement of the wordmark in relation to the abstract mark. At first, I sort of just stuck it in between the two words because I didn’t really like how it looked anywhere else. But something was definitely missing, some sort of punctuation or separation, that’s when I started to get creative with color.

Layout and Background

I was a little stumped for ideas, until I started thinking about the various applications of the logo. “What will it look like on the menus”? I pondered. I decided to play around with this thought to help spur my imagination.

I started with a horizontal separation using blocks of color. I wanted to go with red for sure as an accent and to give it an Asian feel and then another more subdued color for contrast and balance. The charcoal gray worked perfectly with the red gradient.

I thought that the logo needed a tag-line or some sort of phrase to go with it. Well it’s a Japanese Restaurant right? Let’s go with that.

Perfect, that fits, now there’s more of clear cut purpose to this separation idea that I was feeling it needed. And the ginger plant doesn’t look so randomly placed (although it kinda was ; ). Also, the vibrant, rich red color of the background told me exactly what color the ginger needed to be. I got to work on a nice lime to light lime green gradient that sort of mimics the sun illuminating it from above. I also inverted the text color to make it pop against the background. Now this is looking pretty good, time to see what the clients think.

The response was unanimous and positive! They really loved the overall concept, typography choice and colors, just a few minor changes to accommodate the building sign company and the menu company before the logo is finalized.

One thing they requested that I change was the tagline from “Japanese restaurant’ to “Pan-Asian Cuisine”. Now, the only thing left to do was to convert the whole thing to a vector so that it is fully scalable for whatever medium they decide to display it on.

Now Photoshop and vectors aren’t the best of friends, so for the next post I’m going to jump into Adobe Illustrator to do a few quick and basic things to make my logo print ready.

Stay Tuned!

A Home For My Themes

2008-12-30T23:14:00Z

A recent alarming drop in my free HD GB has prompted me to do a thorough search for content whose purpose might be better served elsewhere. My findings (which were equally alarming) included photos from freshman year (not mine), logo designs from before I knew what “vector meant” and a plethora of other particulars I’ll refrain from mentioning here. Of the more interesting things I came across were a few website endeavors that never really made it off the ground, so to speak. So, instead of roasting chestnuts on an open flame, I used my holiday in a more productive manner and created a cozy little place for all of my website templates and themes. Thus, I’m happy to introduce themes.pronetoponder.com!

Each theme package comes stock full of customizable standards complaint coding, semantic CSS and Photoshop designed goodness. Pick one up for yourself or check out what I have available at ThemeForest.

Cheers to New Beginnings and A Very Happy New Year!

Free Download: Wefunction Icon Set

2008-09-17T03:15:00Z

The nice fellas over at Wefunction have rolled out a shiny, sexy new set of 128 completely free icons. All the standards plus a few of those oh so popular social media icons. Check em out, and don’t forget to spread the word.

128 Free Icons | Download Here

Why Non-Professionals Need Professional Stuff

2008-08-30T22:27:00Z

Have you ever noticed that once you get your hands on some professional equipment you yourself magically become better and what you do?

Take photography for example, a truly impressive art form in it’s mastery, seemingly reserved for those who have spent years studying the form, endowed with a superb eye, the perfect lighting setup and crinkle-less canvases.

But if you’ve ever laid down your point and shoot and taken a few shots with an SLR you’d see that taking a pretty incredible looking photo isn’t as mytical as you thought.

Not to discount or devalue the immense talent that professionals and their equipment exhibit. (surely their in a league entirely their own). But in many case I have found that sometimes it’s the non-professionals that need professional equipment the most.

Over the years, I’ve formally studied many instruments, guitar was always the most challenging. I never invested in a decent one because it wasn’t something I was “serious” about learning, just something I wanted to riff on for fun. It wasn’t until I picked up my brother’s custom Paul Reed Smith that I realized “Hey, this is kind of easy, I’m better than I thought”. The perfect balance, low fret noise and weightlessness of the instrument made it feel like it was playing itself. I mean even Satriana might have trouble making the music store fender with free amp combo sing like an angel.

Another perk to investing in professional equipment right off the bat is the elevated potential for discovery. Many of us tend to feel limited by the things we use instead of liberated, but I also think that has a lot to do with what things we choose to have around us.

The age old Mac vs PC debate is another fine example. Naturally, any PC user will duel you to the death to defend their OS and even with all of the evidence against them they would still rather continue using a mediocre machine (yes, I said it) than venture into the realm of the different or unfamiliar.

I know because I was one of them. “But my bootleg windows programs won’t work on a Mac”. That’s because on a Mac, you don’t need half-ass bootleg programs, the legitimate Mac programs work and work really really well.

It’s a matter of our own conceptual and imaginative complacency that keeps us stuck in the same unproductive and self limiting patterns.

Not a professional photographer? Perfect! Go out and buy a $400 SLR. I give you 2 weeks before you’re selling your prints on deviant art and your point and shoot on ebay.

When you’re PC gets a virus (which invariably it will) go out and buy a mac, live with it for the return policy period and then try to think of a single reason why you shouldn’t keep it.

Unfortunately though, the fact is that in many cases, ease of use of a thing is in direct correlation to its price. But chances are you’ll spend less money in the long run and a lot less time learning how to do something if you have the right equipment spurring on your creativity and imagination.

9 times out of 10, you’ll find that the reward far outweighs any preconceived risk about purchasing top-of-line gear. Faced with a new world of possibilities you might just find that you become better and more productive at what you do. And hey you never know, you might even end up a professional.

72photos on Read Write Web

2008-07-04T22:09:00Z

Thanks to Sarah Perez for this thorough and insightful write-up.

Breakdown of Modern Web Design

2008-07-03T23:18:00Z

Thanks to Alan Foreman of poisonedminds.com for this unsettlingly accurate depiction.

72photos featured on Ajaxian

2008-06-20T03:48:00Z

An interview with XMG networks CEO Eric A.

...and in my opinion a far too modest account of the phenomenal photo hosting service that is 72photos.

Web's Modern Bottoms

2008-06-20T02:54:00Z

“Modern web designers have finally decided to utilize thier bottoms”.

And even those that don’t supplement their income with prostitution have begun to do something productive with the bottom of their web pages.

This once fledgling amount of site known as the ‘footer’ usually reserved for credits and disclaimers has finally been acknowledged as the valuable pixel-holding space that it is.

Many modern footers now contain a plethora of supplemental and/or irrelevant information including but not limited to such things as bios, 72photos and flicker streams, subliminal mind control messages, tags and contact forms.

Personally, I am proud that we have finally broken through the self-induced perception that footers are less significant or unimportant in comparison to the rest of the page.

Yet for every innovative idea there are always those who insist upon imparting their own particular slant of silly into the mix. Case in point: Logo Pond.

Naturally, one begins at the top of the webpage, perhaps a quick glance at the nav, then down a bit further eyes darting left to right from ‘Featured Showcase’ across to all the lovely little logos fashioned into square boxes and laid out into rows, scrolling further down making mental notes of your favorites designs, you may even decide to…

“Quaaa? Is that the nav again?” “wait was I scrolling up or dow…MY GOD MAN! “There’s an entire site down here under this entire site?”

Now, In no way do I mean to slander the good name or the good vision of Logo Pond itself. On the contrary I oft find myself in sheer admiration of it’s compiled content.

This is merely a dramatic reenactment of a possible user response evoked by a designer’s complete and utter disregard for web design common sense in favor of unnecessary and repetitious tom-foolery involving the footer.

In the following ordered list, I have attempted to identity, label and categorize (in much the same way we did to each other in high school) the modern footer:

1. The Gobstopper – It never ends, you don’t even remember when it started. The color has changed midway through along with the texture, tone, and flavor. And yes, like the everlasting gobstopper, jaw detachment may occur due to design induced shock.
Example: Logo Pond.

2. The Sims – Imitating proximity to the ground by tiling dirt patterns and grass textures or re-creating little villages of people living at the bottom of the website. It’s strange, its bizarre and I don’t know who started it or why.

http://www.vimeo.com

3. Michael Jackson – Distinct or contrasting color change. When done tastefully, it can add a nice bit of pop drawing attention to specific content. On the other hand don’t scare people with abrupt color changes that don’t correlate in any way to the original color you started with.

http://www.ungarbage.com

4. Reality TV Web – Realistic looking things taken from still life such as notebooks, pens, fruits and flowers. Am I on a webpage on in a salad bowl? One should never have to ask this question.

http://www.catalyststudios.co.uk/

5. Mini Facebook – Contact forms, portfolios, maps, search bars, tag clouds. They’ve got so much personal information packed into this footer that anti-stalking plans are provided with their hosting.

http://www.jasonsantamaria.com/

Any of the aforementioned styles of footer can and have been done in acceptable, useful and creative ways. So by all means put your best ‘foot’er forward, but do not under any circumstance allow me to continue to use these horrendous puns by being reckless with your bottoms.

Efficient Photoshop for the Web

2008-06-12T01:12:00Z

A recent post on the 37signals blog has prompted me to analyze my own approach to the design and development process of web applications. The article over at signal vs noise entitled Why We Skip Photoshop was an interesting (albeit unsurprising) declaration about the 37signals design approach. While I am inclined to agree with them, I do think that there are specific reasons why foregoing Photoshop works well for them but would not for others.

The 37signals company with their self proclaimed Fortune 5,000,000 status calls for a return to simplicity in terms of form, structure and growth and in turn places greater importance on productivity and select functionality.

In exhibiting this Thoreau-esque ideology their products and interfaces maintain an air of stripped down minimalism in terms of design and features, using very few images, design elements and custom graphics. Products over which they also posses supreme control.

While I personally support this ideology, I can’t agree that it is right for everyone, or even most. Strictly speaking in terms of freelance web design, there are far too many occasions in which Photoshop reaches beyond a mere desired tool into the realm of design necessity in order to accomplish and satisfy the project at hand and all parties involved.

Following is an inclusive and unbiased method for effectively using Photoshop for the web.

1 – Set your colors. In order to keep the mocks you create looking as similar in color to the finished site on the internet, make sure that you have chosen the appropriate color settings. Edit > Color Settings > Settings. North America Web Internet.

2 – Create a preset canvas. Creating a custom canvas preset with standard monitor display sizes can also help simulate the web in a more accurate way. You can set different presets for different projects such as Fluid Width (1100px X 1300px), Fixed Width and so on.

3 – Set up and save your workspace. Each designer has thier own unique way of doing things inside Photoshop, when you’ve established a nice workflow that demands the least amount of time and effort as possible, save your workspace. Window > Workspace > Save Workspace. If you have different preferences for different projects you can save them as individual spaces and revert to them at any time.

4 – Don’t get too caught up in the details. Contrary to popular opinion, healthy time restraints and boundaries can actually work to enhance your creativity and keep you focused. So don’t let yourself spend too significant an amount of time creating a mock in photoshop. Set a timer if you need to and use the program as a means to an end and not as the end result itself. Don’t worry about things like choosing the perfect font and spacing characters, they will most likely look very different once it’s in code anyway.

5 – Think Vector. Keep your shapes flexible and sharp by choosing to work with vectors. Not to mention the time you’ll save when asked to change all the purple flowers to pinks ones.

6 – Slice. The slicing tool can be instrumental in creating unique and distinct icons, buttons and other graphics for the web. To utilize images for the web most efficiently, you need to ask yourself a few questions before you start slicing away.
a. Does this need to be an image or can this be done purely using CSS?
b. JPEGs look alot sharper, but require longer load times. Does this image need to be a jpeg or will a gif work just as well?

A few observations of note:

Non-technical clients love mocks. From my experience most clients don’t understand web lingo and aren’t adept enough to visualize a concept that’s not yet fully realized. They want to see what things will look like before they happen and they don’t really care to see the happenings in between. They’ll have a much easier time visualizing your proposal and understanding a walk through of an illustrated mock then they would looking at a rough image-less HTML/CSS page that doesn’t appeal to them aesthetically.

Some things are just easier to change in a static layout. In some web mediums such as blogging engines, minor design details aren’t so minor when they have to be changed in code. An alteration to a custom layout that’s already integrated into Mephisto is no walk in the park if your client suddenly changes his mind about the tabbed navigation.

Whether or not you choose to use Photoshop as part of your design process is a personal preference. However, there are many designers who do use it for the sheer sake of landing the job or satisfying the particular temperament of the client. The need for this tool is dependent on a great many factors and it’s important to asses each project before jumping directly into Photoshop. It’s certainly not necessary in all situations and if you do have the luxury of foregoing it altogether then by all means do. For the rest of us, efficiency and efficacy in using Photoshop is enough to increase productivity and get the job done.

Cricket: Dancing Girls and Movie Stars

2008-05-23T19:24:00Z

Call me closed minded! Label me as avert to change and progress! But when it comes to what I have long considered the only gentleman’s sport left, I feel deeply uneasy and uncomfortable with the whole shenanigans that is 20/20 cricket.

For those that aren’t familiar with “good sports”. Eh-hem, cricket, ‘used to be’ a glorious game lasting at times well over a week drawn far beyond the length of any sane person’s attention span and demanding the rare and painstaking ability to calculate large odds and scores in one’s head and on occasion experiencing the sufferance of listening to the ominous voice of the awkwardly white Tony Cozier. Ah, the innumerable joys…

But what appalling atrocity is this that has conspired before us in the form of the IPL?! The Indian Premier Cricket League has diminished this conservatively paced game into an event that is intensely exciting and fast-paced, done away with tea time in favor of beer time and even allows players the liberty of removing their sweater vests! The lovely (albeit rhythmically challenged) ‘cheerleaders’ on the ‘sidelines’ gyrating to djs spinning club-trance-chutney remixes through speakers endowed with enough wattage to satisfy Madison Square Garden injects far to much fun into the atmosphere.

As a strapping young 24 year old myself, I find it all utterly intolerable and…. Turn down the music! I’m not done talking!!!

What’s this ‘cricket’ you speak of?
I don’t care what you think, what do real people think?

Pro·jec·tion

2008-05-19T22:25:00Z

"I can hardly tolerate such blogs whose content, brimming with non sequitur, nonsensical phrases, masquerade as authoritative observationalism". -Elle

fn1. pro·jec·tion [pruh-jek-shuhn]
noun
a defense mechanism in which one attributes one's own unacceptable or unwanted thoughts or/and emotions to others.