Web 2.0 Entrepreneur

Create a Reflection effect using Fireworks in 5 simple steps

• Posted by Tengku Zahasman on June 10th, 2007 filed in Web Design, Fireworks, Tutorial


• 15 Comments »
• (5,990 Views)

One of the usual designs around Web 2.0 includes having texts or images to appear reflected as if they’re on a shiny-clean surface. Last month I provided some simple tips on creating a decent Web 2.0 logo (which applied the reflection technique) but since it wasn’t a tutorial post, I didn’t explain step by step of how to actually do it using an image editing tool. It ain’t that hard if you’re a fast learner…. only 5 steps to go through. But before we do anything, let’s see the example end result that we’re trying to create in this tutorial (btw, this tutorial uses Fireworks 8 as the image editing tool):

Looks good enough to you? Now let’s get started!

Step 1 : Write the text

Obviously you need *something* to apply the reflection effect to. So open up your Fireworks application and write some texts on the canvas (using the Text tool). It doesn’t matter what fonts or colour you wanna use, just get some texts on the canvas quickly.

Step 2 : Duplicate the text

We’re going to use the duplicated text as the reflection later. So if you’re wondering how to duplicate the text, here’s how: Copy and paste. Just select the text (use the Pointer tool) and then press CTRL+C (to copy) and CTRL+V (to paste). This will paste the very same text on top of the original text, so it’ll look as if nothing happened.

Step 3 : Flip the duplicated text vertically

This shouldn’t be painful. Just go to the toolbar menu and find Modify -> Transform -> Flip vertical.

By now you should see the original text behind the flipped duplicated one. It’ll look something like this:

Step 4 : Move the flipped text below the original text

Push the *downwards* arrow button on your keyboard until the flipped text is placed just below the original text.

Alright…. the reflection is now in place. What you need to do next is have the bottom part faded so that it looks more realistic… let’s proceed.

Final Step : Fade out the bottom part of the duplicated (and flipped) text

To do this is easy. There’s a build-in Fireworks command that can do the fade out for you. Simply go to the toolbar menu and click on Commands -> Creative -> Fade Image. A new dialog box will pop-up giving you options of where you want the image to be faded out; either top, bottom, sides, etc. We want to fade out the bottom part, so use some common sense and choose the right option

By doing that, the reflection is now faded out. If you find the reflection to be revealing too much, just drag the controller pane up a bit and adjust until you’re satisfied.

Done! Wasn’t that hard was it? Having this steps mastered adds you another graphic design skill that you can apply in many things (logos, menus, buttons, etc). Now go repeat everything again with different fonts and colours, add some gradients or anything so that you can remember the steps like the back of your hand.

First impression matters!

• Posted by Tengku Zahasman on May 21st, 2007 filed in Web Design


• 4 Comments »
• (281 Views)

I’m not saying that you need to develop creatively stunning design for your web app. I mean hey, look at MySpace… it was once regarded as the ugliest web app ever. But the amount of users they have scrolling over their ugly, full of ads website every single day is overwhelming. What I actually mean when I say “first impression” has nothing to do with beauty, but more towards the strategy that you use for your site’s look-and-feel. It’s the type of layout that you want to use, the fonts, where you place your login form, the logo, the theme colour, where to use Ajax or Flash, ads placement, user-friendliness, etc. Different types of web apps will have different style of interface and user-experience, because how your app should look and behave is largely dependent on what it is used for and the target users. ImageShack, an image hosting application have a minimalist design to impose the “easy & no hassle” look, while Netvibes has a more defined design to give the impression of “we have many features for your favorite feeds!”. Invest your time more on defining what’s the most effective design for your web app. For what is worth, simplicity and cleanliness always work in most apps so you can start off with that mindset. Even after you have launched your application, you can continually tweak your placements here and there to analyze the differences that it makes.

Talking about look-and-feel, I have just finished sketching the mock up design of one of my current web app project using Fireworks - my favorite graphics tool. I am not going to show you guys yet how it looks like but I will when I think its time to have them uploaded. Anyway, you can also adopt this practice when designing your app. Sketch your whole website in a graphics tool first because it is faster and it gives you an idea of how you your site will look like in the end. Only after you have satisfied with the mock up will you start coding the layout and placement on Dreamweaver (or any other softwares that you use).

3 simple steps to create a simple Web2.0 logo

• Posted by Tengku Zahasman on April 28th, 2007 filed in Web Design, Fireworks, Web2.0


• 5 Comments »
• (1,491 Views)

As an Internet Entrepreneur where your time and financial budget is limited, it is always a good idea to equip yourself with as many skills as you can handle. Knowing a little bit of graphic design can be very helpful most of the times. At least you don’t have to pay hundreds of bucks for someone to design you just a simple logo. The good news is you don’t need to know advanced graphics design when it comes to Web2.0 because Web2.0 designs are always created around “simplicity” and “cleanliness” (thank God!). Here’s a a few steps of how you can easily create a decent Web2.0 logo without much hassle. (PS: I use Macromedia Fireworks to do most of my image editing jobs. A handy tool!).

Generally, there are 3 basic things you need to consider when designing a Web2.0 logo:

1. The Text
2. The Object
3. The Style

Focus only on these three points and you won’t be scratching your heads anymore! Ready to get your hands dirty? Let’s go one by one.

The text

Let’s say your Web App is called “Flarke”. What you need to do is choosing the right font and the right color for this text. A smooth and simple looking font is always better than the edgy and complicated ones. In my case, I use the font “Euphemia”. When it comes to the color part, it is good to have at least two different colors for your text. If your text have two words paired together (like StumbledUpon), you can make each words to have different colours. If your text only consists of one word (like “Flarke”), then use your common sense and just differentiate the colors at some points. Here’s how my initial logo comes out:

This is so far very basic.

The Object

Text alone is too naked. You need an object to give your logo an attitude and a brand for people to recognise and remember. It can be an object that is related to your application or it can be something you create randomly - just make sure it looks fine. In my case, I created two simple rings which color matches the primary color of the logo, and shoved it to the corner of the initial text I created in Step 1. Simple. Here’s how it looks like now:

Actually this is already a good logo for a Web2.0 application. Clean and slick. But adding a few styles will make it look even better.

The Style

Web2.0 logos are often seen to have either of these two styles: One is a “glassy-look”, and another is by having a “reflection”. You can use either of this, or better still, you may even apply both. For now, I’ll just apply a reflection to my logo so that it looks like this.

Oh!… isn’t that a nice looking logo? Only three steps and you already created a decent, official-looking, and acceptable Web2.0 logo. But wait, Web2.0 logo usually also comes with the word “beta” (or any of its variants like “alpha”, “zeta”, etc). So let’s put it in and complete the logo:

That’s it! You’re done!