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 by SmallBooks.org
ขอมูลทั่วไปของหลักสูตร ชื่อหลักสูตร ภาษาอังกฤษ: 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 น. • ปฏิบัติการออกแบบเว็บ โดยตั้งโจทยของแตละคนเอง (อาจทำมากอน แลวมาปรับแตงในชั้น) • วิทยากรจะชวยใหความคิดเห็นเกี่ยวกับงานออกแบบ
หนา 2
Photoshop for Web 2.0 by SmallBooks.org
หลักสูตรนี้เหมาะสำหรับ • ผูสนใจทั่วไป, ผูประกอบการที่ตองการใช 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 เผยแพรครั้งแรก
หนา 3
Photoshop for Web 2.0 by SmallBooks.org
ความรูพื้นฐานเกี่ยวกับ Photoshop Photoshop เปนโปรแกรมแตงรูปที่มีลิขสิทธิ์ ราคาประมาณ 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 จะทำใหเขาใจโครงสรางไดงาย
หนา 4
Photoshop for Web 2.0 by SmallBooks.org
องคประกอบศิลปแบบงาย: รูป • สี • ฟอนท ทฤษฎีการออกแบบนั้น ใหคำนึงถึง 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/
หนา 5
Photoshop for Web 2.0 by SmallBooks.org
แนวทางตัวอยางและแรงบันดาลใจ ในการออกแบบเว็บไซตนั้น กอนออกแบบควรหาขอมูลของเว็บในลักษณะเดียวกันกอน เพื่อดูวาเคานำเสนออะไรไดนาสนใจ บาง ทำใหเห็นทั้งการเลือกสี, จัดวางองคประกอบ, การเลือกแสดง Feature ตางๆ ของเว็บ
1. คนหาเว็บที่ใกลเคียงกัน
2. ดูจากที่ที่ขาย Web Template ตางๆ
แนะนำใหคนคำวา Web Design Inspiration แลวตอดวย ชนิดของเว็บที่เราตองการ เชน Web Design Inspiration Hotel
เชน www.TemplateMonster.com หรือคนคำวา PSD web template
3. รวมเว็บสวย
4. ชิ้นสวนตางๆ ที่สวย
เชน3 http://bestwebgallery.com/ 3 http://cssmayo.com/
เชน 3 http://patterntap.com 3 http://www.designmeltdown.com
หนา 6
Photoshop for Web 2.0 by SmallBooks.org
ลักษณะเดนของเว็บสมัยใหม หรือเว็บ 2.0 ในแงโครงสรางการนำเสนอที่เปลี่ยนไปดังนี้ อดีต (Web 1.0)
พาดหัวหนังสือพิมพ มีทุกอยางในทุกหนา นำเสนอในมุมมององคกร คาดหวังใหเริ่มเขาหนาแรก คาดหวังใหคนอานทุกที่ จัดโครงสราง/หมวดหมูขอมูลไมดี แบงขอมูลตามประเภทสื่อ (รูป/วีดีโอ) ปรับปรุงชา
ปจจุบัน (Web 2.0)
พาดหัวหนาแรกไมมาก 1 หนา 1 เรื่องเดน นำเสนอในมุมมองผูชม คน Search มาเจอ คนอานสิ่งที่อยากอาน จัดโครงสราง/หมวดหมูขอมูลดี แบงขอมูลตามเนื้อหา (ขาว/บทความ) ปรับปรุงเร็ว ขอมูลทันสมัย
ในแงมุมของการออกแบบ • • • • • • •
มีเลยเอาทเรียบงาย มักมีไมเกิน 2 คอลัมน ใสใจกับการออกแบบขอมูลในแตละหนา ไมทำดีไซนรวมหวือหวา เนนไปที่เนื้อหามากกวา ใชสีที่เขากัน มักมีการไลเฉดสี (Gradient) นอยๆ เพื่อไมใหแยงความสนใจจากเนื้อหามากเกิน ใช icon อยางเหมาะสม อานงาย มักใชฟอนทขนาด 12px ขึ้นไป ใชพาดหัว (Heading) ขนาดใหญ เห็นชัด สิ่งที่ไมใชเนื้อหาหลัก จะแสดงเพียงสั้นๆ ทำใหเห็นชัดเจนในแตละหนาวาจุดไหนคือเนื้อหาหลัก มีการใชแสงเงาเขามาชวย เชนทำใหเปน 3 มิติ, พื้นสะทอนแสง, ตัวอักษรเจาะในพื้นหลังที่เปน Texture
หนา 7
Photoshop for Web 2.0 by SmallBooks.org
เร่ิมตนทำโครง หรือ 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-webdesign-wireframing-kits-resources-and-source-files/
หนา 8
Photoshop for Web 2.0 by SmallBooks.org
การวางเลยเอาทโดยคำนึงถึง 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 ดังรูป
หนา 9
Photoshop for Web 2.0 by SmallBooks.org
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 หนา 10
Photoshop for Web 2.0 by SmallBooks.org
การลงสี สรางรูป ชุดการไลสี 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
หนา 11
Photoshop for Web 2.0 by SmallBooks.org
คลังปุม, 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 จะทำใหระบบเก็บรูปเดิมไว หนา 12
Photoshop for Web 2.0 by SmallBooks.org
ขอควรระวังสำหรับการจัดรูป และวางรูป ใหตรงพิกเซล (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 เล็กๆ แลวไมเกลี่ยสีเพื่อใหเห็นชัดนั้น ไมนาจะจำเปนแลว อานยากเปลาๆ
หนา 13
Photoshop for Web 2.0 by SmallBooks.org
ปญหาเรื่องสีเพี้ยน เนื่องจาก 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 ใหเราเองอัตโนมัติ
หนา 14
Photoshop for Web 2.0 by SmallBooks.org
การตัดรูปเพื่อนำไปใชในเว็บไซต ใน 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% ขึ้นไป หนา 15
Photoshop for Web 2.0 by SmallBooks.org
ปฎิบัติการ : 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/
หนา 16