Archive for the ‘Design’ Category

Smooth Fonts in Photoshop

Monday, December 10th, 2007

When working with text in Photoshop, I've come across situations where my text/fonts turn out to be rough or jagged.

Rough Font

I've seen websites where designers have used images like the one above and may not have known that there is a very simple fix: When the "Type Tool (T)" is selected there is an anti-aliasing drop-down menu in the toolbar at the top of the screen. The selected option, to produce the text above, was "None". This is the default anti-aliasing method.

Font Setting

If you change this to "Smooth" or possibly any of the other options, you will get a much smoother font.

Smooth Selection

. . . and here's the final result

Smooth Font

I've tried to search for this solution before and didn't have much luck. That's why I'm sharing this with everyone!

Transparent Favicons Made Easy

Saturday, November 17th, 2007

I've had bad luck in the past with mediocre online favicon generators. They did a horrible job of resizing my file. I know that 16px by 16px doesn't give you much to work with. The worst feature, or lack of, was proper transparency.

Recently I came across a favicon generator that, I thought, performed very well. You can give it a try for yourself at: http://tools.dynamicdrive.com/favicon/ I made several example favicons from PNG files. You can see each of them below.
In Photoshop I created a new file (File -> New | 160 x 160 | Background: Transparent). Starting with an image at this size makes it a lot easier to work with your new icon. Once you're finished with your design, save your image "for web" (File -> Save For Web). After you select this option, you'll want to change the "Preset" value to "PNG-24" before saving. Saving it as a PNG file will allow for transparency in your design (JPEG files do not support transparency).

Here are my (FREE) samples.
Please feel free to use these for whatever you'd like!

Simple Method For Producing Matching Colors

Tuesday, November 13th, 2007

When designing websites/pages, I've always needed a way to find colors that work well together. I came up with this simple method that lightens and darkens your base color to produce a nice color to use for borders or text. In this example, we will darken a base color to produce a matching border color (using Photoshop). To do this, we use either a light or dark background and then change our main image's/color "Fill".

1. Open Photoshop and create a new image (File -> New) 400px x 400px with a white background.
PS01

2. Create a new layer (Layer -> New -> Layer). Use the Paint Bucket to paint the layer black.
PS02

3. Click on the "Layer Visibility" icon, for the black layer, so that it is hidden.
PS03

4. Set your foreground color to #BFAC60. Use the "Rounded Rectangle Tool" to create the shape on your background.
PS04

5. Next we'll bring our black layer back into view. It should appear directly behind our rounded rectangle.
PS05

6. Select your rectangle layer and change the "Fill" to 60%.
PS06

7. Now we can add that border around our rectangle. Click on the "Add a layer style" icon to add a "Stroke". Click on "Color:" in the "Layer Style" window.
PS07

8. When the "Color Picker" comes into view, move the eyedropper over to our newly created color (our rectangle).
PS08

9. Hide our black layer again (as we did in step #3) and change our rectangle "Fill" back to 100%.
PS09

10. Select "Background" to reveal our new image with matching border!
PS08

We can use this same method, but without using the black layer, to lighten our base color. You could then use this new color for text or highlighting effects.