# Notification.
Notification

Author Topic: การเปลี่ยนสีของ METRO  (Read 4696 times)

0 Members and 1 Guest are viewing this topic.

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
การเปลี่ยนสีของ METRO
« on: 05 October 2011, 17:09:53 »
เห็นเงียบเหงาไม่มีอะไรให้ชีวิตตื่นเต้น เลยหาวิธีเอาเหาใส่หัวมาให้ ซึ่งมนุษย์ที่ใช้ Windows Developer Preview นั้นควรจะต้องลองตั้งแต่ A.Ant มด ไปจนถึง ฮ.นกฮูกตาโต เพราะเขาเอามาให้ลอง ไม่ใช่ให้เราเอามาเก็บไว้เฉยๆ

เมื่อดำริชั่วดังนั้นแล้วจึงเอาวิธีของกิ้งก่า "เปลี่ยนสี METRO" ทั้ง 12 จุดมาให้ลอง แต่เนื่องจากเป็นละครยาวแบบเรื่องขุนแผน ที่ฉาย 3 ปียังไม่จบ จึงจะทยอยบอกให้ทราบก็แล้วกันเมื่อมีอารมณ์

ก่อนอื่นเราต้องมาปูพื้นฐานกันก่อน โชคดีที่เรียนมาด้านศิลปะ จึงเข้าใจการทำงานของพื้นสีใน METRO ได้ (อย่านึกว่าไม่เกี่ยวกับวิชาศิลปะ เพราะว่าเราต้องรู้วิธีการ "ผสมสี")

เรื่องสีของแสงที่เรารู้จักและใช้กันโดยทั่วไปนั้นคือรูปแบบของ RGB หรือ Red (แดง) Green (เขียว) และ Blue (น้ำเงิน) ที่เมื่อผสม 3 สีนี้เข้าในอัตราส่วนที่เท่ากันแล้วก็จะทำให้แสงออกมาเป็นสีขาว ซึ่งสีต่างๆที่เราเห็นบนหน้าจอ Computer นี้ โดยทั่วไปก็เกิดมาจากการผสมสีเช่นนี้เหมือนกัน

เวลาเรา Post ข้อความลงในแต่ละกระทู้ หากเราต้องการให้ข้อความใดเป็นสี ก็จะมีตัวช่วยที่กล่อง "เปลี่ยนสี" ในการเปลี่ยน เช่น สีแดง ก็จะใช้ Code เป็น "color=Red" เป็นต้น ซึ่งความจริงแล้วที่เขาทำมาให้เป็นอักษรว่า "Red" นั้นก็เพื่อให้ท่านสะดวกที่จะใช้ ลองใส่ Code สีใหม่เป็น "color=#FF0000" ดูก็จะพบว่ามันออกมาเป็นสีแดงเหมือนกัน (ต้องมีเครื่องหมาย "#" เพื่อบอกให้รู้ว่าทั้งหมดนี้คือ "ตัวเลข" รวมทั้ง "FF" ด้วย)

ความหมายของ รหัสสี (Color Code) ที่ว่า FF0000 นั้นต้องแยกออกมาเป็น FF 00 00 ซึ่งหมายถึง RR (Red Red) GG (Green Green) BB (Blue Blue) ในระบบเลขฐาน 16 ดังนั้น FF 00 00 คือคำสั่งให้ใช้แสงสีแดงเต็มที่ (FF) และไม่ต้องใช้แสงสีเขียว (00) และแสงสีน้ำเงิน (00) ทำให้ตัวอักษรออกมาเป็นสีแดง

ดังนั้น หากใช้รหัสสีเป็น 00 FF 00 ก็คือ สีเขียว ส่วน 00 00 FF ก็คือ สีน้ำเงิน นั่นเอง

เรื่องแค่นี้ก็ผสมสีได้ยากอยู่แล้ว แต่ Windows Developer Preview ดันทะลึ่งใช้รหัสสีใน METRO เป็น RGBA เสียนี่ ซึ่งรหัสอักษรเหล่านี้ได้แก่ Red Green Blue และ Alpha ซึ่ง Alpha คือตัวกำหนด "ความทึบของแสง" ที่สร้างความมันส์ในอารมณ์ให้กับผู้ใช้ยิ่งนัก

เขากำหนดความทึบของแสงมาให้ทำไม? ก็เพราะบางตัวใน Windows Development Preview นั้น เขาใช้ Background ถึง 2 ชั้น (Layer) เป็นตัวกำหนดสี เช่น ที่หน้า Logon ซึ่งหาก Background ตัวล่างเป็นสีเขียวเข้ม และตัวบนเป็นสีชมพู โดยกำหนดค่า Alpha ของตัวสีชมพูเป็น FF หรือทึบที่สุด ก็จะทำให้หน้า Logon เป็นสีชมพู (FF 00 FF FF) แต่หากเปลี่ยนค่าความทึบลงเหลือ 55 (FF 00 FF 55) ก็จะเกิดการผสมสีอีก 1 ชั้นของสีชมพูตามความเข้มที่กำหนด รวมเข้ากับสีเขียวเข้ม ที่เป็น Background อยู่ข้างล่าง ทำให้หน้า Logon ปรากฏออกมาเป็น "สีม่วง" ซึ่งเปรียบได้เหมือนเวลาที่เรามองวัตถุสีเขียวผ่านกระดาษแก้วสีชมพูที่มีความทึบไม่มากนั่นเอง

ถ้าเริ่มงงแล้วละก็ ให้พักสมองแล้วกลับไปอ่านใหม่อีกรอบหนึ่ง แล้วจะมาสานต่อให้... [emo14] [emo02]

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
Re: การเปลี่ยนสีของ METRO
« Reply #1 on: 05 October 2011, 21:32:35 »
เนื่องจากเรื่องที่จะต้องเข้าไปปรับปรุงนี้อยู่ใน RGBA ซึ่งเป็นแบบ Hex ดังนั้น เราจึงต้องใช้ HxD Editor ในการเปิดเพื่อแก้ไข file ชื่อ
    Windows\System32\uxtheme.dll

โดยจะบอกตำแหน่งของ Offset ใน uxtheme.dll ให้ แล้วก็ไปศึกษาและทดลองกันเองตามใจชอบ ถ้าไม่อาเจียรออกมาเสียก่อน (หากทดลองใน VirtualBox อาจไม่เห็นผลของการผสมสีเนื่องจากความทึบของ Alpha (AA) ต้อง Boot ดูจาก Computer จริงๆ)

01. Main Background และ Logon Screen (ค่า Default เป็น 0E 6D 38 FF - สีเขียว)
      x86                     x64
     34F70 - 34F73      96f30 - 96f33
     3501C - 3501F      96fdc - 96fdf
    (34F70 - 34F73 หมายความว่าที่ Offset 34F70 เป็น RR, 34F71 เป็น GG, 34F72 เป็น BB และ 34F73 เป็น AA)

02. Flyout Sidebar Background (ค่า Default เป็น 0D 88 45 FF - สีเขียว)
      x86                     x64
     34FC4 - 34FC7      96F84 - 96F87
     35020 - 35023      96FE0 - 96FE3
     35024 - 35027      96FE4 - 96FE7
     35064 - 35067      97024 - 97027
     35070 - 35073      97030 - 97033

03. Flyout Sidebar Selected Item Highlight (ค่า Default เป็น 10 A1 51 FF - สีเขียว)
      x86                     x64
     34FCC - 34FCF      96F8C - 96F8F
     35030 - 35033      96FF0 - 96FF3
     35038 - 3503B      96FF8 - 96FFB
     3503C - 3503F      96FFC - 96FFF
     35044 - 35047      97004 - 97007
     35048 - 3504B      97008 - 9700B
     3504C - 3504F      9700C - 9700F
     35050 - 35053      97010 - 97013
     35054 - 35057      97014 - 97017
     35058 - 3505B      97018 - 9701B
     3505C - 3505F      9701C - 9701F
     35068 - 3506B      97028 - 9702B
     35074 - 35077      97034 - 97037
     35078 - 3507B      97038 - 9703B
     3507C - 3507F      9703C - 9703F

04. Flyout Sidebar Mouse Hover Highlight (ค่า Default เป็น 47 A4 71 FF - สีเขียว)
      x86                     x64
     34FD4 - 34FD7      96F94 - 96F97
     35028 - 3502B      96FE8 - 96FEB
     35040 - 35043      97000 - 97003
     35060 - 35063      97020 - 97023
     3506C - 3506F      9702C - 9702F

05. Network Flyout Sidebar Highlight (ค่า Default เป็น 17 E5 74 FF - สีเขียว)
      x86                     x64
     34FDC - 34FDF      96F9C - 96F9F

06. Start Popup Menu (ค่า Default เป็น 11 11 11 FF - สีดำ)
      x86                     x64
     349E4 - 349E7      969BC - 969BF

07. Start Popup Menu Highlight และ Start Button Background (ค่า Default เป็น 33 33 33 FF - สีเทา)
      x86                     x64
     349F0 - 349F3      969C8 - 969CB

08. Time/Date Notification Popup Background (ค่า Default เป็น 11 11 11 F2 - สีดำ)
      x86                     x64
     349DC - 349DF      969B4 - 969B7

09. Start Shortcut Tile Background (ค่า Default เป็น 17 93 4B FF - สีเขียว)
      x86                     x64
     34F74 - 34F77      96F34 - 96F37

10. Flyout Sidebar Tile Background (ค่า Default เป็น 0C 69 36 FF - สีเขียว)
      x86                     x64
     34F7C - 34F7F      96F38 - 96F3B

11. Start Screen Shortcut Font (ค่า Default เป็น AF FF D9 FF - สีขาว )
      x86                     x64
     34F78 - 34F7B      96F38 - 96F3B

ตัวสุดท้ายตัวที่ 12 ไม่ได้ใช้ HxD ในการแก้ไข เดี๋ยวว่างๆจะมาเฉลยต่อ...  [emo18] [emo02]

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
Re: การเปลี่ยนสีของ METRO
« Reply #2 on: 06 October 2011, 00:06:13 »
ในบางกรณีที่รู้รหัสสีเป็นเลขฐานสิบ จะทำให้ค่าของแต่ละสีเป็น 0 - 255 แต่หากเป็นเลขฐานสิบหก ค่าของแต่ละสีจะเป็น 0 - FF ดังนั้น หากรู้รหัสสีที่เป็นเลขฐานสิบ เราก็สามารถนำมาแปลงให้มันเป็นเลขฐานสิบหกได้เช่นกันโดยใช้เครื่องคิดเลขของ Windows

สมมุติว่าต้องการ สีน้ำเงินแกมฟ้าตุ่นๆ แบบในกรอบสีแดง ซึ่งมีรหัสสี RGB แบบเลขฐานสิบเป็น 60 75 190


ให้เปิดเครื่องคิดเลขของ Windows แล้วกด <Alt + 3> จะได้ออกมาหน้าตาดังรูป


ใส่ตัวเลขที่เราต้องการแปลง เช่น สีแดง มีค่า 60


จากนั้นให้กดเลือกเป็น Hex ก็จะได้ค่า RR เป็นเลขฐานสิบหก เท่ากับ 3C


เมื่อทำครบทั้ง 3 ตัวก็จะได้รหัสสีที่ต้องการจาก 60 75 190 เป็น 3C 4B BE แล้วใช้แทนค่าเป็น สีที่ต้องการ ได้ดังนี้เป็นต้น [emo02]

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
Re: การเปลี่ยนสีของ METRO
« Reply #3 on: 06 October 2011, 00:58:56 »
ตัวสุดท้ายตัวที่ 12 จะเป็นรูป Background ของ METRO แต่มันอยู่ตรงไหนให้ลองดูเอาเอง โดยต้องเตรียมรูปที่เป็นแบบ PNG ขนาด 1500 x 600 pix ตามที่เราต้องการเอาไว้ แล้วไปดูที่
    Windows\System32\shsxs.dll

file นี้เราต้องใช้ ResHacker เปิดแล้วไปที่
    PNG => 5232 => 1033

จากนั้นให้ Click ที่ 1033 เพื่อให้ Active แล้ว Click ขวาเลือก "Delete Resource" เพื่อลบทิ้งเสีย

ต่อไปที่ Menu Bar ให้เลือก <Action> และ <Add a new Resource ...>


จะได้ออกมาอย่างนี้


ให้เลือกรูปแบบ PNG ที่ได้เตรียมเอาไว้ แล้วใส่ Resource Type, Name และ Language ตามรูปแล้วจึงกด <Add Resource>


ขอเตือนว่า อย่าลองเปิดดูผลงานจาก ResHacker เพราะอาจเปิดไม่ได้ ให้เลือก Save แล้วโปรแกรมจะสร้าง Backup ให้ 1 file ซึ่งเป็นตัวของแท้ดั้งเดิมโดยอัตโนมัติ หากลองเปิด Windows Developer Preview แล้วไม่ถูกใจรูปที่ใส่ ให้ลบ file นี้ทิ้ง แล้วเอา file ต้นฉบับที่ Backup ไว้มาทำใหม่

แต่หากเราลบ shsxs.dll ทิ้งไปโดยไม่ได้ใส่ตัวใหม่เข้าไปจะเกิดอะไรขึ้น?? คำตอบคือ...จะเป็นสวรรค์ของคนที่รำคาญ METRO เพราะมันจะทำให้
1. Boot ตรงเข้าสู่ Desktop เหมือน Windows 7 ปกติ
2. Mouse Hover ที่มุมล่างซ้ายมือแบบ METRO หายไป
3. ปุ่ม Start แบบ METRO หายไป กลายเป็น Windows Orb ลูกกลมๆเหมือน Windows 7 ปกติ

ไม่เชื่อก็ลองดูสิ และขอจบคำบรรยายแต่เพียงเท่านี้...สวัสดี [emo06] [emo02]

เพิ่มเติมผลงานจากการปรับแต่งตัวที่ 1 และตัวที่ 12 (เอาแค่พอท้วมๆ ถ้าสังเกตุจะเห็นว่าเครื่องนี้ใช้ Aircard ของ DTAC แบบ EDGE เท่านั้นในการเชื่อมต่อ Internet และ Download/Upload รูปต่างๆ)

Offline fantasy ಠ-ಠ

  • ผู้รู้ ผู้ตื่น ผู้เบิกบาน
  • N/A
  • *****
  • Posts: 4491
  • เมื่อวานรู้ วันนี้ก็รู้ แต่... พรุ่งนี้ไม่รู้
    • ICQ Messenger - 2484607
    • View Profile
    • iPlusZone.com
Re: การเปลี่ยนสีของ METRO
« Reply #4 on: 06 October 2011, 02:14:25 »
ต้องหากระโถนมาไว้ข้าง ๆ หรือไม่ก็ไปนั่งทำใกล้ ๆ ห้องน้ำ แล้วล่ะมั้ง [emo18]
เพราะงานนี้ทำสมองบวมอีกแล้วล่ะท่าน ans58670 [emo14]

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
Re: การเปลี่ยนสีของ METRO
« Reply #5 on: 06 October 2011, 08:22:12 »
ตั้งใจจะแค่ "แจ้งมาเพื่อทราบ" เท่านั้นเอง ซึ่งหากใครอยากจะ "ปรับปรุง" ตรงไหน คงต้องเข้าไปดูทีละจุด เพราะค่อนข้างมากและซับซ้อน ทำไปพอให้อาเจียนแล้วก็พักเสีย (สงสัย Windows จะกลัวว่าเดี๋ยวจะแก้กันสนุกสนาน เลยทำให้ยากเข้าไว้ แต่เชื่อเถอะ เดียวก็มีคนทำโปรแกรมปรับแต่งที่มันง่ายๆออกมา) [emo02]

Offline ans58670

  • Webmaster
  • *****
  • Posts: 2040
    • View Profile
Re: การเปลี่ยนสีของ METRO
« Reply #6 on: 06 October 2011, 16:06:02 »
ดู่ ดู๊ ดู ดู เธอทำ...ตดยังไม่ทันหายเหม็นเลย มันออกมาแล้วจริงๆจากเพื่อนชาวฝรั่งเศสของเรา
     My WDP Customizer

หน้าตาก็ตามรูปนี่แหละ...


กับผลงานเล็กๆน้อยๆ...

Offline microsoft

  • Administrator
  • *****
  • Posts: 8651
    • View Profile
    • VarietyPC.Net
Re: การเปลี่ยนสีของ METRO
« Reply #7 on: 26 October 2011, 02:10:47 »
ความรู้เพียบเลยครับ ตอนนี้ผมก็กำลังจะลองเล่นเจ้า Windows ตัวนี้ด้วยแล้วเหมือนกันครับ แต่ลองกับ VM ครับ  [emo04]
การให้ที่ยิ่งใหญ่ คือ... การให้ต่อไป.... ไม่สิ้นสุด


 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27