วิธีทำกรอบ+ข้อความเลื่อน

วันนี้แมวดำจะมาสอนการใส่โค้ด กรอบ+ข้อความเลื่อนนะคะ ขอให้ตั้งใจอ่าน และทำตามไปด้วย เพื่อป้องกัน การงง ไม่เข้าใจ นะคะ ทุกขั้นตอนไม่ยาก ถ้าใครที่คล่องโฟโต้ชอปแล้ว จะได้เปรียบหน่อยค่ะ ลองฝึกทำดูค่ะ ทำบ่อยๆ จะได้คล่องๆ สิ่งสำคัญอันดับ 1 ในการจะทำกรอบนะคะ จะต้องมีโปรแกรม Photoshop ก่อนนะ (บางคนอาจจะถนัด อิเมจ แต่ว่า มันไม่เปะๆ เท่า โฟโต้ชอป นอกจาก การทำภาพเคลื่อนไหว นะคะ) แล้วก็ มีพื้นฐาน โค้ด HTML หน่อยก็ดี จะได้เข้าใจโค้ดหน่อย

1. เปิดโปรแกรม Photoshop แล้วเลือกรูป มา 1 รูป ตัดต่อ ตกแต่ง อะไรให้เรียบร้อยนะคะ
*ตกแต่งเสร็จแล้ว ก็เซฟรูปให้เรียบร้อยเลยนะคะ (ถ้าเซฟที่หลัง รูปที่เซฟจะออกมาเป็น 9 ชิ้นไปเลยค่ะ)*

2. ที่เมนู ด้านข้างคลิก (Silce Tool) แล้วแบ่งเป็น 9 ส่วน ดังภาพ

3. จากนั้นให้คลิก (Rectangular marquee tool) แล้วลากเม้าท์ ไปตามส่วนต่างๆที่ตัดเอาไว้ เพื่อดูขนาด (กว้างxสูง) ของแต่ละส่วน และต้องจดไว้ด้วยนะ เดี๋ยวลืม
*ช่องตรงกลาง ตัดแบ่งให้ได้ขนาดที่เราเว้นไว้ใส่ข้อความนะค่ะ เหลื่อมเข้ามาหน่อยก็ดี จะได้ดูสวย*

แล้วลากเป็นเส้นประๆ

ให้คลิกที่ info ปกติจะอยู่ บนขวาของโปรแกรมอ่ะ ดูรูปละกัน

วิธีการตั้งให้เป็น หน่วย พิกเซล คือไปที่ Edit >> Preferences >> Units&Rulers แล้วตั้งค่าRulers จาก cm เป็น pixles

หรืออีกวิธีนึง

แล้วเราก็กด Ctrl+X (ที่แป้นพิมพ์) จากนั้นกด Ctrl+N (ที่แป้นพิมพ์) จะมีหน้าต่างขึ้นมาบอกขนาด (กว้างxสูง) ให้เราจดขนาดนั้นๆ ทั้ง 9 ส่วนที่ ได้แบ่งไว้

อย่าลืมจด ขนาด(กว้างxสูง) รูปด้วยนะ วิธีการคือ ที่เมนูด้านบน คลิก Image >> Image size

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

แล้วให้ใส่โค้ดนี้ค่ะ คลิกค่ะ
(ขออภัยนะคะ ที่โค้ดมาไม่ครบ ยังไม่ชิน ระบบบล๊อกเท่าไหร่ค่ะ)

เมื่อเปลี่ยนอะไรทุกอย่างเสร็จแล้ว ก็เอาไปแปะที่สเปซ บล๊อก ได ได้ตามสบาย
สาเหตุที่สอนวิธีนี้ เพราะว่ากรอบจะfix พอดี เปิดกับ browserตัวไหน ข้อความก้อจะไม่ล้นกรอบค่ะ

เขียน/ เรียบเรียงโดย แมวดำ

*หมายเหตุ รูปทุกรูป ลิงค์ทุกลิงค์ บทความทุกบทความ เป็นลิขสิทธิของ แมวดำ ดอทคอม ห้ามทำการคัดลอก ดัดแปลง เปลี่ยนแปลง โดยเด็ดขาด*

29 Responses to “วิธีทำกรอบ+ข้อความเลื่อน”

  1. meawdam Says:

    :em02: อีโมมาแย้วๆๆๆๆๆๆ

  2. อุซางิ Says:

    :em02: อีโมมาแย้วๆๆๆๆๆๆ

    :em37:

  3. meawdam Says:

    :em30: อุซางิหลับเหรอ

  4. nootoeyza Says:

    ขอบคุณคร่าพี่นุช มาที่เวป(บล๊อค)หรือสเปซของพี่นุชได้ความรู้กลับบ้านทุกทีเลยคร่า….. :em70: :em54:

  5. meawdam Says:

    :em02: ชอบพี่เก๊าะ ดีใจ

  6. ส้มซ่าส์ Says:

    เมื่อไหร่เราจะทำได้บ้างเนี่ย อิอิอิอิ :em66: :em49:

  7. korcheena Says:

    แวะมาทักทาย

  8. pokkyja Says:

    :em34: ชอบจังเลยจ๊ะ แต่ว่าวันนี้ไม่มีรูป ไว้จะแวะมาทำการเรียนรู้จ้า

    :em64: น่ารักมาก ๆ เลย ขอบคุณนะจ๊ะ

  9. coo Says:

    แร้วมานส่ายตรงไหนอะ
    ไอ้โค้ด ยาวๆเนี่ย บอกให้ครบๆหน่อยเด้คราบ

  10. meawdam Says:

    แร้วมานส่ายตรงไหนอะ
    ไอ้โค้ด ยาวๆเนี่ย บอกให้ครบๆหน่อยเด้คราบ

    ใส่ในสเปซไงคะ

  11. E--lluu Says:

    แล้ว รูปที่ฝากไว้อะคะ

  12. E--lluu Says:

    จาเอามารวมกะโค้ดนี้ยังไงอะ

  13. E--lluu Says:

    อ๋อ โทดทีเมื่อกี๊อ่านไม่ครบ ง่า

  14. meawdam Says:

    :em29: ตายแล้ว โค้ดมาไม่ครบ เด๋วแป็บนึงค่ะ

  15. meawdam Says:

    :em31: โค้ดใช้ได้แระ -*- ปวดหัวๆๆๆๆๆๆๆๆๆๆๆๆๆๆ :em65:

  16. MUAY Says:

    ซึ้ง ขอบคุณมากค่ะ มีสาระมากเลย ชอบเว็บแมวดำมากค่ะ
    :em51:

  17. Nong Bird Says:

    สวัสดีครับพี่นุช ผมขออนุญาติเอากรอบของพี่ ไปใส่ขวด wine อวดเพื่อนๆ ได้ไหมครับ? และผมก้อบอกว่าเป็นของพี่ แมวดำพุงป่อง ด้วย ขอบคุณครับ

  18. Meiru Says:

    ได้ความรุดีๆมาเพิ่มแร้ว ขอบคุนมากค่ะ
    แต่ว่าขอถามหน่อยค่ะ ไม่เข้าใจตรงแบ่งเปน 9 ส่วนด้วย slice tool
    เราจะรุได้ยังไงว่าเราต้องแบ่งส่วนไหนบ้าง
    แบบว่าพอลองลากไปส่วนนึง มันก็ขึ้นมาให้ 6 หรือ 7 อัน
    ไม่ใช่ 9 อัน แล้วพอลากอีกทีก็เป็น 11 หรือ 12 ส่วน
    งงค่ะ :em52: ช่วยอธิบายที

  19. Meiru Says:

    อีกคำถามค่ะ ตอนใส่โค้ตสำหรับ ความกว้างกับความสูงของทั้ง 9 ส่วน เราจะรู้ได้ยังไงว่าต้องใส่ตามลำดับไหน??

  20. meawdam Says:

    ได้ความรุดีๆมาเพิ่มแร้ว ขอบคุนมากค่ะ
    แต่ว่าขอถามหน่อยค่ะ ไม่เข้าใจตรงแบ่งเปน 9 ส่วนด้วย slice tool
    เราจะรุได้ยังไงว่าเราต้องแบ่งส่วนไหนบ้าง
    แบบว่าพอลองลากไปส่วนนึง มันก็ขึ้นมาให้ 6 หรือ 7 อัน
    ไม่ใช่ 9 อัน แล้วพอลากอีกทีก็เป็น 11 หรือ 12 ส่วน
    งงค่ะ :em52: ช่วยอธิบายที

    ให้เริ่มจาก ตรงกลาง แล้วค่อย มุมซ้ายบน มุมขวาบน มุมซ้ายล่าง มุมขวาล่าง ค่ะ

    อีกคำถามค่ะ ตอนใส่โค้ตสำหรับ ความกว้างกับความสูงของทั้ง 9 ส่วน เราจะรู้ได้ยังไงว่าต้องใส่ตามลำดับไหน??

    ซ้ายไปขวา บนมาล่าง

  21. nuning Says:

    ได้ความรุดีๆมาเพิ่มแร้ว ขอบคุนมากค่ะ
    แต่ว่าขอถามหน่อยค่ะ ไม่เข้าใจตรงแบ่งเปน 9 ส่วนด้วย slice tool
    เราจะรุได้ยังไงว่าเราต้องแบ่งส่วนไหนบ้าง
    แบบว่าพอลองลากไปส่วนนึง มันก็ขึ้นมาให้ 6 หรือ 7 อัน
    ไม่ใช่ 9 อัน แล้วพอลากอีกทีก็เป็น 11 หรือ 12 ส่วน
    งงค่ะ :em52: ช่วยอธิบายที

    ให้เริ่มจาก ตรงกลาง แล้วค่อย มุมซ้ายบน มุมขวาบน มุมซ้ายล่าง มุมขวาล่าง ค่ะ

    อีกคำถามค่ะ ตอนใส่โค้ตสำหรับ ความกว้างกับความสูงของทั้ง 9 ส่วน เราจะรู้ได้ยังไงว่าต้องใส่ตามลำดับไหน??

    ซ้ายไปขวา บนมาล่าง

    ตอนแรกก็งง เหมือนกันค่ะ
    แต่พอทำได้ สนุกมากๆเลย อธิบายลำบากมาก ถ้าจะให้พิมพ์ แหะๆ หนิงมั่วไปก่อน
    สกอร์บาร์หาย บ้าง ลองผิดลองถูกไปค่ะ เดี๋ยวได้เอง อิอิ :em55:

  22. - a o m ``Hp” - Says:

    ….เจ๊แมวดามค๊า นู๋ทำได้แว้ว :em47: แต่..ข้างหลังมันยังมีพื้นขาวๆอยู่เลยอ่ะค่ะ ทำไงให้มันหายไปคะ :em61: มันม่ายสวยอ่ะค่ะ
    http://aom-hp.spaces.live.com

  23. - a o m ``Hp” - Says:

    อ่ะเย้เพอร์เฟคค่ะ :em69: ขอบคุนที่ไปแนะนำนะคะ :em47:

  24. Makham Says:

    คือที่เครื่องไม่มี โปรแกรม Photoshop สามารถใช้โปรแกรมอื่นแทนได้ไหมค่ะ
    เช่น Jasc Paint Shop Pro 9

  25. MeawDam Says:

    คือที่เครื่องไม่มี โปรแกรม Photoshop สามารถใช้โปรแกรมอื่นแทนได้ไหมค่ะ
    เช่น Jasc Paint Shop Pro 9

    ไม่แน่ใจเหมือนกันค่ะ เพราะไม่รู้จักโปรแกรมนี้เลย
    ถ้าเกิดว่ามีเครื่องมือคล้ายๆ slice tool ที่ไว้แบ่งส่วนของภาพ ก็ใช้ได้เหมือนกันค่ะ

  26. ^^'' Says:

    คือว่าทำออกมาแล้ว ก๊อปโค้ดไปแร้วเปี่ยนขนาดทั้ง 9 ช่อง
    แร้วก้อเปี่ยนค่าทุกอย่างหมดแร้วอ่ะค่ะ

    แต่พอกดดู ..

    มันไม่มีแค่ภาพตรงกรอบนั้นอย่างเดียวอ่า
    มันมีภาพเกินมาทางด้านขวาแล้วก้อด้านล่าง
    ต้องทามยังงัยหรอค่ะ

    งงมากมาย
    :em29:

    ช่วยตอบหน่อยนะค๊ะ

    ขอบคุณค่ะ
    :em33:

  27. MeawDam Says:

    ปัญหานี้อาจจะเกิดจาก ใส่ความกว้าง กับความสูงของรูปทั้งหมด ผิดไป
    ดูได้จาก Image >> Image size

    คราวหลังทิ้งลิงค์สเปซไว้ด้วยนะคะ จะได้ตามไปแก้ถูกค่ะ

  28. ^^'' Says:

    ได้แล้ว ขอบคุณนะค่ะ
    พอดีแบ่งขนาดกรอบผิดหมดเรย

    T^T

    ขอบคุนมากค่า

  29. milkiiz Says:

    ขอบคุณมากเลยค่ะที่สอน
    ทำได้แล้วแต่ว่า

    สกอบาร์หายอ่าค่ะ _ _”
    ทำไงดีคะ