Mrch Is Shrtct Mnth: Learning Web Design Shortcuts
Like Mindy before me, I pledged I would speed up my workflow this year using keyboard shortcuts. Web design is an interface-intensive profession: we use 3+ programs at once and navigate between dozens of folders on an average project. When designing a comp, I use over 50 distinct commands in Photoshop alone (not counting the web browsing, email, and Illustrator commands). This is is a huge amount of time spent moving the mouse, which could be easily reduced by a couple shortcuts.
The trouble with shortcuts? There's just too many of them. It's hard to find a place to start tackling a list of key commands, and once you begin learning, it's harder still to commit those shortcuts to memory.
One Day At A Time
But together we shall overcome: Download the printable Viget shortcut calendar for March, and learn (really, truly learn) a new shortcut every day. Programs covered: Photoshop, OS X/Windows, Illustrator, Textmate, CSSedit, and the shell.
Every day, try to learn at least one shortcut from the day's list using the exercises shown. If you already know a day's shortcut when it comes up, don't just skip that day! Think about a common task that you use the mouse for, find the shortcut for it using Google, and complete the same exercises with it.
Daily Exercises
The following exercises are really good ways to get commands committed to memory:
- Do the shortcut 20 times in a row. Seriously, just do it 20 times really fast.
- Mix it in with two other tasks. For example, select-[shortcut]-move an object. Do this five times.
- Start using it regularly. If you forget and complete the task normally, undo and use the shortcut.
Download the printable calendar (PDF)
Continue reading "Mrch Is Shrtct Mnth: Learning Web Design Shortcuts"
Corporate Advertising Meets Kinetic Type and The Walrus
As pieces of osbservation and inspiration, I'd like to point to a couple of recent examples where I've seen underlying design trends hitting mainstream corporate television advertising.
First, if you're not yet familiar with kinetic type, it's a newish term for something that's been around for a while (animated typography). It pays special attention to syncing directly with dialogue and typographically reflecting the emotion of the script or lyrics. I really enjoy some of the videos popping up over the past couple of years. Here are two:
Continue reading "Corporate Advertising Meets Kinetic Type and The Walrus"
6 Things To Know About Video For The Web - Part 2
Have you already read Part 1 of this two-part series? If not, check it out, then read the last 4 tips below.
3. Always deinterlace
If you've bought a TV recently, you may have heard the terms 1080i or 480p. These numbers aren't there to make the cable girl look like she knows what she's doing -- these numbers actually mean something. The numbers (1080, 480, etc.) are the dimensions of the picture you are watching. If you are looking at a 1080i picture, then the screen size or aspect ratio is 1920 pixels wide by 1080 high (1920x1080).
The letter "i" stands for interlaced, which is the format all video on TV is broadcast. Interlacing is simply the interlacing of two frames together. You begin with frame 1. Your TV only fills in the rows for every other row (1, 3, 5, etc.) with frame 1's video. In the even lines (2, 4, 6, etc), the TV uses the lines of video from frame 2. The reason for interlacing goes back to the early days of TV. Before the LED monitors, all video was displayed on CRT (Cathode Ray Tube) monitors. The way these CRT's work is they shoot a beam across the top of the screen. The opposite side reflects it back and the beam zig-zags all the way down the screen until you have your picture. Once its done with one frame, it starts at the top and does it all over again for the next frame. If you are looking at 1080 screen, you would have 1080 lines stacked on top of each other. Well, in the old days, this caused a problem. By the time the beam was at the bottom of the screen, the lines at the very top were starting to fade, so when the beam started again at the top, the line was refreshed with a new bright beam. When this is done at a high rate, the picture would flicker. The reason this works is that it now takes half the time complete one cycle through a frame, which is quick enough so the first line does not fade, thereby removing the annoying flickering. So why is this a problem now?
HD televisions and LED monitors are what are called progressive scan display. The technology of these has advanced to the point where there is a danger of that fading that happens on CRT monitors. Progressive scan displays do not interlace the frames of video but simply display the entire frame concurrently. This becomes a problem when interlaced video is displayed on a progressive display. You can see from the image below that when an interlaced video is viewed in a progressive display that the 2 frames are actually visible. This is especially true with high motion frames like the one below.
That long explanation leads into the most important thing to look out for when encoding video for the web: since the vast majority of video is interlaced, you ALWAYS need to deinterlace your video when encoding or you will get what you see above. All major video encoders have this ability but they won't do it by default.
Continue reading "6 Things To Know About Video For The Web - Part 2"
6 Things To Know About Video For The Web - Part 1
Video on the web is showing up in more and more places all the time. It's also easier to capture and with mobile decices, web cams and hand held cams. What we can see from this is that it's something that is here to stay. For those of us responsible for putting it up on the web (and even those who aren't!), there is a lot we need to know about what goes into creating and distributing video.
This post is meant to be a broad look at how far video has come and where it is today. it provides some helpful tips about distributing video on the web.
Since blog posts that have numbers in their titles get more attention, I broke up video into six sections.
Continue reading "6 Things To Know About Video For The Web - Part 1"
Pimp Your Twitter Background
I've been addicted to Twitter for quite a while now, but my background has always been nothing more than a repeat pattern I found somewhere online. It was pretty, but it didn't say much about me - and Twitter doesn't offer much to help you introduce yourself. So as more and more people come to know me through Twitter without having met me in person, I felt like it was time to give my background image some attention.
I had a few goals. I wanted my background to be simple, and I wanted it to tell people where else they could find me. I'm not a marketer trying to get 1,000 followers so I can spam them with crap and get more site traffic... I just want the small group I do have to be able to follow me elsewhere. Twitter isn't meant to replace social networks, so I had some hesitations about hacking the system to put some personal links (like my portfolio, LinkedIn account, and the Inspire blog) in the background image. For one thing, they'll never be clickable and that feels weird. But more importantly, I felt like I might be breaking some Twitter etiquette by going all Guy Kawaski Twool-ish with it.
What Is Your Brand Personality?
Have you ever thought about your personal brand? What I'm asking is, how do you present yourself? How is your personality projected? How would someone describe you? Are you more like John McCain or Barack Obama? Their brand personalities were extended into their presidential campaigns all the way down to their signage and choices of typeface. Or, how about Angelina Jolie or Jennifer Garner? Both have played action characters in television and the movies but are different people in real life. Maybe you are not quite as high profile or as flashy as those folks. I know I’m not. Have you ever thought about the brand personality of the client or project you are working on? Believe it or not, companies and products can have personality too.
Consider what you know about the coffee that Starbucks serves as opposed to Dunkin' Donuts. Both make great coffee, but they are known quite differently for their roasted beans. You might prefer the different flavors that DD offers with your glazed donut but would you spend several hours of your day seated at their tables with your laptop? While Dunkin Donuts is known for their sinful delights in addition to their coffee, they don’t offer much back story in terms of where they get their beans. Starbucks, on the other hand, is all about the café experience, the origin of their beans and the process from which they produce a line of hot beverages. Just saying their names can evoke completely different responses. That is at least one example of a difference in brand personality. Think about how Coca-Cola is different from Pepsi and how Burger King is different from McDonald's.
2009