Tutorials

All Categories

Make Your Own Planet
by Tom Green - 19-Nov-09
Reader Level:

Just because a planet doesn't have your name doesn't mean you can't make one. Mix together Fireworks, After Effects and Flash and you are able to build your own solar system.

Send Link to a Friend for PHP - Part 2
by Tom Muck - 18-Nov-09
Reader Level:

This article will show how to create a simple "send link to a friend" form for a PHP web site, which is a frequently requested topic. Part 1 created the basic form and email functionality using the CMXMail email class shown in this article. The mail class is also included in the support files download for this article, but you can reference the previous article to understand the functionality better. Part 2 adds some validation to the fields using Spry, built into Dreamweaver.

The Send Link to a Friend for PHP Series:
Send Link to a Friend for PHP
Send LInk to a Friend for PHP - Part 2

When Your Camera Let's You Down
by Knut Kubenz - 16-Nov-09
Reader Level:

There are times in my photography and I'm sure in yours too, when I'm a bit disappointed because what I saw with my eyes and what the camera recorded are two different things. The colors might not be as bright, the contrast might be too flat and with all of this there might be a lack of detail in the image as well. While there are a lot of controls to fix these conditions in Photoshop, sometimes you don't need a sledgehammer to drive home a thumbtack, so to speak. Sometimes a simple Highlight Mask will solve these problems in a few short steps. Let's begin.

How to Apply Smart Filters to an Image in Adobe Photoshop CS4 - Part 2
by Darren Winder - 16-Nov-09
Reader Level:

Applying a Smart Filter to a photo in Adobe Photoshop CS4 is as easy as 1.2.3., adding an effect is even easier. Join me in the tutorials to find out how.

The Applying Smart Filters to Images in Adobe Photoshop CS4 Series:
How to Apply Smart Filters to an Image in Adobe Photoshop CS4 - Part 1
How to Apply Smart Filters to an Image in Adobe Photoshop CS4 - Part 2

HTML5 Canvas - Part 5: Image Scaling and Cropping
by Rob Williams - 13-Nov-09
Reader Level:

Description: The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to continue our exploration of images by looking at how we can scale and crop them on canvas elements.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping

Apache Fancy Indexing Directory Listing with PHP
by Steven Seiller - 13-Nov-09
Reader Level:

This script lists the contents of files and directories in the Apache Web Server. While Apache has built-in functionality to list files and directories with the FancyIndexing directive, the functionality is limited and the icons are outdated.

This script lists the contents of any directory or sub-directory into which the script is placed for the purpose of browsing, viewing or saving files. It features contextual icons for file types and only list files and directories found within the structure of the script's directory. You can even add your own style sheet to the listings.

It is possible to directly alter the Apache configuration to display listings with your preferred style, but you need root access to the underlying levels of the Web server and advanced knowledge of the configuration. If you have root access, you can also simply change the default icons provided with Apache which is limited in terms of file types. Since many developers do not have root access to their Web server nor wish to muck about in the configuration, this script provides an easy alternative to customizing directory listings.

This tutorial will demonstrate how to use this directory listing script and show you the one line of code which (possibly) needs to be customized for your Web server. You will also be shown how you can customize the script to incorporate your site design, data display and how to implement the configuration on a site-wide basis. Advanced and developing PHP programmers can also explore the functionality of:

reading directories of files
reading file attributes including date, extension, and size
sorting arrays
formatting the file size to human readable display
working with server path and links

Loading SWFs Randomly - Part 1: JavaScript
by David Stiller - 12-Nov-09
Reader Level:

With Flash, interactivity isn't always about the content itself. Sometimes it's understated. Sometimes, for example, it's merely about picking a SWF at random when the user decides to reload the HTML page — regardless if the Flash content is programmed or not. You might use an approach like this to randomly display a set of Flash banner ads or cartoons, just to keep the page "fresh."

Whatever your intent, if you've ever wanted to try something like this but didn't know where to begin, this article is for you. The free SWFObject embedding solution, and a few lines of custom JavaScript, are all you need.

Drama in a Soft Spotlight
by Knut Kubenz - 09-Nov-09
Reader Level:

This is an excellent technique when you want to focus on some unique portion of an image. Standard techniques in Photoshop for doing something similar include selecting a new layer above the Background Layer of the image, feathering the selection, then inverting the selection, and then filling the inverted selection with a color, thus creating a sort of vignette. The method I'm going to show is a lot less task oriented and uses the Lighting Effects Filter in Photoshop. Let's begin.

Autumn Leaf Brush
by Scott Valentine - 06-Nov-09
Reader Level:

Need a leaf brush for your Autumn projects? Here's a quick way to get a stylized custom Photoshop brush to fit all your Fall needs.

Batch Processing Photoshop or TIFF Images Using Fireworks
by Jim Babbage - 06-Nov-09
Reader Level:

There are a lot of things you can do with the Batch Process wizard in Fireworks. With a bit of planning, you can take larger JPEG files or non-web files - like TIFF or PSD or Fireworks PNG files - and create a custom batch process to to resize, sharpen, rename and export these files for use in a web site. Perhaps you are creating an image gallery from some original photos or artwork. Or you might want to take a series of original JPEG files that were shot with your camera, and convert them to a non-lossy format like TIFF, so they can be edited and saved without concern of losing any image data.

This tutorial walks you through the steps of converting some PSD images to images more useful in a web site. The same concept could be applied for graphics destined for a mobile or Flex or AIR application.

Send Link to a Friend for PHP
by Tom Muck - 04-Nov-09
Reader Level:

This article will show how to create a simple "send link to a friend" form for a PHP web site, which is a frequently requested topic. Part 1 will create the basic form and email functionality using the CMXMail email class shown in this article. The mail class is also included in the support files download for this article, but you can reference the previous article to understand the functionality better. Part 2 will add some validation to the fields using Spry.

Email 3a: Accessing Email On Your Web Server
by Estelle Weyl - 04-Nov-09
Reader Level:

Generally you will want to download emails you receive to Outlook, iMail, or some other program that reads email locally on your computer. Sometimes, however, you may not have access to your computer. In this tutorial we look at reading emails online, directly on your web server, via your control panel.

The Email Series:
Email 1: Creating New Email Addresses on Your Server
Email 2: Creating Email Forwarders
Email 3a: Accessing Email On Your Web Server

HTML5 Canvas - Part 4: Images
by Rob Williams - 03-Nov-09
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to begin exploring the use of images within Canvas elements.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

How to Apply Smart Filters to an Image in Adobe Photoshop CS4 - Part 1 Free!
by Darren Winder - 02-Nov-09
Reader Level:

Applying a Smart Filter to a photo in Adobe Photoshop CS4 is as easy as 1.2.3. Join me in these tutorials to find out how.

The Applying Smart Filters to Images in Adobe Photoshop CS4 Series:
How to Apply Smart Filters to an Image in Adobe Photoshop CS4

Editing JumpStart PNG Files
by Adrian Senior - 02-Nov-09
Reader Level:

Community MX JumpStarts provide you with an instant layout and design, they also include tutorials on how you can apply the techniques used to create them into your own work. At their heart, JumpStarts serve two main purposes: they are an ideal tool for learning how to lay out standards compliant CSS driven designs and allow you to experiment with the code and CSS. For the more experienced designer they will allow you to quickly redesign and adapt the visual look and feel of the core design to a look that is unique to your client with minimum effort and often without any core code changes at all. At the heart of this rapid development is the JumpStarts PNG file. The PNG file contains the core design images and it is here that this tutorial will be focused

We will be looking at how you can make changes to the Stelvio Pass - Gallery JumpStart PNG file and export those changes to alter the look and feel of the original JumpStart.

CMX JumpStart: The Black Forest
by Adrian Senior - 30-Oct-09
Reader Level:

Welcome to The Black Forest JumpStart!

The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.

The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.

PHPMailer-ML - Mailing List Manager and eMessage Manager Free!
by Steven Seiller - 28-Oct-09
Reader Level:

PHPMailer-ML is a mailing list and newsletter management tool. It leverages the easy-to-use and powerful PHPMailer package from an online administrative center that you run on your own web server. You can use PHPMailer-ML to receive subscription requests from your website and to manage your mailing list. From PHPMailer-ML you can send emails to your mailing lists in HTML or plain text format. The administrative center allows you to create mailing campaigns, select mailing lists and create e-mails. Like PHPMailer, PHPMailer-ML is distributed for free under the General Public License (GPL). This tutorial will show you how to install and use the basic features of PHPMailer-ML.

PHPMailer-ML was originally developed to showcase the function of PHPMailer in 2008. During 2009 the project has received significant development in terms of interface, CSV import function and newsletter editing. PHPMailer is a popular, top-rated PHP class for simplifying the sending of plain text e-mail, HTML e-mail and attachments.

(Not so) Scary Ghosts and Goblins - Part 7
by Jim Babbage - 26-Oct-09
Reader Level:

Well it has been a loooong time since I've done a holiday themed tutorial, and I thought to myself, "Self, Halloween is coming. Surely you can come up with some sinister plan to yet again use Fireworks for scary and creepy purposes."

With the gauntlet thus thrown, I took up the challenge. In this tutorial you'll take a regular photo and a scary photo, combine them with some Fireworks effects to create a scary Gif animation or SWF file. The end result will look like this:

blood ghost animated gif

Read on Dear Reader . . . if you dare . . .

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

Extending Dreamweaver CS4 - Part 6: Phatfusion Rounded Corners
by Adrian Senior - 26-Oct-09
Reader Level:

In Part 6 of this series on Extending Dreamweaver CS4 we will be looking at the Phatfusion roundedCorners widget from the Adobe web site. The Phatfusion roundedCorners widget is an automated click of a button widget that will provide with rounded corners on both your divs and images.

A default set of images are provided to get you up and running. You can, of course, create your own and change the radius of the corners. As with all the widget add-ons in this series, the widget is free, you need only download the widget in extension form and install it through your Extension Manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Pick Videos at the Drive-In
by Tom Green - 23-Oct-09
Reader Level:

How do you get three 1950's commercials to play on your web site? Did I mention they need to be posted within the next 30 minutes? Fireworks CS4 and Flash CS4 to the rescue.

Approximate download size: 31MB

Email 2: Creating Email Forwarders
by Estelle Weyl - 23-Oct-09
Reader Level:

To look professional, you will want to use email addresses that match your domain name, instead of email addresses from free email services like Yahoo! or email addresses associated with your ISP, like Earthlink. In the last session, we learned how to create email addresses with your personalized domain. Sometimes, though, one email address isn't enough.

In this tutorial you'll learn how to create email addresses that forward to your main email address, so you can have unlimited email addresses

The Email Series:
Email 1: Creating New Email Addresses on Your Server
Email 2: Creating Email Forwarders

Cross Browser Image Opacity Transitions
by Adrian Senior - 21-Oct-09
Reader Level:

Adding opacity to your images becomes a realistic possibility with CSS 3, but there is reasonable support out there now for image opacity, though not to the extent that CSS 3 should bring.

In this tutorial we will look at how we can use opacity in a meaningful way on images within your page and look at some of the pitfalls you might expect to come across.

HTML5 Canvas - Part 3: Advanced Drawing Techniques
by Rob Williams - 20-Oct-09
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to delve deeper into Canvas drawing by exploring custom paths and the methods that can be used to create them.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Studies in Noise - Part 2
by Scott Valentine - 19-Oct-09
Reader Level:

More noise! Check out a few more approaches to getting noise to work for you. And keep an eye out for another article which will take these skills and apply them to retouching - matching noise in a target image. Cool!

The Studies in Noise Series:
Studies in Noise - Part 1
Studies in Noise - Part 2

Creating an Action with Adobe Illustrator CS4
by Darren Winder - 19-Oct-09
Reader Level:

When creating a new action, the commands and tools you use are added to the action until you stop recording. When you play an action, Illustrator performs the entire recorded task. Find out more, join me in this tutorial.

Lomo Magic in Photoshop
by Knut Kubenz - 16-Oct-09
Reader Level:

In the early days of photography a Russian camera called the Lomo was a cheap and a very popular camera for doing a lot of casual photography. Some of the unique properties of the camera revolved around how it was made and the images it produced. Technically the optics were poor and loaded with aberrations, along with a soft lens which could rarely produce too much detail. The images were inherently color saturated and contrasty. Despite all this seemingly negative stuff however, the images were hauntingly beautiful. The only analogy I can make is in typography, where for years type was very clean and stylized and then out of the blue we suddenly had all kinds of grungy and broken, distressed looking type fonts come on the design scene. This is what Lomography is to modern photography.

Lomography also takes on a philosophy towards photography style which tends to be very loose and casual. Shooting from the hip sometimes or not composing the shot at all are typical. All this develops into a kind of art form unique to a different way of creating images altogether.

Photoshop is an excellent tool to recreate this type of imagery and with a few tools such as Curves and Gradient Mapping, you'll be able to quickly render this effect. Let's begin.

Email: Creating New Email Accounts On Your Server
by Estelle Weyl - 16-Oct-09
Reader Level:

Many small businesses have email addresses from free services like Yahoo! or through their ISP, such as sbcglobal or AOL. While it's vital to have an email address, it's unprofessional to have one from a domain other than your web site's. In this tutorial, we'll show you how to create a personalized email address with your domain name.

The Email Series:
Email 1: Creating New Email Addresses on Your Server
Email 2: Creating Email Forwarders

The CSS Starter Page Series Part 12: Adding a JQuery Slideshow
by Sheri German - 15-Oct-09
Reader Level:

The new semester is under way, and my students are using this CSS Starter Page series to design their portfolio sites. As we go along, we'll be exploring various nifty ways to add the portfolios of their graphic design work. In this installment of the CSS Starter Page series, we're going to use a jQuery script to create an attractive slideshow of images with descriptive text. We'll accomplish this objective in stages. First we'll insert the slides into the HTML code so that even older browsers have access to the content. Our next step will be to style the slides with CSS, a "progressive enhancement" that will benefit most users. Finally, we'll add the pre-written jQuery script to add a little wow factor to the slideshow.

PHP Is Losing Its Magic-Get Used to It Now Free!
by Steven Seiller - 14-Oct-09
Reader Level:

The use of Magic Quotes in your PHP scripts has long been shown to be an insecure method of security. While this function is currently in the process of being deprecated, it will finally be removed as a PHP 6. Make your transition process easier by taking the time now to assess your reliance on the Magic Quotes directive and revise your scripts if needed.

Backing Up Databases For Offline Storage
by Adrian Senior - 14-Oct-09
Reader Level:

If you are running your own server, then many hats are needed to ensure your clients data is correctly maintained. Everything from the web site and associated files, through to any database that might be used to support the web site needs to be backed up.

In this tutorial we will look at how to efficiently back up your SQL Server Databases and copy them down from the remote server for storing in a separate location. I use hardware within my office for this storage, the databases are copied down to my main machine and then copied across to an external hard drive. This process provides the latest backup in three different locations as well as providing a backup stack of the last thirty days for each database, that should cover all the bases nicely!

Studies in Noise - Part 1 Free!
by Scott Valentine - 09-Oct-09
Reader Level:

Noise!! You can't seem to avoid it in your digital images. Well, guess what? We are going to embrace the enemy! In this two-part tutorial, we'll look at the basics of using noise in creative ways. The first part talks about ways to use Photoshop's filters to generate and manipulate pure noise. The second part will take that information and start building textures.

If you do any photoretouching or need some creative sparks, read this article ;)

The Studies in Noise Series:
Studies in Noise - Part 1
Studies in Noise - Part 2

Show-Hide Passwords
by Paul Davis - 09-Oct-09
Reader Level:

Entering passwords sometimes can be frustrating since you can't see what you're typing. This quick JavaScript will make it possible for visitors to toggle between text and the password protected field for their password entry.

ColdFusion Worst Practices Part 2: Abusing Pound Signs (#)
by Ray West - 08-Oct-09
Reader Level:

The pound sign (#) has a special meaning in ColdFusion. It tells the application server to evaluate what is inside the matching pound signs as a variable or an expression. If the value is a variable, or can be treated as an expression or a function, ColdFusion replaces the whole thing with the result of the evaluation.

However, using # signs is not always the best choice. You should not get it the habit of using them where they are not required. Overuse of pound signs can cause the server to work too hard and eventually cause performance issues. In this article we will look at several examples of when not using the # sign is the better choice.

The ColdFusion Worst Practices Series:
ColdFusion Worst Practices - Part 1: Misuing CFOUTPUT
ColdFusion Worst Practices - Part 2: Abusing Pound Signs (#)

Deconstructing and Reconstructing a Button in Fireworks
by Kim Cavanaugh - 07-Oct-09
Reader Level:

Recently my good buddy here at Community MX, Laurie Casolino, reached out and asked if I could take a stab at recreating a button graphic that she'd been given by a client. Since I owe Laurie about 6 years worth of favors, and since I also had about 15 minutes of free time, I took on the job of recreating a button graphic in Fireworks. And of course, being an author constantly in search of new ideas to write about, the process I went through to make a button that matches the one Laurie had to work with became the subject of another tutorial.

I don't know exactly where Laurie got this button, but my guess is that as in most design jobs her client presented her with the image but did not have the original file that was used to create it. It would be great to have the original Fireworks PNG or PhotoShop PSD to work with, but in the real world this is an all too common occurrence.

In this quick look at how Fireworks can be used to take on this sort of work we'll see how an image can be deconstructed to determine how to remake the image you've been given to make a duplicate that you can edit and rework into a new design.

Black and White Forever
by Knut Kubenz - 07-Oct-09
Reader Level:

As much as I like color images, I still have a real passion for a well exposed and tonally rich black and white image. There are many ways in Photoshop to do this, but I'm always looking for some method which is quick, uncomplicated and will yield results which I can adjust to my taste.

In this tutorial you're going to learn a method for achieving these results using the Lab Color mode in Photoshop as well Layer Blend Modes. Let's begin.

HTML5 Canvas - Part 2: Basic
by Rob Williams - 05-Oct-09
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

Today we're going to continue our exploration of the Canvas element by looking at the fundamental concepts of the drawing plane, along with some basic drawing tools.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Fading Text with JavaScript
by Paul Davis - 02-Oct-09
Reader Level:

This quick fading technique will provide some visual feedback to your visitors when they have moused over a text link. All it takes is a few lines of JavaScript, a little bit of math and some time to get it working just right!

Get Smart, Speed up Work in Flash with Project Panel
by Rafiq Elmansy - 02-Oct-09
Reader Level:

In a general review of Flash features and tools, you will notice that there are some features that can help you speed up your work, that allow you to do tasks more easily and more efficiently. One of these features is the Project Panel. I have been asking myself for long time why I do not see many people use this amazing feature in Flash, or even notice it. It is a really helpful feature that allows for a better workflow and easier work process. I wanted to give more focus to this tool in this tutorial and see how it could be used to manage a project.

Clearing Floats Without Touching Your HTML
by Estelle Weyl - 30-Sep-09
Reader Level:

Yes, it is possible to clear floats without adding <br class="clearfloat" /> into your HTML. In this tutorial, we cover the old fashioned clearfloat element, and three not-so-new but not-oft used unobtrusive CSS methods of clearing floats.

Adobe Bridge CS4: View Modes for Evaluating and Comparing Your Images
by Steven Seiller - 30-Sep-09
Reader Level:

Today we are talking about Adobe Bridge CS4 and how to evaluate your images using the various review modes. These options display your images full-screen or in side-by-side comparison. Together with other Bridge tools such as labels, ratings and the loop, you can better evaluate your images to decide which ones are best for keeping.

Outstanding! Free!
by Knut Kubenz - 28-Sep-09
Reader Level:

There are times in our photography when we’d like to make parts of the image stand out more. While there are many different ways of doing this, using a blur filter of some kind along with a Layer Mask in Photoshop is the easiest and most consistent. Let’s begin.

Building Click-and-Rotate Content in Flash - Part 6
by David Stiller - 28-Sep-09
Reader Level:

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 5, of this series, we reorganized our click-and-drag functionality — keyframe code until that point — into a custom Scrubber class in ActionScript 2.0. Here in Part 6, we'll migrate this custom class to ActionScript 3.0, keeping an eye on two things: a) how little the actual principles change (not at all) and b) how the structure of AS3 necessitates certain syntax revisions. As you'll see, though, none of it gets too overwhelming.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Digital Imaging Tools Quick Tips - Part 2 Free!
by Scott Valentine - 25-Sep-09
Reader Level:

Want to grab some pixels from your 3D objects and sort your images by what lens you shot them with. Really? Of course! Check out these Digital Imaging Quick Tips.

The Digital Imaging Tools Quick Tips Series:
Digital Imaging Tools Quick Tips - Part 1
Digital Imaging Tools Quick Tips - Part 2

Introducing CMX JumpStart Berlin Free!
by Sheri German - 23-Sep-09
Reader Level:

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Berlin
by Adrian Senior - 23-Sep-09
Reader Level:

Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.

The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

HTML5 Canvas - Part 1: Introduction Free!
by Rob Williams - 21-Sep-09
Reader Level:

The upcoming HTML 5 specification promises to add support for a wide range of new and exciting web technologies. In this series we're going to focus on one of the major new players, the Canvas element, which allows for direct rendering and manipulation of vectors and images from within JavaScript.

In this first article, we'll explore what Canvas is, why it's important to us, and get a first quick look at how it can be used.

The HTML5 Canvas Series
HTML5 Canvas - Part 1: Introduction
HTML5 Canvas - Part 2: Basic
HTML5 Canvas - Part 3: Advanced Drawing Techniques
HTML5 Canvas - Part 4: Images
HTML5 Canvas - Part 5: Image Scaling and Croping Coming Soon

Adding a Neon Light Effect to Live Type in Illustrator CS4
by Darren Winder - 21-Sep-09
Reader Level:

For those of you who are familiar with Illustrator, you will realize how easy Adobe CS4 has made the process of adding effects to live type.

Adding effects to live type, you don’t have to convert your type to outlines to add an effect, if you spell the word wrong no worries just type it out.

Creating Rounded Borders in Browsers with CSS3 with an IE twist Free!
by Estelle Weyl - 18-Sep-09
Reader Level:

In the past we've generally had to add a bunch of useless HTML as hooks to add corners when making rounded corners. Now, most modern browsers understand their own versions of the CSS border-radius property, which creates rounded corners on elements. In this tutorial we learn a new method of creating rounded corners in all browsers. We'll also target Internet Explorer using a little JavaScript and CSS magic.

Making Your JumpStart Search Engine Friendly - Part 1: Setup & Structure Free!
by Trevor Longino - 16-Sep-09
Reader Level:

This two part article series discusses some of the basics of structuring a web site to help with Search Optimization, and then applies these optimization tactics to two different CommunityMX JumpStarts, Siberia and Stelvio Pass.

This is Part 1 of 2, and discusses the theory of search optimization, keyword research, buying a domain, and structuring a web site. Part 2 brings this theory and prep work into practice using some of Community MX's excellent JumpStart templates. We'll be including and editing little snippets of these JumpStarts in this article, but you'll be best served if you download both of the JumpStarts now.

Fading Images in Multiple Directions with Fireworks
by Kim Cavanaugh - 16-Sep-09
Reader Level:

One of the hallmarks of the Fireworks workflow has always been its non-destructive nature. In the standard Fireworks working environment designers work with filters and effects that remain editable even after they've been applied. And even though new Photoshop filters that do convert vectors to bitmaps have been introduced in versions of Fireworks released after the merger with Adobe, for an old-time Fireworks user like myself, we're still used to using editable effects, masks, and other tricks of the Fireworks world that we learned a long time ago.

That's generally the case—at least until you need to do something like fade an image in more than one direction. In that case even we seasoned Fireworks users have been known to take a composition and flatten it like a pancake. In this tutorial you'll learn the why and how of fading images in more than one direction and how a very simple—yet destructive—process makes this possible.

Building Click-and-Rotate Content in Flash - Part 5
by David Stiller - 15-Sep-09
Reader Level:

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 4, of this series, we explored "out of the box" implementations of the basic click-and-rotate concept. In that article, "rotating" became "scrubbing"; that is, the action that began as spinning a jet plane evolved into scrolling a list of numbers, which were converted to letters, re-interpreted as different font faces, and could even have been used to adjust the volume of an audio clip. As cool as that was, all of the code for this click-and-scrub routine was located in a keyframe script. Here in Part 5, we'll make that code portable by moving it into a custom class.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Creating a Simple - But Custom - Gallery Frame Effect
by Jim Babbage - 14-Sep-09
Reader Level:

The Add Picture Frame Command is a very simple way to add a frame around dimensions of any open image file. You pick from any of the pattern graphics available in the patterns folder. These graphics are designed to tile seamless and often get used to add a more organic feel the a vector graphic. While the patterns are kinda neat, they're a little - ummm - out there for photo frames.

You can add other seamless tiles to this folder - ones you find on the web or ones you create yourself. In this tutorial, you'll create an incredibly simple image to use as a gallery-style photo frame.

In previous tutorials, I've shown you how to create completely custom frame and matte combinations, but if you're pinched for time, this method might just do the trick.

ColdFusion Worst Practices - Part 1: Misusing CFOUTPUT Free!
by Ray West - 11-Sep-09
Reader Level:

In this series, we will try to highlight some worst practices in the use of ColdFusion syntax, features and options. These are not necessarily the kinds of things that will stop your site from working, but they are things that create bottlenecks, expose security weaknesses, or make your code difficult to read and maintain. In today's installment, we will look at the misuse of the CFOUTPUT tag.

The ColdFusion Worst Practices Series:
ColdFusion Worst Practices - Part 1: Misuing CFOUTPUT
ColdFusion Worst Practices - Part 2: Abusing Pound Signs (#)

I Like My Black and White High Contrast
by Knut Kubenz - 09-Sep-09
Reader Level:

A style for Black and White images, which is gaining quite a bit of popularity these days, is to produce an image from a color photo into a High Contrast Black and White image in Photoshop. Not only does this transformation yield an image with a lot of depth, it also enhances the image's detail as well. The process is not a tedious one and uses tools you may have already used such as the Channel Mixer and the Unsharp Mask Filter. Let's begin.

Changing Keyboard Shortcuts in Fireworks CS4
by Jim Babbage - 04-Sep-09
Reader Level:

Not happy with the existing keyboard shortcuts for Fireworks? Or perhaps you're more used to Photoshop or Illustrator shortcuts? Or maybe you just want to forge out on your own and create your own custom set? Well, the good news is you can do all of these things in Fireworks CS4. Let's have a look.

Mad About Getting Some Z's
by Tom Green - 04-Sep-09
Reader Level:

Rather than grabbing some "Z's" why not play with them in Flash CS4?

Approximate download size: 42MB

PHP Undo Delete Button in Dreamweaver
by Paul Davis - 03-Sep-09
Reader Level:

For those of us with Gmail accounts, we have seen, after deleting an email, the undo link show up on the page. Sometimes that is a real savior for me! Of course, it is also nice that I don't have to confirm each delete that I do. I looked in to a simple way to have an undo button on my delete functionality for database tables. With a few quick steps, we can make this work for you as well.

Firebug - Part 7a: The Script Tab (Basics)
by Estelle Weyl - 02-Sep-09
Reader Level:

In this section of a multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn about Firebug's Script tab. We take a look at the basic functionalities of the Script tab, including inspecting your JavaScript.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

The Rundown on ASP.NET MVC
by Joel Martinez - 31-Aug-09
Reader Level:

ASP.NET MVC is the latest web framework from Microsoft. This article will give an overview of the product, compare it with ASP.NET WebForms, and show you how easy it is to create functionality with the framework.

Creating a Form Confirmation Page in PHP
by Tom Muck - 27-Aug-09
Reader Level:

A confirmation page is the last page you reach before submitting a form -- you fill in the fields, click submit, review your information, and then submit one final time. Confirmation pages can be built in different ways. I'll show one method, using PHP, that utilizes hidden form fields to post to your final action page. I'll leave the bells and whistles to the reader (validation, CSS, etc.) and show the meat of the technique that is being used.

Create a Group as Mask Keyboard Shortcut for Fireworks
by Kim Cavanaugh - 26-Aug-09
Reader Level:

One of the minor gripes I've often heard about Fireworks is the lack of a keyboard shortcut that invokes the "Group as Mask" command. "As frequently as that option is used in Fireworks," goes the common complaint, "why is it that I have to always go to Modify > Mask > Group as Mask to mask two objects?"

Luckily, you don't have to go to all of that effort. In fact, in a few minutes you can create your own custom keyboard shortcuts in Fireworks and be happily using your new power to avoid those repeated mouse trips to the Menu Bar. While there are lots of ways that you can customize and extend the Fireworks workspace, in this article you'll focus on a real time-saver—the ability to mask two objects with the press of a couple of keys.

Adding a Pencil Scribble Effect to Live Type in Illustrator CS4
by Darren Winder - 24-Aug-09
Reader Level:

For those of you who are familiar with Illustrator, you will realize how easy Adobe CS4 has made the process of adding effects to live type. Adding effects to live type means you don’t have to convert your type to outlines to add an effect. If you spell the word wrong, no worries, just type it out.

Skin Tones Still Too Red?
by Knut Kubenz - 21-Aug-09
Reader Level:

If you've ever gone through the motions of color correction in either Levels or Curves, I'm sure you've realized they don't always do all you want. This next quick tutorial will give you a way to extend and improve upon the corrections in Levels and Curves with particular focus on skin tones which may still be too red.

The tools we'll be using in Photoshop (I'm using version CS4) are simple and easy to use. Let's begin.

CMX JumpStart: Stelvio Pass - Gallery
by Adrian Senior - 19-Aug-09
Reader Level:

The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.

The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.

Creating a Black and White Infrared Look with Adobe Camera RAW
by Jim Babbage - 18-Aug-09
Reader Level:

For the last three years, I've had the great pleasure of a week's camping in Obatanga Provincial Park with Tom Green and our sons. It's a great opportunity to connect with one another, wind down, recharge batteries for the coming semester and just enjoy being in the outdoors.

It should come as no surprise that my camera makes the trip as well, and during our various side trips, hikes and paddles, I try my best to capture the essence of my experience in the Near North, and the wonder of the natural world around me. As much as possible, I make all my images using the RAW format of my Nikon D200.

While shooting, I made many images that I planned to convert to grayscale. I spent more time studying contrast and texture rather than being concerned with rich coloration in the scene. And this is where the idea for this tutorial sprang from.

If you're interested in learning how to make non-destructive edits to your photographs using Bridge and Adobe Camera Raw, you're probably already feeling compelled to read on . . .

Approximate download size:16MB

Gray Skies to Blue Skies in Just a Few Steps
by Knut Kubenz - 17-Aug-09
Reader Level:

The weather is always a challenge when shooting outdoors and more times than not you'll run across scenes which work well, however, there's not enough blue in the sky or water or the leaves are just not the right color for the season to really express what autumn is all about. Just a little more color here or there would make a greater impact.

While there are many different techniques in Photoshop to enhance the colors locally in an image, I'd like to show you a quick method using the Color Balance Adjustment Layer, which will not damage your original image and yet give you complete and quick control over any local color change you need in your image.

3D Power in Adobe Illustrator
by Rafiq Elmansy - 14-Aug-09
Reader Level:

The 3D dialog box in Adobe Illustrator is a very helpful tool which enables you to convert paths into 3D objects, which is known in the 3D world as Revolving.

The 3D features in Illustrator are actually effects that are applied to the object and can be edited by double-clicking the Effect layer in the Appearance panel. However, the reality is the object is still in 2D format and Illustrator applies the 3D effects over it which is unlike actual 3D programs that build the 3D objects from full information available for each of the three dimensions of the object.

For this article I thought the best way to understand the 3D features in Adobe Illustrator would be to give real life examples about each feature which includes Extrude and Bevel and Revolve and Rotate.

Approximate download size: 1.9MB

Creating a Form Confirmation Page in ColdFusion
by Tom Muck - 12-Aug-09
Reader Level:

A confirmation page is the last page you reach before submitting a form -- you fill in the fields, click submit, review your information, and then submit one final time. Confirmation pages can be built in different ways. I'll show one method using ColdFusion that utilizes hidden form fields to post to your final action page. I'll leave the bells and whistles to the reader (validation, css, etc) and show the meat of the technique that is being used.

Displaying Horizontal List Navigation in Dreamweaver's Design View
by Adrian Senior - 12-Aug-09
Reader Level:

How to stop your horizontal list navigation from moving out of line in Dreamweaver's design view. In this article we will look at what causes this annoying problem and two different ways it can be corrected.

Adding a Stroke to Live Type in Illustrator CS4
by Darren Winder - 07-Aug-09
Reader Level:

For those of you who are familiar with Illustrator, you will realize how easy Adobe CS4 has made the process of adding a stroke to live type. Adding a stroke to live type means you don't have to convert your type to outlines. If you wish to alter the word, or it is misspelled, no worries just retype it.

Firebug - Part 6: HTTP Requests & Download Speed
by Estelle Weyl - 07-Aug-09
Reader Level:

In developing a web site, you need to reduce download time, troubleshoot AJAX, ensure images are loading correctly, and make sure you don't have any missing files. Wish there was a tool that could do all that? There is!

In this section of our multi-part series about Firebug, the premier (and free) web development tool for Firefox, we learn all about Firebug's Net panel. You'll learn how to inspect HTTP requests and responses, analyze page load time, display AJAX responses and look at what gets posted on form submission. These are all things you can do within Firebug's Net panel. We'll show you how.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug Part 7a: The Script Tab (Basics)

Embedding Flash Content, Demystified - Part 8: Using JavaScript Continued
by David Stiller - 05-Aug-09
Reader Level:

There are numerous ways to embed Flash content in a website, from Dreamweaver's Insert > Media menu (for SWF files, Flash Paper, FLV files, and more) to the publishing templates provided by the Flash authoring tool itself. In spite of these varied options — or perhaps because they're so varied — many people lack confidence when it comes to marrying Flash content with an HTML document. If this strikes a chord with you, then lay your fears to rest. In this series, you'll cut through the complexity, find out what your application's auto-generated embedding code actually means, and learn to avoid a handful of common Flash-related pitfalls.

In the last article, we delved into embedding with JavaScript, using the popular (and free) SWFObject — specifically, the dynamic approach for that solution. Here in Part 8, we'll take a second look, this time at the static approach, which requires a bit more typing to code up. Why learn both? First, because it's always good to know your options. Second, because the SWFObject static approach is very close to the solution used by Dreamweaver CS4. If you prefer letting Dreamweaver do the work, this article may at least help you understand better what's going on.

The Embedding Flash Content Demystified Series:
Embedding Flash Content Demystified - Part 1: Introduction
Embedding Flash Content Demystified - Part 2: The Traditional Approach
Embedding Flash Content Demystified - Part 3: Optional Parameters
Embedding Flash Content Demystified - Part 4: Optional Parameters Continued
Embedding Flash Content Demystified - Part 5: Optional Parameters Concluded
Embedding Flash Content Demystified - Part 6: Common Pitfalls
Embedding Flash Content Demystified - Part 7: Using JavaScript
Embedding Flash Content Demystified - Part 8: Using JavaScript (cont)
Embedding Flash Content Demystified - Part 9: Using JavaScript (concluded)

Formatting Dates in SQL Server
by Ray West - 03-Aug-09
Reader Level:

Whether because of a national standard or a particular file format, a common issue in SQL is how to retrieve a date value in a certain date format. As we have discussed before, SQL Server in particular stores dates as a number of seconds (and ractions of a second) since the epoch. So, in reality, dates almost always come out of SQL Server formatted differently than they are stored. If you want something other than the standard 2009-08-02 16:10:11.620 (YYYY-MM-DD hh:mm:ss.mmm) have to tell SQL Server in your query how you want the date formatted. Since SQL Server does not really have a date format function (like you might find in ColdFusion) you will need to use the convert function to accomplish this.

File Uploads with PHP - Part 4: Storing File Information in a Database
by Steven Seiller - 31-Jul-09
Reader Level:

So far in this series, we have treated the uploaded file by saving it directly to the filesystem of the web server. So, now what? In most applications where files are uploaded to the server, typically some of the file information is stored in a database.

In this fourth part of the series, we will go deeper into the process of storing file information in a database. This part demonstrates the process of creating a BLOB data field in MySQL and storing uploaded files in it. Also demonstrated is the process of retrieving files from the database and downloading them through the browser.

The File Uploads with PHP Series:
File Uploads with PHP - Part 1: Form and File Handling
File Uploads with PHP - Part 2: Multiple Files
File Uploads with PHP - Part 3: Type or Size Restrictions
File Uploads with PHP - Part 4: Storing File Information in a Database

Checking Against Data In Multiple Columns
by Ray West - 31-Jul-09
Reader Level:

I am amazed every day by the complicated ways that people need to look at the data in their databases. On a fairly regular basis, I am asked to run queries and reports in ways that were never anticipated when the database was designed or that the original designer did not take into consideration. It often takes some creative work to get to the desired goal.

Creating a Photo Collage Banner in Fireworks
by Jim Babbage - 30-Jul-09
Reader Level:

Masking one object with another truly opens up a lot of creative potential for a variety of design goals, be it a page layout for an advertisement or a web site banner. It doesn't have to be mind-numbingly difficult either. In this tutorial, you will work with several high resolution images and through a combination of scaling and masking you will build a web page banner for a fictitious butterfly conservatory.

Scaled version of the final banner

You can work with your own files if you like, but I have included the high resolution images in the support files, and I'll base the tutorial on these files.

Approximate download size: 16.7MB

Edge Sharpening—A USM Alternative
by Knut Kubenz - 29-Jul-09
Reader Level:

Think of sharpening an image and your thoughts will in most cases turn almost automatically to the Unsharp Mask Filter. It's probably the first tool we all started out with and, for the most part, it does a very good job, thank you.

The USM (Unsharp Mask Filter) tends to globally sharpen an image, which isn't always necessary and sometimes can even be overdone. The kind of sharpening which I'll demonstrate in this tutorial, is used primarily to sharpen the edges of an image.

In this tutorial we'll look at the Emboss Filter in Stylize, together with Hue/Saturation and Layer Blending Mode settings to complete the desired effect.

jQuery Quickshots - Summarizing Form Data: Part 3
by Rob Williams - 28-Jul-09
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle.

In this article, the third part of the previous "jQuery Quickshots - Summarizing Form Data" series, we're going to take our form summary to the next level by providing the user with inline editing capabilities.

The jQuery Summarazing Form Data Series:
jQuery Quickshots - Summarizing Form Data: Part 1
jQuery Quickshots - Summarizing Form Data: Part 2
jQuery Quickshots - Summarizing Form Data: Part 3

Adding a Gradient to Live Type in Illustrator CS4
by Darren Winder - 27-Jul-09
Reader Level:

For those of you who are familiar with Illustrator, you will realize how easy Adobe CS4 has made the process of adding a gradient to live type.

Adding a gradient to live type, means you don’t have to convert your type to outlines just to add the Gradient. If you spell the word wrong, no worries, just retype it.

Professional Adobe Flex 3: Creating an ActionScript Application Free!
by Joseph Balderson - 27-Jul-09
Reader Level:

In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This a landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.

In a Community MX exclusive, the following is an excerpt from Chapter 6: Using Flex Builder 3. In this tutorial you will build a simple ActionScript application, and learn all about the undocumented [SWF] metadata tag to configure the Flash Player publishing properties.

Professional Adobe Flex 3

Embed a 3-D CoolIris Image Wall in Your Site Using Media RSS Feeds
by Kim Cavanaugh - 24-Jul-09
Reader Level:

I'm a huge fan of the awesome browser plugin known as CoolIris which can be used to browse news, video sites, and image collections in a 3-dimensional wall of thumbnails that you can zoom through using the scroll wheel on your mouse and navigate by dragging left or right. I find the interface to be one of the freshest new methods to come along in a long time for viewing information online, completely breaking with the familiar drill-down methods that most sites use. Even sites such as Flickr or YouTube look better when seen through the CoolIris interface and the plugin can even be used as a PowerPoint replacement to show a presentation in a dynamic new way, as I previously wrote about here at Community MX.

One of the more dynamic features of CoolIris are the developer tools that allow you to use the power of CoolIris to embed a wall of images on a page in your own site. In the first article of this series you learned how to embed a CoolIris wall of images in a page of your own site using the CoolIris developer sample embed code and a feed from Flickr.com. In this article you'll learn how to use the free PicLens Publisher program, to make your own media RSS file and display images that are on your web server.

Both of these methods allow you to embed a Flash movie on any page you wish and read an RSS feed from a service such as Flickr, or read from your own custom RSS file that points to any folder you choose on your site. And, while the idea of mucking around with a bunch of code and Flash variables (what?) to customize your CoolIris wall of images might seem daunting, you'll learn the process is quite simple.

The Embed a 3-D CoolIris Image Wall in Your Site Series:
Embed a 3-D CoolIris Image Wall in Your Site Using Flickr Feeds
Embed a 3-D CoolIris Image Wall in Your Site Using Media RSS Feeds

File Uploads with PHP - Part 3: Type or Size Restrictions
by Steven Seiller - 23-Jul-09
Reader Level:

To handle file uploads, use built-in PHP functionality. File uploads can be integrated in applications such as form submissions, file sharing, image uploads or FTP replacement. PHP features a superglobal array specifically for uploaded files as well as specific functions for handling uploaded files.

Part Three of this script will demonstrate how to limit file uploads based on the size or type of file. These checks will be done with data supplied by the common gateway interface and built-in PHP functions. Also, we'll discuss important security considerations which need to be addressed when limiting file acceptance. Finally, we'll look at reporting file upload errors.

The File Uploads with PHP Series:
File Uploads with PHP - Part 1: Form and File Handling
File Uploads with PHP - Part 2: Multiple Files
File Uploads with PHP - Part 3: Type or Size Restrictions

The CSS Starter Page Series - Part 9: Working with the Conditional Comment
by Sheri German - 22-Jul-09
Reader Level:

Welcome back to another installment of the CSS Starter Page series. We've spent quite a bit of time on navigation systems and Spry Widgets in the most recent tutorials. Now we'll switch gears to work with something a little less sexy, and that is the Conditional Comments that reside in the heads of most CSS Starter Pages. These Conditional Comments address issues that make layouts look different in various versions of Internet Explorer browsers. The problems arise when an unsuspecting designer makes certain modifications to the layout, and then fails to realize that those changes require some adjustments to the Conditional Comments as well.

In this tutorial, we'll look at what we need to change in the IECC (Internet Explorer Conditional Comments) when we want to balance the top headings in the columns and when we need to change the width of the sidebar column.

This tutorial includes support files so you can play along at home.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet

A Quick Look at Hue/Saturation
by Knut Kubenz - 20-Jul-09
Reader Level:

If you're just starting out in Photoshop, or if you've been at it for awhile, you've probably realized there are numerous ways to make color changes to images. The Color Balance Dialog, Selective Color, Levels, Replace Color and many more are all a part of the Photoshop arsenal. One of them however, Hue/Saturation, is not used too often and can seem to be a bit intimating at first glance.

In this tutorial I want to take you through some of the basic functions and defining characteristics of Hue/Saturation, without getting you too involved with all the numbers which seem to appear out of nowhere in the adjustments of this tool. I'll also show you some very intuitive methods for changing Hue, Saturation and Lightness and some special new features available in CS4.

jQuery Quickshots - Summarizing Form Data: Part 2
by Rob Williams - 17-Jul-09
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle.

In this article, a follow-up to the previous "jQuery Quickshots - Summarizing Form Data: Part 1", we're going to expand on the idea of form summarization to point out errors to users in the summary and clean up some of the problems from last time.

The jQuery Summarazing Form Data Series:
jQuery Quickshots - Summarizing Form Data: Part 1
jQuery Quickshots - Summarizing Form Data: Part 2
jQuery Quickshots - Summarizing Form Data: Part 3

Appcelerator Entourage - Part 5: Expression Conditions
by Arman Danesh - 16-Jul-09
Reader Level:

This is the fifth article in an on-going series about building rich internet applications with Appcelerator Entourage. Appcelerator Entourage is a framework combining client-side JavaScript libraries with server-side service brokers to create fully integrated applications on a variety of server technologies, ranging from PHP to Rails to .Net.

In the last article we learned about the basics of Entourage's expressions. This article continues with the subject by taking a look at the range of conditions which can be used in Entourage expressions.

This series is intended for developers comfortable with HTML, JavaScript and the concepts of AJAX. The series doesn't require previous experience with JavaScript libraries, such as jQuery or Prototype, but this certainly helps as the concepts used in these libraries are important to mastering Entourage.

The Appcelerator Entourage Series:
Appcelerator Entourage - Part 1: An Overview
Appcelerator Entourage - Part 2: Getting Started
Appcelerator Entourage - Part 3: The Message Queue
Appcelerator Entourage - Part 4: Expressions
Appcelerator Entourage - Part 5: Expression Conditions

Creating a Grid Mask Design
by Jim Babbage - 15-Jul-09
Reader Level:

I was wandering the web recently, looking for tutorial inspiration, and happened upon Veerle Pieters' blog. Veerle was asked how to create a grid mask design and she went on to show an excellent original design of her own using Photoshop and Illustrator.

Well, you know me, if I find a cool Photoshop tutorial, the first thing I wonder is if the job can be done using Fireworks. And the answer in this case is yes indeed. And - even cooler - you can do it all without leaving Fireworks.

Here's my finished artwork:

final grid mask design

Get ready to dig into Fireworks and create your own grid mask design.

Approximate download size: 4.5MB

Extending Dreamweaver CS4: Part 4 - Digg This!
by Adrian Senior - 14-Jul-09
Reader Level:

In Part 4 of this series on Extending Dreamweaver CS4, we will be looking at the Digg widget from the Adobe web site. The Digg widget is an excellent way to keep fresh content on your site. You can open the story links in a new window to ensure that you don't lose visitors. You can choose stories that are relevant to your own web site's content or you can take stories from a particular author.

As with all the widget add-ons in this series, the widget is free, you need only download the widget in extension form and install it through your Extension Manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Embed a 3-D CoolIris Image Wall in Your Site Using Flickr Feeds
by Kim Cavanaugh - 14-Jul-09
Reader Level:

I'm a huge fan of the awesome browser plugin known as CoolIris which can be used to browse news, video sites, and image collections in a 3-dimensional wall of thumbnails that you can zoom through using the scroll wheel on your mouse and navigate by dragging left or right. I find the interface to be one of the freshest new methods to come along in a long time for viewing information online, completely breaking with the familiar drill-down methods that most sites use. Even sites such as Flickr or YouTube look better when seen through the CoolIris interface. The plugin can even be used as a PowerPoint replacement to show a presentation in a dynamic new way, as I previously wrote about here at Community MX.

One of the more dynamic features of CoolIris are the developer tools that allow you to use the power of CoolIris to embed a wall of images in your own site. In this article you'll learn how to use the first of two methods for embedding images in a page of your own site using the CoolIris developer tools and a feed from Flickr.com.

In the next article of this mini-series you'll learn how to use the free PicLens Publisher program, to make your own media RSS file and display images that are on your web server.

Both of these methods allow you to embed a Flash movie on any page you wish and read an RSS feed from a service such as Flickr, or read from your own custom RSS file. While the idea of mucking around with a bunch of code and Flash variables (what?) to customize your CoolIris wall of images might seem daunting, as you'll learn the process is quite simple.

The Embed a 3-D CoolIris Image Wall in Your Site Series:
Embed a 3-D CoolIris Image Wall in Your Site Using Flickr Feeds
Embed a 3-D CoolIris Image Wall in Your Site Using Media RSS Feeds Coming Soon

Live Trace In Illustrator CS4
by Darren Winder - 13-Jul-09
Reader Level:

For this tutorial you will need to use a photograph, you can convert your object into Live Trace. The end product is amazing. Use the features in Live Color; have a little fun.

I will be using Adobe Illustrator CS4 for this tutorial. However if you have CS2 or CS3, you should not have any problems following along.

File Uploads with PHP - Part 2: Multiple Files
by Steven Seiller - 09-Jul-09
Reader Level:

In Part 1, we explored a script which provided you the basic functionality of handling an uploaded file by storing it on the server. The form demonstrated the enctype attribute as well as the file input. The script used built-in PHP functions for handling the uploaded file and moving it on the server. For convenience, we also changed the file permissions to ensure user can access it on the server.

In Part 2, we will explore the ability to process multiple file uploads to give you greater control over what users may upload.

The File Uploads with PHP Series:
File Uploads with PHP - Part 1: Form and File Handling
File Uploads with PHP - Part 2: Multiple Files
File Uploads with PHP - Part 3: Type or Size Restrictions

Creating Photoshop Floral Brushes in Illustrator
by Rafiq Elmansy - 09-Jul-09
Reader Level:

The magic behind Adobe Photoshop is not the tools themselves; it is the tricks and tips that we can do with these tools. Photoshop tools are very flexible and let you customize and create your own color palettes, patterns, action, brushes, and more. When Adobe began to focus on the integration between its products, Photoshop became more integrated with other Adobe tools such as Illustrator, Flash, After Effects,.etc.

This article hacks on the the integration between Adobe Illustrator and Photoshop to create high resolution floral brushes that are originally built in Illustrator as vectors. We will copy the vector floral artwork and paste it into Photoshop, where we can then convert them to Photoshop brushes. Also, we will learn how to create sets of floral brushes and save them for further use.

The download files for this tutorial contain floral brush samples in both vector and brushes format to help you learn more about how to create brushes in Illustrator and then convert them into Photoshop brushes.

Fiery Photoshop Soap Bubble - Part 2
by Scott Valentine - 08-Jul-09
Reader Level:

Following up on Part 1 of this tutorial, we continue with applying textures to a 3D object, and rendering the final result. Warm up your copy of Photoshop CS4 Extended, cause we're gonna give it a work out!

The Fiery Photoshop Soap Bubble Series
Fiery Photoshop Soap Bubble - Part 1
Fiery Photoshop Soap Bubble - Part 2

Flex Power Tools: Using Flex Builder and FDT in The Same Workflow Free!
by Joseph Balderson - 02-Jul-09
Reader Level:

In my everyday programming as a Flex and Flash Platform developer, it's up to me to keep tabs on the best tools to enable me to do my work with the greatest ease and with the most efficiency. In other words, call it lazy or efficient, I just want to be able to code with the greatest of ease so I can focus more on building and less on typing.

In this tutorial, we're going to solve the challenging task of getting two of the most impressively featured Flex IDEs, Flex Builder and FDT, to work seamlessly in the same workflow, in the same eclipse installation, and even in the same project. The Flex coding workflow holy grail, one might say. So that when you're coding a Flex project, you have a choice of using the incredible code intelligence features of FDT, or the native features of Flex Builder, in the same project.

Note: this is an advanced tutorial, so you need to be familiar with using Eclipse-based tools.

FDT compilation with Design View

Look Ma, FDT compilation with Flex Builder design view!

Infra Red and Adobe Camera Raw Are Great Friends
by Knut Kubenz - 02-Jul-09
Reader Level:

I'm sure most of you who have been with photography for awhile, still remember the painstaking process of creating an Infra Red (IR) image from scratch. Along with the issues of focusing an IR image, you had to be concerned with ambient temperatures and film processing techniques to end up with what would, if everything went right the first time, a spectacular scene consisting of a stark sky with puffy white clouds and the general landscape of trees and grass taking on a surreal cotton candy fairyland appearance. The entire scene was rendered in bold tones of black and white. Those were the days, tedious at times, but eventually it was all worthwhile.

Well today you can still achieve all the splender of an IR image effect with a lot less effort and a lot more control. Photoshop and Adobe Camera Raw (ACR) combine together to give remarkably brilliant IR effects from any color image you might have kicking around. It's quick and easy.

Quickshot: Enforcing Case Sensitivity in SQL Server Free!
by Ray West - 01-Jul-09
Reader Level:

If you are paying attention to security in your online applications, then you are likely encouraging your users to select strong passwords that contain numbers, special characters and letters that are both upper and lower case. Without special attention to your database settings, however, SQL Server will treat upper and lower case characters as equivalent to one another, causing you to loose a significant part of the strength of your passwords.

In this article, we will show a quick and simple way to have SQL Server enforce case sensitivity.

Extending Dreamweaver CS4: Part 3 - Phatfusion SortableTable
by Adrian Senior - 26-Jun-09
Reader Level:

In Part 3 of this series on Extending Dreamweaver CS4 we will be looking at the Phatfusion SortableTable widget from the Adobe web site. The Phatfusion SortableTable widget provides your end users with a method to sort an HTML table by clicking on the column headers. This functionality allows your users to sort a table to meet their requirements thus making the information they need far more accessible than trying to retrieve it from a static table. As with all the spry widget add ons in this series the widget is free, you need only download the widget in extension form and install it through your extension manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

The CSS Starter Page Series Part 7: Adding A Spry Menu Bar
by Sheri German - 26-Jun-09
Reader Level:

In this installment of the CSS Starter Page series, we are going to segue into exploring Spry widgets by continuing where we left off - that is with trying out different navigation schemes. We're going to add a Spry Menu Bar to the Photo Gallery page of our layout to accommodate the numerous sub categories of images we might have in that section of the site.

This tutorial will take you through the following tasks:

Setting up a site definition - very important for ensuring that the Spry Widget works once you upload the files
Inserting the Spry Menu Bar widget
Customizing the menu items (link text) for each link and its sublinks
Styling the menu

Embedding Flash Content, Demystified - Part 5: Optional Parameters Concluded
by David Stiller - 25-Jun-09
Reader Level:

There are numerous ways to embed Flash content in a website, from Dreamweaver's Insert > Media menu (for SWF files, Flash Paper, FLV files, and more) to the publishing templates provided by the Flash authoring tool itself. In spite of these varied options — or perhaps because they're so varied — many people lack confidence when it comes to marrying Flash content with an HTML document. If this strikes a chord with you, then lay your fears to rest. In this series, you'll cut through the complexity, find out what your application's auto-generated embedding code actually means, and learn to avoid a handful of common Flash-related pitfalls.

Here in Part 5, we'll investigate a final round of optional embed parameters. These are the ones not displayed as choices in the Flash authoring tool's Publish Settings dialog box, but available if you know them.

The Embedding Flash Content Demystified Series:
Embedding Flash Content Demystified - Part 1: Introduction
Embedding Flash Content Demystified - Part 2: The Traditional Approach
Embedding Flash Content Demystified - Part 3: Optional Parameters
Embedding Flash Content Demystified - Part 4: Optional Parameters Continued
Embedding Flash Content Demystified - Part 5: Optional Parameters Concluded
Embedding Flash Content Demystified - Part 6: Common Pitfalls
Embedding Flash Content Demystified - Part 7: Using JavaScript
Embedding Flash Content Demystified - Part 8: Using JavaScript (cont)
Embedding Flash Content Demystified - Part 9: Using JavaScript (concluded)

Photoshop—Invisible Ink and Decoder Rings
by Knut Kubenz - 24-Jun-09
Reader Level:

Over the years we've gone over a lot of different tutorials using Photoshop and they've, for the most part, been very practical and creative solutions to everyday situations as well as unusual situations. Everything from complete digital make-overs in Photoshop to Pasta Verde—Wait a minute, Pasta Verde is what I'm having for dinner tonight. Suffice to say, all work and no play makes Jack or Jill a dull Photoshop user, so I thought this next tutorial might want to bring out the secret agent in you.

Using some very simple tools, such as the Text Tool and Levels in Photoshop, you'll learn how to encrypt a secret message in one of your photographic images which you could send off to another secret agent. Let's begin.

Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization Free!
by Jim Babbage - 23-Jun-09
Reader Level:

Adobe Fireworks CS4 has quite a few cool features, but if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book , my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.

cover shot of Fireworks Classroom in a Book

In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along.

This is the second installment and the series and covers the following topics:

Text Basics
Optimization and working with previews
Creating a simple rollover

Approximate download size: 6.5MB

Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping

Fiery Photoshop Soap Bubble - Part 1 Free!
by Scott Valentine - 22-Jun-09
Reader Level:

I've seen fire, and I've seen rain... er... soap. But not at the same time. Until now! Break out those latent 3D skills and come with me as we bend Photoshop to our will and place a little lick of fire into a soap bubble!

This tutorial is aimed at intermediate to advanced users, and goes really quick. But don't let that scare you - the steps are all there, and we have forums to help you with the details and concepts. Photoshop CS4 Extended has brought 3D well into the realm of every user. So let's go burn some soap!

The Fiery Photoshop Soap Bubble Series
Fiery Photoshop Soap Bubble - Part 1
Fiery Photoshop Soap Bubble - Part 2 Coming Soon

File Uploads with PHP - Part 1: Form and File Handling
by Steven Seiller - 22-Jun-09
Reader Level:

To handle file uploads, use built-in PHP functionality. File uploads can be integrated in applications such as form submissions, file sharing, image uploads or FTP replacement. PHP features a superglobal array specifically for uploaded files as well as specific functions for handling uploaded files.

Part One of this script will demonstrate how to set up an HTML form for file uploading as well as a PHP script example for processing uploaded files. This demonstration script can be used as an FTP replacement, providing a method for laymen to upload files to the server without access to an FTP client.

The File Uploads with PHP Series:
File Uploads with PHP - Part 1: Form and File Handling
File Uploads with PHP - Part 2: Multiple Files
File Uploads with PHP - Part 3: Type or Size Restrictions

Extending Dreamweaver CS4: Part 2 - jQuery UI Calendar
by Adrian Senior - 19-Jun-09
Reader Level:

In Part 2 of this series on Extending Dreamweaver CS4, we will be looking at installing a date picker widget from the Adobe web site. The date picker is one of many jQuery UI widgets that are available in the Adobe web site's widgets section. A date picker is a very useful option to have in your armoury and one that can be deployed in several different ways to enhance your web site's functionality.

In this tutorial, we will look at how the date picker can be used and how it can be changed from the default American style of date format to the UK date format.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Extending Dreamweaver CS4 - Part 1: The TNC Lightbox Free!
by Adrian Senior - 18-Jun-09
Reader Level:

Dreamweaver has a little gateway hidden within it that leads to the land of magic! Have you ever used this gateway? Do you know where it is? If the answer to those two questions is no then you should read on and be prepared to meet the first of our free items of treasure.

When you buy Dreamweaver you buy so much more than what comes on the disk. You can become involved in some great communities like CMX, and you can access widgets and extensions that will make your work flow faster and therefore make you more productive and cost effective in what you do.

Not all widgets and extensions come with a price tag, as we shall see as we set off on a series that will introduce to some of the fantastic functionality that can be added to Dreamweaver in no more than a couple of clicks of your mouse! Read on...

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds
by Adrian Senior - 17-Jun-09
Reader Level:

CSS Layout Backgrounds, of all the CSS visual aids this is probably my favourite. Activating this option de-clutters design view completely, it takes you right down to the bare bones and really lets you get to grips with the structure of the layout. If I am having a problem with a layout this where I go to, it just makes everything very easy to see. Background images are removed and all your layout elements are given random background colours, it is uncanny how this de-cluttering makes everything so easy to read in design view.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

jQuery Quickshots - Dependent Selects
by Rob Williams - 16-Jun-09
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. In today's article we'll look at how to conquer one of those "should be a lot easier than it really is" common tasks in web development: dependent select lists.

Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools Free!
by Jim Babbage - 15-Jun-09
Reader Level:

Adobe Fireworks CS4 has quite a few cool features, but if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book, my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.

In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along.

Approximate download size: 3.9MB

Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping

From Jumpstart to Composition Demo in Fireworks CS4 Free!
by Kim Cavanaugh - 12-Jun-09
Reader Level:

One of the great new tools that comes with Fireworks CS4 is one that is easy to overlook—the ability you now have to take a composition and publish all of the visible elements to a Flash-based demonstration of your design. Using this new feature along with the Master Pages that are part of Fireworks you can quickly create a design composition and publish it to your server for client review.

In this tutorial you’ll be provided with the source Fireworks PNG file that was developed using Sheri German's original design for the Baltimore Jumpstart series as its base.

This source file has been broken up into multiple pages to demonstrate how a comp might be prepared that shows multiple layouts, color schemes, and page elements. From there you’ll learn how to use the incredibly easy Demo Current Document command to publish all of the pages into one tidy package that you can upload and provide to a client by way of a link.

CMX JumpStart: Siberia
by Adrian Senior - 11-Jun-09
Reader Level:

Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.

The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Dreamweaver's Built-In CSS Help Features: Part 2 - CSS Layout Box Model
by Adrian Senior - 10-Jun-09
Reader Level:

In Part 1 of this series, we looked at the CSS Layout Outlines. While this option provided us with clear demarcation by setting a border against our elements, it didn't provide any feedback on the layout itself.

In Part 2 we will be looking at the CSS Layout Box Model option. The CSS Layout Box Model visual aid is a very useful feature, a feature that provides both a method of selecting individual elements and gaining feedback about the CSS rules set against the selected element. All this information can be accessed directly from within Dreamweaver's design view and is available in text and visual design formats.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

JpGraph: PHP Graphs & Charts On-The-Fly Free!
by Steven Seiller - 09-Jun-09
Reader Level:

JpGraph is an object-oriented PHP library for creating graphs on the fly with your selected data for display on web pages. The library features a wide range of graph types with which you can draw with your own data. You can supply data from a database, a text file, a form or even with a GET query string.

Generating web-based graphs for display on web pages can be useful for business intelligence or marketing collateral. The advantage of creating a graph dynamically from data is that the visitor always sees an up-to-date chart which reflects current data.

This tutorial will briefly give you an overview of the installation procedure and how to create several graphs, including the source code. The JpGraph library is easy to use, features a wide range of customization options as well as many graph types.

The Joy of Easing
by Tom Green - 09-Jun-09
Reader Level:

Feeling like a "Lazy Animator"? How about creating animations without animating anything and letting Flash CS4 do the heavy lifting for you.

Approximate download size: 13.2 MB

End of a Rainy Day
by Knut Kubenz - 08-Jun-09
Reader Level:

Have you ever tried to recreate those dramatic beams of light which sometimes happen after a brief rain storm has passed your area? They can be quite spectacular to photograph too, but even if you didn't have your camera with you at the time, you can still get this effect anytime you want using a few tools and techniques in Photoshop. Let's begin.

Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines Free!
by Adrian Senior - 05-Jun-09
Reader Level:

Dreamweaver, over the last version or two, has included some very nice CSS help features. The features I'm referring to are termed Visual Aids and can be found within the Visual Aids drop-down menu that can be accessed from the document toolbar. There are several different CSS features within this area and we will look at them one by one to gain a good understanding of each and see how they can benefit our workflow.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

Text Overlay Effect
by Scott Valentine - 05-Jun-09
Reader Level:

I'm betting you have some pictures that you really enjoy, that you'd like to share with others, but are tired of the same old thing... Here's a little trick using some text that will take those favorite shots and make them presentation pieces!

Best Practices for Creating Custom Web Site Search Functions - Part 2: Pre-Filled Text in Search Box
by Steven Seiller - 04-Jun-09
Reader Level:

The fourth of 11 Things I Hate About Web Site Search Functions is when pre-filled text is not automatically cleared when the visitor clicks in the search field. Having some text showing in the search box to prompt a visitor is only helpful with the rudimentary onFocus JavaScript snippet which clears the field when a visitor clicks on it. To not have a search text box clear itself of its pre-filled text is just lazy programming.

While the onFocus snippet is easy to implement, it is not the full solution. On one of my web sites, I noticed in the search statistics that the pre-filled text is by far the most common search query. What this means is that, for some reason, visitors are clicking the submit button before entering a search term. Recently, while building a new client site I decided to prevent this problem with a more deluxe version of search box management.

The Best Practices for Creating Custom Web Site Search Functions Series:
Best Practices for Creating Custom Web Site Search Functions - Part 1
Best Practices for Creating Custom Web Site Search Functions - Part 2: Pre-Filled Text in Search Box

A Beginner's Guide to Spry - Part 5: Spry Menu Bar
by Adrian Senior - 03-Jun-09
Reader Level:

The Spry Menu Bar provides a means of inserting a flyout menu system into your web site layout that is both easy to build and easy to edit. All maintenance is completed from within Dreamweaver's Property inspector and can be completed in a just a couple of clicks. It really is that simple.

If you haven't used the Spry Menu Bar you really need to take a good look at its capabilities and flexible options, I think you might be pleasantly surprised!

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

Motion in Flash CS4 with No Keyframes
by Tom Green - 02-Jun-09
Reader Level:

How would you like to create a Flash CS4 animation that "dippsy-doodles" all over the screen? Sound like fun? How would you like to do the animation with zero keyframes? If that caught your attention, then this video tutorial is for you.

Approximate download size: 9 MB

jQuery Quickshots - Creating Your Own Selectors
by Rob Williams - 01-Jun-09
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "Quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. Today's article will show you just how easy it is to extend jQuery by creating your own custom selectors.

Customizing a WordPress Blog - Part 7: Editing Themes with Fireworks CS4
by Kim Cavanaugh - 29-May-09
Reader Level:

The goal of this series of articles is to show you how to take what is already an awesome package—including an almost limitless supply of free design themes—and customize the look and feel of a WordPress site to meet your goals. Through this series you'll be learning how to use some of the design tools from Adobe, such as Fireworks and Dreamweaver, as well as free open source browser plugins to modify the design of a WordPress installation.

In this, the seventh article in the series, you'll learn how to use Dreamweaver and Fireworks together to capture the essential information needed for customizing a WordPress theme then take that information into Fireworks to completely customize the look of your blog. This article will show you how to capture a theme that you've opened in Dreamweaver and how to setup your Fireworks document to make the customization quick and easy.

The Customizing a WordPress Blog Series:
Customizing a WordPress Blog - Part 1: Editing Header Images
Customizing a WordPress Blog - Part 2: Examining WordPress Themes with the Firebug Extension for FF
Customizing a WordPress Blog - Part 3: Examining WordPress Themes with the Web Developer's Extension
Customizing a WordPress Blog - Part 4: Creating a Testing Environment Using MAMP and Dreamweaver
Customizing a WordPress Blog - Part 5: Editing WordPress Themes in Dreamweaver CS4
Customizing a WordPress Blog - Part 6: Using the Snapshot Technique for Editing WordPress Themes
Customizing a WordPress Blog - Part 7: Editing the Themes with Fireworks CS4

ActionScript 3.0 Conversion Chronicles - Part 4: Automation Strategies
by Joseph Balderson - 27-May-09
Reader Level:

Were you ever confused, frustrated or dismayed by a project you had to convert from ActionScript 1 or 2 and migrate it up to ActionScript 3.0? Maybe you've checked out the AS2 Migration reference, and have found it lacking specific examples, or searched on the net and been flabbergasted by the multitude of conversations. Finding the right information, the right tips and the right approach can be challenging when you're under the gun and need a solution, fast.

This series will guide you through some simple formulas and techniques to convert and migrate legacy Flash ActionScript 1 and 2 code and techniques to ActionScript 3.0.

When you start on nearly any ActionScript 1-to-3 conversion project, you will necessarily need to convert all of those text fields in the FLA. It is such a necessary step in the conversion process that it could be considered as basic as removing all the underscores in MovieClip property references.

Continuing from the last tutorial where you learned to convert AS1 textfields to AS3, in this article you'll learn a neat trick: no more hunting down and converting each and every AS1 text field in an FLA with hundreds or even thousands of assets. In this tutorial we'll show you how to automate the conversion of AS1 textfields with a simple JSFL script. Along the way we'll also look at how to fix the Flash CS3 ObjectFindAndSelect.jsfl bug, and a few high level strategies when confronted with any conversion problem.

The ActionScript 3.0 Conversion Chronicles Series:
ActionScript 3.0 Conversion Chronicles - Part 1: An Introduction to AS3 Migration
ActionScript 3.0 Conversion Chronicles - Part 2: Button Events
ActionScript 3.0 Conversion Chronicles - Part 3: TextFields
ActionScript 3.0 Conversion Chronicles - Part 4: Automation Strategies
ActionScript 3.0 Conversion Chronicles - Part 5: Source Navigation Coming soon
ActionScript 3.0 Conversion Chronicles - Part 6: Button Scripts Coming soon

Be Up Front with Your Backgrounds
by Knut Kubenz - 26-May-09
Reader Level:

There are times, I'm sure, when you've wanted to use some out of the ordinary, unique background, to be part of a photo montage, some sign work or even the background for a business card, as I recently did. There's lots of clip art out there, which could certainly do the job to some extent, but how about creating your own bold and beautiful abstract background in Photoshop?

It's not difficult and takes only a few minutes with only a few tools, the primary of which is the Gradient Tool. Let's begin.

Textual Musings – Fireworks Text Techniques: Part 2 Free!
by Alex Dunn - 22-May-09
Reader Level:

There is so much you can do when is comes to dealing with text in Fireworks. You can bend, twist, expand, fade, colour, add gradients, and turn in to bitmaps or vectors, to name but a few. You may think you have seen everything possible (and probably have), but there's always more to discover, test and try out.

In the first tutorial we created rounded and spooky text from our standard font type using masking and the levels filter. Now we can use that as a basis to create some devilish text and also use many more techniques utilizing both vector and bitmap tools.

Note: This tutorial requires Fireworks 8 or newer

Alex Dunn is a freelance web enthusiast from Bristol, England. He has a BSc(Hons) Degree in Information Technology and a Diploma in Computing and Multimedia Studies. He loves being creative and being involved with all aspects of web design since he became 'hooked' back in the late nineties.

The Textual Musings Series:
Textual Musings – Fireworks Text Techniques: Part 1
Textual Musings – Fireworks Text Techniques: Part 2

Dealing with NULL Values in SQL Server - Part 2
by Tom Muck - 21-May-09
Reader Level:

In SQL, there is data, no data, and NULLs. A NULL is a unique concept, and is often misunderstood by programmers. A field can contain data, or it can be blank, but it can also be NULL, which is not the same as blank.

The first part of this series introduced the concept of NULLs. In this part will show how to deal with NULLs for your inserts and updates.

The Dealing with NULL Values in SQL Server Series
Dealing with NULL Values in SQL Server - Part 1
Dealing with NULL Values in SQL Server - Part 2

Photo-graphic Novel? Free!
by Scott Valentine - 20-May-09
Reader Level:

Capture the true essence of your hero self (or friends) with this quick and easy graphic novel look. Amaze your friends! Change your enemies! Confuse small domestic animals!

Fun With: Outlined Text with Strokes and Shadows
by Kim Cavanaugh - 19-May-09
Reader Level:

Sometimes you get in a design rut and you find yourself doing things the same old way, over and over again. Sure, you can zip around the design application interface and make things sing, but are you being creative? Are you taking chances and giving yourself time to explore and find new ways to get things done, or are you sticking with the same old tried-and-true methods?

When things are getting a little stale, it's time for some creative play, and when you have a suite of imaging and animation applications to play around with you have lots of chances to stretch your wings a little and do something entirely new. That's what the Fun With: series is all about—having fun and trying out new things. The focus in the Fun With: articles is to demonstrate techniques that you might not have thought about trying and give you the opportunity to play on your own. Because while it's satisfying to do your job well and efficiently, sometimes you need to allow your inner artist to come out and play.

In this installment you'll be working with text in Fireworks once again, exploring the ways that text strokes and solid shadows can be combined to create new visual effects. This article and the sample download file that is included will demonstrate a few ways that stroke effects and the Solid Shadow can be combined and modified to get text that goes beyond the boring and can be used for page graphics, logos, and more.

The Fun With: Series
Fun With: Bitmap Selections in Fireworks
Fun With: Outline Text with Glows and Shadows
Fun With: Outlined Text and Strokes and Shadows

Timeline in Adobe Photoshop CS4
by Rafiq Elmansy - 19-May-09
Reader Level:

I remember the old days, when we first saw layers in Photoshop. It was arguably the most important update in the history of the product. As time moved on, we naturally saw additional updates with each new version, but most them did not impact the application in quite the same way. Few updates have actually introduced new trends to the Photoshop workflow or opened new capabilities to Adobe Photoshop users. Animation is one of those few.

The addition of animation capabilities was one of the major features, starting with Adobe Photoshop CS3. Actually, it wasn't a totally new feature even then, as it was inherited from a previous Adobe product, Adobe Image Ready, that had died after the merge between Adobe and Macromedia.

Adobe Image Ready did not use a real timeline, like the ones we are used to seeing in products like Adobe After Effects and Adobe Premier. It was based on frames, where each frame included the changes you made to the layers through the Layers panel. Personally, I did not like this layer/frame style much, as I am more used to the traditional timeline in Flash, After Effects ... etc.

Adobe Photoshop CS3 and CS4 have merged the two methods of animation, the timeline animation and the layer/frame style animation. In this article, we will talk about the timeline in Photoshop and how to use it to create layers and layer styles.

Rafiq Elmansy has been a multimedia graphic designer, graphic and web designer since 1999. His background is in fine art and sculpture. He uses Adobe Products to create graphics and animations for desktop applications, cartoons, games, web sites, e-learning courses, and mobile and Pocket PC applications. He is the founder of Bee Design Studio. He is an Adobe Flash CS3 Certified, Adobe Photoshop CS3 Certified, and the founder of the first Adobe User Group in Egypt. Rafiq also creates computer artwork and writes articles and reviews about graphics, animation, and Flash topics at his site, Graphic Mania. Rafiq is an Adobe Community Expert, contributor writer at Adobe Design and Developer center and uCertify.com co-author.

jQuery Quickshots - Page Transitions
by Rob Williams - 18-May-09
Reader Level:

jQuery is a great tool for helping to make your JavaScript and AJAX applications easier to develop and maintain. One of the hardest things about it though, is that it introduces so many new and amazing possibilities that aren't always clearly obvious on the surface.

These "quickshot" articles are intended to act as hints, or inspirations, to some of the more creative or unknown problems that jQuery can help you tackle. Today's article focuses on a quick little technique to take an existing web site and make pages appear to "transition" back and forth instead of simply reloading each time.

Playing with 3D in Flash CS4
by Tom Green - 18-May-09
Reader Level:

There were some interesting tools introduced in Flash CS4. Among them was a 3D feature. Let's do a fly through to get a handle on how some of this stuff works.

A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
by Adrian Senior - 15-May-09
Reader Level:

The Spry Tabbed Panels provide an alternative method of displaying content to the Spry Accordion. While the accordion provides a vertical method of displaying and hiding content, the Spry Tabbed Panels provide similar functionality, but in a horizontal format. While everyone might not agree with my opinion, I feel that the Tabbed Panels provide a more natural method of displaying related content than the accordion. The tabs across the top of the panel seem to lead you from one section to the next with greater fluidity than the accordion. The Tabbed Panels provide a natural way to break down flowing content, from breaking down form data into specific sections to categorising content and breaking down guides into a flowing process.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

A Beginner's Guide to Spry - Part 3: The Spry Accordion
by Adrian Senior - 15-May-09
Reader Level:

The Spry Accordion is similar to the Spry Collapsible panel that we covered in Part two of this series, in many ways the Spry Accordion is the Spry Collapsible panel's big brother.

As we discovered in Part two, the Spry Collapsible panel provides the ability to open and close a single panel and thereby reveal or hide content within your web page. The Spry Accordion uses the same technique, but doesn't restrict you to a single panel. This flexibility allows you to set multiple panels within a single area of your page, allowing you to provide your end users with maximum content in a minimal amount of screen real estate.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar