1. Start a new image 200×200. Creat a new layer
[ layer/new/layer ] and name it ‘fire’. Let’s fill it with white color [ ctrl+backspace ] and then, render it with difference clouds [ filter/render/difference clouds ]. Repeat the filter 1 or 2 times more. You should come up with the same result as previewed on the left.

2. Now, Render it with lighting effects[filter/render/lighting effects]. Use the following paramaters:

3. Last step is quite magic. Simply use the filter accented edges[filter/brush strokes/accented edges] and again, follow the parameters below:

Final. Use the layer and set it ’soft light’ or other modes on your own work[layers] as to use effectively the fire you just created. Note that the fire can very much vary depending on the resolution and parameters you started from, but fortunately, the effect will always be the same. So go on, don’t fear to try!

NOTE: The final result haven’t been done only using ths tutorial. It is strictly a sample.

Dimension of the Facebook profile picture is 200×300. Add cool effects to your photos!

Didn’t have the chance to show the very end result, but here it is:

All the stocks are on my Shadowness.com profile. Download here

1. Let’s start by creating the background interface where the Widgets appear. (Colours are optional, you can leave it white). Since shortcut keys are different on Mac and PC, I won’t be making references to them. Instead I will be referring to Photoshop’s top menu and submenus, but I do highly recommend learning the keys once you become comfortable.
   • Start a new document (File/New) of 500×120 pixels.
   • Create a new layer (Layer/New/Layer), call it “Interface”.
   • In your Layers window, select it and do a Fill (Edit/Fill) — Use: color: #a3acb7.
   • Double click on your “Interface” layer, you will get to the “Layer Style”.
   • Check “Inner Shadow”, set Opacity: 50%, Angle: 90, Size: 7.
   • Create a new layer, call it “Tile”.
   • Select “Elliptical Marquee”, hold Shift, create a 3×3 pixels circle, and do a Fill — User color: #000000.
   • Go to the “Layer Style” of “Tile”, check “Drop Shadow”:
     
   • Now, select that circle you just’ve drawn, do a duplicate and move it 5 pixels to the right, and 5 pixels to the bottom. (Hold Alt + Ctrl and use your arrows)
   • Select an area of 10×10 pixels from where it starts and Define Pattern (Edit/Define Pattern). Name it “Tile”.
     
   • Now that you got your pattern, delete the “Tile” layer and select the “Interface” layer. We’ll try to apply that pattern all over the background space.
   • Do a Select/All, move down 10 pixels, then Edit/Fill — Use: Pattern, Custom Pattern: “Tile”.
     
   • Voila, your background is done!

   Here’s a preview of what you should have by now:
   

   Here’s what you should have in your Layers window:
   

2. Now, the Widget part.
   • Create a new layer: “Widget BG”.
   • Do “Rounded Rectangular Tool” (U), create a 70×70 pixel selection and right-click/Fill Path — Use color: #BF0000.
   • Do Layer style on “Widget BG”:
     
   • Here’s the where the fun begins. You can drag in your own logo and/or add text. For now, we’ll create a Tutorials 2.0 widget.
   • Select “Horizontal Type Tool”, type in “Tutorials” and use these settings:
     
   • Again, Select “Horizontal Type Tool”, type in “2.0″ and use these settings:
     
   • Place the fonts well so it should look like this:
     
   • Ok, we’ll work on getting that glossy Apple-like look.
   • Select your “Widget BG” layer and do Select/Load Select, press OK.
   • Once you got the selection, do Select/Modify/Contract — By 3px.
   • Create a new layer called “Glossy”.
   • Now, go to “Gradient Tool” (G), customize your gradient by clicking on the gradient bar on the top left.
     
   • On your gradient, you will find 4 settings, set Top left: 50% opacity, Top right: 0% opacity, Bottom left: #FFFFFF, Bottom right: #FFFFFF.
     
   • With your gradient tool, click and hold from the top of the selection to the bottom and release.
     
   • Deselect, use Elliptical Marquee and do a circle so it looks like this:
     
   • Right-click/Select Inverse and hit your keyboard button “Delete”. Your Widget should finally look like this:
     
     And your layers should look like this:
     
   • Instead of having flat colour on the text, as an extra step let’s add shadows the “2.0″ text and make the “Widget BG” as a gradient from #BF0000 to #FF0000:
     
3. You’re done! You can repeat Step 2 with different colors and with your own widget designs. Should Apple ask you to create your own iPhone widgets 6 months from now, you’ll be ready for it.

I know I’ve been ranting forever about our traffic, but I can’t help but be amazed each time by our numbers. I feared that we would average low and would have to constantly work hard for bursts of traffic, but boy I’m glad I was wrong. We’re now averaging 6,500 uniques a day; that’s about 14,000 page views, not counting the RSS reads and social sites where people read our tutorials. The “Jelly Remake” tutorial alone attracted 45,000 hits in 5 days .

On a fun note, here’s a screenshot of my workspace. Yeah, I’m very fond of Apple. Having worked on a PC for 12 years, switching to the Mac desktop has been full of good surprises. I have never felt so much at home, it’s truly an inspiring workstation for designers and developers.

By the way, don’t hesitate to comment. I’d really like to hear what people think or would like to see on this site.

-Meng

Oh, allow me to introduce myself: I’m Meng To, I’ve been establishing and maintaining various communities since 2000. Here’s a little bit of history on the things I’ve done:

My passion for Art led me to create one called Shadowness, that’s where I was able to get in touch with a handful of amazing artists who’s just as keen as me to share their knowledge of Art. While starting off my career as a Web Designer, I founded a few other communities/sites before starting my own company.

I’ve helped launch CampusNetwork, a social-network for students founded by Adam Goldberg originally made to compete with Facebook at the time. We later abandoned the project then Adam joined Facebook as he and is founder, Mark, were good friends. As I mentioned on my previous blog entry, Adam now works for Google.

As for myself, here in Montreal, lot of things happened and I worked my way up until I had the opportunity to personally manage an ambitious project named Pixilis, a photos/videos sharing service. Unfortunately, due to conflicts of interest within the production team and the investors I later decided to leave the project after its release.

These days I just want to continue contributing to the Web with projects like Tutorials 2.0. It’s pretty exciting to be able to write a few tutorials/blogs about my ideas on graphics, design, CSS, AJAX, PHP, Hosting and even marketing. You can learn a little more from me by hitting the URL www.mengto.com.

I’m also extremely pleased with the idea of bringing together incredible artists who I got to know through other projects and who will help contribute fantastic new tutorials every day.
Recently I’ve joined the MyBlogLog community to keep track of blogging and social communities. It’s pretty cool so far where it gets us in touch with other places of similar interests. Take part in it and help us promote the goods, what could be helpful to you could be helpful to everyone!

Cheers,
Meng

I spent the morning with a friend (Adam from Google) optimizing the Tutorials 2.0 site as we faced tremendous traffic, having made it to the top 10 stories on digg.com. We’ve had more traffic this morning than in the past week, that alone says a lot. Thanks to him, we got the site functioning like it should, again.

(On the side we were also watching Steve Jobs run his show about the new Apple iPhone .)

It’s been an unbelievable day so far, I’d also like to say thanks to Jason from empiredezign.com who’s been an incredible author for Tutorials 2.0. We’ll soon be having more fresh tutorials coming, great artists who’ll be contributing to the content of this site. Join in, you could be one of them. This is just the beginning.

But for now, cheers and thanks for the support!

UPDATE: It was short and sweet, but we’ve been on http://del.icio.us front page too!

Meng

# of visitors the first day: 194
# of visitors yesterday: 3,669

# of registered authors: 15
# of active authors: 4 (tell the rest to get more active!)

# of tutorials posted on the 27th December(pre-launch): 1 blog
# of tutorials posted on the 28th December(pre-launch): 6
# of tutorials posted on the 29th December: 5
# of tutorials posted on the 30th December: 5
# of tutorials posted on the 31th December: 3
# of tutorials posted on the 1st January (was drunk): 2
# of tutorials posted on the 2nd January: 4
# of tutorials posted on the 3rd January: 3
# of tutorials posted on the 4th January: 4

Analytics Graph:


Category views

14355 Graphics
6460 3D
5019 Motion
4177 Blog
4139 Coding
3690 Misc
1559 Design (??)

All these numbers can only mean two things:

1) We’re growing!
2) You’d better come back every day or you’ll miss some AMAZING tutorials! (Just kidding, you can always browse back through tags and categories)

I’d personally like to thank you for using this site and also to the blogging & social communities for letting us share our knowledge through these tutorials. Last but not least, props to the authors for their hard work in teaching us something new every day.

Cheers,
Meng

First of all, you need to find a picture (you may also take a scanned photo). In this example, we used a 300×240. If your image is not big enough, you can zoom in for easier manipulation.

The image is initially locked when you open it. Double-clicking on its layer allows you to rename and unlock it, let’s call it “Original”. Duplicate the layer and name it “Blur” (right-click on layer > Duplicate Layer…), and click the eye icon beside the layer Original to hide it.

If you don’t have a good quality image to work with, you should use the Blur tool (R), Brush tool (B), Dodge tool or Burn tool to make it look better. For the image we’ll use, select the Blur tool (R) with a 30% Strength and apply slightly over the pixels that affect the picture’s quality, then select the Brush tool (B) and apply it over the mouth, eyes, eyebrows, or any other area that you want to have more contrast.
Duplicate the working layer and call it “Image01″ (this is to prevent from accidentally saving the image). Since this is a black-and-white picture, use Dodge tool (O) make the tint of some areas around the image brighter.

Hide all layers except the one you’re working on, then use the Lasso tool (L) to cut the unused part of the picture. See this Image to compare the result until now. Create a new layer under the layer Image01, name it Back and fill it with a color of your choice, and in the Layers Tab, drag the layer Back downward to put it under the layer Image01 (the layers’ order in the image corresponds to that in the Layer Tab).

Zoom in the image to 200% to make the task easier.
Select the Brush tool, set the brush size to 1px-3px, put the mode to Normal or Screen if you want to have a little glow only, and chose a foreground color. This setting is for the glow of your contour line. In this example, I choose a brush size 3 and the color white.

Duplicate this layer and name it Outline. Select the Pen tool or Free Form Pen tool and start to create paths for the outline. Switch to Delete Anchor Point tool to delete a point or Add Anchor Point tool to add a path,

- Delete Anchor Point tool to delete a point,
- Add Anchor Point tool to add a new path,
- Convert Point tool to change the path’s form, and/or
- Right-click > Free Transform Points to move the points within the path.
Once the path’s editing is finished, right-click > Stroke Path > Brush (it will automatically chose the brush that you set earlier) to make it glow. Note that every time you want to create a new path, you have to hide (Ctrl+h) or delete (right-click > Delete Path) the old path. Now let’s draw the contours for the mouth, eyes, etc. See this image to make sure that you are on the right track.

Once you’ve finished creating all the contours, duplicate the layer “Outline” and name it “Outline Glow”, and in the Layers Tab, set the Fill field to 35%. Then, select the Move tool (V) and move the new layer 1px or 2px to the right using the arrow keys.

Duplicate the layer Image01, name it Image Gray, and hide all other layers (by clicking on the Eye icon). Go to Image > Adjustments > Hue > Saturation or Ctrl+u, and set Saturation to -100.
Edit the image using the tools mentioned in step 3. Note that there are 3 ranges in the Dodge and Burn tools, those are: Shadows, Midtones, and Highlights. You are strongly suggested to try those ranges one by one, they are very useful in working on future designs or drawings.

Create a new layer and name it Texture. Draw creative lines using the Pen tool and make them glow (follow the steps above). You may create textures like the picture below or on your own. Show all layers (Eye icon) to see you final product.

Enjoy your new experiment!

http://www.downloadsquad.com/2006/12/29/script-aculo-us-how-to-easily-ajax-your-site/

http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm