Layer Styles are nothing new. They’ve been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.

Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter. You will find more useful Photoshop techniques and tutorials in our hand-picked selection, Best of Photoshop on Smashing Magazine.

Download the source files (.zip, 1.6 Mb).

The Bump Map Effect

“Wait, what?” you exclaim, “There’s no bump map effect in the Layer Styles menu!” That’s true, but by combining Pattern Overlay and Bevel and Emboss, we can achieve a textured, bump-mapped surface with a controllable light source.

This technique requires two images: one for texture and color, and the other to serve as a depth map. The depth map needn’t have any hue because it determines depth based on a composite value, black being the lowest, white the highest. In some cases, you may be able to use the same image for both, but in our example we’ll use completely different ones.

Step by Step

1. We’ll start by creating our bump map pattern. Open the diamond-plate.psd file.
2. Inside you’ll find a number of white shapes on a black background. Create a pattern from this document: Select All (Cmd/Ctrl + A), then “Edit” → “Define Pattern.” Name it “diamond plate bump map” and click okay.

   
   Creating the diamond plate pattern.

3. Now, open the start.psd file.
4. Repeat step 2 to create a pattern from the “patchy gray” layer. This will be used later to add texture to our background.

   
   Defining the texture pattern.

5. After creating the pattern, delete the “patchy gray” layer. It’s no longer needed.
6. Use the Rectangular Shape tool to create a shape layer about 20 pixels wider and 20 pixels higher than the canvas. Change the color of this layer to a dark, brownish, chromatic gray.

   
   Creating the shape layer for our background.

7. Be sure that the shape layer doesn’t have any Layer Styles already applied to it (Photoshop will often apply the most recent Layer Style automatically). Then, begin the new Layer Style by adding a Pattern Overlay.

   
   Adding a Pattern Overlay effect.

8. Choose the “patchy gray” pattern from the pattern picker, and change the Blend Mode to Soft Light. This will add the texture to our background layer.

   
   
   Adding a pattern overlay effect.

9. Next, add a Bevel and Emboss, along with the Texture effect. This time, change the Texture effect’s Pattern to the “diamond plate bump map” pattern created in step 2. We now have a grungy diamond plate background.

   
   
   Applying the Bevel and Emboss texture effect.

10. As with most Layer Style effects, the default values are rarely ideal. By tweaking the Bevel Type and Size, Gloss Contour, Highlights, Shadows and Light settings you can achieve some dramatic results.

    
    
    Tweaking the Bevel and Emboss settings.

11. With a few extra effects, you can shape the background layer even more. The example has a Gradient Overlay to simulate reflected light by darkening certain regions of the image.

    
    
    Using the Gradient Overlay to darken some regions.

12. You may notice that the highlights from the Bevel and Emboss filter all seem to have the same value. This is because the Bevel and Emboss effects are very high on the Layer Style’s stacking order. To darken the highlights that lie outside our main light source, simply paint a Layer Mask using the Brush tool.

    
    Painting a mask to increase the appearance of light in the background.

We now have a textured, bump-mapped background that is completely dynamic; everything about it can be modified easily from within the Layer Styles menu. Consolidating complex imagery into one dynamic layer like this can reduce layer clutter dramatically and allows you (and whoever else may be using the file) to easily find and modify things. Now, let’s move on to creating our icon.

3-D Modeling

By combining some interior effects, we can use the Layer Styles menu to create simulated 3-D objects: great for icons, buttons and other interface objects. We’ll now model the base of the round icon in the example image using a single layer.

Step by Step

1. Begin by creating a circular shape layer with a rich red fill.

   
   Creating the shape layer for the icon’s base.

2. As is often the case when modeling a 3-D shape, let’s begin by adding a Gradient Overlay to our Layer Style. A white-to-black Radial-styled gradient set to Linear Burn works best for our implementation. Be sure the white area of the gradient is at the origin.

   
   Adding Gradient Overlay set to Linear Burn.

3. We now have a dramatically shaded sphere with a head-on light source. By decreasing the opacity of the gradient, we can flatten the shape to a more concave button.

   
   Reducing the Opacity for a subtler effect.

4. Let’s also move the direction of the light to the upper-left. While leaving the Layer Style menu open, move the mouse over the image itself (the Move Tool icon should appear). Simply click and drag the epicenter of the gradient to the upper-left of the shape layer.

   
   Repositioning the gradient within the Layer Styles menu.

5. While Bevel and Emboss may seem like more logical tools, you can often get a cleaner, more customizable beveled look by using a combination of other effects. First, add a black Inner Glow, set to Multiply. Adjust the Choke, Size, Opacity and Contour until you have a softened edge inside the shape.

   
   
   Adding a Glow to darken the edge of the base.

6. Like for any well-rendered spherical surface, we have to add some reflected light in our shadow region. This is easily achieved with the Inner Shadow effect. Change the color to white and the Blend Mode to Linear Dodge. Adjust the angle so that it appears in the lower-right of our shape. Tweak the Contour, Distance, Size and Opacity to create a subtler effect.

   
   
   Adding subtle reflected light using Inner Shadow.

7. To enhance the feeling that the shape is part of the document’s “environment,” we can add some effects to interact with the background. Drop Shadow is usually the easiest tool to use for this. Massage the settings until everything feels right.

   
   
   A simple Drop Shadow goes a long way.

8. Using the Outer Glow effect, we can simulate the reflected red light that our background image would absorb if this were an actual setting. Change the glow’s color to a darker red, and change the Blend Mode to darken. Again, work with the Size and Opacity settings to create the desired effect. This is one of those effects that, when used correctly, no one should notice because it just looks natural.

   
   
   A red Glow to add more “environment.”

Please notice that Layer Style gradients can’t be dithered, which can make them lower quality than their Gradient Layer and Gradient Tool counterparts (— Marc Edwards).

Diffuse vs. Specular Light

Now, our icon reflects a simulated diffuse light, which gives it the look of a matte-finished surface. If you prefer a glossier appearance, you can easily create a specular highlight using (what else?) Layer Styles.

Step by Step

1. Duplicate the current shape layer (Cmd/Ctrl + J).
2. Clear the new layer’s Layer Styles: right-click the layer in the Layers palette and select “Clear Layer Style.”
3. We also need to modify the shape of the layer to give the reflected light a sharper edge. Using the Direct Selection Tool (A), select the shape path in the layer’s vector mask. Copy it (Cmd/Ctrl + C) and paste it (Cmd/Ctrl + V) above the current path. Change this path’s mode to Subtract from shape area (-). Then move the shape down and to the right to create a crescent shape. You may also want to make the negative shape larger to create a more natural inside curve: simply Free Transform (Cmd/Ctrl + T) and then scale the shape up.

   
   Modifying the shape of the specular highlight.

4. Because we need this layer only for its Layer Styles, we can set its Fill Opacity to 0%.

   
   Dropping the layer’s fill to 0%.

5. We also want this layer to inherit the Layer Styles of the underlying layer, so create a Clipping Mask on the new layer (Cmd/Ctrl + Option + G).

   
   Creating a Clipping Mask to inherit effects.

6. Now, begin the Layer Style with a Gradient Overlay. Use the default black-to-white gradient, and set the Blend Mode to Screen. Knock the Opacity down to about 50%, and change the angle to about 115°. You may need to change the positioning of the gradient, which you can do by clicking and dragging inside the document window, just as you did in the 3-D modeling section.

   
   
   Setting the Gradient Overlay to Screen.

7. This is a good start for the highlight, but it still looks somewhat unnatural. Using a transparent inside stroke, we can shrink the perimeter of the interior effects. Add a Stroke effect to the layer and drop its opacity to 0%. Change the position to Inside, and work with the size slider until the highlight begins about where the darker inner glow ends on the underlying layer (the example image uses 5 pixels).

   
   
   Using a 0% Inside Stroke to shrink the perimeter of interior effects.

8. To add a more dynamic look to your highlight, you can add a white Inner Shadow set to Screen with a custom contour. Tweak the distance and size settings to finish off the effect.

   
   
   The Inner Shadow creates a more dynamic specular reflection.

X-Ray Vision

Step by Step

To create the die-cut type inside our icon, we could turn the text layer into a shape layer and use the paths to mask away areas from the base. However, this would result in degenerated content; we would no longer be able to modify the type. Instead, we’ll simulate a mask using the Knockout Blending Option. This will also allow us to apply custom effects to the cut-out area.

1. Create a new Type Layer with the text “fx”, and position it within the circular base. The example uses 120 point Garamond Bold Italic.
2. Drop the Fill Opacity to 100%.
3. Begin your Layer Style by adding an Inner Shadow. Increase the size, and increase the opacity to about 90%. You may also want to modify the distance and contour to your liking.

   
   The beginnings of the die-cut effect.

4. We now have the beginnings of a die-cut effect, except that the text still shows the base below it. To fix this, go to the Blending Options section in the Layer Styles menu. Change the Knockout from None to Shallow (this setting samples pixels from the layer directly beneath the current layer’s group). Because our text layer doesn’t belong to a layer group, it samples instead from the Background layer. (Using a Deep Knockout would always sample from the Background layer, regardless of the layer’s group.)

   
   
   Shallow Knockout samples pixels from the layer directly beneath the current layer’s group.

5. To get the text layer to sample from our diamond plate layer, start by clicking “Okay” to close the Layer Style menu. Select the text layer and both of the buttons that make up the base, and group the layers (Cmd/Ctrl + G). As you can see, the “fx” shapes are now drawing pixels from the textured layer directly below the new layer group.

   
   Grouping the icon so that the Knockout samples from the diamond plate layer.

6. The knockout effect is very convincing, but the type still feels detached from the base. Let’s add a beveled effect to simulate the surface quality of the base. Start by adding an outside Stroke with a size of 2; then drop the opacity to 0%. This doesn’t achieve anything but is necessary for the next step.
7. Now add a Bevel and Emboss effect. Change the Style to Stroke Emboss and Technique to Chisel Hard. This will apply the bevel’s lighting effects within the stroke area created in the step above. Modify the settings to achieve a subtle and smooth edge.

   
   
   Adding a Stroke Emboss.

8. Let’s take the bevel one step further by adding a thin specular highlight to the bottom-right edges of the shape. We can use a white Drop Shadow effect, set to Screen, to add a bright highlight just at the edge of the bevel. You’ll want to modify the distance and size to give the highlight a sharp edge.

   
   
   Adding a thin specular highlight using a Drop Shadow.

9. Finish off the Layer Style with more shading within the die-cut letters by adding a simple black-to-white Gradient Overlay, set to Multiply.

   
   Finishing off the die-cut.

Quick Tips

Despite frequent misuse, the Layer Styles menu really is a powerful tool that every designer should learn to work with. Not only does it provide a level of speed and control not easily found through other means, but it provides invaluable flexibility. Our example shows how a multi-dimensional icon and a completely dynamic background can be consolidated within four simple Shape layers, allowing them to be easily modified, reused and repurposed throughout your designs. Below are a few extra tips to remember when working on your next project.

Effects Stacking Order

You may have noticed sometimes that an effect isn’t visible when another effect is being used. For example, a Color Overlay seems to override a Gradient Overlay. This is because of the Layer Styles Stacking Order. Just as with the Layer’s Palette, one layer will cover another that is lower down in the stacking order. Unfortunately, the Layer Styles menu doesn’t allow you to rearrange the order of effects. One way around this (even if you sacrifice the ability to edit) is to use Create Layers, which turns all of your Layer Style effects into actual layers that you can move.

Interior Effects Stacking Order:

• Stroke
• Bevel and Emboss
• Inner Shadow
• Innger Glow
• Satin
• Color Overlay
• Gradient Overlay
• Pattern Overlay

Exterior Effects Stacking Order:

• Stroke
• Outer Glow
• Drop Shadow

Non-Color-Specific Styles

Though not always possible, you may want to use black, white and grays for your effects. Using monochromatic colors in conjunction with the proper Blend Mode allows you to create styles that are non-color-specific, meaning you can modify the color of the actual layer, and your Layer Style will update appropriately.

Scaling Effects

There may be times when you’ve created a Layer Style that looks great at the original size, but when the shape is increased or decreased, your beautiful style is destroyed. Fortunately, Photoshop provides a method to adjust styles that are out of whack. Simply choose Layer → Layer Style → Scale Effects, and then input the percentage you need.

Inconspicuous Menu Options

A number of hidden commands are available to you from within the Layer Styles menu. Depending on the effect, you will have access to either the Hand tool or the Move tool by simply mousing over the document window. The Hand tool allows you to move the document around just as you would outside the Layer Styles menu, and the Move tool repositions the current effect and updates the settings automatically. When using the Move tool, you can still access the Hand tool by holding the space bar. While using either of the tools, you can zoom in and out by holding Space + Cmd or Space + Option respectively. Don’t forget, as with most other menus in Photoshop, holding “Option” will change the “Cancel” button to a “Reset” button, allowing you to undo any changes.

Thanks to Marc Edwards and Ricardo Gimenes for their assistance in editing the article.

(al)

© Thomas Giannattasio for Smashing Magazine, 2011.

  

Two weeks ago we published the first part of Photoshop tips and tricks for photo retouching. Today, we’ll be presenting the rest of the article. We hope that these techniques will be quite useful for your workflow. You may know some of them, but hopefully not all of them. We have had articles on various tools in Adobe Photoshop but this one is focused more on the techniques rather than the tools provided. Please note that all images used in this article were purchased and are used according to their licenses.

Here is a short overview of the techniques we’ll be covering in this follow-up:

• Defining Colors
• Controlling Folders
• Split-Toning Effect
• Flexible Vignette
• Skin Retouching In Camera Raw
• Setting Lights
• Distinguished Paleness
• Dodge And Burn Look
• Bright Eyes
• The Orton Effect
• Optimizing Lasso Selections
• Aligning Layer Contents
• Restoring Selections
• More Photoshop Tips and Tricks

Defining Colors

If you want to redefine the foreground and background colors, use the Eyedropper tool to select the foreground color, and then switch the position with the background color, maybe by using the shortcut X, and pick up the next color. But there is an easier way. First, define the foreground color just as you’re accustomed to, but then define the background color by holding the Alt/Option key. Instead of changing the foreground color, you’ll redefine the background color with just one click.

Define foreground and background colors.

Controlling Folders

Folders give structure to layers, which is especially important if you’re working on demanding compositions. Folders are often collapsed, so you can’t see the contents at first sight. This conserves space but it’s not always desirable. If you want nested layers to reveal their contents and offer a quick overview, hold the Control/Command key and click on one of the triangles to expand. All folders at the first level will expand. You can collapse them again using the same trick. To expand all nested folders inside the folders as well, hold the Alt/Option key as well as the Control/Command key.

Hold the Control/Command key to expand the folder.

Split-Toning Effect

Create two new gradient maps via Layer → New Adjustment Layer → Gradient Map. You could, for example, create a gradient from dark-blue to beige and another from dark-brown to white. To change a gradient, click on it to open up the “Gradient Editor” dialog box. There, click on your chosen color patches and open up the color picker via the “Color field.”

Blending Options: This Layer

Confirm with “OK,” double-click the layer with the second gradient map and, under “This Layer,” move the right slider to the left. To make the transition a little smoother, click on the slider while holding down the Alt/Option key and move it to the right. Confirm with “OK.”

Split-Toning Effect

Flexible Vignette

To create a non-destructive vignette, go to New Adjustment Layer → Levels. Darken the image completely by, for example, setting the Highlights down to 80. Now use the Brush tool with black color to paint the light center into the layer mask. Instead of using a brush to paint the area, you could use the Elliptical Marquee tool and fill the selection with black.

Adjustment Layer: Levels

You can use the Move tool to adjust the vignette’s position any time, or blur it using the “Gaussian Blur.” You can also increase or decrease the darkening. To do so, open the Levels Adjustment dialog box again.

Skin Retouching In Camera Raw

Again, open a photo in Camera Raw (for example, by using the right mouse key from Bridge and clicking “Open in Camera Raw”). In general, you can use the Spot Healing Brush tool and all other tools and sliders to improve the image. When you’re happy with it, hold the Shift key and click on “Open Object.” The image will be put on a new layer as a Smart Object.

You could also click the blue link at the bottom of the screen, which opens the “Workflow Options” dialog window. From there, you can control some other settings as well. Make sure to check the “Open in Photoshop as Smart Object” checkbox, and then confirm with “OK” to open the images (without having to holding Shift).

Here, layers are smart objects.

Right-click on the layer and choose “New Smart Object via Copy,” and then open the Camera Raw dialog box again by double-clicking the layer icon. Set the “Clarity” value to -100 and confirm with “OK.” Hold the Alt/Option key and click on the “Create Layer Mask” button, then use a soft brush to paint over the optimized skin. Use the opacity slider to control the amount of retouching.

Here is optimized skin with the help of Camera Raw.

Setting Lights

If you want to do some virtual re-positioning of your strobes, then neutralize the shot first. Go to Select → Color Range, and set Select option to “Highlights.” Copy the selection content to a new layer by hitting Control/Command + J. Activate the background layer again, and select the “Shadows” this time. Bring those to their own layer, too, with Control/Command + J, and then set the blending mode to “Screen” and the highlights to “Multiply.”

Highlights and shadows

Reduce the opacity to about 30%, depending on the image content. “Shadows/Highlights” might also help. On a new layer, filled with a neutral gray and its blending mode set to “Overlay,” paint in the desired light quality with the Dodge and Burn tools. Alternatively, add a new layer and set its blending mode to “Soft Light” or “Overlay” and, with a low opacity brush, paint black and white on this layer.

The lights were neutralized a bit.

Distinguished Paleness

For a distinguished paleness, copy the background layer and set its blending mode to “Screen.” Use Image → Adjustments → Desaturate or “Black & White,” then “Shadows/Highlights” to increase the effect. The exact adjustment options can vary according to your image content.

Here’s the layer after creating the mask.

The effect will cover the entire image unless you click on the “Create Layer Mask” button while holding the Alt/Option key, and then paint the pale areas with the brush tool and white color. You can control the effect’s strength with the opacity slider.

Distinguished paleness.

Dodge And Burn Look

Copy the reduced layers to a new layer with Shift + Control/Command + Alt/Option + E, and then set the blending mode to “Vivid Light.” Use Control/Command + I to invert the layer content, and apply Filter → Blur → Surface Blur with a radius of about 70 pixels and a threshold of 40 levels. Press Shift + Control/Command + Alt/Option + E again, delete the layer below, and set the blending mode to “Overlay.” Apply a “Gaussian Blur” to make the contours a little softer, and then click Image → Adjustments → Desaturate.

Dodge and Burn Look

Bright Eyes

To make eyes appear brilliant, click on New Adjustment Layer → Exposure. Fill the layer mask with black (or invert the mask), and paint with white over the irises and with black over the pupils. Set the blending mode of the adjustment layer to “Luminosity.” Increase the exposure in concert with the gamma value to give the iris structure more contrast. Also, try changing the “Offset slider.”

Create beautiful eyes with exposure.

The Orton Effect

With the Orton effect, sharp and blurred versions of a photo are mixed together. Copy the background layer with Control/Command + J, and click on Image → Apply Image. Change the blending mode to “Screen” and click “OK.” Copy the current layer again with Control/Command + J. Apply a Gaussian Blur to this copy by clicking Filter → Blur → Gaussian Blur. The value will depend on the size of the image. The shapes should always blur slightly. Set the blending mode for the layer to “Multiply.”

The Orton effect creates contrast and depth.

Optimizing Lasso Selections

Many users (even professionals) prefer the Lasso Selection tool to the Path tool for uncomplicated selections. To switch to the Polygon Lasso tool for a short stretch, hold the Alt/Option key while working. To switch back to the regular Lasso tool, just release the Alt/Option key while depressing the mouse button.

Switching between the Lasso and Polygon Lasso tools is easy.

It often happens that, during a zoom, you hit the edge of the work area while making a selection. Just keep the space bar pressed to switch to the Hand tool, and you can quickly change the displayed image section.

Aligning Layer Contents

Some areas in Photoshop are hardly ever noticed. This is one of them. If you activate the Move tool, you’ll see some mysterious symbols to the right called Align tools, in the option bar next to Auto-Select and the Transform controls (which are basically equivalent to Free Transform).

Align tools

If you activate just one layer, the Align tools won’t do anything, but if you select two or more layers by holding the Control/Command key, then you can align the layer’s contents with these buttons. Choose from options such as “Align Top Edge” and “Align Vertical Center.”

Restoring Selections

Often, while in the middle of working on a tricky selection, you’ll accidentally deselect it by clicking once too often. You can restore the lost selection by pressing Shift + Control/Command + D. This will get the ants marching again. You can also undo (Control/Command + Z) the action, and even perform multiple undos with Control/Command + Alt/Option + Z.

By the way, you can hold the Alt/Option key to subtract elements from the selection at any time, or hold the Shift key to add to the selection. Pressing a combination of both keys creates a selection intersection. Important selections that you might need later can be saved by going to Select → Save Selection.

Restore lost selections.

More Tips and Tricks to Improve Your Workflow:

• Mastering Photoshop: Unknown Tricks and Time-Savers by Thomas Giannattasio
• Compositing in Adobe Photoshop: Time-Saving Tips by Daniel Durrans
• Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles by Marc Edwards
• Useful Adobe Photoshop Techniques, Tutorials and Tools by Vitaly Friedman
• The Ultimate Guide To Cloning In Photoshop by Joshua Johnson
• The Ultimate Collection Of Useful Photoshop Actions by Jacob Gube
• Unveiling Photoshop Masks by Thomas Giannattasio

(al) (vf) (ik)

© Dirk Metzmacher for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: photoshop

  

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements.

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS

  

Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vector graphics, such as logos, and it is also often used for one-page documents, such as business cards, posters, or postcards.

Since we can easily transfer graphics from Illustrator to Photoshop and InDesign, designers often use Illustrator to create vector type that they can then incorporate into projects in another program. For instance, you can create a nice type design within Illustrator, then add some extra effects in Photoshop. Or you may need to design a text illustration within Illustrator to place within your brochure project in InDesign.

If you have never taken the time to explore the type side of Illustrator, you may be surprised at the powerful tools that Illustrator provides for working with type. Similar text features found in Photoshop and InDesign are also available in Illustrator — only Illustrator comes with its own unique set of typographical features as well. So for those of you who use another Adobe Suite program, you will easily catch on to Illustrator’s type idiosyncrasies.

No matter what your purpose for working with type in Illustrator is, as a designer, you will not only improve your work, but also save valuable time by knowing the different typographical tools available. Here, we will focus on some of the most important aspects of typography that every Illustrator user should know:

1. Metric vs. Optical Kerning
2. Roman Hanging Punctuation
3. The Glyphs Panel
4. Hyphens and Dashes
5. Styles Panels
6. Placing Type on a Path
7. Point Type vs. Area Type
8. Creating Columns of Text
9. Text Flow Between Containers
10. Scaling Area Type Numerically

1. Metric Vs. Optical Kerning

Kerning is an important aspect of design. It has to do with the adjustment of space between letters in order to improve the visual treatment of typography, and Illustrator provides the right kerning tools for designers. In more recent versions of Illustrator’s CS series, three automatic kerning options are available: “Auto” (also known as metric), “Optical” and “Metrics – Roman Only.” In addition, manual kerning is available. All have their place in design, but knowing which one to use when can be confusing without some basic knowledge.

Auto, or metrics, kerning is built into type using kern pairs; for instance, all PostScript fonts have kern pairs built into them. Illustrator interprets this kerning code to determine how much space to put between certain letter combinations, such as “WA,” “LA,” “To” and “Ty.”

Optical kerning is also an automatic kerning option built into type but slightly different than the Auto option.  It uses the shapes of the letters to determine the space to put between characters. Optical kerning works well when combining letters of more than one font or when a font has little to no kerning built in. Use manual kerning where possible, since it provides the highest level of control. Most often, though, one would use manual kerning only in display copy, headlines, business cards and other short blocks of text.

The “Metrics – Roman Only” option, which was added into Illustrator in the CS4 version, is for Japanese typography. This option adds kerning only to Roman glyphs or any character that rotates in vertical text. Basically, it works with Latin characters, such as Basic Latin or Latin Extended, and the half-width Katakana. To switch to Optical kerning, first select the text you wish to change. Then, under the Characters palette (Window → Type → Character), click on the Kerning drop-down menu. Then select “Optical.”

Or, if you would like to manually kern letters yourself, place the cursor between two letters, and choose a value in the Character palette:

To turn off kerning between selected characters, set it to “0”:

Keep in mind that to adjust the value between entire groups of letters, you will have to use the tracking settings in the Character palette. The tracking is adjusted in the drop-down menu located to the right of the Kerning drop-down menu. Hover your mouse over the menu to see “Set the tracking for the selected characters,” as in the screenshot below:

Illustrator’s default kerning is “Auto,” so simply select this if you would like to turn it back on.

Useful Tip: One excellent way to save yourself some time while designing is to use Illustrator’s keyboard shortcuts to change manual kerning and tracking settings. To change the kerning between two characters, simply place the cursor between the two letters. Then use Alt/Option + left/right arrow. The kerning will decrease with Alt/Option + left arrow and increase with Alt/Option + right arrow.

To change the tracking for an entire group of letters, first select the letters you want to change. As with kerning, use Alt/Option + left arrow to decrease tracking and Alt/Option + right arrow to increase tracking.

2. Roman Hanging Punctuation

Roman hanging punctuation will give your blocks of text a clean appearance, taking your typography from amateur to pro. But what exactly is this tool that is hardly talked about? Turning on the Roman hanging option in Illustrator will make the text line up evenly by “hanging” quotation marks in the margin. Otherwise, quotations are set flush with text, within the margin.

To turn on Roman hanging punctuation, open the Paragraph tool panel, and click on the arrow on the upper right of the box. A drop-down menu will appear in which you can choose “Roman Hanging Punctuation.”

Keep in mind that you can turn on or off the Roman Hanging Punctuation for entire blocks of text. Just select the blocks of text and use the same drop-down menu to change the setting.

3. The Glyphs Panel

Glyphs are any characters found within a font family. The Glyphs panel in Illustrator is the place to locate font objects, from normal characters to the special symbols. Whatever font you have selected when you open the glyphs panel is the menu that will be displayed. Fortunately, you do not have to keep exiting the Glyphs panel every time you would like to see the glyphs for another font or see glyphs similar to the one you’ve selected. You can also keep the Glyphs panel open while moving your cursor to different locations in the document.

To open the Glyphs Panel, go to Window → Type → Glyphs. Click on a glyph to select it; double-click to insert it in the line of text. Illustrator places the character wherever your blinking text cursor is located.

Hover your mouse over glyphs to see the Unicode (the name given to each character in the Glyphs panel); the Unicode is displayed at the top of the panel. Once you have found the glyph you would like to use, simply double-click on the character to insert it into your current project.

To see a different font, simply choose a different family and style from the drop-down boxes at the bottom of the panel.

To see the glyphs in a larger or smaller preview display, click on the zoom in and out buttons located in the lower-right corner of the panel.

In the “Show” menu at the top of the panel, you can limit the type of characters displayed in that font; for instance, “Oldstyle Figures.”

You might notice that some characters in a font include an arrow in the lower-right corner of the character box in the Glyphs panel. This arrow indicates that alternate glyphs are available for this character. To access these alternates, simply click and hold the character. Drag your cursor over the alternate glyph you would like to use, and release the mouse. The glyph should now be inserted in the text.

4. Hyphens and Dashes

One of the easiest ways to disqualify yourself as a professional designer is by using hyphens and dashes incorrectly. The rules are somewhat tedious but fairly easy to learn and remember.

A hyphen is the shortest in length and is located on the keyboard next to the “+” sign. It has three functions. It is used when a word is split at the end of a line of text. It is used to join two words together to create a compound word, such as “fun-loving dad” and “anti-American.” A hyphen is also used with two-word numbers, such as forty-two. If in doubt, look up the word in a dictionary and use a hyphen if the word is not present. Example: “Twenty-two dollars is all that your un- line break loving dad will give to a well-intentioned suitor.”

An en dash is the second longest in length and is used to show a span of time or a numerical range; for example, 5–9, July–September, 1:00–8:00. In the Glyphs panel in Illustrator, the en dash Unicode is U+2013. Example: “Our vacation is from June 13–18.”

An em dash is the longest in length of the three and is used to show a break in thought. For instance, “Down the road—and a long winding road it was—they traveled as quickly as possible.” In Illustrator, the em dash Unicode is U+2014. Example: “We gathered our supplies — all eight truck loads — and started slowly up the bypass.”

5. Styles Panels

When working with large amounts of text in Illustrator, you do not have to keep applying the same font styles manually to every heading and block of text. You can simply save your settings using the Character Styles panel or the Paragraph Styles panel. Both can be found under Window → Type.

To set a style, simply type your heading or paragraph using the font styles you want to save. Then go to Window → Type → Character Styles, or Window → Type → Paragraph Styles. A Styles panel box will appear, and in the upper-right corner will be a small arrow, which is the Styles menu. To create your own name for the style, choose “New Character” or “Paragraph Style,” type a name, and click OK.

When you would like to add your new Character or Paragraph Style to text, select the text. Then click on the style that you created in the Style panel box. The style you saved will now be added to the text.

To edit a style, click on the style in the panel box, then click to the Character and Paragraph Style options in the drop-down menu, or simply double-click on the style you want to change.

Now on the left side of the dialog box that pops open, click on a formatting category. Make the changes you need, click OK, and all text that you’ve applied to this style will be changed. Keep in mind that if text is selected, the changes will be made to it only. Click on the Selection tool and then click anywhere on the work desk to make sure that text is not selected before attempting to change the style of all text.

To delete a style, select it in the Character or Paragraph Styles panel. Then click the “Delete” button in the bottom-right corner of the panel. Or just drag the style onto the “Delete” button. The formatting of text associated with this style will not change, but a style will no longer be applied to this text.

6. Placing Type On a Path

Most Illustrator users know that type can be placed on a path to create shaped text or text that wraps around an object. The technique for applying text to a path is different depending on the path, though. Type can be placed on either an open path, which is a line with a beginning and end, or a closed path, such as a circle or square.

Open Paths

To place type on an open path (i.e. a line with a beginning and end), begin by creating a path, such as a curved line. Make sure to select the Type tool, and then move your cursor over the path until the cursor changes to a Type on a Path icon, which has a line through it.

Then just click on the path, and you will have created a Path Type object. The Stroke objects will be gone, and a blinking cursor will appear in which you can type your message.

To make any changes to your open path type, choose the Selection tool and click on the path. In and out ports (small white boxes) will appear at either end of the path and a line in the center and on the far left and right. Basically, Illustrator is now treating the path as it would area type. Drag one of the lines to make the text path shorter or longer; make sure that your cursor is an arrow with a line-and-arrow symbol next to it.

You can change the actual type just as you would any other area type, including by changing the font size. Doing this, though, may make the text extend outside of the area type’s boundaries. If this happens, a red plus sign will appear.

If you click on the plus sign, the cursor will change to a linked container cursor (it looks like a text box). Then, click on another area in your project to create another open path line of the same size and shape as your first. New text will continue to flow onto this new line.

Or simply drag the beginning and end lines to make text fit on the path:

Make changes to the actual path that the text sits on by choosing the Direct Selection tool and then clicking on the path. You can now lengthen or shorten the path or change the shape, just as you would with any other path.

You can also move the type to sit underneath the path by dragging the center line to the opposite side of the path. Or go to Type → Type on a Path → Type on a Path Options. In the box that appears, check the “Flip” box and click OK.

To flip type over, go to Type → Type on a Path → Type on a Path Options. Select the Flip box and then select “Ascender” in the “Align to Path” menu. Other changes can be made in this dialog box as well: change the effect, choose other path alignment options or adjust the spacing.

Closed Paths

The confusing part of placing type on a closed path is that the start and end points are in the same place. With an open path, your starting point is wherever you click with the Type tool to create a Path Type object, and the end point is the end of the path. On a closed path, both the start and end points are wherever you click, because the object creates a continuous line. The center line on a closed path, such as a circle, would then be at the bottom of the circle if your start point is at the top. To place type on a closed path, you will have to choose the Type on a Path tool by clicking on the Type tool and dragging to pull out the Type menu.

Then click on the path where you would like the text to start and begin typing. Once again, make sure the cursor changes to the Type on a Path symbol.

Just as with an open path, you can change the location of the start and end points and, therefore, move the location of the text on the object.

You can also move type underneath the line or flip type over the same way as you would with open type. Simply go to Type → Type on a Path → Type on a Path Options, and change the settings to get the desired effect. Or you can make changes by dragging the center line.

7. Point Type vs. Area Type

Point type, created by selecting the Type tool, is so called because it adds text to a certain point in an image. Area type, created by selecting the Area Type tool, adds text to fill a specified area of an image.

Point type is often used for headlines and other single lines of text. The more you type, the longer the text line becomes. To move text to another line, you must manually press Enter or Return on the keyboard. Area type is used for paragraphs of text and is surrounded by a bounding box. As you type, the text automatically flows to fill the box. The bounding box in area type will have two large boxes, called ports, in addition to the normal bounding box handles. These ports are the in and out boxes from which text flows between area type containers.

When selecting point type with the Selection tool and if you have selected “Show Bounding Box” in the View drop-down menu, a bounding box will appear surrounding the text. However, when changing the shape or size of the bounding box with point type, the text will become distorted because no shape is holding the text. On the other hand, changing the size or shape of area text will simply change the way the text fills the bounding box.

8. Creating Columns of Text

Any area type can easily be divided into columns, or even rows, whenever needed. First, create the area type, and then select it. Go to Type → Area Type Options. In the box that appears, you will see options for changing the settings of both rows and columns, as well as for resizing the area type.

Change the number of rows or columns by changing the Number settings underneath the Row or Column settings. The “Span” changes the width of individual rows or columns, and the “Gutter” changes the distance between each row or column.

If you select the “Fixed” box, then you can resize the area, and the number of rows or columns will change, not their width.

With the Fixed box deselected, the size of the rows and columns will increase or decrease when resizing, but the number of rows or columns will remain the same.

If you break the text into both columns and rows, rather than just one or the other, then you will want to choose the way text flows between columns and rows in the Options section. Selecting “By Rows” will cause the text to be read from left to right, first in the top row and then in the bottom row. Selecting “By Columns” will cause the text to be read left to right, first in the left column and then in the right column.

9. Text Flow Between Containers

With certain projects, you may need to make text flow from one area type container to the next. For instance, you may have created an area type frame in the exact size you need, but as you type, the text “overflows,” which Illustrator alerts you about with a red box with a plus sign inside.

Clicking on this plus sign with the Direct Selection tool will change your cursor to the linked container symbol.

Click again on the artboard and Illustrator will create a new container of the exact same size as the first. Text will now continue to “flow” from the previous container into this new one.

If you would like to create a container of different proportions, though, then click and drag on the artboard until the container is the size you desire.

10. Scaling Area Type Numerically

Instead of resizing an area type bounding box by using the handles, you can scale it numerically, making for a more accurate size that can be repeated. Go to Type → Area Type Options, and enter the size of box you need.

Or you can go to Object → Transform → Scale to size a bounding box numerically. Keep in mind that these techniques will also change the scale of the text. To keep text the same while changing the box only, click on a side of the frame using the Direct Selection tool, and then scale the bounding box. The text should remain the same while the size of the bounding box changes.

Type Tool Shortcuts

Keyboard shortcuts will make your work in Adobe Illustrator go that much faster. Memorize each of the following to improve your workflow:

• Shift + Control/Command + O : Create outlines.
• Alt + Control/Command + I : Show or hide hidden characters.
• T : This way you can select the Type tool faster.
• Control/Command + T : Show or hide the Character panel.
• Shift + Control/Command + T : Show or hide the Tabs panel.
• Alt + Control/Command + T : Show or hide the Paragraph panel.
• Alt + Shift + Control/Command + T : Show or hide the Open Type panel.
• Shift : Hold down while the Type tool is selected to switch between horizontal and vertical text.
• Escape : Press while typing to escape from the type object. The Selection tool and type object will also be selected.

Keep in mind that these are only type tool shortcuts and commands. Print out a complete list of shortcuts from KeyXL to have on hand if needed.

Other Resources

You may be interested in the following articles and related resources:

• Illustrator’s Type Tool: A Comprehensive Introduction, Vector Tuts+
  Learn about Illustrator’s Type tool in this comprehensive introduction.
• Vertical Type Tools, Bloomsburg University, IT Department
  Another excellent article with basic tips on using Illustrator’s Type Tool.
• Using Adobe Illustrator CS4: Type, Adobe
  Look up specific help on type in Illustrator from Adobe itself.

(al) (ik) (vf)

© Tara Hornor for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: illustrator, typography

  

Getting t-shirts printed is an ideal way to promote your business, organization or event. They are a promotional item that people can actually use, and they have the added bonus of being an advertisement for you. In this post, Adobe Illustrator will be used to create a three-color screen print using a fictional company logo, and have it set up to allow a screen printer to easily print the color separations that create the separate screens for each color print.

Although some printers prefer to create their own separations, it’s always good to understand the process. Be sure to communicate with your printer as they will specify their requirements, and will often give you tips for avoiding potential issues in the process.

Printing Techniques

As the t-shirt is going to be printed in three colors, we have to create separate artwork for each layer of color. Each of these layers interact with each other to form a complete image.

Examples of Trap, Knockout and Overprint

There are three artwork techniques commonly used for this type of printing: Trap, Knockout and Overprint. The Trap technique is when the bottom color “bleeds” under the top color, ensuring no gaps are left from inaccurate printing of the second color (when the so-called “registration” between the colors is “off”).

Screen printing is not always an exact printing technique, especially when printing onto fabric surfaces; for this reason the Knockout technique is rarely used, as it relies on printing a color precisely in a gap left on the bottom color. The third technique, Overprint, is the easiest to achieve as the top color prints directly on top of the bottom color; often this produces a new color, as the top ink color is not always opaque.

Preparing Your Artwork File

1. Create Layers for Each Color

The most reliable way to produce artwork for screen printing is to manually prepare it in Adobe Illustrator. Each of the three colors is going to form a separate artwork in a separate layer, using elements from the main image for each color. Using Layers does not affect how your artwork is output by your screen printer; it just makes it easier for you to work on.

Opening the vector artwork in Illustrator presents the graphic in Layer 1. Select the drop-down menu in the Layers window and select Duplicate Layer twice, to produce three layers of the same graphic; name the three layers after their respective colors, as this will help prevent confusion later on. Ensure the order of the colors is correct: the bottom layer is White; the next color layer is Orange; and the top layer is the Dark Red, which will be printed last, on top of the other colors.

Layers being created and renamed

2. Create a Temporary Background Color Layer

At this stage — because the artwork is being prepared to be printed on a dark t-shirt — create a fourth layer for a temporary background color and name it Temporary Background. A rectangle is drawn the full size of the art board, and given a dark color; this layer will be removed later in the process. Drag the layer to the bottom of the layers, and Lock it. Each color of your artwork produces a separate screen, and the order in which the colors are printed is usually from the lightest to the darkest color.

A Temporary Background layer is created

3. Remove Excess Objects From the Layer

The first layer to be worked on, is the bottom White layer. Hide the Orange and Dark Red layers by clicking the Eye icon next to their layers, and make sure the White layer is selected in the Layers window by clicking on its name. As the artwork layer was duplicated in full, all the objects of the graphic are on this layer; some objects must be removed, leaving the shapes that form the white outline of the rocket, the text, and the orange fan shapes used in the background.

4. Outline All Strokes

The rocket outline is a solid shape so no further work is needed on the rocket, but the white outline of the text is a thick stroke applied to the text shapes; working with strokes can be unpredictable, so it’s best to create outlines from the stroke by selecting the text and choosing Object ? Path ? Outline Stroke. This ensures consistency if the artwork needs to be resized (Strokes can often be pushed out of proportion when resized with the Scale tool).

Outline Stroke on text objects

5. Create and Apply a Custom Spot Color

Select all the objects in this layer and apply a light color to each of them. Avoid using absolute white, as you won’t be able to see the objects when checking Separations later. Apply a color of 20% Yellow to the objects and then, in the Swatches window, select New Swatch from the drop-down menu. Name the swatch “White base” and choose Spot Color from the Color Type menu. Even though it’s set to 20% yellow, it will output as a solid color, titled “White base.”

Creating a new Spot Color Swatch

The swatch now will be in the Swatches window and there will be a dot in the corner to denote a Spot color. The Spot color should be applied to all the objects in the White layer.

Potential mis-registration of two colours, seen between orange and dark red

Select an Orange object and choose Object ? Path ? Offset Path. Offset the path by 1 mm to make the object larger in shape. Oftentimes printers specify how much Trap they require, similar to how they might specify Bleed. On this artwork, the white background outlines the color objects, but if you wanted the white to be printed directly behind the colors, without a white outline, you could offset the path of the White objects by a minus figure (for example -1mm).

Left: Before offsetting path by 1mm. Right: After offsetting path to create Trap

7. Deciding on a Spot Color

Once Trap is created for all the orange objects, select all the objects and create a Spot color from the Swatches menu. If you are specifying a Pantone color, name the Spot color with the Pantone Matching System (PMS) reference; otherwise, name it descriptively, in this case, Orange.

Bear in mind that it is often the case that printers have inks that they keep in stock and you could save some cost by using an indefinite “orange” rather than specifying a Pantone color, such as Pantone 179. Additional charges can be placed on inks that have to be bought or mixed for a specific project (especially with smaller print quantities). Talk to your printer and see what your options are, as they might supply you with ink color samples to choose from. Samples are definitely worth paying for; they give you a much better idea of color than swatches do.

Pantone Colors can be found under Window ? Swatch Libraries ? Color Books

8. Knocking Out for the Trap Below

Once the Orange Spot color is applied to the Orange layer, hide the Orange layer and show the top layer, the Dark Red layer. Again, remove unneeded objects such as the white background elements, but leave the Orange highlight objects.

Artwork with white base color removed

For each object with an Orange highlight, use the Pathfinder tools (Window ? Pathfinder) to Exclude the highlight color, effectively creating a void in the object shapes. This is Knockout; but as we created Trap on the Orange layer objects, we won’t get any registration issues. When using the Exclude tool, the object takes the color of the top object which is excluded. Change the color back to the original Dark Red using the Eyedropper tool on one of the other other objects.

The Exclude tool (circled in green) is excellent for removing shapes from within objects

If the artwork was not being split into layers, the Knockout and Trap could be created automatically using overprinted strokes. This does save time but allows less control on the final print and is more prone to errors (such as forgetting to add Trap to objects).

9. Trap is Not Always Necessary

There was no Trap created for the Dark Red text on the rocket, as it will be Overprinted on to the Orange. In situations where the printing area is small, it’s best to not create Trap as the area left open below the Overprinting color usually ends up being insignificant.

For smaller text and objects, the Trap is too small, so the object is Overprinted instead

Again, select all the Dark Red elements and create a new spot color. If you are using non-specific colors, always supply the printer with a printed proof to allow them to match the color as closely as possible. This printed proof often helps the printer identify issues with your artwork before they move onto the expensive stage of producing film for creating the screens.

10. Checking Your Separations

Once you have completed the last step, you are now ready to prepare your artwork to send to the screen printer. First, you have to set the Orange and Dark Red colors to overprint. Select Windows ? Separations Preview. From the window that opens, first check the Overprint Preview box and then hide the CMYK separations by clicking the eye icon beside CMYK. The temporary dark background should disappear.

Separations Preview

Check your separations by hiding each color, one at a time, starting with the Dark Red. You will notice that the Trap you created earlier is gone and the white background is only an outline. This happens because the Orange and Dark Red are not set to overprint the colors below them.

Separation of the three colors before Overprint is set

11. Setting Objects to Overprint

First, uncheck the Overprint Preview box in the Separations Preview window. Then, hide all the layers except the Orange layer (you can also delete the Temporary Background layer; it’s no longer needed). Select Window ? Attributes. With all the Orange objects selected, check the Overprint Fill box in the Attributes window. Do the same with the Dark Red layer, ensuring all the Dark Red objects are selected when you check the Overprint Fill box in the Attributes window.

Setting Overprint Fill on two colors

12. Recheck Your Separations

Go back to the Separations Preview window and check the Overprint Preview box. You should now see a color variation on the artwork, where you created Trap earlier. If you also look at the White layer, you’ll see that the whole shape is left intact, due to the Orange and Dark Red set to overprint.

Left: Trap can be seen by darkened area around Orange. Right: White base returns to a solid shape (shown with temporary background, for illustrative purposes)

13. Ensure There are No CMYK Objects in the Artwork

One thing you have to ensure before saving your file to send to the screen printer, is that there are no CMYK elements in your document. This can be checked easily by choosing File ? Print. Select your printer as Adobe Postscript File and click the Output option on the left side. Select Mode as Separations (Host-Based). On the list of colors below, if the printer icons shows next to any of the process colors (Process Cyan, Process Magenta, Process Yellow or Process Black), you have elements in your artwork which are set in CMYK colors.

Checking for CMYK objects using the Print dialog box

14. Finish Up and Send It Off

Once you are sure your Spot colors will separate as you expect them to, save your file as PDF and send it along with either a JPEG or printed proof. Sometimes printers request the original Illustrator file, in case they need to make alterations themselves. A good printer will check your files, and let you know if there’s an issue before the process of creating screens begins.

Final Note

There are many alternative techniques to prepare your artwork for screenprinting; today’s post concentrates on more manual techniques, for demonstration purposes and also for reliability. Your artwork will probably be output on a different hardware and software configuration to yours; the more complex your artwork, the greater the possibility of errors during output.

There are two areas you must pay close attention to: make sure you are only using spot colors, and ensure all pieces of your artwork get output by the screen printer as you expect it to.

Often, a stray object set to a CMYK value is left somewhere on your artwork, which causes one of two issues: either the screen printer outputs an extra color(s) to film (with which the screens are created), possibly incurring extra cost; or the screen printer only outputs the specified Spot colors, and part of your artwork goes missing on the final print. Use the Separations Preview window to check the different layers of your artwork, making sure colors overprint where they should and that all pieces of your artwork are present and correct.

It’s important to strike up a good relationship with your screen printer, whether they are a local company or one you found on the Web. They can give you vital advice, and could potentially spot mistakes before the screens are made or any t-shirts are printed. Also, if they’re a local business, try to get a tour of their print shop; screen printing is a great process to observe, and being familiar with the process is a great help when making design and preparation decisions.

Further Resources

• Using Separations Preview (Adobe tutorial, with an alternative trapping method toward the end)
• How To Create Your Own Color Separations in Adobe Illustrator
• Gig Posters Process (t-shirt printing process photos)
• Screen Printing Overview (YouTube video)
• Trapping Tips For Improving the Quality of Print Jobs

(ik) (rs)

© John Rainsford for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: illustrator, screen printing

  

As a Web designer you’re undoubtedly familiar with CSS, the style sheet language used to format markup on Web pages. CSS itself is extremely simple, consisting of rule sets and declaration blocks—what to style, how to style it—and it does pretty much everything you want, right? Well, not quite.

You see, while the simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY (don’t repeat yourself) for less code and easier maintenance.

Enter the CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a new extended language, then compiling the code to vanilla CSS so that it can be read by Web browsers. Several CSS preprocessors are available today, most notably Sass and LESS.

What’s the difference? Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to your current CSS code. This means you can use it right away with your existing code. Recently, Sass also introduced a CSS-like syntax called SCSS (Sassy CSS) to make migrating easier.

If It Ain’t Broke…?

By now you might be thinking, “So what? Why should I care about these things, and how exactly will they make my life as a Web designer easier?” I’ll get to that in a moment, and I promise it will be worth your time. First, let me clarify the focus of this article.

In this tutorial, I’ll be using LESS to demonstrate how CSS preprocessing can help you code CSS faster. But that doesn’t mean you must use LESS. It’s my tool of choice, but you may find that Sass fits your workflow better, so I suggest giving them both a shot. I’ll talk a bit more about their differences at the end of the article.

I’ll start off by explaining how LESS works and how to install it. After, I’ll list a set of problems that large CSS files pose, one by one, and exactly how you can use LESS to solve them.

Let’s go!

Installing It

There are two parts to any CSS preprocessor: the language and the compiler. The language itself is what you’ll be writing. LESS looks just like CSS, except for a bunch of extra features. The compiler is what turns that LESS code into standard CSS that a Web browser can read and process.

Many different compilers are actually available for LESS, each programmed in a different language. There’s a Ruby Gem, a PHP version, a .NET version, an OS X app and one written in JavaScript. Some of these are platform-specific, like the OS X app. For this tutorial, I recommend the JavaScript version (less.js) because it’s the easiest to get started with.

Using the JavaScript compiler is extremely easy. Simply include the script in your HTML code, and then it will process LESS live as the page loads. We can then include our LESS file just as we would a standard style sheet. Here’s the code to put between the <head> tags of your mark-up:

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

Note that I’m referencing the less.js script directly from the Google Code server. With this method, you don’t even have to download the script to use it. The style sheet link goes above the script to ensure it gets loaded and is ready for the preprocessor. Also, make sure that the href value points to the location of your .less file.

That’s it. We can now begin writing LESS code in our .less file. Let’s go ahead and see how LESS makes working with CSS easier.

1. Cleaner Structure With Nesting

In CSS, we write out every rule set separately, which often leads to long selectors that repeat the same stuff over and over. Here’s a typical example:

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

LESS allows us to nest rule sets inside other rule sets, as a way to show hierarchy. Let’s rewrite the above example with nesting:

# header {
  #nav {
    ul {
      li {
        a {}
      }
    }
  }
}

I’ve omitted the content from the selectors for simplicity, but you can see how the structure of the code quickly changes. Now you don’t have to repeat selectors over and over again; simply nest the relevant rule set inside another to indicate the hierarchy. It’s also a great way to keep code organized because it groups related items together visually.

Also, if you want to give pseudo-classes this nesting structure, you can do so with the & symbol. Pseudo-classes are things such as :hover, :active and :visited. Your code would look as follows:

a {
  &:hover {}
  &:active {}
  &:visited {}
}

2. Variables For Faster Maintenance

We usually apply a palette of colors across an entire website. Any given color could be used for multiple items and so would be repeated throughout the CSS code. To change the color, you’d have to do a “Find and replace.”

But that’s not quite it. You could also isolate those values into separate rule sets; but with this method, the rule sets would keep growing as you add more colors across the website, leading to bloated selectors. Here’s what I’m talking about:

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: red; }

To make a simple color change, we’re faced with long selectors, all dedicated to that one color. It’s not pretty. LESS allows us to specify variables in one place—such as for brand colors, border lengths, side margins and so on—and then reuse the variables elsewhere in the style sheet. The value of the variable remains stored in one place, though, so making a change is as simple as changing that one line. Variables start with an @ and are written like this:

@brand-color: #4455EE;

#header { background-color: @brand-color; }
#footer { color: @brand-color; }
h3 { color: @brand-color; }

In LESS, variables also have scope, so you could use variables with the same name in various places; when they’re called, the compiler would check for the variable locally first (i.e. is there anything with that name where the declaration is currently nested?), and then move up the hierarchy until it finds it. For example, the following code:

@great-color: #4455EE;

#header {
  @great-color: #EE3322;
  color: @great-color;
}

…compiles to:

#header { color: #EE3322; }

3. Reusing Whole Classes

Variables are great, but we often reuse more than single values. A good example is code that’s different for every browser, like the CSS3 property border-radius. We have to write at least three declarations just to specify it:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

If you use a lot of CSS3, then this sort of repeating code adds up quickly. LESS solves this by allowing us to reuse whole classes simply by referencing them in our rule sets. For example, let’s create a new class for the above border-radius and reuse it in another rule set:

.rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#login-box {
  .rounded-corners;
}

Now #login-box will inherit the properties of the rounded-corners class. But what if we want more control over the size of the corners? No problem. We can pass along variables to the “mixin” (these reusable classes are called mixins) to get a more specific outcome. First, we rewrite the original mixin to add the variable we want to manipulate:

.rounded-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Now we’ve replaced the values for a variable, and we’ve specified the default value inside the parentheses. To give mixins multiple values, you’ll just need to separate them with a comma. Now, if we want our #login-box to have a border radius of three pixels instead of five, we do this:

#login-box {
  .rounded-corners(3px);
}

4. Operations

Variables let us specify things such as common palettes of colors, but what about relative design elements, like text that’s just a bit lighter than the background, or an inner border that’s one pixel thicker than the outer border?

Rather than add more variables, we can perform operations on existing values with LESS. For example, we can make colors lighter or darker or add values to borders and margins. And when we change the value that these operations depend on, they update accordingly. Take the following:

@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

This gives the #header element a top margin of 35 pixels. You can, of course, also multiply, divide and subtract, and perform operations on colors like #888 / 4 and #EEE + #111.

5. Namespaces and Accessors

What if you want to group variables or mixins into separate bundles? You can do this by nesting them inside a rule set with an id, like #defaults. Mixins can also be grouped in this way:

#defaults {
  @heading-color: #EE3322;
  .bordered { border: solid 1px #EEE; }
}

Then, to call a variable and a mixin from that particular group, we do this:

h1 {
  color: #defaults[@heading-color];
  #defaults > .bordered;
}

We can even access values of other properties in a given rule set directly, even if they’re not variables. So, to give the sidebar heading the same color as your main h1 heading, you’d write:

h1 { color: red; }

.sidebar_heading { color: h1['color']; }

There’s not much difference between variables and accessors, so use whichever you prefer. Accessors probably make more sense if you will be using the value only once. Variable names can add semantic meaning to the style sheet, so they make more sense when you look at them at a later date.
A couple more things to mention: You can use two slashes, //, for single-line comments. And you can import other LESS files, just as in CSS, with @import:

@import 'typography';
@import 'layout';

To Conclude

I hope by now you’ve got a pretty good idea why CSS preprocessors exist, and how they can make your work easier. The JavaScript version of the LESS compiler, less.js, is of course just one way to use LESS. It’s probably the easiest to get started with, but it also has some downsides, the biggest one being that the compiling takes place live. This isn’t a problem on modern browsers with fast JavaScript engines, but it might work slower on older browsers. Note that less.js actually caches the CSS once it’s processed, so the CSS isn’t regenerated for each user.

To use the generated CSS instead of LESS in your markup, you can compile your files using the various other compilers. If you’re on OS X, I suggest trying out the LESS App, a desktop app that watches your LESS files for changes as you work and automatically compiles them into CSS files when you update them. The Ruby Gem has the same watcher functionality but is trickier to install if you’re not familiar with Ruby (see the official website for details on that). There are also PHP and .NET versions.

Finally, LESS isn’t your only option for a CSS preprocessor. The other popular choice is Sass, but there are still more options to check out, such as xCSS. The advantage of LESS is that it uses existing CSS syntax, so getting started is just a matter of renaming your .css file to .less. This might be a disadvantage if you dislike the CSS syntax and curly braces, in which case Sass would probably be a better choice. There is also the Compass framework available for Sass, which is worth checking out if you go with Sass.

(al) (sp)

© Dmitry Fadeyev for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, less

  

According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS.

Thankfully, Safari on iPhone OS is a really great browser. Just like Safari 4 for the desktop, it has great CSS3 and HTML5 support. It also has some slick interface elements right out of the box, which sometimes vary between the iPhone and iPad. Lastly, because the iPhone OS has been around for quite some time now, a lot of resources are available.

I know that most discussion about the iPhone OS platform centers on native applications. But you can still create powerful, native-looking applications using HTML, JavaScript and CSS. This article focuses on three phases of building and optimizing your website: design, coding and testing.

Before we get into the three phases, let’s look at some of the advantages and disadvantages of building a Web app rather than a native app.

Advantages of building a Web app instead of a native app:

1. No Apple approval process or red tape, which is especially important given the terms of service dispute going on right now.
2. Optimizing your Web app for other popular platforms like Android and Blackberry with the same code is much easier.
3. You don’t have to learn Objective-C.
4. If you’re charging users, you don’t have to share revenue with Apple.
5. You get 100% control over the means of payment, promotion and distribution to users… which could also be a negative, depending on how you look at it.

Disadvantages of building a Web app instead of a native app:

1. No presence in the App Store.
2. Installing the app on a device is a little trickier.
3. No access to some of the features that are native to the iPhone OS, such as push notification and GUI controls.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Design

Designing a Web app for this platform is much like designing a native app, so you’ll have access to some really great tools. Whether your wireframing tool of choice is pencil and paper or desktop software, you’re covered.

Inspiration

Not many people know that Apple has a “Web apps” section on its website, which is dedicated to showcasing optimized websites.

Featured Web app on the Apple website

There are also some galleries elsewhere that showcase the finest in mobile Web design:

• Apple Web Apps Listing
• Mobile Awesomeness Design Gallery
• CSS iPhone Design Gallery
• Well Placed Pixels
• Apple App Store (Even though these are native apps, you can find great visual inspiration here.)

Paper

Paper prototyping has long been my tool of choice for wireframing new ideas or websites. What I really like about the tools below is that they provide perspective on the size and dimensional constraints that you’re dealing with. To successfully optimize a Web app for the iPhone OS, you have to cut things out. I suggest keeping the design minimal by wireframing with a sharpie and one of the tools listed below.

Notepod is great for sketching out rough ideas for the iPhone and iPad.

• Notepod: iPad and iPhone sketchbooks
• App Sketchbook
• PixelPads
• UI Stencils sticky pads
• Apress iPhone Application Sketch Book
• Printable iPhone Wireframe Template (free)

Digital

Once you know exactly how things will lay out in your design, we can move to the desktop and get specific. I really like wireframing with OmniGraffle, but sometimes diving straight into Photoshop makes sense. Either way, these tools are a huge help in making it happen.

iPad GUI preview from Teehan + Lax.

• iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)
• Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox
• PSD Vector Kit (Photoshop), from Smashing Magazine
• iPad and iPhone stencils; see more at Graffletopia (OmniGraffle)
• iPhone and iPad Development GUI Kits, Stencils and Icons

Hungry for more? This article has a good rundown of additional design tools.

Coding

When you start coding for Safari on the iPhone OS, understanding how the browser works is important. Also, there are subtle differences in the iPhone and iPad’s browsers, such as how form-select boxes work. Most importantly, Safari has great CSS3 and HTML5 support, so you can use modern code without having to worry about cross-browser compatibility.

Education

Apple actually does a really good job of documenting Safari for the iPhone OS. The only shortcomings in my opinion are a lack of help with browser detection and window orientation. Read each of the articles below for everything you need to know about coding for this browser.

iPhone Human Interface Guidelines for Web Applications
This is a good overall summary of how Safari for the iPhone OS works. It’s certainly worth scanning through, because it has some good advice, although no specific coding examples.

iPad Human Interface Guidelines
This document does a good job of distinguishing iPhone elements and iPad elements. This is also worth scanning through, because it has some great advice on designing for the iPad.

Safari Web Content Guide
This document gets specific about the viewport, webclip icons, unique meta tags and event handling, among many other topics. Code examples are provided. I recommend reading it cover to cover before getting started.

Preparing Your Web Content for the iPad
This document provides tips on testing your website on the iPad, but its discussion on browser detection isn’t as detailed as I would like.

Browser Detection
David Walsh provides good examples of proper browser detection for the iPad and for the iPhone on his blog. Options for PHP and Javascript are included.

Detecting iPhone Window Orientation
This iPhone development tutorial from Nettuts provides a good example of how to vary style sheets according to the iPhone’s orientation.

Detecting iPad Window Orientation
Detecting iPad’s window orientation is much easier. Here’s what the code looks like (no JavaScript required):

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

jQTouch Mobile Framework

While the iPhone has a few mobile development frameworks, jQTouch is far and away the best. jQTouch gives you all of the tools to make your mobile Web app look and feel like a native one. Visit the website, and go to the demo website from your iPhone to get a feel for it.

My only complaint when building my first website with jQTouch was a lack of documentation and tutorials. I had to figure it out by playing with the demo website’s code. Here are some jQTouch articles that proved helpful in coding my first website:

• jQTouch Wiki on Google Code
• Building iPhone Apps with HTML, CSS and JavaScript, Chapter 4: Animation
• PDF slides about getting started with jQTouch, by Philipp Bosch

Testing

A crucial and somewhat tricky part of building a website or Web app for the iPhone OS is testing. It’s a little more complicated than testing in a web browser, but familiarizing yourself with a couple of tools should make the process simple.

Liveview

Liveview is a really clever testing tool for when your app is in the design or initial coding phase. It allows you to broadcast an image from your desktop onto your phone so that you can see what it looks like. This is useful for getting text size and the visual specifics just right, because sometimes visualizing from Photoshop is hard.

Using the iPhone Simulator

In my opinion, no good iPhone or iPad emulators are available. The ones that are available are a waste of time. Much better is to download the latest version of the SDK and use Apple’s official iPhone OS simulator, which of course supports the iPad as well.

Setting up the SDK and a local testing environment takes a few minutes but is well worth the effort, rather than depending on unofficial and often inaccurate emulators. I’ve written a step-by-step tutorial about setting up a local testing environment that’s worth a read. One great thing about local testing is that it’s faster and does not require an Internet connection. I highly recommend going this route until you are ready to launch.

PhoneGap: Best Of Both Worlds?

PhoneGap is a game-changer for Web developers. If you would rather create your app in HTML, CSS and JavaScript but want it to run natively and have it be available in the App Store, then PhoneGap is the solution. It’s an open-source development tool that not only compiles your code for native use on the iPhone OS but also works for Android, Palm, Symbian, Windows Mobile and Blackberry devices.

PhoneGap also steers clear of the recently controversial 3.3.1 clause of Apple’s terms of service. In other words, apps compiled with PhoneGap will still be approved. Check out the list of apps that are built with PhoneGap to learn more.

Feeling Overwhelmed?

If you are, then some good hosted services will make it easier to optimize your website for multiple platforms without having to start from scratch. There are various levels of flexibility available, but all the services use a WYSIWYG-like editor to help you create mobile websites on the fly. Depending on your Web app and client, one of the following may be a good fit:

Mobify is a great alternative if you don’t care to build from scratch.

• Mobify (which powers Smashing Magazine’s mobile website)
• Wapple
• Mofuse
• Mobi10

Conclusion

It’s a great day to be a Web developer, because non-desktop platforms like the iPhone OS open up greater possibilities for us to express our creativity and entrepreneurial savvy, while allowing us to adhere to modern Web standards. All of the tools you need to create great a Web experience on the platform that’s currently dominating the mobile space are out there. It’s up to you to make the most of them!

(al)

© Nick Francis for Smashing Magazine, 2010. | Permalink | 70 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ipad, iphone, mobile

  

As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Where do I start?

One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.

Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.

Example #1: CSS3 Transitions

A safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.

Start with your link CSS, including the hover state:

a { color: #e83119; }
a:hover { color:#0a99ae; }

Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.

a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}

You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:

a { -webkit-transition: color .4s ease-out; }

View the live example here

The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.

To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:

border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }

To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:

border-nav a { -webkit-transition: border .3s ease-out; }

View the live example here

Examples

This is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:

Team Excellence
The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.

Ackernaut
Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.

SimpleBits
The SimpleBits main navigation transitions over .2 seconds with linear timing.

DesignSwap
On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.

Jack Osborne
Jack Osborne transitions all of the blue links as well as the post title link on his home page.

Eric E. Anderson
Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.

Example #2: Background Clip

When connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:

<div class="bg-clip">
<h3>kablamo!</h3>
</div>

Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.

.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View the live example here

This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);

Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.

View the live example here

Examples

This is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:

Trent Walton
An experiment of my own, combining bg-clip and @font-face to recreate a recent design.

Neography
An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.

Everyday Works
One of the earliest innovative implementations of CSS text rotation I’ve seen.

Panic Blog
The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.

Sam Brown
Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.

Example #3: CSS Transforms, Box Shadow and RGBa

What used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.

Here’s the HTML:

<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>

Let’s set up the CSS for the RGBA Shadow:

.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}

Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.

RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.

Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:

.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}

.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}

.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}

.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}

View the live example here

Examples

Here are a few additional sites with these properties implemented right now:

Butter Label
This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.

Hope 140
Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.

For A Beautiful Web
For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.

Simon Collison
Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.

Example #4: CSS3 Animations

If you really want to push the envelope and truly experiment with the latest CSS3 properties, you’ve got to try creating a CSS3 keyframe animation. As a simple introduction, let’s animate a circle .png image to track the outer edges of a rectangle. To begin, let’s wrap circle.png in a div class:

<div class="circle_motion">
<img src="/img/circle.png" alt="circle"/>
</div>

The first step in the CSS will be to set the properties for .circle_motion, including giving it an animation name:

.circle_motion {
-webkit-animation-name: track;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
}

Now, all that remains is to declare properties for each percentage-based keyframe. To keep things simple here, I’ve just broken down the 8 second animation into 4 quarters:

@-webkit-keyframes track {
0% {
margin-top:0px;
}
25% {
margin-top:150px;
}
50% {
margin-top:150px;
margin-left: 300px;
}
75% {
margin-top:0px;
margin-left: 300px;
}
100% {
margin-left:0px;
}
}

View the live example here

Examples

A few examples of CSS3 animations online now:

Hope 140
Hope 140 subtly animates their yellow “Retweet to Donate $10” button’s box shadow.

Hardboiled Web Design
Andy Clarke puts iteration count, timing function, duration and delay properties to good use when animating a detective shadow across the background of Hardboiled Web Design.

Optimum7
Anthony Calzadilla has recreated the Spider Man opening credits using CSS3 with JQuery and HTML5. You can also learn more about the process in his article “Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!”.

The Many Faces Of…
The Many Faces Of… animates the background position of a div to create an effect where characters creep up from the bottom of the page.

Trent Walton
I recently wrote a post about CSS3 usage, and animated a blue to green to yellow background image for the masthead.

OK, Dots connected! Now what?

Yes, all of this CSS3 stuff is insanely exciting. If you’re like me, you’ll want to start finding places to use it in the real world immediately. With each new experimental usage come even more concerns about implementation. Here are a few of my ever-evolving opinions about implementing these properties online for your consideration.

• CSS3 enhancements will never take the place of solid user-experience design.
• Motion and animation demands attention. Think about a friend waving to get your attention from across a crowded room or a flashing traffic light. Heavy-handed or even moderate uses of animation can significantly degrade user experience. If you are planning on implementing these techniques on a site with any sort of A to B conversion goals, be sure to consider the psychology of motion.
• Don’t make people wait on animations. Especially when it comes to hover links, be sure there is an immediate state-change cue.
• Many of these effects can be used in a bonus or easter-egg type of application. Find places to go the extra mile.

This is a group effort. Don’t be afraid of failure, enlist the help of other developers, join the online discussions, and above all, have fun!

Further Reading

• Using CSS3 Transitions, Transforms and Animation
  A very extensive and detailed overview of CSS3 techniques for transitions, transforms and animations, with numerous examples.
• Sexy Interactions with CSS Transitions
  many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world. This article explains how to create nice CSS transitions with CSS3.
• Examples of CSS3 in the Wild
  Showcase of sites using CSS3 properties.
• CSS3 Transitions – Are We There Yet?
• Cross-Browser Animated CSS Transforms — Even in IE.

Related Articles

You may be interested in the following related posts:

• CSS3 Solutions for Internet Explorer
• The Future Of CSS Typography
• Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation

© Trent Walton for Smashing Magazine, 2010. | Permalink | 71 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3, HTML