Share your drawings with the Google Docs template gallery

Since the launch of Google Docs drawings, we’ve been excited to see you not only create really impressive and useful drawings, but also actively share them with the world. In order to make it easier for you to share your drawings, we’ve added drawings to the Google Docs template gallery. Sharing via the gallery gives you categories, ratings, and even usage counts for drawings you’ve submitted.

Here are a couple examples of drawing templates currently in the gallery:




Some other examples already available include a coin puzzle, a series of United States maps, a business model example, isometrics, a floor plan, and an interactive learning object.

Go check out the drawings in the gallery, and please submit your best drawings to the public, so that everyone can easily take advantage of your hard work. And, let us know if you’ve made something that will blow our minds, and you’d like us to feature your drawing here on the Google Docs blog.

Google drawings enhancements

Since we launched the new drawings editor, we’ve received lots of helpful feedback from you. Based on your comments, we’ve made some usability improvements to Google Docs drawings over the last week.
  • Selecting shapes
    • Press Alt (Option on Mac) and drag your mouse to select only those objects completely within the selection region (this is useful for selecting objects in a busy part of the diagram)

    • Holding Shift while you drag now adds shapes to your current selection instead of creating a new selection


  • Polyline improvements
    • When you finish drawing a polyline by clicking on the end of the last segment, you remain in polyline mode so you can immediately draw another one. Hit Escape to return to selection mode.
    • While drawing a polyline, press escape on your keyboard to cancel the last segment and return to selection mode
    • Draw very small segments in a polyline more easily
  • Word art
    • Add word art directly from the insert menu

Let us know if you have more feedback and ideas for improvements.

Rapid wireframe sketching in Google Docs

Guest post: Morten Just is a product manager in Vodafone. Based in Copenhagen, Denmark, he spent most of his career as an interaction designer churning out wireframes and diagrams, and also co-founded Imity, a Bluetooth-enabled social network for mobile phones in 2006. On his personal blog he writes mostly about user experience.

When I saw Google drawings on a Twitter update a few weeks ago, I didn't really think about it until I got a feeling I might not have understood a rather complex problem at work. I drew a diagram and asked my colleague to edit it in case I had misunderstood him. It worked out well, we're still using the drawing as a basis for discussion, and it is constantly being refined as we go along. So taking the next step and trying out a wireframe was an obvious decision.

For quite a while I’ve been wanting a simple and fast way to burst out interface ideas, and then quickly share them with my colleagues in Düsseldorf and London. Since a relatively large portion of a wireframe looks like something I’ve sketched out before, I figured modifying a template like a list view or a landing page would speed things up.

In fact, I wanted to speed it up to the point where I all I had to do was to add a few words before I had a wireframe.

From the templates I extracted the scroll bars, buttons, and sliders and put them in the gutter outside the drawing’s canvas, ready to be duplicated and dragged onto the wireframe.

Here's a generic page displaying product details:


... and a typical mobile phone drill-down of items in groups:


To begin working on a wireframe

  1. Open the template you want to use
  2. Click 'Sign in' in the upper right
  3. Choose file > make a copy
  4. Make your wireframe
Packing it up

When you have several individual wireframes it can be a neat thing to pack them all up into one single document that you can send around, have people print out, or even present in meetings.

Since there’s no way to import a drawing into a presentation yet, here’s a trick using the web clipboard feature. You'll still be able to edit the imported drawing should you need to.
  1. Go to File > New Presentation. A blank presentation opens in a new window.
  2. Switch back to your drawing and select everything.
  3. Click the web clipboard icon > Copy to web clipboard
  4. Switch back to your presentation and paste your drawing using the web clipboard.
Building the library

I'd love for this to be the beginning of a shared wireframe template repository in Google Docs. For now, I've shared a folder in which I'll add user contributed templates and stencils. Get in touch if you want to contribute.

I hope you'll enjoy the templates and that it will help you actually sketch out your ideas rather than just describe them in words. As Dan Roam said in his keynote at this year’s IA Summit, “The person who draws the picture wins."

Links

Introducing Google Docs drawings

As we announced yesterday, we just launched a new tool for making drawings in Google Docs. You can use Google Docs drawings to make charts, diagrams, designs, and more. We’ve been using this tool at Google to create everything from project timelines to launch plans. Here are some examples of what you could make:










Create a drawing now!

Many of you previously tried the Insert Drawing feature in Google Docs and said you wanted to be able to collaborate on drawings. We heard you, and collaboration is what this launch is about. The new drawing editor lets you share drawings just like you share spreadsheets, documents, and presentations. You can also simultaneously edit drawings with your friends and chat with them right in the editor. Here’s what we mean:



With drawings, you can insert text, shapes, arrows, scribbles, and add images from your hard drive or from the Web. You can also use alignment guides, snap to grid, and auto distribution to lay out drawings with precision.


Once you’ve perfected your drawing, use it pretty much anywhere -- copy and paste your drawings into other document types using the web clipboard and then make edits with the embedded drawing editor, publish them as images hosted by Google, insert them into other web pages, or download them as PNGs, JPGs, PDFs, and SVG. Note: the new Google documents editor doesn’t have support for drawings yet, but we’re working on it.

Already have a drawing in another Google doc that you want to share with others? Just use the web clipboard to copy and paste it into the new drawing editor.

Please note that if you want to edit your drawings in the new editor, you need a browser that supports the SVG standard, like the latest versions of Safari, Firefox, or Chrome, or to install Chrome Frame if you are using Internet Explorer. You can learn more about browser requirements here.

We’re excited to hear how you and your friends use Google Docs drawings. If you have a cool drawing, share the publish URLs in comments or tell us what you think in the forums.

A new Google Docs

They say a house is only as good as its foundation, and we believe the same holds true for web applications like Google Docs. With our old foundation, we could continue delivering most features you wanted quickly, but over time it became clear that some just weren’t possible. So we decided to rebuild the underlying infrastructure of Docs to give us greater flexibility, improved performance and a better platform for developing new features quickly.

Today, we’re pleased to announce preview versions of the new Google document and spreadsheet editors and a new standalone drawings editor, all built with an even greater focus on speed and collaboration. To get a taste of what’s new today, check out our video:



A better document editor
We’ve brought the responsive, real-time editing experience you’ve come to expect from our spreadsheets over to documents, which means you can now see character-by-character changes as other collaborators make edits. We also added another popular feature from spreadsheets: sidebar chat, so you can discuss documents as you work on them with colleagues.

The new technical foundation also helped us improve document formatting, which means better import/export fidelity, a revamped comment system, real margins and tab stops, and improved image layout within documents. These improvements have been highly requested, but previously impossible to create with the older documents editor on older browsers.

A faster spreadsheet editor
With the new spreadsheets editor, you’ll see significant speed and performance improvements -- spreadsheets load faster, are more responsive and scroll more seamlessly. We’ve also added a host of often requested features, like a formula bar for cell editing, auto-complete, drag and drop columns, and simpler navigation between sheets. And as always, real-time collaboration in spreadsheets is easy with sidebar chat and the ability to see which cell each person is editing.

A new collaborative drawing editor
In the year since we launched the Insert drawing tool, we’ve received many requests for the ability to collaborate on drawings and make them accessible directly from the docs list. The new standalone drawings editor lets you collaborate in real time on flow charts, designs, diagrams and other fun or business graphics. Copy these drawings into documents, spreadsheets and presentations using the web clipboard, or share and publish drawings just like other Google Docs.



Please note, these new editors are not compatible with Gears (the technology that powers offline access), so they do not have offline support today. However, we plan to bring back offline support in the future, taking advantage of new technologies like HTML5 and advancements in modern browsers.

The drawings editor will be available later today, and preview versions of spreadsheets and documents will roll out to all individual users over the next few days. To try them out, click “New version” at the top of any spreadsheet or go to the ‘Document Settings’ page and select ‘New version of Google documents.’ To learn more about using the new editors in your business, school or organization, check out the Google Enterprise blog.

We’re excited to take advantage of this new foundation to bring you even more new features in the future. Stay tuned for in-depth looks at Google documents, spreadsheets and drawings over the next few days on this blog.

Update (12:35 PM PST): Drawings are now available for everyone.

Update (2:46 PM PST): The "New version" link in spreadsheets is now available on docs.google.com.

Update (4:40 PM PST): The "New version of Google documents" setting is now available at http://docs.google.com/settings on the 'Editing' tab.

New features for drawings in Google Docs

We'd like to let you know about a few new features we added to drawings in Google Docs. Choose 'Insert Drawing' in any document, spreadsheet, or presentation to check them out.

Custom shapes and lines
You can now draw lines with multiple segments and create your own custom filled shapes. To try this, select 'Polyline' from the toolbar (to the right of the scribble tool). You can close shapes, fill them, and even move around points on a line by double-clicking the line.

We know many of you may be frustrated by the lack of ninja-related clip art in Google Docs presentations. Check out this example built with polylines:



Here is another example of a polyline.

And another.


Snap to Guides
When creating complex diagrams, drawings, and workflows, you usually want shapes to line up well, even when they're not right next to one another. Unfortunately, it's tricky to line up shapes by hand. Snap to Guides helps you align shapes with the canvas and with other shapes. This feature can be enabled by selecting 'Snap to Guides' from the edit menu.



Draw multiple lines
Finally, we made it easier to quickly draw a sequence of related lines. Now when you finish drawing a line, arrow, or scribble, you stay in line drawing mode so you can start a new line immediately. This new mode is always on, but you can return to the select tool by hitting escape or clicking the arrow on the toolbar.


Please let us know what you think on the help forum.

New flowchart shapes and multi-line text in drawings

We've just released two new improvements to the drawings in Google Docs. First, we made it easier for you to build flowcharts in drawings by adding 20 new shapes for standard flowchart components. Second, we made it possible for you to have more control over drawing text layout by supporting explicit line breaks in text boxes and text within shapes.

Try out these new features by going to any document, spreadsheet, or presentation, and inserting a drawing.

Drawing on your creativity in Docs


I'm excited to tell you about Insert Drawing, a new feature we've added to Google Docs. Now you can create and insert rich, colorful drawings into documents, presentations and spreadsheets, to illustrate your ideas or just for fun.

It's easy to create drawings using lines, free hand scribbles, text labels and a large choice of shapes that you can move, resize, rotate and adjust. Group, order, align and distribute and other features are available when you select objects you've drawn. You can also customize a range of shape properties, from line widths to fill color, and from arrowheads to font size, and much more. If you change your mind, there is undo and redo. You can collaborate with a friend or colleague on a drawing, or work alone, just as you can in Google Docs today.


The team and technology behind Insert Drawing originally came from the startup Tonic Systems, which Google acquired in 2007. The drawing feature that we've built relies heavily on a relatively new capability in browsers: the ability to render vector graphics. We use the SVG (scalable vector graphics) standard to accomplish this in most browsers and VML (vector markup language) where SVG is not available. Only recently has the performance and ubiquity of such technology enabled us to deliver what we hope is a delightful feature. As browsers continue to improve, we can deliver more and more useful cloud-based functionality.

As with any new feature, we'll be adding new capabilities over time. But even though we have our own to-do list, we'd love to hear about how you think we could improve drawings. You'll find Drawing within the Insert menu, so try it out and tell us what you think in our Help Forum.