The first thing to learn is to create Custom Google Search account of your own. Maki from Doshdosh.com already created the tutorial on embedding Custom Google Search in his website. However, I have my own tricks on my sleeves to this. Let’s start with requirements.

To create Custom Google Search in WordPress, you need:

1. A self hosted WordPress blog (you can’t modify things in shared hosting wordpress.com blog)
2. A Google account (you can setup an account here)
3. Any HTML editor (wordpad or notepad is fine)

First step is to create Custom Google Search:

1. Login to Custom Google Search with your Google account from this link
2. 
   Choose “Create a Custom Search Engine”
3. 
   Fill in your search engine basic information
4. 
   Type your blog domain
5. 
   Test your search engine. If the results aren’t satisfying, you can always revert back to the fist step
6. 
   Choose as mentioned above. We need different page to host our results, that’s why we choose iframe.
7. 
   The first code is your SEARCH FORM code. The second code is your SEARCH RESULTS code. Now your custom search engine is ready

The second step is to install your code in WordPress SEARCH FORM and SEARCH RESULTS:

1. Your WordPress SEARCH FORM and SEARCH RESULTS can be found in your current template. This steps only occurs in your current template. If you want to edit the other template, please do repeat the steps
2. Your WordPress SEARCH FORM is: yourblog/wp-content/themes/yourtemplate/searchform.php
   Your WordPress SEARCH RESULTS is: yourblog/wp-content/themes/yourtemplate/search.php
3. Please do backup those two files before altering. In case that you want to revert back to the old search
4. Go to your SEARCH FORM, paste the code for Custom SEARCH FORM (First code), the result will be like this:
   

   Edited, thanks to Rio
   
<form action="http://yourblog.com/index.php?" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="007584696391574650722:l_61re9sdqy" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
<input type="hidden" name="s" value="Search" />
<input type="hidden" name="submit" value="" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>


   The two bold lines of code are the compulsory codes to trigger Search Results in wordpress. The first line will define the keyword variable ($s) and the second line is the submission button ($submit). Those two lines won’t affect your custom search engine, however, you can’t erase it because WordPress will not open the Search Result page without those two variables.

   This is the example URL that will trigger WordPress Search Result: http://yourblog.com/index.php?s=keyword&submit=
   
   That’s why I can add any Google Custom Search variables as long as those two are unharmed

   If you are having trouble with the form layout, please do consult w3schools.com to learn about HTML and CSS

5. Now go to your WordPress SEARCH RESULTS and replace the code into the following pattern:
   

   
<?php get_header(); ?>

   ---put your google search results here---

   <?php get_footer(); ?>


   The result will be like this:

   
<?php get_header(); ?>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<?php get_footer(); ?>


6. Your custom search engine is ready to go!

Custom Google Search Engine is very useful to your website. There are two reasons why you should use it:

• Comprehensive Google Search, you know how powerful Google search is, imagine it putted in your website. You might also want to install Google Sitemap generator plugins to widen your search results from Google
• Add money on it, yes, Google Search can be integrated with your Adsense channel. Check Doshdosh.com to learn how

Updated

Credit: Thanks to Rio for pointing out this issue

How to make your Google Search Terms appear in the page’s title

This issue is already explained clearly in Thu Tu’s Blog. The search terms will appear in your search page’s title in any theme you used. In order to make one of your theme to show the search terms, you can follow these steps:

• Open your chosen theme’s header.php file.
• Modify your theme’s title inside the <title> tag like this:
  

  <title>

<?php

  $cse_query = strip_tags(stripslashes($_GET['q']));
if (is_home()) {
echo bloginfo('name'); echo ": "; echo bloginfo('description');
} elseif (is_404()) {
echo 'Page Not Found (Error 404)';
echo ' - ';
echo bloginfo();
} elseif (is_category()) {
echo 'Category : '; wp_title('');
echo ' - ';
echo bloginfo();
} elseif (is_search()) {
echo 'Search for: "';
echo $cse_query;
echo '" - ';
echo bloginfo();
} elseif (is_day() || is_month() || is_year() ) {
echo 'Archive :'; wp_title('');
echo ' - ';
echo bloginfo();
} else {
echo wp_title('');
$subtitle = get_post_meta($post->ID, 'subtitle', $single = true);
if($subtitle !== '') { echo ': ' . $subtitle; }
}

  ?>

  </title>

• The first bold line will call your Google Search Terms (defined by variable $q), while the second bold line will call the variable and show it only in a search page (defined by is_search() wordpress function)
• Remember that any of your installed WordPress plugin that can alter the Page Title (e.g. All in One SEO Pack) will make this method useless

The implementation of this method can be found in my latest site development: NetSains.com

Please have your comment and suggestion!

1. Sketch your way of fire bending.
I usually sketch directly through Photoshop. It doesn’t consume much time and I can save the environment a little by not buying pencils and papers (and many erasures). I am one of the people who sketch fire from the core first, because it’s easier for me. Don’t forget to bend the tails, because those parts are exotics.

2. Make one leaf of fire.
I start making the fire by drawing one leaf of fire. It maybe not look like a fire, yet. But this shape will define how the entire part will bend.

3. Encircle the core.
To make the fire looks alive, I created the core to reveal the source of fire. That’s why I need to create another leaf circling the core so that the core will be visible.

4. Texturize the fire.
Fire is not flat, they also have 3D shapes. I need to draw the details in darker color to show the texture. Usually tribal art are coming from making fire-look shapes.

5. Finishing.
Added some shadows and transparent gradient of white, it will look like a fire candy! Well, not really, it actually look like a badge. By the way, it’s done! Please post some comment or other tutorials regarding fire making here. Learning from others will enrich the way you create something.

Thank you.

Starting this year I would like to make more review on great graphic design tutorials on the web. My criteria of choosing a great tutorial is simplicity, cleanliness, and well designed. I hope that by reviewing those tutorials, I can help myself on increasing the quality of my own tutorials.

This week’s review is started by Veerle‘s tutorial of Creating Simple Art Brushes in Illustrator. The tutorial is presented so well which makes me wonder when I have the time to layout my own tutorials to become as good as that. This tutorial explains about the function of Arc tool in Adobe Illustrator for making simple art brushes. Frankly speaking, I didn’t know the function of Arc tool before reading this tutorial. It took me for about 5 minutes to master it. It’s time to experiment my good ol’ Illustrator.

Still related to graphic design, which is Website Design. The Go Mediazine releases one of the series of creating a Killer Band Website Design Layout with Drupal CMS. In their previous news, Go Mediazine already mentioned that they will release a series of tutorial for Web Design Layout with Drupal. This tutorial is presented by Sean Hodge of aiburn.com and Connection Cube. He serve as a guest author for Go Mediazine, especially for this tutorial. The tutorial explains about creating layout with Slice tool in Adobe Photoshop. The layout involves:

• Setting up workspace for website layout
• Creating an outstanding Go Media’s Arsenal vector banner
• Creating button effect for navigation bar
• Creating textures for background

The tutorial is quite simple. For a beginner like me, an hour is the most I can do to master it. I also looking forward for the next series.

One of PSDTUTS author has released a tutorial for creating another alternative for Gold Text effect in photoshop. Yes, another alternative, I said. Because there are zillions of tutorials with the same title, but all of them are done in different ways. I found this tutorial as simple, quick, clean, and elegant. The tutorial is presented by Fabio, one of PSDTUTS contributors. This tutorial only involves filter effect and blending options. I’m not going to say it here because it is so simple, please go to the tutorial page in PSDTUTS instead. I’m a fellow subscriber of PSDTUTS. Almost everyday they post new, clean, and well presented tutorial. One of my favorite is creating spectacular flaming-text-like-a-meteor tutorial.

This is my first Photoshop tutorial since 2008. In previous year I have a list of web resource for free brushes but didn’t mention on how to use it. This quick guide will explain how Brush Tool were used worldwide.

If I can make a free definition of Brush tool, Brush tool is a set of defined bitmap shapes which can be used as a tip of a real brush. In other words, you can customized the shape of your brush tip to begin painting.

Brush Tool can be either created or imported. Lots of designers make their own brushes to stand out among others. Most of it were distributed freely. I don’t exactly know when it was distributed as free stuff but since Adobe shared it for free, there is no copyright issue regarding brush sets. If somebody distribute a brush to ask for payment, you’ve been tricked!

Tool Overview:

This is the preview of a Brush Tool. In default Keyboard Shortcut, you can activate it by pressing B key.

This is the preview of Brush Tool Options.

The Brush Option will be activated if you are using Brush Tool. The picture above shows the content of Brush Option. You can accessed it via triangle button beside the word “Brush:”. Or you can accessed the Preset Manager from Edit » Preset Manager… » Preset Type » Brush.

To use the Brush Tool, simply click on one of the Brush Shapes in the Brush Option. The thumbnail image is showing the brush tip shape and it’s size in pixels. The size were default size, meaning it is the original size of a brush. You can still increase the master diameter, however it will reduce the quality of the brush.

Well, I’m not going to teach you how to drag, you can RTFM by yourself. One fundamental thing that you should know is Brush Tool can only be used in bitmap based or rasterized layer, it can’t be applied in vector shape layers.

To import Brush from other sources.

You can download free brush source at different shape and size. Most designer make their own brush in high-resolution to preserve quality. You can accessed it through this article. The file will be at the type of .abr or .zip package. Mostly they were zipped to include text document which consist of the creator’s signature. You must unzipped the package and bring the .abr file into this directory:
...\YourAdobePhotoshopDirectory\Presets\Brushes\

If you already open Adobe Photoshop application, you’ll need to restart the application to see the change in the brush preset.

The other way to import new brush is through Preset Manager. Click the Load and find your .abr file to import the brush into Preset Manager.

Modify Brush Tool Using Brush Palette:

You can modify the Brush Tip Shape inside Brush Palette. To access Brush Palette, go to Window » Brush. Therefore, you can edit the tip shape and modified it as you like. Here is the guide:

1. Pick the Brush Tip Shape that you wanted to modify in the Brush Tip Shape menu
2. Pick the modify options (Shape Dynamics, Scattering, Texture, etc…) one by one and see the change they made
3. If the shape seems didn’t have any effect at all, you should try using the brush into your document to see the change they made
4. Try to be more creative and use different combination of options

These are the Keyboard Shortcut while working with Brush Tool:
“<" & ">” to toggle between brush tip shape
“[" & "]“ to increase and decrease brush tip shape

Hope you enjoy it.

Since this is just a minute, memorize this steps otherwise it will blow off your monitor!

Just kidding, now.

This is the simplest tutorial I’ve ever made. I get this tutorial by watching those web 2.0 templates around the globe recently, and figure it out as soon as possible. Well, here it is guys, so simple.
All you need to know is that most reflection is good in the dark, what I mean is, they look absolutely beautiful in dark background. Let’s take dark green background as example and put white text on it.

To create the reflection, press ctrl + J to duplicate the text. You will have two layers with the same text. Now, put one of the text under the other.

Then flip it vertically by using ctrl + T, right-click on it, and flip vertically. Or you can access the Edit > Transform > Flip Vertical. There you got the reflection, now. But you need to make it more smooth and soft.

In order to make it smooth, you won’t need the text’s original color, so put the Fill opacity into 0%. Then right-click the layer to set Blending Option. Then fill it with gradient. This is how the gradient composition which is simply good for reflection:

It is a combination of white-white gradient, however, there are different transparency. One is around 40%, while the other is completely 0%. Put it just like the picture above. It’s done! You can arrange other glossy effect, but remember, web 2.0 things are all about simplicity. It pleases your eyes very well.

Blogged with Flock

Related post to this tutorial:
Shiny Floor Effect

First Step: Configure your blog account.

Here is how you configure your blog account, simply log in into your blog account and Flock will remember it in the “My World” page. My World page is a page created by Flock to display your accounts information, favorites, RSS, and other Flock features. After you logged in to your blog account, you can access the Blog Post creator. Click the blue feather icon to enter the Blog Post.

Second Step: Configure your image host account.

The image hosts available for Flock are Flickr and Photobucket. Simply logged in to either one of them so that Flock will remember it in the My World page. If Flock hasn’t remembered it, just log out and log in again. After logging in, enter the image uploader by clicking the upward arrow in the tools. You can either upload it in single or batch upload.

Third Step: Begin writing a blog

To begin blogging, you must configure which blog you are going to use. For example you are logged in using one Blogspot account which consist of many blogs. Flock will prompt you to choose which blog you are going to post. Flock only remind you once, at the first time you use Flock’s Blog creator. If you need to change your blog, press the Configure button or access the Tools menu.

Fourth Step: Putting images inside your blog post

Here, you can input your images from the Media bar. Media bar is Flock’s feature to display your most recent uploaded media. It can be picture or even video (Flock’s also support YouTube account, however, not for uploading, only for viewing). To input your image, you need the image’s URL. To get it, simply right-click at the picture inside the media bar to get it’s URL. There are choices of customized URLs, pick the one which is only representing the actual file for the image. Press the Image tool to insert an image (it can only be viewed in the Editor mode), then paste it into URL field. You can arrange the alignment of the image to the text.

Fifth Step: Publish the post

To publish, simply click the publish button and the Blog Creator will closed. Don’t forget to input the Post Tag for better SEO and categorization. Simple, isn’t? This post itself was made with Flock. Make sure you know what you are posting, because the result might not be as good as you demand.

Blogged with Flock

Well, he does have a point. Only 1 from 15 people that I asked knows about Pen Tool, most of them didn’t understand what I wrote previously. At least I tried a little bit.

I will start by this Hair Color Changing tutorial.

PREFACE

Before you start, please remember that in designing there is no definite way of doing something. If I say do A to get B, you can also do C, D, or the combination of E and F to get B. After you understand this concept, start your Photoshop!

1ST MINUTE

Choose a Picture. Open a picture from File menu or pressing CTRL+O. I choose the picture of Aya Ueto, a Japanese artist I admire, you also can Wiki her.

2ND MINUTE

Select the hairs. This is what I am talking about in the PREFACE, you can always do the alternatives. My first way is by activating the Quick Mask Mode button; it is located at the lower left of your Default Workspace.

Default Workspace is the default setting of toolbars, menu, and shortcut keys from Adobe Photoshop. You can always turn to default workspace by accessing the Window > Workspace menu.

After you activated the Quick Mask Mode, it means that any brush effect you created will form a masking. The brush will shows in red by default. Now click on the brush tool.

If you confused on where each toolbar are placed, press F1 for Adobe Help Center

Choose the brush with Right-Click on the workspace, it will show you a detailed menu and brushes selection. You can also click the triangle beside the brush to open the menu. Choose the brush that shows in the picture:

Then begin selecting the hairs with brush. Brush over the hairs carefully and precisely. You can always change the brush size by pressing “[“ to decrease and “]” to increase .

Then click on the Quick Mask Mode button again to deactivate the quick mask mode and previewing the selection you have made with brush.

Inverse the selection by choosing the Select > Inverse, or pressing the Shift + Ctrl + I. You will get only the hair as selection. From that selection, press Ctrl + J to create a copy layer based on your selection.

8TH MINUTES

From the copied layer, you can modify the color by experiment with adjustment menu. It is located in Image > Adjustments. I’m sure you will be satisfied with the result, but I also recommend using Hue/Saturation or Photo Filter (from the adjustment menu). This is my setup for Photo Filter:

8.5th Minutes! It’s done! Thank you for following my tutorials. Okay, now you try!

First, you create points by cllicking with Pen Tools. If you click on an empty area,
the tools will automatically create new shape layer

alt=”Pen Tool Intense Tutorial – The Name is Firewalker” Title=”Added new layer automatically” />

Proceed in clickings the girl’s hair for creating it’s shape. The Pen Tools will proceed in creating paths from the first click that you made.

If your vision are blocked by the shape’s color, turn the opacity down.

If you want to continue the shape, click on the layer’s path in the layers window,

then click on the last point of your shape, the cursor will shows “/” or “-[]-” sign that will alert you to continue from there.

Continue the path until it reach the beginning point and it will show “o” sign on the cursor

Your shape is done, then it’s time to make it more detailed. Use Convert Point tools to edit

Convert point tools can make a curve from the points that you made. So remember the drill, make the points first, then modify the curve.
Click + Drag the points to make a curve. It will show you 2 tangent line for helping you adjusting the curve. At first click, it will create an ideal curve with identical tangent lines.
Release after drag, then you can edit each tangent lines. If you don’t push CTRL/COMMAND key while dragging the tangent lines, the curve will break. Otherwise, the tangent lines will stay identical.

Edit all the points; in my picture I have shown you where you should break (white circle) and where you should not (red curve).

Now, for the intense part, you must distinct which are the shadow part and which are the highlight part.

You will need to make more than one shape for shadows and highlights, group them so that they wouldn’t troubles you later on

It’s done! You can always change the color from each shape’s layer, or you can just merge the group (CTRL+E) and set the Color Overlay (Right Click > Blending Options). But for the warning, you can’t edit the shape anymore after you merged, it’s better to make a copy first, then you merge them.

Isn’t it lovely?

Well, what’s for start? An image of a car, of course!

Then you should decide where to work first! I prefer working on the rear tire first, no reason. Then I start with something complicated from the rear tire such as this axis:

Here is an example, all you have to do is break those colors into shapes. Just like the picture shows. If you see black shadow, make it shape. If you see blue metals, make it shape. Just as simple and as dilligent as that! Wow, do vector artists waste time like this? Of course, not! You can learn useful shortcut keys that will make you work as fast as clerks in the cash register machine. You need to be fast, don’t always switch tools with mouse. Even tough you score the fastest clickers in DoTA, your other hand always stick on the keyboard.

Sample shortcuts with PEN TOOLS:
SPACE = to switch between any tools with HAND tools. It is useful when you wanted to use hand tools to drag your workspace while quickly switch to the previous tool if you are done dragging.
SHIFT+CLICK = You can select points
CTRL+DRAG on point(s) = To move point(s) as it was selected
CTRL+ALT+DRAG = To duplicate a vector shape by dragging them
CTRL+DRAG on curve = to make perfect simmetrical curve

From the picture, you may know that I used blending options on some shapes. Those are: OUTERGLOW on some highlights shapes, also to make shadows effect by using darker color to glow. I also used GRADIENT OVERLAY, yup, too lazy to draw multiple shapes that look like gradients.

After few repetation on the other objects, then the rear tire is done! One thing is that you don’t have to be precise if you only draw it for 1024 x 768 screens. But if you want to print it, you must have attention to details. Misprinted shapes are often happens if you lack of attention. To prevent this, always check in higher resolution, 300 pixels/inch is the standard for any prints.

If you learn how I work from the previous pictures, then I tell you those shapes are classified into many groups. I classified the tire components by the size. It ease me if I suddenly want to change a shape, because I don’t have to browse each of the hundreds shape for it.

That’s the drill. Now, make the shapes for each of the parts. Front tire, body, and the ferrari logo. The result will be like this:

Here are my tips:

1. Attention to details, if you see the color of one part is different, make another shape! Make every shapes for every color.
2. Make every shape count! Group your shapes as you progress to other part of the picture
3. Avoid using too many blending options, it won’t look like vector image anymore
4. Don’t be too stingy with your file size, rasterizing can save space but it can’t be edited anymore
5. If your computer can’t handles big shapes, minimize the whole picture resolutions (you will find it difficult for some details, though)
6. Always save for every shape you made! Photoshop don’t support file recovery.
7. Set the Undo actions higher for better editing. Make it from Edit>Preference>History State
8. Don’t forget to eat! Tell someone to remind you, otherwise you’ll be sitting duck, afraid of losing the mood if you step out
9. Always keep your health up by doing a little stretching exercises

When you browse a thing about “photoshop” in any search engines, what do you see most? Well, if it is not a way to strip your girl friends naked (well, I’m not one of them), it must be about “brushes”. Yes, Photoshop become famous through one of this powerful, expandable, and modified tools. It is easy to shared and the file size isn’t big enough to fill up your hard disk.

Many Photoshop lovers are unlike Professional Photographers. The one and only difference between them is that: Photoshop lovers aren’t stingy. They don’t charge a penny on their brushes and actions. No copyright, only asking for a little PayPal or Amazon donations, hahaha… what a joke.

Well, here are things that I found through browsing “free photoshop brushes”:

• Design Fruit
• PS Brushes
• Get Brushes
• Magurno
• brusheezy
• Adobe Exchange
• Graphic Identity
• Obsidian Dawn Brush

And this list will be updated regularly!
Last Update: January 14th, 2008