I just stumbled on this great website which has very useful and simple jquery ajax applications. I will review each here in a simple way so you can see all of the useful information. This website shows a video tutorial, a text tutorial and a demo for each of the ajax applications.
Please keep in mind that you should use these design elements sparingly and tastefully. Using too many effects in your webdesign can be tacky and detract from the overall design.
This creates an endless carousel with an html list. It also displays a very smooth scrolling effect. This is very simple to set up and uses jquery. Here is an image showing the carousel. View the code and tutorial here.
Ajax smooth slidedown
This shows you how to make a smooth div slidedown effect without the initial jump. This can be used for many cool ajax effects. View the code and tutorial here.
Ajax smooth data changer
This creates a panel that automatically switches out a list of divs. A very nice effect for blog or website sidebars that want to show rotating pieces of information in an attractive way. View the code and tutorial here.
Ajax Smooth Image Fade
I myself have always wondered how to do the smooth image crossover fade and this tells you how to do it. The effect is very nice on buttons, menus and even images on display. View the code and tutorial here.
Ajax Sliding Tab Effect
This is a great effect for teb boxes. I see it cropping up all over the web now days. Use it for tabbed browing of information or even arrow based browsing (arrows on the left and right). View the code and tutorial here.
Very Sleek Tooltip Bubble
Very nice use of the JQuery puff effect. This shows an informational popup over the area you want when the user mouses over the area specified. Good for tooltips, information divs and any other popup application. View the code and tutorial here.
Loading a Large Image with Ajax
You have seen progress indicating gifs show up while a large image is being loaded. Ever wonder how to do this? This tutorial tells you how to do this and have complete control over how the image loads. I do not have a picture of this as this tells you how to load any image with ajax. View the code and tutorial here.
Slideout Side Menu Effect
If you have been to the Apple website recently you might have seen this in action. This gives you an interactive side menu. When a user hovers over one of the menu dividers — that menu shows up. Very nice effect (play around with the demo). View the code and tutorial here.
Ajax for Instant & Server Side Form Validation
Most of the new “Web 2.0” websites have very fluid forms. This is because of the fact that you can lose user’s interest in registering or even buying if it is too hard to fill out the form. I myself have left websites because I found it very hard to get the form to validate. This tutorial shows you how to make a form that validates on the fly, including doing server side calls for user names and such. Quite useful for streamlined user registration. View the code and tutorial here.
There more tutorials and demos on this site regarding Ajax and JQuery. The ones selected here were selected because I thought they could be very easy and useful for web designers who want to have a design edge without haveing to spend too much time coding ajax effects.
Have you ever wanted to create vector or bitmap graphics but did’t have all of the expensive programs to work in? Well I got wind of this website/project called Aviary which allows you to do just that.
Aviary has created applications mimicking all of the popular graphics programs out there today. I will list the different programs, what they do and some examples of work created by people. I find it quite amazing what you can do with these programs — and they are all free. Aviary uses names of bird species for each of their programs.
Image Editor (Similar to Photoshop, Paint Shop, Gimp, etc.) which is called Pheonix and is depicted by a very nice Peonix icon. Pheonix has all of the basic things you need to edit an image which include: clone tool, magic wand, filters, selection tools, smudge, layers and image resizing.
Here are some of the popular images that I really like. These were created in Pheonix by regular users:
Vector Editor (similar to Illustrator, CorelDraw, Signlab, etc) which is called Raven and is depicted by a Black Raven icon. Raven has some of the basic things you need to edit an image. Raven is new, so more features will be coming out. Some of the existing features include: pen tool, pencil tool, brush tool, basic vector object tool, gradient editor, layers and smart selection. They also have a simple bitmap to vector tool.
Here are some of the popular vector drawings that I really like. These were created in Raven by regular users:
Visual laboratory (not much like it on the market) which is called Peacock and is depicted by the Peacock bird. Peacock enables you to create amazing images with the use of filters, images and other mathematical effects. This application can be daunting at first, so be sure to watch the video on how to use it first.
Here are some stunning images created using Peacock:
Color chooser and mixer (not much like it on the market) which is called Toucan and is depicted by the colorful Toucan bird. Toucan enables you to create correct color compositions and includes and complimentary, split, etc, color mixer/chooser. You really have to mess around with it to get what it does. It is important for any kind of graphic design when having to choose a number of colors and make them harmonic.
This is a tutorial on creating a realistic Photoshop lens flare. I have noticed lens flares being used in many designs especially in the recent years. I have figured out how to do one myself. I am not sure if this is the technique that has been used — but I have found it to work quite well for creating this effect. You can use this tutorial for any kind of flare, solar flare or light explosion.
You can use this tutorial to create many kinds of flares or light effects — all you have to do is start out with a different white object (As gone over later).
Photoshop Version: CS2 (Can apply to Earlier versions up to Photoshop 7 or versions of Photoshop with Radial Blur)
The first step is to create a new Photoshop document with a black background. It should be 5 inches by 5 inches at 300 dpi or a dpi that suits your needs.
The reason I suggest using this large of image size is so that you can reuse the flare as you need it. If your computers resources can not easily handle these steps with an image of the size I specified — reduce the DPI to 150 or even 72. I leave this up to you. (As a note though — you will have to slightly change the settings from what is shown below)
Next, create guides that show the center of the image. For an image that is 5 inches by 5 inches put a horizontal guide at 2.5 inches and then a vertical guide at 2.5 inches.
Next, create a new layer and using the eliptical marquee tool create a white circle in the center of the document as shown here.
For different flare effects you can make different shapes at this step.
Click on the layer with the circle you created and click the “Lock Transparent pixels” button which will allow edits only on the filled part of the layer.
The next step is to go to [Filter->Noise->Add Noise] and set the settings as shown here. (Amount: 400, Distribution: Gaussian, Monochromatic: selected)
Next, click the “Lock transparent pixels” button again to unlock the layers transparent pixels.
Next go to [Filter->Blur->Radial Blur] and enter the settings as shown here. If your computer does not have a lot of RAM or is very slow — choose the “Good” option under “Quality”.
Next apply radial blur 10 more times by pressing [Control/Command + “F”] or by going to [Filter->Blur->Radial Blur] and applying the filter that many times.
You will start to get the looks of a flare here. After this there are still a few steps to get to the finish. Any steps from here can be altered to create your own style or color of flare.
Next, create a new layer and create a small circle of white using the elliptical marquee tool.
Then use [Filter->Blur->Gaussian Blur] and use the settings as shown here. This is what creates the bright light in the center of the flare.
Next, select the top layer and then at the bottom of the layers palette there is a button called “Create new fill or adjustment layer”. click this and then click “Hue/Saturation”.
This will add a new adjustment layer which will allow you to adjust the color of the flare without permanently affecting it.
Apply the settings as shown here (Hue: 211, Saturation: 52, Lightness: 0).
You can play with the settings to get a desired flare color or brightness.
The final file will look like this.
For the expert: You can put this flare into other images by deleting the background layer and doing a “Merge Visible Layers” which give give you an object to move to different photos.
I suggest you try different shapes at the beginning or try doing this effect with text.
I hope this tutorial is useful. Comment below if this tutorial has been helpful is or if you need additional help.