Original graphic design by GCFLearnFree. Please visit their website for more free courses.
Replicated in Google Slides by Jennifer Scott to demonstrate how Google Slides can be used for graphic design.
GCFLearnFree.org inspired this lesson on Layout & Composition. Mimicking is the first step in learning. As such I used replicated the images in GCFLearn.org's video Beginning Graphic Design: Layout & Composition. Each image shown on this page was created in Google Slides to demonstrate a principle. You can view the work here.
- Watch the video Beginning Graphic Design: Layout & Composition.
- Pause the video after each principle of design and replicate one of GCFLearn.org's images to demonstrate the principle.
- Proximity 0:49-1:19
- White Space 1:20-1:55
- Alignment 1:56-2:46
- Contrast 2:47-3:16
- Hierarchy 3:17 -3:48
- Repetition 3:49-4:25
- Then select your favorite artwork to post on Twitter with the hashtag #SlidesYearbook.
The first principle in the video is proximity. To replicate the business card, use text boxes and duplicate 1 circle 3 times before adding images from The Noun Project or a Google image search with transparent backgrounds.
The Noun Project
- If you haven't already done so, install The Noun Project and then open it via the Add-ons menu.
- Search for Screen.
- Starter pack icons are free.
- A NounPro annual subscription opens all icons.
- Select the down arrow icon to insert the icon.
- Change the color and size as desired.
- Resize the image using the shortcuts.
- CTRL + ALT + j to decrease the object's size.
- Arrow keys to move the icon to the middle of a circle
- Shift arrow for 1/2 steps
Search for Images with Transparent Backgrounds
- Click on the insert image icon -> Search the web.
- Type name of the item and png.*
- png = portable network graphics
- these files typically have a checkerboard background which indicates transparency.
- Double click on the item to insert it.
- Select one or more images at a time.
- Don't forget shortcuts such as CTRL + ALT + j to decrease the image's size.
According to Graphic Design: Layout & Composition, getting alignment right can be tricky. Unlike Microsoft Publisher, Google Slides does not have guidelines. This can be remedied with Chrome extensions and grid background images. You will learn more about this in Grid lines later in this Design section.
Insert Grid Background
- Select Background.
- Click Image Choose . . .
- Find and Select the grid of your choice.
- Click on Done.
The drawing of the monkey was created in Google slides using 9 circles of various sizes, 1 scribble line, 2 curve lines, 1 rectangle, 1 rounded rectangle, and four lines. Objects were grouped together, duplicated, repositioned, and flipped.
Copy/Paste & Flip Objects
- Select the object and duplicate it using the shortcuts CTRL + c and CTRL + v.
- After moving the object to the desired location, right-click (2-finger touch on a Chromebook).
- Select Rotate -> Flip horizontally (or vertically).
- Adjust the position of the object using arrow and shift arrow.
Websites
- 20 Design Rules You Should Never Break by Mary Stribley
- Design Tips by Fusion Yearbooks
Resources
- The Noun Project Google Slides Add-on
- This add-on has some free icons, such as a screen and arrow. Access to more icons requires a paid subscription.
- Colorzilla Chrome extension (to be discussed in Color Theory section)
- Google Slides Shortcuts
Continue...
Now that you know the graphic design fundamentals, layout and composition, let's move on to color.