Mix&Mash

Points to watch out for TV application design

noreply@blogger.com (Gd.Bargain) — Sun, 15 May 2011 16:45:00 +0000

Internet TV is the craze now and the demand for TV application developer is high, mainly due to the lack of efficient TV app developer. I had been working on a TV project for the past months and had been mentally taking notes of the potential pitfalls in transiting from developing for the web to developing for the tube.

1. A clean minimalistic web design does not work on TV.
The tv have a huge screen space that will become significally awkward with your minimalistic design. Having nice large graphics or videos is a 'easy' method for filling up the awkwardness.

2.Elastic fantastic!
TV application design really focuses a lot on the elasticity of your image, header, sidebar .... etc. Do not assume all TV are widescreen.

3. Plenty of testing... on a REAL TV!
No. A 21inch LCD monitor will not give you as relevant feedback as testing your app on a TV. Other than screen resolution problem, you have to watch out for colors too.

4. Use CSS3 to replace javascript animation as much as possible
Using the hardware-accelerated css3 transition will give you a much better performance on a large screen. From my observation, Firefox (4.0) seems to be the most affected browser when the screen size is enlarged. The browser that performed the best is google chrome. Performance in this case refers to the smoothness of the animation.

Creating the new "Office for Mac 2011" icon

noreply@blogger.com (Gd.Bargain) — Fri, 05 Nov 2010 05:47:00 +0000

The new “Office for Mac 2011” icons are stunning and sophisticated.Microsoft has engaged the help of company called Frog Design to help them create a new line of icons for their 2011 version of the Office for Mac.With the help of grids and pen tool, it is really not that hard to come up with a similar design. This tutorial will capture the essence of the icons.

PSD Available
(5% will be donated to charity):

Download entire tutorial
(5% will be donated to charity):

Grids and Circles

Step 1: Create a 100px X 100px circle. I drew the circle with the help of grid-lines. Set vertical grid lines at 150px and 250px and horizontal grid lines at 150px and 250px. Name the layer “Circle”. Give it the layer properties as shown below

Step 2: Set another vertical grid line at 300px and 350px. Duplicate the ‘Circle’ layer and move the circle until it’s center is at the 300px gridline. Do this for the rest of the circles in the illustration below. Use gridline to help u achieve accuracy.

Step 3: Group all the layers together and call it ‘Blueprint’ or whatever name you can concoct.

Pen Tool

Step 4: Use Pen tool and start plotting the points according to illustration below. Name the layer ‘P-bright’.

Creating the rounded corners

Step 5: A very easy technique that i always use to create a rounded corner are as follow:

Add anchor point.
Use ‘Direct Selection Tool’ to drag the point to create some curvature.
Use ‘Convert Point Tool’ on the two handle bar to increase the curvature until it forms a nice rounded corner.

Another example:

Step 6: Apply this technique to all the corners that need rounding except on the exterior side of the “P”. For that side, you will need to delete the existing anchor point there first before applying the above technique to round it.

This is what you will get after rounding the corners. The basic shape of the icon is done. What we will need to do now is to give it some depth.

Giving Depth

Step 7: Duplicate the ‘P-bright’ layer and rename it ‘P-dark’ layer. Make sure it is on top of the ‘P-bright’ layer.

Step 8:Delete the anchor points that are shown below and adjust the handles to get the desired shapes

Step 9:Add another anchor point and delete the other anchor point as shown in the diagram. Adjust the handlebars again to get desired shape

Step 10: Select the anchor points that made up the tail of ‘P’ and shift them to the right.Add another anchor point before deleting the bottom anchor points to get the shape shown in the illustration below

Color

Step 11:Fill up ‘P-bright’ layer and ‘P-dark’ layer with respective colors.

Step 12: Adjust the layer properties of ‘P-bright’ layer.

Step 13:Adjust the layer properties of ‘P-dark’ layer

This is what you will get so far. Pretty sweet eh.

Step 14: Duplicate the ‘P-bright’ layer and rename it ‘P-back’. Move it below ’P-bright’ layer.Fill up the layer with the color stated in the picture.

Step 15:Nudge the ‘P-back’ layer to the left by pressing the left key twice.

Your ‘P’ icon is done!

Now that you have learned the techniques in achieving the look and feel. Try to attempt other letters and post it in the comments!

jQuery: Shuffling Photo Gallery Tutorial

noreply@blogger.com (Gd.Bargain) — Mon, 23 Nov 2009 03:39:00 +0000

Creating a Shuffling Photo Gallery in jQuery is actually very simple. It's just a matter of calling timers("setIntervals()") and tweaking opacity.

Let's get started.

HTML

<div id="slideshow">
    <img src="images/demo.png"/ class="active">
    <img src="images/digg.png"/>
    <img src="images/reddit.png"/>
    <img src="images/twitter.png"/>
 </div>

These are the images that you want to be shuffling.

CSS

<style type="text/css">
#slideshow{
text-align:center;
postion:relative;
}

#slideshow img{
 position:absolute;
 z-index:8;
 top:0;
 left:50%;
}

#slideshow img.active{
 z-index:10;
}

</style>

We are gonna declare "position:absolute" for the images to stack up together.Z-index ensures that the "active" image will be on top of the rest.

Javacript

<script type="text/javascript">

 $(document).ready(function(){
  $('#slideshow img').animate({opacity:0.0},1);
  $('#slideshow img.active').animate({opacity:1.0},1);
 });
 
 function slideSwitch(){
  var $active = $('#slideshow IMG.active');
  var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');
  $active.animate({left:'40%'},1000).animate({left:'50%'},1000).animate({opacity:0.0},500);
  $next.addClass('active');
  $next.animate({opacity:1.0},1000);
  $active.removeClass('active');
 }
 
 $(function(){
 setInterval("slideSwitch()",3000);
 });
</script>

First, we hide all images except the active image.

$(document).ready(function(){
  $('#slideshow img').animate({opacity:0.0},1);
  $('#slideshow img.active').animate({opacity:1.0},1);
 });

Next, our timer will call the function slideSwitch() every 3000 millisecond.

$(function(){
 setInterval("slideSwitch()",3000);
 });

In our slideSwitch function, we hook the active image into variable $active and the next awaiting image into $next.

var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');

I found an excellent explanation from net-Tuts regarding the "?" above:

Think of everything before the question mark as being a question, if the answer to that question is true then execute the code to the left of the colon, but after the question mark. If the answer is false then execute the code after the colon.

The rest are just simple animation to mimic the shuffling action and also to reattach the active class to the images.

Jquery: Show and hide a partially-extended list

noreply@blogger.com (Gd.Bargain) — Thu, 19 Nov 2009 11:14:00 +0000

Demo
"Show and Hide" effects are the most commonly used effects used in the Javascript library. They are easy to learn and implement but yet visually impressive enough to catch some attention.

To show or hide contents completely is easy. But what about showing a partially-extended list?

I found a excellent tutorial from Chris Pollack which details how to do it: Sliding content from a partial height with jQuery.

So what i'm gonna do today is to simplify his code and to explain in details how it work.

Let's create a simple list. Preferably make the list long so that you can see the sliding effect better.

HTML

<div id="slide">
<ul>
    <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
       <li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
</ul>
</div>

This should be what you will get:

CSS

<style type="text/css">
 #slide{
overflow:hidden;
width:300px;
margin:0 auto;
text-align:center;
}

#slide ul{
 list-style:none;
 border:3px #444 solid;
 border-bottom:none;
 margin:0px;
 padding:0px;
}

#slide ul li a {
 color:#3274d0;
 display:block;
 border-bottom:2px #444 solid;
 text-decoration:none;
}

#slide ul li a:hover{
 color:#fff;
 background:#3274d0;
}

.bottom{
width:300px;
margin:0 auto;
border-top:3px #444 solid;
text-align:center;
}

.tabs {
 width:100px;
 margin:0 auto;
}

.tabs a{
background:#3274d0;
color:#fff;
padding:3px;
text-decoration:none;
border:3px #444 solid;
border-top:none;
display:block;
}
</style>

You will get this:

Honestly 99% of my CSS is just to beautify the list.

The most important line in the style-sheet would be the "overflow" property. "hidden" would allow it the list to be cut to it's required length.

Ok! enough with mundane stuff. Let's get sliding!

Javascript

<script type="text/javascript">

var sliderHeight = "100px";
var cHeight;

$(document).ready(function(){
cHeight = $('#slide').height();
$("#slide").css("height",sliderHeight);
$(".tabs").html('<a href="#">Pull</a>');
 $('.tabs a').click(function(){
  openSlider()
  })
  });<!-- end document ready -->
 
function openSlider(){
$('#slide').animate({height:cHeight+"px"},"slow");
 $(".tabs").html('<a href="#">Up we go!</a>');
 $('.tabs a').click(function(){
  closeSlider()
  })
}<!-- end open slider -->

function closeSlider(){
$('#slide').animate({height:sliderHeight},"slow");
 $(".tabs").html('<a href="#">Pull!</a>');
 $('.tabs a').click(function(){
  openSlider();
  });
}<!-- end closeSlider -->
</script>

Javascript explained - Variable sliderHeight is to state your list's height when it is partially hidden. cHeight is to record the list's true height.

Basically, JS will record your list height first.

var sliderHeight = "100px";
var cHeight;

Then when "a" inside of class ".tabs" is been clicked, function openSlider() will be called.

$('.tabs a').click(function(){
  openSlider()
  })

Inside openSlider() function, animation method is used to reveal the true height,cHeight.
$('#slide').animate({height:cHeight+"px"},"slow")

If ".tabs a" is been clicked again, closeSlider() function will be called instead. The list will then slide back to it's hidden height.

$('.tabs a').click(function(){
  closeSlider()
  })

Watch this space!

noreply@blogger.com (Gd.Bargain) — Fri, 06 Nov 2009 19:27:00 +0000

I'm back... My new template is still not done...Still need to sprinkle some graphics and JS... Change the sidebar content...

Anyway it's 3am.. time to get some rest...yawnzz

Lioness And Car

noreply@blogger.com (Gd.Bargain) — Thu, 04 Dec 2008 12:11:00 +0000

Ok this is my first Photomanipulation photoshop lesson at Mix&Mash. Let me forewarn u guys before you all proceed. Some of the "levels" adjustment and shadows-filling are intuitive and i cant really tell u what the specific measurements are because even if i do, 80% of the chance it wun appear the same on your computer screen. So let your designer instinct take over~~

Final Result:

1. Download this image package.

2. Open Old Car.jpg and crop away the top and bottom black bar.

3. Open up the Lioness.jpg and use Pen Tool to trace the Lioness. Make sure you feather your selection with 2px before cropping it out.

4. Copy and paste the cropped lioness onto the Old Car file document. Place the lioness on the front of the car.

5. The most important thing now is to see where your light is coming from. From the photo you see the light are coming from the front right, judging from the shadow on the left of the car.

6. So we are going to deal with the lighting direction of the lioness. Let's duplicate two more copies of the lioness and name it accordingly.

7. Hide the Dark Layer. Select your Light layer. Press Ctrl- L to bring out the "Level". Shift the right controls towards the left to lighten the whole lioness.
P.S. The numbers on the picture are not the one to follow.

8. Switch on the visibility of the Dark layer and press Ctrl -L. Now we shift the left control towards the right to darkern the Lioness.
9. Both layers we apply layer mask and hide all. Layer > Layer Mask > Hide All.

10. Click on the layer mask of the Light Layer. Use a white brush and start brushing at the part of the lioness circled in red. This is because the shadow on the lioness is wrong. We need to get rid of the shadow by brightening that spot.

This is what u will get:

11) Now we select the layer mask of the Dark Layer. Use a white brush and paint on the spot you think will need shadows. These are my suggestions circled in red. If you think some of the parts are too dark, use a black brush erase it away. Use a white brush with lower opacity and brush it again.

This is what you will get:

12) Open up the Stone.jpg and crop out the largest stone in it. Remember the feather of 2px radius. Paste it in the Old Car document file. Position the Stone around the part where the lioness's hand is hanging in air. Transform the stone to your liking.

13) Group the lioness layers together and duplicate it. Merge the duplicated layer together and named it "Lion Top". As the name implies, place it on top of the "Stone" layers. Duplicate two Stone copies and place it above "Stone" Layer but below Lion Top. Apply Layer Mask > Hide All for the "Lion Top" layer.Name them accordingly.

14) Make the "Stone Dark" layer invisible. Use a white brush and brush out the lion hand paw and the chest covering the stone. But take note that the stone should be covering the armpit.

15) For the "stone copy" layer, press Ctrl-L to brighten the stone. Apply layer mask > Reveal All.

16) Select the layer mask of stone copy. Use a black brush and brush at the underneath of the lioness to create shadow. Make sure you do not go overboard with the brushing. Just brush it close to then Lioness if not it would make the stone look like it is floating.

17) Make the "Stone Dark" layer visible and change the blending option to multiply and opacity to 32%.

18) Open up the Drinking_Lioness.jpg. This time we wun crop the picture. Ctrl-A to select the whole picture and copy and paste it in the Old Car document file. Name it "drinking"

19) Position the smaller lioness onto the door ledge.To make this easier, change the opacity of the "Drinking" to around 40% to 50%. Now apply layer> Reveal All. Use a pen tool and trace out the smaller lioness. Right click and select "Make Selection". Feather radius = 2px. Press Ctrl - Alt - I to inverse the the selection. Fill it up with black.

20) We can see that the lioness's back is over-exposed. We need to even out this part. Duplicate this layer. Image > Adjustment > Brightness and Contrast. Adjust the brightness to the left. Make it dark.

21) Apply layer mask > Hide All. Now use a white brush with a brush opacity of 50% and brush the back of the Lioness.

22) Ok we are pretty much done here. If you want to add in the water surface, you can visit this excellent Water Surface tutorial here.

23) Optional.
+ Merge every layer together. Duplicate the layer. Add a gaussian blur of 1 px to the duplicated layer and put the blending option to "Soft Light".

This might not be the best Photo Manipulation tutorial out there but hopefully you picked up some technique and kickstart your creativity. :)

Preview of next tutorial~~

noreply@blogger.com (Gd.Bargain) — Mon, 17 Nov 2008 15:09:00 +0000

Because it's exam time!!! snort~~~

However, i managed to sneak some time to play around with Photoshop. Just a preview of what's coming next:

+

+

+

=

It will be my first Photo Manipulation tutorial, so far i'm still tweaking it to make it perfect. So Stay Tuned and don't delete this blog from your Bookmarks, pls~~~

Excellent Photo Manipulation Tutorials

noreply@blogger.com (Gd.Bargain) — Wed, 29 Oct 2008 14:59:00 +0000

One of the most interesting and difficult thing to do in Photoshop would be Photo Manipulation. To take a few photos and combining them in to one isn't as simple as blending them together. Over the months, i have bookmarked quite few tutorials that deals with such technique. But sadly i haven't got the time to come up with one of mine. However, i would be more than eager to share it with you guys.

1. Fantasy Photomanipulation

Dramatic Winged Dragon

2. Movie Poster

3. Something cute...

Mini Cars

4. If you are one for quirkiness...

Face Swap

Uber Cute Video - Chubby Cuppy Cake

noreply@blogger.com (Gd.Bargain) — Mon, 20 Oct 2008 11:55:00 +0000

Those cheeks are out-of-this-world!!!

Create A Psychedelic-Grunchy Photography Desktop Wallpaper

noreply@blogger.com (Gd.Bargain) — Sun, 12 Oct 2008 15:26:00 +0000

Warning: A lengthy tutorial up ahead. Click at your own risk. If you feel that some part of the tutorial are quite brief, you can download the PSD right here. Pls comment and rate this tutorial. Thanks.

Create Background

1. Create a new document 1200 px by 800px.

2. Download and Paste this image 1 and this image 2. Make sure Image 1 is below image 2.

3. Desaturate image 2 and set Blending Option to overlay.

3. Create a new layer on top of the two image layer. Press "D" to set the default Foreground/Background color. Go to Filter> Render > Clouds. Go to Filter > Render > Difference Cloud. Go to Filter > Distort > Ocean Ripple. Set Blending option to screen.

4. Group these layer together as "Background".

Create Lens

1. Download and Paste this image. Move this image to the top most layer. Name the layer "Lens".

2. Create new layer.Use Ellipse tool to draw a circle around the glass inside the lens. Fill it up with white.Hide it.

3. Create a new layer on top of this image. Name it "spray". Use this brush to brush on "Spray". Ctrl-Click on the "Lens" layer and with the "Spray" layer selected, go to Layer > Layer Mask > Reveal All. Set to "Soft Light".

4. Create new layer on top. Name it "Flash". Press "D" to set the default Foreground/Background color. Go to Filter> Render > Clouds. Go to Filter > Render > Difference Cloud. Go to Image > Adjustment > Invert.

5. Go to Image > Adjustment > Color Balance.

6. Ctrl - Click on white circle layer and with the "Flash" layer selected, Go to Layer > Layer Mask > Reveal All.

7. Change Blending Option to Vivid Light.

8. Create a new layer. Name it Reflection. Ctrl-Click on the white circle. Fill this layer with "white" too. Using a ellipse marquee tool, cut off part of the new white circle. Set to Soft Light and Opacity to 52%.

9. Group these layers together and name it "Lens"

Create a Camera part

1. Download and paste this image. Name this layer "Camera".( i dun know what part of this camera is called :P ). Move the layer on top of the "Lens" Group. Add "Drop Shadow" to this layer.

Create Lens Brush

1. Download this brush. Create a new layer and brush it with a few colors with different brushes. Name this layer "brushColor".

2. Right Click on the "Lens" group and click "convert to smart object".

3. Double click on the smart object and it would bring up a new window.

4. Go to Edit > Define Brush Preset and save the brush.

5. Close the window and go back to the original document.

6. With brush tool selected, go to "Brush Palette" which is normally near the top right of the window.

7. Create a new layer above the "Background" Group. Name it "Spiral".

8. Brush in a spiral manner.

9. Ctrl-Click on the "Spiral" layer and with the "brushColor" layer selected, go to Layer > Layer Mask > Reveal All.

10. Change the blending option of "Spiral" to "Overlay".

Create a stream of lens

1. Duplicate the "Lens" Group. Right Click on the group and click "Merge Group".

2. Continue to duplicate and transform the "Lens" to form a stream towards the Camera.

3. Group all the duplicated "Lens" layer and name them "Stream".
4. Duplicate "Stream" and merge group. Shift this copy layer behind the "Stream" layer.
5. Ctrl-Click on the "Stream Copy" layer and with this layer selected, fill it up with black color. Press Ctrl+ D to deselect.

6. Go to Filter> Blur > Gaussian Blur. Set to 9px.

7. Go to Blending Option.

Decorate the Camera Region

1. Create a new layer behind the "Camera" layer. Use this picture below and paste it in the layer.

2. Change the Blending Option to "Multiplicity". You can transform and move it to your liking.

3. Use the same technique that i used for apply grunge effect to the lens for the camera.

Create the butterfly

1. Download this brush. Create a new layer on the top most and name it "butterfly". Select a butterfly brush and brush it. Give the "butterfly" layer default drop shadow.

2. Create a new layer on top and name it "color". Set the blending option to "color". Choose a few color of your choice and start coloring the butterfly.

Final Image:

How to search effectively in Mix-Mash.blogspot.com

noreply@blogger.com (Gd.Bargain) — Sun, 12 Oct 2008 10:10:00 +0000

Recently some readers emailed me that my google search engine sucks. That's like rubbing salt to my wound. I ain't earning any money from it and i still got flamed for it. :angry face:

But after having my hissy fits, i realised the fault actually do lies with me. I didnt really specify how to use the search engine effectively and i had just one search engine linking to too many websites. Hence, this blog post is born.

Changes made:

+ Two Search Engine to cater for specific needs
+ One search engine is for finding tutorials in Mix-Mash while the other is for finding Adobe Brushes

How to use them effectively?
For Tutorial Search, it is as simple as entering search terms like "cartoon" to search for my "How to create a cartoon scene" tutorials. It saves you the hassle of remembering the full name of the tutorial.

For Brush Search, for example you are looking for a brush like a Skull Brush. So basically type "skull", and this sample result page would enter:

As you can see, the result are very direct and related to what you want it to be. So hopefully, this mini help-page clears things up

Create you own Avatar - MANGA STYLE!!!

noreply@blogger.com (Gd.Bargain) — Fri, 10 Oct 2008 16:18:00 +0000

A nice flash website where you can create your own avatar. This is really helpful especially for people who don't like to put their real photo on forums and websites. A cute manga avatar can let you display your online persona and grab some attention along the way.

Well there's a alternative fun way to do this too. You can ask your friends to do a avatar resembling you while you do the same for them.

Here's what some of my friends did for me:

Create your Manga-style Avatar right now

25 Most Beautiful 3D Typography Design

noreply@blogger.com (Gd.Bargain) — Thu, 09 Oct 2008 16:37:00 +0000

Aren't they lovely? awwwwww.....

Preview of the next tutorial~

noreply@blogger.com (Gd.Bargain) — Tue, 07 Oct 2008 06:48:00 +0000

Through the eyes of a Lens by ~p0larBoy on deviant ART

It's gonna be lengthy so be patient~

Adding Focus to your Photo

noreply@blogger.com (Gd.Bargain) — Mon, 06 Oct 2008 16:23:00 +0000

Sometime you might want your main character in your Photo to pop or be more prominent than others, "Lens Blur" is always the tool to go to. It is simple too use but yet again under-utilized for many Photoshop users. Well, let's get started.

1. Open any image that u want. Most preferably image that has two objects that are apart in distance(eg. in front and behind).

2. Next Duplicate this layer and hide the original layer. Just in case you screw up ;p

3. Click on the "Channel" tab and Create a new Channel. This would create a alpha channel and your image would turn black.

4. Still staying in the "Channel" tab, make the "RGB" layer visible by clicking on the eye beside it. This is so that you can see where you are brushing on. Make sure your Alpha Channel is active by clicking on it.

5. Make sure your foreground color is white. Use a soft brush(ard 14%) with size 15 and start brushing around the edges of your object that you want the focus to be on.

6. After the edges are done, use a hard brush(100%) with size 50 to fill up the inside of the edges.

7. Hide the Alpha Channel by clicking on the eye. Make "RGB" layer the active layer by clicking on it.

8. Go back to the "Layer" tab. With the duplicated layer selected, go to Filter > Blur > Lens Blur. Make source: "alpha 1". Click "Invert".

9. Adjust the radius til your liking. For me, my radius would be 15. Next add some Gaussian Noise to make the blur more realistic. Adding a small amount of noise would do. my noise level is "3".

10. There you go~

Before and After

Picture Credit: MichalGiedrojc

Picture Credit: juliadavis

For people who cant get past step 5: Download PSD File

More Realistic How to Look Younger by 10 years

noreply@blogger.com (Gd.Bargain) — Sat, 04 Oct 2008 03:45:00 +0000

I had gotten quite abit of stick for the "How to Look Younger by 10 years" series. People complained that no one in this world simply have skins like that. Well, a reader, Sheeves, suggested a simple technique to return the whole photo to realism. Since this is really simple, i wouldn't be submitting this to Good-Tutorial. Otherwise, enjoy this tutorial. It wun take you much of the time~~

1. This is what we had after Part 2

This would be the edited layer.

2. Paste the Original Photo behind the Edited Layer.

3. Adjust the opacity for the Edited Layer

Adjust the opacity while looking at the image. Adjust it til your level of "realism", so it's all down to your judgement. For me, i left the opacity at 45%.

There you go

Much better? Yes? No?

My Republic of Singapore

noreply@blogger.com (Gd.Bargain) — Tue, 30 Sep 2008 15:41:00 +0000

Inspired by Brasil Cine.

Pen Tool Tutorial~

noreply@blogger.com (Gd.Bargain) — Thu, 25 Sep 2008 11:37:00 +0000

Pen Tool was really a nightmare to me when i started playing around Photoshop. I always thought I could suffice without using Pen tool at all. Lasso Tool was my poor man's version of Pen Tool.

But later in my life, the need to use Pen Tool was way too tempting. I wanted to be able to cut out intricate objects beautifully and not turned out to be a utter mess. As painful as it took me, i finally can proudly say that i can use the Pen tool efficiently. Looking back now, how i wished there was someone or some tutorials books that would have saved me time, headaches and my poor indexed finger.

Enough of my crapping, now is your turn to grow some balls and start utilizing an extra 0.01% of Photoshop Tools.

Important Points to take note(in case you are too lazy to watch the video):

1. Never attempt to trace a path with an angle more than 90 degree.

2. Use the "Alt" button to shorten the two handlebars to one before proceeding to the next click.

3. To have a smoother path(no bumps in between two points), try to have as little points as possible per shape. (You can use just 4 points to draw a circle or 8 points to draw a circle, 4 points would give u a smoother path)

4. Lastly, the Mother of all Cliche: Practice, Practice and more Practice!!!

Color Personality Test~~

noreply@blogger.com (Gd.Bargain) — Wed, 24 Sep 2008 03:13:00 +0000

Who doesn't love attempting a Personality Test? Doing a Personality Test is like having a self reflection. You might realize things about yourself that no one had dare or want to tell you. However, there is no Personality Test that is 100% accurate, so take everything with a pinch of salt.

My sis intro me a new Personality Test by ranking colors that seems most comfortable to you to the least. If you dabble in Photoshop every now and then, you are bound to be troubled by the selection of colors for your design. So this test should be a ease to do for you. Have Fun~

Link: Colorgenics

How to look 10 years younger? - Part 2

noreply@blogger.com (Gd.Bargain) — Tue, 16 Sep 2008 11:58:00 +0000

After Part 1, we are going to do today is to add in some natural airbrush to make the skin more vibrant and yet natural-looking. More often than not, most air brushing technique will give a unrealistic feeling as the skin are way too smooth and totally covering the pores on the face. If you take very high resolution photos, skin pores can often be seen and you would want to preserve some of those pores for a more natural look.

Get rid of the black spots on the face

1. Using the healing tool, we get rid of the black spots on the face. If you forget the technique of healing, you can revisit Part 1 here.

2. After healing, we will duplicate the layer twice. Name the lower duplicated layer "Blur" and the Top duplicated layer "Pores".

3. With the "Blur" layer selected, go to Filter > Blur > Surface Blur. Adjust the Radius and Threshold together until the images are blurred but still visible. Then slowly lower the Threshold until you can see the edges of the face. Next lower the Radius until the skin are smooth. This two adjustment are totally up to your judgement.

4. Next select the "Pores" layer and go to Layer > Layer Mask > Reveal All. With the mask selected(beside the "Pores" main image), go to Image > Apply Image. Make sure the source is from the "background".

5. Next select the "Pores" main image, go to Filter > Other > High Pass. Adjust the radius until the pores become visible and until the whole skin look natural.

6. Create a new layer and Fill it up with red. Adjust the opacity for that layer to 50%.

7. Group all three layer together. With the Group selected, Go to Layer > Layer Mask > Hide All.

8. With the Mask selected( Click on the mask box in the Group layer), using a large round soft brush with the foreground color "white", brush the skin area.

9. Make the red layer invisible. Duplicate the Group. Right Click the new Group and select convert to Smart Object. Right Click again and Rasterize the Layer.

10. Change the layer blending to "Soft Light".

11. With this layer selected, use the heal tool to heal the area below the eyes to make it more natural. This is again up to your discretion because i just want the skin below the eye to have more texture.

Our Progression

*Updates*

This tutorial is updated at "More Realistic* How to Look Younger by 10 years"

Fonts can be beautiful too....

noreply@blogger.com (Gd.Bargain) — Sun, 14 Sep 2008 17:13:00 +0000

....even when they are repetitive. I saw this excellent tutorial from Spoon Graphic which i absolutely gotta try out for myself. Typography design was always what i wanted to do but it's really hard to make something looks nice just by using fonts. But when it is done correctly, the result would be eye-catching yet not flashy.

Here's my take:

How to look 10 years younger? - Part 1

noreply@blogger.com (Gd.Bargain) — Tue, 09 Sep 2008 10:59:00 +0000

How to make yourself look 10 years younger? With Photoshop you can. Things like eye bags and wrinkle are what that ages your face. For Part 1, we are gonna use Patch Tool, Healing Touch and Cloning Stamp Tool to remove those above mentioned in just 10 mins or less.

1. Get a self potrait or a picture of an aging face. I got this amazing picture from juggertha.

2. Let's Duplicate this layer by Clicking "Ctrl-J".

3. Clicking the patch tool and making sure the selections are correct, circle out the eyebag.

4. Click the inside of the selection you just made and drag to an area of the normal skin tone.

5. You will see that the area you replace is now blurry and it's obvious to anyone that you have just photoshopped your own face. So if you don't want to get heckled by your friends, it's time to fish out the "Healing Tool".

6. Holding on to "Alt", Click on an area you want to "clone" from. Be aware that this is not the same as Cloning tool but the technique of choosing source is the same. You want to choose from a skin tone u want the new skin tone to look like. Heal around the edge of the edge.

7. Do the healing gradually, starting from the edge of the blur.Keep re-choosing your source as you progress. If you find that the "Healing" isn't giving you nice result like the picture below where i got a blur after healing, choose your source again(step 6) and then "heal" it.

8. Next is the Clone Stamp Tool. Choose a large soft round brush and set the blending option to "Lighten".

9. Choose your source around the nice skin tone u want. Now "clone" the area you have just healed.

10. I used the Step 6 to Step 8 for the wrinkle near the corner of the eyes.

11. For the forehead, use the Clone Stamp Technique

12. For the Acne scar on the cheek, repeat the whole Step 6 to Step 8.

Here you go, you should at least look 5 yrs again(this is only part 1)

Before:

After:

*Updates*

This tutorial is updated at "More Realistic* How to Look Younger by 10 years"

Creative Design Game: FONTPARK 2.0

noreply@blogger.com (Gd.Bargain) — Fri, 05 Sep 2008 09:24:00 +0000

If you have too much creative juice to spare and always have an eye for font pattern, then this game is the right game for you. By using different fonts( i think they are call Morisawa Fonts) , you are to play around with them and form a picture. Honestly, this game made me kinda depress for around 5 mins as i struggled to see any co-relation between fonts and picture.

But obviously it just my Left Brain problem. There are still many out there who managed to made some amazing picture like this picture below:

How the hell did they visualize that?

Play the Game Right now: http://fontpark.morisawa.co.jp

Give your images rusty and burnt edges~!

noreply@blogger.com (Gd.Bargain) — Wed, 03 Sep 2008 08:24:00 +0000

Adding a burnt edges to your image makes it look cliche. So let's bring it up another notch and give it a rusty edge too.

Let's start with the rusty first

1. Open up 500px X 500px document with a White background.

2. Create a new layer and use the Marquee Tool to draw a Rectangular Selection. Fill it up with #67a031.Name the layer "Green".

3. Using a Pen Tool,make sure "Path" is selected, start drawing edges along the side of the green Rectangle.

4. Right Click and select "Make Selection". Leave the settings at default

5. Ctrl-Shift-I to inverse your selection and press Delete to clear your selection.

6. With this "Green" layer selected, press Ctrl-J to duplicate the layer and fill this duplicated up with #7b3700. We can name this layer" Brown". Shift this layer below "Green".

7. Duplicate the "Green" Layer and Fill it up with #ea1e00. Name it "Red". Shift it below "Brown" layer.

8. Duplicate the "Green" Layer again and Fill it up with #f3ef00. Name it "Yellow". Shift it below "Red" layer.

9. This is how your layer panel should like now.

10. With your "Red" layer selected, Ctrl-click on "Red" layer to bring up the selection. Go to Select > Modify > Contract > 1px.

11. Ctrl-Shift-I to inverse selection and press Delete.

12. Now select your "Brown" layer, Ctrl-Click on "Brown" layer. Go to Select > Modify > Contract > 2px. Repeat Step 11.

13. Select your "Green" Layer, Ctrl-Click on "Green" layer. Go to Select > Modify > Contract > 3px. Repeat Step 11.

14. Using your Smudge Tool, Go to each layer except green to draw a few smudges. Use a Soft Round Brush and make the Strength:30%. This is what i did.

15. You should end up with something like this.

Now let's do the cliche burnt edges

1. Create a new layer. Call it "burnt". Let it be the top most layer.

2. With the "burnt" selected, Ctrl-Click on Green. Using a dark brown or black brush, draw along the side of the selection. I find that by drawing thinner black lines rather than thick line would make it more realistic. So don't overdo it. Use a small round brush, with the hardness 100%.

3. Duplicate the "burnt" layer and name it "burnt 1". Shift it above "burnt". With the "burnt 1" selected,go to Filter > Blur > Gaussian Blur > 1px. Change Blending Option to "Overlay.

4. Repeat Step 3 two more times but increase the Gaussian Blur by 1px each time.

5. This is what you should get.

6. Import a picture you like. For me i used this. This picture should be above the all layers except the "burnt" layer.
7. Resize and move the picture til the position you like it.
8. Make sure the Picture layer is selected and Ctrl- Click the "Green" layer. Go to Layer > Layer Mask > Reveal All. This will mask out the picture outside the selection.

9. Change the Blending Option of the picture to "Vivid Light".

10. There you have it! Burnt + Rusty + Your Picture = Fantastico~!~!

Time to put on your Creative Hat

Spam a few brushes and grunge text to liven up the image.

Stained by ~p0larBoy on deviant ART

"Background Eraser Tool" is the new Magic Wand

noreply@blogger.com (Gd.Bargain) — Sat, 30 Aug 2008 15:06:00 +0000

We are going to use a very little known Photoshop tool call "Background Eraser Tool". It's a super useful tool for removing background colors while preserving the main picture that you want. It's pretty simple so you can start using it immediately after the tutorial.

1. Open up a image you want to remove the background from. Try to choose a picture with the background that contrast with the main picture.You can duplicate this layer if you want to preserve the original picture.

Image source: http://alexandramaria.deviantart.com/art/endless-summer-IV-96487618

2. Click the "Background Eraser Tool". Set a soft brush(Low hardness) with the size comfortable to remove the background. Set :"Sampling: Once". Leave the tolerance at 50%. Select "Protect Foreground Color".

3. Click the "Eyedropper Tool" to select the color of the picture you want to protect. For my picture, i would click the log.

4. Switch back to "Background Eraser Tool" .Click on the color of the background and start dragging around to erase the background.

5. If there is change in the color of the foreground, switch back to "Eyedropper" Tool and sample the color again. Repeat Step 4 again.

6. After you erase the entire background, let your imagination run wild!!

Here is another i tried using the same technique( You can download the original pic here):
Original Pic:

Edited Pic:

Mix&Mash

Points to watch out for TV application design

Creating the new "Office for Mac 2011" icon

Grids and Circles

Pen Tool

Creating the rounded corners

Giving Depth

Color

Your ‘P’ icon is done!

jQuery: Shuffling Photo Gallery Tutorial

Jquery: Show and hide a partially-extended list

Watch this space!

Lioness And Car

Preview of next tutorial~~

Excellent Photo Manipulation Tutorials

Uber Cute Video - Chubby Cuppy Cake

Create A Psychedelic-Grunchy Photography Desktop Wallpaper

Create Background

Create Lens

Create a Camera part

Create Lens Brush

Create a stream of lens

Decorate the Camera Region

Create the butterfly

How to search effectively in Mix-Mash.blogspot.com

Create you own Avatar - MANGA STYLE!!!

25 Most Beautiful 3D Typography Design

Preview of the next tutorial~

Adding Focus to your Photo

Before and After

*More Realistic* How to Look Younger by 10 years

1. This is what we had after Part 2

2. Paste the Original Photo behind the Edited Layer.

3. Adjust the opacity for the Edited Layer

There you go

My Republic of Singapore

Pen Tool Tutorial~

Color Personality Test~~

How to look 10 years younger? - Part 2

Get rid of the black spots on the face

Our Progression

Fonts can be beautiful too....

How to look 10 years younger? - Part 1

Here you go, you should at least look 5 yrs again(this is only part 1)

Creative Design Game: FONTPARK 2.0

Give your images rusty and burnt edges~!

Let's start with the rusty first

Now let's do the cliche burnt edges

Time to put on your Creative Hat

"Background Eraser Tool" is the new Magic Wand

More Realistic How to Look Younger by 10 years