As a web designer, what’s the software you absolutely must have on your computer? The chances are it’s Photoshop and Illustrator. And while those are the essentials of your design workflow, there are smaller tools you probably don’t know you need.
The best thing is, you don’t even have to download them—just install these Chrome extensions and away you go. From identifying fonts on pages to measuring distances between web elements, these web design Chrome extensions will make your life easier.
1. Dropbox for Gmail
Dropbox started out as a file hosting service, but it soon discovered its major audience is designers, who use the service to share their work with colleagues. Because design files are often too big for email attachments, it’s easier to send a Dropbox link to the file.
Dropbox for Gmail makes the process even more convenient. When you link to your file using a Dropbox button at the bottom of the new email window, the recipient gets a sneak peek of what you’re sending. Links to image files will upload the images right to the email, and links to other types of files will generate a handy preview.
Install: Dropbox for Gmail
2. FontFace Ninja
With thousands of fonts available, your typography possibilities are endless. Especially if you can identify a beautiful font you see somewhere and borrow it for your own project.
FontFace Ninja is a Chrome extension that helps you do just that. Much like the tools that find fonts from images it helps you identify the fonts you see online. The only difference is that FontFace Ninja reads the fonts coded into the page’s CSS, like the typeface of headings and body text.
When you launch FontFace Ninja, it will show you the information on the font you direct it to—and not only the typeface, but also the weight, size, height, width, and color. To bookmark that font, you’ll need an account at the sister service, FontFace Dojo.
Install: FontFace Ninja
3. ColorPick Eyedropper
No matter how good an eye for color you have, it’s hard to recreate a particular shade you saw online unless you know its RGB or HTML values. Luckily, you don’t have to guess if you have ColorPick Eyedropper.
Like the best color picker apps for Mac, ColorPick Eyedropper will show you the values for any color you point at. The difference being that it’s always there in your browser and you don’t have to upload anything—just click on the icon and move the target to the right spot.
The extension reads colors from text, images, and pretty much anything you might see on a web page (even the ads). Once you capture a color, it shows you the HTML, RGB, and HSL values for it.
Install: ColorPick Eyedropper
4. Dimensions
This open-source extension is a find for web designers, especially if you do one-time gigs for small businesses. When a client hands you down a website without any previous files or documentation and asks you to design “a page like this, but with different text and images,” figuring out the layout is a pain.
Dimensions lets you easily measure the height and width of any element on the page, as well as the margins between them. That makes it easy to recreate existing pages and double-check your own designs after they go into production.
Install: Dimensions
5. Visual Inspector
Visual Inspector is a powerful feedback and collaboration tool for design teams, combining the features of the previous three extensions and adding even more.
In the Inspect tab, you can pick any element on the page to get full information about it, from dimensions to the file name. The Colors and Typography subtabs let you see the color palette and all fonts at a glance, while Assets gathers all images on the page in one place.
The Collaborate tab is where you can give feedback and have discussions with your team, and it’s easy to leave a comment by clicking on any element on the page.
Like most advanced tools, Visual Inspector comes with a price tag: you’ll need to pay from $9/user/month to add comments and sync changes. However, its basic features such as inspecting colors, fonts, and images, are free to use.
Install: Visual Inspector
6. Easy Screen Capture
A screen capture extension may seem redundant, since taking a screenshot on Mac is a breeze, and capturing your screen on Windows is just a little more hassle. But Easy Screen Capture has quite a few selling points.
Most importantly, it lets you capture the entire web page, not just the area you see on your screen. That’s priceless when you need to report several issues on a long page, and capturing them all would take three to four screenshots.
Another neat trick is being able to copy the screenshot to clipboard and paste it right into a chat or an email, rather than hoard useless image files on your computer.
Install: Easy Screen Capture
7. Muzli 2
Finally, there’s one crucial task you have to deal with every morning: shaking off the remains of sleep and getting into the groove. Muzli 2 by InVision will serve as your morning newspaper with curated articles on art, design, UX, and technology.
Muzli replaces your default Chrome tab and allows you to customize what you see there. Depending on your interests, Muzli will pick feeds for you, with websites ranging from Dribble and Behance to 99designs and Creative Bloq. Plenty of inspiration to scroll through while you’re sipping your first coffee!
If you think an entire browser tab packed with design content is too intense, Muzli also has a Lite version. It won’t override your default tab, and you’ll be able to access the feed whenever you like just by clicking the extension icon.
Install: Muzli 2
Get Chrome Extensions for All Your Design Tasks
The Chrome extensions on this list are no match for your design software, but they cover all the little things that come with being a designer—be it typography intel or collaborating with your colleagues.
Once you realize that the Chrome Web Store is brimming with tools, it can be hard to stop adding new ones. So learn how to manage your Chrome extensions before they get out of hand.
Read the full article: 7 Must-Have Chrome Extensions for Web Designers
from MakeUseOf https://ift.tt/2HaOhgj
via IFTTT
0 comments:
Post a Comment