Visual UI Design – Day 4: Chat Window
(Realizing that one deliverable a day is a tad ambitious, especially if I intend to move onto more complex interfaces. I’m gonna allow myself more than a single day to work on a deliverable if needed — but still have to end up with 30 to show.)
I ran out of exercises from Flyosity, so no more training wheels. Time to dissect free PSDs.
There’s no shortage of resources to download high quality PSDs:
Galleries: 365psd | Design Kindle | Design Moo | Premium Pixels | Icon Deposit | Free UI Kits
People: Sebastien Gabriel | Jeremy Sallee | Blaz Robar
And of course, Dribbble.
I chose to replicate the following Chat Window from 365psd. (source)

Process
Here’s my method of dissecting and learning from a free PSD:
1) Visualize the core, underlying structural components that make up the overall design
Is that container actually composed of two rectangles? Which shape sits on which? In this case, it looked like a white rounded rectangle made up the base. Then the left sidebar over it, then the top menu bar.
2) Hide all layers except for the main components – check if guess is correct and begin replicating
This is straightforward, as main components are usually just layers of differently sized rectangles.
3) If something appears to have a Layer Effect or is more than just a solid shape, try guessing which layer effects are used, and the approximate settings for each
After going through just the three Flyosity tutorials for Days 1-3, I’m finding that it’s surprisingly not hard to accurately tell when a 90 degree 1px white drop shadow + 90 degree black 1 px inner shadow with ~60% opacity is being used. I used to just toggle the settings until the design looked about right, or obediently filled in the same settings when following tutorials, so I never really understood how they worked. But it’s quite easy once you do take the time to find out. Will explain in a future post.
4) Apply the assumed effect settings, look at the actual settings, then apply those manually
At this point, I’m usually still off by a setting or two, so the element will obviously not look right. I’ll check the PSD to see how the creator did it, then manually apply the settings to my version. It’s tempting to just use the Copy Layer Style option, but actually adjusting the changes helps reinforce the learning even if you’re entering in exactly what’s in the original PSD.
5) Notice discrepancies, however small
Sometimes, even when I think I recreated an element exactly, it’ll look a bit off. My version will have blurrier edges or an extra pixel line of pixel. Usually this happens with shapes (or anything other than Layer Effects), as you can’t actually see from the PSD how the creator created the shape. I’ll either search online for a reason or double check settings until I figure out what’s going on. This is making me understand the term ‘pixel perfection’.
6) Keep layers organized and appropriately named
Good ‘free PSD creators’ usually have their layers named and neatly grouped, but a few layers slip through. Ensuring that layers are organized while going through saves a lot of time later on.
Right-clicking the layer visibility (eye) icon also allows you to color code layers, which is a useful way to further organize or instantly make certain layers distinct. This is the first time I’ve used layer colors – I used red to mark major sections (the messages, contact list) and yellow to mark smaller elements (buttons). Will be thinking of other ways to make use of the colors.

The Result
I took a few liberties with the content (selecting the contacts displayed from people I follow on Twitter), and I didn’t replicate the mini top bar icons as I’m not concerning myself with specific shape creation yet. I’ll also admit I wasn’t entirely pixel perfect on the top left window buttons, so they don’t have the same healthy glow.

Takeaway Tips
- Clipping Mask - Hold Option/Alt and click between two layers
I can’t believe I’ve never made use of this. A non-destructive way of bounding a layer to the shape of another.Article: Elated – Creating and Using Photoshop’s Clipping Masks
For example, instead of drawing a rounded rectangle top bar that exactly fitted the width of the chat window, then converting the bottom corners to straight edges, I could quickly draw a bar without carrying about its width, then have use a clipping mask to have it fit the shape of the window layer:
- Smart Objects – A photoshop document within a layer; change all objects with one layer
Another highly useful feature I can’t believe I never tried. Any time you need to duplicate an element and use it multiple times in one document, use Smart Objects. It allows you to make changes to just one element and have the duplicates be automatically updated. - Sharp vs. Crisp Anti-Aliasing (Text)
I couldn’t figure out why my text looked blurrier than the original. Then I noticed my anti-aliasing setting was set to Sharp, whereas the original had it at Crisp. I still don’t entirely know the nuances of the different anti-aliasing methods, but this helped for now:Article: Smashing Magazine – The Ails of Typographic Anti-Aliasing







