Art & Design

About button design

Last week, I had been doing some UI design which consists of many buttons. When the first time I did for review, they said my button is too flat and not delicious enough to click. Hmmm okay.. Actually it is hard to judge a good button design but certainly is lack of research material out there! So what makes a good button? Actually I also not very sure. After that review I tweaked my button design and some of them shown above.

I used a lot of blend modes to achieve the 3D effect above for example: Drop shadow, gradient overlay, bevel and emboss, inner shadow, inner glow, stroke, outer glow…. Wow that’s a lot, and sometimes, several layers is needed to make a button. It is quite troublesome huh? But i quite happy with the outcome until the next review :P.

Good button examples

Actually I had three buttons in mind that I think is very good button. First up the Apple button, the glossy effect is really stand out from the rest (Example shown is firefox’s macfoxgraphite theme). Next is the Iconbuffet button. It is bold and contrasting color with the big and clear text, located in big whitespace, which makes it nice element to the page design too. And final, actually I don’t want to credit this but, the button is really well executed! Introducing the popular fart button. The button is very dominating and 3D realistic! But I never clicked it. 😛

Free online button generator

Sometimes, let the app do the button design for you, haha. Cool. Below are some websites that offering this service.

1. Buttonator – drag and drop web buttons (need pay thou for more option)
2. Adam Kalsey’s Button Maker
3. My Cool Button – Web 2.0 free button maker!
4. YaBB Button Generator – flash based generator. Slick but IMO it’s not very convenient.

5. Button maker web – I think this is far most the best button generator site. It has the most options and variation of designs available. Sadly it’s only in Japanese currently.

Extras

In the meantime of writing this post, DesignWalker posted an article about ways to execute icon’s shadow effect which is quite comprehensive and inspiring which I think is applicable to button design as well. Click here to read and grab the free useful resource file. Plus, Alex Griffioen’s How to make sexy buttons with CSS article, which i think is quite useful.

Japanese rice paddy crop art

Recent days I stumbled upon this article titled Pimp my rice paddy. The article and the pictures caught my eye. According to Pink Tentacle, each year, farmers in the town of Inakadate in Aomori prefecture create works of crop art by growing a little purple and yellow-leafed kodaimai rice along with their local green-leafed tsugaru-roman variety.

And this year’s creation — a pair of grassy reproductions of famous woodblock prints from Hokusai’s 36 Views of Mount Fuji — has begun to appear like the picture shown above. It will be visible until the rice is harvested in September. The picture shown below is the planning and work in progress of planting the seeds into the field, photoed back in May 27th. To be honest, I don’t know how they planning out the plan and how they precisely planted them into the right position because the crop art is pretty complicated and huge!

Inakadate’s farmers already practice this activities since years ago (can be traced since 1993), and they already created some magnificent work of art like pictures shown below. And it actually influence other towns’ farmers to do the same too. I think is pretty good because can grow food and doing something creative at the same time. Two benefit in an activity, brilliant!

Japanese crop art vs crop circle

Maybe you will start to think that this Japanese crop art is similar to Western crop circle (i mean those man-made one). Well, there is something different is the Japanese crop art that is planned carefully and the art only came be seen when the crop is fully grown, while the crop circle is appeared in middle of nowhere which causes surprises. Besides that, the Japanese is “growing” the art, while crop circles is produced by stepping down the crops, thus create the shape.

For more research and reading, visit:
1. www.vill.inakadate.aomori.jp,
2. www.am.askanet.ne.jp and
3. 田んぼアート(たんぼアート, Tanbo art)Japan Wikipedia.

Orange Range cover art

I love Orange Range‘s songs a lot. I like their Okinawa style of music that is very unique, happy and alive. Besides that, I also like their CD covers too, especially their earlier released singles, because it always has a creative way to blend their logo and using the orange as subject matter.

As mentioned earlier, Orange Range is a Okinawan rock group. Okinawa is a very beautiful island and great for summer vacation. So their music was also very summer feel and sunshine! Their early stage of cover arts have these feelings but the cover art later on is not very catchy in my opinion especially their recently released best albums (consists two “Orange” and “Range“, it just look like a cheap photoshop copy and paste, quite dissapointed the first time i saw…

Well, below are some of my favourite Orange Range cover art. Continue reading

Surf in another dimension?

Screen are flat, normally what we see on the net is just a flat piece of info. But there is designers that breaks that boundary. They want the viewer to experience that actually you are in the virtual 3D web space which create the illusion to viewer. These websites are outstanding and inspiring just like M. C. Escher‘s drawing partially shown above.

The websites listed here are powered by Flash, and they are range from 3D menu system to the whole 3D web environment. Please enjoy! Continue reading

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

More free fonts & web gallery

What is so great about having a habit of surfing Del.icio.us’s Popular and Recent bookmarks is, you get to know the nice & inspiring websites that discovered by other people which is so convenient and useful! Thanks to this social networking site, I found another 2 sites that provide quality free fonts & web design gallery.

Die Gestalten free fonts

Die Gestalten offers free fonts featuring experimental display fonts in addition to single weights of the popular text fonts for trial. The free fonts is being added and updated regularly so be sure to visit this site frequently to get all the free fonts they have on offer! Sadly some fonts is available for MAC only.

Style Boost

Styleboost is a gallery for showcasing beautiful web sites. It has been around since January 2001 and is created, designed and maintained by Johan Bakken. The gallery is clean and simple. Every sites that is listed here not only will be categorized by its characteristics, it also categorized by the colors of the site. Plus, a short description to further understanding the listed websites and it also allow users to comment too.

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

7 Delicious Web Design Galleries

Web design gallery is the great inspiration place for many designers and enthusiasts. It showcases the best sites that combines both usability and aesthetics of design. Getting listed in one of those could be a great honor to the firm and the designers. Here, I present some of the sites that showcases the great web designs and each gallery is unique on its own, read on!

Continue reading

Logo inspiration sites you should’t miss

Everything needs identity. For human, we have name as our basic identity. In medieval era, heraldry was used as identity, which now is still visible in modern world. For companies, brands, society etc, they need a logo as identification. Logo is important because it represents the company to the world. So logo has to be eye catchy, unique yet easy to remember.

Designing logo can be fun, but actually it can be a painful process too. I can struggled easily during the logo design development. You need to do some research, or look into other logos to get design inspiration. So here I compiled some sites that will help you to get inspiration.

Continue reading