Photoshop CS 3
คุณสมบัติ Smart Flltersคือการกำหนดคุณสมบัติให้กับเลเยอร์ โดยการแปลงให้เป็น Smart Objects ก่อน แล้วสามารถที่จะใช้ฟิวเตอร์ ( Fllter ) เพื่อแต่งภาพในเลเยอร์นั้นได้หลาย ๆ ฟิวเตอร์ได้โดยจะยังคงรักษาข้อมูลเดิมของภาพต้นฉบับไว้ รวมถึงสามารถกลับมาแก้ไข fllter ต่างๆ ได้อีกด้วยคุณสมบัติ Quick Selection Toolเครื่องมือที่ใช้เลือกพื้นที่หรือภาพได้อย่างฉลาดและรวดเร็ว โดยใช้วิธีการคำนวณสีที่ใกล้เคียงกันและเพิ่มพื้นที่ที่เราเลือกได้อัตโนมัติ ทำให้การเลือกภาพทำได้ง่ายและสะดวกมากขึ้นโดยไม่ต้องเสียเวลากับการคลิกเลาะภาพอีกต่อไปการปรับสีภาพด้วยคำสั่ง Curveสามารถสร้าง Curve เพื่อตกแต่งรูปได้อย่างง่ายดายด้วยคุณสมบัติของ Cllpping Warning และ In – Dlalog Histogram ซึ่งจะทำให้มองเห็นการทำงานของผลลัพธ์ได้ทันที สามารถปรับสีของภาพได้หลายระดับและปรับสีแยกได้ทีละแชนแนลสี ซึ่งจะช่วยให้การปรับแต่งแสงสีของภาพได้อย่างปราณีตพาเล็ตพาเล็ตใหม่นี้ ช่วยให้คุณแสตมป์ภาพได้ดียิ่งขึ้น เพราะสามารถเก็บตำแหน่งพิกเซลของภาพต้นฉบับที่เลือกจากเครื่องมือ Clone Stamp และ Healing Brush ไว้ได้ถึง 5 ชุดด้วยกัน ทำให้คุณเลือกสลับใช้งานภาพต้นฉบับ ที่จะแสตมป์ในจุดอื่นๆ ได้อย่างรวดเร็ว โดยไม่ต้องคลิกเลือต้นฉบับบ่อยๆความสามารถของ Vanishing Pointความสามารถใหม่อีกอย่าง คือ การสร้างพื้นที่ แบบ Perspective ด้วย Vanishing Point สามารถสร้างพื้นที่ระนาบ ( หรือ plane ) ได้หลายๆจุดในภาพเดียวกัน เพื่อนำรูปภาพ ข้อความ มาจัดวางลงภายในพื้นที่เชื่อมต่อกันได้แบบต่อเนื่องการทำภาพพาโนรามาการทำภาพพาโนรามาแบบง่ายๆ ด้วยการนำภาพที่ถ่ายในมุมกว้างหลาย ๆ ภาพมาอีกจัดเรียงต่อกัน ซึ่งใน Photoshop CS3 ก็จะมีคำสั่งในการเรียงภาพ โดยใช้คำสั่ง Auto – Allgn Layers และการผสมสีของภาพให้กลมกลืนกันให้อัตโนมัติ ด้วยคำสั่ง Auto – Blend Layers ซึ่งจะช่วยคุณจัดเรียงภาพที่ใกล้เคียงให้โดยอัตโนมัตินอกจากการรวมภาพแบบพาโนรามาแล้ว ยังสามารถนำการจัดเรียงเลเยอร์มาใช้รวมและปรับแต่งภาพหลายๆ ภาพที่มีเนื้อหาคล้ายกันแต่มีความต่างของภาพในบางตำแหน่งหนึ่ง เราอาจจะดึงมุมดีๆของภาพแต่ละภาพมารวมกันเพื่อให้ภาพออกมาสมบูรณ์ที่สุด ภาพเอนิเมชั่นใน photoshop cs3
ตามปกติแล้ว โปรแกรม photoshop ในเวอร์ชั่นก่อนหน้านี้ จะมีโปรแกรม imageready แถมมาให้ด้วย เพื่อไว้ทำภาพเอนิเมชั่น แต่พอมาถึงเวอร์ชั่น cs3 นั้น กลับไม่มี โปรแกรม imageready แถมมาให้ หลายๆคนคงคิดว่า แล้วจะทำภาพเอนิเมชั่นใน cs3 ได้ยังไง บทความนี้จะเสนอเกี่ยวกับการทำภาพเอนิเมชั่นใน photoshop cs3
1. เปิดเอกสารใหม่ขึ้นมา โดยไปที่เมนู file > new แล้วตั้งค่าเอกสารตามความต้องการ ในที่นี้ สร้างเอกสารใหม่ขนาด 125x125
2. หารูปภาพอะไรก็ได้มา 3 ภาพ ใส่แยกไว้ในแต่ละเลเยอร์ รวมทั้งหมด 3 ภาพ 3 เลเยอร์
3. ไปที่เมนู Window > Animation จะได้หน้าต่าง Animation ขึ้นมา
4. คลิกตรง 0 sec. เพื่อเลือกเวลาที่ต้องการ ในการแสดงแต่ละภาพ ในที่นี้เลือกเป็น 2 วินาที
5. คลิกที่ Duplicates selected frames เพื่อ copy จาก frame แรก
6. หลังจากนั้นให้ไปคลิกที่รูปตาตรงเลเยอร์ที่ 3 ออก
7. กลับไปคลิกที่ Duplicates selected frames เพื่อ copy จาก frame ที่สอง (เหมือนข้อ 5)
8. ต่อจากนั้นให้ไปคลิกที่รูปตาตรงเลเยอร์ที่ 2 ออก (เหมือนข้อ 6)
9. ทดสอบได้โดยการกดปุ่ม play animation จะเล่นตั้งแต่ frames แรกไป frames สุดท้าย frames ละ 2 วินาที เมื่อจบ frames สุดท้ายก็จะวนกลับไปที่ frames แรกใหม่
10. ไปที่ File > Save for Web & Devices หรือกด ALT + CTRL + SHIFT + S เพื่อเซฟ และตั้งค่าตามต้องการ
11. สุดท้ายเราก็จะได้รูปเอนิเมชั่นที่ทำจาก photoshop cs3 แล้วครับ ง่ายๆใช่มั๊ยครับ สำหรับคนที่เคยใช้ ImageReady ก็คงจะคุ้นเคยกันเป็นอย่างดี
โปรแกรม Macromedia Dreamweaver
Dreamweaver CS3 เป็นโปรแกรมที่ดีตัวหนึ่งในการใช้สร้างเว็ปไซด์ มันเป็นโปรแกรมในแบบ WYSIWYG หรือ What you see is what you get หมายถึงถ้าคุณเห็นรูปแบบของหน้าเว็ปที่คุณออกแบบเป็นแบบไหนเวลาที่อยู่ในโปรแกรม มันก็จะออกมาเป็นแบบนั้นในบราวเซอร์หรือโปรแกรมที่ใช้ดูหน้าเว็ป มันช่วยให้คุณสร้างหน้า html ได้ โดยที่คุณไม่จำเป็นต้องรู้ code html เลย คุณสามารถ download โปรแกรมเพื่อทดลองใช้ภายใน 30 วันได้จาก link นี้ http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver แต่ก่อนที่คุณจะสร้างเว็ปไซด์ใน Dreamweaver CS3 คุณควรจะทำสิ่งเหล่านี้ก่อน
- คิดว่าคุณจะใช้ web hosting ที่ไหนในการ upload เว็ปไซด์ของคุณ จะเอาแบบที่ฟรีหรือเสียเงิน ซึ่งก็แน่นอนว่าแบบที่เสียเงินจะดีกว่า ข้อเสียก็คือคุณต้องจ่ายตัง แต่ถ้าคุณคิดว่าจะลองทำเว็ปไซด์เล่นดูก่อน คุณก็ลองใช้บริการแบบฟรีไปก่อน ผมไปอ่านในเว็ปบอร์ดมีคนแนะนำเว็ปนี้
http://www.yourname.or.hn/995.tik?main=hosting&lang=th เป็น hosting ของไทยที่ฟรีและไม่มีโฆษณา แต่ผมไม่เคยใช้บริการน่ะครับเลยไม่รู้ว่าดีหรือเปล่า ส่วนบริษัทที่จะรับ host เว็ปไซด์คุณก็ลองหาใน google ดูครับ หลังจากนั้นคุณก็ต้องซื้อ domain name หรือชื่อของเว็ปไซด์ เช่น google.com ซึ่งส่วนใหญ่แล้วบริษัทที่รับ host เว็ปไซด์ก็จะมีบริการนี้อยู่ จริงๆแล้วมันน่าจะเรียกว่าเช่ามากกว่าเพราะคุณต้องเสียค่าบริการเป็นปี แต่ถ้าคุณใช้ host แบบฟรีและยังไม่ได้จดชื่อ domain คุณก็ใช้ชื่อที่เป็นแบบ Sub-domain หรือ Sub-directory ไปก่อน เช่น http://yourname.exteen.com หรือ http://exteen.com/yourname ซึ่งก็ใช้ได้ทั้งสองอย่าง แล้วแต่ว่าบริษัทที่ host เว็ปคุณจะให้ตั้งแบบไหน
- หลังจากนั้นคุณก็ต้องคิดว่าเว็ปไซด์ของคุณจะเกี่ยวกับอะไร มีกี่หน้า แล้วก็ออกแบบหน้าตาของเว็ปไซด์ โดยใช้โปรแกรมที่ใช้ทำกราฟฟิค เช่น โฟโต้ช็อป แล้วคุณก็ควรเตรียมรูปที่จะเอาใส่ไว้ในหน้าเว็ปที่เป็น gif หรือ jpg และถ้าไซด์คุณจะมี Flash animation คุณก็ควรทำไฟล์เตรียมเอาไว้ด้วย นี่คือตอนและโปรเจ็คต่างๆที่เราจะมาเรียนรู้ในการใช้งานขั้นพื้นฐานของโปรแกรม Dreamweaver CS3
การ define site ใหม่ใน Dreamweaver
1. สร้างโฟล์เดอร์ที่คุณจะใช้เก็บไฟล์ต่างๆที่จะใช้ในเว็ปไซด์ของคุณขึ้นมาใหม่ คุณควรตั้งชื่อของโฟล์เดอร์ให้คุณจำได่ง่ายว่ากำลังทำงานกับเว็ปไซด์อะไรอยู่ เช่น ถ้าคุณกำลังสร้างเว็ปไซด์ชื่อ samplesite.com คุณก็ควรตั้งชื่อโฟล์เดอร์ว่า samplesite ภายในโฟล์เดอร์นั้นคุณก็สร้างโฟล์เดอร์ย่อยขึ้นมาอีกอันหนึ่งตั้งชื่อว่า images แล้วคุณก็ copy ไฟล์ที่เป็นรูปภาพทั้งหมดที่จะใช้ในเว็ปไซด์ ไปไว้ในโฟล์เดอร์ images
2. เปิดโปรแกรม Dreamweaver CS3
3. Define ไซด์ใหม่ โดยไปที่เมนู Site แล้วเลือก New Site แล้วก็เลือกที่ Tab “
4. ตั้งชื่อไซด์ของคุณในช่อง Site Name คุณควรตั้งชื่อเพื่อให้คุณจำได้ว่าคุณกำลังทำงานอยู่กับไซด์อะไร
การสร้าง CSS Style Sheet
การสร้างไฟล์ CSS แบบ external ทำได้โดยการทำตามขั้นตอนข้างล่างนี้ 1. ไปที่เมนู File แล้วเลือก New 2. ตรงช่องของตัวเลือก Page Type เลือก CSS 3. กดปุ่ม Create แล้ว save ไฟล์ไว้ในโฟล์เดอร์เดียวกับที่เก็บเว็ปไซด์คุณ แต่แนะนำให้สร้างโฟล์เดอร์ย่อยขึ้นมาใหม่ อาจจะตั้งชื่อว่า style หรืออะไรก็ได้ที่จะทำให้คุณรู้ว่าโฟล์เดอร์นั้นเกี่ยวกับ style sheet แล้วก็ตั้งชื่อไฟล์ แล้วก็ save ไฟล์ไปในนั้น ไฟล์ตัวนั้นจะมี extension หรือนามสกุลเป็น .css หลังจากที่คุณสร้างไฟล์ CSS แล้ว คุณก็ต้อง attach หรือ link ไฟล์ตัวนั้นกับไฟล์ Dreamweaver template ที่คุณสร้างไว้ก่อนหน้านี้ คุณสามารถทำได้โดยการไปที่ panel ของ CSS Styles (ถ้าคุณไม่เห็น panel นี้ ก็ไปที่เมนู Window แล้วเลือก CSS Styles) จากนั้นก็คลิกที่ไอคอน Attach Style Sheet แล้วก็เลือกไฟล์ CSS แล้วก็คลิก OK คุณสามารถสร้าง rule หรือการกำหนด style ของ css ขึ้นใหม่ได้โดยการคลิกที่ไอค่อน New CSS Rule มันก็จะมี dialog box ของ New CSS Rule ขึ้นมา ถ้าคุณต้องการตั้ง style ของตัวเอง ซึ่งจะสามารถใช้ใส่ไปใน Tag ของ Html ตัวใดก็ได้ คุณก็เลือก Class โดยทำตามขั้นตอนข้างล่าง
1. ตรงส่วนของ Selector Type: คุณก็เลือก Tag
2. เลือก Tag ที่คุณต้องการจะเปลี่ยนแปลงรูปแบบจากเมนูที่ให้เลือกทางขวาของ Tag: เช่น h1 อย่างในรูป
3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK มันก็จะมี dialog box ของ CSS Rule Definition ขึ้นมา คุณก็สามารถตั้งว่าจะใช้ฟอนต์อะไร ขนาดเท่าไหร่ มี style แบบไหน แล้วก็อื่นๆอีกมากมาย ในหมวดต่างๆ dialog box ตัวนี้ได้ เมื่อตั้งเสร็จแล้ว คุณก็คลิก OK
การใส่องค์ประกอบต่างๆของหน้าเว็ปไปใน Dreamweaver Template : ตัวหนังสือและรูปภาพ
5. คลิกที่ไอค่อนรูปโฟล์เดอร์สีเหลืองที่อยู่ทางขวาของช่อง Local Root Folder แล้วก็ browse หาโฟล์เดอร์ที่จะใช้เป็นเว็ปไซด์ของคุณ ที่คุณได้สร้างขึ้นในข้อที่ 01 เลือกโฟล์เดอร์นั้น แล้วคลิกปุ่ม open แล้วคลิกที่ปุ่ม select แล้วก็คลิกที่ปุ่ม OK ใน window Site Definition
6. ตอนนี้คุณก็น่าจะเห็นโฟล์เดอร์ชื่อ images ตรง File panel ทางขวามือแล้ว ถ้ายังไม่เห็นให้คุณไปที่เมนู Window แล้วก็เลือก Files
