Web design tips

Using XML in Flash CS3

flexin — Fri, 25 Apr 2008 05:30:49 +0000

One of the major changes in AS3 is how you deal with XML content. While a lot of similarities carried over from the AS2 days, there are new time-saving niceties in AS3 that make working with XML files easier. One of the introductions is Ecmascript for XML, known as E4X for short. In this tutorial, you will gradually learn more XML tricks as you try to parse the various parts of the following XML data…

Author and source

Flash CS3 indexOf – method of Array class

flexin — Fri, 25 Apr 2008 05:28:51 +0000

Greetings to all!
In the tutorials of Actionscript 3.0, we saw what are Arrays and how much they can be important using Flash CS3.
Also, we saw in details the use of the method splice of the Array class.
Why would I want to remind you all of the above?
Everything seen first will be useful to explain how to create a grid of squares with Flash with every single square being selection able and not.
Basically, on click of the mouse on one of the square in the grid, the square itself, if not already selected, will be added to an Array. Otherwise, if already selected, it will be removed from the Array.
To do this, we will need the method indexOf of the Array class of Actionscript 3.0.
Let us look at a concrete example…

Author and source

The Fireworks CS3 to Flash CS3 Connection

flexin — Fri, 25 Apr 2008 05:23:34 +0000

Though a lot of hype has been generated around the release of Fireworks CS3, not a lot of people are aware that Fireworks is a fairly decent animation creation application. Not only that, those animations will move smoothly into Flash CS3. Some of you may be reading this and thing, “Whoa, Tom, aren’t GIF animations a bit different from Flash animations?” Not exactly.

What we tend to overlook is that the Fireworks PNG format is a mix of bitmap and vector artwork. This means you can create an animated GIF using the Fireworks vector tools and seamlessly export that animation into Flash CS3. In this example I am going to use an animation that ships with Fireworks CS3 but feel free to use any animation you may create.

Author and source

Slice and Export the Images in Fireworks CS3

flexin — Fri, 25 Apr 2008 05:21:01 +0000

Once you are satisfied with the layout, deside which parts can be recreated within HTML and which parts will need to be exported as slices.

Text can usually be recreated in HTML except when it is using some special font that is not commonly available on all computers.

Use the slice tool to draw out areas that whille be exported as slice. Each slice will appear in the ‘web layer’ of your ‘layers panel’. Give each slice a name which will be the file name of the exported image. If a full image needs to be converted to a slice you can also just select it, right click and select “insert rectangular slice”. This can be done for mutiple objects too. The slices will apear as green objects on the page.

Author and source

Create the Website Layout in Fireworks CS3

flexin — Fri, 25 Apr 2008 05:19:14 +0000

Once you have put in all the images and text you can rearrange it to create a layout that will be attractive and easy to use. Ensure that the layout passes the trunk test and has the basic layout elements like logo, byline, navigation, copyright, content area, heading and sub heading styles and link styles.

Author and source

Insert Images and Text in Fireworks CS3

flexin — Fri, 25 Apr 2008 05:17:57 +0000

If you plan to use stock photos you should find the appropriate images and keep them ready. You should also have logos, bylines and some sample text ready. If your home page has a different layout from the rest your site you will have to create 2 different layouts. For the home page design you should be clear about what you want to communicate, things that you want to highlight and other usability principles. You should also be clear on your navigation based on your site plan…

Author and source

Create a New Fireworks CS3 Document

flexin — Fri, 25 Apr 2008 05:16:20 +0000

Open Fireworks and create a new document [File > New].

In the dialog box enter the width and height of the layout. I usually design for a width of 780 pixels width. This works well in monitors with 800 x1024 resolution as it leaves 20 pixels for the browser scroll bar. The resolution for the web is 72. You can also choose a background color if your webpage will have a background color.

Click OK.

Author and source

How To Sharpen An Image In Photoshop — Advanced Photoshop Sharpening Techniques

flexin — Fri, 25 Apr 2008 05:11:43 +0000

Most if not all digital images require sharpening, even if shot on a state of the art digital megaresolution SLR with pin-sharp focusing. Most cameras or scanners can sharpen as the image is captured but the highest quality sharpening is to be found in the image editing software.

Sharpening in Adobe Photoshop CS2 will allow you to select the precise amount of sharpening and the areas of the image that require sharpening most. If sharpening for screen it is very much a case of “what you see is what you get.” For images destined for print however, the monitor preview is just that – a preview. The actual amount of sharpening required for optimum image quality is usually a little more than looks comfortable on screen—especially when using a TFT monitor (flat panel)…

Author and source

Photoshop Web Template — Web Site Design Tutorial

flexin — Fri, 25 Apr 2008 05:09:21 +0000

Many people new to web design are confused by slices and Javascript rollovers and end up abandoning their projects out of frustration. The point of this Photoshop web tutorial is to keep things simple by creating a web page that uses only 2 graphics.

Website Plan
We’ll create a banner and place it in a table that will contain 5 rows and 1 column. The banner will be placed in the top row. The next row will contain the text for your site and any photos you may wish to include. Row 3 will hold a separator, row 4 will be for your text links and a copyright notice, and row 5 will hold a second separator…

Author and source

Photoshop textures within Type

flexin — Fri, 25 Apr 2008 05:02:06 +0000

Quite often we all get stuck in design ruts and need a new idea to stimulate our creative juices. This month I’ve taken the word “type” and have pasted into each letter one of my watercolor backgrounds. As nice as they looked with something other than a blend or a fill, I enhanced them with filters and effects . The following is one evenings experimentation using Watercolor Backgrounds for Photoshop.

Author and source