All posts by Sara Froehlich

Freeware Friday: optikVerve virtualPhotographer

Regular Feature: Freeware Friday

Beautiful photography effects are just a few clicks away with optikVerve virtualPhotographer

virtualPhotographer is one of the best Photoshop compatible plug-ins you will find anywhere. With presets you can easily create tons of special photography effects such as Film Grain, Soft Focus, B/W, B/W tinting, High Contrast and many more are a click away.

originalOriginal flamingo photo

Choose a preset and use it as is, or tweak the settings in the easy to learn interface. If you need help, the optikVerve web site has online help and samples.

photo with a preset applied

Download extra sets of preset and install into the program. They are self-installing .exe files, but mine copied to my plugins folder and I had to move them to the optikVerve folder by hand, but that only takes a minute!

For Windows
Download virtualPhotographer

photo with a preset applied

When Illustrator’s Save for Web Doesn’t

Regular Feature: How-To's Day

Fixing Illustrator’s Save for Web

Has Illustrator’s Save for Web stopped working the way you know it should? Tried resetting program preferences and it didn’t fix it? Here’s why, and how to get Save for Web back!

When I first upgraded to Adobe® Illustrator CS2, everything worked great for a while. Illustrator is the application I turn to most often, and I use it for web work as well as print. So when my Save for Web quit working properly, I was stumped. Everything I tried to save was jagged and grainy, and looked like a jpg saved at a too low quality setting, no matter what the quality setting was. They were so bad as to be unusable.

The first thing I tried was resetting the program preferences. That didn’t help. I tried reinstalling the application. That didn’t help. I tried sending the items I needed saved for web to my editor, and having him save them for me. That worked, but I could hardly call it a workable solution!

I went digging through the Finder and found something I had never known before: Save for Web preferences are not the same as the general program preferences stored in the aiprefs file. So when I reset the program preferences, absolutely nothing changed in Save for Web.

Resetting Save for Web Preferences on the Mac

Close Illustrator.

Go to Home > Library > Preferences > Adobe Save for Web AI 9.0 Preferences and drag the file to the trash.

Restart Illustrator and the preferences will rebuild.

Resetting Save for Web Preferences in Windows

Close Illustrator.

Go to C:\ Documents and Settings > Owner (where “Owner” is your username) > Application Data > Adobe > Save for Web AI > 9.0

Drag the 9.0 folder you just found to the trash.

Restart Illustrator and the preferences will rebuild.

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Freeware Friday: InterfaceLIFT

Regular Feature: Freeware Friday

Designers need pretty desktops too, and InterfaceLIFT can fill that order with lots of free quality icons for Mac and Windows.

Want to spruce up your desktop? InterfaceLIFT has lots of beautiful icons for both Mac and Windows, as well as high quality Mac Destop images and Windows wallpaper in a variety of sizes, many for the widescreen monitors we all love.

Besides icons, desktops, and wallpapers, you will also find Shapeshifter themes for Mac OS X and Visual Styles for Microsoft Windows.

What are you waiting for? While you’re working hard on designs for clients, you deserve some eyecandy on your machine!

InterfaceLIFT
Sign up for the free newsletter here.

Freeware Friday: Zoomify EZ

Regular Feature: Freeware Friday

The problem: when posting a full-size image on the web for a client to view, sizing the image so it fits on the screen hides the details; viewing the image full-size means they have to scroll and can’t see the full effect of the image. The solution: Zoomify EZ.

Drag and drop an image on the converter and using HTML, JPEGs, and Flash, and Zoomify EZ makes your full-size high-quality images interactive. After posting a large image using Zoomify EZ, you can zoom in and out of the image and your client gets the best of both worlds: they can see the whole image and still zoom in to see the details.

This handy utility works with Mac or Windows, and will make you change the way you post your images!

For more information and how to use Zoomify EZ, read this page.

Download Zoomify

In Pictures ebook Series Offered Free until August 1

Want to learn MySQL, Perl, or PHP? How about Photoshop CS2 or Dreamweaver 8? Here’s your chance, and until August 1, it’s free!

Until August 1, 2006, the In Pictures series of ebooks, published by Visibooks LLC, will be free for download in pdf form. There are books on many subjects: Office 2003 products like Excel and Word, Front Page 2003, Dreamweaver 8, Photoshop CS2, Photoshop Elements 4, and many others. These books cover the latest versions of the software.

After August 1, the company will offer one free download per month. The free books are screen quality ebooks. Print quality ebooks can be downloaded for $3.95, and spiral bound copy can be ordered for $14.95.

Unlike most ebooks, these are provided under the Creative Commons License: this means you are free to share and copy them with others, but you are not allowed to change or sell them.

Download the books here.

How To: An Explanation of Illustrator’s Blending Modes

Regular Feature: How-To's Day

Illustrator’s Transparency palette sets the opacity of objects, and allows you to use blending modes determine how the colors of objects mix with the colors of objects they cross. Here’s how the blending modes work.

Blending modes control how the colors of the objects on the page interact with each other. Using Illustrator’s Transparency palette, you can set the blending modes to get the effect you want.

When you first open a blank document in Illustrator and draw objects on the page, the transparency palette shows the opacity is set at 100% by default. You can change this by either changing the opacity using the opacity dropdown menu by either typing in a value or using the slider to change it. This affects the selected object or objects. 100% is fully opaque and 0% is fully transparent.

opacity

The dropdown menu on the left contains the blending modes. Choosing a mode from this menu applies it to the selected object or objects. The mode determines how the colors in the objects interact with the colors of the objects below.

menu

Normal is the default, and the objects interact with each other as if they were both solid color objects, at 100% opacity. Normal mode displays the full value of the colors of all of the objects.

normal

The blue square above is partially obscured by the floral square. In normal mode, you can’t see the hidden part of the blue square. The rest of the modes interact with each other in different ways. If you are used to Photoshop, you know in Photoshop these are referred to as layer modes. They affect everything on the layer and you can have only one per layer. Not so in Illustrator! Every object can have its own blending mode. The modes go with the objects, not the layers.

Therefore you can have three objects with three different blending modes, and they will all react to each other differently.

Darkening Modes

There are three darkening modes: Darken, Multiply, and Color Burn. These modes create darkening effects when colors are used that are darker than 50% gray, which refers to colors whose luminosity is less than the luminosity of gray that is 50% white and 50% black.

Darken: In Darken mode, Illustrator compares colors in the blended layer with colors in the lower layer, and calculates which is darker. Wherever a pixel is darker on one layer than on the other, the darker pixel replaces the lighter pixel. It ignores values that are darker than the blending layer.

darken

Multiply: This mode darkens all pixels. Colors in the base layer or object are multiplied by the blended layer to produce a combination of both, which is always darker that the original. If you multiply any color with black, you get black and multiplying with white leaves the other color unchanged and the area that was white will be transparent (which in this case means it will show through as if there were no blending mode applied.) One of my favorite uses for this mode is to add scanned line art or handwritten text that is on white paper. Copy the scanned image to the photo and it will be on its own layer. Change this layer to Multiply, and the line art or text will show but the scanned page will be invisible.

multiply

To illustrate this, in this example there are two objects: one object is blue, and one object is a black and white pattern:

multiply

When the upper object, the black and white pattern, is dragged on top of the blue rectangle, in normal mode it hides the blue rectangle.

multiply

After the blending mode is changed to multiply, the white background disappears and all that is visible is the black pattern.

multiply

Color Burn: Colors in the blended layer are applied to those in the base to enhance contrast. The degree of color change depends on the intensity of tones in the blending layer. The darker the color the more intense the effect, and white areas remain unchanged.

color burn

Lightening Modes

These modes create lightening effects when colors are used that are lighter than 50% gray, which refers to colors whose luminosity is more than the luminosity of gray that is 50% white and 50% black. There are three lightening modes: Lighten, Screen, and Color Dodge.

Lighten: This mode is the opposite of Darken. In Lighten mode, Illustrator looks at the colors in both layers or objects and replaces the darker values with lighter values. It ignores values that are lighter than the blending layer.

lighten

Screen: Colors in the blending and base objects or layers are multiplied in inverse values, resulting in a lighter image with less contrast. Screen is the opposite of multiply.

screen

Anything black in the blended layer will be transparent, letting the base layer show through. Using the same two rectangles as we used before:

screen

Changing the blending mode to Screen results in the blue from the bottom object showing through the areas on the top object that were black:

screen

Color Dodge: This blending mode lightens the light tones and increases contrast, and does not affect dark image areas. This is the opposite of Color Burn but you may not always get exactly opposite results.

color dodge

Contrast Blending Modes

These modes increase contrast by changing highlights and shadows. We find Overlay, Soft Light, and Hard Light modes in this section. Overlay and Hard Light are useful in composites for dramatic effects, while Soft Light is more subtle, and gives a softer, but very effective, blending.

Overlay: Overlay is a mix of multiply and screen and works by multiplying the dark values and screening the light values of the base layer. It retains the brightness, so is often harsher than its companion, Soft Light.

overlay

Soft Light: While Overlay is a mix of Multiple and Screen Mode, Soft Light is a mixture of Darken and Lighter mode, so it works the same as Overlay except the effect is more subtle and softer.

soft light

Hard Light: When over 50% grayscale, the pixels on the base layer are screened, and when lower than 50% they are multiplied. Hard Light is similar to Overlay, but more dramatic.

hard light

Comparative Blend Modes

These modes use mathematics to compare layers with one another. There are two modes here, Difference and Exclusion.

Difference: Difference reacts to the differences between the upper and lower layer pixels. Identical values of the two layers are shown as black, and everything else shows as inverted colors.

difference

Exclusion: Exclusion is less contrasted than Difference.

exclusion

Image Component Blending Modes

These modes, Hue, Saturation, Color, and Luminosity, change the attributes of the object or layer.

Hue: Hue changes the hue of the lower layer to the hue of the upper layer but leaves brightness and saturation levels alone.

hue

Saturation: Saturation changes the saturation of the lower layer to the hue of the upper layer but leaves brightness and hue levels alone.

saturation

Color: Color changes the base layer to the hue of the blending layer but leaves luminosity of the base layer alone. Color mode is a great way to change the color of an image.

color

Luminosity: Luminosity changes the luminosity of the base layer to the luminosity of the blending layer while leaving hue and saturation the same on the base layer.

luminosity

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

How To: Explaining the Illustrator 3D Filter

Regular Feature: How-To's Day

using the 3D filter

Illustrator’s 3D Filters can be confusing until you understand how each of the three filters of this trio work. Here’s how to know what to choose for the effect you want.

Illustrator CS and CS2 have a 3D Effects filter. These effects can be found on the Effect > 3D submenu, and there are three to choose from. Which you choose depends on the effect you want:

  • The 3D Extrude and Bevel filter makes three dimensional shapes from flat shapes.
  • 3D Revolve spins a path in a circular direction around the vertical axis of a path.
  • 3D Rotate alters the perspective of a 2D object in three dimensional space, like rotating a piece of paper to look as if it is lying on a table.

Several features are common across all three 3D Effects. Let’s look at these before we use the effects.

Position Menu

The position menu in all three 3D Effects contains many presets that you can choose. These presets simulate looking at the object from different angles. Open the popup menu and make your choice. That may be all you need to do. Make sure the preview box is checked so you can see the effect in real time on the object.

position

TIP! While using the 3D effect, save OFTEN. It’s very processor intensive and Illustrator can crash without warning, even if you have lots of ram, especially if you’ve been working for a long time.

Custom Rotation

All three of the 3D Effects let you set custom rotations by clicking and dragging the cube, and if you check the preview box you can see the effect on your object. Be aware, however, that this can be slow to render, and take a lot of processing power. Depending on the complexity of the object, the settings you select, and the power of your computer, rendering the final effect could take a while, so be patient. You might want to turn preview on and off as you work in the 3D dialogs so you don’t spend so much time waiting.

Now let’s look at the different 3D effects.

Effect > 3D > Extrude and Bevel

This effect makes an object appear 3D by adding depth. A solid or hollow appearance can be made by capping or uncapping the extruded object. The Position menu has presets you can choose, or you can click and drag the cube to rotate your object, or type in angles in the boxes. You also have the option of choosing preset bevels and adjusting the height. The preview area lets you click and drag the preview cube to rotate your object in three-dimensional space; or, if you prefer, you can type in precise measurements.

extrude

Click the More Options button to change the light settings and shading color.

more options

The appearance of the original object also makes a difference how the effect works on the object. A stroked object with no fill looks like an uncapped object. In the following examples the same settings were applied to the same object, but it had different strokes and fills.

extrude

extrude

extrude

extrude

extrude

This effect is great for making boxes, 3D text, and other 3D objects.

extrude

TIP! Whenever you’re using the 3D filters and you want to start over from within the 3D dialog boxes, hold the opt/alt key and the Cancel button turns into a Reset button. Click the Reset button to start over.

Effect > 3D > Revolve

Next we’ll look at the 3D > Revolve effect. The 3D revolve effect spins a path in a circular direction around the vertical axis. It creates great cylindrical shapes and spheres.

To try 3D Revolve, draw a circle with the ellipse tool with no fill and a light blue stroke. Make sure to hold the shift key to draw a perfect circle. I used light blue because I want to make a globe using the map be using the circle in a project in a few minutes.

Use the scissors tool to cut the top and bottom points so you have a semi-circle. To “cut” the circle, click once with the scissors exactly on the top and bottom points of the circle.

scissors

Click on the right side of the circle and delete it. You should have a blue semi-circle left. You could actually use either side of the circle, but it will make a difference in the settings in the Revolve effect dialog if you use the right side, and I want to show you a common hiccup new users of this effect often get stuck on.

Go to Effect > 3D > Revolve to open the Revolve filter.

revolve

In the Position Menu, choose Off-Axis Front. The preset will work fine here. The Revolve Angle in the center section is set to 360º; this means it will revolve a full circle around the vertical axis. If you entered 180º, it would only revolve half way around the circle, which is a great way to show something in cutaway view.

Make sure the solid cap is chosen as in the screenshot, and make sure Preview is ticked. Offset should be 0 pt. Any higher than 0 and it will leave a hole down the middle.

From: Change this to Right Edge. The vertical axis we want to revolve around is on the right edge of the semi-circle; if you leave it set on Left Edge, you would see something like this:

revolve

Of course, if you were using the right half of the circle, then the opposite would be true and the sphere would result from using the Left Edge setting. Basically, what this means is if you get something off-the-wall like the above, switch to Right Edge or Left Edge, whichever you are not using, to correct it.

Choose Diffuse shading for Surface. In different projects you will want other shading, most of the time Plastic Shading because it is shinier, but this time, use Diffuse. Your sphere should look very much like this one:

revolve

If you want to try mapping a texture to the sphere as I did in the map art tutorial, save the sphere document now. You can use this effect to make vases, bowls, and other objects you want to be totally three-dimensional.

Effect > 3D > Rotate

Any flat artwork can be rotated in 3D space with the 3D Rotate effect. The object in this effect, however, remains two dimensional. Either drag the cube in the preview area to rotate the object or type in measurements and perspective.

rotate

rotate

To learn to map artwork to the 3D shapes you create, try this tutorial.

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

How To: Mapping Artwork onto 3D Objects with Illustrator

Regular Feature: How-To's Day

globe

Using Illustrator symbols, artwork can be mapped onto the 3D objects you create. Here’s how!

Textures and artwork can be mapped onto the 3D objects you create. I’ll use the blue sphere I made in the 3D Filter How-To to create a globe. I need a map, so I downloaded one from Nasa Reusable Images. I used “World Map with Solid Red Continents”. I actually wanted my continents green, but the green one available on this page would not open for me so I just recolored the red map green.

With the map file open in Illustrator, zoom out or scroll until you can see the whole map.. Drag the selection tool around it to select all parts of it. Cmd/ctrl + G (or Object > Group) to group it. If you used the red map, change the color to a dark green using the Swatches palette.

Edit > Copy to place a copy of the green map on the clipboard. Edit > Paste in Front to paste the copy directly on top of the original. You won’t see any difference, but it’s there.

map

Change the color of the top copy to bright green. The top copy will already be selected, so just click on the bright green swatch in the Swatches palette. Now use the arrow keys to nudge the top copy up and to the left three pixels.

Select > All, then group (cmd/ctrl + G). The map now has some dimension.

map

Converting the Map to a Symbol

Any artwork used for mapping to 3D object in the 3D filters has to be a symbol. Drag the maps group to the Symbols palette and drop it in to convert it to a symbol. You can also open the Symbol palette options menu and choose New Symbol, and then you would have an opportunity to name it, but it isn’t necessary. After the map has been converted to a symbol, you can delete it from the page. You won’t need it anymore. Save this file as globe.ai, and do not close it. The map symbol is now a part of the document globe.ai.

Open the sphere image you created in the 3D Filter How-To. Select it and copy it to the clipboard.

Make the globe.ai document active again and Edit > Paste to add the sphere to the globe document. The reason you need to put the sphere into the globe document is you need the map symbol you defined to be available. Since symbols are document level resources, that is, they are not saved with the program preferences but rather with specific documents, the only place that symbol exists is in the document it was created in, which is globe.ai. In order to map it to the sphere, the sphere has to be in the same document as the symbol.

You’ll need to use the 3D Revolve filter again to get the map on the sphere; but if you go to Effect > 3D > Revolve, Illustrator will want to add another instance. What you want to do is to edit the instance you already have. To do this, open the Appearance palette and double click on the effect icon in the palette. This will let you edit the existing effect.

map

TIP! To completely get rid of an instance of the 3D Effects, drag the effect icon in the Appearance palette to the palette trash.

The Revolve dialog opens again. Make sure you drag the dialog off to the side by its title bar so you can see the sphere. You don’t need to change the rotation, you just need to map the art to the sphere, so click the Map Art button at the top right side of the dialog.

The light areas in the diagram are the surface areas you can see in the image at its present rotation. The dark areas are hidden, or more accurately will be on the side of the sphere that is rotated away from you. Notice the sphere is relatively simple: it has 2 surfaces that can be mapped. Move from side to side with the arrows. Place the map on surface 1.

map

Open the Symbol menu. The symbol you saved will be at the bottom of the list. Double click on it to add it to the diagram.

map

It’s too large for the diagram. You can resize by dragging corner handles the same as any object, or you can resize it instantly to fit by clicking the Scale to Fit button. Click the button now to resize the map.

map

map

Click the Preview button so you can preview the map on the sphere. This might take a while to render. Notice how the maps of North and South America show up, but the maps of Asia, Africa, and Australia are hidden on the other side of the globe.

globe

Shaded artwork takes longer to render and takes more computing power, but it usually looks more realistic. Try checking the Shade Artwork box and letting it render to see which version you prefer. On some images it will make a big difference, and on others it won’t, and if there is transparency in the artwork it might even look strange. You’ll have to decide as you use the Effects which way to proceed on an image by image basis.

globe

If you are happy with the result, click OK in the Map Art dialog.

globe

You could actually rotate the globe in the 3D Revolve dialog if you wanted a different part of the globe showing. When you’re done rotating by dragging the globe in the preview window, click OK in the 3D Revolve dialog to apply the mapped art to the sphere, and you now have a globe. Save the file.

globe

How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.

Freeware Friday: Desktopple

Regular Feature: Freeware Friday

Desktop, Desktop, wherefore art thou, Desktop? With Desktopple from FoggyNoggin Software, you can clear your desktop fast!

My desktop is messy. I admit it. That’s where files are downloaded to, it’s where I put stuff so I don’t lose it until I have time to attend to it, and that’s where I throw stuff I will be “filing tomorrow”. Sometimes tomorrow just doesn’t show up.

Anyone of us who has shown the boss or a client your progress on an image in Photoshop knows the annoyance of having the desktop icons in the way, detracting from your work. Yes, you can run Photoshop full screen, but sometimes you want to show the layers palette or color palette. If you regularly write tutorials as I do for Photoshop and Photoshop Elements, you will also have been faced with the “icon garden” in the screenshots.

Desktopple is a utility that takes care of all that. It sits in the Menu Bar until you need a clean desktop (or just want to see your fabulous wallpaper). Click to open the menu and choose Hide Desktop. You can choose to show the desktop as a solid color, or as your desktop picture. You can also change the desktop picture. When you need the icons again, open the menu and choose Show Desktop.

If you want it to run whenever you turn on your Mac, check the Start at Login box or add it to your Login items in System Preferences. Never be faced with a messy desktop again!

The developer’s web site states that Desktopple is for Mac OS X 10.4 (Tiger), but that even though it has not been fully tested on Panther, it should work there too.

Download Desktopple