เทคนิคทำเว็บ เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่าง ๆ (ตอนที่ 2 กรอบเก๋ ๆ แบบขาด ๆ )

เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่าง ๆ (ตอนที่ 2 กรอบเก๋ ๆ แบบขาด ๆ )

จากที่เคยนำเสนอบทความ หัวข้อ เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่างๆ (ตอนที่ 1 กระดาษพับขอบ) ไปแล้ววันนี้ทาง Design guru มีเทคนิคดีๆมานำเสนอท่านสมาชิกอีกแล้วค่ะ เทคนิคนี้ท่านสมาชิกสามารถนำไปประยุกต์ใช้กับส่วนต่างๆของเว็ปไซต์ท่านได้ เป็นอย่างดีเลยค่ะ

1. สร้าง File ขึ้นมาใหม่ขนาดประมาณ 500 x 600 pixel (สามารถกำหนดขนาดใหญ่ หรือเล็กกว่านี้ได้ค่ะ)

2. ปรับค่า Foreground : #A98C4C และปรับค่า Background : #644A2B (สามารถเลือกปรับสีได้ตามใจชอบได้ค่ะ) เมื่อปรับสีได้ตามต้องการแล้ว ให้ไปที่เมนู Filter --> Render --> Clouds

3. เมื่อทำตามขั้นตอนที่ 2 เรียบร้อยแล้วให้ไปที่เมนู Filter --> Noise --> Add Noise.. และปรับค่า Amount ประมาณ 2-4%

4. เมื่อปรับค่า Noise เรียบร้อยแล้ว ให้มาที่เมนู Filter --> Blur --> Gaussian Blur และปรับค่า Radius 0.5 Pixels

5. หลังจากนั้นให้เพิ่ม Layer ขึ้นมาใหม่โดยคลิกที่ ด้านล่าง เมื่อสร้าง Layer ใหม่ขึ้นมาเรียบร้อยแล้ว ให้คลิกที่แถบเครื่องมือ Rectangular Marquee สร้างเส้น Selection ใน Layer ที่สร้างขึ้นมาใหม่ จากนั้นเทสีขาวลงไปใน Selection เลยค่ะ

6. ไปที่เมนู Window --> Channels จากนั้นกด Save Selection as Channel (ตรงที่ลูกศรชี้) แล้วกด Ctrl+D เพื่อเอาเส้น Selection ออก

หลังจากนำเส้น Selection ออกแล้ว ในเมนู Channels คลิกเลือก Alpha 1 และไปที่เมนู Filter --> Pixelate --> Crystalize... แล้ว ปรับค่า Cell Size : ประมาณ 7

7. ใช้เครื่องมือ Magic Wand คลิกที่พื้นที่ส่วนสีขาว ที่อยู่ตรงกลาง จากนั้นย้ายมาทำงานที่เมนู Layer คลิกเลือก Layerสีน้ำตาล (Layer 1) แล้วไปที่เมนู Select --> Inverse หรือ Shift+Ctrl+I เพื่อกลับด้าน Selection จากนั้นให้กด Delete ที่คีย์บอร์ด

หลังจากลบส่วนที่ไม่ต้องการออกแล้ว ให้ลบ Layer สีขาวทิ้ง โดยคลิกปุ่ม Delete ที่คีย์บอร์ด

8. เมื่อลบ Layer สีขาวออกแล้ว มาถึงขั้นตอนการตกแต่งขอบให้ดูเก๋ ๆ หน่อย โดยคลิกที่ Add a Layer Style เลือก Inner Glow และปรับค่า ดังนี้

Blend Mode = Color Burn
Opacity = 41%
Technique = Precise

(ส่วนสีให้ปรับเป็นสีดำค่ะ )

เพียงเท่านี้ เราจะได้กรอบกระดาษแบบเก๋ ๆ แล้วนะคะ อย่าลืม ลองนำไปประยุต์ใช้กับภาพบนเว็บไซต์ดูนะคะ

ผลลัพธ์

ดาวโหลดไฟล์ตัวอย่าง

เทคนิคทำเว็บ วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์

วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์

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

มาเริ่มกันเลยดีกว่านะครับ

1. เปิดโปรแกรม Photoshop เลือกเปิดไฟล์ที่ต้องการ ทำการลดขนาดของภาพครับ โดยคลิกที่ File --> Open --> เลือกไฟล์ที่ต้องการ

2. ทำการเลือกเปิดรูปภาพที่เราต้องการจะลดขนาด เพื่อนำมาใช้บนเว็บไซต์

3. หลังจากที่ได้ทำการเปิดรูปภาพขึ้นมาแล้ว ให้ทำการเลือกที่เมนู Image --> Image Size...

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

5. ทำการเปลี่ยนขนาดภาพให้ลดลงตามที่ต้องการครับ โดยการเปลี่ยนค่าที่ Pixel Dimensions ในส่วนของ Width (ความกว้าง) และ Height (ความสูง) ค่าที่เราใส่เข้าไปใหม่นี้ ไม่ว่าจะใส่ในค่าของความสูง หรือความกว้างก็ตาม ค่าของอีกตัวเลือกหนึ่งก็จะมีการแปรผันตามครับ ซึ่งผมแนะนำว่าควรให้ Resolution อยู่ที่ 72 pixels/inch สำหรับงานเว็บไซต์นะครับ หลังจากเปลี่ยนขนาดเสร็จแล้วก็เลือกที่ OK ครับ

5.1 หากเราทำการนำเครื่องหมายถูกหน้าตัวเลือก Constrain Proportions ออก เราจะเห็นว่า สัญลักษณ์รูปโซ่ที่แสดงอยู่ข้างหลัง Width และ Height จะหายไป ตรงนี้เราสามารถที่จะใส่ค่าความสูง และความกว้างแบบอิสระให้แก่ภาพ โดยที่ค่าของอีกตัวเลือกหนึ่งจะไม่แปรผันตามครับ

6. ต่อมาจะเป็นวิธีการ save สำหรับนำไปใช้บนเว็บไซต์ครับ โดยมาที่เมนู File --> Save for web... ครับ

7. การเซฟภาพสำหรับใช้บนเว็บไซต์นั้น สามารถเลือกประเภทไฟล์ภาพได้หลายประเภท ขึ้นอยู่กับรูปแบบของภาพที่เราใช้ครับ ในการเซฟภาพ สำหรับภาพถ่าย หรือภาพที่มีรายละเอียดสูง ควรเลือกเป็นไฟล์ JPEG และเรายังสามารถที่จะเลือกปรับค่า Quality ตามที่เราต้องการได้ โดยในการปรับลดค่า Quality ลง ต้องดูที่ตัวภาพด้วยว่ารายละเอียดของภาพลดลงมากน้อยเพียงใด เพื่อให้ภาพมีน้ำหนักเบา แต่ยังคงเห็นภาพได้ชัดเจนครับ

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

8.1 หากเราทำการเลือกที่ Transparency จะเป็นการเลือกเพื่อให้พื้นหลังของภาพโปร่งใสครับ

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

None ภาพจะไม่มีขอบ หรือขอบไม่คมชัด
White ภาพจะมีขอบสีขาว เหมาะสำหรับใช้บนพื้น Background สีขาว
Black ภาพจะมีขอบสีดำ เหมาะสำหรับใช้บนพื้น Background สีดำ
Other เป็นการเลือกสีขอบภาพให้ตรงกับสีพื้น Background ที่เรามีอยู่

9. ไฟล์ PNG ไฟล์ภาพประเภทนี้ จะรวมความสามารถของไฟล์ GIF และ JPEG เอาไว้ คือ ภาพที่ได้จะมีความละเอียดสูง มีความชัด ภาพไม่แตก แต่ไฟล์ภาพชนิดนี้มีขนาดที่ใหญ่กว่า JPEG และ GIF มาก หากนำไฟล์ชนิดนี้มาใช้กับเว็บไซต์คงจะไม่ดีนัก เพราะจะทำให้การแสดงผลบนหน้าเว็บไซต์ของเรา ใช้เวลาโหลดนานขึ้นครับ

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

เทคนิคทำเว็บ การสร้างปุ่มสวยด้วยตนเอง

สร้างปุ่มสวยด้วยตนเอง

ผมมีเทคนิคการออกแบบปุ่ม (Button) ต่าง ๆ ด้วยโปรแกรม Photoshop แบบที่ไม่ยาก และท่านสามารถนำไปดัดแปลง หรือนำไปพัฒนาต่อ เพื่อให้ออกมาในรูปแบบอื่น ๆ ตามการใช้งาน วิธีทำเป็นอย่างไร มาลองดูนะครับ

เริ่มขั้นตอนการทำปุ่มสวยครับ

1. ทำการเปิดโปรแกรม Adobe Photoshop และทำการเลือกสร้างไฟล์ใหม่ โดยเลือกที่เมนู File --> New

2. ทำการกำหนดขนาดของไฟล์งานที่ต้องการทำ ในที่นี้ผมกำหนดความกว้างเป็น 74px และสูง 18px เลือก Background Contents เป็น Transparent

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

4. ที่ทูลบาร์ด้านบนให้เราเลือกตัวเลือกที่สอง จากทางด้านซ้ายมือ และใส่ค่าความโค้งมลเป็น 5px ตามภาพครับ

5. หลังจากที่เลือกเสร็จแล้ว ให้ทำการ Drag Mouse (คลิกเมาส์ค้างแล้วลาก) ในหน้างานที่เปิดขึ้นมา เพื่อสร้างรูปทรงสี่เหลี่ยม ให้อยู่ภายในไฟล์ที่เราสร้างขึ้น

หลังจากนั้นเลือกที่เมนู Paths ทำการเลือกตัวเลือกที่ 3 จากซ้าย เพื่อทำให้เส้นของสี่เหลี่ยมที่เราสร้างขึ้นกลายเป็นเส้นประครับ

6. ทำการเลือกที่เครื่องมี Gradient เพื่อทำการไล่เฉดสี

7. ทำการคลิกที่แถบทูลบาร์ด้านบน

8. จะมีหน้าต่างใหม่เปิดขึ้นมา เพื่อให้เราทำการเลือกเฉดสี หากเราต้องการจะใส่สีที่ข้างใดข้างหนึ่ง ให้เราทำการเลือกคลิกที่สี่เหลี่ยมด้านล่างแถบสี ในด้านที่ต้องการเปลี่ยนสี จากนั้นทำการคลิกสีในช่องสี่เหลียมที่หัวข้อ Color

9. เลือกเฉดสีตามที่ต้องการ

10. ทำการคลิกเมาส์ค้างและทำการลากเมาส์ขึ้น-ลง เพื่อสร้างจุดเริ่มต้นและจุดปลายของเฉดสีที่เราเลือก

11. หลังจากนั้น ทำการเลือกเมนู Layer Style --> Stroke เพื่อที่จะทำการใส่ขอบให้กับตัวปุ่ม

12. ในที่นี้ผมได้กำหนด Size เป็น 1px ครับ Position เลือกเป็น Inside ครับ และทำการเลือกสีตามต้องการ

13. ทำการสร้าง Layer ขึ้นมาใหม่ครับ ในเมนู Layer ให้เลือกตัวเลือกที่สองจากขวาครับ

14. เลือก Layer ที่ 2 ทำการเลือกที่เมนู Select --> Modify --> Contact

15. ในที่นี้ผมได้กำหนดขนาดที่ 2px ครับ

16. ทำการเทสีขาวลงไปในเลเยอร์ที่ 2 ครับ

17. จากนั้นทำการเลือกที่เครื่องมือ Rectangular Marquee ใน Toolbar ด้านซ้ายมือ ทำ Drag Mouse (คลิกเมาส์ค้างแล้วลาก) ครอบในส่วนครึ่งล่างของงานครับ

18. หลังจากนั้น ทำการ Delete ส่วนที่เราเลือก คลิก Ctrl+D

19. ใน Layer ที่ 2 ที่เราได้ทำการเทสีขาวลงไปและลบส่วนครึ่งล่างออกไปแล้วนั้น ให้การเลือก Opacity เป็น 20% หรือตามใจชอบนะครับ

20. จากนั้นเลือกที่เครื่องมือ T เพื่อทำการพิมพ์ตัวอักษรครับ โดยจะมีแถบเมนูด้านบนในการกำหนดลักษณะต่าง ๆ ของตัวอักษรครับ

21. ให้ทำการเลือกเมนู File --> Save for web เพื่อทำการเซฟงานออกมาใช้ในหน้าเว็บเพจครับ

22. หลังจากนั้นเราจะได้ปุ่มสั่งซื้อที่สามารถนำไปใช้บนหน้าเว็บได้แล้วครับ

ผลลัพท์ที่ได้ครับ