ตกแต่งหัวเวบ portal.in.th แบบพอเพียง


 

การตกแต่งเวบ ที่ไม่ต้องใช้โปรแกรมราคาแพง ยุ่งยาก ทำสนุกๆ แบบมือสมัครเล่น แต่ออกมาดูดีทีเดียว (ห้ามดูหลายที :-)
บันทึกนี้เป็นภาคต่อของบันทึกนี้คะ
.
หลังจากได้รับคำแนะนำจากกัลยาณมิตร พี่โอ๋ และ อ.ขจิต ให้รู้จักโปรแกรมฟรี ชื่อ Photoscape ก็ถูกใจใช่เลย
เพราะโปรแกรมนี้ใช้ง่ายกว่า Photoshop ซึ่งข้าพเจ้าเคยพยายามเรียนรู้ แต่ก็แพ้ความอลังการของชุดเครื่องมือ
ขณะเดียวกัน ก็ยืดหยุ่นกว่าโปรแกรมสามัญประจำบ้านอย่าง paint ที่ข้าพเจ้าใช้มาตลอด
.
วันนี้ ขอแลกเปลี่ยนเรียนรู้ การทำหัวเวบไซต์ประจำทีม กันคะ
Photoscape สร้างรูป
.
1. หน้าแรกของโปรแกรม ฟังก์ชั่นอื่นๆ ยังไม่มีโอกาสใช้  พุ่งเป้าไปที่ editor
.
2.เปิดไฟล์รูปภาพหลักขึ้นมาก่อน
.
.
3. เพื่อทำเป็น Head ที่มีขนาด กว้าง x สูง 940 X130 จึงต่อพื้นที่รูปออกมาด้วยการวาดสี่เหลื่ยม
  แล้วทำการ "เชื่อม" ภาพกับ object สี่เหลี่ยมที่วาด ให้เป็นภาพเดียวกัน
 จะมีให้เลือก 2 แบบคะ แบบแรกคือ 2 ส่วนนี้ไปเกยทับกัน (สนธิ) 
 ส่วนตัวเลือกที่สอง ให้มันมาชนต่อกัน (สมาส)
.
.
4. ต่อไปเพื่อให้ดูศิลปะอีกนิด ข้าพเจ้าจึงใช้ เครื่องมือ mosaic ทำให้ขอบภาพอนุสาวรีย์พระราชบิดาเบลอๆ 
.
.
5.การใส่ตัวอักษร  มีเครื่องมือตัวอักษรที่ใส่ลูกเล่น ขอบ และเงาได้ แต่..
.
.
6. พอเป็นภาษาไทยแล้ว งง เลย..
.
.
7.จึงต้องหันกลับไปพึ่งโปรแกรม paint สร้างรูปที่มีอักษรภาษาไทย
.
 
.
8.จากนั้น ดึงรูป เข้ามาแปะ ...เราสามารถเลือกความโปร่งของพื้นหลังได้
.
.
ด้วยหลักการเดียวกัน ข้าพเจ้าใช้ดึงรูปสัญลักษณ์ ที่มีผู้สร้างไว้สำเร็จรูปมาแปะมุมซ้ายสุด
.
.
9.เสร็จแล้วคะ พอดูได้ไหม :-)
########
.
การนำภาพไปตกแต่งใน portal.in.th
.
1. ก่อนอื่น นำภาพไปเก็บในส่วน -> ไฟล์  เสียก่อน 
  ภาพที่เก็บแล้ว จะมี "ที่อยู่" (url) มอบหมายให้ copy ตัวนี้ไว้ เพื่อไปใส่ใน CSS code ต่อไป
.
.
2. จากเมนูบาร์ -> เว็บศูนย์รวม -> ตกแต่งเวบ
 ในช่องการตกแต่ง CSS ใส่ url ที่ copy มาใส่เข้าไปใน template คะ 
 ( แต่โปรดอย่าถามเกี่ยวกับ HTML ...มิรู้เรื่องไปมากกว่าที่เห็นคะ)
.
3. ออกมาดังที่เห็น
###########
ใครมีเทคนิคการใช้ Photoscape ดีๆ เล่าให้ฟังบ้างนะคะ :-D
หมายเลขบันทึก: 456716เขียนเมื่อ 29 สิงหาคม 2011 04:27 น. ()แก้ไขเมื่อ 23 มิถุนายน 2012 20:04 น. ()สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกันจำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (23)

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

ชอบใช้โปรแกรมนี้เหมือนกันค่ะคุณหมอ ^_^

 ชอบ gif ภาพนี้มากๆๆๆๆๆ คะ

ตามไปดูที่บล็อกพี่ใหญ่ เขียนไว้ปี 2553 

เห็นภาพน่ารักแบบนี้ ตอนวันแม่ด้วยคะ :-)

อัจฉริยะอีกแล้วคุณหมอบางเวลา ;)...

เก่งอ่ะ ... ทำให้ต้องไปคิดว่า จะลองไปฝึกบ้างเนี่ย

ขอบคุณครับ

เก็บภาพเจ้าเหมียวแขกประจำบ้านมาฝาก แต่งด้วย Photoscape มาฝากค่ะ..

ชักรู้สึกตัวเอง เป็นคนชอบ "อวดดี" - คือทำอะไรได้ดีหน่อยแล้วรีบโชว์ :-)
คนเก่งกว่านี้ เขาเฉยๆ ไม่โชว์  

จริงๆ แล้ว ต้องการทราบว่าคนอื่นทำอย่างไรด้วยคะ เป็นการแลกเปลี่ยนเรียนรู้

 เลือกวิธีทำกรอบได้เข้ากับอารมณ์​(แมว) มากเลยคะ

จะนำไปฝึก  ถ้าใช้ได้จะนำมาส่งค่ะ  ขอบคุณมากค่ะ   

ทำกรอบเป็นรูปหัวใจได้ด้วย..เดี๋ยวต้องไปศึกษาวิธีทำดู :-)

ไปดูที่บล็อกแล้ว ทำได้น่าอ่านมากเลยคะ

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

คุณหมอบางเวลาจำไม่ได้หรือว่า ...

"... หากอ่านหนังสือ (มีความรู้ใหม่ ๆ) แล้ว ควรให้ถ่ายทอดต่อให้ผู้เขียนภายในเวลา 48 ชั่วโมง ..."

ดังนั้น ได้ความรู้มาใหม่แล้ว ต้องรีบส่งต่อ ก่อนลืม หรือ ไม่อยากเขียน ;)...

ให้กำลังใจเต็มเปี่ยมเลยเอ้า !

ดีใจๆ คะ พี่โอ๋เซียนตัวจริงที่มาให้กำลังใจ 
ตอนทำบทความนี้ เนื่องจากต้อง up หลายภาพ เลยใช้วิธีใส่ไว้ใน facebook คะ (เพื่อนที่เข้าไปคงงง) แล้วเอาลิงค์มาแปะ  รู้สึกเร็วกว่า และช่วยประหยัดพื้นที่ server ด้วย

เห็นด้วยคะ พื้นที่นี้ แบ่งปันกัน (ถ้ามีเวลา :-)

ถูกเลยคะ พอผ่านไป 48 ชม.แล้ว ความรู้ใหม่ มันจะกระดอนออกไปซะก่อน :-)

คุณหมออัจฉริยะ

ขอบคุณคะท่าน ผอ. แต่คงเกินไปที่จะรับคำนี้คะ

เวลาเขียนบล็อก ก็พยายามคัดสรรสิ่งที่ีดีๆ มาโชว์

แต่ส่วนที่ไม่ได้เรื่องของตัวเองก็มีเยอะคะ ...ตามแบบปุถุชน 

เก่งมากเลยครับ ขอเป็นกำลังใจให้ครับ

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

http://portal.in.th/kasorn1/pages/8279/

ว้าว คุณหมอเจ๋งอีกแล้วค่ะ คนโลว์เทค ยังใช้โปรแกรมนี้ไม่เป็น ว่างๆ จะลองดู ขอบคณเจ้า

  ขอบคุณที่ให้กำลังใจคะ 

 

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

 

เพิ่งเริ่มใช้เหมือนกันคะ ไม่ยากเลย บล็อกคุณ Poo  มีภาพสวยๆ เยอะ น่าลองดูนะคะ 

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท