Monday, February 16, 2009

twhurple

Hand-Made Mac Tip No. 10
Roll Your Own Color Scheme for twhirl

I love purple. It's my favorite color. It makes me happy. It makes me so happy that when an application allows color customization of some sort, I usually tweak it to some type of purple if I can.

I also love twhirl.

Twhirl has a color scheme called "Purple Rain" but it's just not quite purple enough for me. It's a little more on the pink side, but I really like the way it differentiates different types of messages using different hues. It's a nice feature in the UI that really helps me digest information quickly. I just love UI design and I can tell the twhirl development team has put a lot of work into this application.

I remembered reading somewhere in some support comments that you could change the color codes inside the xml files manually. I didn't know exactly what that meant so I went snooping around inside of the package contents for the application to see what was in there. This was a fun experiment and learning process for me.

I located the color schemes folder and then found the .xml files. I don't even know what xml is really but I'm always curious about code so I opened one of the files up to see if any of it would make sense to me. I always tell people I'm not a programmer type and I could not code my way out of a paper bag but one thing I do recognize is a little bit of html color code. So, I set out to start changing things and low and behold, I developed my very own purply goodiness color scheme for twhirl!

At first, I didn't know what colors corresponded to which design element of the UI, so I made a new xml file, named it "rainbowtest" and proceeded to change the color in each line of code to a different color — as many different colors as I could so that I could see what belonged where.

Here is what that looked like. Remeber, this is not an acid trip, it's just a test!

TwhirlRainbowJustForFun
Uploaded with plasq's Skitch!

Now that I could see what part was which color, I could begin to understand how the layout was constructed and how the colors worked together.

Next, I set out to start picking out a color palette that might work together. This was not as easy as I thought it would be. To begin the idea generation, I used this really great web tool called Color Scheme Designer. This is just an example of how I began thinking about how colors relate to each other.

usingColorSchemeDesigner
Uploaded with plasq's Skitch!

Here is a screen shot of my artboard in Adobe Illustrator. It took many trials to pick just the right colors to make sure messages and function buttons were readable. Several times I had to quit and restart twhirl so it could recognize the new xml file I copied into the twhirl/Contents/Resources/colorschemes folder.

I was having a hard time trying to decide two of the text colors. They needed to stand out and be very legible so my eyes wouldn't have to strain reading the small text. 16 point type is the maxium. It turns out, the colors in the twhirl logo seemed to work out nicely so I used an approximation of them based on a screen shot of the logo. I used the eye dropper tool in Adobe Illustrator to get an approximation and then further tweaked the colors to make them more readable against the color backgrounds I chose.

I am pleased with the final result and now have a twhirl color scheme that coordinates with my nice clean, empty (almost always because I'm a freak-job like that) purple desktop.

development for twhurple
Uploaded with plasq's Skitch!

Here is the final result without notation and development artboard.



















Here is part of the code that will give you the purple color scheme I created. Just replace the colors with these if you would like the same purple scheme I'm using. Blogger won't let me copy and paste the code for some reason. I shall call it "twhurple" and if you're brave enough to tweak and know what you're doing, I hope you might enjoy it as much as I do. Just don't blame me or twhirl if you break it, ok?

4D2E60
FFFFFF
644874
9D8BA7
CBFF82
FFFFFF
DCCDD5
C7D8D9
CFC8E9
000000
5E1AA0
57878A
57878A
FFFFFF
CBFF82
5E1AA0

If you've found this tweak useful and were able to successfully implement it, I would love to see a screen shot of your desktop if you wouldn't mind. Loic and #teamseesmic are also looking for screen shots of desktops featuring twhirl in action. It would be really fun to see if this could work out for someone else and how many other purple fanatics there are out there!

Have fun and follow me on twitter, seesmic or FriendFeed — all three of these services are available in one place using twhirl! Isn't that great?

Saturday, February 14, 2009

Love Is...


My hand-made Valentine to you!
Melissa

My Favorite Characters

Hand-Made Mac Tip No. 9
Not the same as Love Potion No. 9, but almost as much fun!

You thought I was going to write about Winnie the Pooh and Mickey Mouse? No, not those kinds of characters! These kinds of characters:
 ✭♡♥❦☮✍✌✓♫♪♺⌘⇧⌫⏏

Depending on which browser you're using to view this blog, you may not be able to properly view some or maybe even all of these characters. Assuming you're on a Mac and using the latest versions of Safari or Firefox, it shouldn't be an issue.

I thought with Valentine's Day here, you might enjoy a nice tip for getting to those cute little hearts and other fancy symbols quickly.

First you'll need to configure your International System Preference Pane and then you'll need to configure the Character Palette to show just your favorite or most-used characters. Once this is done, you'll be just 2 clicks away from accessing the characters you use on a regular basis.

I find this helpful for when I'm trying to communicate a set of instructions in which I can use the shortcut key symbols.

It's also fun to say things like:
I You. Let's book the next ✈ to New York and go hear some great ♬♪♫

Did you ✔ to see if the tickets are on sale?

Would you like for me to ☏ you at a
special ⌚ ?

Did you remember to your paper?


Step 1. Configure your International Preference Pane available by selecting the System Preferences from the Apple Menu in the upper left hand corner of your screen.

InternationalPrefPane
Uploaded with plasq's Skitch!


Step 2. You will see a little flag icon in your Menu Bar. Click on it once to reveal a drop-down menu from which you can select Show Character Palette.














Step 3.
Configure your Character Palette by selecting your Favorite characters. Look closely at this screen shot (click to enlarge) and pay attention to each of the areas where you'll need to click. Make your Character Palette look like this. Select a character you want to favorite by clicking on it once to highlight it. Next, click on the cog wheel at the bottom and choose 'Add to Favorites' from the drop-down menu.

Repeat this step of selecting a character and then 'Add to Favorites' for each of the characters you'll use on a regular basis. When you're finished selecting characters, move on to the next step. (Don't worry, you can always keep adding more favorites.)

CharacterPalette
Uploaded with plasq's Skitch!

Step 4. View your Favorites and now the Character Palette will always show just this section of Favorite characters by default each time. Whenever you need a character, just click once on the flag icon and then once to select 'Show Character Palette.' (two clicks! no waiting for a website to load them!)

CharacterFavorites
Uploaded with plasq's Skitch!

I hope you find this tip useful!

It's twhirl for This Girl

Hand-Made Mac Tip No. 8
Take twhirl for a whirl and manage your social networking in one place.

I love using an application called twhirl for keeping in touch with my friends on twitter, in seesmic and on FriendFeed. Whatever I tweet as a status update (different than replying to someone) also gets fed directly into my FaceBook as my status there.

I pretty much always have twhirl running and I use Leopard's Spaces to make viewing all of the information manageable. Space 2 is designated for twirl and I give it a full desktop area with the largest font so my eyes don't strain to read the information. I have assigned a key command to Space 2: command-right arrow so I can quickly press that combination and swipe the whole thing out of my way quickly when I'm just checking in. Spaces is awesome once you get used to it and train yourself to use it in your work flow.

Here are some screen shots of my Spaces Preferences along with a view of my desktop on Space 2 featuring twhirl. (I've blocked out a few of the private messages in order to respect communication preferences.) Click on the images for a larger view.

SpacesPrefs
Uploaded with plasq's Skitch!

my twhirl setup
Uploaded with plasq's Skitch!

Sometimes I also use the Orange-Gray color scheme. It just depends on my mood.

MyOrangeGrayTheme
Uploaded with plasq's Skitch!

Here is another screen shot so you can see the text better. The color scheme is 'Purple Rain.' For my twitter and FriendFeed panels, I'm using the font Myriad Pro, 16 points. For my seesmic panel, I'm using the font Myriad Pro Condensed, 14 points. I've tweaked the settings to make it the most comfortable for my eyes. This font is the smoothest to me. I wish the color were more purple than pink, but overall it's the most pleasing color set to my eyes.

I decided to position the seesmic panel in the center since it feels the most intimate there for interacting with video recording. When the video recording screen pops up, the proximity is closest to the webcam where I can establish better eye contact.

I've positioned the twitter panel closest to the clock area of my desktop on the far right side. I also keep my twhirl Dock icon positioned in the lower right corner of the screen so my muscle memory is accustomed to clicking there for updating – both reading and writing. The text entry box is also at the bottom since my cursor always lands there.

Space4_Pink
Uploaded with plasq's Skitch!

Overall, this is my favorite app for viewing these kinds of messages. There are still some things I would love to be able to tweak like customizable color schemes and the ability to make different accounts a different color scheme. You can select from many different pre-existing schemes, but so far you can not change the colors within those schemes. I like the 'Purple Rain' and 'Orange Gray' color schemes the best. I like that there are subtle hues for different kinds of messages and different input areas. The color feedback is very important to me.

You can download twhirl for free and it works on Macs and PCs.
http://www.twhirl.org/

Sign up for a free seesmic account and, if you have a webcam and mic, you can record video messages all from the same application.
http://seesmic.com/

If you want to help improve this application, the development team is extremely responsive to suggestions using http://feedback.twhirl.org/

I hope you've enjoyed this little review and find it useful!

Saturday, February 7, 2009

Fun With iGlasses

Hand-Made Mac Tip No. 7
Give your webcam a different point of view!

I've been having some fun with a piece of software called iGlasses and a piece of hardware called a Huckleberry. Here is an example of a response in a video conversation using seesmic. If you watch Freida's post, (embedded below mine so you can see the post to which I was replying) she demonstrates many of the settings available in iGlasses for use with your webcam. (Alternatively, you can click on the arrow icon inside the video or view the other videos in the conversation underneath the video to see more of the dialog we had in seesmic.)

(Sorry if my audio is a little blown out in some spots. Adjusting your volume before playback might be a good idea.)



Thanks for supporting my site!

icon