Tech & Tips

เทคนิคเพิ่มลูกเล่นระยิบระยับให้ตัวอักษร

 
1. ทำการสร้างไฟล์ใหม่โดยการเลือก File --> New


                  


2. ทำการพิมพ์ข้อความที่ต้องการ ลงในไฟล์ที่เราสร้างขึ้นครับ



 

3. คลิกขวาที่ layer ของตัวหนังสือ แล้วเลือกที่ Rasterize Layer ตามภาพครับ


                   
 

4. กดปุ่ม Ctrl ที่คีย์บอร์ด แล้วคลิกที่ช่องสี่เหลี่ยมใน layer ของตัวหนังสือครับ



 

5. เลือกสีของ Forground และ สีของ Background ตามภาพครับ


                   
 

6. ไปที่เมนู Filter --> Render --> Clouds

                  
 

7. เราจะได้ตัวอักษรตามภาพ



 

8. หลังจากนั้นไปที่เมนู Filter --> Distort --> Glass ครับ

                    


9. ให้ท่านปรับแต่งค่า และตัวเลือกต่าง ๆ ตามภาพครับ




10. เมื่อทำการปรับแล้ว ตัวอักษรจะมีลักษณะดังภาพ



 

11. หลังจากนั้นให้เลือกที่ Layer Background เลือก เครื่องมีเทสี และเลือกสีของ Forground เป็นสีดำครับ แล้วเทสีลงในไฟล์งาน เพื่อให้พื้นหลังในไฟล์งานเป็นสีดำ


                        


12. ทำการดับเบิ้ลคลิกที่ layer ตัวอักษร เลือก Stroke ปรับขนาด และสีตามต้องการครับ



 

13. จะได้ผลตามภาพครับ




14. ให้เลือกที่เครื่องมือ Brush แล้วทำการเลือกประเภทของ Bruch เป็น Assorted Brushes ครับ

                     
 

15. เลือกรูปแบบของ Brush ครับ โดยเลือกรูปแบบที่ 18 ครับ

                      


16. ให้ทำการสร้าง layer ใหม่ครับ


                     
 

17. เลือกสีของ Forground เป็นสีขาว แล้วคลิกเลือกในไฟล์งาน เพื่อทำการใส่ Brush ให้กับตัวอักษรครับ



18. เพียงเท่านี้เราก็จะได้ ตัวหนังสือเพชรประกายระยิบระยับ มาตกแต่งเว็บไซต์แล้วครับ








สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย

 
ตัวอย่าง
Javascript Code
แสดงปกติพิมพ์โค้ดนี้?
  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript">   
  3. $(function(){  
  4.     $("ul#eyefish li a img").hover(function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่เหนือรูปภาพ*/  
  5.         $(this).animate({  
  6.             width:120,  
  7.             height:100  
  8.         },300);  
  9.     },function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่ออกจากรูปภาพ*/  
  10.         $(this).animate({ /* กำหนดการเคลื่อนไหวด้วยการลดขนาดความกว้างและความสูงของรูป ใช้เวลาหน่วง 0.300 วินาที*/  
  11.             width:85,  
  12.             height:71  
  13.         },300);   
  14.     });  
  15. });  
  16. </script>  
CSS Code
แสดงปกติพิมพ์โค้ดนี้?
  1. <style type="text/css">   
  2. img{/* กำหนดขอบให้กับ รูปภาพ*/  
  3.     border:0;  
  4. }  
  5. ul#eyefish{ /* กำหนดขอบเขตของเมนู */  
  6.     margin:0;padding:0;  
  7.     margin-left:100px;  
  8.     display:block;  
  9.     height:100px;  
  10. }  
  11. ul#eyefish li{ /* กำหนด css ให้กับ list รายการเมนู*/  
  12.     list-style:none outside;  
  13.     float:left;  
  14. }  
  15. ul#eyefish li a img{ /* กำหนดขนาดเริ่มต้นให้กับรูปภาพ */  
  16.     width:85px;  
  17.     height:71px;  
  18. }  
  19. </style>  
Html Code
แสดงปกติพิมพ์โค้ดนี้?
  1. <ul id="eyefish">  
  2. <li><a href="#"><img src="images/calendar.png" /></a></li>  
  3. <li><a href="#"><img src="images/email.png" /></a></li>  
  4. <li><a href="#"><img src="images/history.png" /></a></li>  
  5. <li><a href="#"><img src="images/home.png" /></a></li>  
  6. <li><a href="#"><img src="images/music.png" /></a></li>  
  7. <li><a href="#"><img src="images/portfolio.png" /></a></li>  
  8. <li><a href="#"><img src="images/video.png" /></a></li>  
  9. </ul>  
 
 
การกำหนดรูปแบบในใส่เพลงในเว็บ
        1. หาโค้ดเพลงที่ต้องการใส่ลงในเว็บ  โดยค้นหาจาก google  (
        2. นำโค้ดเพลงที่ได้มาใส่ในหน้า Code ของ Adobe Dreamweaver
        3. เมื่อแสดงหน้าเว็บดูจะเห็นว่า มีโฆษณาและลิ้งค์ที่เชื่อมไปยังเว็บที่เอาโค้ดเพลงมาด้วย
        4. สามารถแก้ไขไม่ให้มีการเห็นแถบเล่นเพลงได้โดยการกำหนดที่โค้ดใหม่  จะเห็นว่า แถบเพลงมีความสูงความกว้างของโฆษณา จึงต้องมีการกำหนดความสูงและความกว้างให้เท่ากับ 0 และลบโค้ดโฆษณา เหลือเพียงโค้ดที่เป็นเพลงไว้เชื่อมต่อกับเว็บต้นแบบของโค้ดเพลง
        5. จะได้เว็บที่มีเพลงประกอบแต่ไม่เห็นแถบเพลงแสดง
 
 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: บทความ (Atom)