Sriwattana Institute of International Business and Technology
Download
1 / 57

Sriwattana Institute of International Business and Technology - PowerPoint PPT Presentation


  • 69 Views
  • Uploaded on

Sriwattana Institute of International Business and Technology.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Sriwattana Institute of International Business and Technology' - chika


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Sriwattana institute of international business and technology

เว็บกราฟิก และ Adobe PhotoShop Technology องค์ประกอบสำคัญในการทำ Web ให้ดูน่าสนใจ คงหนีไม่พ้นรูปภาพที่นำมาตกแต่ง ซึ่งผู้พัฒนาหลายๆ คน บ้างก็นำภาพสำเร็จมาใช้งาน บ้างก็นำภาพจากเวบอื่นๆ ที่ดูสวยงามมาใช้ และก็มีไม่น้อยที่สร้างภาพเอง โดยอาศัยโปรแกรมกราฟิกต่างๆ เช่น PhotoShop, PhotoImpact, Paint Shop เป็นต้น


Sriwattana institute of international business and technology

โปรแกรม PhotoShop นับว่าเป็นโปรแกรมกราฟิกสุดฮิต ที่นิยมใช้ในการปรับแต่งภาพ หรือสร้างภาพ เพื่อนำมาใช้งานในเวบ เนื่องจากมีฟังก์ชันการทำงาน ที่หลากหลาย มีฟิลด์เตอร์เพื่อปรับแต่งภาพ จากค่ายต่างๆ ทำให้ง่ายต่อการปรับแต่งภาพตามต้องการ เดิมทีนิยมใช้ PhotoShop เพื่องานสื่อสิ่งพิมพ์ (Desktop Publishing) แต่ปัจจุบัน Web Design มีบทบาทในงานธุรกิจและงานการศึกษาสูงมาก จึงนำ PhotoShop มาใช้ในงานนี้ด้วย


Sriwattana institute of international business and technology

การทำภาพกราฟิกเพื่อใช้ในงานเวบมีหลักการเฉพาะ แตกต่างไปจากงานสื่อสิ่งพิมพ์ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้แค่ 72 dpi หรือจำนวนสีที่ใช้แสดงผล เป็นต้น ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช้ PhotoShop สร้างกราฟิกในงานเวบจึงเป็นศาสตร์ที่น่าสนใจอีกศาสตร์หนึ่ง


Sriwattana institute of international business and technology

ลักษณะหน้าต่างโปรแกรมลักษณะหน้าต่างโปรแกรม


Sriwattana institute of international business and technology

ส่วนที่ลักษณะหน้าต่างโปรแกรม1.เรียกกันว่าMenu barเป็นส่วนที่แสดงชื่อเมนูต่างๆของโปรแกรมก็จะประกอบด้วยFile , Edit , Image , Layer , Select  ,  Filter , View  , Window  , Help  1.Fileหมายถึงคำสั่งเกี่ยวกับการจัดเก็บและเรียกใช้ไฟล์รูปภาพต่างๆ 2.Edit หมายถึงคำสั่งเกี่ยวกับการแก้ไขลักษณะของรูปภาพและ Image ต่างๆ 3. Image หมายถึงคำสั่งการจัดการรูปภาพและ Image ต่างเช่นการเปลี่ยนสีและการเปลี่ยนขนาด


Sriwattana institute of international business and technology

(ต่อ)ลักษณะหน้าต่างโปรแกรม

4. Layer หมายถึงชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects 5. Select  เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆเช่นการขยายภาพและย่อภาพให้ดูเล็ก8. Window  เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น


Sriwattana institute of international business and technology

ส่วนที่ลักษณะหน้าต่างโปรแกรม2.

คือส่วนของอุปกรณ์ต่างที่เราใช้ในการสร้างชิ้นงานต่างหรือใช้ในการตกแต่งภาพส่วนวิธีการใช้เราสอนในบทเรียนต่อไปในการเรียกอุปกรณ์เราสามารถเรียกได้โดยมาที่ window ---> Show Tools เมื่อเราคลิ๊กที่อุปกรณ์ตัวใดตัวหนึ่งค้างไว้ก็จะเห็นอุปกรณ์นั้นจะมีหลายแบบให้เราเลือกโดยการสังเกตจากเครื่องหมายจุดสามเหลี่ยมบนตัวอุปกรณ์


Sriwattana institute of international business and technology

(ต่อ)ลักษณะหน้าต่างโปรแกรม

และเมื่อดับเบิ้ลคลิ๊กก็จะปรากฏOption ของอุปกรณ์นั้นขึ้นมา

จะมีให้เลือก Option ต่างๆ


Sriwattana institute of international business and technology

ส่วนที่ลักษณะหน้าต่างโปรแกรม3.

เป็นส่วนของพื้นที่ของไฟล์ใหม่ที่เราจะมาเริ่มต้นการสร้างชิ้นงานเราสามารถสร้างโดยคำสั่ง File --> New


Sriwattana institute of international business and technology

Name = ลักษณะหน้าต่างโปรแกรมการตั้งชื่อหัวข้อเหนือไฟล์.

Image Size = ขนาดความสูงความกว้าง

Mode = เป็นการกำหนด Mode สีถ้าเป็นมาตรฐานจะเป็น RGB Color Contents ก็จะเป็นลักษณะพื้นหลังก็จะมี White (สีขาว) , Background Color (สีที่เรากำหนด) , Transparent (สีพื้นแบบ- โปร่งใส,ไม่แสดงสีพื้นโล่ง)


Sriwattana institute of international business and technology

ส่วนที่ลักษณะหน้าต่างโปรแกรม4.อุปกรณ์ควบคุมลำดับชั้นการทำงานของรูปภาพและวัตถุ

เมื่อเปิดโปรแกรมฯขึ้นมาก็จะพบอุปกรณ์นี้จะเรียกกันว่า Layer  Layer เป็นอุปกรณ์คุมควบลำดับชั้นของ Image เมื่อเรานำ Image มาวางซ้อนกันหลายๆอันก็จะเกิด Layer ขึ้นมาเราสามารถตั้งชื่อ Layer นั้นได้และสลับ Layer ได้จะมี Background อยู่ด้านล่างสุดเสมอ...


Sriwattana institute of international business and technology

หน้าต่างฟังก์ชันงาน - Palettes

Palettes เป็นหน้าต่างเล็กที่แสดงรายละเอียดของงานต่างๆ เช่น Palette Layer จะควบคุมการทำงานของเลเยอร์ เป็นต้น การเปิด/ปิด Palette เหล่านี้ใช้เมนูคำสั่ง Window


Sriwattana institute of international business and technology

นอกจากนี้ยังมีคีย์ลัดในการควบคุม ได้แก่

สำหรับเปิด/ปิด palettes, the options bar, and the toolbox

สำหรับเปิด/ปิด palettes


Sriwattana institute of international business and technology

มารู้จักเครื่องมือและคำสั่งใช้งานในมารู้จักเครื่องมือและคำสั่งใช้งานใน Photoshop กันเถอะ


Sriwattana institute of international business and technology

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


Sriwattana institute of international business and technology

จากนั้นปล่อยเมาส์ ณ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ

ตัวอย่าง Lasso Options Bar


Sriwattana institute of international business and technology

อุปกรณ์มาควี ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ(Marquee Tools ) เป็นอุปกรณ์ที่ใช้ในการเลือกพื้นที่ของภาพตามต้องการโดยมีให้เลือกโดยการคลิ๊กเม้าค้างตรงรูปสามเหลี่ยมเล็กๆด้านข้างโดยจะมีแบบให้เลือกทั้งสี่เหลี่ยมวงรีเส้นนอนเส้นตั้ง


Sriwattana institute of international business and technology

อุปกรณ์แลซโซ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Lasso Tools) เป็นอุปกรณ์ที่ใช้ในการเลือกพื้นที่การทำงานแบบอิสระโดยเริ่มจากพื้นที่จากจุดเริ่มจนวนมาพบกันอีกครั้งโดยตัดในลักษณะใดก็ได้รูปแบบใดก็ได้..แล้วต้องกลับมาบรรจบที่จุดเริ่มต้นกันอีกครั้งซึ่งจะเกิดเส้น Selection ขึ้นมา


Sriwattana institute of international business and technology

อุปกรณ์พ่นสี ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ (AirBrush Tool) ใช้พ่นสีที่เราเลือกบนพื้นที่ที่เราต้องการซึ่งลักษณะที่ได้จะเหมือนกับการพ่นด้วย Air Brush


Sriwattana institute of international business and technology

อุปกรณ์รับเอร์ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอสแตมป์ ( Rubber stemp Tool ) ลักษณะในการใช้ก็คล้ายกับตรายางนั้นแหละครับเป็นการคัดลอกชิ้นงานออกมาลักษณะการใช้งานก็ไปคลิ๊กที่รูปภาพโดยให้กดปุ่ม Alt ค้างไว้ด้วยพูดอีกอย่างเป็นการโคลนนิ่งภาพนั้นเอง


Sriwattana institute of international business and technology

อุปกรณ์ดินสอ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Pencil Tool ) ลักษณะการทำงานก็คล้ายดินสอใช้วาดภาพเป็นอุปกรณ์เครื่องมือแบบเดียวกับ Paint Brush


Sriwattana institute of international business and technology

อุปกรณ์โทนนิ่ง ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Dodge Tool ) ใช้ในการปรับค่าโทนสีของภาพให้สว่างหรือมืดซึ่งจะมีเครื่องมือให้เลือกอีกคือ Dodge,Burn,Sponge


Sriwattana institute of international business and technology

อุปกรณ์ไทป์ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Type Tool ) เป็นอุปกรณ์ที่สำคัญและใช้บ่อยด้วยใช้สำหรับสร้างตักอักษรซึ่งสามารถนำมาจัดประกอบภาพได้ทันทีโดยคุณสามารถเลือกสีได้ด้วยและมีให้เลือก2แบบได้แก่การสร้างตัวอักษรทึบและแบบโปร่งเพื่อเติมสีทีหลังเหมาะสำหรับจะนำภาพมาสร้างตัวอักษร


Sriwattana institute of international business and technology

อุปกรณ์ถังสี ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Paint Bucket Tool ) ใช้ในการเทหรือละเลงสีระบายลงบนภาพหรือพื้นที่ที่ได้เลือกไว้เหมาะกับการเทลงพื้นที่ขนาดกว้าง


Sriwattana institute of international business and technology

อุปกรณ์แฮนด์ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Hand Tool ) เป็นเครื่องมือใช้เลื่อนภาพบนจอจะสามารถใช้ได้ก็ต่อเมื่อเราได้ขยายภาพล้นหน้าจอแล้วเท่านั้น


Sriwattana institute of international business and technology

อุปกรณ์เคลื่อนย้าย ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ(Move Tool ) เป็นอุปกรณ์ที่ใช้ในการเคลื่อนย้ายภาพหรือบนชั้น Layer ที่เรากำลังทำงานอยู่ไปในตำแหน่งต่างๆ


Sriwattana institute of international business and technology

อุปกรณ์เมจิควอนด์ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Magic Wand Tool ) เป็นอุปกรณ์ให้เลือกพื้นที่การทำงานเช่นกันโดยจะเลือกพื้นที่ที่มีสีโทนเดียวกันหรือมีสีโทนคล้ายๆกัน..ใช้ในการสร้างเส้น.. Selcetion เฉพาะพื้นที่


Sriwattana institute of international business and technology

อุปกรณ์ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ Paint Brusเป็นอุปกรณ์สำหรับการวาดภาพและระบายสีซึงลักกษณะการใช้งานจริงๆจะมีให้เลือกใช้หลายตัว


Sriwattana institute of international business and technology

อุปกรณ์ยางลบ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Eraser Tool ) ก็ทำหน้าที่คล้าย..ยางลบนั้นแหละใช้ลบส่วนต่างๆของภาพที่เราไม่ต้องการ


Sriwattana institute of international business and technology

อุปกรณ์โฟกัส ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Blur Tool )เป็นอุปกรณ์ที่ใช้สำหรับปรับค่าความคมชัดของสีภาพซึ่งจะประกอบด้วย Blur, Sharpen เลือกโดยการคลิ๊กเม้าค้างไว้


Sriwattana institute of international business and technology

อุปกรณ์ปากกา ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Pen tool )ใช้ในการสร้างเส้นภาพสำหรับวาดภาพซึ่งจะสร้างเส้นตรงก่อนแล้วดัดให้โค้งตามต้องการ


Sriwattana institute of international business and technology

อุปกรณ์ไล่ระดับสี ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Linear Gradient Tool ) เป็นการระบายสีภาพโดยการไล่เฉดสีที่เราต้องการเมื่อดับเบิ้ลคลิ๊กจะมีให้เลือกหลายลักษณะตามที่เราต้องการ


Sriwattana institute of international business and technology

อุปกรณ์ดูดสี ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ( Eyedropper Tool ) เป็นเครื่องมือในการดูดสีที่มีอยู่ในภาพเพื่อนำสิ่งนั้นไปใช้ในบริเวณอื่นโดยจะถือเป็น Foreground Color


Sriwattana institute of international business and technology

อุปกรณ์แว่นขยาย ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ( Zoom Tool ) ใช้ในกรณีที่เราต้องการที่จะย่อ / ขยายภาพในจอหรือขยายเพื่อจะได้ทำได้ละเอียดมากยิ่งขึ้น


Sriwattana institute of international business and technology

สรุปประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บสรุปประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ

การทำภาพกราฟิกเพื่อใช้ในงานเว็บ มีหลักการเฉพาะแตกต่างไปจากงานสื่อสิ่งพิมพ์ ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้เพียง 72 dpi หรือจำนวนสีที่ใช้แสดงผล เป็นต้น ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช้ PhotoShop สร้างกราฟิกในงานเว็บ จึงเป็นศาสตร์ที่น่าสนใจอีกศาสตร์หนึ่ง


Sriwattana institute of international business and technology


Sriwattana institute of international business and technology

การเปิดไฟล์ภาพ (Open File)

คำสั่งในการเปิดไฟล์ภาพของ PhotoShop มีสองคำสั่ง ได้แก่คำสั่ง File, Open… จะใช้ในกรณีที่ต้องการเปิดดูไฟล์ภาพทุกๆ ฟอร์แมตคำสั่ง File, Open as… ใช้ในกรณีที่ต้องการเปิดดูไฟล์ภาพที่ต้องการระบุนามสกุลของไฟล์


Sriwattana institute of international business and technology

นอกจากนี้สามารถใช้วิธี Double Click บนพื้นที่ว่างๆ ของ Work Area ได้

โปรแกรม PhotoShop เตรียมภาพตัวอย่างไว้ให้เรียกดูจาก Folder ดังนี้


Sriwattana institute of international business and technology

การจัดเก็บภาพ (Save File) สำหรับภาพต้นฉบับ

การบันทึกภาพ หรือจัดเก็บภาพมีข้อพิจารณา 2 ประเด็นคือ การบันทึกภาพต้นฉบับซึ่งภาพลักษณะนี้จะยังคงชั้นของเลเยอร์ไว้ดังเดิม และการบันทึกภาพเพื่อนำไปใช้งานสำหรับงานเว็บ โดยโปรแกรมจะรวมเลเยอร์ที่มีทั้งหมดเป็นชั้นเดียว คือชั้น Backgroundซึ่งมีวิธีการบันทึกแตกต่างกันไป ดังนี้


Sriwattana institute of international business and technology

(ต่อ) สำหรับภาพต้นฉบับ

เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ภาพที่ต้องการ

ปรับแต่งภาพด้วยคำสั่งของ PhotoShop เมื่อปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการ

จัดเก็บภาพโดยจะเลือกฟอร์แมตเป็น .PSD ดังนี้ เลือกคำสั่ง File, Save as สำหรับการจัดเก็บ


Sriwattana institute of international business and technology

(ต่อ) สำหรับภาพต้นฉบับ

งานครั้งแรก หรือ File, Save สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน Save as ดังนี้เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ ตั้งชื่อไฟล์ภาพ เลือกฟอร์แมตภาพเป็น .psdคลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ


Sriwattana institute of international business and technology

เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ ตั้งชื่อไฟล์ภาพ เลือกฟอร์แมตภาพเป็น .psdคลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ


Sriwattana institute of international business and technology

การจัดเก็บภาพ (Save) ในฟอร์แมต JPG

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


Sriwattana institute of international business and technology

(ต่อ) ในฟอร์แมต JPG

เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ภาพที่ต้องการ ปรับแต่งภาพด้วยคำสั่งของ PhotoShop เมื่อปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการจัดเก็บภาพโดยจะเลือกฟอร์แมตเป็น .JPG ดังนี้


Sriwattana institute of international business and technology

(ต่อ) ในฟอร์แมต JPG

เลือกคำสั่ง File, Save สำหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพปรากฏจอภาพโต้ตอบการทำงาน เลือกไดร์ฟและโฟลเดอร์ที่ต้องการเก็บภาพ จากรายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น JPEG (*.JPG, *.JPE) จากรายการ Format


Sriwattana institute of international business and technology

คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ

  • ปรากฏหน้าต่าง JPEG Options ดังนี้

  • กำหนดค่า Quality อันเป็นค่าเกี่ยวกับคุณภาพของภาพ ไว้ประมาณ 5 - 7 ไม่ควรกำหนดค่าไว้มากเกินไปเพราะจะทำให้ไฟล์มีขนาดใหญ่ และทำให้เสียเวลานานในการโหลดภาพจาก Server และไม่ควรกำหนดค่าไว้น้อยมาก เพราะจะทำให้คุณภาพของภาพต่ำ


Sriwattana institute of international business and technology

(ต่อ) เพื่อยืนยันการจัดเก็บภาพ

ภาพที่แสดงไม่คมชัดFormat Options เป็นรายการเลือกเพิ่มเติมสำหรับการนำเสนอไฟล์ภาพ โดย Baseline ("Standard") เป็นตัวเลือกที่ดีที่สุดสำหรับภาพ ที่ต้องการนำเสนอผ่านเว็บเบราเซอร์ เนื่องจากสนับสนุนกับเว็บเบราเซอร์ทุกตัว Baseline Optimized สำหรับการบีบอัดไฟล์ภาพให้มีขนาดเล็กกว่าปกติ แต่ก็ไม่ใช่ทางเลือกที่ดีที่สุด เพราะไม่สามารถแสดงผลได้กับเว็บเบราเซอร์ทุกตัว


Sriwattana institute of international business and technology

(ต่อ) เพื่อยืนยันการจัดเก็บภาพ

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


Sriwattana institute of international business and technology

ไฟล์ภาพฟอร์แมต GIF ก็เป็นอีกหนึ่งฟอร์แมตที่นิยมใช้ในการสร้าง WebPage ปกติจะใช้กับภาพที่มีสีหรือความคมชัดไม่มากนัก โปรแกรม PhotoShop มีวิธีการจัดเก็บภาพให้เป็นฟอร์แมต GIF87 ดังนี้


Sriwattana institute of international business and technology

เปิดโปรแกรม PhotoShopสร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ภาพที่ต้องการ ปรับแต่งภาพ ด้วยคำสั่งของ PhotoShop เมื่อปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการจัดเก็บภาพโดยจะเลือกฟอร์แมตเป็น .GIF ดังนี้


Sriwattana institute of international business and technology

เลือกคำสั่ง File, Save สำหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ จากรายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น CpmpuServe GIF (*.GIF) จากรายการ Format :คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ ปรากฏกรอบโต้ตอบการรวมเลเยอร์


Sriwattana institute of international business and technology

คลิกปุ่ม Ok เพื่อทำการรวมเลเยอร์ ปรากฏกรอบโต้ตอบการกำหนดค่าเกี่ยวกับ Indexed Colorตรวจสอบค่าสี หรือปรับเปลี่ยนตามที่ต้องการ แล้วคลิกปุ่ม OK


Sriwattana institute of international business and technology

ปรากฏกรอบโต้ตอบการตั้งคุณสมบัติของภาพถ้าภาพขนาดเล็ก ให้เลือกเป็น Normal

แต่ถ้าภาพมีขนาดโต ให้เลือกเป็น Interlaced หรือตามต้องการ แล้วคลิกปุ่ม OK


Sriwattana institute of international business and technology

The end… ให้เลือกเป็น Normal

Computer Department