New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center Design Articles

Your source for news, insights, and inspiration at lynda.com. Come learn with us.

By Colleen Wheeler | Tuesday, December 18, 2012

Deke's Techniques: Hobbit-inspired text

In this week’s free Deke’s Techniques video—inspired by the movie poster for The Hobbit: The Unexpected Journey—Deke McClelland starts with the unsuspecting, decidedly unheroic text and takes it on a Middle Earth–inspired adventure into the lands of Adobe Illustrator and Photoshop.

The result is that this ordinary-ish text in the before image below ends up looking as though it’s been chiseled and chewed all the way there and back again, with all the seasoned character one would expect, and as you can see in the after image:

Before and after of the final Hobbit inspired text effect.

Deke starts his project in Illustrator, where it’s easier to manipulate the shapes and sizes of the letterforms. The first step is to turn the text into outlines with editable paths that can be manipulated by Deke’s wizardry. He stretches the T, shrinks and adds an embellishment to the E, and adjusts the Q’s swash:

Using Adobe Illustrator to manipulate the shapes and sizes of the letter forms.

After swapping the stroke and fill colors and reducing the stroke width, Deke roughs up the edges with the aptly named Roughen effect. Choosing Effect > Distort and Transform > Roughen, he sets the Size set to an Absolute 1.2 points and the Detail (i.e., the number of roughening wiggles) to 17 per inch:

Using the Roughen effect in Illustrator.

Having suitably stylized the text shapes, Deke copies the outlines and pastes them into Photoshop. Note that when you bring this path in from Illustrator and use the Paste command, Photoshop gives you four choices for the type of Paste you want to perform. For this project, picking the Shape Layer option means you will retain the path outlines.

Bringing the text shapes into Photoshop.

If the task of Illustrator is to help create the shapes, then the destiny of Photoshop is to provide the texture. After changing the fill to white to improve visibility, Deke applies a layer effect, Gradient Overlay, using a couple of orangish shades for the gradient:

Using Photoshop Layer Styles to add texture.

To give the letterforms some volume, the next step is to add a Bevel & Emboss layer effect using the Chisel Soft technique option and appropriately adjusting the blend modes of the highlights and shadows (to Linear Burn and Linear Dodge, respectively.)

Using Layer Styles and the Chisel Soft technique.

The chiseling effect is a good start, but to really sell effect, Deke adds a texture layer (created from a photograph) and clips it inside the letters. Then he duplicates the texture, flips it around, and creates another clipping mask. After supplying a Color Overlay effect and dose of the Noise filter, along with some blend mode tweaking, the result is letters that look like they’ve survived a battle or two:

Adding a texture layer and a color overlay.

To really distress the text, Deke uses the Pen tool to draw some paths that look like proper battle scarred, dwarf-bitten divots, then uses the Subtract Front Shape command in the options bar to remove those areas from the shape layer.

Using the Subtract Front Shape command.

To keep the larger holes from boring all the way through the letters, Deke fills in the backs of the letters with a perfectly registered layer of colored texture, masked to take care of the letters’ more violent wounds:

Making the final touches to the text including colored texture and masking.

Finally, Deke adds in some supplementary, self-deprecating text, and voila:

The final poster in the style of The Hobbit.

The background of this image, by the way, is not Middle Earth or even the stand-in for Middle Earth known as New Zealand. It’s actually the Cliffs of Moher on the west coast of Ireland (which stood in for the Cliffs of Insanity in the movie The Princess Bride, so it’s still a motion picture worthy locale).

Deke has a lynda.com member-exclusive video called Enhancing a landscape photo in Camera Raw 7 that demonstrates how he enhanced a regular vacation photo to make this cinematic background.

Deke will be back in the new year with another Deke’s Techniques episode.

Suggested courses to watch next: • The entire Deke’s Techniques collection • Photoshop CS6 One-on-One: Intermediate • Illustrator CS6 One-on-One: Intermediate

By Mike Rankin | Wednesday, December 12, 2012

InDesign FX: Showing graphics as tiles

In this week’s InDesign FX video, I show how to create the effect of an image printed on a set of ceramic tiles.

Create the effect of an image printed on a set of ceramic tiles.

The key element of this effect is a set of frames that are identically sized and equally spaced.

A set of frames that are equally sized and spaced.

There are a few different ways you could go about creating these frames. You could use the Step and Repeat feature. You could hold Option/Alt and drag an existing frame. You could even use a script that comes with Adobe InDesign called Make Grid. But by far the quickest and easiest way to make this set of frames is to use the Gridify feature. You simply start drawing a rectangle by clicking and dragging with the Rectangle tool, and before you release your mouse button, tap your keyboard arrow keys to split the rectangle into multiple copies. Tapping the up/down arrow keys adds or removes rows of frames.

Use the Gridify feature to create frames.

Tapping the right/left arrow keys adds or removes columns of frames.

Tap arrows right or left to add columns of frames.

You can adjust the spacing between the frames by holding the Command/Ctrl key while tapping your arrow keys. You can also hold Shift while you release your mouse button to create a set of perfect squares. If that all sounds like a lot of complicated keyboarding, I suggest you just try it out. It’s actually quite intuitive.

Of course, the frames are just the start of this effect. After you have created them, you then need to make them act as a single object before you can place a photo into them. This is a perfect use for the Compound Path feature. Then you’re ready to place a photo into the compound path so a small portion of the image appears in each tile.

Use the Compound Path feature and place a photo into the compound path.

Finally, a few finishing touches are needed to create the look of ceramic tile. First, I like to round the corners a bit, using the Corner Options in the Control panel. Then I add some transparency effects like Bevel and Emboss and Drop Shadow to finish the look of the tile.

Create the look of ceramic tile.

If you want to take the effect even further, you can create a texture that looks like grout holding the tiles in place. For that, I use a frame filled with gray, enhanced with a large Inner Glow. The key for creating the texture is to add a lot of noise to the Inner Glow.

Adding the appearance of grout to the tiles.

I also have a member-exclusive movie in the lynda.com library this week called Simulating chalk. In it, I show how to make live text or any object you create in InDesign look like it was written on a chalkboard.

Chalkboard effect

See you here again in two weeks with another InDesign effect!

Interested in more? • The entire InDesign FX biweekly series • Courses by Mike Rankin on lynda.com • All lynda.com InDesign courses

Suggested courses to watch next:InDesign Secrets weekly seriesInDesign CS6 Essential Training • InDesign CS6 New FeaturesDeke’s Techniques

By James Fritz | Tuesday, December 11, 2012

New Adobe Muse features for Q4 2012

Right on schedule Adobe has released another update to Adobe Muse and this time the focus is on creating mobile friendly sites. While the last update had bits and pieces for a variety of users, this time the update is mainly focused on adding the ability to create tablet and smartphone optimized websites from Adobe Muse. We have updated Muse Essential Training again to help you stay on top of the latest features and enhancements that have been added. For a more detailed look at what has been added, please read the following list of new features, changes, fixes.

Mobile Friendly Features

Mobile friendly features

• Swipe within widgets: This provides gesture support within widgets; that is, swipe to move through a slideshow when Horizontal transition is selected.

• Menus: This includes menu and submenu selection via touch (bug fixes)

• Touch Support: Widgets and links work on tablet and phone devices; tapping on the link shows the Mousedown state. On Android devices, it shows the Mousedown state while your finger is on the item, and shows rollover when your finger leaves it. iOS devices show the rollover once your finger has stopped touching it, which is native behavior.

• Hyperlinks: Automatic redirects to device-specific layouts. When you browse a Muse site on a smartphone or tablet, the code generated by Muse will automatically load the appropriate layout for the device. You can also explicitly link to a page designed for a different device (i.e., a link for “Show Mobile Site”).

• Pinning Tablet/Smartphone Layouts: Due to lack of support on some tablet and smartphone browsers, pinning is disabled in Muse for tablet and smartphone layouts.

• Sticky Footer option: When selected this option maintains the minimum height for the page as the browser window height. There the page footer “sticks” to the bottom of the page until/unless the page is taller than the browser window. It is available in a separate Site Plan and in turn unique layouts for Master and Page Properties dialogs. Default behavior is off for existing .muse files from prior Muse versions and on for all new sites created in Muse.

• Site Plan: Now includes the ability to create a separate Site Plan and in turn a unique layout for Desktop, Tablet, and Phone layouts. There may or may not be a one-to-one relationship for pages between these layouts.

• Add Layout: This option offers support for copying Site Plan and Master/Page backgrounds when creating second and third site layouts for a tablet and/or smartphone.

• Viewport Scaling: Sites generated from Muse will rely on Viewport Scaling to ensure that a webpage will “fill” the width of the current screen of tablet or smartphone devices, both in landscape and portrait orientation.

• Device Preview: Muse Preview now has the ability to reflect the dimensions of a target device (smartphone or tablet). Multiple device types are included in a Preview Device dropdown. Note that Preview displays the height and width of the device, but does not attempt to simulate device-specific features or nuances for the browser on a given device.

Forms

CAPTCHA verification

•  CAPTCHA — The Forms widget now includes a CAPTCHA field option to prevent automated form submissions (spam). Form widgets in general and the CAPTCHA option require server-side support and thus require hosting on Adobe Business Catalyst.

Hyperlink UI

Hyperlink UI

• Search/filter: Hyperlink dropdown menu (consistent with Font dropdown menu) allows search and partial filtering.

• Device specific: Hyperlinks dropdown has been revised to differentiate between pages in Desktop, Tablet, or Phone layouts.

• Link support for mobile: Phone numbers (e.g., tel:2065551212) and email addresses (e.g., mailto:dani@adobe.com) result in touch-enabled links to a smartphone dialer or mail client.

Go To Page

Go To Page

•  Go to Page (Command + J): Quickly go to any page on your Adobe Muse site. Press Command+J, then type in the page name you want to go to.

Updates to Muse Essential Training:

Introduction

• 00-04 What is New in the December 2012 Update

Chapter 9

• 09-01 Creating a hyperlink (update)

Chapter 11

• 11-09 Exploring the Muse Widget Gallery (new)

Chapter 12

• 12-04 Working with Twitter (update)

Chapter 14

• 14-01 Creating a Mobile site (new) • 14-02 Adding a tablet site (new) • 14-03 Adding a mobile phone site (new) • 14-04 Previewing mobile sites (new) • 14-05 Linking between alternate layouts (new)

Interested in more?

• View the entire Adobe Muse Essential Training course on lynda.com • Courses by James Fritz on lynda.com • All Adobe Muse courses on lynda.com

Suggested courses to watch next:

Photoshop for Web Design• Designing a Porfolio Website with Muse• Fireworks CS6 Essential Training• Dreamweaver CS6 New Features

By Chris Converse | Tuesday, December 11, 2012

Converting Photoshop designs to HTML

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next: • More courses by Chris ConverseCSS: Core ConceptsCSS: Page Layouts

By David Blatner | Thursday, December 06, 2012

InDesign Secrets: Using the Gravity setting to simulate perspective

In this week’s free InDesign Secrets episode, David Blatner reveals how to use the Gravity setting for Type on a Path in order to simulate perspective. The key is to create a handle-like arm of your path that you can use to manipulate the center of the path, because it’s the center that determines the faux perspective of the type.

Using the Gravity setting for Type on a Path

Moving the end point of the angled line shifts the perspective of the type. Given that Adobe InDesign doesn’t have a true perspective ability like Illustrator, this is a pretty cool workaround if you need something quickly and InDesign native.

For members of lynda.com, David’s partner in InDesign Secrecy has an exclusive video this week called Fixing the overflow text problem in EPUB.

David and Anne-Marie will be back in two weeks with more InDesign Secrets.

Interested in more? • The entire InDesign Secrets biweekly series • Courses by David Blatner and Anne-Marie Concepción on lynda.com • All lynda.com InDesign courses

Suggested courses to watch next: • InDesign CS6 New FeaturesInDesign CS6 Essential TrainingInDesign FX weekly series

By Colleen Wheeler | Tuesday, December 04, 2012

Deke's Techniques: Making a glowing panic button in Photoshop

In this week’s free Deke’s Techniques, Deke McClelland takes the beautiful glowing jewel he created in last week’s technique, and turns it into a beautiful glowing panic button. Because this time of year, if you’re going to freak out, you want it to be pretty and decorative.

Deke begins the project where we left off last week, with the glowing cabochon he created out of pure Photoshop pixels. Since few people wear panic buttons around their necks (although that would be handy), the first step is to turn off the gold necklace layer. The result is that the glimmering jewel becomes a glowing button.

From glowing jewel to panic button

Next, Deke selects the original ellipse that represents the amber part of the button and gives it a white-to-transparent gradient fill.

Use a gradient fill

Using the Transform command, he moves the new gradient-filled elipse up to create a highlight on the top side of the button, which starts to distinguish it from its jewel predecessor.

Transform the gradient

Deke blends in the highlight by increasing the ellipse’s Feather value to 5 pixels and reducing the Opacity of the adjustment layer to 80 percent.

Feather the selection

The text begins life as a simple text layer, to which Deke first applies a Radial Blur so that the edges of the outer letters start to distort.

Add a radial blur

Then, Deke increases the effect by adjusting the black and white points of the Underlying Layer style. The result is a full-fledged Panic button.

Adjusting the black and white points

But really, is that what we want to think about this time of year? Panicking? The beauty of this effect is that everything is editable, including the text. So a simple change of letters, hue adjustment, and layer style fine-tuning gives us a button that immediately makes any day a holiday. Now that’s a cure for the holiday panic!

Because the technique is non-destructive, changes are easy to make.

Deke will be back next week with another free technique.

Interested in more?

• The entire Deke’s Techniques weekly series on lynda.com • Courses by Deke McClelland on lynda.com • All Photoshop courses on lynda.com

Suggested courses to watch next:

• Photoshop CS6 One-on-One: Fundamentals• Photoshop CS6 One-on-One: IntermediatePhotoshop CS6 One-on-One: Advanced

By Mike Rankin | Thursday, November 29, 2012

InDesign FX: Making Translucent Objects

In this week’s InDesign FX video, I show how to use the Bevel and Emboss feature in combination with the Hard Light blending mode to simulate translucent objects like soap bubbles.

Creating translucent objects in InDesign

As its name suggests, the Hard Light blending mode is meant to create an effect of a strong light being shined on an object. When Hard Light is applied to colors lighter than 50% gray, the effect will lighten an underlying object. When Hard Light is applied to colors darker than 50% gray, the effect will darken an underlying object. And when Hard Light is applied to exactly 50% gray, it becomes transparent. You can observe this by filling an object with a white to black gradient, then applying Hard Light, and placing the object over something else in your document.

Filling an object with a white to black gradient

Placing an object over your gradient.

So, if we want to create something like a translucent bubble, we can start with a circle filled with 50% gray and use the Bevel and Emboss effect to create a highlight and shadow.

Use the Bevel and Emboss effect to create a highlight and shadow

Then apply Hard Light to make the 50% gray fill disappear, while retaining the shadow and highlight created by Bevel and Emboss.

Apply Hard Light to the object.

It’s also worth noting that this use of Hard Light works best with documents that use RGB Transparency Blend Space. This does not mean that you can’t create translucent objects in documents destined for print output. But in order to retain the look of those translucent objects, you must not flatten transparency or convert to CMYK when you export a PDF from InDesign. You can perform flattening and color conversion tasks in the PDF in Acrobat, or you can rely on your print service provider to do these jobs. For more information on how to get InDesign FX to print correctly, read my blog post Getting Effects into Print.

I also have a member-exclusive movie in the lynda.com library this week called Mocking Up a Film Strip. In it, I show how to add details around a series of photos to make them look like a strip of film.

Mocking up a film strip.

See you here again in two weeks with another InDesign effect!

Interested in more?• The complete InDesign FX bi-weekly series • All InDesign courses on lynda.com • All courses by Mike Rankin on lynda.com

By Colleen Wheeler | Tuesday, November 27, 2012

Deke's Techniques: Creating a glowing cabochon jewel in Photoshop

This week’s free Deke’s Techniques video is one of those delightful projects where Deke manages to create something precious entirely within Adobe Photoshop. In this case it’s a rounded shimmering jewel.

Deke starts with nothing more than the plain black ellipse you see on the left, and builds the glowing amber cabochon on the right using little more than Photoshop layer effects (and a suitable background of marble and gold chain, of course).

The before and after images of the jewel effect

First, he applies a red fill with a subtle gradient to the ellipse.

An elipse with a red gradient fill in Adobe Photoshop

Then the layer styles begin. The first layer style creates a 20-pixel-thick brown stroke that will eventually serve as the gold ridge around the jewel:

The stroked ellipse with the Layer Style dialog box

Next, Deke applies a substantial Inner Shadow effect that uses the Cone Inverted contour setting to really establish a rich, round glow:

The ellipse with an inner shadow effect

Applying a dark red Inner Glow effect adds volume:

The ellipse with an added inner glow effect

Deke then employs the Bevel & Emboss layer style and chooses a Pillow Emboss style effect with a Depth value of 400% to shape the edges of his gemstone. For the Pillow Emboss shading, he chooses a very pale orange as the Highlight mode and dark reddish brown for the Shadow mode. (Note at this point how much the preview swatch in the dialog box looks like a faceted gem itself!)

The ellipse with the Bevel and Emboss effect

Before he closes the Layer Style dialog box, there’s one more effect to apply; a Drop Shadow where the jewel as a three-dimensional object would reflect against the marble.

The ellipse with a drop shadow effect

The final polishing comes from a few shape layers made into crescent shapes with the ellipse tool. With the right blend modes applied and an unorthodox use of the Drop Shadow effect, the elliptical shapes become glossy highlights, and, voila, Deke has created a precious jewel from nothing but pixels!

The final cabochon effect and the Layers panel

For members of lynda.com, Deke also has another video this week called Cutting and brushing light on a gem that further refines this jewel effect. Here’s what cutting and brushing light on a gem looks like in beautiful picture form:

The finished jewel effect in Adobe Photoshop

Deke the Photoshop Alchemist, turning black pixels into glowing amber. He’ll be back with another free technique next week.

Interested in more?• The entire Deke’s Techniques weekly series on lynda.com • Courses by Deke McClelland on lynda.com • All Photoshop courses on lynda.com

Suggested courses to watch next:• Photoshop CS6 One-on-One: Fundamentals• Photoshop CS6 One-on-One: IntermediatePhotoshop CS6 One-on-One: Advanced

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.