Yes, that’s the tagline for the blog now. Corny!

This is one of my significantly-not-me attempt to do a wordpress theme. The idea behind this concept is partly influenced by thesilentroom, and youthasia (you’ll notice some element’s influence is present in these two sites).

Alas, I’m still somehow prefer the theme of white-gray-red or black-gray-red, so I’m sticking to this color theme for a while!

There’s so much stories to talk about, I wish I can squeeze in 24 extra hours in a day to write it down!

EMBED-Creating A Stop Sign – Watch more free videos

Enjoy, and have a Happy Christmas!

Want more? Read: Clients From Hell (This one is my favorite among the entries).

I’m sure many of you guys who are Web Designers or Web Developers have faced clients who are not only clueless about what they want, but also clueless as to what the roles and differences are between these two terms. I dare not say most, but quite a number of clients (especially those that comes from marketing, no offence intended) have no clue about our roles.

Pardon me if the way I see things are not the same as you guys, but I am compelled to clarify, and educate people on what my opinions are regarding the roles of web designers and web developers. In summary here’s what the differences are:

Web Developers

Web developers are the rockstar, or the champion that makes most of the website’s magic works. In short, if you want the website to be able to take user registration, collect some data, and produce certain results or outputs that correlate to the visitors, these are the people you are looking for.

Web developers will listen to your needs, suggest some approach to solve your problem, and make the magic work with their awesome programming skills.

Web Designers

Web designers, on the other hand, are the people who make your website look beautiful and also usable. They face challenges on plethora of issues related to different browsers people use to view your website, think about the most efficient way to layout your website so that the website loads as fast as it could, and make your visitors want to know more about you and your services.

In other words, web designers are the one that decorates the stage, print the tickets, and put up banners to the rockstar concert that will be performed by the rockstar themselves – the web developers (see above).

So?

What we want you to understand is that both web designers and web developers work hand-in-hand with each other to produce the website that not only solve your problems (and make it do what you want), but solve it elegantly and beautifully, while keeping the fun of your visitors intact so that they will come back for more.

Let’s take an example of a canned drink. Web developers will be the one figuring what is the best way to manufacture the drink you wanted, they will figure out what are the mixtures, and what kind of factory setup is ideal to produce the drinks efficiently. Web designers, on the other hand, will figure out how to make the can and boxes looks appealing to the customers so they will buy the drink and tell their friends about it.

A note to both web designers and developers

Now this part is going to be a bit geeky. As a web designer, it will be a tremendous advantage if you could pick up some web development languages – most popular at the moment is PHP, ASP and Ruby on Rails. By knowing the basics of these web development languages, you can integrate your designs into the application in a speedier manner, without confusing the web developers on how your HTML, CSS and JavaScript works, and at the same time saves the agony of the developers accidentally breaking your hours of work by missing one tag (or a semicolon, for that matter).

For developers, knowledge in laying out your basic application interface in a properly coded (and unstyled) manner will also save the designer’s time by not having to restructure the web page to make it work with how he designed the page.

Conclusion

For all, remember this – everytime you want to start a new web site, think about it – will it have anything that is using database? If you do, chances are you will need to hire both web designers and web developers to get the best results.

If you just want to make your website look prettier (the so-called facelift) and preserving the current function on what the site does, then you will need to hire web designers.

Some designers can also develop. Many web development teams nowadays will include a few designers on board, so they come in a package. Though they’re hard to come by, as many designers are not willing to be tied up in one team, unless they’re working on a whole new innovative ideas.

What should you do? If you think your web site will need some development work, contact the developers – they will contact the designers to help them with the cosmetics.

Savvy?

Introduction

Microsoft will be releasing their flagship Windows 7 in about 3 days from now. Most people who’ve tried it likes it (including yours truly). One thing I noticed is their subtle update on the general user interface, and a major revamp of the taskbar. One of my activities that I love to do during my spare time is to try to replicate certain user interface, graphically to understand what kind of detail do they put into focus that makes everything appears as it is.

This guide is separated into 3 parts:

• First part will focus on reproducing the skeleton of the application windows in Windows 7
• Second part will focus on reproducing the contents of these windows (i.e. explorer)
• The last part will focus on reproducing the taskbar of Windows 7

This guide is written for Adobe Photoshop CS4. Most of the process can be achieved with any previous version of Adobe Photoshop, but some workarounds will be needed.

Part I – Windows 7 application window frame

To begin, load any of your favorite wallpaper (or any images) that we can use as a background image (this will make it easier to see the effects later on). However, if you wish to proceed with a plain color, feel free. Do avoid pure black and white though, as it will make the effects to be subdued and might make it difficult for you to fine tune the outcome. For this example, I will be using a wallpaper called Age of Strife by myINQI from DeviantArt.

Figure 1: Load any wallpapers or images to be used as a background image. No wallpaper? Checkout some of my collections.

Next, create some guides to mark the size and position of the window interface that we’ll be creating. This step is entirely optional, but I find that having guides helps a lot in getting things straight and aligned nicely. Don’t know how to create a guide? First, make sure your ruler is turned on (Ctrl+R), then click on the ruler and drag your mouse into the image. You can do this for both horizontal and vertical rulers to create the guides respectively.

Figure 2: Nice and guiding guides

Now, from the Tools palette (the one on the left with many icons), set your foreground color to black. Then, click and hold your mouse on the shapes tools and choose the rounded rectangle shape. On the toolbar above, set 10px as the Radius.

Figure 3: Setup your tools in this manner

Proceed to draw the rounded rectangle, following the guides you have created before (or any freestyle size that you wish to produce).

Figure 4: Draw the rounded square. Oh yeah baby

Next, we need to include some textures to mimic Windows 7′s windows. I have created this texture file for you guys so you can save some time:

Click on it to get the full-sized version, obviously

Now that you have the texture file, open it with photoshop, and paste it on top of your rounded rectangle. Don’t worry if the texture file is way bigger than your document (as it is in mine). Just leave it there.

Figure 5: Gotta love that stripes. Oh yes don’t freak out yet alright?

Make sure the “texture” layer is positioned directly above the rounded rectangle layer. Now right-click on the texture layer and choose “Create Clipping Mask“.

Figure 6: Now, create a clipping mask

If you do it right, you should see that the texture layers are now masked by the shape of the rounded rectangle layer below.

Figure 7: You just got to love the uber-ness of the clipping mask feature

Once you’ve done with the cheering and jiggling, let’s proceed. Now let’s set the Blending Mode of the texture layer to Screen, and set the layer’s Opacity to 50%. Lost? see figure below.

Figure 8: Add some magic to this layer to make it awesome

Now, hop on to the rounded rectangle layer, and change the Layer fill to 20%. At this point you should see a pretty pointless textured translucent rounded rectangle being made. Note that you can turn the guides off and on by pressing Ctrl+;.

Figure 9: Yep that’s about right

Let’s add some borders and highlights to make that shape more useful now, shall we?

Select the rounded rectangular layer, then right-click, and choose Blending Options. Set the blending options as follows:

Figure 10

Drop Shadow:

• Blend Mode: Multiply
• Opacity: 100%
• Distance: 0px
• Size: 15px

Figure 11

Inner Glow:

• Blend Mode: Normal
• Color: White
• Technique: Precise
• Choke: 0%
• Size: 1px

Figure 12

Stroke:

• Size: 1px
• Position: Outside
• Blend Mode: Normal
• Opacity: 100%
• Color: Black

You should now have a pretty neat looking frame.

Figure 13: Yay now it looks better

Now is the time for some more effects. Right-click on the background layer (not the one named ‘Background‘, but rather, the one that you have your background image on), and choose Duplicate Layer. Name it anything you want and hit OK.

Figure 14: Duplicate Em

You should now see two layers with the same background image. Select the one on top, and choose Filter -> Blur -> Gaussian Blur from the menu bar. Set the radius at 4.0 and click OK.

Figure 15: Let’s make it blur baby!

You should have something like this:

Now, time to mask that blur only to the areas behind the window. To do this, make sure the blurred background layer is selected, and while holding the Ctrl key, click on the Shape Mask on the rounded rectangular layer. If you do it right, you should see the “marching ants” appear in the shape of the rounded rectangle:

Figure 17: Let the ants march!

Next, while the ants are marching, and the blurred background layer is selected, click the “Add Layer Mask” button at the bottom of the layers palette.

Figure 18: Create a masked blurred background layer

Some magic will occur and now only the areas behind your window is blurred.

Figure 19: Yay!

Okay now that you’ve sort-of mastered the art of layer masking, let’s add some glitter to the window border. To do this, create a new layer above the texture layer (make sure it is not affected by the layer clipping mask).

Figure 20: You now have a new layer. Now head down to the nearest bar and celebrate!

On the new layer, select the Gradient Tool (click and hold on the Paint Bucket tool if you can’t find it). Set the Gradient type to Linear on the toolbar on top, and select the “Foreground to transparent” gradient type, and make sure your foreground color is White.

Figure 21: Setup the Gradient Tool

After that, click and hold your mouse anywhere about 1/3 from top of the image, and drag the mouse cursor upwards, while holding your Shift key (this will ensure the Gradient is perfectly straight).

Figure 22: This is how you do it

Release your mouse button and you should see something like this:

Figure 23: Yay now the image is almost destroyed. Don’t panic. More steps to go

Select the Marquee tool (some people call this the Select Tool) and draw a rectangular around the 2/3 of the bottom part of the image.

Figure 24: Select the lower 2/3 of the image. In case you are somewhat intellectually-challenged, you can work this tool by clicking and dragging a box over the mentioned area

Now press your delete key (on the keyboard, obviously). And you’ll get:

Figure 25: Chunk of the gradient is now gone

Now go to Filter -> Blur -> Gaussian Blur again, and this time, apply around 2.0 pixels worth of blur. Once you’re done, do the same Layer Mask technique as the blurred background layer (scroll up and read again if you forgot). Then, reduce the layer’s opacity to 50%. You should now get something like this:

Figure 26: Masked, reduced opacity layer

Now turn the guides back on (in case you turn it off earlier), and create four more guides as follows:

Figure 27: The gaps between the guides are – Top: 30px. Left, Right, Bottom: 10px

Next, ensure your foreground color is White. Now choose the “Rectangle Tool” (it is at the same place as the Rounded Rectangle Tool, click and hold to change the type of shape) and draw a new rectangle according to the size of the newly created guide above. You should have a blank white box in the middle right now.

Figure 28: New white box!

Apply some Blending Options to this layer as follows:

Figure 29

Outer Glow:

• Blend Mode: Screen
• Opacity: 100%
• Color: White
• Technique: Precise
• Spread: 0%
• Size: 1px

Figure 30

Stroke:

• Size: 1px
• Position: Inside
• Blend Mode: Normal
• Opacity: 100%

By now you’ll have something like this:

Figure 31: Almost Done!

Alright now one small step left, that is the window title. This is pretty easy to do, just use the Type tool and type whatever you want on top. The font settings are as follows:

• Color: Black
• Font Family: Segoe UI
• Font Size: 12pt
• Anti-Alias Method: Crisp

Then, apply these Blending Options to the text layer:

Figure 32

Outer Glow:

• Blend Mode: Screen
• Opacity: 50%
• Color: White
• Technique: Softer
• Spread: 5%
• Size: 13px

Here’s the final output:

Figure 33: The final output for Part I

Wait, it’s blank!?

Yes of course, in Part II, I will show you how to replicate the contents! Stay tuned!


/*
* Main CSS File
* Kucing Kelabu Designs (http://www.kucing-kelabu.com/)
*
* Browser Prayers (in case the CSS went roque)
* Now I lay me down to XHTML
* I pray the Browser Engine my CSS positioning to keep
* If I float beyond the DIV
* I pray the lord Bill Gate's soul to keep
*
* Hush little browser don't say a word
* and never mind the positioning you heard
* it's just the IE CSS bug under your bed
* in your browser in your head
*
* Exit Light. Enter Night.
* Take my fixes
*
* We're off to browser-compatiblity Land
*/
* {position: relative; zoom: 1;}


Yep. That’s one of the IE fixes. Do you guys have any? :D

Visit the site and please give us our needed feedback!

This is an addon for Firefox (I think it works with 2.0 and 3.0) that changes your GMail stylesheet. Here’s more screenshots:

Neat, isn’t it? Want it? Visit Globex Designs and get it!

Note: This tutorial is written based on Adobe Photoshop CS3, however this technique should be able to be applied to any versions of Photoshop.

For those who doesn’t know what “soft-focus” effect is, it is something like follows:

Original Photo:

Edited Photo:

Want to know how can you obtain this effect? Read on! It is simpler than you think!

1. First of all, you, of course have to start Photoshop and open the image that you wanted to apply this effect on.
2. Once the image is open, duplicate the layer by clicking on the menu “Layer -> Duplicate Layer…”. For keyboard junkies, you may press Ctrl+J to do the same:
   
3. Now go to “Filter -> Blur -> Gaussian Blur…”:
   

   Set the value pretty high, to a point where the image is almost completely smudged:
   

4. Now on the Layers palette, choose “Screen” as the blending option (make sure you choose this on the layer that you have blurred out):
   
5. You’ll notice that the effect is too strong. To reduce this effect, adjust the layer’s Opacity until you get the effect that you want:
   
6. And there you have it!
   

There are some further adjustments that can be done to make the photo better, but let’s save that for another time. If you have questions though, do ask!

You can double-click on any blank space in the Photoshop window to quickly open any files!

Adobe Photoshop then will display the familiar dialog box:

The way I normally go about to get these colors is by taking a screen shot of the website and use the color picker in Photoshop (or other image editing software) to pick the colors up, and save the colors for later.

Recently, I’ve discovered a very handy trick to make this task a lot easier. (Note: I’m using Photoshop CS3, so I am not sure if this would work in previous versions of Photoshop).

Some tips to make this easier:

• Unmaximize your Photoshop window, unless if you have two monitors, on which you can have Photoshop and your web browser both maximized on each of the monitors.
• Have one blank document open (it can also be any open Photoshop/Image file, doesn’t really matter)
• Maximize your browser and open the website with the color that you wanted.

The steps

First, choose the Color Picker tool ( ).

Next, click anywhere in the blank document (or any open images/Photoshop files) and drag your mouse out of the Photoshop window, right onto the color on the website that you wanted to pick.

Release your mouse button, and Voila! you have the color you wanted! The screen shot below might help you understand what I meant:

Hopefully this will help in finding the right color that you’ve always wanted!

Note: This trick also works with Adobe Photoshop CS4

The sample we’re going to use for this guide is this image of Berjaya Times Square I took somewhere in 2006:

I took this picture with my Fuji Finepix S9500 (which I have sold off to make way to DSLR). If you’ve read my previous guide on enhancing image with S-Curve and try it out on this photo, it’ll become pretty weird, something like this:

While this might look okay for some creative use, I personally don’t like it because it distorts the color of the building a little bit.

So how do we improve the overall image without distorting it in such a way?

The Luminence Control

We can do it by only touching the image’s luminence. Open up this image in Photoshop, and on your Layers Palette group, there is one tab called “Channels“. Click on this tab to bring up the Channels Palette.

Now hold down your Ctrl key (Command key for Macs) and click on the thumbnail in the “RGB” channel:

Hold down Ctrl (Command) key and click on this area on the RGB channel

You’ll notice that some part of the image will be selected. Now switch back to the Layers Palette and make a Layer via Copy (keyboard junkies can just press Ctrl/Command+J):

Select this new layer (just click on it), and then go to Image -> Adjustments -> Curves, and do a “U-Curve“, something like this:

Adjust the Curves until the sky appears as how you want it to be

Our image will be like this:

Finally, turn the layer into a clipping mask:

The Final Step

Finally, switch the layer’s blending mode to “Overlay” and adjust the Opacity of the Layer to reduce the effect to a point where it is reasonably good:

I find 70% opacity is good for this example. Here’s the final image, along with the original image compared side by side:

Hope this helps in improving your landscape images!

Later on, I did manage figure it out. What they mean was this:

Top: Before. Bottom: After

It’s subtle, but it gives more dramatic effect on the image. The best part? It’s only a few steps process. Let’s use the same image above for this guide.

First off, open the image in Photoshop (Note: I’m using CS3. However this should work in any version of Photoshop – in fact, most other photo editing applications as well).

Bring up the “Curves” adjustment tool. You can do this by clicking Image – Adjustments – Curves (for keyboard junkies, the shortcut key for this is Control-M, or Command-M for Macs):

Click on the image above to view full size

You will then be presented with the dialog box similar to the following:

The “Curves” dialog box

What we’re gonna do is a trick commonly known as a “S-Curve“. If you noticed, there is one diagonal line in the graph shown in the Curves dialog box. Click and drag it so it’s something like the following (you can adjust is until the image looks about right):

Adjust the Curves output

Press “OK” when you’re satisfied with the end result.

There you have it!

Here’s a few more samples of “before and after” with the S-Curve:

Each photo will need different levels of adjustments. Play around with the tool to see what values are suitable for your photos. Most important of all, do have fun!

I don’t know about others, but I’m for one, is not a big fan of GiMP. At least not on Windows platform. Let me introduce you to a small, viable, free and powerful image editing application, called *cough* Paint.NET

Compare this:

To This:

Paint.NET is comes with impressive amount of features, given it’s small 1.6MB download footprint. This is a must for those who don’t want to bother paying huge money for popular applications (Adobe Photoshop, Corel, etc) and only use the basic features.

Some of the handy features includes – Noise Reduction, handful of Filters for you to mess around with. Layer support, not to mention pretty GUI too!

Give it a shot – Paint.NET!

Please do report any bugs/rendering errors yeah!

Imagine typing on a completely flat keyboard that doesn’t press in or give that clicking sound. You would feel kind of weird. You don’t? Oh my.

Let’s get busy with our coding now, shall we?

To make this strictly a HTML-CSS medium, I would not touch Javascript-based rollover. If you don’t know what is a Javascript-based rollover, never mind. Let’s proceed.

Before we begin, let’s take a quick look at the basic idea: To achieve the effect, we would need two images, one for the state when the image is idle, and the other is when the mouse is over the image. For this guide, I have prepared the following images:

They are two separate images, named “home-0.png” (for the idle state) and “home-1.png” (for the hover state).

In CSS, you can apply rollover to almost any element of your web page. However, we will focus on the single element that is very common – navigation links (thus the “home” button). The codes would look like this:

1

<a id="homelink" href="http://www.firdouss.com/">Home</a>

a#homelink {
	display: block;
	height: 50px;
	width: 175px;
	text-indent: -1000%;
	background: #FFFFFF url('home-0.png') no-repeat;
}
 
a#homelink:hover {
	background: #FFFFFF url('home-1.png') no-repeat;
}

Check out the preview.

Brief info:
Basically what the CSS does is to change the way the browser displays the <a> tag. You will need separate IDs for each of the links, since they will be using different images. Note that in the HTML side of the code, it only defines the <a> tag, with a text as the link (in this case, it’s “Home“). But where is the text? The secret here is the “text-indent: -1000%” line in the CSS. In case the web browser that does not support CSS is being used to view the site, the visitor can still click on the links – as they would appear as a normal text link instead.

Uhm.. The rollover image takes a while to load. This will give a not-so-nice browsing experience to my visitors!

Yep. Because every first time the visitor hovers over the links, the browser would have to fetch the image for the rollover. While doing so, the link would appear blank – which is very very bad!

So how do we solve this problem?

It is actually pretty simple – we force the browser to fetch the other image as well! To do this, we need to modify our image a little bit. Now instead of 2 separate images, let’s glue them together to become as such:

Then we change our CSS a little bit (the HTML stays the same):

a#homelink {
	display: block;
	height: 50px;
	width: 175px;
	text-indent: -1000%;
	background: #FFFFFF url('home.png') no-repeat;
	background-position: 0px 0px;
}
 
a#homelink:hover {
	background-position: -175px 0px;
}

See the updated preview.

Note the changes: The background image is only defined on the initial occurrence of the ID #homelink, and then on the hover section, the position of the background is altered. Yes! Take a look at the diagram below:

The trick here is to have a background that contains both of the images in one image. Then, shift the position of this background image for the hover state. If you have noticed, the rollover effect now does not have any delay at all!

You can download the sample files too, if you wish :)