Put your dull, colorless photos into Photoshop and turn them into something that will make your friends ask, “Hey, when did you get a DSLR?”

I took this photo (below) of Cafe Cafe in Sibu a while back. I thought it lacks vibrancy in its color. For sure, without the comparison, most of us amateur photographer would be satisfied with the first picture. I’ll be showing LAB Color mode technique to add vibrancy to your photo. This technique works great on photos with rich color elements.

Before and After – The power of a little adjustment on the Lab color mode.

This will be the original photo we’ll be working. The photo was taken during our last trip to Bangkok from an overhead bridge over the busy streets of Bangkok.

The photo is perfect for this type of technique as it’s filled with rich color variations in its fruits.

First I’m gonna duplicate the original layer and work on the duplicated layer. It’ll be called “Background copy”.

Go to Image > Mode > Lab Color. It’ll turn the color mode of the duplicated layer to Lab mode. Photoshop will prompt you to Flatten the images.

Choose “Don’t Flatten”. You’ll be needing the original layer so you can blend the editted layer into it.

Next, go to Image > Adjustment > Curves

Channel: Lightness. You can leave this as is, or you can adjust your picture to get better lighting.

Choose a from the Channel drop-down list. Move the top and bottom point of the graph so you get something like above. Note that you’ll need to move the same amount of column for the top and bottom point. If you move 2 columns on the top point, do the same on the bottom point.

Repeat the same step to Channel: b.

Now, right click on the “Background copy” and select Blending Option.

Select “Overlay” as the Blend mode and opacity. You can play around with the opacity to get the result you desired.

Before

After

You’ll end up with a vibrant, colorful photo like this. Now who said the original photo looked okay? Try this today and wow your friends!

Here’s another technique to create a sharp and vivid photo but yet, soft to look at. So I surf around blogs and found this photos which I think suits my intention tonight. With permission, I grabbed the photo of MiriCommunity.net’s Favorite blogger, Miss Goolooloo, and loaded it up in my Photoshop.

This is the original pic. Many would think that the color is good enough already and thus, need no editting. But as always, a little effort can go a long way in making the photo looks more vibrant.

Duplicate the background layer so you get something like this. I renamed it Layer 1 and further work will be done on this layer. Highlight the layer by selecting it.

Go to Filter > Blur > Gaussian Blur, then apply about 20-30 pixels to its radius, make it blur enough so you can’t see the detail of the original photo.

After that, right click on “Layer 1″ in the layer window and select “Blending Option”. You’ll come up with this window where you’ll pick “Overlay” as the Blend mode and set Opacity at around 85%. You can play with the opacity from 0-100% until you get the perfect picture that you desire.

This will be the final picture. Fast and easy way to wow your friends with your photos!

But there’s more, I wanna make the photo look more dreamy. So here goes another round of gaussian blurring.

I duplicated the original photo at the “Background” layer. It’ll be automatically named “Background Copy”. We’ll be working on the duplicated layer.

Repeat the Gaussian blur step with the same value. Then repeat the Blending option step with Overlay as Blend mode and Opacity at around 80% depending on your desired dreaminess.

This is what I get after the blend. Dreamy and lovely!

Hope you guys have enjoyed the tutorial and make use of it in your next blog post! Stay tuned for more! Alright, time to go to bed. Good night bb!

To start off, any beginners who’re seriously interested in CSS should start with CSS lessons at w3Schools. After all, a good foundation will help you go a long way!

After you’ve mastered the basics, you could now start sketching your layout. Decide which type of layout you wanna develop your blog/website into. 2 columns, 3 columns (as 5xmom likes it best), with or without header and footer, fluid or static, etc. Try these repository of ready-made CSS layouts. (codes included!)

- CSS Layouts at Glish
- Bluerobot CSS Layouts
- CSS Pages Layouts at Max Design
- A step-by-step chronology of creating a CSS layout.
- CSS layout creator – It creates layout for you in a few clicks of options.

Reason why I suggest you guys of using these layout resources is that it saves you time and you can start on its content right-away. Unless you’re creating a website that is really out-of-the-ordinary unique, or you’ve some really fresh new layout idea of your own, most of the websites out there today would just stick to the standard 2 or 3 columns layout.

At this point, you could jump straight CSS tricks and magics. Pixel2Life CSS tutorials has tons of tips and tricks on CSS, with easy-to-follow tutorials for you to learn how to create those wonderful CSS-based designs. You could make use of Max Design’s tutorials to make yourself some CSS-based lists, floating images, and selectors.

That should be enough to help you with your CSS adventure.

I’ve also found a couple of nice resources compiled for you guys at websitetips.com and w3.org. They have everything from head to toe of what you need to know about CSS.

If you have Photoshop knowledge, you can make your own icon image. Start with a 64×64 image and after you’ve finished your creation, resize it down to 16×16 and save it as .ico file. If you do not have the icon file format in Photoshop, you can download it here.

Download Photoshop .ico file format. Right-click on the link and and click “Save Link As…” to download. Place it under your Photoshop > Plug-Ins > File Formats folder.

For those who doesn’t play with graphics, or too lazy to make one, you could generate one using any images you like from this service at Chami.com

Or, you could use some of these ready-made Christmas-themed icons I’ve collected from the Internet.

Just right click on any of them and Save Image As “.ico” file.

Upload it to a webserver

Upload your favicon file to your webserver, if you have one. Or, you could place them on image hosting services like ImageShack, or Photobucket. Or, if you’re using Blogger to blog, you can just upload your icon file in their “Create Post” editor.

Execute the Icon from the Code

Put the following code within the <head> and </head> tags zone in your HTML or webpage.

<link rel="Shortcut Icon" href="http://www.alexallied.com/favicon.ico">

Just replace the URL of the icon with your own and you’re done! Enjoy your website/blog with new personalized favicon!

First, drag that icon and drop it onto your “Bookmarks Toolbar”. Of course, you’ll have to enable your bookmarks toolbar in the first place if you haven’t already done that. Just go to “View” > “Toolbars” > Tick on that “Bookmarks Toolbar”.

Step 2. Right click on the new bookmark that you’ve just dropped in and choose “Property”. Empty the “Name” section of the form, then click OK. You’re done!

*For those websites that doesn’t come with an icon (a paper document icon will show up instead), you’ll need to leave a short name so you could recognize them.

Below are the two parts of CSS needed. The first one sets the shadow image as the background, the second one will render a border around an image. Explanation of each CSS syntax are provided to give you a better understanding of how the code works.

.img-shadow {
float:right;
background: url(trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}


.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

Save the CSS, and call it in your webpage file through the following HTML codes.

<span class="img-shadow"><img src="tutorial-kinoshita.jpg"/></span>

As I’ve explained above in the CSS code, the PNG transparent image has compatibility issues with Internet Explorer. Let’s put the codes to test with a cyan background in two of the most popular web-browsers on the Internet, Firefox and Internet Explorer. The results below, explains it all.

It is believed that Internet Explorer will be able to support that format in their “Longhorn” version which will be released soon. So as for now, IE-oriented designers should use a white background for their image, instead.

The only tools you’ll need is Photoshop and some CSS knowledge. Let me show you how it’s done, it’s easy and everyone can do it.

In Photoshop, open a new document and name is “Stamp”, make its width and height both 300 pixels, follow the parameters as follow.

I’m gonna make the stamp white. So, select White as the foreground color.

Next, select the Custom Shape Tool.

Choose the spiky edged circle in the list of custom shapes.

After that, create the shape by holding down the “Shift” key and drag the mouse along the workspace. Don’t make it too big cause we’ll need some space to put some other things in later…

In the Layers window, right click on the shape layer and click “Rasterize Vector Mask”

Next, create a new layer beneath the Shape layer.

Flood the layer with whatever dark color that you may like as this is to make the white colored shape standout and easier to work with. I flooded it with #FF9B00.

It’s time to play around with the Stamp. Right click on the “Shape 1″ layer and click on Blending Options.

I’ve set the Drop Shadow’s parameters as shown in the image above.

I need some 3Dism look to the stamp, so I checked Bevel and Emboss and set the parameters as shown above.

Remember to change the Gloss Contour as well (pick the contour as shown above).

You should have something like this after the blends.

Next off, I created another layer in the middle of the 2 layers.

It’ll be a type layer. I chose Arial as the font face with 400pt. What I need to make is a white strap to be place behind the stamp. Type in 2-3 underlines ( ___ ), and that should be able to do the job.

Then, rasterize the type layer that you’ve just made.

Make sure that the white strap is behind the stamp. Also, centralize all the layers in an order manner.

Now that you’ve created the base of the stamp, you can start putting your name, your logo, photos, just about anything you want onto the stamp. This is what I did.

Create a new layer above all layers.

Set the type parameters as these.

I’ll just use “Award” as this will be a stamp for all Awards. Up to this point, the image is ready to be used. But as for my case, I’m trying to put it on my blog, so I needed more modifications.

I’m gonna put the stamp on the left hand corner of my website, so I need to tilt it a bit to make it look like those classic tilted stamps.

Click on Image > Rotate Canvas > Arbitrary.

I’ll tilted it 40 degrees counter-clockwise as I need to put it on the upper left hand corner. If you chose to put it on the upper right hand corner instead, rotate it 40 degree clockwise.

Select the area and make sure that the white strap is perfect and not cut-off. Then, crop the selection. Select Image > Crop.

The outcome would look like this.

If you need a transparent background, like I do, just delete the orange background in Layer 1 and save it as .GIF with transparency.

Now, the image is done. It’s time to move on to the programming part.

Copy and paste this line into your CSS file.

img.logo {
position:absolute; top: 0px; left: 0px;
}

And insert this line in the BODY part of the page where you want the stamp to appear.

<a href="http://www.xyz.com"><img src="http://www.xyz.com/where/yourimageis/stamp.gif" class="logo" /></a>

Hola! It’s done. And you should see something like this (I created a different stamp for my own blog). I do hope that you’ve enjoyed trying this tutorial.

Worry not, let me show you a way to transform the way you navigate, even with your desktop busy with windows.

First, create a new folder on your desktop. Put all the relevant shortcuts into separate folders. You’ll need to categorize/sort your shortcuts to make them organized. As shown in the image below, I’ve put all the Microsoft Office shortcuts into a folder called “Microsoft Office”. Now, if you like it to be fancy, you can change its icon as well.

Next, right click and drag the folder with the shortcuts into your Quick Launch toolbar.

Please make sure that your folder is in the scroll list where you’ll need to click that arrow button to show rest of the shortcuts/folder so that it can perform like the Start Navigation does.

Finally, you have your own mini Start Navigation system!