04.09.2019

How To Cut Part Of An Image In Google Drawing

How To Cut Part Of An Image In Google Drawing Rating: 8,7/10 2207 reviews

Did you ever click the bright red “New” button inside your Google Drive?

Google Drawings isn’t at the forefront of tools. The limelight is reserved for Docs, Sheets, and Slides. But let’s do a reawakening of sorts and click on More to go to the “neglected” siblings. We have seen the usefulness of Google FormsTrack Key Areas of Your Life In 1-Minute with Google FormsTrack Key Areas of Your Life In 1-Minute with Google FormsIt is amazing what you can learn about yourself when you take the time to pay attention to your daily habits and behaviors. Use the versatile Google Forms to track your progress with important goals.Read More. It’s time to appreciate the versatility of Google Drawings.

Google Drawings is the freshest among all Google Drive tools. It is not a full-blown image editor like MS PaintHow to Edit & Enhance Screenshots in MS PaintHow to Edit & Enhance Screenshots in MS PaintRead More. But the graphic editor is more powerful for one simple fact – it is a real-time collaborative application. At its most basic, it is an online whiteboard. At its most advanced it can be more if you allow Joshua Pomeroy to change your mind about its limits.

There are so many ways to effectively use Google Docs or Slides that enhance student learning, and Google Drawings is no exception. What I love most about Google Drawings is that it allows students to work directly on an image. Students can circle, highlight, crop, draw arrows and write on the image of their choice. I have no idea how to cut a rectangle image from other big image. Let's say there is 300 x 600 image.png. I want just to cut a rectangle with X: 10 Y 20, with 200, height 100 and save it into other file. How I can do it in C#?

That’s just one. Find more inspiration in his YouTube Playlist.

Now, that we have got the limitations of Google Drawings out of the way, let’s look at a few more creative uses. Because not all of us are blessed with Joshua’s skills.

Use It for Collaborative Post-It Notes

Think of Google Drawings as an universal whiteboard for sticking Post-It notes. When you begin, it need not even be a collaborative project. Start your own – and then share your thoughts with others using a URL. The above virtual Post-It note was created in 5 minutes using Shapes, Google Fonts, and an image search for the “pin”. All within Google Drawings.

How To Change Transparency In Google Drawings

When you can’t be at the same place, a quick Google Drawings share coupled with a Hangouts chat is an easy solution. Anyone in the team can add comments and other Post-It notes to the virtual office wall.

Create Your Own Graphic Organizers

Graphic organizers are diagrams that help organize information visually. Some of the varieties are called concept maps, entity relationship charts, and mind maps. With the help of one, you can have a bird’s eye view of your thoughts. For instance, a spider diagram can be used to group ideas, a flow chart can be useful for sequencing a process, and a fishbone diagram can be used to show cause and effect.

Use the library of templates to take a shortcut (e.g. a flowchart template) or create your own from scratch. Google Drawings has the shapes, colors, and fonts to help you create memorable spatial structures quickly. The above diagram is a simple spider diagram illustrating the shortcuts you can use to create a graphic organizer.

This webinar by Eric Curts shows you the options you can explore in Google Drawings for your custom needs.

Design an Infographic

You might not create the next viral infographic10 Of The Best Tools For Creating Infographics10 Of The Best Tools For Creating InfographicsThe history of this visual science (or art) and tells us that infographics is by no means an invention of the digital culture. The only difference between then and now is the amount of information...Read More with Google Drawings. But if you have an idea and the data to back it up, you are on your way to impress your boss. These two key ingredients can be supported with shapes, images, text, charts, graphs, tables, and colors to create the visual impact. Hyperlink your data to external resources to create a more dynamic infographic. Here are the basic first steps.

  1. Start by researching the data that will go into the infographic.
  2. Resize the Drawings canvas to a long rectangle as they are usually vertically oriented. Alternatively, go to File > PageSetup and enter the dimensions.
  3. Use a background color or find free textures10 Websites for Finding Free Photoshop Textures10 Websites for Finding Free Photoshop TexturesTextures are crucial in everything from graphic design to web design, from poster art to architectural visualizations, from 3D animations to computer games. Here's where you can find some free textures to use!Read More to use for the background. Go to Insert > Image to upload the texture file. Resize the texture to fit the background. You can also set a background color (Right Click > Background).
  4. Create your graphics by combining different shapes and grouping them together. You can create the shapes off-stage and then drag them into the canvas. Grouped graphics can be custom colored with a single click.

Note: Google Drawings includes Snap to grid and Snap to guides. Align objects and draw them to the same size with better precision. Go to View > Snap To > Grids / Guides.

Step-by-step instructions on creating infographics is outside the scope of this article, but here’s a starter video for guidance.

Make Custom Graphics for Google Docs, Sheets, or Slides

This is perhaps the most obvious use of Google Drawings. As a sibling, it is the most accessible tool for inserting custom graphics into your Google Drive documents via the Web Clipboard. Here are a few creative ways you can use Drawings:

Create your own Clipart Library. Make your own reusable batch of clipart. Source images with Google Search and modify them in Google Drawings.

Create your own picture bullets. Create unique vector bullets with Shapes. The “Lightbulb” bullet below was made by combining shapes and a callout. You can also tweak a minimalist raster image and use it as a bullet.

Create a custom signature. Customize your digital signature in Google Drawings. Group all the elements into a single graphic and use it in Drive documents or Gmail.

Do Note: Copying a drawing to a different file creates a copy of the original drawing. Edits made to either the original or the copy do not automatically apply to the other.

Screen Design with Wireframes

WireframesWhat Is a Website Wireframe & How Can It Help You Develop Your Website?What Is a Website Wireframe & How Can It Help You Develop Your Website?On a technical level, a modern website isn’t just one thing. It’s a complex soup of interacting technologies, such as HTML (the markup you see on the page), JavaScript (the language running in your browser,...Read More are blueprints for any screen designs. Think simple shapes without any color or frills. They help the designers focus on how content will be laid out or how a prototype design will function. There are a dime and a dozen wireframing tools10 Easy & Quick Online Mockup Tools That Help You Imagine Anything10 Easy & Quick Online Mockup Tools That Help You Imagine AnythingMake the best use of instant-creation technologies, with your own mock-up designs. Mock-ups help evaluate, fix flaws, and tweak designs before creating them. Design just about anything with these tools.Read More, so you will be spoilt for choice. But for simplicity, collaboration, and accessibility Google Drawings can step up to the plate. Google Drive gives you a few readymade wireframe templates.

You can just as easily create your own wireframing kit with Google Drawings. The wireframing kit can be made up of the basic starting blocks you need for any design. Leave the elements in the gutter (the space next to the canvas) for quick reuse on any new project.

This 15-minute video gives you an idea of the process:

Understand Relationships with Database Schemas

Using Google Drawings to plot database schemas is not my original idea. The Web Development Group demonstrates this simple hack. Database schemas are logical grouping of objects such as tables, views, stored procedures etc. It describes how a database is structured and the relationships between the objects it holds.

Think of a database schema like a roadmap: it lays out the overall process, visually demonstrating where information is coming from and where it is going.

Google Drawings can be used to show entity relationships. Couple it with real-time collaboration and you get a useful tool for creating schemas.

Annotating Screenshots

Annotating images help to describe what an image is all about. In a time when everything is so graphic, annotation also works as a tool for visual “storytelling.” Again, you can choose from a wealth of web annotation tools. Google Drawings is one that’s close by for any image commentary.

Annotating an image in Google Drawings is simple with the variety of tools on offer.

  1. Use Print Screen to take a screenshot (or upload an image directly to Google Drawings).
  2. Use the Crop tool (Format > Crop Image) on the toolbar to isolate the section you would like to show.
  3. Use the Shape and Line tools to highlight the points on the image.
  4. Google Drawings has a variety of shapes and arrowheads to help you stylize the annotations.
  5. Insert text annotations (with the Text Box) and format with font style and size. Also, try Shapes > Callouts.
  6. Go to Format > Image Options for any color corrections.
  7. Go to File > Download as for the finished PNG or JPEG file. You can also share the annotated image via Google Drive.

Create Hotspots on Images

Think of a world map. Clicking each country takes you to the Wikipedia page with all the details.

Think of an idea. Explain it better by breaking down the idea and linking its part to more external data.

With the help of an image map or hotspots, you can convey a lot of information with just a single photo or drawing. Guess what! Google Drawings helps you easily craft neat image maps without any knowledge of HTML. And quickly, too.

Insert or draw an image on a blank Google Drawings canvas.

  1. Go to Insert > Line > Polyline. Use the Polyline tool to draw around the clickable area.
  2. Go to Insert > Link (or Ctrl + K) and add the external webpage or another Google Drive document to the hyperlink box.
  3. Make the bounding polygonal area vanish by setting Shape and Line color to transparent.
  4. Share the Drawing, embed it in your blog, or download it as a PDF file.

Watch Chris Betcher use a Google Drawing for an image map of his team:

How To Cut Out An Image In Google Drawings

A Canvas For Your Ideas

Like any other drawings tool, only your ideas can explore the limits of Google Drawings. From explaining multi-step processes to brainstorming collaboratively, Google Drive’s much neglected family member could be your favorite foot soldier for everyday tasks. Tools like Microsoft Visio might be more convenient for more complex charting jobs, but few tools can beat Google Drawings at its most unique selling points – real-time collaboration and the fantastic price of free.

As a chess lover, I can’t help but think – is it possible to create a real-time chess game with Google Drawings? Or an interactive visual resumeHow to Make a Visual Resume with PowerPoint in 3 StepsHow to Make a Visual Resume with PowerPoint in 3 StepsRead More with graphics, text, and hotspots? See where my wild thought took me!

So, tell me yours. Do you use Google Drawings? What are the creative uses you can think of putting Google’s fledgling tool to?

Explore more about: Digital Document, Drawing Software, Google Drive.

  1. Just wondering. What are things that can be done in Google Drawing that can't be done in Slides.

    I prefer to use Slides because it can have multiple pages in 1 doc. Useful when want to collect a few drawings in as a doc. As a result, I just create everything in Slides.

  2. Great stuff. I've been using Drawings for several years now, creating a new, iterative 'server room diagram' each year to show changes. At first, I was just creating a visual mimic of data I have over in a Sheet (not so pretty to look at). Recently I started including imported charts into my diagram, and the best part is that they stay live and updatable within my Drawing (!!). I've been manually recreating the server data numbers from my Sheet into my diagram, which is laborious and prone to human data-entry type errors. Do you know if there is a way to import live cells of data from my Sheet into my Drawing like I can import live charts? Seems reasonable that if you can do one, there might just be a pathway to doing the other... Thoughts? Thanks, //

  3. Now, if only I could add the Google Drawings into Google Forms. (Drawings, not images... Drawings!)

  4. Joshua's work in Google Drawings is simply amazing.

  5. Hello Saikat Basu,

    I thought you may add this small trick one to your list (in keeping with your theme of Google Drawings being the little known gem in Google Drive).

    You can insert a functional video into a Google Drawing

    Step #1 - Create a Slideshow using Google Slides
    Step #2 - Insert a VIDEO of your choice
    Step #3 - Copy the Video
    Step #4 - Paste in into your Drawing

    It works! If you download as a .pdf, the video turns into an image that links to the YouTube page.

    Enjoy

As educators and students we use images all of the time in the projects we create. Most of the time any picture will do, but sometimes we're looking for an image with a special quality… transparency.
A transparent image is a picture where some part of the image is see-through, like the image has been cut out. This is useful because transparent images look much better when combined with other images, allowing you see the background or other items behind the picture.
Pictures with transparency can be used in lots of fun educational activities. In this post we will take a look at ways to find as well as create your own transparent images. We will also look at practical uses for these images in student projects.
1) Finding transparent images with Google image search
One way to find transparent images if you use the advanced features in the Google image search. Here's how
  • Go to Google image search as usual at https://images.google.com
  • Type in your search term and run your search as normal.
  • After you get your results, click on 'Tools' in the top menu to see the advanced search options.
  • In the 'Color' drop down menu choose the option for 'Transparent'.
  • The results you get now will be images that have a transparent portion.
  • Click on any image to view it with its transparency, which will display as a checkerboard pattern.
  • You can download the picture by right clicking on the image and choosing 'Save image as'
  • Or you can copy the link to the picture by right clicking on the image and choosing 'Copy image address'.
  • Or you can simply drag and drop the image into another program such as Google Docs, Slides, or Drawings.

Note: As always be sure that you have permission to use the image and that you cite it properly.
2) Find transparent images on the 'No Backs' website
Another great source to search for and find transparent images is the 'No BacksHow to cut an image in google docs' website. This is a website dedicated to collecting and organizing totally free images that have transparent backgrounds. Here's how to use the site:
  • You can access the website at http://nobacks.com
  • Once there you can run a search for the image you want.
  • Or you can browse through the categories such as Animals, Food, Nature, Objects, People, and more.
  • When you find an image you want, you can download it, copy its address, or drag and drop it just like explained in the section above.


3) Create your own transparent images with Google Drawings
Instead of searching for images, you can create your own transparent pictures. One way to do this is with Google drawings.
  • Make a new Google Drawing by going to Google Drive, clicking the 'New' button, clicking 'More', and then finally choosing 'Google Drawings'.
  • When the drawing opens up you will notice the background has a checkerboard pattern. This means that it is transparent.
  • You can now insert anything you want onto the canvas through the 'Insert' menu.
  • This can include other images, shapes, text boxes, word art, lines and arrows, and more.
  • Note: For more detailed directions see my help guide 'Using Google Drawings'.

When done you can download the image.
  • Click 'File', then 'Download as', then choose 'PNG image'.
  • The PNG image format support transparency, so everything with the checkerboard pattern in the drawing will be saved as transparent.
  • Note: JPG images do not support transparency,

4) Remove background with Lunapic to make a transparent image
Another way to make a transparent image is to take a picture you already have and remove parts of the image such as the background. For example students could take a picture they are in and remove everything except for themselves. One tool for doing this is the free image editing website called Lunapic.
Note: Although this process can be done with any image it will be much easier if the background is all one solid color so that it is easy to distinguish from the rest of the image. You can do this by taking pictures of a student standing in front of a green screen which can be made from a simple blanket, sheet, or painted wall.
  • Go to the Lunapic website at https://www167.lunapic.com/editor/
  • Click 'Upload' in the toolbar.
  • Next click 'Choose File' to upload your original photo.
  • When your image loads, click 'Edit' in the top menu bar, and then choose 'Magic Wand' from the drop down menu.
  • Now click anywhere in the background of the photo and Lunapic will select a portion of the background based on the color.
  • Next click the 'Cutout' button to remove the selected area of the background and replace it with transparency.
  • If some areas of the background are still left, click 'Crop Another Area' and repeat the process as many times as needed to remove all of the background.
  • Note: If too much or two little gets removed you can undo the operation and then make an adjustment to the 'Threshold' setting.


When done you can click 'Save' below the image to save your edited picture with its transparent background.
(Image credit: PictureYouth)
Uses for transparent images in learning
Because transparent images don't have a background they can be used to make products that look cleaner and more professional. For example, they could be used in Google slides for a regular presentation, stop motion animation, eBooks, comic strips, and more. Or they can be used in Google drawing for posters, interactive images, graphic organizers, and more. They could even be used in Google Sites on student web pages.
One specific fun activity you can do with transparent images is creating compilation pictures. This is where you take a background image to serve as a setting and then insert a new image on top of it to make it look like it is all one image.
For example, a student could put a picture of themselves into an event from history, a location in a foreign country, the setting of a book, or even a famous work of art.
If using Google Slides or Google Drawing the student can also insert a speech bubble to share information about the scene. Simply click 'Insert', then 'Shape', then 'Callouts'.

For historical photos, you can adjust the colors of your image in Google Drawings to make it match better. Simply click on your transparent image, then click 'Format options' in the toolbar. You can now 'Recolor' the image, as well as adjust the 'Brightness' and 'Contrast'.
Conclusion
There are many sources for finding images with transparency, as well as lots of ways to create your own. These images can be used to make presentations, graphics, and websites look better and more professional. They can also be incorporated into a wide range of creative projects using Google Slides and Drawings.
If you have other ideas for how to use transparent images, or have examples of students creations you would like to share, please do so in the comments below.
Post by Eric Curts. Bring me to your school, organization, or conference with over 50 PD sessions to choose from. Connect with me on Twitter at twitter.com/ericcurts and on Google+ at plus.google.com/+EricCurts1