Today, we’re excited to announce the launch of our new plugin for Google Chrome, PixelMeter. With this plugin, you can measure any dimensions on your screen—and all from within your browser.
We built this because we know how often you might want to size something up—whether it’s something on a website or an image that you want to share with a friend. We know you want to be able to do this easily and quickly, and that’s why we offer PixelMeter: simply install the plugin, open Chrome, and start measuring (it’s really easy!).
Table of Contents
Chrome Extension For Measuring Pixels
A designer’s job is a lot of fun and full of creativity. However, every job involves hassle and boring manual labor to a certain degree. To help make your life a little bit easier we’ve listed 15 of our favorite Chrome extensions that boost efficiency, enhance creativity or generally make working more fun. Admittedly, the three tools at the bottom aren’t really Chrome extensions. However, we liked them so much that we still included them in this list.
1. Colorzilla
No one likes the HEX code hassle. You will want to create display ads with the exact same brand colors as found on the website. You don’t always have your brand book handy. For colors at least, you don’t have to when you have Colorzilla installed. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. It also has a bunch of other nifty features, making it the most comprehensive color picker available.
2. Site Palette
If you need all colors from a website, then Site Palette is the tool for you. Site Palette generates color palettes based on the coding of the website. It also allows you to create shareable links and download auto-generated Sketch templates.
3. WhatFont
Have you ever tried finding out what font is used on a website you really like? And how often have you turned up empty-handed? WhatFont recognizes the font used for any piece of copy you come across in your browser by hovering over it. Pretty useful for when you work at an agency and your client has forgotten the name of the font they want to use in their display ads…
4. Image Downloader
If you ever need to bulk download images from a web page, Image Downloader, is the extension for you. This is an especially useful tool for agencies and publishers that create a high volume of display ads for SMB clients that don’t have too many resources at their disposal. Image Downloader has some extra features that allow you to filter images on a page by width, height, and URL or customize image display width, columns, border size, and color.
5. Pageruler
Keep your designs pixel perfect with Pageruler. This handy tool allows you to draw a ruler to get pixel dimensions and positioning and measure elements on any web page.
6. Designers Ruler
Designers Ruler is a simple on-screen ruler for designers to measure anything on the web. Simple indeed, although it includes some very useful options like a drop-down overlay and type measurements.
7. Corporate Ipsum
Not sure if we’re solving a real problem here, but Corporate Ipsum generates random corporate mumbo-jumbo that is different from the generic lorem ipsum texts. What’s so useful about this tool, is that it generates filler content by the word or paragraph. A definite time-saver!
8. Window Resizer
Digital designers want to know if their designs are suitable for different screen resolutions. Window Resizer allows you to emulate screen or browser resolutions so you can test your designs in any of them. A great tool for doing a final check on your designs.
9. Dark Reader
This eye-care extension enables night mode creating dark themes for websites on the fly. Dark Reader inverts bright colors making them high contrast and easy to read at night. You can adjust brightness, contrast, sepia filter, dark mode, font settings, and ignore-list. Before you install disable similar extensions.
10. Pexels chrome extension
Everyone appreciates a little bit of inspiration every now and then. The Pexels chrome extension shows you a beautiful photo each time you open a new browser tab. This extension will make you go ‘wow’ a couple of times each day. Pexels is one of many great stock photo providers that offers a lot of free material.
11. Easy Screen Capture
This screen capture tool is a great alternative to most solutions around, as it is updated frequently and it enables you to save your screenshots in PNG as well as PDF files or to share them directly. Easy Screen Capture also allows you to define a default folder for your screenshots and the extension offers some basic editing tools so that you won’t have to open, edit, and save your file.
12. RescueTime for Google Chrome™
You’re busy all day, most days of the week. However, by the end of the week it is hard to recall what it was you did exactly. Let alone by the end of the month. Sounds familiar? RescueTime helps you generate insights in the work you’ve done. For example, if you spend your time creating display ads for clients, you’ll be able to see how many hours you’ve spent on which projects for which clients.
13. TinyJPG/TinyPNG
A hard service to miss, since anyone will use TinyPNG sooner or later to resize, compress or crop images. It is mostly used to comply with file-size restrictions of ad networks, or simply to make your website faster and more fun to use with the best compression. If for any reason the images you want to use for your display ads are quite heavy, TinyPNG is the place to go.
14. Fontsquirrel
Not all font files are very stable on web. For this reason, Bannerwise only accepts .ttf font files. If you don’t have a .ttf file of your font, you’re able to convert it with Fontsquirrel’s Webfont Generator. Note that your fonts need to be legally eligible for web embedding. This means that, to a certain extent, you must own the copyright to the font you’re using.
15. Coolors.co
If you’re looking for a little bit of color inspiration for your creatives, Coolors.co will help you generate a color scheme. Coolors.co also generates color schemes based on images and allows you to adjust and refine properties like temperature, hue, and saturation. Coolors.co offers handy export formats and allows you to store everything in the cloud.
best chrome ruler extension
Browser extensions can speed up design workflows, helping you do everything from identifying a font, to pulling a color swatch, to inspecting the code of an element. Google Chrome has edged out all other browsers with the top market share among users, on more than 58 percent of all computers.
And there are plenty of extensions out there to help you optimize the performance of Chrome in your design workflows.
We compiled an awesome collection of 25 extremely useful Google Chrome Extensions for designers and developers.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you’ll ever need in your design resource toolkit.
CMS Templates
CMS Templates
SHOPIFY, TUMBLR & MORE
Fonts
Fonts
SANS SERIF, SCRIPT & MORE
Presentation Templates
Presentation Templates
POWERPOINT & KEYNOTE
Explore Digital Assets
Site Palette
chrome extensions design
Site Palette generates comprehensive palettes that you can share, swatch, and download. The part that makes this extension pretty valuable is that you can pull palette from any website as inspiration for future color combinations. It works with Sketch, Google Art Palette, and Adobe swatches, as well as has a free API.
CSS-Shack
chrome extensions design
CSS-Shack lets you create layer styles in-browser and export using a single CSS file. It’s great for creating mockups for anything from a full site design to a simple button.
Writer
Inconsistencies and errors damage your brand image and hurt customer experiences. Writer helps teams craft clear, consistent, and on-brand content every time. Define your style guide, align your writers, and check everything as you write with this helpful Chrome extension.
WhatFont
chrome extensions design
WhatFont answers your burning typography question: What font is on that website? It takes some of the work out of identifying fonts by identifying them when you hover with a mouse. It picks up common services for web fonts.
Checkbot
chrome extensions design
Checkbot helps you check and fix SEO, speed, and security issues on your website. Use it to scan for broken links, duplicate title, insecure page, invalid HTML, and plenty of other issues that can impact usability. The extension is packed with rules for best practices, maybe even a few things you haven’t thought of.
PerfectPixel
chrome extensions design
PerfectPixel lets you put a semi-transparent image overlay on developed HTML and perform pixel perfect comparisons. Use it to design with pixel perfect accuracy.
Page Ruler
chrome extensions design
Page Ruler is a Google Chrome Extension that allows you to draw a ruler and get pixel dimensions and positioning. Use it to measure any element on a website. It’s super easy to use with a drag and drop interface with arrows and guides.
Muzli 2
chrome extensions design
Muzli 2 is a Chrome extension that will help generate inspiration. It is a showcase of design and UX news from around the web, populating information from more than 120 feeds in one place.
SVG-Grabber
chrome extensions design
SVG-Grabber lets you preview and “grab” all of the SVG assets from a website by copying the code. It’s an open source tool that’s super fun to use.
Loom
chrome extensions design
Loom is a tool that lets you capture your screen, record from the camera, and narrate all at one time. Then you can share with a link. It’s a great way to collaborate on projects with people who aren’t in the same location.
Window Resizer
chrome extensions design
Window Resizer lets you resize a browser window to different screen resolutions. Test layouts on different browser resolutions. The resolutions list is completely customizable. Set the window’s width/height, window’s position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.
Stylebot
chrome extensions design
Stylebot helps you change the appearance of websites instantly with custom CSS. You can preview and install styles or pick and element and choose changes you want to make from the editor. Make adjustments to fonts, colors, margins, visibility, and even write CSS manually.
Alexa Traffic Rank
chrome extensions design
Alexa Traffic Rank gives you the information you need before linking to other web sources. Get quick and easy access to a site’s Alexa Traffic Rank and sites linking in. See how well reviewed the site is. Learn about how the site is being found through search using Alexa’s search analytics, or see what it looked like in the past using the Wayback Machine.
ColorZilla
chrome extensions design
ColorZilla is a Chrome extension that uses an eyedropper tool to pick up colors from anything on the web. You can adjust colors, preview palettes, and even generate new options.
Custom Cursor
chrome extensions design
Custom Cursor is one of those extensions that’s totally just for fun. It allows you to change the mouse cursor to almost any design you can imagine, using your images or a premade collection.
Spectrum
chrome extensions design
Spectrum allows you to test any website and see it from the perspective of people with different types of color vision. It’s a great accessibility tool that can help you make design choices when it comes to color and contrast.
CSS Scan
chrome extensions design
CSS Scan allows you to check, copy, and edit CSS using a browser extension so you can avoid the “inspect element” tool. The true benefit is that you can hover, click, and copy all the rules of an element in an instant.
Check My Links
chrome extensions design
Check My Links crawls to check for broke links on a webpage. It highlights valid and broken links in different colors so you can see what needs work quickly. Then copy all the bad links to your clipboard for easier resolution.
Google Arts & Culture
chrome extensions design
Google Arts & Culture replaces ugly browser windows with each new tab you open in Chrome. You’ll get a daily dose of art with masterpieces and descriptions of the art you see.
Resolution Test
chrome extensions design
Resolution Test is a Chrome extension that allows developers to test web pages in different screen resolutions. Simple, but effective.
Fontface Ninja
chrome extensions design
FontFace Ninja is a browser extension that let you inspect, try, bookmark and buy fonts found on any website.
Image Downloader
chrome extensions design
Image Downloader allows you to bulk download images from a web page. You can see images that pages contain and link to and filter by width, height, and URL. Pick images you like and download.
RescueTime
chrome extensions design
RescueTime is the ultimate productivity extension. Keep track of what you do online all day (if you dare).
Corporate Ipsum
chrome extensions design
Corporate Ipsum uses a more professional set of filler words for filler (lorem ipsum) text.
Google Font Previewer
chrome extensions design
Google Font Previewer lets you choose a font from the Google Font directory with a few style options, and preview them on the current tab.
Grammarly
chrome extensions design
Grammarly lets you check spelling and grammar in-browser as you work. Avoid silly mistakes so that all your work – from emails to mockups – has a more polished feel.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines