R a n j e e t N a r a y a nU I D e v e l o p e r

r a n j e e t . n s h m @ g m a i l . c o m

1

Graphic Design

Graphic Design

Ranjeet Narayan 2

It uses artistry such as typography visual arts and page layouts to communicate, educate or entertain.

It is the process of communicating visually using texts and images.

Ranjeet Narayan 3

Graphic Design History

Graphic design can be traced back into 14,000, When paintings and the development of written communication were expressed

In 1800 AD, Book of Kells, is considered one of the earliest form of Graphic design.It was a decorated, hand written version of the gospels of the Christian bible.

William Morris, Kelmscott press is considered a pioneer of the19th century into the Use of graphic design in story book & other publication.

As 20th and 21st centuries approached, graphic designs would be incorporatedinto Advertising, Architecture and Art in itself.

web

Ranjeet Narayan 4

Graphic Design UsesAdministrationAdvertising

Entertainment

Education

Free Hand• used for sketching and pre-digital design.

• Pencil• Markers

Creativity• The Mind is one of the biggest tools, because it expresses the ideasOf the artists and their imagination.

Ranjeet Narayan 5

Graphic Design Tools

Computers• Used for final product.• Design Software

• Maya• Photoshop• Dreamweaver• MS Word, PowerPoint, Excel etc

• Ideation – Integral to the design process– Generation of design concepts to solve a design problem.

• Usually freehand sketching is used to explore, study and communicate these design concepts

• Even today, and for the foreseeable future, many great design ideas are communicated via freehand sketching

• The “BEST” design engineers can immediately communicate an idea via a freehand sketch

Ranjeet Narayan 6

Freehand Sketching

• Required– Pencil, Paper and Eraser

• Do not use– Straight edges, templates, compasses etc.

They slow down the process and defeat the purpose of fast communication of ideas! Sketches are planned

• Visualize the sketch– Size of paper & scale– Orientation of the object– Minimum detail to communicate the idea– Type of sketch

• Oblique• Isometric• Orthographic

Ranjeet Narayan 7

Freehand Sketching

Ranjeet Narayan 8

Ranjeet Narayan 9

Photoshop

Ranjeet Narayan 10

Objective

Create graphics and manipulate images using thedifferent tools and plug-ins of Photoshop.

Be familiar with the Photoshop environment.

Understand the concept and use the Photoshop.

Ranjeet Narayan 11

What Is Photoshop

Photoshop is the leading professional image-editing program, released by Adobe. Photoshop is useful for both creating and editing images to be used in print or online. Easy to use, but full of high-quality features, Photoshop is the best choice for any image manipulation job.

Ranjeet Narayan 12

Using Photoshop

PowerPoint or Presentations

Publications and lay-outsHand-out, brochures

World Wide WebGraphics for web, web designs, navigations

Video Segmenting

Digital Materials

Ranjeet Narayan 13

Introduction of PhotoshopPhoto Restoration and manipulation.

Ranjeet Narayan 14

Introduction of PhotoshopWorking Colors and Shapes

Ranjeet Narayan 15

Introduction of PhotoshopWorking with Text

Ranjeet Narayan 16

Introduction of PhotoshopWorking with Images & Graphics

Ranjeet Narayan 17

Working with PhotoshopClick the “Search" menu and type “Photoshop”. You will see

dropdown menu with “Adobe Photoshop" inside, click this icon.

Ranjeet Narayan 18

Photoshop Interface

Ranjeet Narayan 19

Photoshop InterfaceThe menu bar consists of nine menus:

File, Edit, Image, Layer, Select, Filter, View, Window and Help.

Ranjeet Narayan 20

Photoshop Interface

Ranjeet Narayan 21

The Tool BoxThe toolbox contains many of the tools you will be working within

Photoshop. This contains tools for working with images in Photoshop.

Ranjeet Narayan 22

Understanding Layers

One of Photoshop’s most powerful features is the ability to create and use multiple layers within the same image.

A layer is literally what it sounds like:

one layer on top of another, all of which can be edited independently of each other and laid on top of or beneath one another and then later combined to form a single, flat image.

Ranjeet Narayan 23

Understanding Layers

One of Photoshop’s most powerful features is the ability to create and use multiple layers within the same image.

A layer is literally what it sounds like:

one layer on top of another, all of which can be edited independently of each other and laid on top of or beneath one another and then later combined to form a single, flat image.

Ranjeet Narayan 24

Understanding Layers

Paintbrush Symbol – This symbol (and the blue shading of the layer) notes

the currently active layer.

So what are all these options in the layers window?

Show / Hide Layer – When the eye icon is visible, the layer is displayed in your project. If the eye is clicked, then the layer is

hidden but not deleted.

Ranjeet Narayan 25

Understanding Layers

Link Icon – Indicates if the layer is currently linked to another

layer. When linked, layers act “locked” together (and will move with each other, accordingly), but still remain separate layers. Layers can be linked together by selecting one layer, and then clicking the boxes in the other layers to display the “link” icon (number three on the above list and image).

Ranjeet Narayan 26

Understanding Layers

Layer – Each layer has its own name (default is by

numbering). Click a layer’s name to edit on that layer.

Text Layer – Adding text creates a new text-specific layer.

Background – The Background is technically not a layer, however, it can be edited. It is the bottom-most portion of the

image.

Ranjeet Narayan 27

Graphics File Format

JPEG – The best platform for photographic images, textures and gradations.Very small file size: 96KB = 32KB.

GIF – Limited to 8 bit, 256 colors.Used for large areas of uniform color.Lossless compression. 2/3rds compression: 96KB = 64KB.Can assign 1 color as transparent & also use

animation.

Ranjeet Narayan 28

Graphics File Format

PSD – Photoshop’s native file format.

PNG – Raster graphics file format.Lossless data compression.supports palette-based images ( with palettes of 24-bit RGB or 32-bit RGBA colours ).

Ranjeet Narayan 29

Creating an Image Archive

Be sure to maintain the original file.

It is best to create your graphics files in TIF PSD whenever possible.

Then save the file as a JPEG or GIF format for web publishing.

30Ranjeet Narayan

Image Resolution

The number of pixels in a linear inch (ppi) is called image resolution.

The more ppi, the higher the image resolution, and the larger the file size.

The standard screen resolution is 72 ppi. Images used for the Web should have an image

resolution of 72 ppi.

31Ranjeet Narayan

Question - Answers

32Ranjeet Narayan

For More Query

C o n t a c tr a n j e e t . n s h m @ g m a i l . c o m

OR

Ranjeet Narayan