Tutorial

I remember that I first saw the dotted tunnel in one picture posted in Fubiz which sparks my idea on creating this tutorial. The graphic effect is kind of cool so I decided to try replicate the look and found out that it’s simple to do. The main tools used for this tutorial will be Pen Tool, Transform Tool and Blend Tool.

Making dotted pattern brush

At first we need to create the dotted line to make it a Pattern Brush show in step 1 below. The step by step creation can be seen here. After creating, select the pattern and drag it into the Brushes palette. A New Brush window prompted. Select “New Pattern Brush” and click OK. Then, you can name the brush or leave it as it is. The most important thing is change Colorization method to Tint. With this, you can change the color of the pattern. Click OK to finish.

Dotted Tunnel – Scaling method

The new Pattern Brush should appears in the Brush palette. Now, select the Ellipse Tool and press Shift to create a perfect circle. Select the stroke of the circle and apply the dotted brush stroke that we created just now to it. Change the stroke size to adjust the size of the dot.

There is two method to create the dotted tunnel. The first is by using the Scale transform tool. Select the circle, now go to Object > Transform > Scale… to open up the Scale window. Key in the amount of uniform scale for example 110% like picture below, and then click Copy. Hit Ctrl+D to duplicate more and more copies until it forms a tunnel.

By using this method, you can achieve two kinds of dotted tunnel shown in picture below. On the left is with “Scale Strokes and Effects” option enabled at the Scale window while on the right is not.

Dotted Tunnel – Blending method

The scaling method is easier however it does not gives us flexibility on editing it because it’s pretty much fixed. The second method which is using Blending tool allows us to create more creative types of tunnel and editing flexibility.

Create one dotted stroke circle and duplicate it to a larger one. Then select both of them and go to Object > Blend > Make. Then, in the same path we open up the Blending Options window to modify the blend mode. I’m using Specified Distance. Woot, a simple dotted tunnel was formed.

We can achieve different kinds of dotted tunnel by making some changes. First, we can modify the stroke by using the Stroke Options found in Brush palette. Here I scale the stroke size to 300% and notice how the blending change. We can also change the color of the tunnel too, because we make the stroke available for Colorization.

Next, we can also achieve 3D-ish dotted tunnel by changing the circle position. Look cool isn’t it? Besides that, we can expand the appearance of the blending the delete some part of the dots to make other interesting graphics like fan shown in picture below.

So this is the end of the tutorial. It’s a very basic and simple tutorial, I hope you can learn something from this. Thank you very much.

There are tonnes of great website designs on the web out there. Sometimes, web users wanted to take screenshot of the website either for future reference or as collection. The easiest method to use is by hitting the Print Screen and Paste it in MS Paint. But what if we want a full page screenshot?

Last time, when I want a full site screenshot, I do print screen page by page and then join it back in Photoshop. Clever. But the tools below make me look so stupid.

Firefox Add-on: Screengrab!

Screengrab! saves the entire webpages as images. Once installed, the Screengrab! icon appears at the bottom bar of Firefox browser. You can either choose to save or copy to clipboard. Output formar is in PNG. Best use for quick screen grabbing and saving. However it cannot take screenshots of flash content sites thou.

Firefox Add-on: FireShot

FireShot is a Firefox extension that creates and edits screenshots of web pages. Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

The Fireshot button appears at the right side of search bar. And like Screengrab!, it can’t capture flash contents. Although I use Screengrab! more often, but I found that FireShot is more useful.

Web: Super Screenshot

Superscreenshot is a website that let you enter a URL, and will give you the website screenshots in return. The URL entered can be save as full page with full original size either in JPG (compressed) or png (best quality, but takes some time to load). Again, it can’t capture flash content sites. Plus the screenshot width is narrow, about 900 pixels only. This means that content that wider than 900px will be cropped.

There is alternative site which is Browser Shots, but normally people use it to test how the site looks in different browsers.

Application: WebShot

WebShot allows you to take screenshots of web pages and save them as full sized images or thumbnails. Screenshots images can be output in the JPG, GIF, PNG, or BMP formats. The application is very flexible, you can set the width for the screenshot, and if you did not set the height, it will capture a whole page.

And the best part is it successfully captured flash content sites. But, flash sites normally takes more time to load, so to capture flash sites, I suggests to set the Timeouts for document for more than 30 seconds, depends on how fast your line is. It is free to use too.

End Note
Above are the 4 methods to take full web screenshots faster and smarter. If you have other methods, feel free to tell me by using the comment form below.

In web development, Cascading Style Sheets enable us to create the style and look of a web page. Today, I am going to show you a simple way to create a 3 column centered fixed width by using CSS that works in major browsers.

I use Dreamweaver CS3 as my main tool to create web layouts, but text editor can also be use to create layout too. Below is the screenshot of the 3 column layout and the demo html. Because it looks the same in many browsers tested, screenshot comparison is not provided.

• View demo (right click “Save Link As” to save)

The Basic Code

I use more codes because i need to separate the columns with background colors and specify the height, but basically the layout will work with the codes below:

CSS

body {margin: 0; padding: 0; text-align: center;}
     #container {width: 900px; margin: 0 auto;}
     #header {height: 100px;}
     #left {float: left; width: 200px;}
     #center {float: left; width: 500px;}
     #right {float: right; width: 200px;}
     #footer {clear: both; height: 50px;}

HTML

<div id="container">
     <div id="header"></div>
     <div id="left"></div>
     <div id="center"></div>
     <div id="right"></div>
     <div id="footer"></div>
</div>

Browsers Tested

I tested the layout and it works in browsers below. I am using Windows XP. Plus, I use IETester to enable me to test IE in multiple versions in a PC.

• Firefox 2.0.0.13
• Safari 3.1
• Opera 9.27
• Internet Explorer 7
• Internet Explorer 6

So here is it, a simple solution to a 3 column centered fixed width layout. There is much more solutions than this (fixed and fluid), which was highlighted in Noupe’s 9 Timeless 3 Column Layout Techniques.

One great tool that Adobe Illustrator offered to us is the Blend Tool. It is a tool to blend two objects with different shapes or color properties. It looks like a transformation from a shape to another. It is very fun to use and actually quite powerful and flexible too.

To establish a blend is very easy. Just create two shapes and select both of them, select Object > Blend > and click Make (or hit Alt-Ctrl-B). You now should see both shapes was tied together with a spline and blending steps in between. This is how blend tool works. Well, there is more stuff to explore with blend tool. Just continue reading to find out more! Continue reading

Emoticon and smileys is big in the Internet world especially Japan. In Japanese emoticon is called Kaomoji (顔文字 or facemark), which means texts that formed a facial expression. Kaomoji can be used and seen especially on chat room, text messaging, e-mail etc. Sometimes I am very impressed on the cuteness and wide range of Japanese emoticons.

The reason of Japanese Kaomoji can be so playful is because they are using 2-byte character, allowing more varieties on the look of facemark. For example, a Japanese “happy” kaomoji could have more than 30 kinds of varieties. Japanese facemark is cute but certainly it’s hard to type it out. However I found a way to turn Hiragana words to cute Kaomoji easily by using Japanese IME keyboard.

Continue reading

I’m a flash user since version MX, it is a very great tool to create interactive web contents. But there is one effect I want to achieve but couldn’t do in Flash: creating opacity mask. But thing had changed. Opacity mask can be done in Flash since version 8! Hopefully I am not too late to know this. Here I am going to tell you how to create opacity gradient mask with just few lines of codes in Flash.

To do this tutorial, you need Macromedia Flash 8 of course and a picture to mask. Before proceed, you can try to feel the opacity mask effect by dragging the masked image in the flash above, and starts the tutorial.

Continue reading

Recently I created a push button and I think it is quite cool and decided to create a tutorial here in my blog. There is quite a variety of styles of push button in the real world and the one I did here is more to gaming arcade push button styles. The final button design is shown above. What do you think?

Like my last tutorial, this tutorial also uses a lot of layer styling. To make the tutorial more understandable and effective, I include a starting working PSD, a final outcome PSD as well as the ASL working layer styles file. You can download it here: Push Button Tutorial Files. Just download and extract it, launch Adobe Photoshop and starts the tutorial!

Continue reading

I’m working in a game production company, so I always wanted to design things that has the gaming feel in it. The gaming window I created here is actually inspired by one current hot racing game, so I decided to learn from it and shares it here. Well, it underwent some rounds of tweaks, and finally it became the one shown above.

Because this tutorial is involving a lot of layer styling and a texture, so I made a set of layer styles and the texture available for download. Besides, the final result PSD file also included too at the end of the post. So what are you waiting for, read on to learn the trick!

Continue reading

Probably you had seen these color stripes in many websites like Veerle’s blog and others, these stripes are beautiful elements for web design and even other applications like brochures and flyers. Maybe you think that have to create the color squares one by one and it could be a time consuming process, but here I will teach you the easy way.

First of all, you need to have Adobe Illustrator (recommended CS2 and above) installed on your computer. Launch it and open a new document. Then, head on to select the Rectangular Grid Tool, which is hiding under the Line Segment Tool group. Next, click on the blank canvas (not drag), a Rectangular Grid Tool Options windows appeared. Fill in the options shown in the picture below. Make sure the two options at the bottom of the Options are checked. Click “OK” and the skeleton Rectangular Grid is created.

Continue reading