Tutorial

Create 3D extruded text in simple steps

Create 3D extruded text in Illustrator

Actually I found this 3D extruded text effects on a trendy magazine, it looks interesting so I open the Adobe Illustrator CS2 to try it out. I found out that it’s simple to achieve this effect. You can use this technique to spruce up your logo designs so they really pop on your business cards and business promotional items etc. Because this involved 3D extrude effect, so you have to have at least version CS of Illustrator in order to proceed.

At first, type out the text with desired font. In here, I’m using rounded text. Then hit Ctrl+Shift+O to create the outline of the text.

Type out the text

Continue reading

How to use Star Tool effectively in Illustrator

Star Tool secret tip... unveiled!

Adobe Illustrator’s Star Tool is a tool that not only can create lovely star shapes, it also can create the web badges which is popular right now in web design. To use Star Tool is very simple, just point your cursor to Illustrator’s Tools panel and select the Star Shape icon which grouped together with Rectangular Shape tool.

Then, you can start doing Star shapes by dragging across the canvas. Release the cursor to finalize the shape. It’s just that simple. But what if I want to have more controls to customize my Star shape? In this post I will teach you some essential tips so that you can use the Star Tool effectively.

Continue reading

A beginner’s guide to Web 2.0

A beginner guide to Web 2.0

Remember when first knowing the term Web 2.0, I have no idea about what it is except Web 2.0 is the latest generation of web trend. It took me sometime to have a clear picture of it. So, if you are new to Web 2.0, this post is for you because I will teach you the best way to understand the Web 2.0 and what its web design trend.

Learn from the term inventor – Tim O’Reilly!

Tim O'Reilly explaining Web 2.0

The term Web 2.0 is invented by Tim O’Reilly, during a conference in 2004. According to him “Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform.” He posted an article title “What is Web 2.0” to explain the essence of Web 2.0. Here I quoted the graph from the article that is showing the movement of web 1.0 to web 2.0:

Web 2.0
Google AdSense
Flickr
BitTorrent
Napster
Wikipedia
blogging
upcoming.org and EVDB
search engine optimization
cost per click
web services
participation
wikis
tagging (“folksonomy”)
syndication
Web 1.0
DoubleClick –>
Ofoto –>
Akamai –>
mp3.com –>
Britannica Online –>
personal websites –>
evite –>
domain name speculation –>
page views –>
screen scraping –>
publishing –>
content management systems –>
directories (taxonomy) –>
stickiness –>

Continue reading

Create a simple scrollable content with CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus a turpis. Donec accumsan tellus eget velit. Maecenas eget risus. Praesent quis nisl. Sed in odio non orci varius pretium. Nam convallis tincidunt nulla. Quisque malesuada massa eu elit. Aliquam ac diam vitae neque fermentum pulvinar. Morbi eget mauris eget justo convallis fermentum. Fusce hendrerit. Donec nonummy nulla sed purus. Proin ut quam vitae quam semper rutrum. Vivamus fermentum urna dictum felis. Etiam at ante. Cras vel dui. Sed porta, ipsum eget auctor congue, justo nunc viverra dolor, vel molestie metus diam sed elit. Nulla facilisi. Quisque euismod, lectus non tristique gravida, lectus pede aliquet massa, non rhoncus elit tortor vitae dolor.

Curabitur varius ipsum ac ante. Integer at felis. Nam ac leo sollicitudin velit faucibus fringilla. Praesent lacinia ipsum quis sem. Proin fringilla lacinia ipsum. Etiam imperdiet pede nec massa. Nulla interdum, nulla non sollicitudin volutpat, diam turpis tempor libero, quis egestas nunc orci ac sem. Mauris nisl nibh, condimentum ut, aliquet in, tincidunt vitae, leo. Fusce consequat, lectus eu sagittis bibendum, lectus odio aliquam nisi, in aliquet erat ligula nec nibh. Proin tincidunt. Aenean pretium blandit neque. Etiam libero nibh, molestie eget, sodales id, placerat sed, turpis. Proin ligula velit, ultricies id, hendrerit et, molestie ut, sapien. Nunc facilisis.

Basically, the scrollable content above is just done by using CSS and not iframe. This can be achieve by setting up a specific width and height of a div tag, and putting a lot of text inside the div. Finally, we add the overflow property to allow the scrollbar appears. The specific CSS styles is shown below.

.scrollable
{
height: value px; /* set the height */
width: value px; /* set the width */
overflow:auto; /* make the scrollbar appears */
}

That’s it! The basic property to make a scrollable content. It works on Firefox and IE6 browser. You can add other styling as well if you want, for example border or background properties. Some advance styling will be putting a fade off effect on top and bottom of the content area.

This scrollable content CSS is particular useful if you want to display data like Latest News for example, and wanted to control the height of the content. Plus, it is better than using this method than iframe is that, all the contents will be in the same page and not load from other page (which iframe did this), so the SEO value is preserve.

7 time saving Photoshop tips for web designers

As a Photoshop user for more than several years, although cannot consider myself as Photoshop experts, but I did had some tips and guides for Photoshop beginners and fresh web designers to do stuff faster and more efficient in Photoshop. With this tips, you can know more about Photoshop and learn some essential time saving skills. Here I have 7 in total.

1. Save frequent used layer style

Sometimes we do some layer style that is quite repetitive, for example I will frame a transparent grey border for each picture posted in my blog. Because they are the same, so I save it as my Layer Style. To save, just double click the layer containing the styles u want to save, then click the Styles tab and click “New Styles”. A window prompt out, name the style and save it. So next time, instead of going to the Stroke properties to make the border, I just click the styles I just made, convenient!

Continue reading

Tips to get your favorite jpop lyrics

My lyrics post actually get quite a lot of clicks over the net, and some of it at the first page of google search. I feel very happy about this because I can help people to find the song lyrics they like as well as promoting the goodness of Japanese songs.

I received some request to help find the lyrics. I would like to help but I have not enough time to do it (And somehow I can’t cover all Japanese songs :P). So, I write out this post to help you to get your favorite jpop lyrics.

Method 1: Jpop lyric sites (romaji)

I googling around with the keyword “jpop lyrics” but most of them is too outdated, unless you want to search for older songs. JpopLyricsStation is quite a good site to find older songs’ lyric, both romaji and kanji. I still remember back in the days I bookmarked this page and now it’s still there!

1. CherryBlossom Garden – Consider this is a new-age Jpop lyric website. Best in town and covers a lot of artists and songs. Sadly it just updated to March only. Upload more lyrics, tanomu!

2. Mognet – Another great source for jpop lyric. What so good about this site is it provides kanji, romaji and translation of the lyrics posted. Their lyrics database is expanding. Great job buddy! (4 Oct 07 added)

3. CoriChan – This is another good site, pretty up to date.

Honorable mentioned: RandomFlowers

Method 2: Ask uncle Google!

Yes, Google is the fastest and easiest way to get your favorite jpop lyrics. For example you search the song and stumbled upon my site :). There’s so so many other sites that provide the same too. If is popular artists like Ayumi or Otsuka Ai etc, you can find their lyrics easily, especially on their fan created forum, sure will have the latest lyrics and maybe with translation as well. For example, AyumiHamasakiSekai and Channel Ai.

Method 3: Search by using Japanese

Sometimes, search by English will not giving the desired result, so you need to use Japanese instead. But by searching the title and artists is not enough, you need to add some other keywords like: 作詞 (lyricist), 作曲 (music),or 歌詞 (lyric). By this it will speed up your lyric finding process. and today I found a great site of Japanese lyrics database which is:

music.goo.ne.jp. Very up to date and most important, the lyrics are selectable (Many other sites are embed the lyric inside flash, sigh). I think I’m gonna rely on this site a lot.

But, if you don’t know Japanese, and don’t type Japanese what to do? Maybe you can use websites like amazon.co.jp, Oricon, or even thePPN to get the Japanese keywords you want.

Tutorial 1: Translating Japanese to Romaji

I would like to share with you how I get the romaji lyrics. The trick is through this site: Kanji Converter. You think how I get the lyrics for GReeeeN’s album? I’m not Nihongo expert and thanks to this site, for turning impossible to possible.

Because it is a converter, so it won’t give you 100% accurate conversion. So I suggest is after converting to romaji, running through the song again together with the lyric and edit the wrong part. Then you will have a more precise lyric.

Tutorial 2: Storing lyrics

I’m assuming you have the mp3 for the song. Now mp3 has quite advance ID3 tag, which will store the songs info and even lyric. Or, you also can use iTunes or WMP to store the lyric into the mp3 which is much easier.

Well, that’s about it. I giving all the tips to you guys already, and I hope you find this guide useful and find your favorite Jpop song’s lyric with ease next time! 😀 Be sure to bookmark this page (list of social bookmarks below) for future reference and I might update this post with more tips in future! 😀

P.S: If you have other great suggestion, feel free to leave your suggestion below!

Bon Odori Fan Vector Download

Last week, I and my friends went to the Bon Odori at Shah Alam, and I wrote an entry about it too. It was an enjoyable event and definitely looking forward to go again next year. When arriving the stadium, everyone will get a plastic fan to get yourself cold down. When I take back home, I observe the form of the fan and suddenly have one idea in mind, why don’t just make it into vector graphic?

The form of the fan is pretty straight forward and easy to construct. Below I will show you how I create it in Illustrator CS2 as well as the vector file for download. Perhaps you may want to ask why I use black color? Well is because recently i read a post in PingMag, it says that black is getting popular in Japan. Look at that black toilet roll, cool. So I also want to experiment black with this fan. Well I think the result is not bad! 😀

Continue reading

How to create Transformers logo effect in Illustrator

Transformers perhaps is the highest box office and the most discussed blockbuster in this summer. It brought back a lot of childhood memories of many viewers but not me because I seldom watch cartoon back in kids day :-(. Last week I bought a HK magazine call MILK and the supplemental is featuring the Transformers too with a huge autobots and Transformers logo as cover. I found out the old school Transformers logo is fascinating which leads me to create this tutorial.

Continue reading

10 simple ways to make glossy button

Woot. My first tutorial! Glossy button is current in thing in web design, because it is eye-catchy, pretty and friendly. Not sure about how the trand started but I pretty sure is Apple button style! There are some ways to “glossify” a button, which I will teach you how to make below. Tutorial work file is included also. But first, let me teach you the simple steps of making a glossy button.

Continue reading