Web Design and Development Blog

ITM Design: Trusted Developer Amongst CCTV Installers and Suppliers

siteadmin — Thu, 10 Sep 2009 13:52:13 +0000

Over the last few weeks we have worked closely with 1st Choice CCTV - a Devon based CCTV Installation company - to deliver an online presence that echoes their professional and trusted services.

1st Choice CCTV

We are proud to announce this as our third website for the CCTV installation and supply industry.

We feel we’ve become something of a specialist when developing for the CCTV industry. We know exactly what a CCTV customer wants, how they go about getting it, and how you can make the most out of their time spent on your website.

Read on to find out how we went about designing and developing this website…

Website Header

Our client wanted a simple website that layed out what the company had to offer; identifying the strong points of it’s products and services.

Allowing a home or business CCTV owner to easily log in to their CCTV system via a laptop or mobile phone to visit their property remotely was identified as the biggest selling point og the product.

This was something we wanted to greatly emphasise. We placed a large yet simple image of the product in use with the words “The Power of CCTV - Your home or business always at your fingertips”. Set on a blue background that extended beyond the width of the rest of the website to draw the users eye in.

Above this we placed the logo and a row of links to the most important content. We ordered these pages links in a way we felt was chronologically correct with the users questions about the website; we’d already stated what the user could expect to get from the company, we then wanted to tell the user about the company (”About”), why they should use CCTV (”Why Use CCTV?”), and then information about what they could recieve for their individual needs (”Domestic Installation”/”Business Installation”).

Website Body

The body of the front page tells a similar story to the pages that are linked in the header. The header has already introduced the product, we then show the user the product is for domestic installation as well as business installation. By splitting the two up the user can simply choose to read about the installation that is suitable to them. We chose some powerful images to reinforce what our header already states - “The power of CCTV” as well as making it clear the box on the left is for users interested in domestic installations whilst the other is for business.

At this point the user knows about the product and who it is aimed at. We then provide some text about the company as well as bullet pointing their main strengths to make the user feel comfortable about the company behind the product they are interested in.

We then give the user a glimpse of the full packages on offer but as the product can be quite feature rich we didn’t want to give too much information, just an overview. We list the main features of the product with a short description of what it does. We also chose to use a jquery slider to allow only one product to show at a time, again, reducing the main of heavy technical information. If the user wants to know more they can simply click to see the next product.

Website Footer

The footer, aside from containing information about the company is where we placed a selection of testimonials. We felt the page led the user through a short journey that gained their interest for the product and provided information about the company to build a sense of trust. The end of their story is reinforced at the bottom of the page by what other people thought of the company in the form of testimonials.

Take a look at 1st Choice CCTV.

Useful Links

1st Choice CCTV

How to Use the Pen Tool in Adobe Fireworks

siteadmin — Thu, 28 May 2009 13:31:54 +0000

One of the most useful tools in many desktop graphic applications is the pen tool. The pen tool allows you to draw straight or smooth vector lines, plotting out points on the canvas that are joined by paths. Take a square as a simple example: each corner is a vector point with paths inbetween those points that repesent the straight edges of the square.

The pen tool allows you to draw simple shapes such as the square but with a little practice you’ll be able to draw any complex shape you want as if you were drawing with a pen by hand. Furthermore, as your complex shapes are made up of vector points and paths, you’ll be able to go back and edit your shape at any time and point as well as resize it without losing any quality in the shape.

Our Adobe Fireworks Pen Demonstration

Keep on reading to find our downloadable pen tool tutorial for Adobe Fireworks as well as many hints and tips on how to better use the pen tool.

Click here to download our demonstration file

If you’d like you can download the pen tool demonstration for Adobe Firewoks and begin straight away. Open our demonstration file in Adobe Fireworks, select the pen tool and simply follow the steps to trace the shape. Once you’re done, keep reading for a greater explanation of the pen tool, how it can be modified and the uses it has.

Creating and Editing Vectors with the Pen Tool

The pen tool’s main use is to allow a user to create vector shapes. A vector is a shape made up of vector paths and points which contains a greater amount of information than other graphic file formats such as .jpg, .gif, and .bmp. This extra information allows a desktop graphics application to rescale a vector shape with any loss in quality, as well as enabling the user to completly edit it’s shape at a later date.

Whenever you click with the pen tool selected, you’ll place a vector point onto the canvas. Click again, and you’ll place another vector point that Adobe Fireworks will join to the first one with a straight vector path. You could carry on placing points that are joined by straight lines, or you could begin to curve the paths between points and at any time you can place a point on a path or curve a path you’ve previously created. Simply, you can create any shape you want using the pen tool.

As you draw with the pen tool, the pen icon will change to demonstrate how you can modify the shape you are creating. Below is an explanation of each icon:

Icon	Explanation
	Demonstrates how the path will look if you click to place another vector point.
	Click to place the first vector point and begin creating a vector path.
	Click to add a vector point here.
	Click to remove vector point.
	Click to remove path curve between this vector point and the previous one.
	Click to complete the vector path (creating a full circle).

Uses for the Pen Tool

The pen tool is probably the most powerful tool in 2D desktop graphic applications. Using the techniques learnt in this tutorial, you can draw anything - it’s just like a real life pen except you can go back to lines (paths) you previously drew and edit them in any way you want. But that’s not all!

Using Adobe Fireworks you can also use the pen tool as a cutting tool. Why would we want to do this over using the marquee, lasso or magic wand tool? Because it’s far more accurate!

We’ve already covered this in our previous tutorial: (Remove Background/Cut Out Image in Fireworks/Photoshop) but let’s have a recap:

Our example image we will be cutting out

We have this picture of a car (above) and we want to remove it from the background. The car is a complex shape which means the marquee tool won’t be able to cut it out and the lasso tool would never be accurate if we drew around the car freehand. The magic wand tool would do a reasonably good job of cutting out the car and removing the background, but it’ll make the edges of the car look pixelated and will have difficulties around the tyres as the contrast of colours are similar.

Our complete outline around the car

So, with our new knowledge of the pen tool, let’s draw a vector outline of the car. Simply choose a place to put your first vector (usually works best if you start on a straight line - in this case the spoiler) and trace around it until you complete the vector.

When you’re happy with your outline, right click the vector and click ‘Convert Path to Marquee’. For a smooth edge choose “Anti-Alias”. In essence, we’ve just manually done what the magic wand would have done, but as we’ve done it by our own eye, it’s far more accurate than what Adobe Fireworks could have calculated. Now right click the marquee, click ‘Modify Marquee’ and then ‘Select Inverse’. Simply press delete on your keyboard and the background will be deleted, leaving us with a perfectly cut out car.

It’s the most accurate way of cutting out that’ll leave your images with a crisp edge and with a bit of practice it won’t even take that long.

More Uses

Photograph to Vector Art (Posterized Effect)

Cutting out with the pen tool in Adobe Fireworks is just one of the many ways in which you can use the pen tool. In the near future, we will be demonstrating how to ‘Posterize’ a photograph by taking regions of similar colour and drawing a single coloured vector around those regions to create a posterized effect.

Useful Links

Create Peeling Stickers and Page Curls in Adobe Fireworks

siteadmin — Mon, 20 Apr 2009 13:32:14 +0000

Peeling stickers and page curls are a very popular Web 2.0 style that make your images look like their coming off of the screen!

Creating Peeling Stickers and Page Curls

Using Adobe Fireworks we’re going to show you have easy it is to make peeling stickers and this technique can be used in the exact same way for making page curls too! In this tutorial we’ll cover linear fill options, the subselection tool and the slice tool - it’s that easy!

Step 1 - Using the Elipse Tool

1. Begin by holding down your mouse over the rectangle tool and selecting ‘elipse tool’ . Then draw a circle shape onto your canvas. For a perfect circle hold down Shift on your keyboard whilst dragging the circle shape to keep it in ratio. We’ve made ours 150px x 150px.

Step 2 - Using the Knife Tool

2. Now select the subselection tool and click on your newly created circle. You should now see 4 vector points with the outline of the circle joining those points together. This outline or ‘vector path’ is what determines the shape of our circle which we’re now going to cut using the knife tool to make our peel shape. Select the knife tool . To use the knife tool we left click and hold down the mouse to begin cutting, we then drag to the point at where we want to stop cutting and let go of the left mouse button. As you can see in the above image, we’ve cut the top right of the circle, this cut is the point at where our sticker will begin peeling. Once the cut is complete we will have two vector shapes, the circle and the peel.

Step 3 - Rotating the Peel Shape

3. Using the pointer tool we can select our peel shape and move it away from the circle to see the two vectors seperately. We can then flip the peel shape to make it look as though it’s peeling over the top of the sticker. Do this by right clicking on the peel shape and select Transform > Flip Horizontal, then right click again and select Transform > Flip Vertical. If we move the peel over the circle now we won’t be able to see it as they are both the same colour, so let’s change that…

Step 4 - Giving our sticker a linear colour

4. Using the pointer tool select the circle. Now open the Properties panel by clicking Window > Properties. Click the fill category list and click Gradient > Linear. Your circle will that have a line over the top of it with a small circle at one end and a square at the other - this is the source (circle) and end (square) of the linear effect. In the Properties panel click the colour box next to the paint bucket .

Changing our linear colours

Once you’ve clicked the paint button you’ll be presented with the above. This is the panel that will allow us to control the linear colour of our sticker.

A little about this panel (skip this paragraph if you know how to use it): Firstly, the two sliders at the top most of this image control transparency. The purple box undernearth is a preview of our linear colour - the left of this box is our source (circle) and the right the end of the linear colour (square). Then we have the colour sliders which we can click to change the colour of the slider. Both the transparency and colour sliders move to the side to make that colour/transparency value move further into the linear effect. We can also click in an empty area by the sliders to make another slider so the linear effect can contain many different colours. Fireworks also gives you the option of present effects that you can experiment with. The bottom box gives you a bigger preview of the effect you’re creating. We recommend if this is your first time using the linear effect then you should play around with it. It will all make sense once you’ve spent a few minutes experimenting.

For our main sticker we’re going to have the source a dark purple and the linear will gradually get lighter toward the end. So pick a dark purple for the slider on the left then a light purple for the slider on the right if you want to have a sticker the same as ours.

Once you’re happy with your colour selections, simply click away from the linear panel and the effect will be applied on the canvas.

Step 5 - Transforming the Linear Effect

5. Now you’ve chosen the right colours for your sticker, we can move the linear effect. clicking and dragging the source (circle) will move the entire linear effect on the canvas. Clicking and dragging the end (square) will move the end of the linear effect around the source. We’ve put the source toward the bottom of the sticker and the end at the top so the whole effect goes across the sticker diagonally. This is a good way of achieving a realistic light effect on the surface of our sticker.

Step 6 - Giving the peel shape a linear colour

6. We’re now going to repeat steps 4 and 5 to give our peel shape a linear effect. This time though, we’ll use more than two colours in the effect to make it appear as though the peel is standing up and the light is hitting it in a different way to the flat sticker. Above you’ll see the colours we’ve chosen along with two new sliders placed in the middle of the linear effect. Also note, we’ve positioned our linear effect in a similar way to the sticker.

Tips: The source of the linear effect in our example above is the lowest point of the peel that is hidden from the light the most, so this should be dark. The two middle colours are at the highest point so these will be hit by light the most and as such, should be light. Then our final colour is lower down but it’s on the side the light is coming from so this should be the original purple colour of the sticker.

7. Simply drag your peel effect over the sticker so the straight edge of the peel meets the straight edge of the sticker. In our example we’ve given both the peel and sticker a drop shadow. To do this click the Filter + button in the properties panel then select Shadow and Glow > Drop Shadow. We’ve given our shadow the following properties:

Distance: 1
Transparency: 65%
Softness: 4
Angle: 240

Once you’ve completed this tutorial you’ll have two layers, your sticker layer and the peel layer. If you want your sticker to appear to have a graphic on it like our ITM Design stickers at the top of this post, simply place your graphic inbetween your sticker and peel layers.

Useful Links

Adobe Fireworks

AJAX Sticky Form and PHP Sessions

siteadmin — Wed, 15 Apr 2009 14:39:12 +0000

Sticky forms are so called because the data a user inputs into the form “sticks”. The problem with a standard web form is that the data inputted will only remain on the form until the form page is either refreshed or moved away from. This can lead to frustration for a user who has filled out a form but then decides to visit another page before returning to find they need to fill in every field of the form again.

Click here to view the demo

Sticky forms give the user the freedom of moving around the site, knowing whatever actions they have taken on a form will still be there when they return. Using PHP sessions and cookies we can also store that information for use on forms on other pages or for when they visit the site at a later date.

In this tutorial we’re going to look at making sticky forms that will capture data in a PHP session. We’ll also use AJAX to make each field on our form save the data into a session as soon as that field loses focus.

Firstly, if you’d like the code, you can download it here and jump straight in. Continue reading on for a break down of the code and how it all works.

PHP Sessions

Let’s start by building a simple HTML form that when submitted will save the data into a PHP session. A PHP session is similar to a cookie, except it’s stored on the web server rather than the users machine. Whilst a user is active on our website, we can use a session to store data about their visit and this session will expire either when the user closes their browser or when we purposely end the session.

Typically, a basic HTML form will send data from the form to the next page it is sent to. Beyond this, the data is lost. Let’s say we want a user to enter their name on our form but we want to keep their name stored until the user leaves the website. This can be helpful for when a website contains multiple forms, once the user has enetered their name in one form, our stored data can be used to automatically fill in another, saving the user time and frustration.

A basic HTML form

Now let’s begin with a basic HTML form, coded in a file called form.php:

This form will ask the user for a name and their comment. There’s also a submit button that will send the user and the data to a page called post.php.

Our code for post.php looks like this:

$name = $_POST['name'];
echo $name;
?>

The first line initiates our PHP code. The second line stores the data inputted for ‘name’ in a variable suprisingly called ‘name’. The third line then outputs the content of the variable ‘name’ and the final line ends the PHP.

Simply, the above code will display the users name in post.php that they submitted in form.php.

Once they leave the post.php page though, that data will be lost so we can no longer utilise it. Let’s try storing it in a PHP session which will allow us to use the data until the user either closes the browser or we end the session.

Our new code for post.php:

session_start();
$_SESSION['name'] = $_POST['name'];
echo $_SESSION['name'];
?>

Firstly, on line 2, we’ve started a PHP session. This is an area on the website server that will now store variables. Line 3 stores the posted name in a session variable called ‘name’. Line 4 outputs this session variable.

It’s similar to what we had before, but now the name variable is in a session we can use it anywhere in a php file on our website. Let’s make a new page called test.php to test it:

session_start();
echo $_SESSION['name'];
echo $_POST['name'];
?>

Again, we’ve started our session. We’re then outputting our session name variable. Line 4 attempts to output the posted name from form.php but you will see this returns an error - just to prove using a session variable is the right solution.

We now know how to use PHP Sessions. It’s easy and it allows us to carry data to every php page of our website. We like to use it for automatically filling out forms so the user doesn’t have to (sticky forms), but you could try using it just to greet your user - welcoming them by their name is an effective way of making your website appear friendly and personal.

At any point in your script you can end the PHP session using the following code:

session_destroy();

Remember user privacy is important so it’s always worth letting them know their data expires once they close their browser. Using the above code you can allow them to end their session altogether.

Making a Sticky Form using PHP Sessions

Let’s say our user has already filled out a form and submitted it but when they go back to the form, by default, the form will need to be completely filled in again. Using our PHP session we can fill it in for them.

Our code for form.php is now as follows:

The top line is where we initiate our PHP session. The form is then similar to before, but this time we’re telling PHP to input a session variable only if there is one present, if not, just leave the intial value blank. Let’s take a closer look at the PHP:

In between the value for our name and comment input fields, we have the above PHP code. It’s a simple IF statement that in English says:

“If there is a name variable stored in the session then output it”

…and if there isn’t, it won’t! So the initial value of the field either becomes something the user originally entered or just a blank field for a user new to this form.

Want to test it? Visit the form on our Sticky Form Demo page.

Making an AJAX Sticky Form

The above method is great. It’ll make your users happy that they don’t have to keep filling in their basic information and you might find you get more form submissions this way! However, it’s not as good as it could be yet. At the moment, the form only saves the data when the user hits the submit button. What if we have a form with lots of fields on it and the user chooses to go to another page half way through filling in the form? They’ll lose everything they’ve done and probably won’t want to fill it in again!

Using AJAX (the Javascript XMLHttpRequest object and PHP), we can save each individual field as that field loses focus (the user clicks away from it).

Let’s edit form.php again:

There’s not much of an edit needed in our form code but what exactly have we changed? Let’s take a closer look:

onblur=”saveNameToSession(this.value)”

In our input field for the users name we’ve added this onblur event. Onblur is an event that is triggered when a field loses focus (when the user clicks away from that field). So, when that happens our Javascript function called ‘SaveNameToSession’ is triggered.

Our Javascript is as follows:

function saveNameToSession(str)
{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
{
alert (”Browser does not support HTTP Request”);
return;
}

var url=”savetosession.php”;
url=url+”?name=”+str;
url=url+”&sid=”+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open(”GET”,url,true);
xmlHttp.send(null);
}

Firstly, you may have noticed we’ve missed a bit of the Javascript out - it’s the bit that makes the XMLHttpRequest object work, which you can read more about that at the excellent w3schools tutorial here. Let’s brush past the inner workings of the XMLHttpRequest object and get to how our script works.

When SaveNameToSession is triggered (every time a user moves the focus from a field to anything else) the value they entered is sent to a php processing page called savetosession.php. The beauty of AJAX is that this all happens behind the scenes without refreshing the page the user is on - they don’t even know it’s happening!

To recap the process of what’s happened so far; the user has entered their name and moved the focus from the name field to something else. This has caused the JavaScript function ‘SaveNameToSession’ to trigger into effect. Using the AJAX method, the users name has been sent to savetosession.php where we can save the name to a session variable.

Finally, let’s look at savetosession.php:

session_start();
if(isset($_POST["name"])){$_SESSION['name'] = $_POST["name"];}
?>

Again, we’ve started the session. In plain english the next line then says:

“If a name has been entered, save it as a variable called ‘name’ in the session”

…and that’s it! Our name is now stored in a variable so if the user leaves the form page before submitting, their name will still be inserted as the initial value when they visit the form again.

Take a look at our AJAX Sticky Form demo here or download the demo for yourself!

Useful Links

Actinic v8 - How to Manage Content and Products

siteadmin — Tue, 31 Mar 2009 09:27:47 +0000

Actinic is an eCommerce software application that allows you to develop and manage an online web store. This guide demonstrates how to use Actinic version 8 to manage your web store’s content and products.

Restore Initial View

Actinic has an initial layout view for managing your ecommerce website which you will see when you first open Actinic. It is possible to customise this view when you become more confident with using the program, but for the purpose of this tutorial, let’s use the initial view to keep things simple. Just to make sure we are seeing the initial view, we can ask Actinic to restore it by clicking ‘Window’ toward the top of the screen, and then ‘Restore Initial View Layout’.

Content, Design and Orders Tabs

Toward the top of the screen, there are three tabs (two for client versions):

Content: Used for managing products and pages of the website
Design: Used to change the design of the website (developer copy only)
Orders: Used to manage orders made by customers

This tutorial is going to cover the ‘Content’ and ‘Orders’ tab, which when clicked, will give us the initial view layout for managing products, pages and orders of the website.

Managing Content

Actinic Content Layout

Clicking the ‘Content’ tab will display three different sections in our layout:

Content Tree: The tree is a list of our pages and products in sections and sub sections
Page Preview: This is a preview of how the website will look
Details: An area where we can change the details of selected items in the content tree

Content Tree
At the top of the Content Tree, we have our front page of the website and below this our catalogue of products. Clicking on the top page in this list (the front page), we change the Page Preview to show us how the page currently looks as well as changing the Details section to give us editable details relating to that page.
You will notice in the Content Tree, small + symbols next to many of the items. This means that the item in the tree has either one or many elements that make up that item. For example, our front page has a fragment element. A fragment is a block that may contain text or images. Our catalogue pages also have these + symbols. That’s because these pages contain sub-section elements (sections within sections). You can click the + symbol to see what elements that item contains.

Adding Items to the Content Tree

Let’s click the + symbol for the item at the top of the list (our front page). We can see a fragment called ‘Welcome to Three Wishes’. This is the introductory text that appears at the top of our front page (we can see it in the Page Preview).
Clicking the Catalogue + symbol shows our top level sections: Gold, Crystals, Pearls, etc. Some of these top level sections have sub-sections we can reveal by clicking the + symbol next to the top level section. We can continue to do this until the product is revealed within its section and sub sections. At any time you can click the – symbol to close a level (section or sub-section).
So now we know how to view our ‘Tree’ of content, how can we add to it?
Adding Fragments

Adding Fragments

Let’s go back to our top item, the front page. Click the + symbol to reveal the “Welcome to Three Wishes” fragment. Let’s say we want to add another box of text under our introduction: Right click the original fragment in the Content Tree and click ‘New Fragment’.
You will notice the Details box changes to ‘Fragment Details’. Here we can insert the name of our new fragment and an image that may appear in the fragment along with our new text. At any point, if you decide you don’t want the new fragment, or created it by mistake, click the ‘Cancel changes’ button.
Let’s give the new fragment a title of ‘Test’. We don’t want an image so we can leave that blank but we’re going to put in some text about our new website launching! When you’re happy with the new details for the fragment, click the ‘Apply changes’ button. You will then see the fragment appear in both the Content Tree and the Page Preview.

Adding Fragment Details

Adding Sections and Sub-Sections
We add sections and sub-sections in the same way as we did the fragment detailed above.

Adding Sections and Sub-Sections

Let’s say we want a new catalogue section called “CDs”. We must right click the section we want this new section to appear below in the list. We’re going to right click the bottom item so the CDs section appears last on the catalogue list, and then click ‘New Section’.

Adding Section Details

As with our fragment we added above, the details box changes and in here we can supply the details for our new section. We’re asked for the name of this new section, an image to represent it and a description. When we’re happy with what details we’ve entered, we can click ‘Apply changes’ or ‘Cancel changes’ should we change our mind and not want to add the new section. This works in exactly the same way for sub-sections as well.

Details Tab

In the details box you may notice tabs across the top. These tabs are where you can place further information about each section and sub-section. We’ve already filled out the information in the ‘General’ tab but it is also highly recommended we fill out the areas under the ‘Page Settings’ and ‘Details’ tabs. It’s not crucial, but should we fill in these details, it will greatly increase the chances of that category being indexed highly in a search engine (where potential customers can find our site).

Let’s take a look at the ‘Page Settings’ tab. Here we specify the page title and page name. By default, Actinic will generate these using the name we gave the section but it’s always worth changing the page title to something that contains a keyword rich description of that page.

The ‘Details’ tab asks for information that isn’t generated automatically by Actinic so providing information for this tab is the more important of the two. Here we’re asked for a Meta Description and Meta Keywords, of which are beneficial to search engines. The Meta Description is the text that appears under your page title in a search engine results page. It needs to describe the page (section) and utilise keywords relevant to the content. The Meta Keywords are a short list of keywords describing the content. These are the keywords and key phrases that people will most likely use to find your page in a search engine.

Example of Meta Description: A wide selection of silver and gemstone pendants and earrings.
Example of Meta Keywords: Silver and Gemstone, Silver, Gemstone, Opalite

Adding Products

Adding New Products

Now we have our sections and sub-sections, it’s time to put some new products in them. This works similarly to the above methods of adding fragments and sections but the details we’re asked for this time will be slightly different.

Right click either the section or sub-section you want your new product to appear in and click ‘New Product’.

The details box will change again but we must supply some different information for the new products we want to add to the website:

Reference: a unique code that represents your product
Short Description
Price
Full Description
Image: a full size image of the product
Thumbnail: a miniature size image of the product

Once you’ve entered these details you can then click ‘Apply changes’ and the product will be added.

Editing and Deleting Products

To edit a product we simply click that product in the ‘Content Tree’ and change the information under the respective tab. We can then click ‘Apply changes’ just as we did when adding the product for the first time.

To delete a product, right click in the ‘Content Tree’ on the product you no longer want to sell and click ‘Delete’. When you have deleted a product you may notice it remains in the ‘Content Tree’ but with a red cross over it. This is in case you wish to “undelete” the product – putting it back on sale. To undelete an item right click on it and select “undelete”.

Adding Components

A component is used when a product is available in various colours/sizes etc. Let’s take a look at adding a ‘choose colour’ option for a product:

Steps 1 & 2 - Adding Components

1) Right click the product we want to give a component

2) Click ‘New Component’

Step 3 - Component Details

3) Give this component a ‘Component Name’ in the details box and click ‘Apply changes’

Steps 4 & 5 - Adding New Attributes

4) Right click the newly added component

5) Click ‘New Attribute’

Step 6 - Attribute Details

6) Give this attribute an ‘Attribute Name’ in the details box and click ‘Apply changes’. Note that this name is what displays on the website so we’ll call it “Choose colour” to make it click to the user what they are choosing.

7) Right click the newly added attribute

8.) Click ‘New Choice’

9) Add the first choice of colour in the ‘Choice Name’ box and click ‘Apply changes’

10) Repeat steps 7 to 9 until all of your choices for that product have been entered.

Updating your Website

Once you have added new products or made changes to existing ones, you’ll need to update the website for those changes to go live. Until you do this, the changes made in Actinic will not be visible to customers viewing your website.

To update your website simply click the blue up arrow in the toolbar.

Backing Up your Website

Backing up or exporting your website is very important. It is recommended you backup your website every time you start to add new products or make alterations to existing ones. Doing this will save the current state of your website should you need to revert to it at a later date.

Exporting Website Snapshot

To backup your website:

Click ‘File’ > ‘Snapshot’ > ‘Export Site…’
Actinic will run you through a short wizard to complete the process. When asked for a name of the backup, we recommend using today’s date and time for future reference.
Once you’ve given a suitable name for the backup, click ‘Next’ and the wizard will continue until the backup is completed.

Importing your Website

Importing allows you to load an older version or ‘snapshot’ of the website. You may wish to revert to a backed up version of your website.

Importing Website Snapshot

To import a website:

Click ‘File’ > ‘Snapshot’ > ‘Import Site…’
Again, Actinic will run you through a short wizard. This time you will be asked to browse to the location of the backed up website file.
Once you’ve done that, click ‘Next’ and the wizard will complete your import of a previous version.

We now have a good understand of the most useful features in Actinic version 8. If you have questions regarding the covered features or want to know more about Actinic v8, leave a comment below!

Useful Links

How to Change the Colour of an Image Object in Adobe Fireworks

siteadmin — Mon, 09 Mar 2009 16:07:30 +0000

Quite often, when searching for a relevant image to go on a new website we are designing, we’ll find one that’s almost right, but not quite! We might have a certain picture in mind but when we find it, the object in the picture is perfect but the colours are completely the opposite to what we wanted. Putting it into the design makes the image stick out like a sore thumb and the most important part - the content of the page - fades into the background.

We'll be changing the yellow hot air balloon to a red one

Read on to find out how simple it is to change the colour of a selected part of an image in Adobe Fireworks. In our example we’re going to change the yellow part of the hot air balloon from yellow to red. We’ll use the magic wand tool to select the area we’ll change and then a hue filter to choose the colour we want.

Step 1 - Click the image and choose 'save image as' to download

1. First of all, you’ll need an image you want to change. If you want to use the hot air balloon image we are using, download it by clicking the image above or by visiting sxc.hu, the free stock image website we got it from.

Step 2 - Using the magic wand tool

2. Open your image in Adobe Fireworks and choose the magic wand tool . In our example image we’re going to change the yellow area so let’s click anywhere in that area with the magic wand tool to select it. Your chosen area will be surrounded by a moving dashed line. Almost certainly, this area you’ve just created will either be too small and not cover the entire yellow area or be too large and encapsulate more than the yellow part of the balloon. In our example above, we haven’t selected enough of the yellow area so we’re going to need to alter the tolerance of the magic wand tool.

The tolerance tells the magic wand tool how much of a difference in the selected colour it can highlight. Our current tolerance is at 28 which means the magic wand tool is only highlighting the yellow area that is shadowed and not the side of the balloon that is in the sun. We can raise the tolerance level until it highlights the entirety of the yellow area. With a little bit of trial and error we can get the right tolerance level which for the hot air balloon is 150. Note that 150 also highlights a small amount of the black area but this will work well because that black area has a slight amount of the yellow colour reflecting on it.

Step 3 - Altering the hue to change the colour to red

3. Now we have the right area selected we can change the colour of it. With the area still selected, click ‘Filters’ > ‘Adjust Colour’ > ‘Hue/Saturation…’ and the Hue/Saturation dialogue will appear above. Experiment with the hue slider and you’ll notice your selected area is changing colour. For the red, we’ve chosen a hue of -42. It’s that simple!

You can also experiement with the lightness and saturation if you’re struggling to get the colour you want. We also recommend checking the ‘Colorize’ option if you want the area to have a slightly less vibrant colour that may appear more realistic in images that need it.

Alternate Method

The magic wand is great for selecting areas of similar colour and for our above example it worked perfectly. However, in some photos/images you may need to alter the colour of a more complex area or one that has several different colours. For this, we highly recommend using the pen tool instead of the magic wand. How? Well take a look at one of our previous tutorials: “Remove Background/Cut Out Image in Fireworks/Photoshop” which will tell you how to easily draw around a complex object using the pen tool. Once you have drawn around the area, you can convert path (created by the pen tool) to a marquee and open the hue/saturation dialog box as above.

Useful Links

Our Favourite Web Design and Development Blogs

siteadmin — Thu, 19 Feb 2009 11:44:51 +0000

The Internet’s so fast moving it’s difficult to keep up with the latest design trends and web technologies. Every so often at ITM Design, we come across some excellent web design and development blogs that are constantly updated with excellent content to keep you on top of the moving trends. Below you will find some of our favourite web design and development blogs we like to visit on a regular basis.

We highly recommend you visit them all!

Web Designer Wall - Design Trends and Tutorials

Why we like it: Great design with useful tutorials covering the latest web technologies.

Web Designer Wall is one of our favourite looking websites on the Internet. The design demonstrates the latest trends on the Internet; using layered, torn pieces of paper to make up different areas of the site, all sitting on top of a hand drawn abstract background with some areas being slightly grungy. The colours are rich and appealing without drawing the eye from the content.

It offers tutorials for web design and development, as well as news about the web and inspiration for designers. The site has a great online presence and the tutorials - which cover the latest web technologies - are always written extremely well with an extensive amount of n for each topic.

There’s many useful posts offering great resources for design inspiration and the owner of the website has an excellent flair for design, the graphics and tutorials on how to recreate them are plenty enough inspiration to make you want to open up Photoshop and start experimenting with the new ideas and techniques on offer.

Vandelay Design Blog | Web Design and Development Blog

Why we like it: Lots of inspiration resources.

Vandelay Design is the blog to visit should you need some design inspiration.

They cover design and inspiration, web development, WordPress, CSS and SEO but by far the best use for Vandelay Design are the compiled resource lists. They showcase images for inspiration, tips and techniques for Photoshop and listings of inspirational websites.

We always like to take a look to get new ideas for designs as well as to see the best of website design on the web.

Function Web Design & Development Blog

Why we like it: Lots of inspiration resources.

Function is another excellent blog for finding useful resources. They often compile lists of free resources, such as WordPress themes and Tutorials.

We like the simple design that leaves the content to do the talking. It’s another showcase of simplicity with a slight amount of grunge just to give it an edge. The content looks as though it’s sitting on rough pieces of layered paper, a style that has been highly popular for the last few years and still continues to be so. It helps the content to stand out without being obtrusive.

This is another great blog for finding out what’s hot on the Internet. They often compile lists of websites that are defining new trends or breaking the mould.

SitePoint - New Articles, Fresh Thinking for Web Developers and Designers

Why we like it: Lots of content, regularly updated.

SitePoint is a great place for web designers and developers to visit. Over the years SitePoint has become a very big success and has many contributors to the blog. They also publish books relating to the web design and development industry.

The blog covers many aspects of web design and development, such as, news & trends, web technology, Javascript and CSS, search engine marketing and many more.

There’s also a podcast should you want to keep up with their offerings or visit the forums to get more involved.

More web design and development blogs we like

Animated Stickman - Tweening Animation in Adobe Fireworks

siteadmin — Thu, 12 Feb 2009 13:02:27 +0000

Following on from our previous post: “How to make Animations and Animated Graphics in Adobe Fireworks“, we’ve now got the basic knowledge of making an animation in Adobe Fireworks. We can animate a graphic, moving it a small amount, each frame, across a series of frames to make the final result appear as if our graphic is actually in full motion.

Our tutorial today is going to cover the rest of Adobe Fireworks’ useful tools and commands for making animation even easier and more impressive looking! We’re going to use symbols and tweening, a method of animation that became popular in Adobe Flash. We’ll also take a look at onion skinning and distributing to frames, all techniques that are useful for animation in Fireworks.

Here’s what we want to achieve (click to see a bigger view):

Our stickman is going to move from A - B across 12 frames, and the waves will do the same but at a slower speed. Unlike our last Fireworks Animated Stickman tutorial, we’re only going to need to animate 2 frames (A - B) and Fireworks will do the tweening - which is short for inbetweening (doing everything in between frames A and B).

Read on to find out how simple it is to animate our surfing stickman…

Step 1 - Click the image to download our example file

1. First of all, you’ll need our example file which you can download here. Once you’ve downloaded it, open it in Adobe Fireworks.

Step 2 - Converting our graphic to a symbol

2. In our example file, we have two groups of vector graphics. One group makes up our surfing stickman and the other the wave. Let’s start by converting these groups to symbols, which they need to be to allow tweening.

Open the Layers inspector by either pressing F2 on your keyboard or clicking Window > Layers.
Select the Surfer group in the Layers inspector.
Now convert this group to a symbol by either pressing F8 or clicking Modify > Symbol > Convert to Symbol.
Let’s give this symbol the name of Surfer and Type: Graphic, then click OK.

We can then select our Wave group in the Layers inspector and do exactly the same as we just did to Convert the Wave to a symbol. This time we’ll call it Wave and give it the Type: Graphic.

Step 3 - Placing our surfer in the end (B) position

3. Our Surfer and Wave symbols are currently in the start position (A), so now let’s copy them and put them in the end position (B).

We’re going to ignore animating the wave for the moment and concentrate on the surfer, we’ll come back to the wave afterwards:

Choose the Surfer in the Layers inspector again and then click Edit > Copy. Now click Edit > Paste. You should then see another Surfer symbol has appeared in the Layers inspector.
We want this surfer behind the wave, so in the Layers inspector, drag the top layer Surfer down under the waves layer. Our Layers should then be in the order of Wave, Surfer (B), Surfer (A).
Select the bottom layer surfer and move it to the end (B) position, as shown above. Tip: To move your surfer you can drag him, hold the right cursor key on the keyboard to move a pixel at a time (hold shift and the right cursor key to move 10 pixels at a time) or change his X coordinate in the properties inspector (our X coordinate is 252).

Step 4 - Tweening our surfers

4. We now have our surfer at the start and end position (A and B) and that’s our job done! Now to get Fireworks to finish the animation for us:

Select both of the Surfer symbols in the Layers inspector by clicking one, hold down CTRL on the keyboard and then clicking the other.
Click Modify > Symbol > Tween Instances… to open the tweening properties.
We are then asked how many steps are to be taken in between the A and B position of our surfer. Let’s keep it at 10. This means after position A, Fireworks will then move our surfer a tenth of the way towards position B, then another tenth until it reaches position B, the end.
We want this to happen over frames as this is going to be an animation, so let’s also select ‘Distribute to frames’ in the Tween Instances box, then click OK. Fireworks may take a while to implement the Tweening (if you selected 100 steps it may take a couple of minutes!).
Once done, you will notice the surfer in position B has disappeared. Don’t worry! It’s just because our surfer’s are now distributed across frames and we are looking at the first frame of the animation.

Step 5 - Our animation with onion skinning applied

5. Our stickman is now surfing across the canvas, but how do we test it? Click the play button above your properties inspector. You’ll see the stickman smoothly surf across the canvas, albeit on an empty sea. We’ll come to finish the sea shortly, but let’s take a look at the Frames inspector to find out what Fireworks just did to make our stickman surf.

You’ll notice at the top of the Layers inspector, there’s different tabs along with the Layers tab. Click the Frames tab. We can then see 12 frames (more if you chose more than 10 steps in the Tween Instances box). We explained how to change the timing of each frame in our previous post: “How to make Animations and Animated Graphics in Adobe Fireworks”, so we won’t go into full detail here. Briefly, the number next to each frame is the amount of milliseconds that frame will last for. By default, it’s set to 7, which is perfect for making our animation nice and smooth. We’re not going to change these but feel free to experiment and revert back to our previous post should you want to find out more about frame timing.

Something useful for looking at all frames in one go is the ‘onion skinning’ feature. At the bottom of your Frames/Layers inspector, click the Onion Skinning button and then ‘Show All Frames’. We can now see our surfer spanning across all frames.

6. All we need do now is tween the waves using the options in step 3, let’s recap:

Copy the waves symbol and paste a duplicate copy.
Move the new waves symbol (the top most layer) to the right, we’re going to move ours 120px so each frame it will move 10px.
Select both of the wave symbols and click Modify > Symbol > Tween Instances…
Choose 10 steps and distribute across frames, then click OK.

We now have a surfing stickman!

Useful Links

PHP Captcha Script for Comment Forms & Registration Forms

siteadmin — Wed, 04 Feb 2009 15:51:57 +0000

If you’ve signed up to a website in the last few years then almost certainly, you’ve come across a PHP Capthca Script.

A PHP Captcha script is a way of determening whether the form on a website is actually filled in by a human rather than a computer program. As many websites offer better and better features, there’s more potential for those features to be exploited and as such, programs are used to attempt to automatically fill in registration and comment forms on a website to access them. Captcha’s have become the most popular method to prevent these automatic programs from completing a form submission. A Capthca is a simple challenge-response test, usually requiring the person to repeat a text string that appears in an image, in a field on the form. Images are used to present the challenge because it is difficult for an automatic program to read from the image.

An example of a Captcha validation form. Click to view our demonstration.

In our free PHP Captcha Script, we’ll provide you with the code and images to make implementing a Captcha form on your website as easy as could be! We’ll discuss how it works and how you can customise it to suit your website as well as make effective Captcha images. Read on for our complete guide…

Download our Free Script

First of all, you’ll need to download our free PHP Capthca Script here.

The package will contain 2 files; post.php and validate.php, along with a validation folder for our images that will be presented to the user as the challenge.

Installing the Script on your Website

Upload both files and the validation folder to your website. You can access the basic demonstration script by visiting: yourwebsite.com/post.php. Take a look at our PHP Captcha Script here.

How the Script Works

post.php

post.php contains the code that generates the random test, as well as the html for displaying the form.

Let’s take a look at the important parts of the script…

In between the tag of our document we first start the PHP session. A session in PHP is a way of storing information behind the scenes. In the case of this script, we will be storing the users name, comment as well as the validation challenge and the users answer to that challenge.

$rndimg = rand(1,5);
$_SESSION['val'] = $rndimg;

switch ($rndimg){
case 1:
$imgsrc = “1.jpg”;
break;

case 2:
$imgsrc = “2.jpg”;
break;

case 3:
$imgsrc = “3.jpg”;
break;

case 4:
$imgsrc = “4.jpg”;
break;

case 5:
$imgsrc = “5.jpg”;
break;
}

Next our script randomly generates a number between 1 and 5 as we are going to have 5 different challeneges on our website. The switch function then chooses the image that represents the challenge chosen by the random generator. Our images are named 1, 2, 3, 4, 5 to keep things simple.

Once the random image has been chosen, our comment form will then be displayed to the user along with the chosen validation image. However, before this happens, there are three different states at which the user could currently be at; filling in the form for the first time, filling in required fields that were missed, recieving the success message. Our script determines at what state the user is respectively at and either outputs; a blank form, the half completed form with message asking for remaining fields to be completed, a blank form with a success message.

The script uses the information we stored in our PHP session to determine the current state of the process. In our session we have a variable (a container that stores information) called ‘output’. Should this variable be blank then the user has only just begun viewing the form. Should it have error messages in it, then the user hasn’t completed the required fields of the form. Should it have a success message, then the process is complete.

The session variable is controlled in the validate.php file…

validate.php

validate.php is the ‘behind the scenes’ file that will test whether the user inputted the correct answer to the challenge and filled out all of the required fields in the form.

Let’s take a look at the important parts of the script…

session_start();

$_SESSION['name'] = $_POST['name'];
$_SESSION['comment'] = $_POST['comment'];

We begin by starting our session so we can store information there. In the above lines of code we are storing the posted name and comment into session variables.

if (isset($_POST['submitted'])){
$output = array();if (empty($_POST['name'])){
$output[] = “Please enter a name.”;
}

//check for comment
if (empty($_POST['comment'])){
$output[] = “Please enter a comment.”;
}

Next we are checking whether the form was submitted (further down the script we redirect the user back to the form should they somehow have come straight to the validate.php script) and adding errors to the output variable should the user not input a name and comment.

if (empty($_POST['validate'])){
$output[] = “Please enter the validation number.”;
unset($_SESSION['val']);
}else{
if ($_SESSION['val'] == “1″){$val = “1498″;}
if ($_SESSION['val'] == “2″){$val = “5409″;}
if ($_SESSION['val'] == “3″){$val = “6112″;}
if ($_SESSION['val'] == “4″){$val = “7415″;}
if ($_SESSION['val'] == “5″){$val = “8743″;}

if ($_POST['validate'] != $val){
$output[] = “Please enter the correct validation number.”;
}
}

Above we have the important bit, checking the answer to the challenge was correct. First of all, we check atleast some sort of answer was inputted and if not, add an error to the output variable. Then, we need to take the number that was randomly generated in post.php, match that number with the challenge it corresponds to and see if the user has inputted the validation number that matches the challenge answer. Should they not, we can add another error message to the output variable.

header (”Location: post.php”);

The above code will redirect from validate.php to post.php. Once our script is finished and the necessary status/error messages are stored in the session we can return to the post.php page where we can determine the state of the process.

The Validation Images

Example validation image

Our example validation image above contains the answer to the challenge but to make it difficult for an automatic program to read, we’ve added an abstract pattern over the top of the answer to try and stop it from being easily readable. Should you want to change your validation images, we recommend making the text difficult to read by using a strange font, distoring the text, adding a pattern of the top and spreading each letter/number out etc. Although our image above has prevented exploitation on websites we have implemented it on, should this script and particular validation image become popular, the image may be too easy to read. We recommend making your own validation images as well as making a greater amount of them.

Customizing the Script and Validation Image

So now you have the script working on your website and you understand how it works, how can you customise it? Well, that’s quite a few things we can do. Let’s take a look at changing the validation images, adding more validation images and getting validate.php to do more than just return a success message.

Changing the Validation Images

Our validation images are stored in the validation folder. So let’s start by replacing the images.

One of our new validation image

We’ve made our new validation images and named them 1, 2, 3, 4, 5. In our example above we’ve attempted to make the image a little more complex by using different fonts, placing some of the numbers together and putting a texture over the top. It takes a little more time to read this one by eye, so it should be great for stopping an automatic program from reading it.

Our new set of challenge answers now need to be put into the script. Example: image 1 (the one above) has an answer of 578933. So when the PHP script randomly generates image 1, it needs to know the answer to that image challenge.

Open validate.php and find the following code:

We need to change the answers for each image. Line 1 above is the answer for image 1. So let’s change that first…

if ($_SESSION['val'] == “1″){$val = “578933″;}

Above, we’ve simply replaced $val = “1498″; with $val=”578933″; That’s all we have to do for each new validation image. It’s crucial that the answers we’re putting into the script match the answers in each image else the system will never work! $_SESSION['val'] == “1″ should also have the same number as the name of the image file (1.jpg).

Adding More Validation Images

If you’re website is popular, we recommend you use more than 5 images but how can we add more? Let’s make another 5 validation images to have 10 in total. These new images will be called: 6.jpg, 7.jpg, 8.jpg, 9.jpg, 10.jpg and we’re going to save them in the same validation folder as the other images.

Open post.php and look for the following:

$rndimg = rand(1,5);
$_SESSION['val'] = $rndimg;

The top line of code determines the range of numbers to randomly generate one from. Currently it’s set to 1 - 5 so let’s make it generate any number from 1 - 10.

$rndimg = rand(1,10);
$_SESSION['val'] = $rndimg;

Simple! We now have a range of 1 - 10. Now look for the switch function:

switch ($rndimg){
case 1:
$imgsrc = “1.jpg”;
break;

case 2:
$imgsrc = “2.jpg”;
break;case 3:
$imgsrc = “3.jpg”;
break;

case 4:
$imgsrc = “4.jpg”;
break;

case 5:
$imgsrc = “5.jpg”;
break;
}

Currently, the switch function is saying: “If number 1 is generated, the image to use is 1.jpg. If number 2 is generated, the image to use is 2.jpg.” and so on. We need to add anoter 5 cases for our new set of images.

switch ($rndimg){
case 1:
$imgsrc = “1.jpg”;
break;

case 2:
$imgsrc = “2.jpg”;
break;case 3:
$imgsrc = “3.jpg”;
break;

case 4:
$imgsrc = “4.jpg”;
break;

case 5:
$imgsrc = “5.jpg”;
break;
}

case 6:
$imgsrc = “6.jpg”;
break;case 7:
$imgsrc = “7.jpg”;
break;

case 8:
$imgsrc = “8.jpg”;
break;

case 9:
$imgsrc = “9.jpg”;
break;

case 10:
$imgsrc = “10.jpg”;
break;
}

Using the above our script will now choose from any of the 10 validation images. Now we need to add the answers for the 5 new images. Open validate.php and find the following:

Let’s add 5 more of these “if” statements for the newly added set of 5 images.

if ($_SESSION['val'] == “1″){$val = “1498″;}
if ($_SESSION['val'] == “2″){$val = “5409″;}
if ($_SESSION['val'] == “3″){$val = “6112″;}
if ($_SESSION['val'] == “4″){$val = “7415″;}
if ($_SESSION['val'] == “5″){$val = “8743″;}
if ($_SESSION['val'] == “6″){$val = “7776″;}
if ($_SESSION['val'] == “7″){$val = “6782″;}
if ($_SESSION['val'] == “8″){$val = “1125″;}
if ($_SESSION['val'] == “9″){$val = “5254″;}
if ($_SESSION['val'] == “10″){$val = “2002″;}

And there we have it! Our script can now challenge a user to 10 different validation images. Remember when you’ve made these new changes to upload them to your website.

Your new PHP Captcha Script can be implemented our any type of form that you think may be exploited by automatic programs. We find it particularly useful on registration, comment and contact forms.

Let us know how you’ve implemented yours!

Useful Links

3D Text in Photoshop/Fireworks

siteadmin — Tue, 27 Jan 2009 10:31:27 +0000

3D text can be made simply in Adobe Photoshop and Fireworks and there’s so many different ways of creating it, no two text graphics will ever look the same! It’s great for making text on your website stand out and it can even be used in your logos and avatars.

Our 3D Text Examples

Our 3D examples above took only minutes to make and demonstrate different ways to turn your text 3 dimensional! Read on to find out how to try these different methods; drop shadow, inner bevel, inset emboss, and blend.

Our examples below were made in Adove Fireworks CS3 but will work similarily in CS4 and versions of Adobe Photoshop.

Creating Text

The following three steps will be used to make our text before turning it 3D.

Step 1 - Creating a new canvas

1. In your chosen graphics package (Fireworks/Photoshop - we’re using Fireworks), click File > New and make a canvas of 350px x 200px.

2. Click the Text Tool button and click on your new canvas area. Type the text you want to make 3D - we’re going to use our company name ‘ITMDesign’.

Step 3 - Editing the text properties

3. Your text may not have been in the place you wanted when you typed, so let’s select the pointer tool and drag the text to an area of the canvas we are happy with. If you can’t see your text, it’s because it’s the same colour as the canvas. Either way, at this point we want to change the text colour, so open the properties inspector by clicking Window > Properties and the properties inspector will appear toward the bottom of the screen (as shown above). Here we can change the colour, font, font size, alignment and many other properties for the text. We’ll leave you to experiment with each property as it’s self explanatory. For our text we’re going to use the following:

Font: Arial
Font-size: 68px
Font-Colour: #9966CC (purple)
Alignment: Center

Our text is now aligned, sized and coloured how we want it, so let’s begin the different 3D text effects!

3D Drop Shadow Effect (Method 1)

Drop Shadow Effect (Method 1)

Drop Shadow’s make your text appear as if they are floating just above a surface. Method 1 is a really quick way of making custom drop shadows by placing a darker (shadow) version behind the actual text.

Step 1 - Drop Shadow Effect (Method 1)

1. Select your text on the canvas and press on the keyboard CTRL + ALT + D. This will create the text again, but in a second layer placed behind the first layer. Open the Layers inspector by clicking Window > Layers (or pressing F2 on the keyboard). Click the second layer in the Layers inspector to choose the text that we duplicated.

Step 2 - Making the shadow stand out

2. In the property inspector change the font colour to black and on the keyboard press the down cursor key twice and then the left cursor key twice. This will move our shadow layer so the edges of it appear just outside of our top layer.

And there we have it! Simple!

For further experimentation, try moving the shadow layer further from the top layer. The further away the shadow layer the farther from the surface the top layer of text appears. You can also alter the opacity of the shadow text which works especially well if the shadow is floating over the top of something else (such as an image).

3D Drop Shadow Effect (Method 2)

Drop Shadow Effect (Method 2)

Method 2 uses Fireworks inbuilt effects engine to create the shadow we want.

Step 1 - Photoshop Live Effects

1. Open the properties inspector by clicking Window > Properties. Select the text on the canvas that you want to apply a drop shadow to and click the + symbol next to Filters in the properties inspector. Choose Photoshop Live Effects and then click the Drop Shadow checkbox.

Step 2 - Choosing drop shadow options

2. If the Photoshop Live Effects appear over your text, simply drag the window down and you should see your text already with a default drop shadow applied. In this window we can choose different options to make our drop shadow unique. To make choosing each of the options easier, imagine a light being shone over your text; opacity controls the strength of the light, distance controls how far the light is from the text, angle is the angle at which the light is being held over the text, size is the size of the shadow, and spread is how thick the shadow is. We can also apply ‘noise’ to make the shadow appear broken.

Experiment with the different options and you will realise just how many different 3D shadow effects are possible using the Photoshop Live Effect editor (available in both Photoshop and later versions of Fireworks).

Inner Bevel

Inner Bevel Effect

Inner Bevel makes your text appear as if from the sides it’s rising toward the middle. It makes your text appear chunky, like it’s standing out from the screen.

Step 1 - Applying inner bevel effect to text

1. Open the properties inspector by clicking Window > Properties. Select the text on the canvas that you want to apply an inner bevel to and click the + symbol next to Filters in the properties inspector. Hover over Bevel and Emboss and then click Inner Bevel.

2. Already your text has a default Inner Bevel effect applied to it but we can further change these options to get the effect looking how we want. Choosing ‘Flat’ will make the sides of the text appear sloped to a point, whereas choosing ‘Smooth’ will make the text appear to smoothly reach a top point. Simply experiment with these options to get the effect you want!

Inset Emboss

Inset Emboss Effect

Inset Emboss is the opposite of Inner Bevel. It makes your text appear as if it is inset into the page with a surrounding edge that slopes upwards to meet the rest of the page.

Step 1 - Applying the inset emboss effect

1. Open the properties inspector by clicking Window > Properties. Select the text on the canvas that you want to apply an inset emboss to and click the + symbol next to Filters in the properties inspector. Hover over Bevel and Emboss and then click Inset Emboss.

2. Already your text has a default Inset Emboss effect applied to it but we can further change these options to get the effect looking how we want. Increasing the width will make your text appear to sit deeper in the page and contrast alters the definition of the shadow.

Blend

3D blend

Blend is our favourite 3D text effect! It’ll work in later versions of Adobe Photoshop and Adobe Fireworks CS3 and CS4.

The Blend effect will take two seperate paths and blend from one to the other.

Step 1 - Duplicating and converting our text to paths

1. Right click your text on the canvas and click ‘Convert to Paths’ (Blend only works with paths). Duplicate this layer by pressing CTRL + Shift + D on your keyboard. Open the layers inspector by clicking Windows > Layers or pressing F2 on the keyboard. Click the second layer to select your duplicated text. Now hold shift on the keyboard and press the up cursor key once and then the right cursor key once (still whilst holding shift).

Step 2 - Changing the bottom layers text colour

2. We want our 3D text to be black at the bottom and fade into purple at the top. So let’s select the bottom layer in the Layers inspector and change the fill colour to black in the properties inspector.

Step 3 - Ungrouping our text layers

3. Open the Paths panel by clicking Window > Others > Path. Now select both of the text layers and press CTRL + Shift + G on the keyboard. This will ungroup each layer, making each letter a seperate path of it’s own. If you’ve done this correctly, you will notice many more objects in your Layers inspector.

Step 4 - Blending our first letter

4. We can now start applying the Blend effect to each letter. To do this, we need to select both letters of the layer. So in our example, we are going to select both layers of the letter ‘I’ and only those two layers. When selected, click the ‘Blend Paths’ button in the Paths Panel. Next we are asked for the number of steps to take to blend the two layers. Imagine this as the number of copies of the letter ‘I’ that will be used to fill the gap between the two layers. We’ve chosen 50 for our example above. Click OK and then Yes when asked ‘Flatten blended portions?’.

Step 5 - Our completed 3D blend

5. We can then follow step 4 until all of the letters have been blended together. Please note: when using the blend feature, you may find your computer slows down a little and the operation isn’t instant. Don’t worry about this, the feature takes a little while as there’s a lot for the program to work out. The more steps you want between the layers, the longer it will take to process.

So there we have it! Many different ways to make your 3D text. There’s many more different ways of making 3D text but just the above 5 mentioned ways are so versatile that you’ll always be able to make different looking text each time.

Useful Links