Scroll ลง เพื่อดูบทความ
ไขปริศนา ความท้าทายต่าง ๆ ในการก้าวไปสู่ตำแหน่ง CTO
โดย PanJ
ในสายอาชีพ programmer/developer ตำแหน่งที่คนส่วนใหญ่คิดว่าสูงที่สุดแล้วน่าจะหนีไม่พ้น Chief Technology Officer หรือ CTO ซึ่งมีชื่อเรียกภาษาไทยเก๋ ๆ ว่าประธานเจ้าหน้าที่บริหารฝ่ายเทคโนโลยี เอาจริง ๆ แล ...
Solving BigData with BigQuery (3/3) — ใช้จริง
โดย SARIN
บทความนี้จะมีเนื้อหาเกี่ยวกับ Google BigQuery: Serverless Data Warehouse จาก Google ครับ บทความนี้เป็นเนื้อหาพาร์ทสุดท้ายจาก ซีรีส์แนะนำ Google BigQuery ของ Cleverse โดยบทความนี้จะเน้นไปที่แนวทางต่างๆ ...
Solving BigData with BigQuery (2/3) — ลองเล่น
โดย SARIN
คุณมีปัญหากับการวิเคราะห์ข้อมูลขนาดใหญ่ใช่ไหม? — ลองมาใช้ BigQuery ดูสิ 0) เกริ่นนำ หากคุณเป็นคนที่ทำงานในสายงาน Data Science หรือใกล้เคียง คุณอาจจะเคยได้ยินคนพูดถึง BigQuery มาบ้าง สรุปแบบสั้นๆเลยคือ ...
Solving BigData with BigQuery (1/3) — บทนำ
โดย SARIN
หลายๆคนอาจจะมองว่าการจัดการ Big Data เป็นเรื่องลำบาก — ตั้งแต่การวางแผนติดตั้งระบบ การนำข้อมูลเข้า จนถึงการ Query ข้อมูลแต่ละครั้งซึ่งทำได้ยากและใช้เวลานาน แถมพอใช้งานจริงก็ต้องคอยดูแลอีก วันนี้บล็อกน ...
ของโคตรดี! เมื่อแทนที่ GraphQL Backend ด้วย Graphcool!
โดย ชิน
สำหรับท่านที่ไม่เคยใช้ GraphQL มาก่อน น่าจะเคยใช้ชีวิตร่วมกับ REST มาก่อน ซึ่งตัว REST จะมีความต่างที่ชัดเจนจาก GraphQL คือ REST เราต้องกำหนด endpoint เต็มไปหมด ถ้า model เปลี่ยนไปเรื่อยๆต้องมาแก้ทีละ ...
ENGINEERING
DESIGN
CULTURE
Cleverse, a venture builder, with people who have fun building the future. If you also consider building the future a fun and meaningful purpose — let’s find a way we can work together.
121/75 RS TOWER 24th Floor
Ratchadaphisek Road
Dindaeng Bangkok 10400
Thailand
08.Feb.2018
โดย ริค

ออกแบบปก Presentation ให้ ปัง ปัง ปัง

Scroll down

 

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

 

 

ริค
Lead Designer
ส่วนสูง 180 น้ำหนัก 70 ของกินที่ชอบคือมาม่าหมูสับจากเซเว่น สีที่ชอบ แดง น้ำเงิน ดำ

งานอดิเรกคือการวาดรูป ความฝันอันสูงสุดคือการได้จับมือกับ แพตตี้อังศุมาลิน ผู้อันเป็นที่รัก .
Next Article
Solving BigData with BigQuery (1/3) — บทนำ
สมัครงาน