คำค้นยอดนิยม

คำค้นยอดนิยม :
เว็บสำเร็จรูป | เว็บไซต์สำเร็จรูป |รับทำเว็บ | บริษัทรับทำเว็บ | รับทำเว็บไซต์ | ออกแบบเว็บ |ออกแบบเว็บ ไซต์ |เว็บดีไซน์ | รับเขียนเว็บไซต์ |เว็บสวย|สร้างเว็บไซต์
โปรโมตเว็บไซต์ |โฆษณาเว็บไซต์ | รับทำโปรแกรมเว็บ | การตลาด เพิ่มยอดขาย | รับเขียนโปรแกรม
| Web design Ecommerce | รับทำเว็บ | รับทำเว็บไซต์ | ทำเวป | จัดทำเว็บไซท์ | จัดทำเว็บไซด์ | จัดทำเวบไซต์
| บริษัทรับทำเวป | ออกแบบเว็บไซต์ | โปรโมตเว็บไซด์ | โปรโมตเว็บไซท์ | เขียนโปรแกรม | คอมพิวเตอร์ | ออกแบบเว็บไซท์ | ทำเว็บไซด์
| เขียนโปรแกรม | เขียนเว็บ | เว็บไซต์ | คอมพิวเตอร์ | จัดทำเวบไซต์ | จัดทำเวบไซท์ | โปรโมทเว็บไซด์ | โปรโมทเว็บไซท์ | ออกแบบเว็บไซต์
| ออกแบบเว็บไซด์ | ซอฟแวร์ ฐานข้อมูล | ระบบฐานข้อมูล | ทำเว็บ | รับทำเว็บ | บริษัทรับจ้างทำเว็บไซต์ | รับออกแบบเว็บไซต์ | บริการรับทำเว็บไซต์
| ทำโปรแกรม | ระบบจัดเก็บฐานข้อมูล | โปรแกรมฐานข้อมูล | รับเขียนโปรแกรมคอมพิวเตอร์ | โฆษณาออนไลน์ | ตลาดออนไลน์ | ผ่านอินเตอร์เน็ต
| Web Design | Programming | ผู้นำด้าน บริการรับจัดทำเว็บไซต์ ในรูปแบบที่สวยงาม

เทคนิคทำเว็บไซต์

เทคนิดทำเว็บไซต์แบบ ง่ายๆ คุณเองก็ ทำได้

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

• เทคนิคทำเว็บไซต์ การทำกรอบภาพให้ดูสวยงามและมีมิติ
• เทคนิคทำเว็บไซต์ สร้างข้อความโค้งตามวัตถุแบบง่ายๆ
• เทคนิคทำเว็บไซต์ สร้างกรอบรูปด้วย Brush Tool
• เทคนิคทำเว็บไซต์ การทำภาพเงาสะท้อนวัตถุ
• เทคนิคทำเว็บไซต์ แปลงภาพถ่ายให้เป็นภาพวาดกันเถอะ
• เทคนิคทำเว็บไซต์ การตกแต่งข้อความด้วยการใช้ Layer Mask...
• เทคนิคทำเว็บไซต์ การสร้างกรอบรูปขอบกระจาย ด้วยเทคนิค Q...
• เทคนิคทำเว็บไซต์ การนำรูปภาพมาใส่กรอบ
• เทคนิคทำเว็บไซต์ สร้างกรอบแบบต่างๆ (กระดาษพับขอบ)
• เทคนิคทำเว็บไซต์ การแต่งภาพสไตล์โลโม
• เทคนิคทำเว็บไซต์ เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบ...
• เทคนิคทำเว็บไซต์ วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใ...
• เทคนิคทำเว็บไซต์ การสร้างปุ่มสวยด้วยตนเอง
• เทคนิคทำเว็บไซต์ มาทำตัวอักษรแบบไล่โทนสี เอาไว้แต่งหัว...
• เทคนิคทำเว็บไซต์ การทำฟองอากาศ
• เทคนิคทำเว็บไซต์ การทำลำแสงพระอาทิตย์
• เทคนิคทำเว็บไซต์ การทำ Sticky Tape แบบเก๋ๆ สำหรับตกแต่...
• เทคนิคทำเว็บไซต์ การทำพระจันทร์เต็มดวง
• เทคนิคทำเว็บไซต์ การทำพื้นหลังแบบ 3 มิติ

มีต่อด้านล้าง>>>

เทคนิคทำเว็บไซต์ รอบ (2)

• เทคนิคทำเว็บไซต์ สร้างโปรเตอร์แบบเก๋ๆด้วย Photoshop
• เทคนิคทำเว็บไซต์ กระดาษปลิว ด้วย Photoshop
• เทคนิคทำเว็บไซต์ การทำรูปภาพ Music Graffiti
• เทคนิคทำเว็บไซต์ การสร้างกรอบแบบโพลารอยด์
• เทคนิคทำเว็บไซต์ สร้างข้อความเป็นรูปเรา
• เทคนิคทำเว็บไซต์ การสร้างโลโก้ ด้วยตัวเอง
• เทคนิคทำเว็บไซต์ ปรับแต่งรูปภาพผ่าน www.Picnik.com
• เทคนิคทำเว็บไซต์ สร้างกรอบรูปลายไม้ง่าย ๆ ด้วย Filter
• เทคนิคทำเว็บไซต์ วิธีสร้างกรอบรูป และเงา เพื่อเพิ่มมิต...
• เทคนิคทำเว็บไซต์ สร้างภาพให้ มีแสงเปล่งประกาย

เทคนิคทำเว็บไซต์ >>>3<<<
เทคนิดทำเว็บไซต์แบบ ง่ายๆ คุณเองก็ ทำได้ คอลัมน์ 3

• เทคนิดทำเว็บไซต์ เคยสงสัยมั้ยครับว่าเค้า ใช้งาน Gradin...
• เทคนิดทำเว็บไซต์ บทความนี้จะเป็นการทำภาพ จิ๊กซอร์ โดยใ...
• เทคนิดทำเว็บไซต์ เทคนิคการทำภาพถ่าย กลาย เป็นภาพ เขียน...
• เทคนิดทำเว็บไซต์ เทคนิคการเน้นภาพถ่าย ในส่วนที่เราต้อง...
• เทคนิดทำเว็บไซต์ เทคนิคการทำตัวหนังสือสีทอง
• เทคนิดทำเว็บไซต์ การทำแว่นขยายด้วย Photoshop
• เทคนิดทำเว็บไซต์ การทำตัวอักษร 3D ด้วย Photoshop
• เทคนิดทำเว็บไซต์ พับมุมปกหนังสือ ด้วย Photoshop
• เทคนิดทำเว็บไซต์ โคลนนิ่งอย่างงายโดยใช้ Layer Mask
• เทคนิดทำเว็บไซต์ สร้างหนังสือแบบ 3D ใน Photoshop

เทคนิคทำเว็บ การทำกรอบภาพให้ดูสวยงามและมีมิติ

การทำกรอบภาพให้ดูสวยงามและมีมิติ

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

เราจะมาสร้างกรอบให้ภาพแบบที่มีขอบภาพสีขาว และมีเงาอยู่ด้านหลังนิดหน่อยกันค่ะ

ขั้นตอนการทำ

1. เปิดโปรแกรม Photoshop แล้วไปที่ File-->New

กำหนดขนาดประมาณ 400x400 (สามารถกำหนดขนาดเท่าไรก็ได้*) เสร็จแล้วกด OK

2. จากนั้นทำการสร้างขอบโดยเลือกเครื่องมือ ที่ชื่อว่า Rectangular marquee แล้วทำการลากลงบนพื้นที่การทำงานให้ได้ขนาดตามรูปด้านล่าง

3. จากนั้นเทสีใดก็ได้ลงไปในพื้นที่ที่เรากำหนดไว้

เมื่อเทสีลงไปจะได้ผลลัพธ์เหมือนภาพด้านล่าง

4. ไปที่เครื่องมือที่ชื่อว่า Add Layer Style เมื่อคลิกที่รูปจะปรากฎหน้าต่างเล็กๆ ขึ้นมาให้เลือกไปที่ Stroke

กำหนดค่า Size=5 px ในช่อง Color เลือกสีขาว

เมื่อใส่ค่าเสร็จแล้วยังไม่ต้องกด OK ให้คลิกที่ Ourter Glow ตามภาพลูกศรอันที่ 3 ปรับค่า Blend Mode ที่ Normal

ปรับค่า Opacity =59 % ปรับสีเป็นสีเทา Size=15 px แล้วกด OK

ภาพผลลัพทธ์ที่ได้ จะได้กรอบภาพมาแล้วทีนี้เราก็ลองหาภาพสวยๆ มาใส่กันได้ตามใจชอบเลยค่ะ

ภาพที่ใส่กรอบเรียบร้อยแล้ว

เทคนิคทำเว็บ สร้างข้อความโค้งตามวัตถุแบบง่ายๆ

สร้างข้อความโค้งตามวัตถุแบบง่ายๆ

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

1. เปิดโปรแกรม Photoshop เลือกไฟล์รูปที่จะนำมาทำ ไปที่ File-->Open คลิกที่ภาพที่ต้องการ แล้วกดปุ่ม Open

   
   

   ภาพตัวอย่างที่ต้องการนำมาทำ
   
   
   

2. จากนั้นทำการสร้างเส้นโค้ง ไปที่เครื่องมือ Pentool
   
   
   
   
3. ทำการจุดลงบนพื้นที่ต้องการให้ตัวอักษรโค้ง จุดที่จุดเริ่มต้นหนึ่งครั้งแล้วจุดที่จุดปลายหนึ่งครั้ง
   
   
   
   
   ทำการดัดให้เส้นเกิดความโค้งโดยการลากเมาส์ลงมาในแนวเฉียง 45° เส้น Paht จะโค้งตาม
   
   
   
   
4. เมื่อได้เส้น Paht แล้วขั้นตอนต่อไปคือสร้างตัวอักษร ตามเส้น Path นั้น ไปที่เครื่องมือ Horizontal Type Tool
   
   
   
   
   คลิกลงที่เส้น Path หนึ่งครั้ง จากนั้นทำการพิมพ์ข้อความลงไปตามที่เราต้องการ
   

ผลลัพธ์ที่ได้

เทคนิคทำเว็บ สร้างกรอบรูปด้วย Brush Tool

สร้างกรอบรูปด้วย Brush Tool

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

1. สร้าง File ขึ้นมาใหม่ขนาดประมาณ 500x600 pixel

2. หลังจากสร้างไฟล์ขึ้นมาใหม่แล้ว ให้ทำการเปิดรูปภาพขึ้นมา 1 รูป โดยเข้ามาที่ File ---> Open (Ctrl+O)

3. จากนั้นทำการลากรูป มายังไฟล์แรกที่ได้ทำการสร้างเอาไว้ โดยคลิกเมาส์ซ้ายค้าง แล้วลากมาปล่อยที่ไฟล์แรกที่ได้ทำการสร้างเอาไว้ ดังรูปตัวอย่าง

4. คลิกเลือกที่ Layer 2 (Layer รูปภาพ) ไปที่ เมนู Layer-->Create Cliping Mask หรือ (Alt+Ctrl+G)

5. จากนั้นให้ทำการโหลดหัวแปรงแปลก ๆ สวย ๆ ขึ้นมาใช้ โดยเข้าคลิกเลือกที่ Brush Tool และทำตามขั้นตอนดังรูปตัวอย่างค่ะ
(ถ้ายังไม่มีหัวแปรงนี้สามารถโหลดหัวแปรงไปใช้ได้ค่ะ คลิก Download Brush)

6. เมื่อทำการโหลดหัวแปรงตามขึ้นตอนที่ 5 เรียบร้อยแล้ว ให้ทำการเลือก หัวแปรงชื่อ Azalea (เมื่อนำเมาส์ไปชี้ที่รูปหัวแปรงจะมีชื่อหัวแปรงขึ้นมาบอกค่ะ ท่านสมาชิกสามารถเลือกหัวแปรงแปลก ๆ แบบอื่นก็ได้ตามใจชอบค่ะ)

7. เมื่อเลือกหัวแปรงที่ต้องการเรียบร้อยแล้ว ให้เลือก Layer1 ดังรูปตัวอย่างค่ะ และทำการระบายสีลงไปที่ Layer 1 โดยใช้ เครื่องมือ Brush Tool ที่ได้เลือกไว้แล้วในขั้นตอนที่ 6 ค่ะ เพียงเท่านี้เราก็จะได้กรอบรูปที่มีรูปทรงแปลกตาไม่เหมือนใครแล้วค่ะ

8. หลังจากที่ได้รูปที่ต้องการแล้ว ทีนี้มาถึงขั้นตอนการตกแต่งรูปภาพให้ดูมีมิติมากขึ้น ด้วยการใส่แสงเงา และขอบภาพเล็กน้อย โดย ดับเบิลคลิกที่ Layer1 ที่เราได้ระบายสีไว้ในตอนแรก จะมีกล่องเครื่องมือ Layer Style ขึ้นมา คลิกเลือกที่ Stroke และปรับค่าดังนี้

Size = 3
Position = Outside
Blead Mode = Normal
Opacity = 100%
สีให้เลือกตามต้องการ (จากตัวอย่างใช้สี #FFFFFF หรือ สีขาวค่ะ)

จากนั้น คลิกที่ Drop Shadow และปรับค่าดังนี้

Distance = 8
Size = 5
Angle = 120
Blead Mode = Multiply
Opacity = 60 %

เมื่อทำตามขั้นตอนเรียบร้อยแล้ว คลิก OK เพื่อเซฟรูปภาพ และสามารถนำไปใช้งานได้เลยค่ะ

รูปภาพที่ทำเรียบร้อยแล้ว

Download ไฟล์ตัวอย่าง

เทคนิคทำเว็บ การทำภาพเงาสะท้อนวัตถุ

การทำภาพเงาสะท้อนวัตถุ

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

ขั้นตอนการทำ

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

2. เพื่อป้องกันภาพต้นฉบับเสียหาย ให้ทำการ Copy ภาพ โดยคลิก Layer --> Duplicate Layer

3. เพื่อให้เกิดการสะท้อนแบบสมจริง ควรเลือกใช้พื้นหลังสีทึบอย่างสีดำ ขั้นตอนนี้ต้องสร้าง Layer ขึ้นใหม่ 1 Layer เพื่อใช้เป็น Background ของภาพ สามารถทำได้โดยคลิกที่ Layer --> New --> Layer --> ตั้งชื่ออะไรก็ได้ (ในที่นี้ตั้งชื่อว่า Background Copy)

4. ให้ทำการลาก Layer ใหม่ที่สร้างขึ้น เลื่อนลงมาอยู่ใต้ Layer ของวัตถุ โดยการคลิกเมาส์ซ้ายค้างไว้ แล้วลากลงมา

5. หลังจากนั้น ให้คลิกเลือกสีดำเพื่อที่จะนำมาเทใส่ Layer พื้นหลัง โดยไปที่เมนู Paint Bucket Tool ที่สัญลักษณ์คล้ายกระป๋องสี เมื่อเลือกแล้วให้คลิกเทสีลงใน Layer ใหม่ที่สร้างขึ้น (คลิกครั้งเดียวพอค่ะ)

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

** สิ่งที่ควรคำนึงเมื่อทำภาพเงาสะท้อน คือ ขนาดพื้นที่ของภาพ ต้องมีขนาดกว้างพอที่จะสามารถเพิ่มเงาสะท้อนลงไปได้ วิธีการเพิ่มพื้นที่สามารถทำได้โดย ลดขนาดของภาพลง หรือขยายพื้นหลังให้ใหญ่ขึ้น (ในที่นี้จะเลือกวิธีลดขนาดภาพลง เพื่อให้มีพื้นที่ว่างเหลือด้านล่าง)

วิธีลดขนาดของภาพ คลิกที่ Edit -->Tranform-->Scale จากนั้นทำการปรับขนาดวัตถุตามต้องการ

6. เมื่อได้ขนาดวัตถุตามต้องการ และมีพื้นที่ว่างเหลือพอสำหรับทำเงา ขั้นตอนต่อไป คือการ Copy ภาพต้นแบบ เพื่อจะนำภาพ Copy ที่ได้มาปรับแต่งเป็นเงาสะท้อน คลิกเลือกที่ Layer วัตถุ และไปที่ Layer --> Duplicate Layer ตั้งชื่อภาพตามต้องการ (ในที่นี้ตั้งชื่อภาพว่า Background Copy 2)

7. เมื่อเราได้ภาพที่จะนำมาทำเงาแล้ว ขั้นตอนต่อไป คือการกลับหัววัตถุ โดยไปที่ Edit -->Tranform --> Scale จากนั้นให้ทำการคลิก ลากพลิกภาพลง จากด้านบนลงด้านล่าง

ในการลากภาพ ควรจะลากให้ได้ขนาดเท่ากับภาพต้นฉบับ เพื่อให้เกิดความสมจริง

8. จากนั้นเราจะมาเพิ่มลูกเล่นกันอีกนิดหน่อย เพื่อให้เกิดความสมจริงมากยิ่งขึ้น โดยไปที่ Gradient Tool

8.1 จากนั้นให้เลือกที่สี Black,White

9. จากนั้นมาที่ Layer --> Add Layer Mask --> Reveal All

เมื่อเราเลือกแล้ว จะเห็นว่าเมาส์เปลี่ยนเป็นรูปเครื่องหมายบวก ให้ทำการคลิกเมาส์ซ้ายหนึ่งครั้ง แล้วลากจากจุดที่ 1 ไปยังจุดที่ 2 ให้ได้ระยะตามรูป

ผลลัพธ์ที่ได้

ในการ Save ภาพ เงาสะท้อน เพื่อใช้ตกแต่งเว็บไซต์ สามารถทำได้โดยไปที่ File --> Save for web ทำการกำหนดค่าของภาพได้ตามต้องการค่ะ พบกับเทคนิคเด็ด ๆ