ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


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

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

 

คุณสมบัติรูปภาพที่เหมาะสมต่อการนำมาใช้ตกแต่งเว็บไซต์ 

  • ควรเป็นไฟล์ภาพนามสกุล (File Type) เป็น  .jpeg/ .gif/ .png
  • ตั้งชื่อภาพเป็นภาษาอังกฤษและตัวเลข หลีกเลี่ยงการใช้ภาษาไทย สัญลักษณ์อักรขระพิเศษ และการเว้นวรรค  
  • ควรย่อภาพให้มีขนาดไม่เกิน (File Size) 500 KB ยิ่งไฟล์ภาพมีขนาดเล็กเท่าไร ก็จะช่วยให้หน้าเว็บไซต์แสดงผลได้เร็วขึ้นเท่านั้นค่ะ

 

สำหรับเทคนิคในการตกแต่งรูปภาพเบื้องต้น เพื่อนำไปใช้บนหน้าเว็บไซต์ในระบบสำเร็จรูป ReadyPlanet อย่างง่าย ด้วยโปรแกรม PhotoScape ที่จะช่วยย่อภาพ ใส่กรอบและปรับแต่งภาพให้สวยงามยิ่งขึ้น  อีกทั้งเป็นโปรแกรม Freeware สามารถดาวน์โหลดและติดตั้งได้ฟรีค่ะ  อย่ารอช้า ไปติดตามกันเลยค่ะ

(ดาวน์โหลดโปรแกรม PhotoScape เพื่อติดตั้งในเครื่องคอมพิวเตอร์ของคุณ  คลิกที่นี่  ค่ะ )

 

ใส่กรอบและตกแต่งรูปภาพอย่างง่าย
ด้วยโปรแกรม
PhotoScape


1. เปิดโปรแกรม "PhotoScape" จากนั้นคลิกแท็บ "Editor"

 

2. คลิกเปิดโฟลเดอร์ที่เก็บรูปภาพในเครื่องคอมพิวเตอร์ของคุณ จากนั้นคลิกที่รูปภาพที่ต้องการตกแต่ง จะปรากฎรูปภาพใหญ่แสดงผลในส่วนตกแต่งทางขวา ดังรูปค่ะ

 

3. วิธีการใส่กรอบรูป  ให้คลิกเลือกรูปแบบจากตัวเลือกกรอบรูปตามต้องการ (จะอยู่ใต้ปุ่ม Photo+Frame ค่ะ)


4. นอกจากนี้ คุณสามารถตกแต่งรูปภาพด้วยคำสั่งอื่น ๆ เพิ่มเติม เช่น

  • Resize : ปรับย่อขนาดความกว้างและความสูงของรูปภาพ 
  • Bright,Color : ปรับระดับความสว่าง รวมถึงปรับโทนสีของรูปภาพ
  • Auto Level : ปรับสีแบบอัตโนมัติ
  • Auto Contrast : ปรับแสงแบบอัตโนมัติ
  • Sharpen : ปรับความคมชัด
  • Filter : เลือกปรับลูกเล่นและเอฟเฟคต่าง ๆ ให้กับรูปภาพ เช่น ทำให้เป็นภาพเก่า , ภาพเบลอ, ใส่เงา เป็นต้น
  • Bloom : ทำให้ภาพฟุ้งเหมือนภาพในฝัน
  • Backlight : เน้นแสงด้านหลังของภาพให้เข้มขึ้น เพื่อให้วัตถุตรงกลางเด่น


 

นอกจากนี้ ยังสามารถเพิ่มเอฟเฟคตกแต่งอื่น ๆ ได้ที่แท็บ Object หรือ ตัดภาพด้วยคำสั่ง Crop ค่ะ

 

5. เมื่อตกแต่งรูปภาพตามต้องการแล้ว ให้ทำการบันทึก โดยกดปุ่ม Save  จะปรากฎหน้าต่าง Save ให้คลิก Save as

 

6. ในช่อง File Name ตั้งชื่อภาพด้วยตัวอักษรภาษาอังกฤษหรือตัวเลข (หลีกเลี่ยงการใช้ตัวอักษรภาษาไทย สัญลักษณ์พิเศษ และการเว้นวรรค)  จากนั้นที่หัวข้อ Save as type ให้เลือกนามสกุลภาพเป็น .jpg หรือ .png และคลิก Save

 

วิธีใส่รูปภาพที่ตกแต่งแล้วในระบบเว็บไซต์สำเร็จรูป ReadyPlanet

สามารถนำรูปภาพที่ตกแต่งแล้ว มาใส่ในส่วนต่าง ๆ ของเว็บไซต์  เช่น

  • ใส่รูปภาพประกอบเนื้อหาบทความ ด้วยเครื่องมือ Upload Image 

เมื่อคลิกแก้ไขรายละเอียดเนื้อหา และปรากฎหน้าต่างเครื่องมือ Text Editor สำหรับตกแต่งเนื้อหาแล้ว ให้มองหาเครื่องมือ Upload Image หรือ Easy Upload Image ซึ่งอาจมีชื่อที่แตกต่างกันบ้างเล็กน้อย ขึ้นอยู่กับเวอร์ชั่นเครื่องมือ Text Editor ในระบบเว็บไซต์ที่คุณเลือกใช้งาน แต่จะมีลักษณะสัญลักษณ์ที่สื่อความหมายคล้ายกัน เช่น สัญลักษณ์กรอบรูปมีภูเขา พระอาทิตย์ หรือ เป็นสัญลักษณ์กรอบรูปรูปต้นไม้ เป็นต้นนะคะ

 

จากนั้น จะปรากฎหน้าต่างสำหรับอัพโหลดรูปภาพ คุณสามารถกดปุ่ม Browse และเลือกไฟล์รูปภาพที่บันทึกอยู่ในเครื่องคอมพิวเตอร์ของคุณ และเมื่อระบบอัพโหลดรูปตัวอย่างเข้ามาในหน้าต่าง Upload Image สามารถกำหนดขนาดความกว้าง ความสูง รวมถึงตั้งค่าการแสดงผลตามต้องการเพิ่มเติมได้ค่ะ



ตัวอย่างการแสดงผลรูปภาพที่ใส่กรอบและตกแต่งจากโปรแกรม PhotoScape ในเนื้อหาของบทความ


 

  • ตกแต่งเป็นรูปภาพแบนเนอร์ส่วนหัวของเว็บไซต์ 

สามารถตกแต่งภาพด้วยโปรแกรม PhotoScapeและนำรูปภาพไปประยุกต์ใช้ในส่วนอื่น ๆ เพิ่มเติม เช่น รูปภาพส่วนหัวของเว็บไซต์ โดยขนาดภาพส่วนหัวจะขึ้นอยู่กับขนาดเทมเพลตเว็บไซต์ที่คุณเลือกใช้ คลิก Browse เลือกรูปภาพส่วนหัวที่ตกแต่งแล้วในหัวข้อ "แสดงภาพส่วนหัว" และคลิก "ตกลง" เพื่อบันทึกค่ะ

 

ตัวอย่างการแสดงผลรูปภาพส่วนหัวของเว็บไซต์ ที่ใส่กรอบและตกแต่งจากโปรแกรม PhotoScape

 

นอกจากนี้ ภาพที่ตกแต่งจากโปรแกรม PhotoScape ยังสามารถนำมาใช้ตกแต่งเว็บไซต์ได้อีกหลายส่วนเลยนะคะ ไม่ว่าจะเป็น ใส่เป็นรูปภาพสินค้าในระบบร้านค้า, ติดเป็นแบนเนอร์โฆษณาที่เมนูด้านข้างของเว็บไซต์, ใส่เป็นรูปภาพแทนชื่อเมนู หรือพื้นที่ด้านล่างของเว็บไซต์ ฯลฯ

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

 

Jittima  Suebsook
www.ReadyPlanet.com




วิธีใส่ข้อมูลและตกแต่งเว็บไซต์สำเร็จรูป ReadyPlanet เบื้องต้น

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
การเลือกรูปแบบเว็บไซต์ (Template) และจัดโครงสร้างหน้าแรก (Layout)
เทคนิคการจัดการเมนูหลักที่สวยและดี
จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย article
แนะนำการวาง Code Youtube ในเว็บไซต์
วิธีสร้างลิงก์ E-Mail
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
สร้างลิงก์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ Text Editor
สร้างรูปภาพเคลื่อนไหวแบบ Marquee
วิธีสร้างไฟล์ภาพ Favorite Icon เพื่อแสดงผลในช่อง Address Bar
เทคนิคการสร้างลิงค์ ในหน้าเดียวกันด้วยคำสั่ง Anchor
เทคนิคการสร้างลิงก์เมนูและรูปภาพแบนเนอร์ ในพื้นที่ด้านล่างของเว็บไซต์
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
วิธีติดตั้ง Facebook Page Plugin (Like Box) ในเว็บไซต์
วิธีแสดงผลเครื่องเล่น VDO บนหน้าเว็บไซต์
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์กับ Google
วิธีติดตั้งโค้ด Google Analytics
วิธีติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงค์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก