Tip.maxlayout.com: กุมภาพันธ์ 2010

Photoshop: อนิเมชั่นอักษรเบลอสั่นไหว (Animated Vibrating Blur Text)

ขั้นตอนที่ 1. สร้างไฟล์ Photoshop ขึ้นมาขนาดพื้นที่ทำงาน 300x300 วาดพื้นหลังขึ้นมาตามต้องการหรือจะลองตั้งค่าตามตัวอย่างข้างล่างนี้ดูก็ได้โดยตั้งชื่อเลเยอร์พื้นหลังอันนี้ว่า Layer 1

อธิบายเพิ่มเติมเกี่ยวกับพื้นหลัง
พื้นหลังเหมือนในตัวอย่างสามารถสร้างโดยใส่ค่าสีตามข้างล่างนี้ แต่ว่าจะทำเป็นแบบอื่นก็ได้เพราะมันไม่เกี่ยวกับส่วนของอนิเมชั่น

พื้นที่ด้านบนให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ffc600 และ Background: #ffba00
เส้นสีที่แบ่งด้านบนและส่วนกลางคือ #e0750d และ #fff600 ตามลำดับ
พื้นที่ตรงกลางให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ffa800 และ Background: #ff8800
เส้นสีที่แบ่งส่วนกลางและด้านล่างคือ #c64000 และ #ece100 ตามลำดับ
พื้นที่ด้านล่างให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ff9d00 และ Background: #ff9000

ขั้นตอนที่ 2. พิมพ์ตัวอักษรสีขาว (#ffffff) ใส่ลงไปตามต้องการ โดยในตัวอย่างนี้ใช้ อักษรแบบ Bookman Old Style แบบ Bold ขนาด 72 Pt จากนั้นตั้งชื่อเลเยอร์อักษรนี้ว่า "Quick"

ขั้นตอนที่ 3. สั่งคัดลอกเลเยอร์ "Quick" ขึ้นมาอีกหนึ่งอันโดยนำไปวางไว้ด้านบนสุดแล้วให้ตั้งชื่อเลเยอร์ที่เพิ่มขึ้นมาใหม่นี้ว่า "Shadow"

ขั้นตอนที่ 4. ไปที่เลเยอร์ "Shadow" จากนั้นเปลี่ยนสีตัวอักษรในเลเยอร์นี้ให้เป็น #753e12 จากนั้นขยับตำแหน่งตัวอักษรในเลเยอร์ "Shadow" นี้เลื่อนไปด้านขวา 1 px และเลื่อนลงด้านล่าง 1 px

ขั้นตอนที่ 5. ย้ายเลเยอร์ "Shadow" ไปไว้ใต้เลเยอร์ "Quick"

ขั้นตอนที่ 6. เปลี่ยนเลเยอร์ตัวอักษรให้เป็นรูปภาพโดยเลือกเลเยอร์ "Quick" และ "Shadow" ไว้พร้อมกันแล้วไปที่ Layer > Rasterize > Type
จากนั้นให้รวมเลเยอร์ตัวอักษรทั้งสองอันนี้เข้าด้วยกันโดยเลือกเลเยอร์ "Quick" และ "Shadow" ไว้พร้อมกันแล้วไปที่ Layer > Merge Layers หรือใช้การกดปุ่ม Ctrl+E แทนก็ได้โดยให้ตั้งชื่อเลเยอร์ที่รวมกันแล้วว่า "Text Stop"

ขั้นตอนที่ 7. ให้สั่งคัดลอกเลเยอร์ "Text Stop" เพิ่มขึ้นมาอีกหนึ่งอันแล้ววางไว้ด้านบนสุดโดยตั้งชื่อว่า "Text Blur"

ขั้นตอนที่ 8. ไปที่เลเยอร์ "Text Blur" แล้วเลือกที่ Filter > Blur > Motion Blur โดยตั้งค่าดังนี้
Angle: 0
Distance : 16 px

ขั้นตอนที่ 9. สั่งซ่อนเลเยอร์ "Text Blur" แล้วเลือกที่ Window > Animation
เปิดใช้หน้าจอทำงานแบบ "Convert to frame animation"
ตั้งค่ารูปแบบการแสดงของ Animation เป็น Forever
และตั้งค่า Delay ในเฟรมแรกเป็น 0.2 sec

ขั้นตอนที่ 10. สั่งคัดลอกเฟรมแรกที่มีอยู่เพิ่มขึ้นมาอีก 4 อัน แล้วเลือกทำงานในเฟรมที่ 5 โดยในเฟรมนี้ให้สั่งซ่อนเลเยอร์ "Text Stop" แต่ให้เปิดแสดงภาพเลเยอร์ "Text Blur" แทน

ขั้นตอนที่ 11. เลือก File > Save for Web & Devices โดยให้เลือกเซฟเป็น GIF ก็จะได้อนิเมชั่นอักษรเบลอตามต้องการ

Credit: http://www.voidix.com/imageready_blur_text.html

Fireworks: อักษรเงาสะท้อน (Reflective Text)

การใช้โปรแกรม Adobe Fireworks สร้างตัวอักษรเงาสะท้อน (Reflective Text) ด้วย Mask สามารถทำได้ดังนี้

ขั้นตอนที่ 1. สร้างไฟล์ Adobe Fireworks ขึ้นมาขนาดพื้นที่ทำงานเท่าไรก็ได้ โดยในตัวอย่างนี้ใช้ขนาด 297x297 จากนั้นเทพื้นหลังเป็นสีขาว (#ffffff) แล้วพิมพ์ตัวอักษรใส่ลงไป

ขั้นตอนที่ 2. ให้เปลี่ยนสีตัวอักษรสีฟ้าเป็น Gradient โดยในตัวอย่างนี้ตั้งค่าสีของจุดทั้งสองคือ #000099 และ #00bff8

ขั้นตอนที่ 3. สั่งคัดลอกตัวอักษรสีฟ้าที่ไล่สี Gradient ไว้แล้วนั้น เพิ่มขึ้นมาอีกหนึ่งอัน แล้วลากลงไปวางไว้ใต้ตัวอักษรสีฟ้าอันแรก

ขั้นตอนที่ 4. เลือกตัวตัวอักษรสีฟ้าในแถวล่างเอาไว้ แล้วไปที่เมนู Modify > Transform > Flip Vertical เพื่อกลับด้านตัวอักษร แล้วปรับระยะห่างของตัวอักษรสีฟ้าทั้งสองแถวให้สวยงาม โดยให้เว้นช่องว่างระหว่างกันเล็กน้อย

ขั้นตอนที่ 5. สร้างวัตถุสี่เหลี่ยมซึ่งมีการไล่สีขาว (#ffffff) ไปดำ (#000000) จากบนลงล่างดังรูป โดยนำวัตถุสี่เหลี่ยมอันนี้ไปวางให้ขอบด้านบนอยู่ระดับเดียวกันกับขอบบนตัวอักษรสีฟ้าในแถวล่าง และปรับขนาดวัตถุสี่เหลี่ยมอันนี้ให้มีความสูงประมาณ 2 ใน 3 ของตัวอักษรแถวล่าง เช่นในตัวอย่างนี้อักษรสูงประมาณ 42px จึงให้วัตถุสี่เหลี่ยมมีขนาด 28px

ขั้นตอนที่ 6. เลือกที่วัตถุสี่เหลี่ยมแล้วแก้ไขตำแหน่งของจุดไล่สี Gradient ให้จุดแสดงตำแหน่งของสีขาว (#ffffff) เลื่อนสูงขึ้นไปอยู่เกินกว่าขอบบนของวัตถุสี่เหลี่ยม และจุดแสดงตำแหน่งของสีดำ (#000000) เลื่อนสูงเข้าไปอยู่ภายในวัตถุสี่เหลี่ยมเล็กน้อย

ขั้นตอนที่ 7. เลือกวัตถุสี่เหลี่ยมเอาไว้แล้วไปที่เมนู
Modify > Transform > Free Transform (หรือจะใช้การแก้ไขค่าขนาดในพารามิเตอร์ด้านล่างแทนก็ได้)
โดยให้สั่งขยายความกว้างของวัตถุสี่เหลี่ยมอันนี้เพิ่มขึ้นจนบังทับส่วนบนของตัวอักษรแถวล่างได้ทั้งหมด

ขั้นตอนที่ 8. ลากเมาส์ทั้งเลือกวัตถุสี่เหลี่ยมและตัวอักษรสีฟ้าแถวล่างเอาไว้พร้อมกันแล้วไปที่
Modify > Mask > Groub as Mask
จะพบว่าตัวอักษรสีฟ้าแถวล่างจะมีการไล่สีจากเข้มไปอ่อนจนจางหายไปดังรูป

ขั้นตอนที่ 9. ตบแต่งรายละเอียดของชิ้นงานได้ตามต้องการ

Credit: http://www.voidix.com/fireworks_professional_text.html

Blogger: การใช้ Gadget สำหรับแสดงบทความล่าสุดพร้อมภาพย่อ

ความสามารถของ Gadget นี้คือจะนำบทความล่าสุดพร้อมภาพแบบย่อจากบล็อกที่เราระบุเป็นเป้าหมาย มาแสดงไว้ในบล็อกของเราได้

ขั้นตอนที่ 1. ไปที่บล็อกแล้วเลือกที่ รูปแบบ > แก้ไข HTML > องค์ประกอบของหน้า

ขั้นตอนที่ 2. เลือกที่ เพิ่ม Gadget แล้วค้นหาด้วยคำว่า Recent Posts ในช่องด้านบน

ขั้นตอนที่ 3. เลือกไปที่ Gadget ชื่อว่า Recent Post Advanced แล้วกดเพิ่มลงไปในบล็อก

ขั้นตอนที่ 4. ตั้งค่าของเครื่องมือ Recent Post Advanced ที่เพิ่มลงไปโดยเปลี่ยนค่าในช่อง Blog Url ให้เป็น URL ของ Blogger ที่เป็นเป้าหมายลงไป แล้วกด อัปเดต จากนั้นค่อยเลือกที่ บันทึก

ขั้นตอนที่ 5. เลือกที่ บันทึก ในหน้าองค์ประกอบของหน้าอีกครั้ง ก็ใช้ได้แล้ว

Blogger: ปรับขนาดรูปภาพให้เท่ากันในทุกบทความ

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
]]></b:skin>

จากนั้นให้แทนที่โค้ดที่หาเจอนั้นด้วยโค้ดข้างล่างนี้
.post img {
float:center;
min-width: 400px;
max-width: 400px;
max-height: 300px;
min-height: 300px;
padding : 10px;
margin: 0;
clear: both;
}

]]></b:skin>

ขั้นตอนที่ 3. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

อธิบายเพิ่มเติม
สามารถตั้งค่าความกว้าง ความสูง และระยะห่างของภาพได้ตามต้องการดังนี้

ความกว้างกำหนดได้ในบรรทัดที่ 3 และ 4 ซึ่งเดิมเขียนไว้ว่า
min-width: 400px;
max-width: 400px;

ความสูงกำหนดได้ในบรรทัดที่ 5 และ 6 ซึ่งเดิมเขียนไว้ว่า
max-height: 300px;
min-height: 300px;

ระยะห่างของภาพกำหนดได้ในบรรทัดที่ 7 ซึ่งเดิมเขียนไว้ว่า
padding : 10px;

Credit: http://www.techieblogger.com/2009/08/image-resizer-tool-php-css-script.html

Blogger: ลบหรือซ่อนแถบนำทางด้านบนของบล็อก

วิธีลบหรือซ่อนแถบนำทางของ Blogger (Remove or Hide Blogger NavBar) จะมีผลต่างกันคือ
ถ้าเป็นวิธีซ่อนจะทำให้แถบนำทางหายไปแต่ตำแหน่งของเนื้อหายังคงที่ดังเดิม แต่ถ้าเป็นวิธีลบนั้นนอกจากแถบนำทางจะหายไปแล้วยังจะมีการเลื่อนเนื้อหาขึ้นมาด้านบนแทนที่ตำแหน่งของแถบนำทางที่ถูกลบทิ้งไปด้วยซึ่งทั้ง 2 วิธีที่กล่าวมานั้นสามารถทำได้ดังนี้

แบบที่หนึ่ง: วิธีลบแถบนำทาง (Remove Blogger NavBar)
จะทำให้แถบนำทางด้านบนหายไป และส่งผลให้ตำแหน่งของเนื้อหาในบล็อกมีการขยับเลื่อนขึ้นด้านบนมาแทนที่ตำแหน่งของแถบนำทางที่ถูกลบทิ้งไป

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่

แม่แบบ > แก้ไข HTML

ขั้นตอนที่ 2. กดปุ่มคีย์บอร์ด Ctrl + F แล้วค้นหา

]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอด้วย
#navbar{
height:0px;
visibility:hidden;
display:none;
}
]]></b:skin>

ขั้นตอนที่ 4. เลือกที่ "บันทึกแม่แบบ"

แบบที่สอง: วิธีซ่อนแถบนำทาง (Hide Blogger NavBar)
จะทำให้ผู้อ่่านไม่สามารถมองเห็นแถบนำทางด้านบน แต่ตำแหน่งของเนื้อหาต่างๆ ภายในบล็อกก็จะอยู่คงที่ดังเดิม

ขั้นตอนที่ 1. เข้าสู่บล็อคของคุณจากนั้นไปที่
แม่แบบ > แก้ไข HTML

ขั้นตอนที่ 2. กดปุ่มคีย์บอร์ด Ctrl + F แล้วค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอด้วย

#navbar-iframe { display: none !important; }

]]></b:skin>

ขั้นตอนที่ 4. เลือกที่ "บันทึกแม่แบบ"

Photoshop: อักษรโมเสกสี่เหลี่ยม (Mosaic Cubed Text)

ขั้นตอนที่ 1. สร้างไฟล์ Photoshop ขึ้นมาขนาดพื้นที่ทำงาน 300x300 จากนั้นเทพื้นหลังเป็นสีดำ (#000000) แล้วพิมพ์ตัวอักษรสีขาวใส่ลงไปตามต้องการ โดยในตัวอย่างนี้ใช้ อักษรแบบ Arial Black ขนาด 60 Pt

ขั้นตอนที่ 2. ตั้งชื่อเลเยอร์พื้นหลังสีดำว่า Layer 1 และ ตั้งชื่อเลเยอร์ตัวอักษรว่า CUBIC
จากนั้นเปลี่ยนตัวอักษรเป็นรูปภาพโดยเลือกที่เลเยอร์ตัวอักษรไว้แล้วไปที่ Layer > Rasterize > Type

ขั้นตอนที่ 3. ไปที่เลเยอร์ตัวอักษรแล้วเลือกที่ Filter > Blur > Gaussian Blur
โดยตั้งค่า Radius ให้เป็น 4

ขั้นตอนที่ 4. เลือกเลเยอร์ตัวอักษรแล้วไปที่ Filter > Pixelate > Mosaic
โดยตั้งค่า Cell Size ให้เป็น 8

ขั้นตอนที่ 5. เลือกเลเยอร์ตัวอักษรแล้วไปที่ Filter > Sharpen > Sharpen
เพื่อให้ขอบของโมเสกคมชัดขึ้น แต่ถ้ายังรู้สึกว่า เส้นคมไม่พอก็ให้กด Ctrl+F เพื่อสั่งทำ Filter ที่เพิ่งใช้ไปซ้ำอีกครั้งจนกว่าจะพอใจ (ในตัวอย่างนี้ใช้ Sharpen ไป 2 ครั้ง)

ขั้นตอนที่ 6. เลือก Selection ของเลเยอร์ตัวอักษร CUBIC ที่ทำไว้
จากนั้นสร้างเลเยอร์เพิ่มขึ้นใหม่โดยตั้งชื่อว่า Layer 2 แล้วเทสี #00b4ff ลงไปใน Selection นี้และเปลี่ยน Blending Mode เป็น Difference เสร็จแล้วจึงย้าย Layer 2 ไปไว้ใต้เลเยอร์ CUBIC

ขั้นตอนที่ 7. เลือก Selection ของเลเยอร์ตัวอักษร CUBIC ที่ทำไว้
จากนั้นสร้างเลเยอร์เพิ่มขึ้นใหม่โดยตั้งชื่อว่า Layer 3 แล้วเทสี #0c397c ลงไปใน Selection นี้และเปลี่ยน Blending Mode เป็น Linear Dodge (Add) เสร็จแล้วจึงย้าย Layer 3 ไปไว้ใต้เลเยอร์ CUBIC แต่อยู่เหนือเลเยอร์ Layer 2