TheTuts

Tutorial: Cut Out using Pen Tool

2009-06-17T06:16:00.000+08:00

Hi all, actually this is the part of the tutorial how to make this image that i'll post in TheTuts. How to cut a photo using the Pen Tool (sepang, ehem..ehem..).

Final Result

Original Photo - Here (by thivierr)

Step 1
Click Pen Tool on the toolbar, and make sure you click on the Paths,Add to Path Area (+) just like the image.

Then, draw the outline of the image using Pen Tool.

Step 2
Here is result when you're finish drawing the outline of the image.

Right click on the image (still with your Pen Tool), click Make Selection

and here is the result of the action (make selection).

Step 3
Create a new layer of the selection image. Go to Layer > New > Layer via Copy

After put white background behind the layer that we've create and hide the original layer, this is the result.

Yes, it still not perfect right? As you can see, the should of the right ladies still covering by black coat and we'll fix it later.

Step 4
With the same technique, remove the background between the hand and the body.

Yehaa, we're done with the background. Now we will fix the shoulder part.

Step 5
Now we'll using Polygonal Lasso Tool to create a duplicate of the left shoulder. Draw the outline at the shoulder and right click, choose Make Selection and go to Layer > New > Layer via Copy. Rename the layer as 'Right Shoulder'.

Step 6
Then, flip the Right Shoulder layer to horizontal. Edit > Transform Points > Flip Horizontal

After that, place the Right Shoulder layer on the right position. Rotate the Right Shoulder layer a little bit by clicking [CTRL] + [T] (win) or Edit > Free Transform Points.

Erase the unnecessary things on the Right Shoulder layer using the Erase Tool.

Step 7
As you can see, the tone of the hand is still not nice, correct it with Brightness/Contrast tool. [Image > Adjustments > Brightness/Contrast]. Just trying the perfect tone, here is mine (not perfect but still good enough). Brightness (-14), Contrast (0).

Step 8
Using the Pen Tool, draw the outline of the bandage (make sure you are selecting Original layer) and Make Selection of it then create a new layer via copy [Layer > New > Layer via Copy]. Rename the layer as "Bandage", move the layer to the top and place it into the right position.

Step 9
Here is the value for the Bandage layer for it Brightness and Contrast (Image > Adjustments > Brightness/Contrast). Brightness (-13) , Contrast (-15). You can try your own to get the best result!

Step 10
As you can see, the Right Shoulder layer still not very realistic. Touch-up it using Burn Tool

with the setting,

here is the final result

That's all for now and thanks for reading this tutorial! I'll try to complete the tutorial as soon as possible and this is the image that we'll do.

Portable: Photoshop CS4

2009-06-05T17:04:00.004+08:00

Photoshop CS4 and Photoshop CS4 Extended feature a newly refined, tab-based interface in a single, integrated window, with self-adjusting panels arranged in docked groups. Automatically keeping tools well organized and away from your work area means you get greater efficiency, less clutter, and better results, faster than before.

Delivering all the features of Adobe Photoshop CS4 software, including the new Adjustments and Masks panels, Adobe Photoshop CS4 Extended also provides breakthrough 3D editing and compositing power to paint directly on 3D models, create 3D animations, convert 2D images to 3D objects, and more; richer motion graphics editing; and more powerful and flexible image analysis and tracking.

Tips: Bypass Blocked Sites

2009-04-28T01:11:00.005+08:00

As a student, i know it kinda frustrated when we can't visit some website when using internet access at campus cause the website is been blocked. Actually you can use software to bypass the security.

Below are the list of various tool which you can used for bypass the security:

Below are the list of various sites:

Software: TuneUp Utilities 2008 (Portable )

2009-04-21T20:07:00.001+08:00

Improve your system's performance, thoroughly clean up your hard drives, solve your PC problems with a few clicks, and customize windows to your personal requirements. All in one program, simple and intuitive - TuneUp Utilities 2008.

Solve problems
Increase performance
Free up disk space
Customize Windows
The complete Windows optimization package
Professional assistance for your Windows PC

Software: HJ-Split

2009-04-21T03:13:00.009+08:00

Very nice looking freeware file splitter. It splits files of any type and size and also can combined. Does not need to be installed. Just click on hjsplit.exe and the program starts. This program can even handle files which are larger than 10Gb!

Tips: Beware when using CTRL + C for copy

2009-04-19T22:35:00.008+08:00

Actually all pc user know about shortcut key for copy, but user dont know this copied data is stored in clipboard and is accessible from the net by a combination of javascripts and ASP.

Try copy any text using CTRL + C then go to this link. You will see text that you copy using CTRL + C.

So please do not keep your privates data(password, card credit numbers, etc).

But as you know, everything can be fix. This is how you can keep your data save.

In Internet Explorer, go to Tools -> Internet Options -> Security
Click on Custom Level
In the security settings, click to Disable the Allow Paste Operations via Script. That will keep your clipboard contents private.

Software Review: Wakoopa

2009-04-19T06:52:00.005+08:00

Hi all, I want to ask you something

What the popular software in the world?

What the most popular site that people around the world use?

If you have no idea about it, Wakoopa know everything about software!

Wakoopa is an online social network that helps people discover the best software, games and web applications on the market. It's the Yellow Pages of software discovery. Sign-up, install a small tracker on your desktop and automatically create your own online software profile that you can share with friends and the world via widgets – including Facebook. Wakoopa keeps you updated about what your contacts are using, and sends them smart recommendations based upon their own software usage. Games, audio & video players, instant messengers or office tools: Wakoopa helps people discover the best desktop and web applications on the market. Software discovery is social again.

It's also have the level when you're using software, write a review for the software, add some snapshot, and etc.

Newbie

Novice

Enthusiast

Devotee

Expert

Fanatic

Overlord

You just need to download the software (315kb) and it runs silently in the background and every 15 minutes a list of what software you're running is sent to your online profile.

How About My Privacy?

When we store what you do and like in our database this is called "attention". We consider this attention to be nothing short of holy, and have looked at how other influential parties like Google or Plaxo have handled this in a similar way.

Screencast: Drawing Soft and Fluffy Love

2009-04-12T23:42:00.006+08:00

Hi all, how do you think this tutorial? Maybe it's quite messy, and just for all of you, I make a screencast special for all of you! Enjoy!

Tutorial: Soft and Fluffy Love

2009-04-10T22:51:00.011+08:00

Hi all, we meet again in the tutorial part! In this post, we'll learn how to make soft and fluffy love shape using Adobe Photoshop CS4. Click here to see screencast version.

Final Image

Step 1
Create a New Document, select Pen Tool (P) and draw your love shape.

Step 2
Select Brush Tool (B) and go to the Brushes Option, follow the setting below.

Step 3
Set your foreground color to #ff0300 (red). Select Pen Tool (P) back, then right click on your love shape, choose Stroke Path. When the Stroke Path dialog box appear, select Brush.

Step 4
Here is the result of your 'love'. After that, click the Brush Tool (B) back, no need to change the setting, fill your 'love' with the shape.

Step 5
To create a nice lighting for your 'love', create a new layer then change your Brush Tool (B) with these setting, and paint it with a nice curve.

Step 6
Still on the 'lighting' layer, go to Filter > Blur > Gaussian Blur and follow the value below. Try to decrease the opacity 'lighting' layer to get a better result.

Step 7
We'll create a shadow for it. Duplicate the 'love' layer, put the 'love copy' under 'love' layer then go to Edit > Transform > Flip Vertical. After that, go to blending option for 'love copy' layer and set the Color Overlay to Black. Then, follow step 6 and change the value to get a nice shadow.

Step 8
To create a nice color for your 'love', select 'love' layer, then go to blending option and follow these setting. #ea0909 and #770808 for the gradient. Choose Radial for the style and you can move the focus point by dragging the shape while the dialog box still open.

FINAL

Decorate your artwork with placing suitable picture. Here is mine!

Portable: Ubuntu - Run Inside Windows

2009-04-08T05:05:00.007+08:00

Before this, if you want to try Ubuntu - for a beginner, you can run it via live CD but now they create the easy way! You just can run the Ubuntu without restart your pc / laptop but this operating system are develop for Windows User only.

here is some review from Lifehacker.com

Built from the same guts as the andLinux system that lets you seamlessly run Linux apps on your Windows desktop, Portable Ubuntu is a stand-alone package that runs a fairly standard (i.e. orange-colored, GNOME-based) version of the popular Ubuntu Linux distribution. It just doesn't bother creating its own desktop, and puts all its windows inside your Windows, er, windows.

The coolest parts about Portable Ubuntu are:

It actually works (in most cases, on most systems).
It fits on a (larger) thumb drive and can run entirely from it.
It can work on, and save to, your Windows folders and files.
It's persistent, so changes you make and apps you install are carried around with you.
It's easily manageable from Windows, and works great on dual monitors.

It's easy dudes! Feel free to try! Just only 438MB!

[How-to]

1. Open your command prompt as an administrator (hit Windows key, type in cmd, then right-click on the "Command Prompt" option that appears and select "Run as Administrator"); on XP, you'll probably just have to launch a command prompt.

2. Head to the folder where you extracted your Portable Ubuntu, and enter run_portable_ubuntu and hit Enter to launch the .bat script.

Your machine will whir and decompress for a while, and you'll likely get a few prompts to "Unblock" coLinux and a few other apps' abilities on your system. Unblock all of them, and you'll eventually get a small, move-able menu bar on your desktop, as seen in the top screenshot. Drag this wherever it's comfortable to keep it, and you're on your way.

credit to LifeHacker.com

Protable Ubuntu - Download

Software: Internet Download Manager v5.16

2009-04-06T00:58:00.011+08:00

Internet Download Manager v5.16 - The best way to handle your downloads and increase download speeds. Added full support for Windows Vista, WOW! YouTube, Google Video, MySpaceTV, IE7 and Firefox

All popular browsers and applications are supported!
Easy downloading with one click.
YouTube grabber.
Automatic Antivirus checking.
Drag and Drop.
IDM includes web site spider and grabber.
Download Categories.
Download Resume.
Advanced Browser Integration.

What's new in version 5.16 build 3?

(Released: Apr 03, 2009)

We have added these features in response to IDM user requests.

Resolved Firefox integration problems
Fixed bugs related to downloading of text files

SmashingMagazine - Improve Typography

2009-04-04T03:23:00.007+08:00

Hi all, Antonio Carusone just post an article at SmashingMagazine - 8 Simple Way to Improve Typography in Your Design.

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.

These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we’re going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

[Related Link]

Original Post [ here ]

Smashing Magazine [ here ]

Tutorial: Make Fire Text with Photoshop

2009-04-03T01:18:00.001+08:00

Hi all, this tutorial are written by Dss. How to create a simple and easy text with fire effect?

Before we get started, let's take a look at the image we'll be creating.

Step 1

Create a blank image and fill the background with black. Press D to
make photoshop back to default color. Press X on the keyboard (to
flip colors) and then select the Type Tool -- type whatever you want, press OK.

Step 2

Next, right click at the text layer then press Resterize Type.
Rasterizing converts the type layer into a normal layer
and makes its contents uneditable as text.

Step 3

Since there isn't a "top or bottom" option in the wind dialog box, we will
turn the image itself around. Use Image > Rotate Canvas > 90 CCW.

Step 4

Next, use Filter > Stylize > Wind with the settings "Wind" and "from
the left". Press CTRL+F to apply the same filter over again a second
time.

Step 5

The next step is Image > Rotate Canvas > 90 CCW.

Step 6

Now to add some shape to our fire! Using Smudge Tool, smudge your fire up and give it a little squiggle as you go. Do this until you get the proper shape. Also, ensure that the smudge strength is set to 75%. Take your time at this stage and you should eventually end up with
something that resembles my image.

Step 7

Convert the image to Grayscale by using Image > Mode > Grayscale and
then to Image > Mode > Indexed Color. The next step is to give our image
some color, so choose Image > Mode > Color Table. Since we're shooting
for a "fire effect" choose the Black Body table.

Final Step

Make our text a bit more legible. Choose the Text Tool & press D on
your keyboard. Use/type the same words you used earlier (use the same font size
and type) click OK, position the text in the middle and say "Wow!".

Tutorial: Enhance Your Photo with Photoshop

2009-03-23T22:43:00.001+08:00

Hi all, in this post, I would like to teach you how to enhance your picture with Photoshop.

This is the original image that we will use in this tutorial

See the right picture, that is the final image that we will have ;)

Step 1

Open the picture. We will remove the background and the best tool for it is Pen Tool. Select Pen Tool (P), draw the outline of the picture.

Step 2

After you finish draw the shape of the picture, press ctrl (win) click on Vector Mask Thumbnail on "Shape 1" layer. It will select your image. Click once at the background layer, then go to Layer > New > Layer via Copy. It will cut out your selected image. Name it as "New".
Step 3

Move your "New" layer to the top, then create a new layer above background image and color it with white (#FFFFFF) to cover the background image.
Step 4

Go to Image > Adjustments > Level or press CTRL + L. Insert the value in the box (43),(1.06) and (236) or try to make the photo become more realistic.
Step 5

Go to Image > Adjustments > Brightness/Contrast, set the brightness to 9 and contrast to 62.
Step 6

Next, go to Image > Adjustments > Vibrance, and set the vibrance to -49 and Saturation to +43.
Step 7

As you can see, the eye kind a little darker. To make the shining eye, select Pen Tool (P) and draw the eye shape.

Step 8

Set the layer to Overlay and decrease the Opacity to 70%. As you can see, the eyes just shining but we're not done yet. You can see the eyes is perfectly shining but not quite good , using Eraser Tool (E), erase a little bit to make the shine become more real.

Tadaa, you're done! Here the final image with some text ;) Enjoy!

News: CSS3 by CSS-Tricks

2009-03-23T05:11:00.001+08:00

Hi all, for all those who are new with CSS, the new technology just arrived!

CSS3! Just view the demo from Chris Coyier from CSS-Tricks. I really adore his artwork! Very clean, nice tutorial, so details!

Demo: here (make sure you open it with Safari 4, and if you're Mozilla Firefox user, you still can view just a few effect of it).

[Related Link]
CSS-Tricks [http://css-tricks.com/]
CSS3 [http://www.css3.info/]
Webkit [http://webkit.org/]

Tutorial: Customize Embedded Video with Photoshop/CSS

2009-03-15T23:40:00.002+08:00

Hello there, for the first tutorial, I would like to teach you "How to customize your embedded Youtube video in your blog".

When you put the embedded video such as Youtube video, the player just like this:

How to change the player to become this:

Step 1: Identify

Here is the code that you can copy on the right panel from Youtube.

The main part of the modification is the size of player.

width: 480px
height: 295px

Step 2: Photoshop part

Step 2.1
Create a New Document with width 530px and for the height is 345px to make the layout for our new player layout (increase the size to 50px or higher for the shadow).

Step 2.2
Create the dummy player for Youtube Player with the original size. Click on "Rectangle Tool (U)" and set the fixed size with the original player size (width= 480px, height = 295px). Choose "Grey" color for the foreground and click anywhere in your document. Place the "dummy player" at the center of the document.

Rename the rectangle to "dummy player" to make your work become more easier.

Step 2.3
To make our own player, click "Rounded Rectangle Tool (U)", set the radius to 10px and choose "black" for the foreground. Click anywhere in your document and place it behind the "dummy player". Name it as "custom player".

Step 2.4
Right click "custom player" in the Layers Panel, select "Blending Options" and choose "Drop Shadow". Just follow this setting.

Step 2.5
Here come the tricky part. "Invisible" the "dummy player" layer and the background layer, then, take a "Slice Tool (C)" and cut to 3 slices (top, center and bottom).

Step 2.6
When you're done with your slicing, go to "File > Save for Web and Devices". Press "Shift" and click "top, center and bottom" slice. Save it with "PNG-24"

Okay, we're done with photoshop.

Step 3: CSS

Step 3.1:
Html

Explaination

v = the div for the player
vtop = load the top image
vbg = load for the center image and it repeating the horizontal
vbottom = load the bottom image

Step 3.2: CSS

Explaination

.v = we set the width for the player is 540px, and 372px for the height. Margin, Padding = Auto.
.vtop = load the top image called "top.png" and set the height for it or the image can't see.
.vbg = load "center.png" and keep it repeat-y (no need to set the height).
.vbottom = load "bottom.png", and set the height to the image size.

and here is your final result.

download the image here.
p/s: try our player with cross-browser, to avoid some 'craps' annoying the our visitor (I'm not a css expert, I still on learning process).

Contact Us

2009-03-02T02:12:00.002+08:00

We're not fresh graphic designer nor professional, we're in the middle one. "Street Learner" - that is the skills that we got. Learn without official education, no teacher, no classroom for graphic lesson. We do lots of exercise by our own self so maybe we make a bit of mistake with it.

If you think the tutorial is not good or quite fuzzy, please drop some comment and we will try to improve our skills.

Thank You

About

2009-03-02T02:11:00.002+08:00

The tutorial are written by myfr3ak and Dss, graphic lovers from Malaysia. We learn the application by ourself, keep googling, finding the resource that useful for all of you.

myfr3ak - Business Administration student, playing with Adobe Photoshop, SwishMax for 4-5 years, still learning to increase the skill of Photoshop and still new with CSS/XHtml.

Dss - Computer Networking student, fast learner and can handle Adobe Photoshop, Adobe Illustrator, SwishMax and etc.

p/s: Sorry if our English is bad because Bahasa Melayu is our primary language. So, maybe some grammar error in the tutorial.