Presentation – สิ่งที่ทุกคนต้องเคยเจอ ไม่ว่าจะเป็นช่วงเรียนประถม มัธยม มหาลัย หรือวัยทำงาน

นอกจากวิธีการ Present แล้ว การทำ Presentation ให้ดูดีและดูแตกต่าง ก็จะทำให้การ Present ของเราดูน่าเชื่อถือและน่าจดจำมากขึ้น

วันนี้ผมจะพาดูขั้นตอนการออกแบบปก Presentation โดยผมจะทดลองทำออกมาหลายๆแบบ และในระหว่างนั้นผมจะอธิบายถึงหลักการต่างๆที่ใช้ในการออกแบบด้วย

เพื่อที่ทุกท่านจะได้เห็นว่าผมคิดอะไรตอนออกแบบ จะได้สามารถนำหลักการหรือเทคนิคที่ได้ไปใช้ออกแบบ Presentation(หรืองานอื่นๆ) ของตัวเองให้ดูปัง ๆๆๆๆๆๆ

เริ่มกันเลย!

ขั้นตอนที่ 1. แปะ Content ทั้งหมดลงไป

ตอนแรกก็เริ่มด้วยการแปะ Content ลงไปครับ Content ก็จะมี Logo บริษัทสุดเท่,วันที่,ชื่อหัวข้อ,Description(Description ผมใช้ เป็น Dummy Text นะครับเพราะว่าคิดไม่ออก และกลัว Grammar ผิดครับ ฮ่าๆ) , ชื่อคนบรรยาย,ตำแหน่งงาน
การวางของนั้น ผมคิดว่าจะไล่ลำดับจากส่วนที่สำคัญที่สุด(นั่นคือ Logo Cleverse ) ลงไปยังส่วนที่ ไม่จะเป็นต้องดูก็ได้(ชื่อผมเอง) จากบนลงล่างเพราะว่าเวลาคนอ่านจะอ่านจากบนไปล่างซ้ายไปขวาครับ (Font ที่ใช้คือ Helvetica – Font Basic ของ Mac )

ขั้นตอนที่ 2. ทำให้ปัง! แบบ กระดาษยับๆ

สิ่งที่แก้ให้ปัง

Concept
- ผมมี Concept ในหัวก่อนเริ่มงานคือผมอยากทำให้ Presentation นี้อยู่ในโลกแห่งความเป็นจริง (มีแสงและเงาแบบ Flatๆ วางทับ Text) ผมเลยนำ Texture ของถุงพลาสติกจาก Unsplash มาวาง แล้วบิด ด้วย Liquify หลังจากนั้นก็ใส่ Shadow ลงไป (มี Link ให้ Download ไฟล์ Photoshop ของ Layout นี้อยู่ท้ายบทความ)
Typography Contrast
- ผมใช้ Font Six Caps ที่เป็น Font ที่โคตรสูง ความสูงของ Font Six Caps จะ Contrast กับความเตี้ยของ Helvetica ทำให้เกิด Contrast ในเชิง Style ของ Font
- ทำให้ Title นั้นมีขนาดใหญ่ Contrast กับ Font เล็กๆ ด้านล่าง (การนำของเล็กๆมาวางคู่กับของใหญ่จะทำให้ของมันใหญ่ขึ้นไปอีก)
Unflat
- พื้นหลังสีชมพูผมไล่ Gradient แบบเล็กน้อยจากบนลงล่างเพื่อทำให้ดูไม่ Flat
ความสมจริงของเงา
- เพื่อดีเทลที่สมจริงของเงากระดาษนั้น ผมใช้ smudge ทำให้เงาฟุ้งตรงปลายเพราะว่า ระยะของเงายิ่งอยู่ห่างจากวัตถุจะยิ่งทีความฟุ้งเยอะ
- สีของเงาผมไม่ใช้สีดำ แต่จะทำให้ออกไปในโทนม่วงๆ ( เพราะว่าในความเป็นจริงแล้ว สีของเงาจะโดนผลกระทบจากแสง Reflect รอบๆตัว(Ambient light)ด้วย ซึ่งสิ่งของรอบๆตัวนั้นมักมีสีปนอยู่ )
Focal Point
- กระดาษที่วางทับนั้นมีความ Real และมีสีที่เข้มมากเทียบกับสีและของด้านรอบที่เป็นสีอ่อนทำให้ เกิด Contrast
Color
- สีชมพูกับสีของกระดาษนั้นเป็นสีที่เป็น Analogous Color scheme (ชมพู – น้ำเงิน)
Spacing
- ผมออกแบบให้ Space นั้นดูไม่อึดอัดทำให้น่าอ่าน
- การ Grouping – ข้อมูลที่เกี่ยวข้องกันจะอยู่ติดกัน (ชื่อคนพูด กับ ตำแหน่ง)
Alignment – การมี Grid และ Alignment ที่เป็นระเบียบจะทำให้งานดูหรูและโปร
- Text คำว่า How to design a very cool presentation layout ถูกจัด Kerning ให้ดูว่าตรงขอบเป็นระนาบเดียวกัน
- Alignment แนวนอนของ ข้อมูลด้านล่างตรงกัน

ขั้นตอนที่ 3. ทำให้ปัง! เกลียวคลื่น

Concept
- ภาพนี้ผมใช้ Font และ Layout แบบเดียวกับภาพที่แล้ว แต่ผมคิดว่า Concept ของงานคือผมจะทำใช้คลื่นที่ซัดเข้าหาชายหาดเป็นเส้นแบ่งระหว่าง Text ดานบนและรูป

ขั้นตอนที่ 4. ทำให้ปัง! โคมไฟสุด Pop

สิ่งที่แก้ให้ปัง

Concept
- ผมเริ่มจากภาพก่อนผมไปค้นภาพใน Unsplash แล้วเจอโคมไฟตัวนี้ที่ผมคิดว่าน่าจะไปนำไปเป็นจุดสนใจได้ และตรงปลายโคมไฟมันแหลมดีหาอะไรมาครอบมันหน่อยดีกว่า เลยออกมาเป็นงานอย่างที่เห็นครับ

Balance

Balance ของ 2 ฝั่งในแนวเฉียง (จริงๆจะหนักไปทางฝั่งขวา แต่ว่าโดนถ่วงเล็กน้อยด้วย Logo Cleverse)
Rule of thirds

- Typography Contrast
  - ทำให้ Title นั้นมีขนาดใหญ่ Contrast กับ Font เล็กๆ ด้านล่างขวา (การนำของเล็กๆมาวางคู่กับของใหญ่จะทำให้ของมันใหญ่ขึ้นไปอีก)
  - Style ของ Title ที่ไม่เหมือนกับ Description ทำให้เกิด Contrast – Title เป็น Font Montserrat Alternate ตัว Font นั้นมีความโค้งมนและขี้เล่นและกว้าง Contrast กับ Helvetica และ Logo Cleverse ที่มีความคมและ Serious
- Focal Point – จุดสนใจ
  - โคมไฟสีชมพูบนพื้นหลังสีน้ำเงิน
  - ตรงตัว G มีสีชมพูแทงออกมา ดูแปลกตา
  - เส้นที่หนา
- Color
  - สีชมพูกับสีของกระดาษนั้นเป็นสีที่เป็น Analogous Color scheme (ชมพู – น้ำเงิน)
- Spacing
  - ผมออกแบบให้ Space นั้นดูไม่อึดอัดทำให้น่าอ่าน
  - การ Grouping – ข้อมูลที่เกี่ยวข้องกันจะอยู่ติดกัน (ชื่อคนพูด กับ ตำแหน่ง)
- Alignment – การมี Grid และ Alignment ที่เป็นระเบียบจะทำให้งานดูหรูและโปร
  - เส้นหนาทำให้เกิด Alignment กับ description และ ชื่อคนเขียนทำให้ของที่อยู่ลอยๆ ดูมีที่ให้มันเกาะ
  - ปลายของโคมไฟ Align ตรงกันกับด้านล่างของชื่อคนเขียน
  - ข้อความของ Logo Cleverse Align ตรงกันกับเส้นในแนวนอนพอดี
  - Logo Cleverse Align ตรงกับชื่อ Title พอดี

ขั้นตอนที่ 5. ทำให้ปัง! เจ้าหมาน้อย

สิ่งที่แก้ให้ปัง

Concept
- ภาพนี้ผมเริ่มจากหาภาพใน Unsplash ก่อน แล้วผมเจอหมาสีดำตัวนี้ที่กำลังมองไปด้านข้างหลังจากนั้นผมก็ลยคิดว่าน่าจะดีที่วาง Text ไว้ด้านขวา เพราะว่ามันสามารถ Balance หมาฝั่งซ้ายได้ดี และนอกจากนั้นสายตาของหมายังมองไปทาง Text ได้อีกด้วย และจมูกของหมามันยื่นออกมา น่าจะทำอะไรเหลื่อมๆได้แหละมั้ง เลยออกมาเป็นภาพนี้

Balance ของ 2 ฝั่งหมากับ ก้อน Text

- Typography Contrast
  - ทำให้ Title นั้นมีขนาดใหญ่ Contrast กับ Font เล็กๆ ด้านล่าง (การนำของเล็กๆมาวางคู่กับของใหญ่จะทำให้ของมันใหญ่ขึ้นไปอีก)
  - Style ของ Title ที่ไม่เหมือนกับ Description ทำให้เกิด Contrast – Title เป็น Font Yeseva One ตัว Font นั้นมีความหนา มีตีน และ Classic Contrast กับ Helvetica และ Logo Cleverse ที่มีความคมและ Serious
- Focal Point – จุดสนใจ
  - สายตาของหมามองไปทางก้อน Text
  - จมูกเหลื่อมกับ Text
  - เส้นด้านขวาที่หนา
- Spacing
  - ผมออกแบบให้ Space นั้นดูไม่อึดอัดทำให้น่าอ่าน
- Alignment – การมี Grid และ Alignment ที่เป็นระเบียบจะทำให้งานดูหรูและโปร
  - ก้อน Text ด้านขวามี Alignment ที่เป็นสี่เหลี่ยมพอดี (Text title ถูกจัด Kerning ให้เกาะขอบสองฝั่ง, เส้นที่ใส่ลงไปทำให้ Text ด้านล่างมีที่เกาะไม่อยู่ลอยๆ)

ขั้นตอนที่ 5. ทำให้ปัง! ท้องฟ้ายามดึก

สิ่งที่แก้ให้ปัง

Concept
- ภาพนี้ผมเริ่มจากหาภาพใน Unsplash ก่อน แล้วผมเจอท้องฟ้าที่สีโดยภาพรวมมีความเข้ม เหมาะกับการเอา Text สีขาวมาวางอย่างยิ่ง นอกจากนั้น ภาพมี Space ที่ดูเปิดโล่ง ทำให้งานออกมาน่าจะสบายตี เหมาะกับการนำ Text วางไว้ด้านล่างและเปิด Space ด้านบน
Rule Of thirds
- เส้นวางอยู่ในแกนของ Rule of Thirds พอดี
- Logo cleverse วางอยู่ใกล้ Rule of thirds
- ชื่อคน วางอยู่ใกล้ Rule of thirds
- Description วางอยู่ใกล้ Rule of thirds

- Alignment – การมี Grid และ Alignment ที่เป็นระเบียบจะทำให้งานดูหรูและโปร
  - logo cleverse align ตรงกันกับ Text ด้านซ้าย
  - เส้นหนาทำให้เกิด Alignment กับ description และ ชื่อคนเขียน ทำให้ของที่อยู่ลอยๆ มีที่ให้มันเกาะ

ขั้นตอนที่ 6. ทำให้ปัง! ท้องฟ้ายามดึก 2

สิ่งที่แก้ให้ปัง
- Concept
  - ผมใช้ Text ที่ได้ออกแบบไปใน Layout หมามาวางไว้ด้านขวาบวกกับภาพท้องฟ้ายามดึก ผมคิดว่า Space ด้านขวาที่เปิดโล่งจะทำให้งานดูน่าค้นหาดี

Gift! ไฟล์ Photoshop สำหรับคนจะเอาไปแกะว่าผมใช้ Font อะไรและ Effect อะไร

ดาวน์โหด เอ้ย ดาวน์โหลด เอ้ย ถูกแล้ว

สรุป

การทำให้ปังอย่างลงตัวนั้นเราควรจะมีภาพในหัวและ Concept คร่าวๆ ก่อนว่าจะใช้รูปอะไร จะใช้ font อะไร เราจะทำให้ของโดดเด่นยากถ้าทำงานแบบพึ่งดวงและอนาคต
ปก Presentation จริงๆแค่ Text จัดดี (มี Contrast, มี Spacing ที่ดี) พื้นหลังและสิ่งอื่นๆก็สามารถเป็นอะไรก็ได้แล้ว จะไม่ใส่อะไรลงไปเป็นพื้นหลังเลยก็ยังได้ (Text อย่างเดียวก็เฟี้ยวได้ ถ้า Function ผ่าน)

ทิ้งท้าย

ไอเดียต่างๆที่เกิดขึ้นมานั้น มันจากการที่ผมฝึกดูงานและวิเคราห์งานของคนอื่นบ่อยๆ ว่ามันสวยเพราะอะไร การคิดเองให้สวยนั้นยากมาก ทำให้การ Research งานคนอื่นก็สำคัญเช่นกัน

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