Top 19 Creative Google Chrome Tools for Designers
Today, we are sharing 19 Creative Google Chrome tools you can use to help you everyday as a designer professional. You probably use a few tools already in your Chrome Browser and you know how useful can be to have the right tool anytime you need it.
The easiest way to create CSS Buttons – No coding required
CSS Button Generator will create beautiful css buttons for you to use on your web pages without the need for any images. When you have styled your button to your liking, simply click on the generated button to get your css style code.
Clue is a fun and easy way to test what people remember on your website. Made by ZURB.
Clue is a tool that creates super-fast memory tests based on screenshots of webpages, then lets you see the results. It’s perfect for capturing that all important first-impression of a website.
Why use Clue?
Think about your attention span when you first see a webpage. Are your visitors seeing the correct calls to action? What is their first impression of your site? Are your images conveying value to your first time visitor? This 5 second test app helps you figure this out.
Try it yourself: Click on a page you’ve never visited. Count to 5. Then close your eyes. What do you remember? Did anything catch your eye? If it didn’t in the first 5 ½ seconds (or even the first 2 or 3 seconds), you probably would’ve bolted. Now think about people visiting your website. Does the same thing happen?
How to use Clue
1. Grab a screenshot: Type in a URL and click the “Start Memory Test” button.
2. Share your test: Copy the link to your test and post it to Facebook, Twitter, your blog — or email it to your contacts for a really direct approach.
3. Clue in to your results: Access your results link to see what people remembered about your page.
Build layer styles in the browser
What is CSS-Shack?
CSS-Shack allows you to create Layers Styles (just like you would in any other image editing software), and export them into a single CSS file, or copy them to the clipboard.
Optimal Chrome version: Stable (26)
Where can I use it?
You can create website designs, mockups or just simple button. CSS-Shack is the right tool for the job.
– Fully CSS3 compatible
– Images support
– 11 filters
– Works offline
Mobile app prototyping
Fluid UI is a mobile app prototyping tool. It is fast, user friendly and very intuitive.
Why Fluid UI?
It has been designed from the ground up with one aim, to save you time and money when UI prototyping / wireframing and gathering requirements. Create everything from low fidelity wireframes to high fidelity prototypes. Rapidly see and interact with them on a mobile device to aid testing and design. Create your free account today, you will not be disappointed.
How does it work?
As with all creative tools, you start with a blank canvas. Simply double click to create a page. Within the page settings select the device you are prototyping to change the page size or choose the custom option to input your own dimensions. Currently supports iPhone, iPad, Android, Android tablet and Windows 8.
The editor begins in wireframe mode, other libraries containing over 1000+ widgets can be browsed and added to your pages through the drag and drop interface. Position everything where you please within each page. You can edit most widgets, allowing you to change dimensions, text fields, color and more.
Pages and widgets can easily be brought to life by linking them to other pages within your prototype. Choose the link menu to alter the transition or gesture involved. Gestures supported include tap, tap & hold, double tap and swipes – left, right, up, down. Use these to allow your clients to experience a true native app look and feel from your prototypes.
You can also upload your own images allowing you to create high fidelity personalized mockups. Add your clients logos, images and backgrounds. This also enables users who have premade screenshots to add them to the interface. You can then add invisible hotspots and link any area of the page, thus bringing your screenshots to life. With one click you can then test them on a mobile device.
CSS3 gradient generator. Drag & Drop GIMP .GGR files into your browser to view them! Export your gradient into CSS or SVG.
ColRD gradient creator presents itself as color blocks—just like a palette.
Inside each color block you will find the midpoint controller—these controllers allow you to stretch the color towards the left or the right of the block.
To the left and right of the color block are col-resize controllers—these allow you to scale the width of the color block and the adjacent one.
Color blocks can be reorganized by dragging and dropping, without rescaling the color block or the ones around it.
If you drag and drop a color block onto the Color Picker, the color will be removed from your gradient (re-absorbed into color space!).
– Drag & Drop GIMP Gradient (.GGR) files into the browser to view them!
– Delta Swatch: Shows the colors most similar to the one you’re choosing of the 4096 websmart colors (in CIE-Lab color space).
– Keyboard goodness with Color Picker: HSL, RGB, and HEX chooser.
– Preview: See your gradient in full-screen mode before you save it.
– Flip: Flip your gradient, so: first is last, and last is first.
Create HTML animations that look great on mobile, desktop and tablets.
Animations created with our tool will play on any device, in any browser. They work on iPhone, iPad, Android, and in all browsers – even Internet Explorer 6!
Move, fade, rotate and scale text and images with ease, and add effects like bounce and slow-motion.
Add a click-through URL to your animation and use TweenUI as a banner maker to create display ads that run in all browsers on all devices.
Download animations for free!
Publish animations marked with “Powered by TweenUI” directly to the cloud for free!
CSS3 generator is a free online tool to experiment with CSS3 properties and generate the stylesheet.
CSS3 is the updated version of CSS. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and more. With this tool you can generate the CSS3 and download the style sheet.
What’s New In CSS3?
Color Picker gives you the ability to pick accurate colors for your jobs, and give you the exact color number that you can use in…
Are you into web design? Or maybe you into Photoshop, either way you got to the right place.
Color Picker is the ultimate tool for people who work on Photoshop or do web design! It gives you the ability to pick accurate colors for your job, and give you the exact color number that you can use in any design software you which to use.
Most people who work with Color Picker are web designer, it consider being useful and important tool for web designers. When you working on building a website, you can play with the colors you wish to use for the site on this amazing 100% FREE app, pick the color number from the app, and use it in the CSS file.
Color Picker makes web designers life easier; don’t change the website colors over and over again until you get the results you’re looking for, just use Color Picker to pick the exact color you need for the website you’re working on.
Color Picker is 100% FREE app, and you can use it as much as you want! Have fun!
Create, edit and share mind maps online. Also works with Google Drive!
The leading online mind mapping application, MindMeister allows your team to be more innovative by providing a shared collaboration and brainstorming environment on the web. Plan projects, manage meetings and sketch out business plans online with partners and colleagues, all in real time!
– Brainstorm online with your team
– Create project outlines within minutes
– Increase innovation and creativity
MindMeister is deeply integrated into Google Drive, allowing users to open and edit many mind map formats such as MindManager, Freemind and XMind directly from your Google Drive, and even sync their entire maps list.
– Create, share and collaboratively edit mind maps
– Import from Text, MindManager and Freemind
– Export to Word, PowerPoint, PDF, image, MindManager and Freemind
– Add icons, images, notes, links and attachments
– Integrated live chat
– Publish and embed maps
– Task management and notifications
– Offline editing and syncing
– Unlimited undo history and replay
– SSL encryption, automatic backups
– Applications for Android, iPhone and iPad
GOOGLE DRIVE INTEGRATION:
– Open, view and edit mind map files from Google Drive
– Supported formats: MindManager, Freemind and XMind, MindMeister
– Synchronize entire maps list (incl folders) with Google Drive
– Synchronize single maps with Google Drive
– Add attachments from Google Drive
– Share mind maps with your Google contacts
– Export maps to Google Drive as image, text, PDF, and many other formats
– Bulk-export all maps to Drive for backup
– Collaborate in real-time on Drive maps
– Project planning
– Task lists / GTD
– Account management
– Prepare and conduct meetings
– Competitive Analysis / SWOT
– Event Preparation
– Website Planning
– Innovation / Change Management
– Problem Solving
– Note taking
Ever fire up Photoshop just to multiply a couple of colors? No more. Blend colors with different modes like multiply, overlay, dodge, within the convenience of your browser.
Now with colorpickers.
This app is a native Chrome App which works offline, not a bookmark.
Browse vector icons to download them or make a font/icon-font. You can import your own vectors too.
IcoMoon is an icon font generator. This app comes with over 3800 FREE vector icons. You can access these icons even when you’re offline. This app allows you to easily search and browse icons to download them (in SVG & PNG) or use them to build custom icon fonts. An icon font is a font that has symbols/icons as its glyphs. Using this app, you can also import your own vector images to use them in your font. This tool generates all the necessary web font formats (WOFF, TTF, SVG, and EOT). The SVG font can be imported back to the app.
By choosing only the icons that you need, you can generate small and optimized fonts that would load quickly.
This app can also generate CSS sprites for you, in any size and color you choose, in both SVG and PNG formats.
Create interactive banners, slideshows, HTML content layouts, links, menus, text effects & more for your website.
NodeFire is an interactive focused HTML animator.
Visually style animations and advanced widget effects for your website. NodeFire is perfect for designing ad banners, slideshows, product displays, navigation menus, HTML layouts, text effects, transitions, and much more.
Visual Collaboration for Creative People
Mural.ly is a collaboration suite that enables creative teams to work better together.
We want to enable visual people to shape their ideas together, fully unleashing their imagination without getting in the way of their flow.
Murals are online zoomable walls with web content (videos, links, photos, and more) used to visualize, think of, imagine, show and discuss ideas. From anywhere, anytime.
Its very simple to collect content from any online source, author the space freely with text, shapes and sticky notes… and also have threaded converstions with your team.
More than 60,000 product shapers, storytellers, creatives and innovators from 161 countries are using Mural.ly to:
– Visually distill and enhance a creative brief by mapping research. Designers, copywriters and everyone else on the same page (wall).
– Understand complex problems by mapping problems using the Business Model Canvas, an Empathy map or other think spaces.
– Shape products by gathering inspiration from the web and on the go. Live drafts of ideas start to get iterated online.
– Get the best (visual) ideas from teams, wherever and whenever they might be. Ideation with no interruptions.
– Design moodboards, storyboards and other visual aids to help shape ideas.
– Discuss on the spot and iterate ideas visually.
Dropbox, Evernote, Pinterest, Tumblr, Google Drive, Slideshare, Youtube, Vimeo, Soundcloud, Flickr, Instagram and more.
Documents (pdf, xls, doc, ppt)
Images (jpegs pngs, gifs, psd)
Links (any link to any web site)
ZIP and RAR files
The best HTML5 app for creating crisp mockups, wireframes & interactive prototypes.
Achieve flow with our web app for creating mockups, wireframes and interactive prototypes that look great onscreen and on paper thanks to the Scalable Vector Graphics (SVG) technology.
Moqups lives on the web and is a child of open standards. We strive to create the best experience modern web browsers can offer.
* Choose from 60+ handcrafted, crisp SVG stencils;
* Export as PDF (vectors) or PNG (pixels);
* Connect your Dropbox & Google Drive accounts;
* Upload your designs as images, from which you can create interactive prototypes with links & hotspots;
* Achieve maximum flow with powerful keyboard shortcuts that you’re familiar with from the get-go;
* Share your projects by email;
* Use the comprehensive icon library;
* Sleep better at night with secure SSL communication for everything.
Web’s Best Image Editor – Hands down!
Sumo Paint is a full featured painting and image editing application featuring an active art community of over 500 000 registered members and over 1 500 000 images.
The app has the web’s most versatile collection of image editing features blurring the line between desktop applications like Photoshop or Gimp.
Sumo Paint features:
Layers with undo support:
– 11 Blending modes
– Duplicate, merge and flatten layers
– Rotate and Flip
– Zoom and Pan
Layers with classic Layer Effects:
– Drop Shadow
– Inner Shadow
– Outer Glow
– Inner Glow
– Color Overlay
– Gradient Bevel
– Gradient Glow
37 Filters and effects in the following categories:
– 3D Effects
– Edge Detection
– Light Effects
Make information beautiful using Piktochart | Create infographics today
Piktochart Infographics: Make Information Beautiful
Piktochart is a web application that helps non designers create infographics.
We want to enable people to create infographics without the need of learning softwares such as Photoshop and Illustrator. Piktochart provides the flexibility of customizing the content and look/feel of the infographic.
It is really simple to create an infographic on Piktochart:
– Select 1 out of 100+ professionally designed themes (Pro version)
– Customize the text, graphics, charts, color scheme of the infographic
– Save and publish to social networks or download as an image
Some other features:
– Interactive charts
– HTML output (hyperlinking) and image download
– Friendly user interface
More than 300,000 users have used Piktochart to:
– Create engaging marketing/sales/annual reports
– Creatively present concepts in the classroom/projects
– Attract inbound traffic using infographics instead of blogs
Easily drag and drop your mockup screenshots into realistic mobile and desktop environments.
With PlaceIt it is now easier than ever to generate screenshots of your mockups while displaying them in real world digital environments such as a mobile phone, tablet or desktop. All you have to do is drag and drop a local image onto the selected environment and let the app do the rest. Then simply right click and “save as” or drag the image onto your images folder.
Use PlaceIt for:
* Product presentations
* App presentations
* Product screenshots
* App screenshots
Create animations by collaborating with everyone on the web.
Create and collaborate on short animations directly within your web browser.
This Exquisite Forest is an online collaborative art project that lets users create short animations that build off one another as they explore a specific theme. The result is a collection of branching narratives resembling trees.
A physical installation is located in the collection galleries on Level 3 at Tate Modern in London, UK, and will be open for approximately one year beginning in July 2012.
Balsamiq Mockups for Google Drive allows you to create, edit and share sketch-quality wireframes, all within Drive.
Balsamiq Mockups is the easiest, fastest, most fun, best supported wireframing tool on the Internet (ask anyone).
The integration with Google Drive is pretty slick: you can create new mockups directly from the “Create New” menu, or edit wireframes just by clicking on them, all within the browser.
When the 30-day fully functional trial expires, you and your collaborators will still be able to open and edit mockups, just not save them. To do so, you have to sign up to either a no-risk $5/month or a $50/year subscription plan. You can stop and restart your subscription at any time, too!