Graphic Design | Design Tools | Photoshop

1. R anjeet N arayan
U 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

2. 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.

3. Ranjeet Narayan 3
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 the
19th century into the Use of graphic design in story book & other publication.
As 20th and 21st centuries approached, graphic designs would be incorporated
into Advertising, Architecture and Art in itself.

4. web
Ranjeet Narayan 4
AdministrationAdvertising
Entertainment
Education

5. Free Hand
• used for sketching and pre-digital design.
•Pencil
•Markers
Creativity
• The Mind is one of the biggest tools, because it expresses the ideas
Of the artists and their imagination.
Ranjeet Narayan 5
Computers
• Used for final product.
• Design Software
•Maya
•Photoshop
•Dreamweaver
•MS Word, PowerPoint, Excel etc

6. • 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

7. • 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

8. Ranjeet Narayan 8

9. Ranjeet Narayan 9

10. Ranjeet Narayan 10
Create graphics and manipulate images using the
different tools and plug-ins of Photoshop.
Be familiar with the Photoshop environment.
Understand the concept and use the Photoshop.

11. Ranjeet Narayan 11
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.

12. Ranjeet Narayan 12
 PowerPoint or Presentations
 Publications and lay-outs
Hand-out, brochures
 World Wide Web
Graphics for web, web designs, navigations
 Video Segmenting
 Digital Materials

13. Ranjeet Narayan 13
Photo Restoration and manipulation.

14. Ranjeet Narayan 14
Working Colors and Shapes

15. Ranjeet Narayan 15
Working with Text

16. Ranjeet Narayan 16
Working with Images & Graphics

17. Ranjeet Narayan 17
Click the “Search" menu and type “Photoshop”. You will see
dropdown menu with “Adobe Photoshop" inside, click this icon.

18. Ranjeet Narayan 18

19. Ranjeet Narayan 19
The menu bar consists of nine menus:
File, Edit, Image, Layer, Select, Filter, View, Window and Help.

20. Ranjeet Narayan 20

21. Ranjeet Narayan 21
The toolbox contains many of the tools you will be working within
Photoshop. This contains tools for working with images in Photoshop.

22. Ranjeet Narayan 22
 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.

23. Ranjeet Narayan 23
 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.

24. Ranjeet Narayan 24
 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.

25. Ranjeet Narayan 25
 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).

26. Ranjeet Narayan 26
 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.

27. Ranjeet Narayan 27
 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.

28. Ranjeet Narayan 28
 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 ).

29. Ranjeet Narayan 29
 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.

30. Ranjeet Narayan
30
 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.

31. 31Ranjeet Narayan

32. 32Ranjeet Narayan
Contact
ranjeet.nshm@gmail.com
OR

33. Ranjeet Narayan