As a web designer, I always look for design elements for inspiration. So to search for images normally we open Google.com, Flickr.com and other preferred sites, apply different search filters and type keywords and then hit enter to view the results. Its ok to follow this process if we need to do this for two or three times in a day. But for a designer, its not the case. We look for resources a lot and that wastes a lot of our valuable time.

What if we can automate this task and reduce a few step? I created javascript bookmarks for different searches and its helping me a lot to save time and search for resources with only a click, type keywords and hit enter.

Lets create a book mark to search google with image size larger than 1024×768 resolution with license filer with labeled for reuse.

Step 1: Create search query

Open Google.com and search for “Abstract Wallpapers”.
This will show the result for web search. Click Images to view image search results.

Step 2: Apply search filters

Now on this page we can click on search tools and apply a few filter our search results. You can apply whatever you want, however for this trick, I am setting Size to Larger than 1024×768 and Usage rights to Labeled for reuse.

Step 3: Get the query URL

By this time, the URL in address bar has changed with specific query parameters we applied in above steps. Copy the URL in address bar and save it in a text or any editor you use to write Javascript.

Step 4: Write Javascript Code

The string we copied might be a very long string but we need to look for the keyword we used to search in step 1. In this case its Abstract Wallpapers. The URL will have this value encoded which is something like “abstract+wallpaper”. So if you search for abstract, you will see the query param its using. In this case is q=keyword.

In above code, line 1, is to start a javascript function and line 6 with is to wrap the function code.

Line 2, we define a Javascript prompt for the keyword to search.

Line 3, we define the URL we copied however, there’s one change we need to do. We need to pass the keyword variable to the query parameter so, remove everything after q= till & and pass the keyword variable instead. For this we use Javascript concatenation technique.

[htmltag tag=’code’ class=”]’string’+var+’string’;[/htmltag]

Make sure you use same quotes for concatenation, if your declaration is within single quotes use single otherwise double. If this isn’t right, the function will break.

Line 4, We use javascript technique to open a tab or new page in the browser and pass url parameter with _blank for new window or tab.

Line 5, We tell the program to focus on the new window.

Step 5: Creating the bookmark

Now our function is ready and we need to create a bookmark. Carefully bring all the code in one line and wrap it between
javascript:(FUNCTION_IN_ONE_LINE)();

End result should be like this:

Step 6: Test and create a bookmark

To test this, you can simply copy the entire line and paste it in the browser address bar. It should ask for the keyword. Once you type the keyword and hit enter, it should open the Google image search results with applied filters.

Once our test is passed, Right click anywhere on the bookmark bar and click add new. Type a title and enter the code we created in the URL field. Save it.

Now you have a bookmark to search for images greater than 1024×768 size with license to reuse.

You can create these bookmarks for any website, just change the URL and and the keyword variable where its required. Here’s a few from my collection:

Google Image Search

Flickr Image Search

Icon Search @ Iconfinder.com

Dribble Search

Go ahead, spend some time to create these quick and easy bookmarks and save huge time in future. If you like this trick, please share the link with your friends.