ผู้เขียน หัวข้อ: 02/05/09 :: User Bar Sign Tutoria  (อ่าน 6170 ครั้ง)

★oGazettEo★

  • นักกีฬาควิดดิชทีมชาติ ตำแหน่งบีตเตอร์
  • *********
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 1693
02/05/09 :: User Bar Sign Tutoria
« เมื่อ: 02 พฤษภาคม 2009, 03:45:58 pm »
User Bar Sign Tutorial - ด้วยตัวท่านเองง่ายๆครับ..เอามาจากเว็บนอกอีกทีนึงง่ะ
http://www.pixel2life.com/forums/index.php?showtopic=6369
สืบเนื่องมาจาก..


ใครอยากเป็นเจ้าของ User Bar ตามรูปที่แทรกมาบ้างจ๊ะ หุหุหุหุ
ท่านใดสนใจบ้างครับ แวะมาชมกันได้นะครับผม
แต่ขอบอกว่า..ตัวท่านก้อสามารถทำขึ้นเองได้ง่ายๆครับผม..


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

ขั้นตอนที่ 1
เรียกโปรแกรม Adobe Photoshop ขึ้นมา เลือก "File -> New.." แล้วตั้งค่าตามภาพ 350 x 20 px
แล้วตอบ OK เพื่อเริ่มขั้นตอนต่อไปครับ..

ขั้นตอนที่ 2
ให้ใช้คำสั่ง Fill สีที่เราต้องการ จากภาพตัวอย่างนี้คือ #3093cc

ขั้นตอนที่ 3
สร้าง layer ขึ้นมาใหม่จากแถบเครื่องมือ ให้ใช้ Gradient Tool ลากจากมุมทำองศาอย่างภาพตัวอย่างครับ

จะได้ผลตามภาพ..

ขั้นตอนที่ 4
สร้าง layer ขึ้นมาใหม่อีกหนึ่ง layer ครับ..
เพื่อที่จะนำเอาโลโก้ที่เรามีอยู่มาแทรก..ตามภาพ

มีโลโก้แทรกอยู่ในภาพแล้ว..

พักส่วนตัวหลักนี้เอาไว้ก่อนครับ ต่อไปเราจะแต่ง Pattern ให้ดูงามขึ้นอีกนิด

ขั้นตอนที่ 5
ขั้นตอนนี้เราจะมาแต่งพื้นหลังให้ดูมีลูกเล่นนิดหน่อยนะครับ
ก้อเหมือนเดิมครับ เลือก "File -> New.." แล้วตั้งค่าตามภาพ 5 x 5 px แล้วตอบ OK เพื่อเริ่มขั้นตอนต่อไปครับ..

ขั้นตอนที่ 6
ทำการขยายภาพที่เราสร้างนี้เป็น 1600% ครับ เพื่อความชัดเจนไง
แล้วใช้เครื่องมือ Pencil Tool ตามใจชอบ สีดังภาพตัวอย่าง #004f7c.
เสร็จแล้วก้อไปที่คำสั่ง Edit -> Define Pattern.." เพื่อทำการเซฟ

ซึ่งท่านสามารถนำไปประยุกต์ใช้ในสไตล์ของตัวท่านเองได้ครับ..
ในส่วนนี้เราก้อจบเพียงเท่านี้ครับ..ต่อไปเราจะกลับไปแต่งในส่วนอื่นๆของ User Bar ต่อไปครับ

ขั้นตอนที่ 7
ขั้นตอนนี้นั้นเราจะทำการใส่ Pattern ที่ได้ทำเอาไว้มารวมกัน
เริ่มจากการสร้าง layer ขึ้นมาใหม่ ใช้คำสั่ง "Edit -> Fill.." แล้วปรับค่า "Opacity" ให้ลดลงเหลือ 10%

จัดการพิมพ์ข้อความตกแต่งอีกนิด ก้อจะได้ผลดังภาพตัวอย่างนี้ครับ..
แนะนำให้ใช้ฟอนต์ verdana ขนาด 8px ครับ..ดูดีสุด

ขั้นตอนที่ 8
ต่อไปเป็นการใส่ความมันวาวให้กับ User Bar เหมือนเคลือบด้วยกระจก หรือดูนูนมีมิติครับ
ทำการสร้าง layer ขึ้นมาใหม่ครับ...แล้วก้อ Fill สีขาวลงไปตามภาพตัวอย่างนี้

ขั้นตอนที่ 9
แล้วใช้ "Elliptical Marquee Tool" เลือกส่วนที่ต้องการเอาออกตามภาพตัวอย่างครับ

จากนั้นแล้วปรับค่า "Opacity" ให้ลดลงเหลือ 15%

ขั้นตอนที่ 10
ใส่กรอบเล็กน้อย แล้วจัดการเซฟ "File -> Save As.." ครับ
ก่อนเซฟก่อนทำการรวม layer ด้วยนะครับ หากไม่ต้องการแก้ไขไฟล์อีก

เสร็จแล้วก้อจะได้ตามลักษณะนี้แหละครับ


เครดิต by คุณ eThon / IT-Friend.net

ปล.รึใครขี้เกียจ http://www.userbars.com/ coppyมาแปะ หรือhttp://userbarmaker.com/ ก้ไม่ว่ากัน ลองมาทำเล่นกันหนุกๆ :-D :smile:
« แก้ไขครั้งสุดท้าย: 04 พฤษภาคม 2009, 07:17:57 am โดย ~ Chicken_rengeR ~ »
เบื่อประเทศไทยจัง~

อัลบัส เต้ ดับเบิ้ลดอร์

  • อิอิอิอิ 555+ งิงิงิ
  • ผู้วิเศษเลือดผสม
  • ****
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 157
  • ผม อัลบัส ดัมเบิ้ลดอร์ ครับ
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #1 เมื่อ: 03 พฤษภาคม 2009, 01:00:15 pm »
 >:( ขอบคุนนะครับที่เอา วิทีทำ มาไห้ผม ผมจะเอาไปทำครับ  >:(
เตเต้เองครับ

Magic-Cvidiz

  • =^=//...Magic-Cvidiz....?[z(- -)//]
  • มนุษย์หมาป่า
  • ******
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 285
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #2 เมื่อ: 03 พฤษภาคม 2009, 01:19:28 pm »
อื้อ ,, แต่คงเรียนรู้นานหน่อย

55+ จะพยายามทำแล้วมาอวดนะคะ

ขอบคุณที่นำมาฝากคะ !!

love_Ron

  • ปาร์ค แจบอม ณ ซีแอตเทิล.
  • นักเรียนโรงเรียนเวทมนตร์ปี 6
  • *********
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 1020
  • ~i'm ฟางฟาง คอน~
    • ●  รู้ลึก รู้ดี (เรื่อง) รูเพิร์ต ●
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #3 เมื่อ: 04 พฤษภาคม 2009, 08:42:55 am »
ขอบคุณนะค่ะ Shop พังพอดี ๕๕

แล้วจะเอาไปศึกษาค่ะ :"D


MaGiC PiNk !!

  • จงรีบทำในสิ่งที่ยังไม่ได้ทำ ก่อนที่จะสายเกินไป
  • นักเรียนโรงเรียนเวทมนตร์ปี 3
  • ********
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 663
  • Love Harry 4 Ever
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #4 เมื่อ: 11 สิงหาคม 2009, 04:21:33 am »
เจ๋งค่ะ

เดี๊ยวจะลองไปทำดู
Happy and Smile

rarue78

  • บุคคลทั่วไป
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #5 เมื่อ: 21 สิงหาคม 2009, 04:08:12 pm »

 :)

555  เยี่ยมเลยค่ะ

หาวิธีทำมานานแล้ววว...ววว

ตอนนี้ขอกลับไปวางแผนแล้วก็หาภาพสวย ๆ ก่อน

ไว้ทำเสร็จแล้วจะเอามาอวดนะคะ

tongkc

  • บุคคลทั่วไป
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #6 เมื่อ: 29 สิงหาคม 2009, 03:56:28 pm »
ขอบคุณค่ะ
จะเอาไปทำค่ะ

loveharry

  • หูไม่ตรงกับตา
  • มนุษย์หมาป่า
  • ******
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 268
  • ♥ --> Bigbang --> SHINee ♥
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #7 เมื่อ: 15 กันยายน 2009, 02:33:56 pm »
ขอบคุณมากๆเลยนะคะ 

หามานานแล้ว  เยี่ยมเลยค่ะ ^^
Thanks >>>  P♥tterst♥ryweb

Reseus G.

  • มักเกิ้ล
  • *
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 11
  • 'ฮอกวอตส์' รักและเทิดทูน
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #8 เมื่อ: 14 ธันวาคม 2009, 04:30:14 am »
ขอบคุณมากๆค่ะ  แหะๆ  ทีแรกทำไอ้ขอบขาวขั้นตอนที่ 9 ไม่เป็น ไม่รู้ว่าเขาทำยังไง ทีนี้รู้แล้ว ขอบคุณมากๆค่ะ  :D

De_PaKaPol

  • ผู้วิเศษเลือดบริสุทธิ์
  • *****
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 205
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #9 เมื่อ: 02 กุมภาพันธ์ 2010, 11:50:42 am »
ขอบคุณครับ
และผมจะบอกเพื่อนต่อครับ

[ [ ◘ อะรี่ พอตเตอร์ ◘ ] ]

  • Hold On ~ Only U ...!
  • มนุษย์หมาป่า
  • ******
  • ออฟไลน์ ออฟไลน์
  • กระทู้: 256
  • " Everything " means " Nothing " !!
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #10 เมื่อ: 26 เมษายน 2010, 08:25:24 am »
ขอบคุณจ้า จะพยายามเรียนรู้้ส่วนที่ไม่เข้าใจละกันนะคะ

^"^  เจ๋งดีเนอะ

caso

  • บุคคลทั่วไป
Re: 02/05/09 :: User Bar Sign Tutoria
« ตอบกลับ #11 เมื่อ: 29 ธันวาคม 2015, 06:50:12 am »
เยี่ยมๆ  :D


gclub

 

SMF spam blocked by CleanTalk