There are three subscription plans available: Free, Premium Basic, costing $14.99 per month or $149 per year and Premium Plus costing $39 per month or $390 per year. The paid plans are currently only available in North America. For the rest of us, we can use the Free plan, which is still useful.

Buzzword is the word processing application and works pretty much like every other word processor you’ve used in recent times. You can add and format text, images and tables. Documents can be saved online and shared or exported out as a PDF, word .DOC, HTML, RTF and TXT amongst others.

CreatePDF does what it says on the tin – it creates PDFs from files you’ve created online or uploaded. The free plan allows you to convert 5 PDFs, with the Basic plan you can convert 10 per month, and with the Plus plan you have unlimited conversions. I’m not really sure why Adobe charge for this service as there are plenty of free convertors on the web.

ConnectNow is the web-conferencing application and lets you invite participants to share your screen, share notes and use a webcam for. The number of participants allowed in any meeting depends on your plan, three invites on the Free plan, five on the Basic and twenty on the Plus plan. Personally, I found this to be the really “oooooh nice” part of the suite, and perhaps this is the part that makes the whole set worth paying for if you need capacity for larger web-conferences.

Share and MyFiles lets you organize and choose files you’ve created either online or uploaded and share them with your contacts.

Other Applications In Beta

You can sign up to test out two applications that are still in Beta in the Acrobat Labs, the quite literally named “Tables” and “Presentations”.

Tables
This is the spreadsheet application and again, it looks sleek and clean and is really easy to use. If you’ve ever used a spreadsheet before, you will find familiarity here. The spreadsheets can be edited by multiple users.

Presentations
Presentation could be considered the rival to Microsoft’s PowerPoint. The templates and graphics are clean and nicely designed as you would expect from Adobe. Multiple users can edit the presentations and then easily shared.

Overall, the suite is very easy to use. One thing that is missing though (and correct me if you found it), is a link that will take you back to the home page of Acrobat.com where you can choose which application you want to work with. I could see how to jump from all of the applications to Buzzword, but not back to home which is a little bit frustrating.

It will be interesting to see what the take up will be for paid subscriptions. With Tables and Presentations still in beta, the suite certainly appears unfinished, but it has great potential.

Here are five sleek offerings which are available for free and are easy to implement on your site.

jQuery Lightbox is a simple and elegant way to overlay image on the current page.

See the demo here
Download and read more about installation here

Space For A Name, Gallery View is a beautifully clean and versatile gallery. It contains thumbnails, a semi-transparent overlay for image descriptions and captions for the thumbnails.

See a demo here
Download and read more about installation here

Mb Gallery is a clean, full featured photo gallery, with navigation toolbar, thumbnails, and auto-size frame. The gallery smoothly adjusts itself to the currently selected image size.

See a demo here
Download and read more about installation here

S3 Slider is a slideshow offering smooth transition of images with a semi-transparent area overlaid with the image description.

See a demo here
Download and read more about installation here

Galleriffic allows for two types of gallery setup, “simple” and “advanced”. The simple option uses text links to link to each image in the gallery while the advanced choice displays thumbnails on the left hand side. Other features include bookmark friendly URLs, image caption and descriptions and slideshow options.

See a demo here
Download and read more about installation here

Have you used these or other jQuery plugins on your website? Have you any recommendations for other galleries?

For designers, the resume is an opportunity to apply their design flair to paper and make their resume stand out from the many plain Jane resumes that fall on an employer’s desk. If you’re working in a visual field, why not add some visuals to your resume? A picture can tell a thousand words, as they say, and an original, cleverly designed resume will stand out a mile. Make sure the design is good though, because you don’t want it to stand out a mile for all the wrong reasons.

Here’s a small collection of eight imaginative resumes from people working in various creative fields.

Lydia’s Cartoon Resume is witty, eye-catching and quite obviously in a comic book style appropriate to her industry.

Michael Anderson, an infographics designer produced a very slick and beautifully colored information graphic of his skills and experience.

Krista Gregg, a graphic designer created a hand-drawn style, giving the impression of a resume that was doodled together.

Christiano Pires’ design takes the form of a standard resume on a table, surrounded by personal belongings.

Greg Dizzia uses data visualization to display his skills and experience.

Doni Kristian Dachi goes grungy and dirty with his web developer resume.

Sofiane Yaya combines hand-drawing with arrows on torn, rippled paper on his graphic design resume.

And finally, to show that a resume does not have to be too over the top while still being creative, this example from Kenji Enos shows a clean, elegant and attractive design.

These kinds of resumes are obviously not suitable for every kind of job application. You need to be sure that you make a good impression and as a designer, that certainly gives you the right to have a more original layout and design. However, as with every type of design, your resume is a form of communication and you are providing information so make sure that your details and key skills are legible.

So how creative do you think a designer’s resume should be? Are these examples over the top or are they suitable for the industry? Have you seen other creative resumes online that you thought were cool?

The target audience is a major factor in how wild you can go with your navigation or layout. One of the quickest ways to lose visitors is to alienate them by making it difficult to find their way around. If you’re creating a corporate site, you may want to avoid anything but standard layout and navigation. However if you’re going mega-creative and know your audience will come along for the ride, then why not experiment?

Many of the sites I’ve chosen are Flash-based but I believe it would be possible to recreate a lot of the ideas using HTML and CSS, maybe just without the smooth animation. It’s good to look and learn from something a little atypical and get new ideas.

So, for the purpose of inspiration and new design perspectives, here are ten websites that break the “traditional” navigation mold. They are creative, different and (oh no!) might make the visitor think a little bit.

Bio-Bak

This site has a hand-drawn, collage feel about it and it’s good fun to use. There are buttons to press and icons to drag as you find your way through the content.

Calliope

This layout looks just like a typical woman’s glossy magazine and the headlines are links. This is a flash site but I think something very similar could be achieved using CSS.

Longboard The World

A beautiful, tactile site. The old-style Polaroid images are links to different sections on the sites.

Kashiwa Sato

Another flash site. I’m not too sure what to say about this – it’s a bit insane really, and could be considered challenging. It’s probably best to just visit this one and see what you think.

The Back Of The Napkin

Nice hand-drawn graphics are used to show the sections of the site literally on the back of the napkin. It’s a mixture of HTML/CSS and a few small pieces of flash on parts of the napkin.

Convert Code

This is very simple and easy to use. A numbered grid of rollovers provides navigation through the site. The grid stays put and the text on the right hand side changes.

Aksident uses card holding “actors” to identify the different parts of the site. When you click on a card, you’re taken to that part of the site where the information is displayed in a novel way by the actor. Good fun.

Gleis3 uses what look like an underground transport map to layout the contents of their site.

The Dollar Dreadful is designed to look like an old time newspaper. Rollovers on the center of the page link to free booklets. Links in the newspaper columns on the left and right provide information about the site as well as links to the various sections. This is very nicely put together.

Jacksons of Piccadilly

This is a beautiful site, relying heavily on flash for the smooth animation. It requires the visitor to mouse over the images to reveal the navigation.

How do you feel about sites where the navigation is a little different than “normal”? Have you seen any sites like this that have really impressed you?

Sumo is now on version 1.1, uses the Flash 10 player and is improving with each iteration. The interface looks a lot like Photoshop. It has palettes lying along the right hand side, a floating toolbox and menus with some of the same functions and commands as PS. Sumo supports layers and layer effects, image adjustments such as brightness, color balance and levels. Sharpening, blurring as well as several other filters are here too so it is possible to do some nice photo editing as well as creating new graphics.

If you’ve used Photoshop before, then the Sumo toolbox holds many familiar faces. The Magic Wand, Lasso, Clone, Pencil, Paint Bucket, Gradient and Eraser tools are all here as well as many shape tools. A Curve tools works in somewhat similar fashion to the Pen tool, letting you create smooth curves and corners easily. The symmetry tool is interesting to play and could be very helpful for making patterns.

On the downside, it will open only JPEGs, GIFs and PNGs and you can only save your creations as JPEGs or PNGs. If you want to save any layered image you create, you will need to sign up for a free account. Having said that, if you’re creating web graphics, or doing some simple photo editing, then this is no major hardship. You can also share your work with the community and Sumo already has a lot of fans.

So if you’re caught on someone else’s computer with only Paint on board, or if you simply want to try out a good graphics editor for free, Sumo is well worth a visit. It beats the online Photoshop Express hands down. It is free, fast and requires no sign-up.

Have you used Sumo before? Did you like it? What other web-based graphics editors do you use?

19 Impressive Online Image Editors

1. Use the Rounded Rectangle to draw a square with round corners. Hold down the Shift key as you drag to create a square.

2. Open the Gradient and Color palettes. Make sure the square is still selected. Create a linear gradient with 3 shades of the same color, starting with the lightest color on the left hand side. To change a color stop, first, click on the color stop, and then click on the color you want on the Color palette. To add an extra color stop, simply click under the gradient slider.

3. Set the Stroke color to None.

Here’s how my palettes and square look:

4. Make a copy of the square and paste it directly on top of the first square.

5. Draw a black-filled ellipse above the square.

6. Select both the square and the ellipse, then open the Pathfinder palette and click on the Divide icon.

7. Choose Object > Ungroup, to ungroup the divided objects then. Delete the top of the ellipse and the bottom part of the square.

8. Select the new top of the square and fill it with a linear black and white gradient. (White at the top grey at the bottom). Set the blending mode to Screen and the Opacity to 80%.

The button should look a bit like this:

Now you can add a logo or symbol to the button. Whatever you choose to add, make sure that is sits beneath the top gradient. I used a webding for the ambulance.

9. The icons sit on a dark screen and generally have some text underneath them. Use Helvetica or Arial if you don’t have that font on your computer.

10. Once you’ve made your icon you can select all parts and group them. Then add them to your iPhone vector image, or your web page if you want to use the icons for that.

Related Reading:

• How To Draw A Vector iPhone In Illustrator

1. Start a new document in Illustrator. If the vector is going for print, choose CMYK and a high resolution of 300 ppi. Otherwise choose RGB.
Set the stroke colour to black and the fill to none.

2. If you don’t own an iPhone (I don’t), then you’ll need to look at a picture of one while you draw. Copy and paste an iPhone image into Illustrator.

3. We’re going to draw the shape of the phone using the rounded rectangle tool. Select it from the toolbox and then click once so the rounded rectangle tool dialog box appears. The first rectangle will be 433px wide, 795px high and will have a corner radius of 45px. Click Ok.

<

A rectangle appears on the artboard.

4. Repeat step 3 twice more with the following dimensions:

• 398px wide, 763px high, corner radius of 40px
• 386px wide, 749px high, corner radius of 35px

You should now have three rounded rectangles on the artboard, something like this;

5. To line them up correctly, select each rectangle by holding down Shift and selecting them with the Selection tool (V). When more than one object is selected, the options bar displays the alignment options. Click on the Align Horizontal Centre icon and the Align Vertical Center icon.

Your rectangles should now be nicely lined up.

6. On the Swatches palette menu, choose Open Swatch Library > Metal to open up Illustrator’s Metal color palette.

7. While we’re at, again choose Open Swatch Library > Gradients > Metals.

9. Select the inner rectangle, and set the fill colour to #090909.

10. Select the middle rectangle, and set the Fill to the metals gradient called Silver. Then set the Stroke to None.

11. Select the outer rectangle and set the Fill color to Dark Grey (it’s in the last row of the Metal Swatches), or just choose your own dark grey. Again, set the Stroke to None. So you should have something like this:

If you squint really hard, it looks a bit like an iPhone. Ok, It’s a bit flat, so we can use the Mesh tool to make the dark grey outer rectangle look more realistic.
12. In the layers palette, hide the inner and middle rectangles.

13. Select the Mesh Tool (U) from the tool box.

The Mesh Tool lets you create a mesh on an object to manipulate the colors and transition smoothly from one point to another.

14. Click in the top left corner to add a node. Then click on the color picker and choose a darker grey colour.

When you have a node selected and then change the colour with the colour picker, Illustrator creates a very smooth blend from one colour to the next. This gives you much more control than just using the Gradient tool.

15. Add more nodes with the Mesh tool, and as you add them, vary the colour between light and dark greys to give the impression of glossy chrome.

Spend a good bit of time working on the mesh, and zoom right in so that you can see what you’re doing. You can add as many nodes as you want.

16. When your’re happy with the glossiness of the outer rectangle, turn on the visibility of the other two rectangles.

17. Select the middle rectangle. It’s still looking a bit flat, even with a gradient, so we’ll add a subtle drop shadow behind it. Choose Effect > Stylise > Drop Shadow and add the values shown below.

The phone has a number of small buttons on the edge. We can add those using another rounded rectangle, set to match the colour on that part of the phone. The buttons will appear on top of the phone, so select them and then choose Object > Arrange > Send To Back to make them appear more realistic and not stick out so much.

18. Now the screen needs a few details and effects. Select the rectangle (not the round one), set the Color Picker to a very dark grey Fill, with a lighter grey Stroke of 1px. Now draw out a rectangle.

19. The “earpiece” can be drawn in a similar fashion using the Round Rectange tool. This time add a slight gradient of dark grey to black to the Fill.

20. To create the main button, use the Ellipse tool to draw out a circle with a light grey to black gradient and Stroke set to None.

To complete that button, draw another rounded rectangle with no Fill and a white Stroke of 1px.

21. The font for text on the phone is Helvetica, if you don’t have that, Arial is pretty close. I’m adding the time and date and the service provider on the screen:

22. To add signal strength, it’s back to the Rectangle tool, then draw out five little boxes, and behind that add a strip of black.

23. The time and date also sits on a semi-transparent gradient, so draw out a black rectangle, and send it backward so it sits behind the text. Then select the Gradient and set up your palette as below. The using the Gradient tool (G), drag down through the black rectangle.

Once you’ve applied the gradient, set the rectangle opacity to about 75 – 80% and set the blending mode to Multiply. (Blending modes are on the transparency palette in Illustrator).

This is how the phone looks now:

At this stage, you could of course, add some wallpaper, but I’m leaving the phone with the dark screen.

24.Using the ellipse tool, draw a shape with a white fill at the bottom of the phone. Then on top of that, draw a second smaller elliptical shape in black. Select both shapes, then choose Object > Blend > Make to create a subtle blend.

25. To complete the drawing, send the blend to the back by choosing Object > Arrange > Send To Back. The final vector looks like this.

There were quite a few steps in this, and it does take a bit of time, but most of the tools used for drawing here are the fundamentals, spiced up a bit with the mesh and gradients. We could certainly continue to add things like reflections on the screen and more icons. I think your own iPhone vector is a useful thing to have and if you draw your own you can add all sorts of icons and embellishments.

Related Reading:

• Illustrator Drawing Tools, Part 5: Pen Tool – Curves
• Drawing In Illustrator, Part 4: Pen Tool - Straight Lines
• Drawing In Illustrator, Part 3: The Pencil Tool
• Drawing In Illustrator, Part 2: The Shape Tools
• Drawing In Illustrator, Part 1: The Line Tools

If you haven’t heard about Cufon before, and are using WordPress, it is a little bit of a web designer’s dream. For many years, the ability to put any font of your choosing has been limited to options such as SIFR and @font face. Both offer designers the chance to use a font other than the old reliables (Times New Roman, Arial, Georgia, and the like), but they do also have their downsides. SIFR is Flash-based and a little bit tricky to use and @font-face, while almost there, ran into major problems with the End User License Agreement on font ownership and use. Cufon comes somewhere in the middle of these two and is easy to use.

To use Cufon on WordPress, you’ll need to first of all install the plugin, which can be found on the WordPress extend page. The next step is to use the font generator.

There are a few little pernickety bits here, and I found that I had to take the font I wanted to use out of the main fonts folder on Windows before I could successfully upload it. You also need to confirm (by ticking a box) that you rightfully own the font you are using.

See Fonts and the Law at fontembedding.com for more information. Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: FontFont (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).

Once I did that, the font is converted and you are presented with a .js file which you upload to your WordPress plugins folder.

The Cufon plug-in will detect a correctly generated file in your plugging folder and make it available for use on your WordPress site. That’s the bulk of your work done. The Cufon plugin page gives you examples of how to use CSS with the .js fonts.

I wanted to use the Tw Cen MT font on my blog headings so I added the following to the CSS in the space provided on the plugin page:

Cufon.replace('h1', { fontFamily: 'Tw Cen MT' });

Cufon.replace('h2', { fontFamily: 'Tw Cen MT' });

The resulting headings looked like this:

And that’s all there was to it. A quick and easy way to take more control over my WordPress design without having to use images or Flash for typography.

Have you been using Cufon? Do you find it easy to use? Are you using it on a blog?

Imagine developing an app where you don’t have to worry about the constraints of cross-browser compatibility! Imagine being free to style not only the contents inside the window, but the window itself! Imagine all the people … (oops, apologies to John Lennon!)

You can probably tell that I’m pretty excited about our latest article. It’s called “Take Your CSS to the Desktop With Adobe AIR,” and was written by SitePoint’s own Andrew Tetlaw (author of the Tech Times). In it, he shows you how to create your own living, breathing desktop app. In fact, it’s an app that some of you might even find useful—a desktop app for receiving notifications from Flippa, the newly launched marketplace for buying and selling web sites.

Building this app was Andrew’s first foray into developing with AIR, and according to him it was an eye-opening experience and actually quite easy to do.

If you’re also new to developing with Adobe AIR, then be sure to take the quiz at the end of the tutorial to see how much new knowledge you’ve absorbed. You might even win a prize! In partnership with Adobe, we’re giving away a print copy of Getting Started With Adobe Flex 3 to the first 100 people to complete the quiz. But you’d better get in quick—it’s first come, first served, and the last time we gave copies of this book they were snapped up in no time.

Having this handbook in your library is an asset if you want to be able to build applications of any magnitude for the Adobe Flash Platform; from simple widgets to complicated, multi featured RIAs. The article is just the tip of the iceberg for what is possible.

Read the article and take the quiz now … then start building some funky desktop apps!

By the time you add up all the relevant desktop clients and common webmail providers, you are talking about between 15-30 platforms you need to test for. Even if all those mail clients were friendly, modern and predictable net citizens, that would still be a big task.

They’re not.

A few years ago — joy of joys — things got significantly harder when Microsoft chose to cripple the rendering-capabilities of their flagship mail product by replacing its HTML rendering engine with Word.

This is roughly equivalent to replacing your lawnmower with a sand wedge — you can try all day but it just doesn’t cut it.

Although at the time, there was some speculation that the decision was motivated by security concerns, Microsoft have since made it clear that they were simply more interested in making the Outlook 2007 to Outlook 2007 experience better (read the Campaign Monitor guys’ post for the nitty gritty).

This has to stop. Email is an open standard and we should be past the time when we NEED to continue to spruik this argument to Microsoft. Put simply, Word’s horrid understanding of HTML is costing us all time and money while detracting from everyone’s experience.

At this point in time, Microsoft appear to be intent on using the Word rendering engine in Outlook 2010 — but it’s not too late. The app is still in early beta and Microsoft are asking for feedback.

So what do we do about it?

The most immediate impact you can have is getting down to http://fixoutlook.org/ and tweeting to let Microsoft know this is NOT cool.

If you’ve ever sobbed salty tears into your keyboard over another Outlook 2007 email fail, you won’t need much convincing.

Microsoft have offered this disappointing and frankly pretty lame first response to the fixoutlook.org initiative.