Photoshop for Web 2.0

ใช Photoshop ออกแบบเว็บสมัยใหม หน่ึงวันสรางงานดีไซน • ออกแบบใหใชงาย • สไตลเว็บ 2.0

สารบัญ หนา

ขอมูลทั่วไปของหลักสูตร3 2

ความรูพื้นฐานเกี่ยวกับ Photoshop3 4

องคประกอบศิลปแบบงาย: รูป • สี • ฟอนท3 5

แนวทางตัวอยางและแรงบันดาลใจ3 6

ลักษณะเดนของเว็บสมัยใหม หรือเว็บ 2.03 7

เร่ิมตนทำโครง หรือ Wireframe3 8

การวางเลยเอาทโดยคำนึงถึง Grid3 9

การลงสี สรางรูป3 11

ปญหาเรื่องสีเพี้ยน3 14

การตัดรูปเพื่อนำไปใชในเว็บไซต3 15

ปฎิบัติการ : Workshop3 16

หนา 1

ขอมูลท่ัวไปของหลักสูตร

ชื่อหลักสูตร

ภาษาอังกฤษ: Photoshop for Web 2.0

ภาษาไทย: ใช Photoshop ออกแบบเว็บสมัยใหม

URL: http://www.smallbooks.org/photoshop-for-web-2-0

คำอธิบาย

ปรับวิธีคิดเกี่ยวกับการออกแบบกราฟฟคบนเว็บใหเนนที่การเขาใจงายใชงาย (Usability), สวยงามเรียบหรู สไตลเว็บ 2.0

สำหรับผูมีพื้นฐาน Photoshop มากอน

หลักสูตรนี้เปนหลักสูตรที่สอนใหผูเขาอบรมสามารถใช Photoshop ออกแบบเว็บไซตไดอยางสวยงาม และปรับแกไดงาย เชน

การใช Layer Style, การใช Layer Mask, การใชชุด Gradient สำเร็จรูป, คลังปุม และ User Interface ตางๆ กับใสใจในระยะ

และขนาดของวัตถุแตละชิ้น, การใช Grid+Guide ที่เหมาะสม, การใช Vector Object และ Smart Object, การปรับแตงรูปใน

ระดับ Pixel (Pixel Perfect) นอกจากนั้นยังเปนการใสใจในการ Export ไฟลรูปสำหรับใชในเว็บไซต ทั้ง jpg, gif, png (8 bit),

png (24 bit)

หัวขอสัมมนา

ชวงเชา 9:00 - 12:00 น.

• พื้นฐานการออกแบบดิจิตอล, แหลงขอมูลองคประกอบศิลป

• ลักษณะเดนของเว็บสมัยใหม หรือสไตลเว็บ 2.0

• การใช Layer Style และสรางสไตลเพื่อใชในอนาคต

• การใช Layer Mask เพื่อสรางขอบเขตที่จะนำวัตถุมาแทน (เชนรูปภาพ, วิดีโอ, สไลด)

• การใชชุด Gradient แบบเว็บ 2.0

• คลังปุม และ User Interface ตางๆ

• การใสใจกับระยะและขนาดของวัตถุแตละชิ้น, การใช Grid+Guide

• การใช Vector Object และ Smart Object

• แนวทางของ Pixel Perfect

• การ Export File (Save for web) ทั้งในรูปแบบ jpg, gif, png (8 bit), png (24 bit)

ชวงบาย 13:00 - 16:00 น.

• ปฏิบัติการออกแบบเว็บ โดยตั้งโจทยของแตละคนเอง (อาจทำมากอน แลวมาปรับแตงในชั้น)

• วิทยากรจะชวยใหความคิดเห็นเกี่ยวกับงานออกแบบ

Photoshop for Web 2.0 by SmallBooks.org

หนา 2

หลักสูตรน้ีเหมาะสำหรับ

• ผูสนใจทั่วไป, ผูประกอบการที่ตองการใช Photoshop ออกแบบเว็บไซตของตนเอง

• ฝายไอที, ฝายดูแลเว็บไซต, ฝายประชาสัมพันธ, ฝายการตลาด ขององคกรตางๆ

• นักออกแบบเว็บไซต ที่ตองการมุมมองการออกแบบเว็บสมัยใหม

พื้นฐานความรูของผูเขาอบรม

• มีพื้นฐานในการใชคอมพิวเตอรและการหาความรูในอินเตอรเน็ท

• มีพื้นฐานการใชงาน Photoshop

ส่ิงท่ีจะไดรับจากการอบรม

• เขาใจหลักการใช Photoshop ออกแบบเว็บสมัยใหมที่สวยงามเรียบงายได

วิทยากร

ครูเมน (จักรกฤษณ ตาฬวัฒน) iMenn.com

Art Director บริษัทไทเกอร ไอเดีย จำกัด (www.tigeridea.com)

ลิขสิทธิ์

ลิขสิทธิ์ของเอกสารและหลักสูตรนี้เปนของนายจักรกฤษณ ตาฬวัฒน แตอนุญาตใหดัดแปลง เผยแพร และนำไปใชเชิง

พาณิชยได โดยตองอางที่มา http://www.smallbooks.org/photoshop-for-web-2-0

ตามสัญญาอนุญาต http://creativecommons.org/licenses/by/3.0/th/

ประวัติการแกไข

11 มิ.ย. 25533 เผยแพรครั้งแรก

Photoshop for Web 2.0 by SmallBooks.org

หนา 3

ความรูพื้นฐานเก่ียวกับ PhotoshopPhotoshop เปนโปรแกรมแตงรูปที่มีลิขสิทธิ์ ราคาประมาณ 3 หมื่นบาท มีความสามารถสูงมากจนทำใหงานในระดับมืออาชีพ

จำนวนมากยอมเสียคาใชจายดานโปรแกรม หากนำมาใชแตงรูปพื้นฐาน แนะนำใหใชโปรแกรมทดแทนอื่นๆ ดีกวา เชน Gimp

หรือคนคำวา Photoshop replacement จะมีทั้งโปรแกรมแจกฟรี และทั้งที่มีคาใชจายต่ำกวา

แตสำหรับการทำเว็บที่ซับซอน ใช Layer เยอะ (100+) ตองการมีทั้ง Vector และ Bitmap โปรแกรมนี้จะเหมาะที่สุดในเวลานี้

พื้นฐานการแตงสี

ควรทดลองใชเมนูตางๆ ใน Image -> Adjustment แนะนำใหใช Level เปนหลัก เมื่อคลองแลวใหหัดใช Curve

พื้นฐานการซอนภาพ

ควรลองสรางรูปที่มีหลายชั้นงาน (Layer) แลวลองปรับขยาย/หมุนรูปดู

หลังจากนั้นใหเรียนรูเรื่อง Layer Mask ที่จะทำใหสามารถซอนทับภาพได

พื้นฐานการรีทัช

ควรลองใชเครื่องมือ Clone Stamp Tool, Healing Brush, Patch Tool เพื่อการรีทัชภาพเบื้องตน

พื้นฐานการเลือกพื้นท่ี/วัตถุ (Selection)

มีทั้งการเลือกพื้นที่โดยเครื่องมือ Marquee ซึ่งมีทั้งสี่เหลี่ยม/วงกลม และการเลือกโดยใช Quick Mask Mode

พื้นฐานการตัดรูป (Di-cut)

ควรใชเครื่องมือ Pen Tool ใหคลอง เพื่อใชในการสราง Selection ตามรูป และตัดรูปชิ้นงานตางๆ ได เชน รูปคน, รูปวัสดุ

ตางๆ (ในไทยนิยมเรียก Dimension Cut หรือ Di-Cut ซึ่งใชในการตัดสิ่งพิมพ)

พื้นฐานการตั้งชื่อและจัดกลุมเลเยอร

ควรสราง Group ของ Layer และตั้งชื่อใหเหมาะสม จะทำใหทำงานงาย เชนสราง Group ที่ชื่อ Header, Footer, Main,

Content, Sidebar ฯลฯ ตามชื่อของ CSS Div จะทำใหเขาใจโครงสรางไดงาย

Photoshop for Web 2.0 by SmallBooks.org

หนา 4

องคประกอบศิลปแบบงาย: รูป • สี • ฟอนททฤษฎีการออกแบบนั้น ใหคำนึงถึง Design elements and principles รายละเอียดที่ http://en.wikipedia.org/wiki/

Design_elements_and_principles

แตเราอาจสรุปใหงายๆ ไดวา ควรจะหาวัตถุดิบ 3 อยางนี้ กอนเริ่มงานออกแบบ คือ รูป / สี / ฟอนท

รูป สี ฟอนท

http://www.sxc.hu/

http://www.flickr.com/

http://www.istockphoto.com

http://www.vecteezy.com/

http://www.brandsoftheworld.com/

http://www.iconfinder.net/

http://kuler.adobe.com/

http://www.colorcombos.com/

http://colorschemedesigner.com/

http://www.dafont.com/

http://www.f0nt.com/

http://www.fontsquirrel.com/

Photoshop for Web 2.0 by SmallBooks.org

หนา 5

แนวทางตัวอยางและแรงบันดาลใจในการออกแบบเว็บไซตนั้น กอนออกแบบควรหาขอมูลของเว็บในลักษณะเดียวกันกอน เพื่อดูวาเคานำเสนออะไรไดนาสนใจ

บาง ทำใหเห็นทั้งการเลือกสี, จัดวางองคประกอบ, การเลือกแสดง Feature ตางๆ ของเว็บ

1. คนหาเว็บท่ีใกลเคียงกัน

แนะนำใหคนคำวา Web Design Inspiration แลวตอดวย

ชนิดของเว็บที่เราตองการ เชน Web Design Inspiration

Hotel

2. ดูจากท่ีท่ีขาย Web Template ตางๆ

เชน www.TemplateMonster.com หรือคนคำวา PSD web

template

3. รวมเว็บสวย

เชน3 http://bestwebgallery.com/

3 http://cssmayo.com/

4. ชิ้นสวนตางๆ ท่ีสวย

เชน 3 http://patterntap.com

3 http://www.designmeltdown.com

Photoshop for Web 2.0 by SmallBooks.org

หนา 6

ลักษณะเดนของเว็บสมัยใหม หรือเว็บ 2.0

ในแงโครงสรางการนำเสนอท่ีเปล่ียนไปดังน้ี

อดีต (Web 1.0) ปจจุบัน (Web 2.0)

พาดหัวหนังสือพิมพ

มีทุกอยางในทุกหนา

นำเสนอในมุมมององคกร

คาดหวังใหเริ่มเขาหนาแรก

คาดหวังใหคนอานทุกที่

จัดโครงสราง/หมวดหมูขอมูลไมดี

แบงขอมูลตามประเภทสื่อ (รูป/วีดีโอ)

ปรับปรุงชา

พาดหัวหนาแรกไมมาก

1 หนา 1 เรื่องเดน

นำเสนอในมุมมองผูชม

คน Search มาเจอ

คนอานสิ่งที่อยากอาน

จัดโครงสราง/หมวดหมูขอมูลดี

แบงขอมูลตามเนื้อหา (ขาว/บทความ)

ปรับปรุงเร็ว ขอมูลทันสมัย

ในแงมุมของการออกแบบ

• มีเลยเอาทเรียบงาย มักมีไมเกิน 2 คอลัมน

• ใสใจกับการออกแบบขอมูลในแตละหนา ไมทำดีไซนรวมหวือหวา เนนไปที่เนื้อหามากกวา

• ใชสีที่เขากัน มักมีการไลเฉดสี (Gradient) นอยๆ เพื่อไมใหแยงความสนใจจากเนื้อหามากเกิน

• ใช icon อยางเหมาะสม

• อานงาย มักใชฟอนทขนาด 12px ขึ้นไป ใชพาดหัว (Heading) ขนาดใหญ เห็นชัด

• สิ่งที่ไมใชเนื้อหาหลัก จะแสดงเพียงสั้นๆ ทำใหเห็นชัดเจนในแตละหนาวาจุดไหนคือเนื้อหาหลัก

• มีการใชแสงเงาเขามาชวย เชนทำใหเปน 3 มิติ, พื้นสะทอนแสง, ตัวอักษรเจาะในพื้นหลังที่เปน Texture

Photoshop for Web 2.0 by SmallBooks.org

หนา 7

เร่ิมตนทำโครง หรือ Wireframeการทำ Wireframe จะทำใหเราเห็นโครงรางของหนาเว็บวาจะประกอบไปดวยอะไรบาง และมีพื้นที่ในการแสดงแคไหน

Wireframe นั้นสามารถทำไดหลายวิธี ตั้งแตรางดวยดินสอ จนถึงออกแบบเปนหนาเว็บ แตสวนใหญจะเนนใหคุมโทน เชน สี

ขาว-ดำ, ไมใสรูปจริงและขอความจริง เพราะจะทำใหคนเสียจุดสนใจไปมองที่รูป/ขอความมากกวาดูองคประกอบของหนาเว็บ

คำที่โปรยในหนา นิยมใชคำที่ไมมีความหมาย เชน Lorem Ipsum ดูรายละเอียดที่ http://www.lipsum.com/

ตัวอยางเว็บท่ีรวบรวม Wireframe ท่ีนาสนใจ

http://www.wireframeshowcase.com/ http://wireframes.tumblr.com/

เครื่องมือชวยทำ Wireframe

ในแงโปรแกรม ลองคนคำวา wireframe app จะพบจำนวนมาก ทั้ง online และ offline

แตหากใช Photoshop แนะนำใหโหลดไฟลภาพที่ http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-

design-wireframing-kits-resources-and-source-files/

Photoshop for Web 2.0 by SmallBooks.org

หนา 8

การวางเลยเอาทโดยคำนึงถึง Grid

Grid System

เปนแนวคิดที่วางการดีไซนใหอยูในกริด ซึ่งจะทำใหออกแบบเปนระบบ และตัด CSS ตอมาไดงาย เว็บที่เสนอแนวคิดนี้ชัดเจน

คือ http://960.gs คือตั้งความกวางไว 960px แลวแบงคอลัมนหางกัน 20px จะมี 12 หรือ 16 คอลัมนใหเลือก

(ตัวอยางจากเว็บ http://subvert.ca/ )

ในชวงเริ่มตนที่ยังตัด CSS ไมคลอง การใช Grid System จะชวยใหทำงานสะดวก แตเมื่อตัด CSS คลองแลว การสราง CSS

ของตนเองจะยืดหยุนกวา

Grid ใน Photoshop

ใน Photoshop จะสามารถแสดง Grid ได โดยคำสั่ง View -> Show -> Grid ซึ่งตั้งระยะ Grid ที่ Preference แนะนำใหตั้ง -

สราง Grid ทุกๆ 100px และแบงออกเปน 20 สวน จะได Grid แตละเสนหางกัน 5px ดังรูป

Photoshop for Web 2.0 by SmallBooks.org

หนา 9

Guide ใน Photoshop

แนะนำใหแสดงไมบรรทัดรอบรูปกอน โดยไปที่ View -> Rulers แลวลากจากตำแหนงไมบรรทัด เขามาที่กลางรูป จะไดเสน

Guide สีฟาตามรูป แตตองระวังวาเสน Guide อาจไมลง Pixel ได จะทำใหการสรางรูปตอไปมีปญหา ดังนั้น วิธีที่ดีที่สุดคือ

เปด Grid ใน Photoshop ไวกอน แลวลากเสน Guide ทับเสน Grid

การราง Vector Object บน Grid

เมื่อเราสราง Grid และ Guide ที่ตองการ ใหเริ่มออกแบบโดยสรางชิ้นงานใหตรงเสนเหลานี้ ทดลองวางกลองทรงตางๆ ตาม

Wireframe สิ่งที่ตองระวังคือ สี่เหลี่ยมขอบโคง เพราะอาจจะไมตรง Pixel ทำใหรูปไมเนี้ยบได (ภาษาปากเรียกวา เชี้ยะ)

ระยะท่ีทำใหอานงาย

• พยายามอยาใหตัวอักษรอยูติดขอบ ควรหางอยางนอย 20px สำหรับกรอบใหญ และ 15px สำหรับกรอบเล็ก

• กลองตางๆ ที่ขนาดเทากัน ควรเวนระยะเทากัน (ดู Grid เปรียบเทียบ พยายามวาดเสนใหตรง Grid)

• ตัวหนังสือ ควรเวนบรรทัด 1.5 บรรทัด (เดี๋ยวจะไปอยูใน CSS อีกครั้ง)

• ตัวหนังสือสำหรับอานเนื้อหาหลัก ไมควรต่ำกวา 12px

Photoshop for Web 2.0 by SmallBooks.org

หนา 10

การลงสี สรางรูป

ชุดการไลสี Gradient

แนะนำใหคนคำวา photoshop gradients จะพบแหลงที่แจกชุด Gradient จำนวนมาก

เชน http://bestdesignoptions.com/?p=2314 ใหโหลดแลวลงมาศึกษาวาการไลสีแบบไหนจึงดูเนียน/เจล/ดาน

ชุดการแตงเลเยอร Layer Style

คนคำวา photoshop layer style จะพบแหลงที่แจกชุด Layer Style ซึ่งเปนการสราง Style สำเร็จรูป ใสเงา/ใสสี/ใส Pattern

เชน http://www.1stwebdesigner.com/freebies/best-free-photoshop-layer-styles/

ชุดลวดลาย Pattern

คนคำวา photoshop pattern จะพบแหลแจกชุดลวดลาย หรือ Pattern ซึ่งมีทั้งลายภาพวาด, ลายวัตถุ

เชน 3 http://www.smashingmagazine.com/2009/02/12/the-ultimate-collection-of-free-photoshop-patterns/

3 http://browse.deviantart.com/resources/applications/patterns/?alltime=yes&%20order=9

Photoshop for Web 2.0 by SmallBooks.org

หนา 11

คลังปุม, UI

คนคำวา photoshop ui, psd button จะเห็นไฟล User Interface จำนวนมาก หลายที่แจกในรูปแบบ PSD เพื่อใหเอาไปใช

งานตอได เชน 3 http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

3 3 http://visionwidget.com/inspiration/graphics/418-free-psd-bottons-badges-tutorials.html

3 3 http://365psd.com/ <- เจงมาก

แหลง icon

คนหาคำวา download icon จะพบแหลง icon มากมาย เชน http://www.iconfinder.com/ http://findicons.com/ ซึ่งเปนเว็บ

ที่เอาไวหา icon อีกตอหนึ่ง โดยเวลา Download ใหเลือก PNG เพื่อจะไดมีพื้นหลังโปรงใส เอาไปวางในรูปตางๆ ไดเนียน

Clipping Mask

การวางรูปที่ยืนหยุน สามารถแกไดงาย แนะนำใหสราง Vector Object เปนรูปทรงนั้นๆ แลวใช Clipping Mask เพื่อนำรูปไป

วางบน Object อีกตอหนึ่ง

Smart Object

หากกลัววายอรูป แลวมาขยายภายหลัง รูปจะแตก ใหคลิกขวา เลือก Smart Object จะทำใหระบบเก็บรูปเดิมไว

Photoshop for Web 2.0 by SmallBooks.org

หนา 12

ขอควรระวังสำหรับการจัดรูป และวางรูป ใหตรงพิกเซล (Pixel Perfect)

เคยเขียนเรื่องนี้ไวที่ http://www.usably.net/?p=89 สรุปวา

การสราง Vector ควรดูใหลง Pixel

หากใช Photoshop เราจะใชเครื่องมือ Rounded Rectangle Tool สรางสี่เหลี่ยนขอบมนแบบเปน Vector ขึ้นมา ทีนี้กอนจะ

วางเมาสวาดลงไป ก็ใหเปดกริด (Grid) ขึ้นมา เพื่อจะไดแนใจวา มัน Snap ลงตรงกริดที่เราตั้งไว (แนะนำใหตั้งกริดไวหาง 5px  

หรือ 10px จะทำใหวาดกรอบตางๆ ไดสะดวก ในรูป ตั้งไว 100px แบง 20 สวน และสรางสี่เหลี่ยมขอบมนรัศมี  10px) ซึ่ง

หากทำดวยโปรแกรมที่จัดการ Vector อยาง Illustrator หรือ Inkscape บางทีเราอาจไมรูวามันไมลงตรง Pixel

การสรางปุม ขอบ และการจัดระยะหางของชิ้นงานตางๆ

ควรดูใหลง pixel และจัดระยะหางระหวางชิ้นงานใหเทากัน และดูงานที่ Zoom 100% เสมอ มิฉะนั้นจะไมเห็นขนาดจริง

ระวังเรื่องการแสดงผลของฟอนท

ใน Photoshop จะสามารถปรับแตง Font ไดแตกตางกัน การ Render Font ออกมาก็จะไมเหมือนกัน แนะนำใหใช Sharp

(เกลี่ยสีคม) สำหรับฟอนทขนาดเล็ก และ Crisp (เกลี่ยสีเชี้ยะ)  หรือ Smooth (เกลี่ยสีเนียน) สำหรับฟอนทขนาดใหญ สวน

การแสดงผลแบบ None (ไมเกลี่ยสี) นาจะหมดยุคไปแลว เพราะปจจุบันจอภาพมีคุณภาพสีที่ดี มีความละเอียดสูง การตองใช

Font เล็กๆ แลวไมเกลี่ยสีเพื่อใหเห็นชัดนั้น ไมนาจะจำเปนแลว อานยากเปลาๆ

Photoshop for Web 2.0 by SmallBooks.org

หนา 13

ปญหาเรื่องสีเพี้ยนเนื่องจาก Photoshop ทำงานไดทั้งสิ่งพิมพที่มีแมสี 4 สี (CMYK) และงานแสดงผลบนจอภาพที่มีแมสี 3 สี (RGB) ดังนั้นตอง

ระวังเรื่อง Mode สีใหดี และตองระวังเรื่อง โปรไฟลสี (color profile) ที่แนบมากับไฟลดวย

รายละเอียดเชิงลึก แนะนำใหอานหนังสือ การจัดการสีเพื่องานกราฟก (Color Management System)

ผูเขียน: นิพัทธ ไพบูลยพรพงศ

สำนักพิมพ: ซีเอ็ดยูเคชั่น, บมจ. 

เนื้อหาครอบคลุม Photoshop,Illustrator, InDesign, Lightroom, Aperture, Capture NX และอินเตอร

เน็ตเบราเซอร ใชไดทั้ง Mac OS และ Windows

ตั้งคา Mode เปน RGB เสมอ

เลือก Image -> Mode -> RGB Color

ทำงานดวยสีท่ีถูกตองผาน Proof Color

เวลาทำงาน ตองดูสีที่ Proof Color เสมอ และแนะนำให Proof เปน Windows RGB เพราะคนใชเยอะสุด

เลือก View -> Proof Color

เลือก View -> Proof Setup -> Windows RGB

แนบโปรไฟลสีท่ีถูกตองใหกับไฟลภาพ

สำหรับการตั้งไฟลแตละไฟล เลือก Edit -> Assign Profile เลือกเปน sRGB IEC61966-2.1 เพราะเปนโปรไฟลสำหรับ

จอภาพสวนใหญ ซึ่งจะแสดงสีไมไดละเอียดมากๆ เหมือน Apple RGB หรือ Adobe RGB จะทำใหเราเห็นความไมสวยงามได

เหมือนคนปกติ (เชน จะไดหลีกเลี่ยงการไลสี Gradient บางโทน เพราะจอภาพ sRGB แสดงผลไมสวย)

สำหรับระยะยาว สามารถตั้งคาใหแนบโปรไฟลและเปลี่ยนแปลงโปรไฟลอัตโนมัติได

เลือก Edit -> Color Settings แนะนำใหใช North America Web/Internet ซึ่งจะ Convert Profile ใหเราเองอัตโนมัติ

Photoshop for Web 2.0 by SmallBooks.org

หนา 14

การตัดรูปเพื่อนำไปใชในเว็บไซตใน Photoshop จะมีเครื่องมือ Slice ไวทำการแบงพื้นที่อยู แตเนื่องจาก CSS พัฒนาไปเร็วกวา การตัดดวยการ Export Slice

จึงไมเหมาะกับการเขียน CSS นัก แนะนำใหตัดทีละชิ้นงานดีกวา

พื้นหลังท่ีเปน Pattern

ใหตรวจสอบดวยการนำรูปมาตอกัน หรือใชคำสั่ง Filter -> Other -> Offset แลวเลื่อนรูปดูทั้งแนวนอนและแนวตั้งเพื่อตรวจ

รอยตอ ในขั้นนี้เราอาจ Retouch ดวยการใช Clone Stamp ได

เมื่อใช Offset ตรวจดูจึงพบรอยตอ ดังนี้ ->

การคัดลอกชิ้นงาน

เลือกพื้นที่ที่ตองการ แลว Copy Merge เปดไฟลใหม Paste แลวเลือก Save for Web

การตัดชิ้นงาน

ในบางกรณี หากมีพื้้นหลังโปรงใส หาก Copy Merge อาจทำใหขนาดของชิ้นงานไมเทาเดิม ควรเลือกที่จะ Crop ทั้งรูป, สั่ง

Save for Web แลวคอย Undo การ Crop กลับมา

Save for Web

ชิ้นงานท่ีหลังโปรง ควรใช PNG-24

เพราะ PNG 24 bit จะเก็บขอมูลความโปรงใสไดเนียนที่สุด สามารถนำไปวางบนพื้นหลังสีใดก็ได แตตองระวังวา อาจทำใหรูป

มีขนาดใหญเกินไป

รูปกราฟฟคท่ีจำนวนสีไมมาก (ไมเกิน 256 สี) ควรใช PNG-8

รูปโลโก, การตูน, พาดหัว, พื้นหลังที่จำนวนสีไมมาก แนะนำให Save เปน PNG-8 เพราะประหยัดพื้นที่ที่สุด และไดเม็ดสีที่

ชัด ไมเบลอเหมือน JPG และดีกวา GIF ที่มีลิขสิทธิ์ครอบอยู

นอกน้ันใช JPG

รูปสวนใหญ ให Save เปน JPG คุณภาพ 60% ขึ้นไป

Photoshop for Web 2.0 by SmallBooks.org

หนา 15

ปฎิบัติการ : Workshop

ทดลองออกแบบเว็บไซต

โดย

1. ตั้งโจทยของเว็บที่ตองการ

2. หา Reference ของเว็บในลักษณะเดียวกัน

3. หาจุดเดน หรือ feature ของเว็บ

4. สราง Site-map ของเว็บ วาจะมีอะไรบาง (ไมตองละเอียด)

5. สราง Wireframe ของเว็บไซต ดวยดินสอ รางในกระดาษ

6. สราง Wireframe ของเว็บไซต ดวยการสราง Vector Shape ตางๆ ใน Photoshop ใหเปนโทนขาว-ดำ แนะนำใหใชความ

กวาง 900px - 960px จัดกึ่งกลางหนา

7. เริ่มใสรูปใน Object ตางๆ ดวย Clipping Mask

8. ตกแตงดวยสี ตัวอักษร Layer Style ตางๆ

9. ทดลองตัดรูปเพื่อใชงานเว็บตอไป

ตัวอยางไฟลสำเร็จเปน PSD

ลองคนคำวา PSD web template จะพบแหลงใหโหลด PSD ที่ออกแบบไวเรียบรอยแลว นำมาดูไอเดียการสรางได

เชน 3 http://slodive.com/photoshop/40-free-psd-website-templates/

3 http://www.instantshift.com/2009/09/17/70-ultimate-round-up-of-free-psd-website-templates/

Photoshop for Web 2.0 by SmallBooks.org

หนา 16