iPhone
640×960

Widescreen 16:10
1920×1200
1680×1050
1440×900
1280×800

Full Screen 4:3
1600×1200
1400×1050
1280×960
1152×864
1024×768
800×600
640×480

Kerning vs. No Kerning

Tracking vs. Kerning

Kerning, simply put is the adjustment of space between individual letters as opposed to tracking which uniformly spaces the letters of the entire word. A well designed font will come with its own kerning pairs which means, that certain combinations of letters will have different spacing, either in a negative amount or additive amount applied to the default spacing in order to achieve a more pleasing look.

Tracking vs. Kerning

Proportional vs. Non Proportional Fonts

Proportional fonts, will require kerning as their glyphs have differing widths, and as mentioned before any well designed proportional font will come with built in instructions for kerning pairs. Non proportional fonts or mono-spaced fonts are not kerned, as their characters always have the same spacing.

Metric, Optical, and Manual Kerning

Type Palette

Those of you who use Adobe products, may have heard of the term Metric, or Optical in relation to kerning, the difference is simple. Metrics uses the built in kerning values for the various glyphs, whereas Optical allows the type engine to make this adjustment based on the glyphs themselves.  Generally speaking if you are unsure of which to use, choosing Optical is often a safe bet. Be sure to check your type palette that your kerning is set to either optical or metrics by default and not “0” or “auto”.  If it is set to “0” no kerning will be applied, and this is generally not a good idea.

In the case of most free fonts or poorly designed fonts you will need to manually adjust letter pairs to the best visual result. Kerning issues become more apparent at font sizes 14+ points.

To manually kern, simply place your cursor between the letters you want to space and using the “ALT” or “OPTION” key with either the left or right arrow.

Typical Letters that Need Kerning

It’s important to note that certain letter pairs are real kerning culprits and in the hands of a poorly or designed font, the following letter pairs are the ones most often needing love: LA, P., F., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, r., Ya, y. and Yo. Keep in mind that letters aren’t the only glyphs that may need kerning, numbers are often overlooked as well.  Some other less common combinations are OA, AC, and FA.

Learn more about the exhibition here at Gallery Nucleus’s website: http://www.gallerynucleus.com/gallery/exhibition/282

There are some broad categories of Color as outlined below (these are by no means the end-be-all, but its a good starting point).

Cold Colors

Colors like Blue, green and Blue-green are commonly associated with being cold, calm and trustworthiness. These colors can be used to create a feeling of austerity, cleanliness, invigorating freshness, and cold.

Cool Colors

Starting off with blue as a base for these colors, we start adding reds and yellows to create a diverse range of color from minty greens to a soft violets. These colors help invoke feelings of calm, serenity, trust and relaxation.

Hot Colors

As far as hot colors go, Red is the hottest as it is highest chroma color there is…quite simply it is the most powerful hue. A hot color may bring strong emotional responses, and can stimulate physical activity and sexual desire. If you are going for aggressive or really want something to stand out use a hot color. Placing a high chroma yellow in anywhere in a piece will draw the eye first, this is why it should be used sparingly.

Warm Colors

Starting with a red base but softened and mixed with hues like orange and yellow. Warm colors can suggest comfort and warm heartfelt emotions.

Dark Colors

Dark colors are used to reduce space in compositions, or to be counterpoint to lighter colors for focus allowing lighter colors to standout and be more effective. Dark colors can have a number of moods and perceptions from bringing a feeling of solidity, or somberness and melancholy.

Light Colors

The light colors are often barely colors at all and can be considered suggestions of color or hints of color. The play a similar counterpoint to the dark colors and in opposition convey openness, or airiness.

Pastel Colors

These pale colors are hues tinted with large amounts of white and are generally very soft in nature. These colors bring out a mood of innocence, fond memories, and romance.

Intense Colors

Intense colors are your high chroma colors, pure, powerful and when used seem to scream their message. Great for attention grabbing. Use with caution, and in most cases sparingly or appropriately based on the message or feeling you are trying to convey.

Feel free to discuss any additions to the above and I will add them in if appropriate.

His work is reminiscent of the great artists like Singer Sargent, and other fantasy artists like the great Frank Frazetta. Justin uses a loose painting style, focused composition and riveting action, Justin sweet can narrate so much with so little. He does many pieces that are quick and gestural and use a water color style, but even these quick and simple works speak volumes

His male subjects seem to be well muscled but never obscenely so. They are more often sleek and wiry. His women vary from athletic to voluptuous, and can be hard or soft as the narrative demands, but always alluring.

I strongly urge you to visit this artist’s website to view more of his fantastic work. I have included a small sampling of some of his published work.

Jon has also collaborated with another favorite artist of mine, Rick Berry. Jon Foster’s list of achievements is long but among them are numerous appearances in the Spectrum books (extremely prestigious sci-fi and fantasy art publications).

Jon’s artwork is often dark and muted, but with sweeping action and nearly impossible poses, which can quite literally take your breath away. Here are a few samples of his work, but I encourage you to visit his site and see all of his work. His illustrations are painted with oils, but he also scans them in and adds digital touches for the final pieces.

www.jonfoster.com

Jon Foster lives and works in Providence Rhode Island.

It’s a really simple way of calculating a golden ratio, for let’s say a grid layout or a shape. Just enter the pixel dimension in on field and you will get the appropriate dimension in the other field.

Golden Ratio Calculator (Beta)

In this Photoshop tutorial we are going to be utilizing the powerful feature of Layer Styles to create the snazzy looking input field below.

It often surprises me at how many different ways there are to accomplish any given task in Photoshop, netting the same end result, but I think creating the easiest and least destructive work flow is important. This is where layer styles come in. They allow us to modify layers with effects without actually altering the pixels of the layer itself (non-destructive editing).

You will need to be using Photoshop CS or higher for this tutorial.

Okay let’s start!

Step 1 – Create a Quick Background

This step is actually optional, but it helps bring the input field out a bit better. Start by creating a new Photoshop document (Ctrl/Cmd + N or File -> New) – you can make it whatever size you like (make sure background color is white) – the example here is 272×146 at 72 dpi.

Once you have the new document created, you will want to create a simple gradient on the background layer. Do this buy selecting the Gradient tool (G) and then click on the gradient bar in the contextual menu at the top to bring up the gradient Editor dialogue (shown in the illustration below)…

Make sure that you have Foreground to Transparent selected. Click Okay to accept the changes. With the dialogue box closed now just drag the Gradient tool from bottom to top so you end up with something like the image below.

Step 2 – Create the Input Field Shape

Selecting the Rounded Rectangle tool from the shape tool (U) we will create the basic input shape. The settings used here are shown below, you can use any corner radius you prefer. You can also make the shape whatever color you desire, because in the end it the color will be blocked out by our styles.

Step 3 – Add a Drop Shadow

In this step we will be adding a drop shadow via the layer styles palette, and the cool thing about this is that it’s not the typical type of drop shadow as you will see in the settings. This drop shadow might more accurately be termed as a highlight…

Bring up the Blending options for our shape layer, this can be done several different ways, one of them is to simply right click on the layer, then select Blending Options. Once the dialogue box is up, click on Drop Shadow on the left, and then edit the drop shadow properties the way they are illustrated in the image below. Note that the blending mode is set to Normal and the color that we want is white (the box next to the blending mode drop down – click on it to edit the color). When you are done click Okay to accept the edits.

Step 4 – Add an Inner Shadow

Now that the drop shadow has been added let’s add in an Inner Shadow. Follow the same steps in the previous step for bringing up the layer Blending Options dialogue, and this time select Inner Shadow and use the settings in the image below. When you are done click Okay to accept the edits.

Step 5 – Add a Gradient Overlay

Open the layer Blending Options once again and select Gradient Overlay, and make sure your basic settings are the same as the ones in the image below.

By default your actual gradient wont look like the one above, it will most likely be black to white…that’s okay, just click on the gradient bar and that will bring up the Gradient editor. Create a gradient similar to the one in the screen shot below. The settings used are first color (#ffffff), second color (#dedede), third color (#c3c3c3). You can add colors to the gradient by clicking along the bar, and you can edit them by double clicking the little tabs.

Once you have completed this click Okay to accept the edits, and your input field should start looking like it’s supposed to, but we still have one final step…

6. Add a Stroke

We are going to add a stroke for the last layer style, so once again open the layer Blending options palette and select Stroke on the left. The magic here is the settings we use for the stroke, instead of a standard fill as most people may use the stroke, we will be selecting Gradient for fill type. Make sure your settings are the same as the ones in the image below…

One you have those settings done (make sure the gradient is set to reverse), click on the gradient bar again and create a gradient similar to the one in the sample below. First color (#3d3c3c), second color (#ffffff). When you are done.

Click Okay on the dialogue panels and voila you are done…and you will have your final snazzy looking input field (Just add the text).

There you have it! Now you can save that style and reuse it for your other input fields. I hope you enjoyed this Photoshop Tutorial, and if you have any comments or questions please feel free to post them here!