Potter Story Webboard [TH]

Potter Story Train !!! => Photoshop Room ! => ข้อความที่เริ่มโดย: ★oGazettEo★ ที่ 02 พฤษภาคม 2009, 03:45:58 pm

หัวข้อ: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: ★oGazettEo★ ที่ 02 พฤษภาคม 2009, 03:45:58 pm
User Bar Sign Tutorial  - ด้วยตัวท่านเองง่ายๆครับ..เอามาจากเว็บนอกอีกทีนึงง่ะ
http://www.pixel2life.com/forums/index.php?showtopic=6369 (http://www.pixel2life.com/forums/index.php?showtopic=6369)
สืบเนื่องมาจาก..
(http://img139.imageshack.us/img139/8117/img010sg.png)

ใครอยากเป็นเจ้าของ User Bar ตามรูปที่แทรกมาบ้างจ๊ะ หุหุหุหุ
ท่านใดสนใจบ้างครับ แวะมาชมกันได้นะครับผม
แต่ขอบอกว่า..ตัวท่านก้อสามารถทำขึ้นเองได้ง่ายๆครับผม..
(http://img119.imageshack.us/img119/3496/img024qw.png)

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

ขั้นตอนที่ 1
เรียกโปรแกรม Adobe Photoshop ขึ้นมา เลือก "File -> New.." แล้วตั้งค่าตามภาพ 350 x 20 px
แล้วตอบ OK เพื่อเริ่มขั้นตอนต่อไปครับ..
(http://img119.imageshack.us/img119/20/img031rc.gif)
ขั้นตอนที่ 2
ให้ใช้คำสั่ง Fill สีที่เราต้องการ จากภาพตัวอย่างนี้คือ #3093cc
(http://img139.imageshack.us/img139/6469/img040hm.gif)
ขั้นตอนที่ 3
สร้าง layer ขึ้นมาใหม่จากแถบเครื่องมือ ให้ใช้ Gradient Tool ลากจากมุมทำองศาอย่างภาพตัวอย่างครับ
(http://img139.imageshack.us/img139/8479/img051in.gif)
จะได้ผลตามภาพ..
(http://img139.imageshack.us/img139/8153/img063xe.gif)
ขั้นตอนที่ 4
สร้าง layer ขึ้นมาใหม่อีกหนึ่ง layer ครับ..
เพื่อที่จะนำเอาโลโก้ที่เรามีอยู่มาแทรก..ตามภาพ
(http://img139.imageshack.us/img139/8671/img079jr.gif)
มีโลโก้แทรกอยู่ในภาพแล้ว..
(http://img119.imageshack.us/img119/1369/img087mk.gif)
พักส่วนตัวหลักนี้เอาไว้ก่อนครับ ต่อไปเราจะแต่ง Pattern ให้ดูงามขึ้นอีกนิด

ขั้นตอนที่ 5
ขั้นตอนนี้เราจะมาแต่งพื้นหลังให้ดูมีลูกเล่นนิดหน่อยนะครับ
ก้อเหมือนเดิมครับ เลือก "File -> New.." แล้วตั้งค่าตามภาพ 5 x 5 px แล้วตอบ OK เพื่อเริ่มขั้นตอนต่อไปครับ..
(http://img139.imageshack.us/img139/8476/img093pj.gif)
ขั้นตอนที่ 6
ทำการขยายภาพที่เราสร้างนี้เป็น 1600% ครับ เพื่อความชัดเจนไง
แล้วใช้เครื่องมือ Pencil Tool ตามใจชอบ สีดังภาพตัวอย่าง #004f7c.
เสร็จแล้วก้อไปที่คำสั่ง Edit -> Define Pattern.." เพื่อทำการเซฟ
(http://img139.imageshack.us/img139/6158/img108oe.gif)
ซึ่งท่านสามารถนำไปประยุกต์ใช้ในสไตล์ของตัวท่านเองได้ครับ..
ในส่วนนี้เราก้อจบเพียงเท่านี้ครับ..ต่อไปเราจะกลับไปแต่งในส่วนอื่นๆของ User Bar ต่อไปครับ

ขั้นตอนที่ 7
ขั้นตอนนี้นั้นเราจะทำการใส่ Pattern ที่ได้ทำเอาไว้มารวมกัน
เริ่มจากการสร้าง layer ขึ้นมาใหม่ ใช้คำสั่ง "Edit -> Fill.." แล้วปรับค่า "Opacity" ให้ลดลงเหลือ 10%
(http://img139.imageshack.us/img139/3261/img119nv.gif)
จัดการพิมพ์ข้อความตกแต่งอีกนิด ก้อจะได้ผลดังภาพตัวอย่างนี้ครับ..
แนะนำให้ใช้ฟอนต์ verdana ขนาด 8px ครับ..ดูดีสุด
(http://img139.imageshack.us/img139/3968/img125iv.png)
ขั้นตอนที่ 8
ต่อไปเป็นการใส่ความมันวาวให้กับ User Bar เหมือนเคลือบด้วยกระจก หรือดูนูนมีมิติครับ
ทำการสร้าง layer ขึ้นมาใหม่ครับ...แล้วก้อ Fill สีขาวลงไปตามภาพตัวอย่างนี้
(http://img119.imageshack.us/img119/7792/img138xv.gif)
ขั้นตอนที่ 9
แล้วใช้ "Elliptical Marquee Tool" เลือกส่วนที่ต้องการเอาออกตามภาพตัวอย่างครับ
(http://img119.imageshack.us/img119/5527/img141qx.png)
จากนั้นแล้วปรับค่า "Opacity" ให้ลดลงเหลือ 15%
(http://img119.imageshack.us/img119/7953/img156yh.png)
ขั้นตอนที่ 10
ใส่กรอบเล็กน้อย แล้วจัดการเซฟ "File -> Save As.." ครับ
ก่อนเซฟก่อนทำการรวม layer ด้วยนะครับ หากไม่ต้องการแก้ไขไฟล์อีก
(http://img139.imageshack.us/img139/2958/img166th.png)
เสร็จแล้วก้อจะได้ตามลักษณะนี้แหละครับ
(http://img119.imageshack.us/img119/8382/img171mp.png)

เครดิต by คุณ eThon / IT-Friend.net  (http://img119.imageshack.us/img119/7715/justlogo13lq.gif) (http://www.justusers.net/index.htm)

ปล.รึใครขี้เกียจ http://www.userbars.com/ (http://www.userbars.com/) coppyมาแปะ หรือhttp://userbarmaker.com/ (http://userbarmaker.com/) ก้ไม่ว่ากัน ลองมาทำเล่นกันหนุกๆ :-D :smile:
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: อัลบัส เต้ ดับเบิ้ลดอร์ ที่ 03 พฤษภาคม 2009, 01:00:15 pm
 >:( ขอบคุนนะครับที่เอา วิทีทำ มาไห้ผม ผมจะเอาไปทำครับ  >:(
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: Magic-Cvidiz ที่ 03 พฤษภาคม 2009, 01:19:28 pm
อื้อ ,, แต่คงเรียนรู้นานหน่อย

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

ขอบคุณที่นำมาฝากคะ !!
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: love_Ron ที่ 04 พฤษภาคม 2009, 08:42:55 am
ขอบคุณนะค่ะ Shop พังพอดี ๕๕

แล้วจะเอาไปศึกษาค่ะ :"D
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: MaGiC PiNk !! ที่ 11 สิงหาคม 2009, 04:21:33 am
เจ๋งค่ะ

เดี๊ยวจะลองไปทำดู
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: rarue78 ที่ 21 สิงหาคม 2009, 04:08:12 pm

 :)

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

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

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

ไว้ทำเสร็จแล้วจะเอามาอวดนะคะ
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: tongkc ที่ 29 สิงหาคม 2009, 03:56:28 pm
ขอบคุณค่ะ
จะเอาไปทำค่ะ
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: loveharry ที่ 15 กันยายน 2009, 02:33:56 pm
ขอบคุณมากๆเลยนะคะ 

หามานานแล้ว  เยี่ยมเลยค่ะ ^^
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: Reseus G. ที่ 14 ธันวาคม 2009, 04:30:14 am
ขอบคุณมากๆค่ะ  แหะๆ  ทีแรกทำไอ้ขอบขาวขั้นตอนที่ 9 ไม่เป็น ไม่รู้ว่าเขาทำยังไง ทีนี้รู้แล้ว ขอบคุณมากๆค่ะ  :D
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: De_PaKaPol ที่ 02 กุมภาพันธ์ 2010, 11:50:42 am
ขอบคุณครับ
และผมจะบอกเพื่อนต่อครับ
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: [ [ ◘ อะรี่ พอตเตอร์ ◘ ] ] ที่ 26 เมษายน 2010, 08:25:24 am
ขอบคุณจ้า จะพยายามเรียนรู้้ส่วนที่ไม่เข้าใจละกันนะคะ

^"^  เจ๋งดีเนอะ
หัวข้อ: Re: 02/05/09 :: User Bar Sign Tutoria
เริ่มหัวข้อโดย: caso ที่ 29 ธันวาคม 2015, 06:50:12 am
เยี่ยมๆ  :D


gclub (http://www.gclubth.com/)