Teknik Penyuntingan Foto dan Desain Grafis WebLokakarya Pelatihan Penulisan Jurnalistik dan Pengelolaan Portal Website Kementerian Luar Negeri RIBandung, 1-4 Juni 2010

OlehCoky

Fauzi Alfi

�

Photos: Web or Print ?

Web Print

Graphics Type

Resolution

Color Mode

File Format

Raster Vector

RGB CMYK

ppi dpi

GIF, PNG, JPG TIFF, EPS, BMP

�

Graphics Type

VectorRaster

�

Color Mode

RGB CMYK

�

Resolution

Dots per inch (dpi) for printed output

Samples per inch (spi) for scanned input

Pixels per inch (ppi) for images viewed on a computer display

�

Resolution in Monitors

800 x 6001024 x 7681920 x 1440

> 54 ppi> 72 ppi> 133 ppi

Pixel per InchResolution

�

File Format for Web

GIF JPG PNGProduce smaller files256 different colors max.Lossless compressionSharpness in original imageTransparentAnimatedPoor in gradations of color and drop shadow

••••

•••

Compression/qualityThe file sizes can be very smallGradients and soft edges look goodDon’t support animation and transparency

••

•

•

20 % smaller than GIF16.7 million color imagesFaster and better than GIFDon’t support animation and transparency

••••

�

Optimize Your Photo

�

Slices

10

Issue : Jumbo or Tiny?

Jumbo Photo

Tiny Photo

11

Issue : Landscape, Portrait or Square?

1�

Issue : Propotional Resize?

1�

Issue : Own Gallery or Flickr?

1�

Issue : Best Software?

Adobe PhotoshopAdobe FireworksPaint Shop ProGimpAcorn

1�

The Three Pillars of Web Design

Website Design Metodology

UsabilityPurpose

Aesthetics

1�

From Concept to Execution

DefinitionDesign

Development

Testing& Launch

Maintenance

12 3 4

5

1�

Phase 1: Definition

Understanding site goalsGathering user needs and wants

Building a project plan

1�

Gathering User Needs and Wants

1�

Phase 2: Design

Creating the blueprint for the siteDesigning a plan for each page

Implementing user testingPutting together a content plan

Establishing “look-n-feel”Getting input from a focus group

�0

Sitemap: The Blueprint

�1

Sitemap: From Zero

��

Sitemap: Sketch Menus

��

Wireframe: Layout

��

Wireframe: Sketch

��

Visual Metaphor

��

Look and Feel

��

Phase 3: Development

Producing final Web graphicsContent development

Media developmentHolding it all together with HTML

Databases and programming

��

Phase 4: Testing and Launch

Quality assuranceLaunch day

��

Phase 5: Maintenance

Check broken link and pagesCheck an error script

Update and backup archieves

�0

No Grid

Review: Deplu.go.id

�1

Review: State.gov

Grid

��

Review: Deplu.go.idUnmeaning

Unmeaning

Text or Link?

Text or Link?

��

Review: Deplu.go.id

LinkText in bluebut it isn’tlink

��

Review: Deplu.go.id

Blank content

Text or Link?

Text or Link?

��

Review: Deplu.go.id

Error Script

��

Review: Deplu.go.id

Black space

Black space

��

Review: Deplu.go.id

Crowded

��

Review: Deplu.go.id

Can anybody sign in?

��

Review: Deplu.go.id

No Update

�0

Alert: Illegal Facebook Page

Did Deplu have Facebook Page?http://www.facebook.com/deplu

�1

Alert: Illegal Facebook Page

��

Official or Unofficial?

��

Sugesstions

Choosing the issuesCreating a dialog with audienceLayout with gridFollowing the latest trend

��

Exercise: Wireframe

Beranda

Tentang Kemlu Berita dan Agenda Kedutaan / Konsulat Kebijakan Karir Galeri Arsip

Sorotan Media

Siaran Pers

Pelayanan Publik

Tips

Kontak Kami

FAQ

Links

��

End