Stuff to do Online » Web Design

WEB 2.0 Design Quiz

Samuro — Fri, 14 Nov 2008 03:19:10 +0000

Designinterviews.com is a design Interviews project. It is a resource on Web Design and Internet featuring interviews with professional web designers.

Designinterviews launched WEB 2.0 Design Quiz project. WEB 2.0 Design Quiz figure out how smart you are on this issue. To participate to this WEB 2.0 Design Quiz just simple take a minute to complete the Web 2.0 quiz. There’re 10 questions you need to answer.

Here are the three possible skill degrees that you can get:

Web 2.0 Master’s Degree. This is the person who will take over the Web.
Web 2.0 Bachelor’s Degree. This is the person who will get rich with Web 2.0
Web 2.0 Student. A person with a promising future in Web 2.0.

And this is my quiz result:

More Useful Information

How to create web 2.0 text style using Photoshop

Samuro — Thu, 22 May 2008 19:46:09 +0000

This is as completing and continue to my previous post about “create web 2.0 text style using Photoshop” at this and this. I think both tutorials are not enough to gives you nice tutorial and good design for your web 2.0 text style design.

This post is really inspired by Gamexe.net, and that tutorial is the best web 2.0 style text tutorial I have found. Please visit Gamexe.net to see detail of tutorial and find step by step how to create web 2.0 text style design.

At this post I’ll not give you step by step how the web 2.0 text style can be as seeing. I just give you the Photoshop screenshot and final Photoshop file after I practice tutorial from Gamexe.net.

Outer Glow

Gradient Overlay

Stroke

And here’s the PSD file, download it.

More Useful Information

Create Web 2.0 text using Photoshop

Samuro — Sun, 30 Mar 2008 17:27:36 +0000

I just getting enjoy when I learn both Photoshop and CSS. And an image that is look likes beautiful is Psd Web 2.0 text. There’re a lot of Web 2.0 text tutorial using Photoshop. Just search their using search engines such as Google or Yahoo with “Web 2.0 psd” and or “psd web 2.0 text” keywords. You’ll find various web 2.0 tutorials. And I like all those results.

Currently I still develop one web 2.0 text style, and I’ll make tutorial and give you the Psd file that available for download.

Well, to make this tutorial quick and simple, I just provide this tutorial with ‘Psd Blending Options’ screenshot and short description for that screenshot. I use three ‘Psd Blending Options’: Drop Shadow, Gradient Overlay and Stroke.

1. Drop Shadow

Blend mode: multiply
Opacity: 45%
Angle: 120
Use global light: yes
Distance: 5
Spread: 0
Size: 9

2. Gradient Overlay

Blend mode: normal
Opacity: 100%
Style: linear
Align with layer: yes
Angle: 90
Scale: 100%

3. Stroke

Size: 3
Position: outside
Blend mode: normal
Opacity: 100%
Color: white, white code: FFFFFF

The result

It’s so easy. You can do experiments to get best appearance for your design, moreover may be you will get better than this design sample.

Download Psd file.

More Useful Information

Choosing Image Format for Web

Samuro — Wed, 31 Oct 2007 12:26:27 +0000

Choosing right images format (image optimization) is one of ways to make your sites/blogs loading more faster. There’s three image format that usually used, jpg/jpeg, gif and png.

Each type of image format have the insuffiency and excess. So, as webmaster had to know the insuffiency and excess of each image format, then can choose the right format for different situation.

For example; image size 125×125 pixel, one color (black). Then save it as jpg, file size can be 11332 bytes though it save with the low quality. But if it saved as gif format, file size is just 192 bytes (gif 64 dithered).

Comparison of image quality:

GIF. Small size if the image have little color. For image which have a lot of color like photo, use the JPG format. You can do experiment which the effective and optimized format.
GIF format own the clear and bold color, jpg format sometimes become blur if saved at low quality.
For transparent image, better use gif or png format.

You can try by saving same image with different image format. I usually saving gif format with quality 64 dithered, saving jpg format with medium quality.

How about you?!. Any suggestion please leave your comments bellow.

More Useful Information

Make your blog theme more nice

Samuro — Tue, 04 Sep 2007 17:13:51 +0000

Hello valued readers!,

I thought and even assure most of you are a bloggers and webmasters (whos have blog or website). So at this post I’ll talk about blog design, layout and color. But, this topic is not only for bloggers or webmasters, This is also for whom design lovers.

My experience and my knowledge by reading others design articles, I concluding that the nice blog design must have the following criterion:

Large layout that compatible with 1024×768 screen resolution. So it make your readers easy navigate and easy to explore your blog content, no need a lot of scrolling down.
Use three columns. Such as those I mention, make your blog easy navigate and easy to explore. Using three columns is giving you a lot of space to put your content links on the sidebar.
Don’t use the dark color as your content background color like black or purple. Just imagine, how are you by reading a book with black background color.
Put your navigation page at the top of page, of course outside/before your blog content. Or you can put it on sidebar, but remember it must on top of sidebar.
Make the partition to dissociate your links/banners; the ads, offers and promotion, other links/banners, etc. You can make a partition by giving border or larger margin.
Put your feed rss link/banner on top and make it uppermost; bold text or larger banner.

I enquire Alvin Phang about using three columns, and he answer is; “the sidebar must be on only be on the right side”, see this post: 4 Important Tips To Find A Blog Theme To Make Money Online. But it’s OK if you put your sidebar on left or on left and right. I thought the reason why the sidebar must be on the right side is bacause most of people read from left to right. So when visitors visit a site, the first look is the left-top.

Optionally for the more nice blog design:

Use gradient background color for the header
Web 2.0 text style. I assure most of bloggers and webmasters love to see web 2.0 text style

Here’s the .psd file. Download it now!.

Theme Modules

Header
Navigation page
Header 2. Example: http://www.forex1020.com it’s contain top image randomly, rss feed link and social media sites.
Blog post/content
Offers and promotion links/banners. Example; Google search, stuff, coupon, etc
Ads links/banners
Blog links; category, recent and popular articles, archives, and comments
Other links/banners. Your blog; mybloglog/blogcatalog readers and community, and others kind of this

Make those modules clear (the sidebar, besides content), so your readers easy to differentiating between the internal and external links, don’t hazy. May be you have found some blog that hazy sidebar, so it hard to navigate and also hard to explore, you confuse where is the category links list, because there’s a lot of links and banners and the links is too close.