ตกแต่งหัวเวบ 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

บันทึกนี้เขียนที่ GotoKnow โดย  ใน Live online

คำสำคัญ (Tags)#head#photoscape#portal.in.th#suandokpal#สร้างเวบด้วยตนเอง

หมายเลขบันทึก: 456716, เขียน: 29 Aug 2011 @ 04:27, แก้ไข, 23 Jun 2012 @ 20:04, สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน, ดอกไม้: 21, ความเห็น: 23, อ่าน: คลิก
บันทึกที่เกี่ยวข้อง
บันทึกล่าสุด


ความเห็น (23)

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

ชาดา ~natadee
เขียนเมื่อ 29 Aug 2011 @ 08:57

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

ป.
เขียนเมื่อ 29 Aug 2011 @ 11:35

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

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

ป.
เขียนเมื่อ 29 Aug 2011 @ 11:46

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

Wasawat Deemarn
เขียนเมื่อ 29 Aug 2011 @ 14:00

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

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

ขอบคุณครับ

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

ดอกไม้งามมาฝากค่ะ

 

ป.
เขียนเมื่อ 29 Aug 2011 @ 21:55

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

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

ป.
เขียนเมื่อ 29 Aug 2011 @ 22:02

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

krusorn
เขียนเมื่อ 29 Aug 2011 @ 22:04

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

ป.
เขียนเมื่อ 29 Aug 2011 @ 22:04

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

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

โอ๋-อโณ
เขียนเมื่อ 29 Aug 2011 @ 23:21

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

Wasawat Deemarn
เขียนเมื่อ 30 Aug 2011 @ 01:43

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

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

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

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

ป.
เขียนเมื่อ 30 Aug 2011 @ 05:10

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

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

ป.
เขียนเมื่อ 30 Aug 2011 @ 05:11

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

ผืนฟ้า
IP: xxx.172.199.250
เขียนเมื่อ 30 Aug 2011 @ 09:30

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

ป.
เขียนเมื่อ 31 Aug 2011 @ 01:04

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

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

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

Peter p
เขียนเมื่อ 31 Aug 2011 @ 16:55

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

krusorn
เขียนเมื่อ 01 Sep 2011 @ 18:24

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

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

Boo
เขียนเมื่อ 04 Sep 2011 @ 09:35

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

ป.
เขียนเมื่อ 04 Sep 2011 @ 10:15

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

ป.
เขียนเมื่อ 04 Sep 2011 @ 10:19

 

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

 

ป.
เขียนเมื่อ 04 Sep 2011 @ 10:22

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