Recently in Graphics Category

Some Custom Tech Tags

| | Comments (0)

I am one of the many users who felt the need to create yet more TLT Tech Tags

Unicode

This version is the syllable /yu/ in Sanskrit. Dave also made one that was a therefore operator (⊃) symbol which resembles a sideways U.

Unicode240px.png

 

Accessibility

The & symbol in Braille.

Accessibility240px.png

Pixel Stick, my new BFF

| | Comments (0)

One of the niftier freeware Mac apps I've downloaded is "Pixel Stick" which as the Web site describes

PixelStick is a tool for measuring distances and angles on the screen. Excellent for designers or anyone who wants to measure a distance on their screen in any window or application.

In other words you can estimate image or window sizes without opening another application. Even though I'm hardly a graphics specialist, I have found this tool incredibly handy in the past six months.

Today, I'm designing a handout in Illustrator which uses some PNG screencaptures. I need to shrink them down, but Illustrator does not shrink PNGs very prettily, so I will probably have to do the shrinking in Photoshop. But with Pixel Stick, I can give a target estimate of sizes in Photoshop.

Another time, I had to capture a representation of a Mac cursor, and that is very difficult with the default screen capture option. Fortunately I was establish a size parameter with Pixel Stick. It's also good for estimating smaller window widths on a larger monitor.

But actually, my first use had to do with the Blogs at Penn State templates. As some of you have noticed, the widths of the different areas of a blog page are fixed and photos which are too wide get cut off. How wide is too wide? I didn't want to dig around the CSS, but with Pixel Stick, I was able to get some reasonable estimates and include them in the documentation. Definitely much easier.

I downloaded this on a lark and wasn't sure if I would actually use it - surprise.

My PDF Digital Signature

| | Comments (0)

Thanks to PDF and online forms, I think we've managed to streamline electronic forms, with only one minor gap - the actual signature.

Recently, I was asked to to "complete and return" a PDF agreement form which usually includes your signature. Interestingly I was given no fax number or other instruction (e.g. "mail"), so I was a little perplexed. If it were Penn State, I would print, sign and send it via Interoffice Mail.

But if speed is of the essence, you may need a different strategy. In this case, I opened the PDF file in a graphics program, then used my home graphics tablet to sign and date the document. Unlike paper signatures, I was given the chance to resize my signature art and redraw unclear numbers in the date.

FYI - This isn't the first time I've done this. Opening PDFs in graphics programs is very helpful for letting you fill in standardized information for new prescription order forms for your doctor so they can fax them in for you.

Not only can you avoid filling out the same information over and over, but the resulting type is much more legible than my actual handwriting.

Web Background Color Glitches for Penn State Logo

| | Comments (0)

My colleague Dave Stong posted an informative entry on the problems of adjusting the colors of images vs. what the browser displays.

Unfortunately, I know EXACTLY what he's talking about. I create a version of the Penn State logo with a navy blue background to go on a navy blue web page...but the colors are off enough that you get a dorky rectangle around the logo.

On the other hand if you put in a logo with no background color, the edge looks very jagged.

Dave recommends Firefox, but here's what I did for years in Photoshop.

1) Found an image of the Penn State logo and opened it up in Photoshop.
2) I used the paint can to change the background color to match whatever Web hex color value I wanted.
3) When I did a "Save for Web", I set the background color to transparent.

At this point you are left with a logo with a fuzzy blue edge, and the fuzzy blue edge blends in with the background of the Web page and the slight differences go away.

FYI - I eventually created a master file with two layers - a top layer with just the logo and a bottom one for the background color. This made switching background colors a lot easier.

Quick and Dirty Color Check for Web Sites

| | Comments (2)

Since Penn State supports both Mac and PC, it is important to make sure Web site colors look decent on both Mac and Windows. The usual quirk is that colors tend to be paler on a Mac and darker on a PC, so sometimes a site looks fine on a PC, but washed out on a Mac (or fine on a Mac and very dingy on a PC).

Part of the difference is that that the gamma for Mac is set to 1.8 default, while on a PC it's set to 2.2 by default (gamma controls how pixels display color). The 1.8 gamma setting is lighter than 2.2.

I am lucky enough to have a two monitors set up on my Mac, so right now I calibrate my primary monitor to the Mac 1.8 gamma and the second monitor to PC 2.2 gamma.

It's not perfect, but since I've done it, I've been able to see some of the weirder color changes between platforms (warm tones are especially dangerous for some reason), and have been able to find decent compromise colors.

If you don't have a spare Windows, it's a good workaround.