Have you been missing out the Illustrator Effects? Did you know it is a powerful tool for creating symmetrical shapes or adding texture to vector paths? For example, with just one simple effect, you can turn a polygon path into a flower shape. You can also make paths look sketchy with the Scribble effect. Read this tutorial to learn how to save time by using Illustrator Effects and work more efficient.

Arrowheads

Let’s start with a basic effect, the Add Arrowheads. Use the Pen Tool or Line Segment Tool to draw a straight line. Go to Effects > Stylize > Add Arrowheadsand choose a style.

Appearance

The great thing about using Illustrator Effect is the ease of changing its appearance. In the Appearance palette, click on the Add Arrowheads layer, now you can easily change the result by selecting different arrow style. This effect is very useful for drawing diagrams.

Without The Effect?

Without the effect, the arrow shape will get distorted when the line is stretched. With the effect, I can easily adjust the length of the arrow without distorting it.

Round Corners

Draw a rectangle shape, go to Effects > Stylize > Round Corners and enter a radius value.

Without The Round Corners Effect?

Round Corners is one of my favorite effects. It is my essential tool for designingicons. Not only it can prevent the round corners to be distorted when I stretch the object, it also saves me a lot of time. Could you imagine how long it will take to draw these perfect round corners without the effect?

Zig Zag Effect

Draw a straight line, go to Effects > Distort & Transform > Zig Zag and enter a value for Size and Ridge Per Segment.

Wavy Line

Draw a straight line, apply the Zig Zag effect, select Smooth Points, and you will get a symmetric wavy line.

Badges

Draw a circle and apply the Zig Zag effect with the setting as shown and you will get a badge shape.

Play around with the Zig Zag options and you may get these shapes:

Pucker & Bloat Effect

Draw a circle, go to Effects > Distort & Transform > Pucker & Bloat, enter -55% (Pucker), and you will get a diamond shape.

Draw a polygon shape, apply the pucker effect, and you will get this shape:

With the same object, change the Pucker & Bloat option to 70%, and you will get a flower shape.

Transform Effect

The example below shows how I can duplicate 12 copies of the object (in increment of 30 degree angle) with the Transform effect.

Play around with the shape and Transform setting, you may get the following:

Roughen Effect

With the Roughen Effect, I can make the trees look more realistic.

Scribble Effect

The example below shows how you can create a sketchy effect combining the Scribble and the Roughen effect. First apply the Scribble effect (Effects > Stylize > Scribble) and then apply the Roughen effect as shown.

Sketchy Icons

If you are constantly using the same effect, it is wiser to use the Graphic Styles to save time and maintain consistency.

After you’ve done the inital sketchy style, drag the object to the Graphic Styles palette to create a new Graphic Style.

Now, select the object(s) where you want to apply the styles. Then, click on the Graphic Style that you’ve just created. Change the fill and stroke color if you want. Don’t forget you can also apply it to text, which remain editable.

Conclusion (There Are More…)

I’ve only showed the basic Illustrator effects. There are actually more cool and useful effects. Don’t be afraid to explore the effect menu and experiment with the other effects such as the Warp and 3D.

Tips For Using Illustrator Effect

• Graphic Styles - save time by using Graphic Styles.
• Scale Strokes and Effects - you can toggle Scale Strokes and Effects option via the Transform palette.
• Appearance Palette - you can turn effect layer on/off or remove it. Double-click on the effect layer to open the option dialog.
• Press D to quickly remove all effects.
• Expand Appearance - if you want to expand the appearance into paths, go toObject > Expand Appearance. Note: once the effect is expanded, it will become ineditable.

Download The Source File

You may download the Illustrator file (CS2) that is used in this tutorial for your learning purposes.

source: http://www.webdesignerwall.com

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Demos

Demo ZIP

Benefits

• This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
• It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
• You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

The HTML markups

<h1><span>span>CSS Gradient Texth1>

The CSS

The key point here is: h1 { position: relative } andh1 span { position: absolute }

h1 {   font: bold 330%/100% "Lucida Grande";   position: relative;   color: #464646; } h1 span {   background: url(gradient.png) repeat-x;   position: absolute;   display: block;   width: 100%;   height: 31px; }

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the tag):

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty tag in the heading, you can use Javascript to prepend the tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js">script>  <script type="text/javascript"> $(document).ready(function(){    //prepend span tag to H1   $("h1").prepend("<span>span>");  }); script>

More samples

Want to make Web 2.0 glossy text?

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

Limitations and more…

• This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
• IE PNG hack is required if you want it to work on IE 6.
• If your gradient image is taller than the heading, the text will not be selectable.

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. It allows you to display: single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This technique is commonly used in eCommerce websites (check out the Gap site for a sample).

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple - Mac website.

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

DynamicDrive - Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

iCarousel - MooTools

iCarousel is an open source (free) javascript tool for creating carousel like widgets. You can use iCarousel as news ticker/scroller or image gallery slider.

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling animation to any position of a web page with customizable erasing and speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated "scroll to anchor" with just a few lines of code.

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

CSS Stylesheet Switcher

A List Apart - Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not, this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

Form Styling

FancyForm - MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes - jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…

Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator. With minimal setup, your forms can be processing clean data in no time at all.