วันพุธที่ 13 มีนาคม พ.ศ. 2556

Photoshop : วิธีทำภาพ PNG ที่มีพื้นหลังโปร่งใส

          รูปภาพสกุล .png หรือรูปที่มีพื้นหลังโปร่งใสนั้น นอกจากจะนิยมใช้ในเวปไซด์ต่างๆ แล้ว ยังนิยมนำมาทำรูป Icon หรือ รูป Cursor อีกด้วยนะครับ เพราะหากใช้รูปสกุล .jpg มาทำแล้ว Icon หรือ Cursor นั้นก็จะเป็นรูป 4 เหลี่ยม ซึ่งดูไม่สวยเท่าไหร่นัก แต่ถ้าใช้ไฟล์ .png มาทำแล้วล่ะก็ Icon หรือ Cursor ที่ออกมาก็จะมีพื้นหลังโปร่งใส รูปที่แสดงก็จะเป็นรูปทรงอิสระตามรูปทรงของภาพนั้นๆ
          Tip Photoshop ตอนนี้จึงจะมาเสนอวิธีทำภาพสกุล .png กันครับ โดยผมจะยกตัวอย่างจากรูปที่ทำได้ง่ายๆ ก่อน พอให้รู้หลักเกณฑ์ และเป็นแนวทางสำหรับการทำรูปที่ยากกว่านี้ต่อไปนะครับ
          วิธีทำตามขั้นตอนนี้เลยครับ

          1. เตรียมรูปภาพสกุล .jpg ที่มีพื้นหลังเป็นสีเรียบๆ และสีแตกต่างกับตัวรูปอย่างชัดเจน ตามตัวอย่างที่ผมยกมานี้ครับ (รูปที่มีลักษณะนี้ทำง่าย เหมาะกับการเริ่มต้นครับ)

       
          2. เมื่อเตรียมรูปได้แล้วก็เปิดโปรแกรม Adobe Photoshop ขึ้นมา แล้วคลิกที่ File แล้วเลือก Open ตามรูปครับ

       
          3. เลือกรูปที่เตรียมไว้ในขั้นตอนที่ 1 โดยการคลิกทำไฮไลท์ที่รูป ก่อนจะคลืก Open ตามลำดับ

       
          4. จากนั้นคลิกที่ Layer แล้วเลือก Duplicate Layer

       
          5. คลิก Ok ได้เลยครับ

       
          6. ถึงตอนนี้ให้สังเกตดูว่าในหน้าต่าง Layer นั้น จะมี Layer เพิ่มขึ้นมาอีก Layer หนึ่งแล้ว ก็ให้คลิกที่ Indicates layers visibility ซึ่งเป็นสัญลักษณ์รูปตา ที่หน้า Layer ฺBackground ตามรูปครับ (ลูกศรชี้)

       
          7. จากนั้นคลิกที่ Magic Wand Tool

       
          8. แล้วคลิกลงในพื้นที่ส่วนที่เป็นพื้นหลังของรูปครับ

       
          9. จากนั้นคลิกที่ Edit แล้วเลือก Cut ตามรูปครับ

       
          10. ถึงตอนนี้จะเห็นว่า พื้นหลังของรูปหายไปแล้ว กลายเป็นโปร่งใสแล้วครับ

       
          11. คลิกที่ File > Save As เลือกโฟลเดอร์ปลายทาง ตั้งชื่อรูป เปลี่ยน Format เป็น PNG (*PNG) แล้วคลิก Save ก็เป็นอันเรียบร้อยแล้วครับ ซึ่งหากใครต้องการจะนำไปทำเป็น Icon สำหรับโปรแกรมต่างๆ หรือทำ Shortcut สำหรับเวปไซด์ที่เข้าบ่อยๆ ก็สามารถเข้าไปดูได้ที่ iConvert Icons : เปลี่ยนรูปภาพของคุณให้กลายเป็น Icon

60 ความคิดเห็น:

  1. ขอบคุณมากๆค่ะ จากใจจริงๆนะ ^^

    ตอบลบ
  2. ไม่ระบุชื่อ2 มีนาคม 2557 เวลา 15:50

    -ขอบคุณคับ!

    ตอบลบ
  3. เวอร์ชั่นไหนอ่ะ ของผม ps3 ทำไมไม่มีให้ภาพเป็นโปร่งใสอ่ะ

    ตอบลบ
    คำตอบ
    1. cs3 ครับ
      ไม่มีให้ภาพเป็นโปร่งใส? หมายถึงไม่มีตรงขั้นตอนไหนครับ

      ลบ
    2. ไม่ระบุชื่อ29 กรกฎาคม 2557 เวลา 19:58

      cs3ทำไม่ได้เหมือนกันคะ cutเสร็จแล้วไม่เกิดอะไรขึ้นเลยคะ งงเลยคะ

      ลบ
    3. หลังจากขั้นตอนที่ 6 (คลิกที่ Indicates layers visibility ซึ่งเป็นสัญลักษณ์รูปตา ที่หน้า Layer ฺBackground) แล้ว
      ให้ลองสังเกตในหน้าต่าง Layers นะครับ ว่าเราทำไฮไลต์เพื่อเลือกทำงานที่ Layers ไหน ไฮไลต์จะเป็นแถบสีฟ้าครับ ถ้าแถบสีฟ้าคาดทับอยู่ที่ Layers Background แล้วล่ะก็ เราจะคลิก Cut ไม่ได้ครับ (คำว่า Cut จะเป็นตัวจางๆ)
      ไฮไลต์แถบสีฟ้าจะต้องคาดทับอยู่บน Layers Background copy (ตามรูป) ครับ
      ซึ่งเราสามารถจะทำได้โดยการคลิกที่คำว่า ฺBackground copy ในหน้าต่าง Layers ก่อน แล้วค่อยคลิก Cut
      หรือถ้าหน้าต่าง Layers ไม่ได้เปิดอยู่ เราก็ต้องเปิดหน้าต่าง Layers ขึ้นมาก่อน โดยการคลิกที่ Window > Layers หรือกดปุ่ม F7 ที่แป้นคีย์บอร์ดก็ได้ครับ (ถ้าหน้าต่าง Layers ไม่ได้เปิดอยู่ ก็จะไม่สามรถทำขั้นตอนที่ 6 ได้ด้วยครับ)

      ลบ
  4. ขอบคุณมากครับ ^_^

    ตอบลบ
  5. ตอนแรกทำในออนไลน์ตอนนี้ไม่ง้อออนไลน์แล้ว ง่ายกว่ากันเยอะเลยค่ะ ขอบพระคุณนะคะ

    ตอบลบ
  6. ขอบคุณมากครับ จะลองดูครับ

    ตอบลบ
  7. ขอบคุณมากๆค่ะ (โค้งสวยๆ)

    ตอบลบ
  8. ขอบคุนมากกก ขอบคุนจิงๆ ;000;

    ตอบลบ
  9. ขอบคุณสำหรับความรู้ที่แนะนำนะคะ
    เราจะใช้กระดาษอะไร และเครื่องพิมพ์แบบไหนดีคะ จึงจะเหมาะสม

    ตอบลบ
    คำตอบ
    1. รูปสกุล PNG ใช้โพสในเวปนะครับ ไม่ได้ใช้สำหรับปริ้นออกมาครับ

      ลบ
  10. ขอบคุณมากคร่าา :)

    ตอบลบ
  11. มีลิ้งค์ดาวน์โหลดแอพโฟโต้ช้อปไม๊ค้า

    ตอบลบ
    คำตอบ
    1. cs6 แบบ portable ครับ
      http://www.mediafire.com/download/64hcwoa9a8al6cn/Adobe+Photoshop+CS6+Extended+%28Portable%29.rar

      ลบ
  12. ขอบคุณสำหรับขั้นตอนต่างๆค่ะ แต่พบปัญหาเดียวกับท่านอื่นๆที่ใช้PS3 เมื่อcutแล้ว พื้นหลังก็ยังไม่เป็นพื้นโปร่งใส (ทำตามขั้นตอนทุกอย่างค่ะ) :(

    WSA.

    ตอบลบ
    คำตอบ
    1. ลองเอา cs6 แบบ portable ไปใช้ดูนะครับ
      http://www.mediafire.com/download/64hcwoa9a8al6cn/Adobe+Photoshop+CS6+Extended+%28Portable%29.rar
      ดาวน์โหลดแล้ว install ได้เลย โดยไม่ต้องเอาตัวเก่าออกก็ได้ครับ

      ลบ
  13. ขอบคุณมากเลยนะคะ เป็นประโยชน์ได้มากค่ะ ;w;

    ตอบลบ
  14. ผมลองทำตามทุกขั้นตอนละครับ ทั้ง save เป็น .gif .png ก็ไม่ได้อะคับ มันเกี่ยวกับตัววินโดว์มั้ย ตอนนี้ใช้ xp เก่าเว่อร์

    ตอบลบ
    คำตอบ
    1. ไม่เกี่ยวกับ Windows ครับ xp ก็ใช้ได้ครับ
      ไม่แน่ใจว่าจะเป็นที่ตัว Photoshop เองหรือเปล่า
      ถ้ามีตัว Installer ของ Photoshop ก็ลองเอา Photoshop ออก แล้วลงใหม่ดูครับ
      แต่ต้องใช้เวอร์ชั่นเก่า (CS3) เพราะเวอร์ชั่นใหม่ๆ ของ Photoshop ไม่ support xp ครับ

      ลบ
  15. ผมได้ภาพโปร่งใสมาแล้วครับแต่เวลานำไปซ้อนกันมันมีกรอปอะครับทำอ่างไรถึงจะไม่มีกรอปครับ

    ตอบลบ
    คำตอบ
    1. ไม่ทราบว่ารูปที่นำมาทำมีกรอบอยู่ก่อนหรือเปล่าครับ (บางทีเส้นกรอบบางๆ ถ้าไม่ลบพื้นหลังออกจะมองไม่เห็น)
      เมื่อทำถึงขั้นตอนที่ 10 แล้วให้ใช้เครื่องมือ Eraser Tool ลบกรอบออกก่อน แล้วค่อย Save ตามวิธีในขั้นตอนที่ 11 ครับ

      ลบ
  16. ไม่ระบุชื่อ11 มีนาคม 2558 เวลา 15:52

    ผมทำตามทุกขั้นตอนปกติแล้ว แต่พอเอาไปใส่มันยังมีพื้นหลังสีขาวอยู่อ่ะครับ

    ตอบลบ
    คำตอบ
    1. ไม่ทราบว่าเอาไปใส่ที่ไหนครับ หากเอาไปโพสตามเวป มันต้องขึ้นอยู่กับว่าแต่ละเวปที่เราเอาไปโพสนั้น จะแสดงผลของ PNG.ออกมาอย่างไรด้วยครับ

      ลบ
    2. ไม่ระบุชื่อ16 มีนาคม 2558 เวลา 00:47

      ผมเอาไปใส่ในแอพอ่ะครับ pixlr express ใส่เป็นลายน้ำในรูปอ่ะครับ

      ลบ
    3. แอพ pixlr express นั้นเป็นแอพของแอนดรอยด์กับ ios ผมไม่แน่ใจว่าจะใช้กันได้หรือเปล่านะครับ
      ใส่ลายน้ำสามารถใส่ใน Photoshop ได้เลยครับ โดยการเปิดรูปลายน้ำที่เราทำเสร็จแล้วขึ้นมาใน Photoshop จากนั้นแล้วทำตามขั้นตอนนี้ครับ
      1. กด (ที่แป้นคีย์บอร์ด) Ctrl+a
      2. กด Ctrl+c
      3. กด Ctrl+w
      4. กด Ctrl+o แล้วเลือกรูปที่เราต้องการนำลายน้ำไปติด > Open
      5. กด Ctrl+v
      6. กดตัว v ที่แป้นคีย์บอร์ด แล้วคลิกเม้าส์ค้างที่รูปลายน้ำเพื่อลากไปวางในตำแหน่งที่ต้องการ
      7. หากรูปลายน้ำใหญ่หรือเล็กเกินไป กด Ctrl+t เพื่อปรับขนาดได้ตามต้องการ แล้วกด Enter

      ลบ
    4. ไม่ระบุชื่อ19 มีนาคม 2558 เวลา 22:09

      ขอบคุณมากครับ ^ ^

      ลบ
  17. ทำได้แต่ขอบไม่เนียนครับทำไงอ่า

    ตอบลบ
    คำตอบ
    1. ขอบไม่เนียนอาจเป็นเพราะพื้นหลังกับตัวรูปมีสีที่ใกล้เคียงกัน หรือเส้นขอบของตัวรูปไม่ได้ตัดกับพื้นหลังอย่างชัดเจน ซึ่งรูปลักษณะนี้ต้องตัดด้วยวิธีอื่น อย่างเช่นการใช้ Pen Tool ครับ (คงต้องเขียนเป็นบทความใหม่ขึ้นอีกบทความหนึ่งในโอกาสหน้าครับ)
      หรือหลังจากทำถึงขั้นตอนที่ 10 เสร็จแล้ว จะลองใช้เครื่องมือ Eraser Tool คลิกขวาตรงกลางรูปเพื่อปรับขนาดหัวยางลบก่อน แล้วค่อยคลิกซ้ายค้างลากไปตามขอบของรูปดูก่อนก็ได้ครับ หากทำแล้วเนียนเป็นที่พอใจแล้วค่อยเซฟตามขั้นตอนที่ 11 ครับ

      ลบ
  18. สอบถามเรื่องตัวเลข resolution นิดนึงครับคิดผม เปลี่ยน resolution เพื่อทำหน้าปกบนกล่อง DVD แล้วจะทำ Wallpaper แต่จำเลข resolution ตัวเก่าไม่ได้ มันคือเลขอะไรครับผม

    ตอบลบ
  19. could not complete command because the scratch disk are full ปัญหานี้แก้ยังไงครับผม

    ตอบลบ
    คำตอบ
    1. ลบไฟล์ psd หรือไฟล์อื่นๆ ในไดร์ C ที่ไม่ใช้แล้วออกก่อน (ถ้าไม่อยากลบก็ย้ายไปไว้ในไดร์อื่น หรือแฟลชไดร์ก่อนก็ได้ครับ) แล้วค่อย Save ครับ

      ลบ
  20. ลากรูปลงไม่ได้ทำยังไงดีค่ะ??

    ตอบลบ
  21. ลากรูปลงไม่ได้ทำยังไงดีค่ะ??

    ตอบลบ
    คำตอบ
    1. ลากรูปตรงขั้นตอนไหนครับ ลองอ่านดูทั้ง 11 ขั้นตอนอีกครั้งไม่เห็นมีขั้นตอนไหนบอกให้ลากรูปเลยนะครับ

      ลบ
  22. ของผมตัดเรียบร้อบทำทุกอย่างครบแล้ว เปิดดูรูปพื้นขาวไม่หายไป แต่พอเปิดในphotoshopแล้วไม่มีพื้นหลัง แก้ยังไงครับเนี่ย

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

      ลบ
  23. คือตอนนี้มีปัญหาตอนบันทึกเข้าโทรศัพท์ พอมาใช้ในโทรศัพท์จริงมันไม่โปร่งใสให้ค่ะ แต่ตอนใช้แปะรูปในphotoshopก็โปร่งใสปกติค่ะ งง คือไม่รุ้ทำผิดตรงไหน

    ตอบลบ
    คำตอบ
    1. โทรศัพท์ไม่สามารถแสดงผลของไฟล์ png ให้เห็นพื้นหลังเป็นโปร่งใสได้ครับ

      ลบ
  24. (ไม่รุ้ว่านอกประเด็นหรือป่าว..ขออนุญาตนะคะ)
    คือทำในโทสัพน่ะคะ ตอนทำเส็ดมันก็เป็นเป็นไฟล์png พื้นหลังโปร่งใสปกติ แต่พอส่งไปให้เพื่อน พอเขาเซฟเข้าเครื่องมันกลายเป็นไฟล์jpg .. ในเฟสจะเป็นแค่เครื่องไอโฟน ส่วนไลน์เป็นหมดเลย พอส่งไปกลายเป็นไฟล์jpg

    ตอบลบ
  25. ขอบคุณมากๆครับผม

    ตอบลบ
  26. บทความนี้มีประโยชน์ บางทีฉันสามารถช่วยคุณแปลง jpg เป็น png ด้วยเครื่องมือออนไลน์: JPG4PNG.COM นี่เป็นเครื่องมือที่ฉันพบบน google

    ตอบลบ
  27. This is very interesting, You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your magnificent post. Also, I have shared your website in my social networks! 먹튀검증

    ตอบลบ
  28. This is really interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to more of your magnificent post. Also, I’ve shared your web site in my social networks! 검증사이트

    ตอบลบ
  29. ไม่ระบุชื่อ26 เมษายน 2565 เวลา 15:20

    ทำเสร็ดแต่save png ไม่ได้

    ตอบลบ
  30. ผมทำแล้ว แต่ปรากฏว่าพื้นหลังเป็นสีขาว ไม่ใช่โปร่งใสหรือป่าวครับ หรือผมทำอะไรผิด

    ตอบลบ