หน่วยที่-8-การปรับมุมมองการทำงานและการใช้เครื่องมือพื้นฐานใน-Illustrator-11-16

หน่วยที่ 8 การปรับมมุ มองการทางานและการใชเ้ ครื่องมือ พ้นื ฐานใน Illustrator หวั ข้อเรอ่ื ง (Topics) 8.1 การกาหนดมุมมองหน้าต่างของโปรแกรมให้เหมาะสมกบั การทางาน 8.2 การทางานกับสี 8.3 การเลอื กใช้สี 8.4 การเทสี 8.5 การระบายสี 8.6 การลบสว่ นประกอบในภาพท่ีไม่ต้องการ 8.7 การใสข่ ้อความขั้นเบือ้ งต้น 8.8 ยอ้ นกลบั การทางานในข้ันลา่ สุด 8.9 ตดั วตั ถุบางสว่ นท่ีต้องการโดยใช้ Crop Tool 8.10 การปรบั เปลี่ยนขนาดภาพ แนวคดิ สาคญั (Main Idea) ในการทางานบนหน้าต่างของ Illustrator น้นั สามารถเปล่ียนมมุ มองตามสภาพการทางานทีเ่ หมาะสม อกี ทั้งเรายังสามารถขยายและย่อภาพได้ เพ่ือปรบั เปล่ียนมมุ มองใหช้ ัดเจนและมองโดยภาพรวมในหนว่ ยการ เรยี นน้จี ึงต้องเรียนรูถ้ ึงเครื่องมือพ้ืนฐานสกู่ ารตกแต่งภาพในหนว่ ยการเรียนต่อ ๆ ไป สมรรถนะย่อย (Element of Competency) ใช้องคป์ ระกอบศลิ ปส์ าหรับงานคอมพิวเตอร์ จดุ ประสงคก์ ารปฏิบัติ (Performance Objectives) 1. กาหนดมมุ มองหน้าต่างของโปรแกรมใหเ้ หมาะสมกับการทางาน 2. ย่อและขยายภาพ 3. จดั วางหน้าต่างให้เหมาะสมกับการทางาน 4. เลอื กใชส้ ีและระบายสีเบ้อื งตน้ 5. ลบ เปลี่ยนขนาด ตดั พ้ืนท่ีภายในภาพ

8.1 การกาหนดมมุ มองหนา้ ตา่ งของโปรแกรมใหเ้ หมาะสมกับการทางาน ในการสรา้ งและตกแต่งชิ้นงาน เราสามารถปรบั มุมมองของการทางานไดห้ ลายรูปแบบตามความถนดั ในการใชง้ าน ดงั นี้ 8.1.1 กาหนดมุมมองโดยการรวมของภาพ ปกตไิ ฟลช์ น้ิ งานถูกแสดงภายในกรอบหนา้ ต่างของโปรแกรม ซ่งึ เราสามารถเปลย่ี นมุมมองให้เป็นแบบ อื่นได้ เพือ่ ใหม้ พี ้ืนทใ่ี นงานทางานขน้ึ โดยคลกิ กาหนดกล่องมุมมองได้จากกล่องเคร่อื งมือ ซงึ่ มีใหเ้ ลอื ก ดงั น้ี 1. Normal Screen เป็นสว่ นหน้าต่างปกติ Illustrator โดยจะแสดงสว่ นประกอบครบถว้ น 2. Full Screen Mode with Menu Bar เปน็ หนา้ ต่างทีจ่ ะแสดงชิ้นงานเตม็ พื้นที่แตย่ งั มีเมนู เคร่อื งมือออกจากมมุ มอง 3. Full Screen Mode เป็นหนา้ ตา่ งทแี่ สดงชน้ิ งานเตม็ พน้ื ทีไ่ ม่มีเมนูบาร์ ไม่มีกลอ่ งเคร่ืองมือออก จากมุมมอง 8.1.2 กาหนดมุมมองท่ัวไปของภาพ เราสามารถกาหนดใหแ้ สดงชิ้นงานในรปู แบบที่ต้องการได้ โดยเลือกเมนู View ซงึ่ มีรูปแบบใหเ้ ลอื ก ดังนี รูปที่ 8.1 คาสง่ั กาหนดมุมมอง 8.1.3 การซูมขยาย-ยอ่ ภาพ ผ้ใู ชส้ ามารถใช้เครอื่ งมือแวน่ ขยายที่ช่วยขยายชนิ้ งานให้สามารถตกแต่งได้อย่างละเอียดมากขึ้น และ ยงั สามารถย่อขยายภาพช้ินงานให้เลก็ ลงเพ่ือดูภาพโดยรวมอกี ดว้ ย การซมู ภาพ ผ้ใู ชส้ ามารถขยายภาพทน่ี ามาให้ดูชัดเจนข้นึ โดยการใชเ้ คร่องมือ Zoom Tool ดงั น้ี 1. คลกิ เลือกที่เครื่องมอื Zoom Tool 2. คลกิ เลือกบริเวณที่ต้องการ Zoom Tool 3. ภาพจะถูกขยายใหญข่ ึน้ 1

23 รปู ท่ี 8.2 เคร่อื งมือ การซมู ขยาย-ยอ่ ขยาย ถา้ ตอ้ งการขยายเฉพาะบางท่ี ก็สามารถทาได้เหมือนกัน โดยลากเมาส์ครอบเฉพาะที่ท่ตี ้องการแบบนี้ 1. ลากเมาส์ครอบพื้นที่ทเ่ี ราต้องการ 2. ขยายเฉพาะพ้นื ทีท่ ี่เลือกเอาไว้ การย่อภาพ เมือ่ ต้องการย่อยภาพใหเ้ ลก็ ลง ให้กดคยี ์ <Alt>+คลิกเมาสบ์ นภาพ จากนนั้ ภาพ จะค่อย ๆ ย่อให้เล็กลงตามจานวนคร้งั ทค่ี ลิกเมาส์ รปู ที่ 8.3 การซมู ขยาย-ยอ่ ภาพโดยใชค้ ีย์ <Alt>+คลิกเมาส์บนภาพ 8.1.4 เล่ือนวัตถุทม่ี ีขนาดใหญ่ ภาพบางภาพมขี นาดใหญไ่ ม่สามารถมองเหน็ ทุกสว่ นของภาพ เรามาสารถเล่ือนดูภาพภายในหน้าจอ โดยตอ้ งอาศยั แถบเล่ือน ( Scrollbar ) เล่อื นดภู าพช้ินงานหรอื จะใชเ้ ครื่องมือ Hand Tool ก็ได้ 1. คลิกเลอื กเครื่องมือ 2. คลิกลากเมาส์เลื่อนภาพ 3. ภาพจะถูกเลื่อนตามทล่ี ากจนกวา่ จะปล่อยเมาส์ รปู ท่ี 8.4 เล่ือนวัตถุ 8.1.5 กาหนดมุมมองด้วยตัววัตถุ Navigator พาเนล Navigator ในขณะที่ย่อขยายภาพ สามารถดูภาพทงั้ หมดและบริเวณโดยรอบได้ โดยใช้ คาสง่ั Window> Navigator เพ่อื เปิดพาเนล Navigator

รปู ท่ี 8.5 คาสง่ั กาหนดมมุ มองภาพ 8.1.6 กาหนดมุมมองของภาพเมื่อเปดิ ภาพหลายภาพพรอ้ มกัน เม่อื ต้องการเปดิ ใช้งานไฟล์หลายไฟล์พรอ้ มกนั เชน่ การตัดภาพจากไฟล์หนง่ึ ไปวางบนภาพอกี ไฟล์ หนง่ึ เพื่องา่ ยต่อการใช้งาน เราสามารถจดั เรยี งมมุ มองของไฟล์ใหม่ โดยเลือกใช้เมนูคาสง่ั Mode >Arrange  Tile เปน็ การจดั เรียงหนา้ ตา่ งทแ่ี ยกตัวออกจากกรอบโปรแกรม ใหเ้ รียงชดิ กนั  Float Window เปน็ การดงึ หนา้ ต่างทเี่ ลือกให้แยกตัวออกจากกรอบโปรแกรม  Float All in Windows เป็นการดงึ ทุกหนา้ ต่างใหแ้ ยกตวั ออกจากกรอบโปรแกรม  Consolidate All in Windows เป็นการดึงทุกหน้าต่างใหเ้ ชอื่ มติดกบั กรอบโปรแกรม 8.2 การทางานกับสี เมอ่ื กาหนดขนาดชิน้ งานเรียบรอ้ ย ก่อนท่จี ะทาการลงสพี ื้นหลังกอ่ นทาชิ้นงาน เราจะมาเร่ิมตน้ รจู้ กั กบั มากาหนดสโี ดยวิธีสะดวกทสี่ ุด เพราะสามารถเลอื กสไี ด้ทนั ทจี ากกลอ่ งเครอ่ื งมือ การเลอื กสีจากเครอื่ งมือ 1. สพี ื้น (Fill) และสีเส้น (Stroke) เป็นการกาหนดสีพนื้ และสีเสน้ ขอบของวตั ถุ 2. สีพ้นื ฐานของโปรแกรม (Default Color) เปน็ การเปลยี่ นสพี ้นื และสเี ส้นขอบของวตั ถุให้กลบั มาเป็นสี พื้นฐาน คอื สีพื้นเปน็ สขี าวและสเี สน้ ขอบเป็นสีดา 3. สลบั สีพน้ื และสเี สน้ (Swap Fill and Stroke ) คลกิ เมาสท์ ่ี เพอี่ สลบั สีพน้ื และสีเสน้ ขอบของ วตั ถุ

8.3 การเลอื กใช้สี การเลอื กใชส้ ี มวี ิธกี ารเลือกสี 3 วธิ ี ได้แก่ การเลือกจาก Color Picker พาเนล Color พาเนล Swatches เลือกสจี าก Color Picker Color Picker เปรยี บไดก้ ับจานสีขนาดใหญ่ที่มนี บั ลา้ น ๆ สใี ห้เราเลอื ก โดยเลอื กตามสเปคตรัมสที ี่ ปรากฏหรือตามกาหนดค่าเป็นตวั เลข ซง่ึ เปน็ วธิ ีการทนี่ ยิ มใชก้ ันมากในการเลือกสรี ายละเอยี ดการใช้ Color Picker มีดังน้ี 1. คลกิ เลอื กวัตถุด้วย Selection Tool 2.ดับเบลิ คลิกทสี่ ีพ้นื หรือสีเส้นขอบ จะปรากฏหน้าต่าง Color Picker 3. คลกิ เลอื กสไลดเ์ พื่อเลือกโคนสี ซ่งึ จะมีสีแม่หลัก ๆ ไล่สีให้เราเลอื ก 4. คลกิ เลือกเฉดสี หรอื พิมพ์ค่าสีแบบเจาะลงช่อง RGB, CMYK,HSB หรอื ช่อง # 13 2 45 รปู ที่ 8.6 เลือกสีจาก Color Picker 8.3.2 เลอื กสจี ากพาเนล Color ในการกาหนดคา่ สพี ื้นและสเี ส้น โดยคลิกเลอื กวตั ถุท่ตี ้องการ เลื่อนสไลด์เพื่อระบุสีหรือเคร่ืองมือ ดดู สที ี่ตอ้ งการสเปคตรัม หรือกาหนดค่าสีท่ี 0 ใชเ้ มนูคาส่งั Window> Color เปดิ พาเนลนี้ รูปท่ี 8.7 เลือกสจี ากพาเนล Color

8.3.3 เลือกสีจากพาเนล Swatches พาเนล Swatches ตา่ งจาก พาเนล Color ตรงที่ Swatches เปน็ เหมือนจานสสี ว่ นตวั ของเราโดย ใช้สที ี่ผสมแลว้ ถูกใจ หรือต้องการนามาใชง้ านอีก โดยให้คลกิ เลอื กวัตถทุ ่ีต้องการจากน้ันคลกิ เลือกกาหนดสี พนื้ หรอื สเี สน้ และคลกิ เลือกสที พี่ าเนล Swatches ได้เลย หรอื คาสง่ั Window > Swatches เปดิ พาเนล นี้ รูปท่ี 8.8 เลือกสจี ากพาเนล Swatches 8.4 การเทสี 8.1.4 การเทสี Live Paint Bucket การเทสดี ้วยถงั สี Live Paint Bucket เป็นเครื่องมือที่ใชใ้ สว่ ตั ถุในกล่มุ Live Paint Group โดยสามารถใส่สกี ับพื้นและขอบได้ เราสามารถเติมสีด้วย Live Paint Bucker ได้ดงั นี้ 1. คลิกเลือก Live Paint Bucket 2. คลกิ เลือกที่จะใชเ้ ป็นพ้ืนสี 3. เมื่อเลื่อนเมาส์ไปที่พ้นื ท่ีของวตั ถุ เมาสจ์ ะเปล่ยี นเป็นรปู และคลิกเทสีไปบนพื้นทที่ ต่ี ้องการ 4. กดคีย์ <Alt> และคลกิ เลือกสที ี่จะใชเ้ ป็นสีเสน้ ขอบ 5. กดคยี ์ <Shift> ค้างไว้ เม่ือเลอื่ นเมาสไ์ ปที่เสน้ ขอบของวตั ถุ เมาสจ์ ะเปลีย่ นเปน็ รูป และคลิกเทสีไปบนเส้น ขอบที่ต้องการ

รูปที่ 8.9 การเทสี 8.4.2 การเทสดี ้วยการไล่เฉดสี (Gradient Tool) Gradient Tool เปน็ คาสงั่ ท่ใี ช้ระบายสีแบบไลโ่ ทนสีจากสหี น่งึ ไปยงั อกี สหี นึง่ ซ่งึ เราสามารถกาหนดสี แต่ละช่วงทใ่ี ช้ และมุมของการไล่โทนสไี ดอ้ ีกด้วย โดยจะใช้งานควบคู่กนั ระหว่างพาเนล Gradient และ Gradient Tool และการกาหนดทิศทาง และการกระจายตัวของการไลโ่ ทนสีตามต้องงการมีดังนี้ 1. คลิกเลือกวตั ถุดว้ ย Selection Tool 2. คลกิ เลือกไอคอน Gradient Tool 3. คลิกเลือกเพือ่ เปล่ยี นจุดศูนยก์ ลางและการกระจายตวั ของสีใหม่ รูปท่ี 8.10 การเทสีด้วยการไลเ่ ฉดสี (Gradient Tool) 8.5 การระบายสี 8.5.1 การระบายสดี ้วยพู่กัน การระบายสดี ว้ ยพกู่ ัน เปน็ การวาดเฉพาะเสน้ โครงรา่ งด้วย Paintbrush Tool ซงึ่ เปน็ เหมือนพู่กัน และสามารถเปลี่ยนหัวพูก่ นั ได้ โดยจะใชง้ านควบคู่ไปกับพาเนล Brushes เราสามารถเปิดใช้งานพาเนล Brushes ไดโ้ ดยเลือกเมนคู าสงั่ Window > Brushes และมรี ปู แบบการใชง้ านใหเ้ ลือกใชไ้ ดอ้ ย่างมากมาย ดังนี้ 1. คลกิ เมาสเ์ ลือก Paintbrush Tool เพอื่ ระบายสีด้วยพกู่ ัน 2. คลกิ เลอื กรปู แบบหวั พู่กัน 3. คลกิ เมาสว์ าดรูปแบบของหวั พ่กู นั ลงตามความตอ้ งการ

2 3 1 รปู ท่ี 8.11 การระบายสดี ว้ ยพูก่ ัน 8.6 การลบส่วนประกอบในภาพท่ไี ม่ตอ้ งการ ใชใ้ นกรณีท่ตี ้องการลบสงิ่ ทีว่ าดผิดพราด ซ่งึ มหี ลักสาคัญ 2 ขอ้ คือ 1. ถา้ มกี ารเลอื กวัตถุ เครื่องมอื นจี้ ะลบเฉพาะวตั ถุท่ถี ูกเลือก วตั ถทุ ี่อยู่ใกล้ ๆ จะไมถ่ ูกลบแม้จะลาก เมาส์ไปโดนกต็ าม 2. ถา้ ไม่มกี ารเลอื กวัตถุใดเลย เคร่อื งมือน้จี ะลบทกุ วัตถุท่ีเมาสล์ ากผ่าน 8.7 การใส่ข้อความขั้นเบ้ืองต้น งานกราฟิกสว่ นใหญ่ จะมีการออกแบบข้อความเพ่ือการสรา้ งจดุ สนใจดึงดูด ในหวั ข้อนี้ เราจะใส่ ขอ้ ความเบอ้ื งตน้ เพื่อประกอบชนิ้ งานตามตวั อยา่ งดา้ นลา่ งน้ี 1 2 Artwork Design รูปท่ี 8.12 เคร่ืองมือใสข่ อ้ ความ 8.8 ย้อนกลับการทางานในข้นั ตอนลา่ สุด เม่ือทางานผิดพราด สามารถยกเลกิ คาส่ัง โดยใชเ้ มนูคาส่ัง Edit > Undo… (เลิกทา) หรอื กดปมุ่ <Ctrl + Z> ถา้ ต้องการยกเลิกหลาย ๆ คร้ังใหท้ าการกดปุ่ม <Ctrl + Z> ถ้าตอ้ งการยกเลิกหลาย ๆ ครั้งใหท้ าการกด ปมุ่ <Ctrl + Z> หลาย ๆ ครงั้ ตามจานวนทต่ี ้องการ

รูปท่ี 8.13 คาส่ังย้อนกลบั การทางาน 8.9 ตดั วตั ถุบางส่วนที่ต้องการโดยใช้ Crop Tool ผใู้ ชส้ ามารถเลอื กแสดงภาพเพยี งบางสว่ นได้ ดว้ ยการตดั หรอื มาร์ก (Mask) บางส่วนทีไ่ มต่ ้องการใช้ ออกไป (ซง่ึ วธิ กี ารนคี้ ล้าย ๆ กบั การครอปใน Photoshop) โดยทภ่ี าพตน้ ฉบบั เดิมจะไม่ถกู ตดั ทิ้งไปจริง ๆ เรา สามารถทาได้ท้งั ภาพท่ีถูกลิงค์และไมถ่ กู ลิงค์ 1. คลกิ เลอื กภาพ 2. คลกิ ป่มุ บนคอนโทรลพาเนล 3. คลิกเมาสเ์ ลือกเครอ่ื งมือ Free Transform แลว้ ชเ้ี มาสท์ จ่ี ุดใดจุดหน่ึงบน Bounding Box ลากเขา้ ด้านใน เพ่ือลบพื้นทสี่ ่วนที่ไม่ต้องการออก รูปที่ 8.14 เครือ่ งมือการตัดวตั ถุ

8.10 การปรบั เปลยี่ นขนาดภาพ การปรับเปลีย่ นขนาดของภาพให้ใหญ่หรือเล็กลงนนั้ โดยปกตจิ ะสามารถใช้เครอ่ื งมือ Selection คลกิ ลากเพื่อปรบั เปลย่ี นได้ แต่นอกจากน้ียังมเี ครอื่ งมือ Scale ท่ชี ว่ ยใหส้ ามารถเลือกตาแหนง่ ที่จะวางจุดยึดรปู (Reference Point) ได้อย่างอิสระ (ใชเ้ พื่อตรงึ ภาพบริเวณนั้นใหอ้ ยกู่ บั ท่ีขณะปรับเปลี่ยนขนาด) ซึ่งปกติแล้วจุด ยึดจะอยู่กลางภาพเลือกภาพทตี่ อ้ งการปรับเปลี่ยนขนาด 1. คลิกเลอื กเครื่องมือ Scale (ถา้ ตอ้ งการ) ใช้เมาส์รูป 2. คลิกเพื่อวางจดุ ยึด 3. คลกิ ลากเข้าดานในเพอื่ ย่อหรือคลกิ ลากออกด้านนอกเพื่อทาการเปลีย่ นขนาดของภาพ รูปท่ี 8.15 เคร่ืองมือปรบั ขนาด สรปุ สาระสาคัญ ในหนว่ ยการเรียนน้ที าให้เราเขา้ ถงึ การปรับมุมมองการทางาน เพื่อสามารถทางานในการตกแตง่ ภาพ ได้อยา่ งสะดวก การทางานกับสี และเครื่องมอื พื้นฐานในการใชง้ านต่าง ๆ ที่ต้องเรียนรู้ก่อนทจี่ ะไปทางาน กราฟิกโปรแกรม Illustrator

แบบฝึกหัดหนว่ ยท่ี 8 การปรบั มมุ มองการทางานและการใช้เครอ่ื งมอื พน้ื ฐาน ใน Illustrator คาสั่ง จงตอบคาถามตอ่ ไปนี้ใหส้ มบรู ณ์ การใชเ้ ครอื่ งมือพน้ื ฐาน Illustrator เพื่อปฏบิ ตั ิการตอ่ ไปน้ี มวี ิธีอย่างไร 1. การยอ่ และขยายภาพ ............................................................................................................................. ................................................. ............................................................................................................................. ................................................. .............................................................................................................................................................................. ............................................................................................................................. .................. 2. การเลอื กใช้สแี ละระบายสี ............................................................................................................................. ................................................. .............................................................................................................................................................................. ............................................................................................................................. ................................................. ............................................................................................................................. .................. 3. การใสข่ ้อความลงในภาพ .............................................................................................................................................................................. ............................................................................................................................. ................................................. ............................................................................................................................. ................................................. ................................................................................................................................................ 4.การตัดบางสว่ นของภาพ ............................................................................................................................. ................................................. ............................................................................................................................. ................................................. ........................................................................................................................................................................ ...... ............................................................................................................................. ................... 5. การปรบั ขนาดของภาพ ............................................................................................................................. ................................................. ...................................................................................................................................................................... ........ ........................................................................................................................... .......................

กจิ กรรมหน่วยท่ี 8 การปรบั มมุ มองการทางานและการใชเ้ ครอ่ื งมอื พ้ืนฐานใน Illustrator จดุ ประสงคก์ ารปฏิบัติ ปรับมุมมองการทางานและการใชเ้ ครอ่ื งมือพน้ื ฐานใน Illustrator การทากจิ กรรม 1. เลือกรปู ภาพแล้วนาภาพมาย่อ – ขยาย ตกแต่งใหส้ แี ละใสข่ อ้ ความ 2. สง่ ครูสอนเมอ่ื งานแล้วเสรจ็ สมบูรณ์

แบบทดสอบหลังเรียนหน่วยท่ี 8 การปรบั มุมมองการทางานและการใช้เครื่องมือพ้นื ฐานใน Illustrator คาสัง่ จงทาเครอ่ื งหมายกากบาท (X) ทบั ข้อทถี่ กู ต้อง 1. หน้าตา่ งที่แสดงชนิ้ งานเต็มพนื้ ที่แตย่ ังมีเมนูบารอ์ ยู่คือมุมมองใด ก. Normal Screen Mode ข. Full Screen Mode with Menu Bar ค. Full Screen Mode ง. Navigator 2. การเลื่อนดูภาพที่ขนาดใหญ่ควรใชเ้ คร่ืองใด ก. Title bar ข. Menu Bar ค. Scrollbar ง. Status 3. การซมู ยอ่ -ขยายภาพ ตรงกับข้อใด ก. Panel ข. Pane Tool ค. Zoom Tool ง. Toolbox 4. การย่อภาพโดยการใชค้ ยี ์ลัดควรใช้ป่มุ ใดในแป้นพิมพใ์ นการยอ่ ภาพใหม้ ีขนาดสดั สว่ น ก. Alt ข. Ctrl ค. Shift ง. Backspace 5. การเปดิ ไฟลร์ ปู ภาพสามารถเปิดได้โดยคาสั่งใด ก. New ข. Open ค. Edit ง. Filter

6. การเรยี งมมุ มองเของไฟล์ใหม่ตอ้ งใชเ้ มนคู าสง่ั ใด ก. Window> Navigator ข. Window > color ค. Window > Brushes ง. Backspace 7. การกาหนดใหแ้ สดงชิ้นงานตามรูปแบบท่ีต้องการควรใช้เมนูคาสงั่ ใด ก.File ข. View ค. Edit ง. Window 8. การกดคยี ล์ บั เพื่อทาการย้อนกลับการทางานกลบั ไปท่ีข้ันตอนล่าสุดคืออะไร ก. <Alt+Shift> ข. <Ctrl+Y> ค. <Ctrl+Z> ง. <Alt+Y> 9. การตดั ภาพบางส่วนท่ตี ้องการใช้ เราควรใช้เครือ่ งมือชนดิ ใดชว่ งในการทาวธิ ดี ังกลา่ ว ก. Cut ข. Copy ค. Click ง. Crop 10. ส่วนประกอบสว่ นใดของโปรแกรม Illustrator CS5 ทปึ่ รบั เปลีย่ นไปตามเครอื่ งมอื ท่ีใช้ ก. ออปช่ันบาร์ ข. เมนูบาร์ ค. พาเนล ง. ไตเตลิ บาร์