Image Asset Vector Asset

Slides:

Advertisements

Similar presentations

CHS GRAPHICS GDP UNIT 01 FILE FORMATS Understanding File Formats.

Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.

Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.

2.01 Understand Digital Raster Graphics

2.02 Understand Digital Vector Graphics

Vector Graphics 2.02 Understand Digital Vector Graphics.

Manipulating Images Image A visual representation of something that is seen in real life. It can be two-dimensional or three-dimensional A visual representation.

JRN 302: Introduction to Graphics and Visual Communication - File formats, conversion Tuesday, 8/4/15.

Graphic Images 101. Painted on a grid Drawn mathematically.

Minard Saladino By:. Introduction: Illustrator is a vector-based imaging program. Unlike PhotoShop, which deals in pixels (raster images), this one deals.

 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.

SOFTWARE TYPES Word processing Page layout Paint Draw.

Module Code: CU0001NI Technical Information on Digital Images Week – 2 - Extra.

+ 5 Things you need to know about images* *Images for the web.

Designing Your Clock Face. Objectives STUDENTS WILL BE ABLE TO: 1.Explain the differences between RASTER and VECTOR graphics. 2.List at least two examples.

1 Scalable Vector Graphics (SVG). 2 SVG SVG is an application language of XML. “SVG is a language for describing two- dimensional graphics in XML. SVG.

File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.

Vector vs. Raster Objectives:

Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.

Digital Imaging 101 Ann Ware

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

PLACING AND LINKING GRAPHICS

Adobe photoshop digital image making. the basics Adobe PhotoShop is an image-editing program that lets you create and edit digital images. ◦PhotoShop.

Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.

Raster Graphics 2.01 Investigate graphic image design.

Computer Graphics Unit 23 Computer Graphics. Computer Graphics Computer generated imagery can be categorized into several different types: Vector or Bitmap.

* Bitmap images are based on a grid of pixels * Each pixel is assigned a specific location and color value * Bitmaps contain a limited number of pixels,

21 st Century Technology. Painting Uses Pixels Quality of image Changes Drawing Uses Vectors or Lines Quality of Image Does NOT Change.

Vector vs. Raster What’s the difference between vector and raster file formats? The real difference between the two formats is how they are used.

Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.

Tools for Technical Communicators Save time and have fun doing it! Free tools and some COTS.

HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.

Understanding Images. Pixels pixels Every image is made up of very small squares called pixels, and each pixel represents a color or shade. Pixels within.

2.02 Understand Digital Vector Graphics

2.01 Understand Digital Raster Graphics

Common Bitmap Image File Types

2.01 Understand Digital Raster Graphics

Objective % Describe digital graphics production methods.

Digital Imaging 101 Ann Ware.

Vector (Shapes) vs. Raster (Pixels)

Digital Illustration Chapter 6 File format.

2.02 Understand Digital Vector Graphics

2.02 Understand Digital Vector Graphics

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

Inserting and Working with Images

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

Scalable vector graphics

RESEARCH AND APPLY GRAPHIC DESIGN TECHNIQUES #3

Bitmap vs. Vector.

Adobe Illustrator The purpose of this review is to help prepare you for the Adobe Illustrator Industry exam.

IMAGE SIZE AND RESOLUTION

2.02 Understand Digital Vector Graphics

Cosc 4735 Vector Graphics.

Illustrator Interface

Do you need to feature a favicon in WordPress? Favicon or web site Icon is that the tiny image that you'll be able to see next to the website title within.

2.02 Understand Digital Vector Graphics

Introduction & Getting ready to work

2.01 Understand Digital Raster Graphics

Objective % Describe digital graphics production methods.

Digital Image Creation & Editing

2.01 Understand Digital Raster Graphics

Vector (Shapes) vs. Raster (Pixels)

Introduction & Getting ready to work

PRODUCTION PHASES CHANGES

2.02 Understand Digital Vector Graphics

2.02 Understand Digital Vector Graphics

2.02 Understand Digital Vector Graphics

Presentation transcript:

Image Asset Vector Asset Cosc 5/4730 Image Asset Vector Asset

Android Studio It makes it very easy to add new icons to your project. Replace the launcher icon, add notification icons, etc. Image Asset creates PNG files for all the correct directories Vector Asset creates SVG files in the drawable directory. SVG is a scalar vector graphic format.

Vector ASSET

What is Vector Graphics? Bitmap – A grid of pixels, each with its own color data Cannot be scaled or rotated cleanly JPG, PNG, GIF, etc. Vector – Path data between many connected nodes Scales and rotates without loss of clarity SVG, AI, PDF, EPS, etc. In the .SVG format, path data is saved as XML code

Android You starting in Android 5.0 (API 21+) you can define your images as vector drawables (eg vector graphics). Studio will then create the images needed anything before API 21, if you set the min below 21. This is really handy for FAB icons and other images. Studio has a large number of built in vg that you can use or create you own.

How To

How To (2)

Using the vg Same as you would use any graphic. Call for it like normal, so "@drawable/ic_garfield_the_cat" ImageView, ImageButton, wherever you’d be able to draw a bitmap Can determine size, color, angle, etc.

Making a custom VSG Can be made with programs like Inkscape, Adobe Illustrator, or found by searching the web Inkscape is free Make sure filename is all lowercase! Studio gets mad otherwise

Image Asset

Image Asset

Image Asset (2) Depending on Icon Type, it will setup all the correct directories, replacing any files with the same name. Example Launcher Icons, defaults to the name ic_launcher, so it will replace the current launcher icon. Not 2.3.3 doesn't create round launcher icons. Notifications Icons, will create a set of them all the correct size, based on the API version. ActionBar and Tab Icons, will create icons base the themes.

Image Asset (3) ActionBar and Tab Icons Notification icons

Q A &