High School Media Workshop Vector Graphics

Vector Magic: Elevating Media with Illustrations

Graphics • Two types of graphics • Raster • Vector • Raster: a raster graphic represents a two-dimensional picture as a rectangular grid of pixels • Vector: Vector graphics are a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons

What you can do with vectors: • Create art for greetings cards, book covers and much, much more • Create logos • Enhance many designs from posters to infographics

Vector art • wow-pet-art.jimdosite.com /gallery/ • fineartamerica.com/profiles/ barbara-bullington • behance.net/andrewnye

Create logos • Illustrator

• Canva.com

• Logodesign.ai (a free online logo maker)

Enhance designs

Yearbooks Literary arts magazine

Enhance designs • Websites

Posters

Enhancing designs example • Before

• After

Another example:

Tools you can use to create vector graphics

Adobe Illustrator • Adobe Illustrator is the industry-standard vector graphics app

Adobe Illustrator and AI • Adobe recently added ability to generate and change vector graphics using Artificial Intelligence.

• Introduction to creating graphics video: youtube.com/wa tch?v=Gv9QH0Z-GMU • More advanced graphics and changing them with AI feat ure: youtube.com/watch?v=jwoKOvONq38

Adobe Illustrator • Because vector graphics are made up of individual lines and shapes, you can change, delete and move any aspect of a graphic as shown in this short video:

Adobe Illustrator • You can combine graphics to make a scene or design style.

Infographics • This is an .svg file for an infographic template I downloaded from all-free-download.com/free -vector/svg-infographic.htm l

Infographics • Using Illustrator, I can open and edit the infographic.

Getting started with Illustrator • Illustrator tutorials: • creativecloud.adobe.com /learn/app/illustrator

Thenounproject.com FIND VECTOR GRAPHICS OF ALL KINDS WITH A SIMPLE SEARCH.

These icons are great for design, such as: • Listing items in a PowerPoint • (you can add this Noun Project feature onto PowerPoint as a plugin)

Before and after PowerPoint slide example: Three steps to creating vector graphics Choose a Vector Graphics Software • Select a vector-based program such as Adobe Illustrator, CorelDRAW, or free alternatives like Inkscape or Affinity Designer. These tools are designed specifically for creating and editing vector images, providing tools to draw shapes, lines, and paths.

Create Basic Shapes and Paths • Start with basic shapes and lines: Use tools like the pen tool, shape tool (rectangle, circle, etc.), and pathfinder to create basic shapes and outlines.

Edit and refine paths: • Adjust anchor points, curves, and lines to make sure the shapes are precise.

Three steps to creating vector graphics

Choose a Vector Graphics Software

Create Basic Shapes and Paths

•Select a vector-based program such as Adobe Illustrator, CorelDRAW, or free alternatives like Inkscape or Affinity Designer.

•Start with basic shapes and lines: •Use tools like the pen tool, shape tool (rectangle, circle, etc.), and pathfinder to create basic shapes and outlines.

Edit and refine paths: • Adjust anchor points, curves, and lines to make sure the shapes are precise.

Canva.com •Canva lets you create posters, social media posts, presentations, and much more.

•Many Canva designs contain or let you add vector graphics.

Adobe Express adobe.com/express/ • Similar to Canva.com in general • Both also offer a photo to vector option.

Photo (raster) to vector • Why is this so helpful?

• It can open up many creative options because you can: • Take a photo, • Turn it into a vector, • And adjust and change it like a vector graphic

Raster to vector

Note: I used Photoshop to remove the background of the gift image before uploading to Adobe Express and converting to .svg file.

Then, I used Adobe Illustrator to adjust size, copy and paste and change some colors.

Free vector sites: • format.com/magazine/reso urces/design/32-great-free-v ector-art-websites

For more information: • coreldraw.com/en/learn/guide-tovector-design/why-should-i-use-ve ctors/ • 60 Stunning examples of vector art • You can go to this link or scan this QR code to get a copy of this PowerPoint!

3D vector art composition with gradients for a realistic feel: “Travel dice” by Andrew Nye.

Now you try: This is the start of a cover for a magazine for high school students that will display students’ artwork and creative writing of various types, including short stories and poems.

•Choose one or more graphics from the graphics on the far right that you would add to this magazine cover design.

• Consider what you would use and how you place them, including the size you would choose for each.

Either do a hand sketch or, if you can access this PowerPoint, you can use the slide to try out positions for various graphics.

Canvas magazine

Vector images to choose from are below: (Or, you can also search online at sites such as thenounproject.com or vecteezy.com

Thanks for watching!

Any questions?