How to discard certain part of an image in Photoshop

As you can see in the image below, I am going to remove the tree from the 1st image to make it look like the image on the right. It looks like a difficult task but anyone who knows Photoshop a little will be able to edit the image, in just 2 easy steps.

In the below image I am going to discard certain part from the image without affecting its beauty. It’s a simple tutorial you can do it easily.

before-after

  • First take an image in Photoshop and duplicate the layer for backup.

content-aware

  • Select the part which you want to drain out from the image. You can use quick selection tool or Lasso tool to make selection, here I used the Lasso tool.

make-selection

  • Go to Edit menu select Fill(Edit –> Fill), you will get the following window pop up make sure Content-Aware is selected click OK.

apply-content-aware

  • And its done, isn’t it a child’s play?

content-aware-applied

More Examples :

example-1

example-2

Do you like this tutorial? Please share your view through your comments.

Photoshop Tutorial for Supernova text effect

In this step by step tutorial I am going to create a Supernova text effect using smudge tool and blending options.

Steps to create Supernova text effect :

  • Create a file of 300 x 300 pixel.
  • Fill it with black color.
  • Make sure the default foreground and background colors are white and black.
  • Select smudge tool.
  • From file menu choose Window –> brush.

select bush

  • On layer 1 you can add some noise if you want.
  • Now create a new layer select it (Layer 2).
  • Here this could be a difficult part, so first select smudge tool, click the mouse in the center then hold shift key and drag the mouse upwards finally you will get this kind of effect.
  • (Note: first click then hold shift key and pull it up)

smudge tool

  • Now go on repeating the above step until you get this.

effect upward

  • Now the same thing downwards.

effect downward

  • Select outer glow from the blending option.

outer glow

  • Change outer glow 1) color to #ae02c2 and 2)opacity to 100%

outer glow color

  • Create a text layer and write your text on it.

write text

  • Now copy the layer style, to do so hold Alt key and drag the fx and drop it into the text layer(Devilsworkshop).

layer

  • Create a vector mask.

add vector mask

  • Now select the gradient tool and fill it downwards.

fill gradiant

  • Final output looks like shown in the below image, you can also change the text later however we have used blending options.

supernova text effect

You can add lens flare to it and change the font family to make it look better.

Do drop in your comments.

Best Practices – Writing Efficient CSS For Faster Page Load

In my previous CSS post I wrote about how one can remove unwanted CSS using Tech 1 and Tech 2. And this article contains few CSS tips that every CSS developer must know.

Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.

How to use CSS selectors Efficiently

ID’s is the most efficient Selector whereas Universal Selector is the least efficient. There are four kinds of key selectors. Each of them are rendered with different efficiencies.

  1. ID                        (Fastest to)
  2. Class
  3. Tag
  4. Universal             (Slowest)

The browser reads the selector from right to left. It means that in the selector  ul > li a the first thing interpreted is “a”. This first part is also referred to as the “key selector”, it is the element being selected. Now below is few examples generally we use in our Stylesheet.
#sidebar { }                 /* ID  */
.side-nav{ }                 /* Class */
ul { }                       /* Tag */
* { }                        /* Universal */
body.home #container { }     /* Descendent selectors class and ID*/
ul li a.current { }          /* Descendent selectors-class *
ul li a { }                  /* Descendent selectors-Tag */
#content [title='home']      /* Universal */

When we use the child selector it is not very efficient to use, as it takes a lot of time to interpret.

#sidebar > li { } /* Slower than it might seem */

Since ID’s are so efficient we would think the browser could just find that ID quickly and then find the li children quickly. But actually, the relatively slow li tag selector is run first.

Tag qualify technique should be avoid because ID’s are unique, they don’t need a tag name to go along with it. It makes the selector less efficient. And it is better to avoid with the classes too even though they are not unique. We can make use of it in exceptional cases like li.first but that’s pretty rare.

ul#custom-list { }

Descendant selectors are the worst technique and most expensive. In other words it is the least efficient, for each element the CSS engine matches the key selector, the browser also have to traverse up the DOM tree, evaluating every ancestor element until it finds a match for the root element. The less specific the key, the greater the number of nodes that is to be evaluated.

html body ul li a {  }

Font-family cascades, so you may not need a selector to specify like specified in the 1st example. The 2nd one is as effective and far more efficient than the 1st one.

  1. #container li a { font-family: Georgia, Serif; }
  2. #container { font-family: Georgia, Serif; }

Do you find this article useful? Do let me know through your comments.

Get Photoshop To Do What Fairness Creams Failed To Do!

In my previous Photoshop articles I made a tutorial on How to Remove Certain Part of an image and How to Look Younger using Soften Skin Effect, It was liked by many of our readers and through a feedback I was asked to create a tutorial on how to create a fair skin effect. Read the simple tutorial for fair skin effect in few easy steps.

Step : 1 – Take the image duplicate it(Cntrl J)and move it to the right for comparison.

duplicate image

Step : 2 – Select Quick selection tool and make sure Add to Selection in option bar is selected. Select the area you want to make it fair.

selection tool

Step : 3 –After you made a selection Go to Image menu > Adjustment > Brightness/Contrast.

brightness

Step : 4 – The following  pop up appears adjust brightness and contrast as per your requirement.

brightness adjustment

And you are done with it, look at the image below.

Glow skin effect

Did you like this tutorial? If you have any questions feel free to ask them through your valuable comments.

Internet Explorer Loses Top Spot in Europe For The First Time

We know that Firefox is growing fast in the browser market but for the first time it overtook the number one browser Internet Explorer in Europe. The firm  StatCounter Global Stats reports that in the month of December, Firefox took 38.11% of European market share, compared to IE’s 37.52%. Google Chrome in third place is gaining market share in Europe and has grown to 14.58% compared to 5.06% in December 2009.

This is the first time IE is loosing its number one position, the reason for loosing share is because Google Chrome is stealing IE share while Firefox is maintaining its existing position.

image

Credits

According to Aodhan Cullen, CEO, StatCounter “We are probably seeing the impact of the agreement between European Commission competition authorities and Microsoft, to offer Europe users a choice and menu of browsers”.

In North America and world-wide IE remains at first position with a clear lead in browser market with 48.92% followed by Firefox (26.7%), Chrome (12.82%) and Safari (10.16%).

Chrome is my favorite browser, what is yours and why? Do drop in your opinion through your comments.

Comment Moderation E-mail to Post Author-WordPress Plugin

When an author gets a comment to his post, he gets a notification for it. However, when that comment is held for moderation, the administrator receives an email notification for the same. As per the moderator’s email address saved under the Settings > General tab.On the other hand, the author of the post does not receive any notifications for the comments that have been made on his article. In such  cases the bloggers can use the Comment moderation Plugin that makes comment management easy for the authors.

images (3)Comment Moderation E-mail to Post Author is a new WordPress plugin that enables WordPress to send notification to post author for comment moderation. This way the site administrator does not have to bother about comment moderation. It is useful for collaborative sites where many people post.

This plugin works well on WordPress in both Normal and Multi-site mode. And there is no settings page for this plugin. It will send comment moderation notifications that goes to the author’s e-mail address, not the site moderator address.

How to test if it is working or not:

  • Check your Settings > Discussion settings and make sure that (1) at option  E-mail me whenever at least A comment is held for moderation and (2) at option Before a comment appears at least Comment author must have a previously approved comment are checked.
  • Log out and clear your browser cookies & cache.
  • As an anonymous visitor, post a comment to a post from anyone other than the main site owner.
  • Log back in, verify that comment went into the moderation queue and then ask the author if he received a moderation notification for it.

For more details visit WordPress.org.

Link :  Comment Moderation E-mail to Post Author

How To Install WordPress Plugins

This article is only for the WordPress beginners who have no idea about how to install WordPress Plugins. Experts out there can ignore this. In WordPress, Plugins are tools which provide additional functionality to the application. To install a plugin we just need to put the plugin file into your wp-content/plugins directory. Once a plugin is installed, you may activate it or deactivate it from the Plugins menu in the WP Admin panel.

Steps to Install Plugins:

  1. Download the zip file to your Computer.
  2. Unzip the file and upload the zip folder to your /wp-content/plugins/ directory.
  3. Activate the plugin through the Plugins menu in your Admin Dashboard.

Or Either use the automatic plugin installer. Click Add New button in the Plugin menu.

image

Search the WordPress Plugin.

image

You will get a list of many Plugins, select whichever you like according to rating or description then click Install Now button as shown in the image.

image

Now time to activate it and you are done with installing a plugin.

image

If you have any Questions do drop in your comments.

Download WordPress Plugin – Global Content Blocks

Global Content Blocks is a WordPress Plugin released on 26 Dec 2010, that allows us to create our own shortcodes to insert reusable code snippets or HTML including forms, opt-in boxes, iframes, Adsense code, etc, into posts and pages and preserves formatting. One can insert them using the shortcodes or using a button in the at the right corner of the TinyMCE visual editor toolbar. It requires WordPress 2.8.6 or higher and last updated at 28 of Dec 2010.

GCB-4

GCB-1

GCB-2

GCB-3
credits

The Plugin can hold up to 64,000 characters. Since the blocks are added to the WordPress database so are independent of the theme and unaffected by WordPress upgrades. It is ideal for inserting reusable objects into the content and to prevent the WordPress editor from getting mess up the code or otherwise changing the format. The snippets are masked as images to allow easy manipulation and non-html tags contamination.

If you find any issues or have suggestions you can leave a comment at the Plugin homepage.

Link : Global Content Blocks

Backup All Firefox Settings Using FEBE [ Including Firefox Extensions]

You are working in an office and you are told to change your computer. You might have plenty of data on your computer, lets not talk about that but if  you are a Firefox user then I am sure you might have many Firefox Add-ons to your browser. To re-install all the add-ons would you like to maintain a list to keep a count of that. In that case what would you like to do?

You can not only backup the browser but you can use it to sync up multiple Firefox browser, how it can be done?

Lets Firefox do it for you, Firefox has an extension called FEBE, it stands for Firefox Environment Backup Extension. First take a backup it will give you a backup file, now you can restore it on another PC(you must have FEBE on the other PC) this way you can get all those add-ons which were present in your first PC.

Advantage :

  • It is beneficial in case of Firefox crash.
  • Restore all add-ons at one click at different PC.
  • Take a backup copy to restore for later use.
  • You can store backup file online to restore it anytime anywhere.
  • FEBE not only backs up your extension but themes, bookmarks, preferences, passwords, cookies and just about everything else Firefox offers.
  • You can selectively restore only the items you need. For instance, you may just want your bookmarks restored and leave everything else as it was.

How to go about it :

  • Download and install FEBE add-on.
  • Take a backup of your add-ons at just a single click. Several options are available, you can schedule your backup daily or weekly or monthly basis.
  • The backup file is created, you can store it on your computer’s hard drive.
  • To sync up Firefox with another computer you need to install FEBE and restore backup file over there.

Link: FEBE

Go to Parent Post

Download WordPress 3.1 Release Candidate 2 – Available Now!

WordPress-updateWordPress team has released the second release candidate for WordPress 3.1 which is available to download. The requisite haiku rounding up stragglers last few bugs for 3.1

As Andrew Nacin said that for WordPress RC1, release candidates are the last stop before the final release. It means they are done and have no bugs to squash. But with millions of users, many server configurations and setups, and thousands of plugins and themes, it is still possible they can miss something.

Since Beta 1 came on Thanksgiving, RC1 on Christmas, and RC2 on New Year’s Day. They will not be waiting for another holiday for the final release, so if you have not tested WordPress 3.1 yet, now get ready to test it

If you are a developer and interested in testing the release candidate and if you find a bug, there are a few ways to let them know :

You can test WordPress 3.1 using WordPress Beta Tester plugin. If any known issues are there, you can find them here.

Download WordPress 3.1 RC 2