Total Tutorials http://www.totaltuts.org Daily tutorials for beginners to professionals Fri, 01 Feb 2008 13:17:03 +0000 http://wordpress.org/?v=2.3.1 en Creating a simple password protection http://www.totaltuts.org/2007/12/25/creating-a-simple-password-protection/ http://www.totaltuts.org/2007/12/25/creating-a-simple-password-protection/#comments Tue, 25 Dec 2007 16:02:53 +0000 Steve http://www.totaltuts.org/2007/12/25/creating-a-simple-password-protection/ Introduction:

Time to time you may want to protect some of your web pages but you don’t want to setup any complicated system and a database only for this. In this article I will present you a very simple solution how you can do it easily. I know this solution is not the best but some not mission critical cases it can be very useful.

Step 1.

The main idea is to insert only one line of code into each of your web pages you want to protect. This code includes a form processing script at the beginning of your original code. It first displays a small form to enter your password and if it is ok then shows the original page content.

So now we need to create a PHP script with a simple form processing. The form is very simple, only a password field and a submit button is present. The code is the following:

<?php
function showForm($error=“LOGIN”){
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“DTD/xhtml1-transitional.dtd”>
<html>
<body>
<?php echo $error; ?>
 <form action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>” method=”post” name=”pwd”>
Password:
<table>
<tr>
<td><input name=”passwd” type=”password”/></td>
</tr>
<tr>
<td align=”center”><br/>
<input type=”submit” name=”submit_pwd” value=”Login”/>
</td>
</tr>
</table>
</form>
</body>
<?php
}
?>

Step 2.

As we don’t want to show the form always we put it inside a function and this function will be called if necessary. The main application logic checks if the form was submitted or not. If not then displays the form else check the entered password. If it fails then informs the visitor and displays the login form again. If the password was right then we do nothing so the rest of the code will be displayed.

Don’t forget that in case of displaying the form we need to exit from the code processing to hide the important page content.

The application logic looks like this:

<?php
$Password = ‘demo’; // Set your password here

if (isset($_POST[’submit_pwd’])){
$pass = isset($_POST[‘passwd’]) ? $_POST[‘passwd’] : ”;

if ($pass != $Password) {
showForm(“Wrong password”);
exit();
}
} else {
showForm();
exit();
}
?>

As you can see the password is hard coded and exists in human readable format. If you want you can store it in a separate file and encode it for example with md5() function. All is up to you.

Step 3.

Now we are ready with the script. Now if you want to protect any of your pages you need to insert the following line of code at the beginning of your PHP code:

<?php require_once(‘protector.php’); ?>

]]> http://www.totaltuts.org/2007/12/25/creating-a-simple-password-protection/feed/ Speed up your site with caching http://www.totaltuts.org/2007/12/25/speed-up-your-site-with-caching/ http://www.totaltuts.org/2007/12/25/speed-up-your-site-with-caching/#comments Tue, 25 Dec 2007 15:58:33 +0000 Steve http://www.totaltuts.org/2007/12/25/speed-up-your-site-with-caching/ As your site is growing you need focus more and more on site performance. If your content is not changing in every minutes but you have a lot of visitors then your webserver is making a lot of unnecessary work. The server processes your PHP scripts always, however the output is the same. Using cache mechanism we will process the script once but use it more times.

 

How it works

 

The cache mechanism is not so complicated. The main idea is that we store the processed output in a file and in case of a new request we check if the file exists or not. If it exists and not to old then we just send the file content to the client. If the file doesn’t exists or to old then we process the PHP script. We can save a lot of time in case of scripts with  intensive database usage. 

 

Implementation 

 

We will create a separate new Cache class which has 3 important functions:

  • starteCache()
  • endCache()
  • cleanCache()

 

The class skeleton

 

Before we begin to implement the functions we need to create the skeleton of the class with the class variables. We need to define class variables to control cache behaviour. See the comments in the code below:

 

<?php

class Cache {
   var $status    = true;     // True to switch on cache and false to switch it off
   var $cacheDir  = ‘cache/’; // The default directory where to store chached files
   var $cacheFile = ”;       // The content of the actual cached file
   var $timeOut   = 1000;     // The time how long the cached file remains reusable
   var $startTime = 0;        // The startime to determine script execution time 
   var $cache     = true;     // Shows if chaching actual content is needed
   
}
?>

 

Besides the class variables we define an internally used function to measure the time we spent with processing. This is the getMicroTime() function and looks like this:

 

<?php
    function getMicroTime() {
           list($usec, $sec) = explode(“ ”,microtime());
          return ((float)$usec + (float)$sec);
    }
?>

 

The startCache() function 

Now we can start with the most important function of our class. The use case of the startCache() function is the following:

  • Save actual time
  • Check file existence and age.
    • If file exists and not to old then display its content and exit.
  • If file doesn’t exists then set a caching flag to true.

The code is the following:

 

<?php
   function startCache(){
      $this->startTime = $this->getMicroTime();
      if ($this->status){ 
         $this->cacheFile = $this->cacheDir.urlencode( $_SERVER[‘REQUEST_URI’] );
         if ( (file_exists($this->cacheFile)) && 
              ((fileatime($this->cacheFile) + $this->timeOut) > time()) )
         {
            //Read file from the cache
            $handle = fopen($this->cacheFile , “r”);
            $html   = fread($handle,filesize($this->cacheFile));
            fclose($handle);
          
            // Display the content
            echo $html;

            //Display the rendering time
            echo ‘<p>Total time: ’
                 .round(($this->getMicroTime())-($this->startTime),4).‘</p>’;
            
            //Exit from the code as we displayed cached data
            exit();
          }
          else
          {
             // Set to save generated content into file
             $this->caching = true;
          }
      }
    }
?>

 

The endCache() function 

 

If the actual page was not cached yet and the caching flag is set to true then this function will save the output buffer to a file and of course displays it as well. At the end just for information it displays the total processing time as well. The source looks like this:

 

<?php
   function endCache(){
      if ($this->status){
         if ( $this->caching )
         {
            //You were caching the contents so display them, and write the cache file
            $html = ob_get_clean();
            echo $html;
            $handle = fopen($this->cacheFile, ‘w’ );
            fwrite ($handle, $html );
            fclose ($handle);

            //Display the rendering time
            echo ‘<p>Total time: ’.round(($this->getMicroTime()-$this->startTime),4).‘</p>’;
         }
      }       
    } 
?>

 

The cleanCache() 

This is the last function and it is quite simple. This function only checks the cache directory and removes all of the files in it.

 

<?php
    function cleanCache(){
       if ($handle = opendir($this->cacheDir)) {
          while (false !== ($file = readdir($handle))) {
             if (is_file($this->cacheDir.$file)) unlink($this->cacheDir.$file);
          }

          closedir($handle);       
       }
    }
?>

 

Usage of the class 

If you want to cache your pages you need to extend your code a bit with the new cache class. It only takes some line of code. First we need to import the cache class and create a cache object afterwards. As we have the object we can call the startCache() function. At the end of the file we need to insert the endCache() function and we are ready.

 

An example code looks like this:

 

<?php
   require_once(‘cache.class.php’);
   $CacheManager = new Cache();
   $CacheManager->startCache();
   
   echo “Start Cache example at: ”.date(‘H:i:s’).“<br/>”;
   sleep(2);
   echo “End Cache example at: ”.date(‘H:i:s’).“<br/>”;

   echo “<br/><a href=’clear.php’>Clean the cache</a><br/>”;
   
   $CacheManager->endCache();
   
?>

]]> http://www.totaltuts.org/2007/12/25/speed-up-your-site-with-caching/feed/ Check your server status - a basic ping http://www.totaltuts.org/2007/12/25/check-your-server-status-a-basic-ping/ http://www.totaltuts.org/2007/12/25/check-your-server-status-a-basic-ping/#comments Tue, 25 Dec 2007 15:49:49 +0000 Steve http://www.totaltuts.org/2007/12/25/check-your-server-status-a-basic-ping/ In this tutorial I will show you how to check whether a domain, server is up or down and how fast it is. Generally speaking we will implement a ping command with PHP.

Step 1.
PHP has no built in function for the ping functionality so we need to find a way how to realize it. We want to know two information about the given domain. First of all we want to know whether it is available or not and as second it would be nice to get information about how fast the response is.

The main concept is that we try to connect to the server with socket connection on port 80 and measure the time how long does it take. To do this we will use the built in PHP function fsockopen() which opens Internet or Unix domain socket connection. On depends the return value we can decide whether the actual domain is available at the moment or not.

Let’s do some coding.

Step 2.
First we will implement the main function which will get a domain name as parameter and try to open it. The function will returns with the response time if the connection was success and -1 in other case. The function makes no input validation so it must be done before calling it. I will show it later.

Let’s see the main steps:

  • Save current time as startTime
  • Try to connect to the domain
  • Save current time again as stopTime
  • Check the return value
    • In case of error return with -1
    • In case of successfully connection calculate the time in ms and return with it.

The code looks like this:

<?php

// Function to check response time
function pingDomain($domain){
$starttime = microtime(true);
$file = fsockopen ($domain, 80, $errno, $errstr, 10);
$stoptime = microtime(true);
$status = 0;

if (!$file) $status = -1; // Site is down
else {
fclose($file);
$status = ($stoptime - $starttime) * 1000;
$status = floor($status);
}
return $status;
}
?>

Step 3.
Now let’s create some usable environment for our function. It means that we will create a HTML form where the visitor can define the domain name in a normal text field. As action parameter we will call our script again. I use no any special formatting and CSS to make this example as simple as it can be and focus only on the main topic.

The resulted form is quite simple:

<form action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>” method=”post” name=”domain”>
Domain name:
<table>
<tr><td><input name=”domainname” type=”text” ></td></tr>
<tr><td><input type=”submit” name=”submitBtn” value=”Ping domain”></td></tr>
</table>
</form>

During the form processing we need to validate the domain name. In this case it means that to be sure we remove the http:// prefix if it was submitted with the domain name. Here you can add more validation routines if you want. Now we can call the above implemented function with the given domain and display the result depending on the return value.

<?php
// Check whether the for was submitted
if (isset($_POST[’submitBtn’])){
$domainbase = (isset($_POST[‘domainname’])) ? $_POST[‘domainname’] : ”;
$domainbase = str_replace(“http://”,“”,strtolower($domainbase));

echo ‘<table>’;

$status = pingDomain($domainbase);
if ($status != -1) echo “<tr><td>http://$domainbase is ALIVE ($status ms)</td><tr>”;
else echo “<tr><td>http://$domainbase is DOWN</td><tr>”;

echo ‘</table>’;
}
?>

And we are all done.

The complete code looks like this:

<?php
// Function to check response time
function pingDomain($domain){
$starttime = microtime(true);
$file = fsockopen ($domain, 80, $errno, $errstr, 10);
$stoptime = microtime(true);
$status = 0;

if (!$file) $status = -1; // Site is down
else {
fclose($file);
$status = ($stoptime - $starttime) * 1000;
$status = floor($status);
}
return $status;
}
?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<body>
<form action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>” method=”post” name=”domain”>
Domain name:
<table>
<tr><td><input name=”domainname” type=”text” ></td></tr>
<tr><td><input type=”submit” name=”submitBtn” value=”Ping domain”></td></tr>
</table>
</form>
<?php
// Check whether the for was submitted
if (isset($_POST[’submitBtn’])){
$domainbase = (isset($_POST[‘domainname’])) ? $_POST[‘domainname’] : ”;
$domainbase = str_replace(“http://”,“”,strtolower($domainbase));

echo ‘<table>’;

$status = pingDomain($domainbase);
if ($status != -1) echo “<tr><td>http://$domainbase is ALIVE ($status ms)</td><tr>”;
else echo “<tr><td>http://$domainbase is DOWN</td><tr>”;

echo ‘</table>’;
}
?>
</body>

]]> http://www.totaltuts.org/2007/12/25/check-your-server-status-a-basic-ping/feed/ Design a Gaming Navigation Interface in Photoshop http://www.totaltuts.org/2007/12/25/design-a-gaming-navigation-interface-in-photoshop/ http://www.totaltuts.org/2007/12/25/design-a-gaming-navigation-interface-in-photoshop/#comments Tue, 25 Dec 2007 15:28:38 +0000 Steve http://www.totaltuts.org/2007/12/25/design-a-gaming-navigation-interface-in-photoshop/ In this detailed photoshop tutorial you will learn how to create a Stylish Gaming Interface for your navigations.

Step 1:

Let’s start out by creating a new file. I used a 1000×130 pixels canvas set at 72dpi, and I filled my background with a black color. Then on your tools palette set the foreground color to a dark gray, color code #383838.

Step 2:

Create a new layer and using the Rectangle Tool draw a dark gray rectangle with an exact size of 1000×22 px.

Step 3:

Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your dark gray rectangle layer.

Step 4:

Now add an Gradient Overlay blending option.

Step 5:

Your dark gray rectangle should now have a gradient effect.

Step 6:

Now make another layer and draw a black rectangle covering your gradient rectangle.

Step 7:

Under Layer Style(Layer > Layer Style) add a Inner Shadow and Gradient Overlay blending option to your black rectangle.

Step 8:

On the layers palette set the blending mode of your black rectangle to Lighten. This should add another layer of detail on your rectangle designs.

Step 9:

Create a new layer and below your gradient rectangle draw a thick white line, exact size of 1000×5 px.

Step 10:

Back on your Layers Palette set the opacity level of your thick line layer to 24%.

Step 11:

Select your Horizontal Type Tool and above your screen under the options palette set the font family to Verdana, regular, 10 pt, crisp and white for color.

Step 12:

Now add your first set of navigation, here we added the systems from PC, Xbox 360 to Wireless. Make sure you set-up your navigation with spaces and a black pipe bar between each link. Then on your layers palette set the opacity level to 66%.

]]> http://www.totaltuts.org/2007/12/25/design-a-gaming-navigation-interface-in-photoshop/feed/ Remove Wrinkles with the Healing Brush http://www.totaltuts.org/2007/12/25/remove-wrinkles-with-the-healing-brush/ http://www.totaltuts.org/2007/12/25/remove-wrinkles-with-the-healing-brush/#comments Tue, 25 Dec 2007 15:16:55 +0000 Steve http://www.totaltuts.org/2007/12/25/remove-wrinkles-with-the-healing-brush/ Use Photoshop’s Healing Brush And Patch Tool To Remove Wrinkles

The clone tool is one of the most often used tools when it comes to retouching in Photoshop. But two other tools that are often overlooked by people new to the sport are the Healing Brush and the Patch tools.

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

In this tutorial, I’m going to show you how to remove some wrinkles from an elderly lady’s face. To ensure that we get a realistic result we’ll firstly duplicate the background layer and carry out all changes on this duplicate layer. On completion of retouching, we’ll use the two layers together to get a more natural look.

Retouching on a separate layer

One way to protect your original image is to do your retouching work on a duplicate layer of the original image. Then, you can retouch the duplicate layer. When you finish retouching, you can blend the two layers. This technique usually enhances the results, making your retouching work look more natural and realistic. The Healing Brush tool uses sample pixels from an image to let you correct imperfections. The amazing thing about the Healing Brush is that it also matches the lighting, shading, texture and transparency of the sampled pixels to the pixels being healed. It results in a very natural looking image.

STEP 1

Open up the image that you want to retouch. I’m working on a portrait photograph of an older lady.

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

STEP 2

In the Layers palette, click on the Background layer and then press Ctrl+J to create a duplicate layer. Double-click the new layer (called Layer 1), and rename it Repairs and press Enter (Windows) or Return (Mac OS). Leave this new layer selected (highlighted in blue).

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

STEP 3

In the toolbox, select the Healing Brush tool , which may be hidden under the Patch tool .

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

STEP 4

On the tool options bar, open the Brush pop-up palette and set the brush diameter to a suitable size – you need it to be big enough to cover wrinkle lines – I chose 12 pixels. Close the palette and select the Aligned check box. Leave the other settings at their defaults ( Normal selected as the Mode option and Sampled selected for Source).

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

Notice the two wrinkles running horizontally across the man’s forehead. (Zoom in if necessary.)

STEP 5

Hold down Alt (Windows) or Option (Mac OS) and click a smooth area of the forehead, on the left side of the image, to set the sample point. Then, drag the Healing Brush tool over the lower of the two forehead wrinkles. As you drag, you’ll notice that the painted pixels don’t exactly match the subject’s natural skin tones. When you release the mouse button, however, the colours correct themselves so that the wrinkle is covered and the skin looks quite natural.

STEP 6

Continue painting with the Healing Brush tool to remove the upper forehead wrinkle and the furrow line between the eyebrows.

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

Patching and softening

The Patch tool combines the selection behavior of the Lasso tool with the colour-blending properties of the Healing Brush tool. With the Patch tool, you can select an area that you want to use as the source (area to be fixed) or destination (area used to do the fixing). Then, you drag the Patch tool marquee to another part of the image. When you release the mouse button, the Patch tool completes the job. Make sure that the Retouch layer is selected in the Layers palette before you continue.

STEP 1

In the toolbox, select the Patch tool (), hidden under the Healing Brush tool ().

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

STEP 2

Drag a marquee around the wrinkles under the eye.

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

Move the Patch tool inside the selected area and drag it to a smooth, similarly toned area on the forehead. Let go of the mouse key and voila! Wrinkles removed. You’ll notice that the marquee stays active over the repaired area, ready to be dragged again, either to another area that needs patching (if the Destination option is selected) or to another sampling site (if the Source option is selected).

STEP 3

Continue to use the same technique to erase the wrinkles under the other eye.

STEP 4

Continue to touch up other parts of the subject’s face with the Patch tool until most of the wrinkles are hidden, or at least softened. It’s very important that cosmetic touchups on the human face look as natural as possible. To make sure that things are looking too smooth or plastic looking, we’re going to reduce the opacity on the repairs layer so that we can see a few of the wrinkles coming up from the bottom layer.

STEP 5

In the Layers palette, change the Opacity value of the Retouch layer to about 60%. Now, hints of the heaviest skin creases appear in the image – a bit more realism. The lady should have at least A FEW wrinkles!

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

STEP 6

Click the eye icon to toggle the Repairs layer on and off. You should see a fairly large difference between the original image and the retouched one. Before (left) and After (right).

Use Photoshop's Healing Brush And Patch Tool To Remove Wrinkles - Photoshop Tutorial

]]> http://www.totaltuts.org/2007/12/25/remove-wrinkles-with-the-healing-brush/feed/ Vector Polishing Techniques http://www.totaltuts.org/2007/12/25/vector-polishing-techniques/ http://www.totaltuts.org/2007/12/25/vector-polishing-techniques/#comments Tue, 25 Dec 2007 14:55:00 +0000 Steve http://www.totaltuts.org/2007/12/25/13/ Someone emailed me and asked how did I do the illustration background on Next2Friends. It inspired me to write this article. He asked “Did I do it in Photoshop or Illustrator?” Well, it is a mixture of both. First I created the artwork in Illustrator, then polished it in Photoshop. Here I will unveil all my secret techniques. This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art.

Why do I need to polish the vector art?

Vector artworks are usually very flat, dull, and lack visual effects due to software limitations; thus they look very boring. Unless you want that “flat and dull” appearance, otherwise you should polish your vector in Photoshop. By polishing vector art, you can: make the color more vivid, bring up the contrast, texturize the artwork, and add more life and depth to the image. Here are some of my work samples (before and after polish).

  • before
  • after
  • before
  • after
  • before
  • after
  • before
  • after

Technique 1: Lens Flare Effect

N2F lens flare

First technique, let’s start with one of my recent work on Next2Friends. I will show you how to create a stunning lens flare effect in two simple steps.

I assume you have the vector artwork ready and you want to add a lens flare layer on top. First create a new layer on top and fill it with black color. Go to Filter > Render > Lens Flare. Then, set the layer’s blending mode to Screen. Done. Isn’t that nice and easy?

Lens flare 1

If you want the lens flare to focus on specify area only, you can delete the unwanted area. Make a circle selection, feather the selection (Cmd + Opt + D) by 10 to 20px, inverse selection (Cmd + Shift + i), and hit Delete key.

Lens flare 2

Sometime just the Lens Flare filter alone is not good enough. You can make it even better by manually adding more colorful circles and glows.

Lens flare 3

Technique 2: Colorful and Dusty Effect

Colorful and dusty

This is one of my common styles that can be found in most of my design work. Again, it is very easy. It can be done in two easy steps.

Use the Radial Gradient tool, randomly draw some soft edge glows on a layer and set the layer blending mode to Dissolve.

Dusty effect 1

Repeat this step and create different color overlapping layers. Try to use bright colors such as yellow, megenta and cyan. Tips: you can control the dissolve level by adjusting the layer Opacity.

Dusty effect 2

Technique 3: Rainbow

Rainbow effect

If you ever wondered how I did the rainbow effect on my Phoenix illustration (currently displaying on N.Design Studio). It is done by a Photoshop plugin, Polar Coordinates.

Create a new square dimension file (ie. 800 x 800px). Make a spectrum gradation in the middle of the document using the Gradient tool with the default “Spectrum” preset. Go to Filter > Distort > Polar Coordinates. There you go, a perfect circle spectrum!

Rainbow 1

Now, you have to blur the sharp edge. Go to Filter > Blur > Gaussian Blur, apply 5 to 10px radius, depending on the size of your document. Bigger document size will require more blur.

Rainbow 2

If you only to show partial of the rainbow, you can use the layer mask to hide the unwanted area. In the Layer palette, click on the “Add layer mask” icon. Use Gradient tool, select the “black to transparent” swatch, drag from left to right to mask out the unwanted area.

Rainbow 3

Technique 4: Glowing Lights - Background

This is the quickiest and most easiest way to create a colorful light glowing background for your vector work.

Glowing Lights

First fill the layer with any dark gradient you desire. Use the Radial Gradient tool and start making soft (transparent) glows on separate layers. This effect works best with cyan, magenta, and purplish colors.

Glowing background 1

Experiment with the blending modes and drag the layers around (you will get unexpected results): Overlay, Color, Multiply, Screen, and Color Dodge.

Glowing background 2

Technique 5: Particles

Particles

Particle Tail

Here is a technique on how to create a tail of particles as seen in my Flow artwork. This technique is also commonly used in the fairy tale books/movies (you know, the typical magic wand effects).

Select the Pen tool, and draw an opening path. Select the Brush tool, set any brush size you want (ie. Brush size 3px). In the Brush panel, turn on Scattering and Shape Dynamics (you can play around with these settings to get different results).

Particle Tail 1

In the Paths palette, right-click on the path layer and select “Stroke Path”. It will fill the stroke with your active brush setting.

Particle Tail 2

Tablet Drawing

Of course you can manually create the particle effect by brushing with various brush sizes. If you have a tablet, this will be fun. In the Brush panel, turn on Shape Dynamics, Scattering, or any other controls to Pen Pressure and experiment the results. If you don’t have a tablet, have fun clicking and dragging.

Particle Tail 3

Technique 6: Color Dodge

Color dodge

Vector artworks usually look very flat, by color dodging, you can bring up the contrast and create a focus point.

Paste your vector artwork in a new layer, use the Eyedropper tool and pick a bright color from the original image. Set your Brush mode to Color Dodge and brush Opacity 5 to 10%. Gentling click on the area where you want to be dodged. Be easy and try to over-dodge the image.

Color dodge 1

Technique 7: Blurred and Darkened.

As mentioned earler, vector artwork is usually very flat. You can add more depth to the image by blurring and darkening the background objects. Examples can be found in my Flow illustration. Notice the floral patterns in the background are blurred and darkened?

Blurred and darkened

Just duplicate the foreground objects and apply 3 to 5px Gaussian Blur.

Blurred

Technique 8: Watercolor

As seen on this site, watercolor texture and vector can mix very well together. Here is how I did the watercolor effects.

Watercolor 1

Choose any pastel colors, such as pink, green, purple, orange, etc. Select the Pencil tool, set the brush size to about 100px, Opacity 10%, and randomly draw on the layer.

Watercolor 2

Repeat this step for different colors. This technique is also posted in the previous tutorial, Watercolor Effect Menu.

Technique 9: Vintage

Here is a technique on how to create vintage effect to give more texture to your vector work. Although I have never used this technique in my illustration work, but I have seen it a lot. So, here is it.

Vintage 2

Paste your vector artwork in Photoshop. Select the Erase tool, set the mode to Pencil, select one of the grunge/splatter brushes, and gentling erase partial of the layer.

Credits: The brush sets used here are splatter and watercolor, from Bittbox. The icons are from my free Christmas Holiday Icon Pack.

See more

You can browse my design portfolio to see more work by me. Some of my works are available for download as desktop wallpapers.

]]> http://www.totaltuts.org/2007/12/25/vector-polishing-techniques/feed/ Fixing Backlight Photos http://www.totaltuts.org/2007/12/25/fixing-backlight-photos/ http://www.totaltuts.org/2007/12/25/fixing-backlight-photos/#comments Tue, 25 Dec 2007 14:44:54 +0000 Steve http://www.totaltuts.org/2007/12/25/fixing-backlight-photos/ Here is an example of a backlight photo:

 

adjust_backlight_01 (18K)

Now, let’s start.

  1. Press (Ctrl+J) to duplicate the background layer so
    you can delete the new layer and start all over again
    if anything goes wrong.
  2. With the new layer selected, click Image >
    Adjustments > Shadow/Highlight…

    adjust_backlight_02 (31K)

  3. The default settings of the Photoshop
    Shadow/Highlight tool will make the image look better
    but you can play with settings to get much better
    results. The shadows sliders will affect only the
    shadows in the image while the highlights sliders will
    only affect the highlights areas which makes the
    Shadow/Highlight tool perfect for this setuation.

    adjust_backlight_03 (35K)

Before:

 

adjust_backlight_01 (18K)

After:

adjust_backlight_04 (23K)

]]> http://www.totaltuts.org/2007/12/25/fixing-backlight-photos/feed/ Create a Realistic Torn Paper Effect in Photoshop http://www.totaltuts.org/2007/12/25/create-a-realistic-torn-paper-effect-in-photoshop/ http://www.totaltuts.org/2007/12/25/create-a-realistic-torn-paper-effect-in-photoshop/#comments Tue, 25 Dec 2007 14:33:45 +0000 Steve http://www.totaltuts.org/2007/12/25/create-a-realistic-torn-paper-effect-in-photoshop/ Torn paper is one of the key elements to achieving the distressed / collage look. This tutorial covers a few simple steps in Adobe Photoshop to create a realistic looking torn paper effect taking you on your way to Destroying the Web 2.0 Look!

Photoshop Torn Paper Effect

11.gif

Start with your blank document in Adobe Photoshop, use the Lasso Tool freehand to create the outline of the torn edge and continue the selection across the lower half of the document.

22.gif

Select an appropriate colour for your paper and fill the selection on a new layer.

31.gif

With the Lasso Tool still selected, Right Click (CMD-Click) on the mask and select Make Work Path from the menu. Change the tolerance to 1px to keep the path close to the original mask.

41.gif

Select a brush shown above from the Brush Tool Menu, depending on the size of your document you may require a larger/smaller brush.

51.gif

Head over to the Brush Options window, change the Shape Dynamics settings as show to create a fibrous stroke. For more information on the Brush Options window take a look at my previous Photoshop Brush Tip.

61.gif

Back with the Pen Tool or Path Selection Tool Right Click (CMD-Click) the path and select Stroke Path from the menu. Ensure the Tool is selected as Brush from the drop down and Simulate Pressure is off. Repeat this again if necessary to produce a realistic amount of stray fibres from the edge of the paper.

7.gif

Paper is often made up of several layers which can become exposed when torn, to make the torn paper effect realistic create a another freehand selection using the Lasso Tool.

Fill this selection in a much lighter tint than the first colour on a new layer.

8.gif

Make this the new Work Path by Right Clicking (CMD-Click) with the Lasso Tool.

9.gif

Your brush settings should still be in place and appropriate colour selected, go ahead and Stroke the Path using the Brush option to produce more fibrous particles.

10.gif

This produces the basics of the torn paper, but paper is more than jus a block of flat colour. To make it more realistic we need subtle texture and creases.

111.gif

Download a Paper Texture from a stock photography website, the one I have found is free from Stock XChange.

12.gif

Paste the texture into you document and desaturate (Image > Adjustments > Desaturate) to remove the brown colouring.

Change the blending mode to Multiply to render the light areas of the image transparent.

13.gif

The texture is way too overpowering so adjust the Brightness and Contrast (Image > Adjustments > Brightness/Contrast) to tone down the effect.

14.gif

Move the layer around to find an interesting section with plenty of creases and texture.

15.gif

Delete the unwanted areas from the texture by selecting your lighter coloured paper layer, go to Select > Load Selection.

Inverse the selection (CTRL/CMD + Shift + I) and delete the selection from the texture layer.

16.gif

Merge your layers and add the new paper texture to your designs, notice the tiny fibrous edges and subtle texture up close which together give effect a realistic paper look.

Photoshop Torn Paper Effect

]]> http://www.totaltuts.org/2007/12/25/create-a-realistic-torn-paper-effect-in-photoshop/feed/ Electrifying Energy Beams http://www.totaltuts.org/2007/12/25/electrifying-energy-beams/ http://www.totaltuts.org/2007/12/25/electrifying-energy-beams/#comments Tue, 25 Dec 2007 14:21:12 +0000 Steve http://www.totaltuts.org/2007/12/25/electrifying-energy-beams/ Here’s a great effect that will bring some energy to your subject. We’ll be wrapping this singer’s arm with a glowing beam of light, adding sparkles, and adjusting the colors to make it all seem magical.

Firstly, create a new layer, then grab your Pen Tool (P) and draw out a spiraling path, as if you have a snake wrapped around the arm.

Then select the Brush Tool (B) and set your diameter to 7px, with the Opacity and Flow at 100%, and your foreground color set to white. With your path still on the artwork, go back to the Pen Tool, right click on the canvas, and choose “Stroke Path.” A menu will appear with the Brush set as the Tool. Check “Simulate Pressure” and press OK. This will make the beginning and end of your stroke thinner.

Now you need to delete the parts you want hidden behind the arm. With your stroke layer selected, choose “Add layer mask” at the bottom of the Layers Palette. Use the Polygonal Lasso Tool (L) to select areas of the arm you want in front of the stroke — use your eye and imagine how this path will wrap around the arm. Make sure your mask is active by clicking on it, and fill these selected areas with black. They should now be cut out, appearing as if they’re behind the arm.
Right click on your stroke layer and choose Blending Options. A Layer Style menu will appear, where you’ll be adding an Inner and Outer Glow to the stroke, making the edges of it glow with a blue hue. Use the settings below:
Make a copy of your stroke layer and right click on the Layer Effects icon. Choose “Clear Layer Style” — we simply want to blur this layer (about 6 pixels) to add another layer of glow. Everything’s looking nice and illuminated here, so let�s add some sparkles. With your Brush Tool, add some quick spots around your glowing path with varying small brush sizes (3 - 5px). Make as many as you want here, as you’re always free Erase undesired sparkles.
We’re now going to make a secondary stroke to create another level of motion. Use the Pen Tool to go over your original path, but make it a bit different and overlap parts. Select a smaller diameter brush this time with a 50% opacity, and stroke the path as before.
Our energy beam is nearly there. To make the effect more dramatic, you can adjust the overall hue of your photo. Create a new Curves adjustment layer, and tweak the colors to get a vibrant blue atmosphere. Download the Curves preset below to load it in your document. After your colors are locked in, use the Dodge Tool (O) (with a diameter of 35 pixels and the exposure set to 25%) to brush in some highlights underneath your beam, directly on the background photo. This makes it appear as if your beam is casting light on to the arm.

Download blue.acv

For the last part of this effect, we’ll add one more layer of shimmer. Hold down Ctrl and click on your main stroked path in the layers palette — your path should now be selected. Go to Select › Modify › and Expand the selection by 7px, then feather it by 10px.
Now select your background photo layer and apply a Plastic Wrap filter, found in your Artistic filters. This will add some wispy lines around your path. Set the Highlight Strength to 20, the Detail to 6, and the Smoothness to 8. Finally, lightly Gaussian Blur your background layer with the feathered selection still active.

]]> http://www.totaltuts.org/2007/12/25/electrifying-energy-beams/feed/ Make a Electric related website banner image logo idea http://www.totaltuts.org/2007/12/25/make-a-electric-related-website-banner-image-logo-idea/ http://www.totaltuts.org/2007/12/25/make-a-electric-related-website-banner-image-logo-idea/#comments Tue, 25 Dec 2007 13:34:15 +0000 Steve http://www.totaltuts.org/2007/12/25/make-a-electric-related-website-banner-image-logo-idea/ Here I will tell you how to make a Electric related website banner image logo idea using photoshop tools and technique.

[1] Take a new file of 400 pixels,400 pixels, of resolution 72 dpi in the RGB mode.

Electric-related-website-banner-image-logo-idea1

[2] Take the Elliptical Marquee Tool.

Electric-related-website-banner-image-logo-idea2

[3] Now set the Foreground Color see in the next image.

Electric-related-website-banner-image-logo-idea4

[4] Now create a circle then go to Select>Feather Selection use these values.

Electric-related-website-banner-image-logo-idea5

[5] Now fill the selection with help of Alt+Backspace.

Electric-related-website-banner-image-logo-idea7

[6] Then set the Opacity of this layer.

Electric-related-website-banner-image-logo-idea8

[7] Your image should be look like this.

Electric-related-website-banner-image-logo-idea9

[8] Now create another Circle with the help of Elliptical Marquee Tool, then fill the selection with Red color.

Electric-related-website-banner-image-logo-idea10

[9] Now set the Foreground Color see in the next image.

Electric-related-website-banner-image-logo-idea11

[10] Now create another Circle with the help of Elliptical Marquee Tool and fill the color.

Electric-related-website-banner-image-logo-idea12

[11] Then go to Blending Option use the following settings.

Electric-related-website-banner-image-logo-idea13

Electric-related-website-banner-image-logo-idea14

[12] Your image should be look like this.

Electric-related-website-banner-image-logo-idea15

[13] Now hold Cntl+Click the Previous Layer, then take the Rectangular Marquee Tool use the following settings.

Electric-related-website-banner-image-logo-idea16

[14] Create a new shape over the circle shape see in the next image.

Electric-related-website-banner-image-logo-idea17

[15] Your image should be look like this.

Electric-related-website-banner-image-logo-idea18

[16] Then fill the selection with White color.

Electric-related-website-banner-image-logo-idea19

[17] Now set the Opacity see in the next image.

Electric-related-website-banner-image-logo-idea20

[18] Your image should be look like this.

Electric-related-website-banner-image-logo-idea21

[19] Now create a new shape with the help of Pen Tool.

Electric-related-website-banner-image-logo-idea22

[20] And then take the Gradient Tool use these settings.

Electric-related-website-banner-image-logo-idea23

[21] Fill the selection with the help of Gradient Tool.

Electric-related-website-banner-image-logo-idea24

[22] Now create a new shape with the help of Pen Tool.

Electric-related-website-banner-image-logo-idea25

[23] Create a new layer make the selection and fill with White color.

[24] Your final image is ready.

Electric-related-website-banner-image-logo-idea26

Make a Electric related website banner image logo idea,Free Photoshop Website Templates, Free Photoshop Web Layouts,Photoshop Web Template - Web Site Design Tutorial …

]]> http://www.totaltuts.org/2007/12/25/make-a-electric-related-website-banner-image-logo-idea/feed/