Jan 5, 2010
Admin

The FS Log-in Gfx Effect – Tutorial

Good day guys! Now, let me share to you this another cool technique/effect for your gfx concerns. The new friendster log-in page design inspired this post :D

photoshop

Now follow the steps and let’s start alexifying. :D Remember, you can click on the images to see it bigger :D


1. Open Adobe Photoshop, create a new canvass (size? depends on the design you’ll make), and choose the background you’d want to use. Mine is set to a dark bg (i just want it to be dark :D Hehe). After these, use the Rounded Rectangle Tool which is shown in the image below.

photoshop

Drag the mouse into the canvas in such a way that you feel comfortable with the size of the shape we’ve created using the Rounded Rectangle Tool (anyways, you can use whatever shape you want). And oh, the radius will define the intensity of the curve in the edges – the higher, the more curvy :)

photoshop

Right-click inside the rounded rectangle, click Make Selection and notice a pop-up window as shown below.

photoshop

photoshop

Leave the Feather Radius as is and click OK.

2. Now, create a new layer or simple press CTRL+J. Notice the new layer created under the Layer’s Tab.

photoshop

After creating a new layer, we’ll be filling the rounded rectangle with a solid color. You can use whatever color you like. :D Just click inside the shape to fill it up with the chosen color.

photoshop

After that, go to Select>Deselect or simply press CTRL+D to disable the moving lines in the shape :D

photoshop

3. Right click on Layer 2 then choose Blending Options and notice a pop-up window as shown on the images below.

photoshop

Select Stroke, you’ll notice it being checked when clicked.

photoshop

Stroke is a blending option wherein the outline of the image/shape/text is coated with rich chocolate filling (Haha! Just kidding), outlined with the chosen color that you’ll use.
Under the Stucture, I’ve set the size to 15 and the Opacity to 20% (you can set it accordingly to your desired output). And under the Fill Type, I’ve chosen White as the color of the Stroke. Look at the image below.

photoshop

After setting the Stroke Option, you should have an image like this.

photoshop

4. Create another Layer or simple press CTRL+J. Drag the Layer3 in between Layers 1 and 2. We’ll be working with this layer in the rest of the steps. :D

photoshop

5. Now here’s the fun part :D In this step always check if you are in Layer3. :D Use your favorite Brush to creatively design the edges of the shape. You can go crazy with the colors or stay simple by using one.

photoshop

This is my sample work :D

photoshop

Enjoy! :D

9 Comments

  • wow ati… i love the work … i’m just lazy but i’ll try that next time hehehe ^^ can i make it in pink ???

  • @N-Gel – Koya! Hehe. Thanks! Yep, definitely any color you want :D

  • wow ang nice naman! pwede nang pamalit sa fs hahaha >.<

  • @Eljon – Haha! Naman! :D

  • 2 thumbs up !!! great work :D

  • @Rares – Thank you! :D

  • wow hanggaling!! karapat-dapat kang i-clap clap. hehehe :)

  • @Mon – Thank you very much po! :D

  • nice… i like it .. vector style :)

Leave a comment

Stop censorship