How to Create Animated Vector Icons in Adobe Illustrator and Photoshop

Size: px
Start display at page:

Download "How to Create Animated Vector Icons in Adobe Illustrator and Photoshop"

Transcription

1 How to Create Animated Vector Icons in Adobe Illustrator and Photoshop by Mary Winkler (Illustrator CC) What You'll Be Creating Animating vector icons and designs is made easy with Adobe Illustrator and Adobe Photoshop. Simply create simple flat icons and import them into Photoshop for easy GIF creation. We'll create three animated icons and explore a couple techniques for creating smooth, easy animations. *As this is a REVIEW of two previous lessons, it is expected that you use this guide to animate each and all of your created icons for your My Site project! 1. Draw the Envelope Step 1 Create a New Document in Adobe Illustrator. I'll be using Adobe Illustrator CC, but you can easily adapt these techniques and designs to earlier versions. With the Rectangle Tool (M), draw a light-blue rectangle. Select the bottom two anchor points with the Direct Selection Tool (A), and pull the Live Corners inward to round out those two corners. Use the Pen Tool (P) to draw a stroked line in medium blue that defines the opening of the envelope. Step 2 Draw two lines either with the Pen Tool or the Line Segment Tool (/) that meet near the center of the envelope. Expand your strokes under Object, and use the Shape Builder Tool (Shift-M) to select the non-intersecting portions of the lines from the rectangle in order to delete them. This is our basic envelope object. Step 3 Copy (Control-C) and Paste (Control-V) the envelope design. Draw a triangle from top corner to top corner for the opening of the envelope. Select the triangle while holding down Alt, and drag out a duplicate of the triangle. Rotate (R) it around to create the opening of the envelope, and set the fill color to a darker blue. For the sake of this demonstration my lines are missing from the design below, but will be used in the final version.

2 Step 4 Now you should have two envelopes: one open and one closed. Our goal is to create several iterations of envelopes that bridge the gap between the closed envelope and the open envelope for our final animation. Group (Control-G) together each of your envelope's components. 2. Create Different Forms of the Envelope Step 1 Duplicate the open envelope. Use the Direct Selection Tool to grab the top triangle's top anchor point and drag it downward until it almost completely covers the dark triangle. Duplicate this envelope group and pull the lighter triangle's lower point upward a bit so the envelope looks like it's opening more. We'll continue duplicating each envelope and moving the triangle upward until it's back to the starting point again.

3 Step 2 In the end, including the closed and open envelopes, I have nine envelopes for my animated icon. You can check out the placement of the triangles and their anchor points below. Make sure each envelope is grouped separately so they'll be easy to import into Adobe Photoshop later. 3. Create the Letter Step 1 Draw a light-yellow rectangle and Copy and Paste it over each envelope. The goal is to have the rectangle move upward in even increments as it's opening. I decided to go with seven rectangles total for my design.

4 Step 2 Select the first envelope and its overlapping rectangle. Using the Shape Builder Tool, select the portion of the yellow rectangle that intersects with the inside of the envelope. Delete the non-intersecting portion of the yellow rectangle so you're only left with a small triangle of the yellow rectangle. Repeat this technique on the other envelopes. Step 3 Continue defining the yellow letter shape for each envelope. You can see what my letters look like with their corresponding envelope below.

5 Step 4 Draw several thin rectangles to simulate lines written on the letter. Alignand Distribute the rectangles in the Align panel. Then, Unite them in the Pathfinder panel. Step 5 Place multiple sets of rectangles over each envelope. Note how some letters show more lines than others. I've placed sets of rectangles on six of my nine envelopes.

6 Step 6 Select the letter shape and the rectangles. Using the Shape Builder Tool, select the non-intersecting portion of each rectangle and delete them. Repeat step this for all of your envelopes. Step 7 Group together each envelope and its components so you have nine separate groups in total. Now we're ready to animate our design!

7 4. Animate the Envelope Step 1 Open Adobe Photoshop and create a New Document. Since we're creating a simple web graphic, I've set my document size at 72 dpi (no reason for a higher resolution since we're not printing our artwork), 250 px width, and 300 px height. You can create a larger or smaller file if you wish, and also crop your document whenever you need to do so. ^^ This part is UP TO YOU! Your created icons have their own dimensions already. Realize that you will be adding this into your My Site webpage / full site! In Adobe Illustrator, Copy each envelope group and Paste them into your Adobe Photoshop document. If you want to resize your image without a loss in quality, paste each group in as a Smart Object. If you're happy with the size, Paste them into a new layer as Pixels.

8 Step 2 Make sure each object is layered sequentially. Additionally, you'll want to select all nine layers and Align them to their centers and bottom edges. Step 3 Open the Timeline panel and create a New Frame Animation. Starting with the closed envelope layer (hide the others), create a New Frame and set the frame's delay to 0.1 second. For each frame, unhide the next layer and hide the previous layer until the envelope is open. Then, set the delay at seconds. Repeat unhiding and hiding layers, but this time go in reverse order so the envelope is closing again. Make sure it's looped "Forever" so the animation keeps opening and closing. Step 4 Sit back and hit Play on the Timeline panel to watch your gif loop. You can adjust your frame delays for a slower or faster gif as well as change how long the closed or open envelope is seen in the Timeline panel. Let's move on to the other icons and additional techniques for animating.

9 5. Draw a Chat Icon Step 1 Back in Adobe Illustrator, either in a new document or on a new layer, draw a circle using the Ellipse Tool (L). Then, overlap the circle with a small triangle and Unite the two shapes together: this is your basic chat bubble. Draw three circles for ellipses to be used in the animation later. Step 2 Copy and Paste the chat bubble and Reflect it over a Vertical Axis. Change the second bubble's color to a darker hue. Scale the ellipses down so they fit into the chat bubble. Next we'll add some text. Step 3 Draw or type out simple words like "hey" and "hi", either using a handwritten-style font you enjoy or drawing each letter with the Paintbrush Tool (B) using a default calligraphic brush. Make sure any text or strokes are converted to objects and that each letter is a separate object.

10 Step 4 Type or draw simple text emoticons within the chat bubbles. Alternatively, you can draw emojis instead. It's your chat icon and the overall style is up to you. In total, there are 14 separate components below: three ellipses, five letters, two chat bubbles, and four objects creating emoticons. Each one will be Copied and Pasted into a new document in Adobe Photoshop as a separate layer.

11 6. Animate the Chat Icon Step 1 In Adobe Photoshop, Paste each of the 14 icon components into your document as a new layer. Group together like objects as I've done below in the Layers panel: the components for each word, emoticon, ellipses, and chat bubbles. This keeps your document organized and makes animating your GIF easier overall.

12 Step 2 To begin, I want my first chat bubble to come in from the left side. I've hidden all of the components except for the first chat bubble and placed it outside my document frame for the first Timeline frame. Within seven frames, I've moved my chat bubble to the center of the document from the left side. You can move and alter a layer for each new frame without affecting the frame before it. Once the chat bubble is in view, I start the "typing" effect. Each ellipse is visible one at a time within the first chat bubble, followed by the first message of "hi". Then I begin to slide the second chat bubble into the frame, while the first chat message (grouped together in the Layers panel as "hi") is reduced in opacity (by 20% each frame) in the Layers panel. Step 3 Here's a look at my Timeline panel for the entire GIF. I have over 30 frames in total and most of them have a 0.1 second delay. Some components, like the ellipses, go "dot, dot, dot" at a 0.3 second delay, while the fading of words or typing of letters and emoticons is faster when possible. You can adjust your preferred delays as you see fit. You want the typing to be smooth and readable without being too slow and choppy. Step 4 You can check out my final animation now: the first chat bubble enters and starts typing, the second bubble responds, and both send emoticons and then move back out of frame. We have to make one last animated icon that combines the ideas and techniques used previously.

13 7. Draw the Camera Step 1 In Adobe Illustrator, draw a rectangle. Select the top two anchor points with the Direct Selection Tool, and pull the Live Corners inward. Draw a second, darker rectangle below the first, and round out its bottom corners. Note that the second rectangle is smaller than the first, but both share the same width measurement.

14 Step 2 In dark gray, draw a thin rectangle for the instant film opening on the bottom half of the camera. Draw rounded rectangles and a circle for the camera's lens, viewfinder, and additional designs on the camera's face. Step 3 Add a red circle and a dark, warm gray circle for the camera's button. For the lens, stack gray and blue circles on top of each other, alternating between dark and light. Use the Direct Selection Tool to push the top anchor point of the inner circle downward so the lens looks shiny (see the design below).

15 8. Create Camera Animation Components Step 1 For the shutter animation I wanted a simple open and close animation. You can, of course, create more complex shapes if you want. For my shutter I drew a dark-gray circle. Copy and Paste the circle and cut it in half (overlap the horizontal center of the circle with a line segment, and then Divide the two shapes in the Pathfinder panel). Copy and Paste the two circle halves. Move each half away from the center and use the Direct Selection Tool to move the bottom two anchor points to squish up each circle half slightly. Repeat for six total iterations that bring the shutter from closed to open. All six of these groups will be Copied and Pasted into the Photoshop document during the animation stage.

16 Step 2 Now we can work on the instant film. Essentially you're drawing a series of rectangles that get larger and larger. Start with a thin, light-gray rectangle in the center of the lower half of the camera icon. After a couple of rectangles, you'll add a dark-gray rectangle to the light-gray one. Notice how they both get longer and longer as you go. Step 3 Here's a final look at all of the camera components: the camera, the six shutter shapes, and the eight (including the one on the camera) film shapes. In total I'll be copying and Pasting 15 components into the Photoshop document in the next section. Let's animate this camera!

17 9. Animate the Camera Step 1 As with the icons before, Copy and Paste each component into your Photoshop document. I found it easiest for each icon to have its own document within Photoshop so that I was concentrating on one animation at a time. Group together the shutter layers and the film layers in the Layers panel above the camera layer. I started with the shutter animation: close and open the shutter so the lens looks as if it's blinking.

18 Step 2 Then, you'll want to animate the film going in and out of the film slot (alternatively, it can fall off of the camera, as it really would). Once again you'll cycle through each film component, one after the other, and then create a frame for each in reverse. Step 3 Finally, a quick note on saving your GIF files. Go to File > Export > Save for Web (Legacy) (Alt-Shift-Control-S) and select GIF from the drop-down menu. Limit the GIF to 32 colors or less, if possible. You can preview the animation, resize your file, and decide on the file's quality before hitting Save. Step 4 Here's a look at my final camera icon in action! Great Job, You're Done! Whether you're creating a gif with each frame drawn in Adobe Illustrator, manipulating components while in the GIF creation stage, or a mix of both techniques, animating vector graphics is simple and fun. Share your creations and create a whole set of animated icons or even scenes ready for web publishing and more!

19 Difficulty: Lower-Intermediate Length: 30 minutes 1 hour (depending upon your efforts, of course)

Create a Simple Storefront Icon

Create a Simple Storefront Icon Create a Simple Storefront Icon In this tutorial I will show you how to create a simple storefront icon using some rectangles, Illustrator Effects, and gradients. This icon is great for use in e-commerce

More information

Create A Briefcase Icon

Create A Briefcase Icon Create A Briefcase Icon In this tutorial, I will show you how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover,

More information

Adobe Photoshop CC 2018 Tutorial

Adobe Photoshop CC 2018 Tutorial Adobe Photoshop CC 2018 Tutorial GETTING STARTED Adobe Photoshop CC 2018 is a popular image editing software that provides a work environment consistent with Adobe Illustrator, Adobe InDesign, Adobe Photoshop,

More information

Adobe Photoshop CS5 Tutorial

Adobe Photoshop CS5 Tutorial Adobe Photoshop CS5 Tutorial GETTING STARTED Adobe Photoshop CS5 is a popular image editing software that provides a work environment consistent with Adobe Illustrator, Adobe InDesign, Adobe Photoshop

More information

By Washan Najat Nawi

By Washan Najat Nawi By Washan Najat Nawi how to get started how to use the interface how to modify images with basic editing skills Adobe Photoshop: is a popular image-editing software. Two general usage of Photoshop Creating

More information

Create a Happy Sun Character. Below is the final illustration we will be working towards.

Create a Happy Sun Character. Below is the final illustration we will be working towards. Create a Happy Sun Character Below is the final illustration we will be working towards. 1 Step 1 Create a new document and with the Ellipse tool (L), create an ellipse. 2 Step 2 Fill the ellipse with

More information

Create a Stylized GPS Icon

Create a Stylized GPS Icon Home About Resources Contact Shop Tutorials Tips and Tricks Interviews Inspiration Create a Stylized GPS Icon Tutorials July 9th, 2009 Location based software and peripherals are very popular these days.

More information

GIMP (GNU Image Manipulation Program) MANUAL

GIMP (GNU Image Manipulation Program) MANUAL Selection Tools Icon Tool Name Function Select Rectangle Select Ellipse Select Hand-drawn area (lasso tool) Select Contiguous Region (magic wand) Selects a rectangular area, drawn from upper left (or lower

More information

Drawing the Red Christmas Bell

Drawing the Red Christmas Bell Vector 3D Christmas Bells Thinking of drawing some Christmas bells for this Christmas? Read this illustrator tutorial to learn how to draw 5 different styles of vector Christmas bells using the 3D Revolve

More information

12. Creating a Product Mockup in Perspective

12. Creating a Product Mockup in Perspective 12. Creating a Product Mockup in Perspective Lesson overview In this lesson, you ll learn how to do the following: Understand perspective drawing. Use grid presets. Adjust the perspective grid. Draw and

More information

GETTING STARTED. 0 P a g e B a s i c s o f A d o b e P h o t o s h o p A g a P r i v a t e I n s t i t u t e f o r c o m p u t e r s c i e n c e

GETTING STARTED. 0 P a g e B a s i c s o f A d o b e P h o t o s h o p A g a P r i v a t e I n s t i t u t e f o r c o m p u t e r s c i e n c e GETTING STARTED 0 P a g e B a s i c s o f A d o b e P h o t o s h o p Adobe Photoshop: is a popular image editing software that provides a work environment consistent with Adobe Illustrator, Adobe InDesign,

More information

Color and More. Color basics

Color and More. Color basics Color and More In this lesson, you'll evaluate an image in terms of its overall tonal range (lightness, darkness, and contrast), its overall balance of color, and its overall appearance for areas that

More information

Photoshop Elements 3 Layers

Photoshop Elements 3 Layers Photoshop Elements 3 Layers One of the most powerful features of modern imaging software is the ability to work with layers. If an image is made of layers, we can work on the part that is in one layer

More information

ADOBE PHOTOSHOP CS TUTORIAL

ADOBE PHOTOSHOP CS TUTORIAL ADOBE PHOTOSHOP CS TUTORIAL A D O B E P H O T O S H O P C S Adobe Photoshop CS is a popular image editing software that provides a work environment consistent with Adobe Illustrator, Adobe InDesign, Adobe

More information

A quick note: We hope that you will find something from the Tips and Tricks that will add a little pizazz to your yearbook pages!

A quick note: We hope that you will find something from the Tips and Tricks that will add a little pizazz to your yearbook pages! A quick note: The following pages are tips and tricks for Basic Photoshop users. You may notice that some instructions indicate that non-awpc fonts were used, and that some colors were created using the

More information

Rendering a perspective drawing using Adobe Photoshop

Rendering a perspective drawing using Adobe Photoshop Rendering a perspective drawing using Adobe Photoshop This hand-out will take you through the steps to render a perspective line drawing using Adobe Photoshop. The first important element in this process

More information

Key Terms. Where is it Located Start > All Programs > Adobe Design Premium CS5> Adobe Photoshop CS5. Description

Key Terms. Where is it Located Start > All Programs > Adobe Design Premium CS5> Adobe Photoshop CS5. Description Adobe Adobe Creative Suite (CS) is collection of video editing, graphic design, and web developing applications made by Adobe Systems. It includes Photoshop, InDesign, and Acrobat among other programs.

More information

11 Advanced Layer Techniques

11 Advanced Layer Techniques 11 Advanced Layer Techniques After you ve learned basic layer techniques, you can create more complex effects in your artwork using layer masks, path groups, filters, adjustment layers, and more style

More information

PATHTRACE MANUAL. Revision A Software Version 5.4 MatDesigner

PATHTRACE MANUAL. Revision A Software Version 5.4 MatDesigner PATHTRACE MANUAL Revision A Software Version 5.4 MatDesigner Wizard International, Inc., 4600 116th St. SW, PO Box 66, Mukilteo, WA 98275 888/855-3335 Fax: 425/551-4350 wizardint.com NOTES: B- MatDesigner

More information

ADOBE ILLUSTRATOR. Step 1. Dificultad: Intermedio Tiempo: 30 minutos 1 hora. Create a new document and with the Ellipse tool (L), create an ellipse.

ADOBE ILLUSTRATOR. Step 1. Dificultad: Intermedio Tiempo: 30 minutos 1 hora. Create a new document and with the Ellipse tool (L), create an ellipse. Dificultad: Intermedio Tiempo: 30 minutos 1 hora Step 1 Create a new document and with the Ellipse tool (L), create an ellipse. Lic. José Luis Solórzano Vera Página 1 Step 2 Fill the ellipse with a radial

More information

WORN, TORN PHOTO EDGES EFFECT

WORN, TORN PHOTO EDGES EFFECT Photo Effects: CC - Worn, Torn Photo Edges Effect WORN, TORN PHOTO EDGES EFFECT In this Photoshop tutorial, we ll learn how to take the normally sharp, straight edges of an image and make them look all

More information

PHOTOSHOP & ILLUSTRATOR BOOTCAMP

PHOTOSHOP & ILLUSTRATOR BOOTCAMP FALL 2014 - ELIZABETH LIN PHOTOSHOP & ILLUSTRATOR BOOTCAMP ILLUSTRATOR ALIGNMENT To access the alignment panel, go to Window -> Align. You should see a panel like the one below. This panel allows you to

More information

How To Create a Stylish Skull Based Vector Illustration

How To Create a Stylish Skull Based Vector Illustration How To Create a Stylish Skull Based Vector Illustration The skull and crossed pistons mark is a popular adaption of the tradition skull and crossbones symbol and is commonly seen in motorcycle culture,

More information

Learning Adobe Illustrator CS5

Learning Adobe Illustrator CS5 Module 1 Contents Chapter 1: Introduction to Adobe Illustrator The Adobe Illustrator Screen...1-1 The Tools Panel...1-3 Drawing Lines...1-3 Tearing off a Panel... 1-3 Drawing Different Line Types... 1-4

More information

Part 1- Fundamental Functions

Part 1- Fundamental Functions Part 1- Fundamental Functions Note: Alt+Tab will allow you to move between programs in the docker. Shift+Tab removes right pallets Tab removes all pallets Ctrl+1= centers art board Ctrl + 0= fill window

More information

Create a Cute Furry Vector Monster in Illustrator

Create a Cute Furry Vector Monster in Illustrator Create a Cute Furry Vector Monster in Illustrator Other labs from this author can be found at http://www.blog.spoongraphics.co.uk/tutorials/create-a-cute-furry-vector-monster-inillustrator Follow these

More information

Illustrator Tutorial - Create a Gang of Vector Ninjas

Illustrator Tutorial - Create a Gang of Vector Ninjas Blog.SpoonGraphics - Design Tutorials and Free Vector Downloads Illustrator Tutorial - Create a Gang of Vector Ninjas Free Vector Illustrations Download Amazing Illustrations. Join istockphoto For Free

More information

MODULE 1 IMAGE TRACE AND BASIC MANIPULATION IN ADOBE ILLUSTRATOR. The Art and Business of Surface Pattern Design

MODULE 1 IMAGE TRACE AND BASIC MANIPULATION IN ADOBE ILLUSTRATOR. The Art and Business of Surface Pattern Design The Art and Business of Surface Pattern Design MODULE 1 IMAGE TRACE AND BASIC MANIPULATION IN ADOBE ILLUSTRATOR The Art and Business of Surface Pattern Design 1 Hi everybody and welcome to our Make it

More information

Make Watercolor and Marker Style Portraits with Illustrator

Make Watercolor and Marker Style Portraits with Illustrator Make Watercolor and Marker Style Portraits with Illustrator Save Preview Resources Portrait by Lillian Bertram (Creative Commons Share Alike used here with permission) Step 1: Set up your Illustrator document

More information

Sketch-Up Guide for Woodworkers

Sketch-Up Guide for Woodworkers W Enjoy this selection from Sketch-Up Guide for Woodworkers In just seconds, you can enjoy this ebook of Sketch-Up Guide for Woodworkers. SketchUp Guide for BUY NOW! Google See how our magazine makes you

More information

Introduction to Photoshop CS6

Introduction to Photoshop CS6 Introduction to Photoshop CS6 Copyright 2016, Faculty and Staff Training, West Chester University. A member of the Pennsylvania State System of Higher Education. No portion of this document may be reproduced

More information

Creating Digital Illustrations for Your Research Workshop IV Illustration Demo Part II

Creating Digital Illustrations for Your Research Workshop IV Illustration Demo Part II Creating Digital Illustrations for Your Research Workshop IV Illustration Demo Part II Final Figure Workshop IV Components Topics & Techniques covered How to randomly transform a group of individual shapes.

More information

Photoshop CC Editing Images

Photoshop CC Editing Images Photoshop CC Editing Images Rotate a Canvas A canvas can be rotated 90 degrees Clockwise, 90 degrees Counter Clockwise, or rotated 180 degrees. Navigate to the Image Menu, select Image Rotation and then

More information

A Classic Icon. Overview: Finding different ways to construct the same iconic image.

A Classic Icon. Overview: Finding different ways to construct the same iconic image. A Classic Icon Five Ways to Re-create Simple Shapes Overview: Finding different ways to construct the same iconic image. You can construct even the simplest of iconic images in many ways. Patricia McShane

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 6 One of the most useful features of applications like Photoshop is the ability to work with layers. allow you to have several pieces of images in the same file, which can be arranged

More information

HOW TO CREATE A SUPER SHINY PENCIL ICON

HOW TO CREATE A SUPER SHINY PENCIL ICON HOW TO CREATE A SUPER SHINY PENCIL ICON Tutorial from http://psd.tutsplus.com/ Compiled by INTRODUCTION The Pencil is one of the visual metaphors most used to express creativity. In this tutorial,

More information

Adobe Illustrator. Mountain Sunset

Adobe Illustrator. Mountain Sunset Adobe Illustrator Mountain Sunset Adobe Illustrator Mountain Sunset Introduction Today we re going to be doing a very simple yet very appealing mountain sunset tutorial. You can see the finished product

More information

Chapter 4: Draw with the Pencil and Brush

Chapter 4: Draw with the Pencil and Brush Page 1 of 15 Chapter 4: Draw with the Pencil and Brush Tools In Illustrator, you create and edit drawings by defining anchor points and the paths between them. Before you start drawing lines and curves,

More information

Create a Twitter Style Bird Mascot - Vectortuts+

Create a Twitter Style Bird Mascot - Vectortuts+ Create a Twitter Style Bird Mascot Aug 4th in Illustration by Rype Using some basic shapes, effects, and gradients I will show you how to create a Twitter mascot for your blog or website. Twitter is a

More information

Okay, that s enough talking. Let s get things started. Here s the photo I m going to be using in this tutorial: The original photo.

Okay, that s enough talking. Let s get things started. Here s the photo I m going to be using in this tutorial: The original photo. add visual interest with the rule of thirds In this Photoshop tutorial, we re going to look at how to add more visual interest to our photos by cropping them using a simple, tried and true design trick

More information

Welcome to Corel DESIGNER, a comprehensive vector-based package for technical graphic users and technical illustrators.

Welcome to Corel DESIGNER, a comprehensive vector-based package for technical graphic users and technical illustrators. Workspace tour Welcome to Corel DESIGNER, a comprehensive vector-based package for technical graphic users and technical illustrators. This tutorial will help you become familiar with the terminology and

More information

Step 1. Blue Bird Tutorial

Step 1. Blue Bird Tutorial Blue Bird Tutorial Using some basic shapes, effects, and gradients I will show you how to create a Twitter mascot for your blog or website. Twitter is a popular free web service for social networking and

More information

Recitation 2 Introduction to Photoshop

Recitation 2 Introduction to Photoshop Recitation 2 Introduction to Photoshop What is Adobe Photoshop? Adobe Photoshop is a tool for creating digital graphics either by starting with a scanned photograph or artwork or by creating the graphics

More information

Adobe Photoshop CC update: May 2013

Adobe Photoshop CC update: May 2013 Adobe Photoshop CC update: May 2013 Welcome to the latest Adobe Photoshop CC bulletin update. This is provided free to ensure everyone can be kept upto-date with the latest changes that have taken place

More information

Drawing with precision

Drawing with precision Drawing with precision Welcome to Corel DESIGNER, a comprehensive vector-based drawing application for creating technical graphics. Precision is essential in creating technical graphics. This tutorial

More information

Creating a light studio

Creating a light studio Creating a light studio Chapter 5, Let there be Lights, has tried to show how the different light objects you create in Cinema 4D should be based on lighting setups and techniques that are used in real-world

More information

The Zen of Illustrator

The Zen of Illustrator The Zen of Illustrator Zen: Seeking enlightenment through introspection and intuition rather than scripture. You re comfortable with the basic operations of your computer. You ve read through An Overview

More information

Photoshop Elements Hints by Steve Miller

Photoshop Elements Hints by Steve Miller 2015 Elements 13 A brief tutorial for basic photo file processing To begin, click on the Elements 13 icon, click on Photo Editor in the first box that appears. We will not be discussing the Organizer portion

More information

LESSON 02: GET STRONGER FOR PS USERS COMPANION BOOK. Digital Scrapbook Academy. February 2018: Lesson 02 Get Stronger for Photoshop Users

LESSON 02: GET STRONGER FOR PS USERS COMPANION BOOK. Digital Scrapbook Academy. February 2018: Lesson 02 Get Stronger for Photoshop Users Digital Scrapbook Academy February 2018: Lesson 02 LESSON 02: GET STRONGER FOR PS USERS COMPANION BOOK Page 1 of 19 Table of Contents Table of Contents 2 Welcome to Lesson 02 for Photoshop Users 4 1: Add

More information

Create a Vector Glass With Layered Reflections to Create Depth

Create a Vector Glass With Layered Reflections to Create Depth Create a Vector Glass With Layered Reflections to Create Depth 1) Draw a rectangle at approx 3:2 ratio. Next, use the ellipse tool and hold Ctrl to create a perfect circle. Position the circle at the bottom

More information

Generations Automatic Stand-Alone Lace By Bernie Griffith Generations Software

Generations Automatic Stand-Alone Lace By Bernie Griffith Generations Software We are going to create an open Italian lace. Generations software products provide advanced image processing features allowing for the creation of stand-alone lace with just a few simple techniques. A

More information

PHOTOSHOP BASICS: VINTAGE PHOTO FIXES

PHOTOSHOP BASICS: VINTAGE PHOTO FIXES PHOTOSHOP BASICS: VINTAGE PHOTO FIXES Course Topics: Photo Adjustments Photo Editing Tools Layers What is Photoshop Elements? Photoshop Elements is a streamlined version of Adobe Photoshop CC. Despite

More information

Create a Thanksgiving Illustration With Basic Shapes Using Illustrator - Tuts+ Design & Illustration Tutorial

Create a Thanksgiving Illustration With Basic Shapes Using Illustrator - Tuts+ Design & Illustration Tutorial Our 2015 Halloween theme is here! Join us for The Wizard of Oz inspired tutorials VIEW MORE All Topics Find tutorials, courses, and more...! ) " Design & Illustration Categories # Learning Guides # Forum

More information

How to Create Website Banners

How to Create Website Banners How to Create Website Banners In the following instructions you will be creating banners in Adobe Photoshop Elements 6.0, using different images and fonts. The instructions will consist of finding images,

More information

AVANTUS TRAINING PTE LTD

AVANTUS TRAINING PTE LTD [AICS6]: Adobe Illustrator CS6 Length Delivery Method : 2 Days : Instructor-led (Classroom) Course Outline Module 1: Looking at the Work Area Section 1: About Adobe Illustrator CS6 What is Adobe Illustrator

More information

Organizing artwork on layers

Organizing artwork on layers 3 Layer Basics Both Adobe Photoshop and Adobe ImageReady let you isolate different parts of an image on layers. Each layer can then be edited as discrete artwork, allowing unlimited flexibility in composing

More information

Essential Post Processing

Essential Post Processing Essential Post Processing By Ian Cran Preamble Getting to grips with Photoshop and Lightroom could be described in three stages. One is always learning and going through stages but there are three main

More information

Getting Started. with Easy Blue Print

Getting Started. with Easy Blue Print Getting Started with Easy Blue Print User Interface Overview Easy Blue Print is a simple drawing program that will allow you to create professional-looking 2D floor plan drawings. This guide covers the

More information

How to Create a Landscape Wallpaper for your Desktop

How to Create a Landscape Wallpaper for your Desktop How to Create a Landscape Wallpaper for your Desktop Why not create a vector landscape wallpaper? In this simple tutorial, you will learn how to create an eye-appealing wallpaper quickly and effectively.

More information

Photoshop Notes and Application Study Packet

Photoshop Notes and Application Study Packet Basic Parts of Photoshop Interface Photoshop Notes and Application Study Packet PANELS Photoshop Study Packet Copyright Law The World Intellectual Property Organization (WIPO) Copyright treaty restrict

More information

Adding Content and Adjusting Layers

Adding Content and Adjusting Layers 56 The Official Photodex Guide to ProShow Figure 3.10 Slide 3 uses reversed duplicates of one picture on two separate layers to create mirrored sets of frames and candles. (Notice that the Window Display

More information

Adobe Photoshop CS2 Workshop

Adobe Photoshop CS2 Workshop COMMUNITY TECHNICAL SUPPORT Adobe Photoshop CS2 Workshop Photoshop CS2 Help For more technical assistance, open Photoshop CS2 and press the F1 key, or go to Help > Photoshop Help. Selection Tools - The

More information

Photoshop: Manipulating Photos

Photoshop: Manipulating Photos Photoshop: Manipulating Photos All Labs must be uploaded to the University s web server and permissions set properly. In this lab we will be manipulating photos using a very small subset of all of Photoshop

More information

UNDERSTANDING LAYER MASKS IN PHOTOSHOP

UNDERSTANDING LAYER MASKS IN PHOTOSHOP UNDERSTANDING LAYER MASKS IN PHOTOSHOP In this Adobe Photoshop tutorial, we re going to look at one of the most essential features in all of Photoshop - layer masks. We ll cover exactly what layer masks

More information

Adobe Photoshop The program: The Menus: Computer Graphics I- Final Review

Adobe Photoshop The program: The Menus: Computer Graphics I- Final Review Computer Graphics I- Final Review The written portion of your final exam will be 25 multiple choice questions and one free response. Some parts of the exam will be related to examples, images and pictures.

More information

Photo Within A Photo - Photoshop

Photo Within A Photo - Photoshop Photo Within A Photo - Photoshop Here s the image I ll be starting with: The original image. And here s what the final "photo within a photo" effect will look like: The final result. Let s get started!

More information

USING BRUSHES TO CREATE A POSTER

USING BRUSHES TO CREATE A POSTER 11 USING BRUSHES TO CREATE A POSTER Lesson overview In this lesson, you ll learn how to do the following: Use four brush types: Calligraphic, Art, Bristle, and Pattern. Apply brushes to paths. Paint and

More information

Using Adobe Photoshop to enhance the image quality. Assistant course web site:

Using Adobe Photoshop to enhance the image quality. Assistant course web site: Using Adobe Photoshop to enhance the image quality Assistant course web site: http://www.arches.uga.edu/~skwang/edit6170/course.htm Content Introduction 2 Unit1: Scan images 3 Lesson 1-1: Preparations

More information

Introduction to Photoshop

Introduction to Photoshop Introduction to Photoshop Instructional Services at KU Libraries A Division of Information Services www.lib.ku.edu/instruction Abstract: This course covers the basics of Photoshop, including common tools

More information

Photoshop 1. click Create.

Photoshop 1. click Create. Photoshop 1 Step 1: Create a new file Open Adobe Photoshop. Create a new file: File->New On the right side, create a new file of size 600x600 pixels at a resolution of 300 pixels per inch. Name the file

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 4 Colour is important in most art forms. For example, a painter needs to know how to select and mix colours to produce the right tones in a picture. A Photographer needs to understand

More information

Digital Design and Communication Teaching (DiDACT) University of Sheffield Department of Landscape. Adobe Photoshop CS5 INTRODUCTION WORKSHOPS

Digital Design and Communication Teaching (DiDACT) University of Sheffield Department of Landscape. Adobe Photoshop CS5 INTRODUCTION WORKSHOPS Adobe INTRODUCTION WORKSHOPS WORKSHOP 1 - what is Photoshop + what does it do? Outcomes: What is Photoshop? Opening, importing and creating images. Basic knowledge of Photoshop tools. Examples of work.

More information

Line Drawing to Vector Image for Complete Beginners

Line Drawing to Vector Image for Complete Beginners Line Drawing to Vector Image for Complete Beginners Copying a Drawing into Illustrator C6 and simplifying it Open a line drawing (scanned or a digital photo) in Photoshop. The drawing is likely to be quite

More information

FLAMING HOT FIRE TEXT

FLAMING HOT FIRE TEXT FLAMING HOT FIRE TEXT In this Photoshop text effects tutorial, we re going to learn how to create a fire text effect, engulfing our letters in burning hot flames. We ll be using Photoshop s powerful Liquify

More information

How to Create a Curious Owl in Illustrator

How to Create a Curious Owl in Illustrator How to Create a Curious Owl in Illustrator Tutorial Details Program: Adobe Illustrator Difficulty: Intermediate Estimated Completion Time: 1.5 hours Take a look at what we're aiming for, an inquisitive

More information

When Lines Intersect Lines

When Lines Intersect Lines &RPSOH[*UDSKLFVRQD 6LQJOH/D\HU Content provided in partnership with Peachpit Press, from the book Macromedia Flash MX for Windows and Macintosh: Visual QuickStart Guide by Katherine Ulrichà To work effectively

More information

Digital Photography 1

Digital Photography 1 Digital Photography 1 Photoshop Lesson 3 Resizing and transforming images Name Date Create a new image 1. Choose File > New. 2. In the New dialog box, type a name for the image. 3. Choose document size

More information

The original image. Let s get started! The final rainbow effect. The photo sits on the Background layer in the Layers panel.

The original image. Let s get started! The final rainbow effect. The photo sits on the Background layer in the Layers panel. Add A Realistic Rainbow To A Photo In this Photoshop photo effects tutorial, we ll learn how to easily add a rainbow, and even a double rainbow, to a photo! As we ll see, Photoshop ships with a ready-made

More information

Chapter 8. Working with Transparency, Effects, and Graphic Styles and Recoloring Artwork Delmar, Cengage Learning

Chapter 8. Working with Transparency, Effects, and Graphic Styles and Recoloring Artwork Delmar, Cengage Learning Chapter 8 Working with Transparency, Effects, and Graphic Styles and Recoloring Artwork 2011 Delmar, Cengage Learning Objectives Use the Transparency panel and the Color Picker Recolor artwork Apply effects

More information

Creative Cut-Outs. 1Go to File>New>Blank File to create a new document and enter. Projects EXTRAS: GET MORE ONLINE!

Creative Cut-Outs. 1Go to File>New>Blank File to create a new document and enter. Projects EXTRAS: GET MORE ONLINE! ALL IMAGES MIKE RODRIGUEZ Creative Cut-Outs By Mike Rodriguez Are you interested in applying some of your rapidly developing layer skills? In the May/June issue, we covered the basics of layers (Layers

More information

All Creative Suite Design documents are saved in the same way. Click the Save or Save As (if saving for the first time) command on the File menu to

All Creative Suite Design documents are saved in the same way. Click the Save or Save As (if saving for the first time) command on the File menu to 1 The Application bar is new in the CS4 applications. It combines the menu bar with control buttons that allow you to perform tasks such as arranging multiple documents or changing the workspace view.

More information

Adobe PhotoShop Elements

Adobe PhotoShop Elements Adobe PhotoShop Elements North Lake College DCCCD 2006 1 When you open Adobe PhotoShop Elements, you will see this welcome screen. You can open any of the specialized areas. We will talk about 4 of them:

More information

This lesson will focus on advanced techniques

This lesson will focus on advanced techniques Lesson 10 278 Paint, Roto, and Puppet Exploring Paint, Roto Brush, and the Puppet tools. In This Lesson 279 basic painting 281 erasing strokes 281 Paint Channels 282 Paint blending modes 282 brush duration

More information

How to Draw a Realistic iphone 4 with

How to Draw a Realistic iphone 4 with Home Freebies Submit Your Work Contact Us How to Draw a Realistic iphone 4 with Photoshop Jan 3 2011 By Mohammad Jeprie 34 Comments In this tutorial, we will draw a realistic-looking iphone 4 using Photoshop.

More information

NMC Second Life Educator s Skills Series: How to Make a T-Shirt

NMC Second Life Educator s Skills Series: How to Make a T-Shirt NMC Second Life Educator s Skills Series: How to Make a T-Shirt Creating a t-shirt is a great way to welcome guests or students to Second Life and create school/event spirit. This article of clothing could

More information

Stitching Panoramas using the GIMP

Stitching Panoramas using the GIMP Stitching Panoramas using the GIMP Reference: http://mailman.linuxchix.org/pipermail/courses/2005-april/001854.html Put your camera in scene mode and place it on a tripod. Shoot a series of photographs,

More information

Lab 7. CSE 3, Summer In this lab we will learn how to manipulate images and create animations in Photoshop.

Lab 7. CSE 3, Summer In this lab we will learn how to manipulate images and create animations in Photoshop. Lab 7 CSE 3, Summer 2010 In this lab we will learn how to manipulate images and create animations in Photoshop. Photoshop is an extremely powerful program. (And an extremely expensive one! The full version

More information

Editing Using Photoshop CS5

Editing Using Photoshop CS5 The Photoshop CS4 Editing Workspace - shown is the document (image) window, ToolBox, Info, Navigator, History, Adjustments and Layers Palettes, Windows Menus and Options Bar (on top). USING THE LAYERS

More information

Reveal the mystery of the mask

Reveal the mystery of the mask Reveal the mystery of the mask Imagine you're participating in a group brainstorming session to generate new ideas for the design phase of a new project. The facilitator starts the brainstorming session

More information

Photoshop Backgrounds: Turn Any Photo Into A Background

Photoshop Backgrounds: Turn Any Photo Into A Background Photoshop Backgrounds: Turn Any Photo Into A Background Step 1: Duplicate The Background Layer As always, we want to avoid doing any work on our original image, so before we do anything else, we need to

More information

The original image. Let s get started! The final result.

The original image. Let s get started! The final result. Miniature Effect With Tilt-Shift In Photoshop CS6 In this tutorial, we ll learn how to create a miniature effect in Photoshop CS6 using its brand new Tilt-Shift blur filter. Tilt-shift camera lenses are

More information

Silhouette Connect Layout... 4 The Preview Window... 5 Undo/Redo... 5 Navigational Zoom Tools... 5 Cut Options... 6

Silhouette Connect Layout... 4 The Preview Window... 5 Undo/Redo... 5 Navigational Zoom Tools... 5 Cut Options... 6 user s manual Table of Contents Introduction... 3 Sending Designs to Silhouette Connect... 3 Sending a Design to Silhouette Connect from Adobe Illustrator... 3 Sending a Design to Silhouette Connect from

More information

Working with Photoshop CS4

Working with Photoshop CS4 Table of Contents Introduction: Tools and Palettes... 3 The History Palette Saving a Snapshot... 3 Getting Help with Photoshop... 4 Resolution and Image Size... 4 Changing the Image Size... 5 Tips for

More information

Adobe Photoshop. How To Get Started With Adobe InDesign CC: 10 Things Beginners Want To Know How To Do TO START: 1) ZOOM, MOVE, RETOUCH (05:11)

Adobe Photoshop. How To Get Started With Adobe InDesign CC: 10 Things Beginners Want To Know How To Do TO START: 1) ZOOM, MOVE, RETOUCH (05:11) Adobe Photoshop How To Get Started With Adobe InDesign CC: 10 Things Beginners Want To Know How To Do Video By Terry White Tutorial Sheet by Juliet Davis TO START: Open the tutorial in YouTube, download

More information

Appliqué with CutWork

Appliqué with CutWork Appliqué with CutWork Method 1: Creating Appliqué from a Placement Line Open BERNINA Embroidery Software. Click on File> Open. Select the Appliqué Flowers, provided with the lesson. Click on Open. Select

More information

Photoshop. Part 1. A few tips and hints before we get started.

Photoshop. Part 1. A few tips and hints before we get started. Photoshop Part 1 A few tips and hints before we get started. In focus: In this class, we will work with digital and scanned images. The better the original picture, the easier it will be for you to get

More information

PHOTOSHOP STUDY GUIDE FOR CHAPTER A, B TEST

PHOTOSHOP STUDY GUIDE FOR CHAPTER A, B TEST 1 PHOTOSHOP STUDY GUIDE FOR CHAPTER A, B TEST 1. Adobe CS5 is a graphic arts package that offers Photoshop, Illustrator, Indesign and Flash and Dreamweaver. They are integrated programs used as an industry

More information

1. Reference Guide and Glossary

1. Reference Guide and Glossary 1. Reference Guide and Glossary Design Panel New Click the New Icon at any time to create a new project from scratch. Projects Browse, select, and cut projects from the Projects Tab. This includes your

More information

Digital Photography 1

Digital Photography 1 Digital Photography 1 Photoshop Lesson 1 Photoshop Workspace & Layers Name Date Default Photoshop workspace A. Document window B. Dock of panels collapsed to icons C. Panel title bar D. Menu bar E. Options

More information