1
CONTENTS ADOBE SHORTCUTS 1 (PAGE-2) DIFFERENT FILE FORMATS AND THEIR USES (PAGE-6) MEASUREMENT CONVERSION (PAGE-11) LET’S TALK TYPE, LET’S TYPE TALK (PAGE-15) BUILDING A WEBSITE (PAGE-19) STANDARD IMAGE SIZES (PAGE-23) COLOURS (PAGE-27) CALLIGRAPHY (PAGE-31) CAMERA SHOTS AND ANGLES (PAGE-36)
PHOTOSHOP, AFTER EFFECTS, PREMIERE PRO SHORTCUTS (PAGE-40) DESIGN TERMS AND ABBREVIATIONS (PAGE-46) WORST MISTAKES DESIGNERS MAKE (PAGE-50) PAGE SIZES (PAGE-54) USEFUL RESOURCES (PAGE-58) FONTS WITH RESPECT TO PAPER SIZES (PAGE-62)
VW|2
VW|3
VW|4
VW|5
FILE DIFFERENT
FORMATS (and it’s uses)
BM
Ai
Bitm Imag File
Adobe Illustrator Artwork
EPS
EXP
GIF
JPE
Encapsulated Post Script
Export File Type
Graphics Interchange Format
Join Photogr Experts
TXT
PNG
PSD
PP
Text Message
Portable Network Graphics
Photoshop Document
Micro Power
Uses of some of the known File Formates VW|6
There are loads of file all of theme have diffe
BMP
RAW Untouched
Bit M
e formats out there, some are used more than the others, erent uses & functions.
MP
map ge e
CDR
DMG
Coral Draw
Apple Disk Image File
EG
MP3
nt graphic Group
MPEG Audio Layer 3
PT
osoft Point
Map File
DOC Document File Format
MOV
TIFF
Metal Oxide Varistor (File name estension for Quick Time Graphics)
Tagged Image File Format
RAW
WAV
Portable Document Format
Collection of Unprocessed Data
Wave Form Audio
EPS Vector
A universal file format popular for documents
VW|7
D I F F E R E N T F I L E F O R M A T S & I T ’S U S E S
VW|8
Ai
PSD
PNG
EPS
JPEG
- Illustrator Native File - Vector Based - File that can be Scalled
Most Used / Known File Formates Popular & Animated
GIF
Getting the Attention it Deserves
SVG
Used by Pros
TIFF
- Photoshop Native File - Raster Based - Files with set Dimmesion
- Raster Based - Transparent Background - Can’t be scaled larger - Making the most of a quality
Vector Based File to be modified in Illustration
- Raster Based - File with set Dimesion - Can’t be scaled larger - Ideal for Size
NOTE The above mentioned file types are commonly used & known for their great features.
IMAGE FOREMAT
MICROSOFT
GIF
JPEG
BMP
TIFF
EPS
RAW
X
W
PPT
In the end, different image file formates are used for different purposes.
FOR BUILDING WEBSITE / BLOG SVGS
Great content is definitely appreciated, sticking to the quality of image files is the thing & for that we need
are great and save space
IF YOU NEED TRANSPARENCY
JPEG
IF ANIMATION IS THE GOAL
PNG
are a perfect answer
VW|9
VW|10
ur
ve rs
ion
Me a s
em e
n o C nt
Inch
cm
mm
ft
m
2.54
25.4
0.083
25.4
PX 96
Multiply(x)
pt
p
yd
72
6
0.027
Divide(/)
VW|11
Meter
Milimeter
cm
mm
ft
in
cm
m
ft
in
100
1000
3.28
39.37
0.1
0.001
0.003
0.039
PX
pt
3779.52
2834.65
p
yd
PX
pt
p
yd
236.22
1.093
3.779
2.834
0.236
0.001
Multiply(x) Divide(/)
Centimeter
Feet
m
mm
ft
in
0.01
10
0.032
0.393
cm
m
in
304.8
12
mm
30.48 0.348
PX
pt
p
yd
PX
pt
p
yd
37.795
28.346
2.362
0.010
1152
836.99
72
0.333
VW|12
Points
Pixels
cm
mm
ft
0.026 0.264
m
0.749
m
in
ft
0.035 0.0003 0.001
0.0008 0.010
pt
0.0002
cm
in
0.013
p
yd
PX
mm
p
yd
0.062
0.0002
1.333
0.352
0.083
0.0003
Multiply(x) Divide(/)
Pica
m
ft
in
0.013
0.166
mm
0.004 4.233
Yards
cm
m
in
914.8
36
mm
91.44 0.914
PX
pt
cm
yd
PX
pt
p
16
11.999
0.423
0.004
3456
2592
216
ft
VW|133
VW|14
Let’s talk type, Let type talk VW|15
Traditional, conservative, shows reliability, popular in print media especially for headlines.
Serif
eg: Garamond, Times (New) Roman, Baskerville, Bodoni, Caslon Modern, Minimalist, Shows silplicity, Most prevalent for digital text.
Sans Serif eg: Futura, Helvetica, Optima, Arial, Verdana
VW|16
Clear and bold, eyecatching, quirky, adds a vintage vibe to the design(silimar to most typewriter fonts)
Slab Se rif eg: American Typewriter, Rockwell, Courier More casual & homespun feel,tend to feel timeless, commonly used for invitations & announcements,very fluid and graceful.
eg: Brush script, Comic sans, Sign painter VW|17
Tracking
normal tracking
loose tracking
tight tracking
Leading Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone.
Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone.
Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone.
PROPER
WIDE
NARROW
Allignment Flush left VW|18
Centred text
Justified t e x t
Flush right
BUILDING A WEBSITE
1
Website Planning
Having a clear understanding of your site’s mission will help inform your design, content, and structural choices later on, so step one is to get that mission nailed down.
What is the purpose of the website and who is it for? How will your visitors use the website and who will it bennefit from user traffic?
3
Website Developing This is a part where your ideas and mockupsget turned into the real, digital product. The step where tou actually “make” (or develop) your website.
Handcoding a website from scratch using HTML, CSS, and javaScript. Using CMS (Content Management System) like Wordpress.
2
Website Design
Web design is the art of creating the asthetics and usability if a website, Making sure thet the site is pleasing to the eye and the layout makes sense ans is easy for people to use when visiting from their computers, tablets, or smartphones.
Using designing tools like Photoshop, XD or Webflow.
4
Website Hosting
Whether tou’have handcoded the pages of your website or put the whole thing together through wordpress, you’ll need to get your content on the internet in order for your website to be live.
Securing a Domain name. Paying for a web hosting service.
VW|19
MAINTAINING
A WEBSITE
1 2 3 4
Annually Thoroughly review and test the entire or after any website updates Set aside time to methodically and thoroughly review all pages of the website. You may find broken links, features that don’t work or areas that can use improvement.
Test your website forms/checkout process
quarterly or after any Make sure to regularly test all calls to action and points of contact/sale, such as “Contact Us” forms and the checkout updates process on your website.
Review your KPIs, SEO, and analytics reports monthly In order to gauge your website’s performance effectively, you must set and measure the KPIs (key performance indicators), search engine ratings, and general website analytics for at least a month.
Security updates and bug fixes
monthly or as patches are released
Be sure that both your web developer and hosting provider updates the software and install upgrades, security patches, bug fixes, or any other updates that may compromise the operating system, web server, database, CMS, etc.
VW|20
5 6 7 8 9
Update dates and copyright notices
ly
annual
Review and update any copyright dates or any datespecific text or references throughout your website. Your homepage especially should contain no stale or outdated information (e.g., a year-old press release).
annually Check backups Be sure that your entire website is backed up — the website itself and the data. Have your web developer or hosting company thoroughly check the backups to ensure they are working and that the data is retrievable.
Test browser compatibility
annually
As time passes, website layouts or technology may become incompatible with new browsers. Regularly review and test your website in various versions of mainstream browsers: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox and Apple Safari.
annually Renew your domain names Ensure that all your domain names are renewed in a timely manner. Your website’s domain name is your most prized possession. Allowing it to expire can mean catastrophe.
Review and update legal disclaimers
annually
Review and update your privacy policy, site terms and conditions of use, terms of sale and any disclaimers to ensure they are compliant with policies and laws.
VW|21
TYPES OF WEBSITES
DOMAIN PLUGINS EXTENSIONS
•
Homepages.
•
E-commerce websites.
•
.COM (commerce)
•
Blogs.
•
.NET (network)
•
Portfolio websites.
•
.IN (India)
•
Landing pages.
•
.ORG (Organisation)
•
Social media websites.
•
Directory and contact
•
Adobe Acrobat
•
Adobe Flash.
•
Java.
•
QuickTime.
•
RealPlayer.
•
Shockwave.
pages.
WHERE TO BUY THESE? DOMAINS
TEMPLATES
IMAGES
•
Big Rock
•
ThemeForest
•
Stock Photo Secrets
•
GoDaddy
•
Mojo Marketplace
•
HostGator
•
TemplateMonster
•
Bluehost
•
Etsy
•
DreamHost
•
Creativemarket
• • • • •
Shop Shutterstock Photocase iStock Adobe Stock Getty Images
VW|22
VW|23
VW|24
VW|25
VW|26
VW|27
VW|28
VW|29
VW|30
Calligraphy Calligraphy is a visual art related to writing.Calligraphy, the art of beautiful handwriting. The term may derive from the greek words for “beauty” (kallos) and“to write” (graphein). odern calligraphy ranges from functional inscriptions and designs to fine-art pieces where the letters may or may not be readable. Classical calligraphy differs from typography and non-classical hand lettering, though a calligrapher may practice both.
Tools for Calligraphy
Nib Pens
Brushes
Nib Holders
Nib Box
Markers
Clligraphy set
Brush Pens
Poster Nib VW|31
Ink and Papers
Calligraphy Worksheets
Rice Paper
Paper
Calligraphy Ink
Paint
Chinese inkstone,inkstick
VW|32
Nibs and Angles
VW|33
Follow Path
VW|34
VW|35
Camera Shot Size A camera shot is composed of the series of frames that are shot uninterrupted from the moment the camera starts rolling until it stops. Camera shots are an essential aspect of filmmaking and video productions, because by combining different types of shots, angles and camera movements, the filmmakers are able to emphasize specific emotions, ideas and movement for each scene.
VW|36
Extreme Close Up CloseUp Medium Close up
Medium Shot
Cowboy Shot
Medium Full Shot
Full Shot
VW|37
Camera Angle The camera shot angle is used to specify the location where the camera is placed to take a shot. The position of the caera in relation to the subjects can affect the way the viewer perceives the scene. A scene may be shot simultaneously from multiple camera angles to amplify the cinematic
VW|38
Overhead
Eye level
Shoulder Level
Hip level
Knee level
Ground level VW|39
Photoshop Shortcut ~
`
Switch Open Tabs
10% Opacity
20% Opacity
2
1
QuicK Mask
Tab
Q
W
Quite
A
40% Opacity
3
Magic Wand
Path Select
Caps Lock
30% Opacity
4
Eraser
E
Close
Clone Stamp
S
Select All
Zoom Tool
Z
R
Merge Layer
D
Save
Switch fg/Bg
Type Tool
T
Rulers
F
Crop Tool
Paint Bucket
G
Last Filter
Alt
H
Brush Tool
Shift
Win
Copy
Proo Colo
QuicK Mask
Group Layers
Move
To switch between within groups..................................................
Ctrl
Cut
Y
Transform
Paste
Undo/ Redo
7
History Brush
V
Shift
7 O
6
Screen Modes
DeSelect
C
60% Opacity
5
Rotate Tool
Default Colors
X
50% Opacity
B
Color Bal.
+
Tool
Space
SWITCHING TOOLS SELECTING Draw Marquee from Center......................................................................... Alt
+ Marquee Shift
Add to a Selection.............................................................................................
Subtract from a Selection........................................................................................ Intersection with a Selction....................................................................
Shift
+ Alt Drag Selection
Make Copy of Selection w/ Move Tool........................................................ Alt
+
Make Copy of Selection not in Move Tool........................................ Ctrl
Drag + Selection
+ Alt
Move Selection (in 1-pixel increments)...................................................................................
Move Selection (in 10-pixel increments).........................................
VW|40
Alt
Shift
+
Arrow Keys Arrow Keys
ts
80% Opacity
7
Shape Tool
U
K k
I
Hue/ Sat.
J
3D Camera New File
K
Marquoo Tool
M
O
QuicK Mask
Copy Layers
Select All
0
P
Open
QuicK Mask
L
Prefs. Preset Brush up
< ,
Levels
: ;
Preset Brush Down
>
. Alt
{ [
Pen Tool
Hide/ Show Guides
F9
+ =
Zoom In
F12
Zoom Out
} ]
- Brush Size Move Layer down
“ ‘
Revert
Actions Palette
F8
_ -
Fit Screen
Dodge Tool
Invert
Info Palette
F7
100% Opacity
9
Eye Dropper
QuicK Mask
Hide Extras
N
90% Opacity
8
Layer Palette
F6
F5
70% Opacity
of ors
Color Palette
Brushes Palette
Backspace + Brush Size
Toggle Layer Mask
| \
Move Layer up
Hide/ Show Grid
Enter
? /
Shift
Menu
Ctrl
Select all Opaque Pixels on Layers................................ Ctrl
+
Restore Last Selection................................................... Ctrl
+
Click Layer Thumbnail (in Layers Panel)
Feather Selection.....................................................................
Shift
+
D
Shift
+
F6
Move Marqee while drawing Selection.....................................................
Hold Space while drawing marquee
VIEWING Hide all tools and panels.....................................................................................
Tab
Hide all panels except toolbox and Options......................................
Shift
+
Tab
Scroll images left or right in window...................................... Ctrl
+
Shift
+
Page up/down
Jump/zoom to part of image........................................... Ctrl
Shift
Ctrl
Drag in + Navigator Panel
Ctrl
+
0
Double-click or on Hand Tool
+ Alt
+
0
or
Fit to screen................................................................ 100% View Level (Actual Pixels).................................
+
Double-click on Zoom Tool
VW|41
After Effects Help
Interrupt running script
esc
Deselect all
Effect Control
F2
F3
F1 Minimize or restore
~ panel under
`
pointer
1 Set Marker
2 Set Marker
2
1
Tab
Q
Caps Lock
A
F6
5 Set Marker
6 Set Marker
7 Set
3
4
5
6
7
Effects Property
Scale Property
Zoom Tool
X
Opacity
R
Scroll to current Timeline
D
Scroll topmost layer
Z
Rotate Property
E
S
Shift
F5
4 Set Marker
W Anchor Point Property
F4
Display Snapshot
3 Set Marker
Rotate Tool
Mark & Shape tool
Display Snapshot
Layer Switches
T
Mask Feather Property
F Camara Tool
C
Pan Behind
Y
Text tool
Pen Tool
Hand Tool
G Selection Tool
V
H
Begining of work area
B
Brush Tool
Play / Pause
Ctrl
Win
Alt
Space
Tools SHORTCUTS Cycle through tools......................................................................... Alt-click tool button (In Tools Panel) Activate Selection tool......................................................................V Activate Hand tool............................................................................H Activate Zoom in tool........................................................................Z
Activate Zoom Out tool......................................................Alt (when Zoom in tool is active Activate Rotation tool.......................................................................W Activate Roto Brush tool................................................................Alt + W Activate and cycle through Camera tool........................................C Activate and cycle through Brush,clonestamp and eraser tool......................Ctrl + B
VW|42
s Shortcuts Display Snapshot
7
8 Set Marker
9 Set Marker
0
8
9
0
U
I Previous item
J
N
Mask Properties
M
L < ,
Zoom Out
>
.
: ; Zoom In
+ =
Zoom In
{ [
P
Audio Level Property
K
F11
Position Property
O
Next item
_ -
Set Marker
Zoom in Single Frames
? /
F12
Zoom Out
Move in Point
“ ‘
Revert
3D View 3
3D View 2
F10
Layer Out Point
Layer In Point
Properties with Keyframes
End of work area
3D View 1
F9
F8
F7
t Marker
easy ease layout
Display Snapshot
Safe Zones
Backspace
out } Movepoint ]
Rename
100% Zoom
Toggle Composition & timeline panel
| \
Enter
Shift
e
Alt
Menu
Ctrl
Activate Pan Behind Tool......................................................................Y Activate cycle through mask and shape tool.........................................Q Activate cycle through Type tool............................................................Ctrl + T Activate cycle through Pen tool.............................................................G Activate cycle through Puppet tool........................................................Ctrl + P
e)
VW|43
Premiere Pro esc
~
`
F1
F2
F3
F4
F5
Camera 1
Camera 2
Camera 3
Camera 4
Camera 5
1
2
3
4
5
Go to in Point >
Go to in Point <
Tab
Q
W Track Select Tool
Caps Lock
A
Snap on/ off
S
Zoom Tool
Rewind
E
R Clear in Point
D
Rate Stretch Tool
Z
Shift
Eject
X
F6 Camera 6
6
7
Track tool
Split tool
T
Clear Out Point
F
Razor Tool
C
C
Y
Record
Hand Tool
G Selection Tool
V
H
Ripple edit tool
B
Play / Pause
Ctrl
Win
Alt
Space
Tools SHORTCUTS Shuttle left......................................................................J Stop................................................................................K Shuttle right...................................................................L Move one frame +/-........................................................L/R Arrows Play / Stop......................................................................Space Render............................................................................Enter Mark in Point..................................................................I Mark Out Point.................................................................O Zoom In...........................................................................= Zoom Out........................................................................ . (dot)
VW|44
o Shortcuts
Camera 7
Camera 8
7
F10
_ -
Record
Camera 9
8
9
0
Slide tool
Mark in
Mark Out
Pen tool
U
I
O
P
Shuttle left
Roil edit tool
K
L
Marker
M
: ;
Shuttle right
Shuttle Stop
J
N
F9
F8
F7
Revert
Insert
< ,
Overwrite
>
.
F11
+ =
Zoom Out
{ [
Zoom in Single Frames
? /
F12
Zoom In
Trim Back
“ ‘
} ]
Backspace Trim Fwrd
extract
| \
Play Around
open
Enter
100% Zoom
Shift Prev Edit
e
Alt
Prev Frame
Prev Edit
Next Frame
Selection Tool......................................................................V Razer Tool............................................................................C Ripple....................................................................................B Track Select tool...................................................................A Roll Edit Tool.........................................................................N Zoom In/Out..........................................................................Enter Snap (turn on/off)..................................................................S Slide Edit tool.........................................................................U Rate Strech Tool.....................................................................K Pen Tool.................................................................................P
VW|45
Design Terms Elements of Design
They are the building blocks of composition in art. When we analyse any drawing,painting,sculpture or design, we examine these component parts to see how they combine to create the overall effect of the artwork. It comprises line, shape, form,color, texture, space and tone.
Principles of Design
Techniques by which we construct compositions and create works of art. Emphasis, Balance, Rhythm, Variety, Movement, Proportion and Harmony.
Balance
In design, balance involves the placement of elements on the page so that the text and graphic elements are evenly distributed. There are three ways to achieve balance: symmetrically, asymmetrically and radially.
Hierarchy
Hierarchy is the principle of arranging elements to show their order of importance.
Gestalt Minimal
The term minimalism is also used to describe a trend in design and architecture, wherein the subject is reduced to its necessary elements.
Rule of Thirds
The rule of thirds simply states that if you take a canvas and divide it into three equally sized horizontal sections and three equally sized vertical sections, the resulting grid provides a sort of “roadmap” that helps you choose where to place your design elements.
Ergonomics White space Mock-up Typo
VW|46
Gestalt is an organized whole that is perceived as more than the sum of its parts.
Ergonomics is the process of designing or arranging workplaces, products and systems so that they fit the people who use them. White space—sometimes called negative space—is the part of the design that is unmarked by imagery or text. A mock-up is a real or digital model used to test early design ideas and see how they could look in the real world. A mistake (such as a misspelled word) in typed or printed text.
Kerning
Kerning is the adjustment of space between pairs of letters in the same word.
Leading
Pronounced “ledding,” leading (also known as line-height) is the space between two lines of text.
Tracking
Tracking is the adjustment of space for groups of letters and entire blocks of text. Tracking affects every character in the selected text and is used to change its overall appearance.
Legibility
Legibility refers to how well one character can be distinguished from another.
Lorem Ipsum
Lorem ipsum (also known as dummy text) is used as a placeholder that will be swapped out later with actual copy.
Em Space
An em space is a typographical space measuring one em in width.Traditionally, for a font that uses the Latin alphabet, an em space is approximately the width of a capital letter M.
En Space Screen Printing
An en space is a space that takes up only half a point size, named after the typography unit of measurement n. Screen printing is a printing technique where a mesh is used to transfer ink onto a substrate, except in areas made impermeable to the ink by a blocking stencil.
Lithography
Lithography is a method of printing originally based on the immiscibility of oil and water. The printing is from a stone (lithographic limestone) or a metal plate with a smooth surface.
Logo Lockup
Logo lockup is the exact arrangement of the individual pieces to create a new whole. Lockups can also be made from a main logo and a department name or a logo and slogan.
Wireframes
Basic images that display the essential functions of a website are known as wireframes. Designers use wireframes to show how a page or site works.
Web Hosting
Web hosting service (often shortened to web host) is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.
Domain
Domain name is the address of your website that people type in the browser URL bar to visit your website.
Plug in
A plugin is a piece of software that acts as an add-on to a web browser and gives the browser additional functionality. VW|47
Abbreviations RGB CMYK
CMYK is a 4-color printing process made up of cyan, magenta, yellow and key (black).
PMS
The Pantone Matching System (PMS) is a standardized color reproduction system. Every hue is given a number, making it easy for people to reference and reproduce the same colors.
JPEG
Joint Photographic Experts Group is also known as JPEG, the most widely used raster file type for web-based designs. JPEGs are compressed files that load quickly. You’ll typically see them used for emails, banner ads, online photos, and pretty much anything else online.
PNG
PNG stands for Portable Network Graphics, a web-based format that does not lose quality when compressed.
Portable Document Format, used to display documents in an electronic form independent of the software, hardware or operating system they are viewed on.
GIF
VW|48
RGB stands for red, green and blue, the three colors of light typically used to display images on a digital screen.
GIF or Graphics Interchange Format is a raster file format that supports animation and transparency. GIFs can only display up to 256 colors, allowing for very small file sizes.
SVG
Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.
PSD
PSD or Photoshop Document is the uncompressed working raster image file created by designers in Adobe Photoshop.
TIFF
TIFF stands for Tagged Image File Format, a common format for exchanging raster images between applications. TIFF produces a higher quality image than a JPEG or PNG, and is widely used among publishing industries and photographers.
AIFF
Audio Interchange File Format (AIFF) is an audio file format standard used for storing sound data for personal computers and other electronic audio devices.
DPI
Dots per inch is a measure of spatial printing, video or image scanner dot density, in particular the number of individual dots that can be placed in a line within the span of 1 inch.
PPI
UI
UX
Pixels per inch and pixels per centimetre are measurements of the pixel density of an electronic image device, such as a computer monitor or television display, or image digitizing device such as a camera or image scanner. User interface is the design of applications for computers, mobile devices and other devices to maximize their usability and the user experience. The user experience is how a user interacts with and experiences a product, system or service. It includes a person’s perceptions of utility, ease of use, and efficiency.
HTML
HTML stands for HyperText Markup Language. This is the standard coding language for websites that creates all of the fonts, colors, graphics and links you see online.
CSS
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.
SEO
Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.
CMS
A content management system (CMS) is an application that is used to manage web content, allowing multiple contributors to create, edit and publish.
GUI
A graphical user interface (GUI) is a type of user interface through which users interact with electronic devices via visual indicator representations.
VW|49
SCALING USING RASTER IMAGES HARD TO READ SCALING
HIERARCHY BAD KERNING POOR READABILITY
HARD TO READ PLACING THE ELEMENTS ARBITRIARILY POOR READABILITY USING RASTER IMAGES BAD KERNING AVOID CHOOSING THE RIGHT COLOUR PLACING THE ELEMENTS ARBITRIARILY MISMATCHING FONTS BAD KERNING AVOID CHOOSING THE RIGHT COLOUR MISMATCHING FONTS BAD KERNING POOR READABILITY SCALING
T WOR S USING RASTER IMAGES M E ISTAK S SCALING HARD TO READ
POOR READABILITY
HIERARCHY
FAILING TO CREATE CONTRAST
MISMATCHING FONTS BAD KERNING
POOR READABILITY MISMATCHING FONTS PLACING THE ELEMENTS ARBITRIARILY
DESIGNERS HARD TO READ
AVOID CHOOSING THE RIGHT COLOUR BAD KERNING USING RASTER IMAGES
A HARD E TO READ
PLACING THE ELEMENTS ARBITRIARILY K M SCALING FAILING TO CREATE CONTRAST POOR READABILITY
HARD TO READ BAD KERNING SCALING MISMATCHING FONTS AVOID CHOOSING THE RIGHT COLOUR FAILING TO CREATE CONTRAST POOR READABILITY
HARD TO READ BAD KERNING SCALING
USING RASTER IMAGES SCALING VW|50
HIERARCHY BAD KERNING
POOR READABILITY
PAGE NO. 1
1. Poor Readability NOT THIS Another common mistake is to attempt to fit too many words into one line of text. For readability purposes, 50 to 60 characters per line is the ideal length.
LIKE THIS Another common mistake is to attempt to fit too many words into one line of text. For readability purposes, 50 to 60 characters per line is the ideal length.
3. Bad Kerning NOT THIS Fami ly ni ght flick a nd fl oat
2. Mismatching Fonts Avoid too many fonts
Stick to 2-3 fonts maximum
4. Avoid choosing the right colour NOT THIS
Ineffective colour combinations
LIKE THIS Family night flick and float
LIKE THIS
(Organized, neat and easy to read)
Readability and grab viewers eye
5. Placing elements arbitrarily NOT THIS Not aligning elements
6. Failing to create contrast
Inadequate use of contrast
LIKE THIS Use grids to arrange element neatly
Use colours of contrasting shades and level of saturdation.
VW|51 PAGE NO. 2
7. Ignoring visual hierarchy rules
8. Hard to read
NOT THIS Ignoring the
TEXT THAT EASY TO READ
rules of hierarchy
LIKE THIS TEXT THAT EASY TO READ
Read First Second Third
9. Inapproriate font combinations failing to choose the right font Its important that mood of your font should match the design.
11. Using raster images NOT THIS
Raster
LIKE THIS
Vector
10. Inadequate space between lines NOT THIS Having too little space can make the blocks appear too tight and crowded.
LIKE THIS It allows reader to take a break and process the information. Good lines spacing is organiz and helps the readeability of your text.
12. Striving for complete symmetry The key is to maintain balance and harmony in your design.
Symmtrical can produce a more eye catching design.
VW|52
PAGE NO. 3
13. Not scaling properly NOT THIS
LIKE THIS
1.
Non-designers are also at times reluctant to use large and small scale. 2. This will not only hurt your credibility in the end 3. that the elements are not stretched in ways that were not 4. intended so that they do not become distorted.
Certain elements are increased in size to create a
Dramatic Effect
14. Not Being Consistent
Another mistake you should steer clear of is the lack of consistency and repetition in your designs.
BOLD + LIGHT Pick a font, pick a colour palette and stay consistent to create a sense of unity and cohesiveness
VW|53 PAGE NO. 4
Page Sizes A Series sizes
841x1189 mm
594x841 mm
Posters Architectural plans
Posters Window displays
A2
A3
A0
420x594 mm
297x420 mm
Posters Exhibition graphics
Posters Art & design visuals
A5
A6
148x210 mm
105x148 mm
Books Flyers Brochures
Invitations Postcards Leaflets
A8
52x74 mm Business cards
VW|54
A9
37x52 mm Vouchers Tickets
A1
A4
210x297 mm Letterheads Brochures Booklets
A7
74x105 mm Tickets
A10
26x37 mm Stamps
B Series sizes B2
500x707 mm
B0
B1
1000X1414 mm
707x1000 mm
Posters Enlarged photos
Posters Enlarged photos
B3
B4
353x500 mm
Small Posters
Small posters Paintings
B5
B6
250x353 mm Little posters Notes
B7
88x125 mm
176x250 mm
25x176 mm
Menu Magazines
Booklets Flyers
Small Notebooks Menus Flyers
B8
B9
B10
62x88 mm
44x62 mm
31x44 mm
Flyers Business cards
Flyers Labels
Vouchers Small cards
VW|55
C Series sizes C2
C0
C1
917X1297 mm
648X917 mm
C3
C4
458X648 mm
324X458 mm
229X324 mm
C5
C6
C7
162X229 mm
114X162 mm
81X114 mm
C8
C9
C10
57X81 mm
40X57 mm
28X40 mm
• The C series is commonly used for envelopes. • As a general rule of thumb, the A series paper sizes fit into a C series envelope of the same number. VW|56
ISO 216 specifies tolerances for the production of A, B & C series paper sizes as follows: • ±1.5 mm (0.06 in) for dimensions up to 150 mm (5.9 in) • ±2 mm (0.08 in) for lengths in the range 150 to 600 mm (5.9 to 23.6 in) • ±3 mm (0.12 in) for any dimension above 600 mm (23.6 in) North America, including the US, Canada and parts of Mexico, is the only area of the first world that doesn’t use the ISO 216 standard paper sizes, instead they use Letter, Legal, Executive and Ledger/Tabloid paper sizes
US Paper sizes Legal
216x356 mm
Half Letter
216x279 mm
Junior Legal
Ledger/ Tabloid
140x216 mm
127x203 mm
Letter
279x432 mm
VW|57
20
Useful Resources
T VW|58
21
Blogs B
Design Week Creative Boom Made by Folk
01
Logo Canva Logo Garden Tailor Brands GraphicSprings
02
Illustration Undraw ManyPixels IRA Design Interfacer
03
VW|59
Website Upwork Dribble Corofot 99designs
04
Typeface Linotype MyFonts
T
TypeTrust Google Fonts
Images Pexel Freepik Pixabay Unsplash
VW|60
06
05
scribble notes
VW|61
VW|62
FONT PAPER With respect to
VW|63 Open
Aa
pt 14
Aa
pt 12
Aa
pt 10
Post Card 101.6 x 152
VW|64
2.4 mm
Open
Aa
pt 18
Aa pt 14 Aa
pt 12
A4 297 x 210 mm
VW|65
VW|66 pt 18
Aa
pt 12
Aa pt 14
Aa
VW|67
pt 24
Aa
pt 16
Aa pt 19
Aa
A3
297 x 420 mm
Letter 215.9 x 279.4 mm
Aa
pt 8
Aa
pt 7
Aa
pt 6
Visiting Card 88.9 x 50.8 mm
VW|68
Aa
pt 14
Aa
pt 12
Aa
pt 10
A5 210 x 148 mm
VW|69
VW|70