In this part-one article, I’m going to explain how you can further streamline and improve your daily workflow focused around content creation and content management, using free web browser addons all of which can be obtained from Chrome’s Web Store.

Let’s start off with handling image content.

Taking Full Page Screenshots

Full Page Screen Capture

Full Page Screencapture is a great little tool that allows you to capture the entire screen of a webpage that perhaps you’re working on for a client and you want to show them a quick  preview of the work in progress.

Another great thing about this plugin is that you can export captured screen as a .pdf file which then can be used in conjunction with a free version of Adobe Acrobat Reader  for adding notes/comments for further better communication.
If you have accidentally deleted your recent captures from your hard drive, don’t worry!
This plugin also comes with a built-in history module, where you can recover and manage all of your recently captured screenshots.
One important thing to point out here is that you can run this extension on any webpage, except for ones where the browser restricts extensions from running scripts.

Image Bulk Download

Download All Images

I can’t recommend Download all Images extension enough! I’m simply in love with this one. It allows you to download images and photo albums from the currently opened tab.
I find it really useful when working on client’s social media content where all the images are uploaded to their gallery folder on Facebook or website.
It’s a highly customizable, mini powerhouse plugin, permitting you to be more selective with the images you want to download in terms of their resolution, format and file size.
You can also rename the images upon export and view the gallery before you hit the save button.

Main Features:

  1. Can detect all images loaded in the current page regardless whether they are loaded in nested iframes or not
  2. Many filtering rules to find and download only needed extensions
  3. Can catch images in links, background script and CSS files
  4. Display images in a gallery view before downloading them
  5. Supports two-level deep image searching

Highly recommended!

The next group of tools I’m going to talk about is focused around web colours and fonts.

Sample Colours from Webpage

Colorzilla

Colorzilla is an amazing little extension that allows you to sample colours from any element on the webpage. This tool comes in handy when you don’t have access to the original branding document for your new client but you need to create one from scratch.

Here are the main features of this tool:

  • it comes with picked colour history window which stores up to 65 previously sampled colours,
  • it can analyse webpage for used colours (by the way, I’m going to mention another free online tool from Adobe that does similar thing but involves an extra step. Stay with me!),
  • last but not least, Colorzilla allows you to generate custom CSS gradient code which can be used for formatting custom buttons on your website. Pretty neat, isn’t it?!

Now it’s time to jump right into discussing probably one of the best font extensions for the Chrome web browser.

Discover the Font being Used

FontFace Ninja

Are you feeling tired and frustrated with trying to find out the type of font that has been used on a website you’re looking at through the inspection panel?
With FontFace Ninja you don’t have to feel this way anymore! Simply click on the icon and hover your mouse over of any portion of the text on any website to get all the details you need!

FontFace Ninja will not only tell you the name of the typeface used on the opened webpage, but it will also provide you with additional information on the size of the font, line height and even font colour. Quite useful if you use CSS for styling your pages.
You also have the option of signing up to FontFace Ninja, which will allow you to bookmark your recently researched fonts.
Last but not least, this extension also lets you type in a custom text into the pop-up window to see how your text is going to look like and you can even shop online for any paid fonts discovered during your research.

Extra

Adobe Color Wheel

Okay. I know this blog post was supposed to be about top addons for your productivity. However, I couldn’t omit adding another tool into this pool which isn’t an addon but rather a ‘free’ online service from Adobe. It’s called Adobe Color Wheel.

If you’re familiar a little bit with the colour science and how colours interact, and most importantly, complement each other then you’ll find this tool really indispensable.
There are two ways of using this online tool. The first one is by working with colour harmonies. Once you’ve selected the type of harmony, then you just need to adjust the settings according to your brief with the client.

The other way is to upload an image from which the colours will be samples from by Adobe’s Colour Wheel platform. If you need to create a colour palette from an existing website, simply use the Full Page Screen Capture Tool to take a screenshot of the main page and let Adobe Colour Wheel do the rest for you!
The final step would be to write down the hex codes for all sampled colours. If you’re subscribed to Adobe Creative Cloud Services, you can also avail of the option of downloading and uploading your newly generated colour swatches to programs like Adobe Photoshop or Adobe Illustrator.

I hope you found this short article very useful. If you have came across other tools during your own online research, please share them with us and let us know your opinion!

That’s all for now. Thank you for reading.

Featured Image by Arthur Lambillotte on Unsplash