หนึ่งในแอพพลิเคชั่นที่มาพร้อมกับ Microsoft Expression Studio ก็คือแอพพลิเคชั่นที่มีชื่อว่า Microsoft Expression Design ซึ่งทำหน้าที่ในการออกแบบและตกแต่งกราฟิกที่จำเป็นต้องใช้ในการสร้างแอพพลิเคชั่นด้วย XAML ต่อไป ไม่ว่าจะเป็นแอพพลิเคชั่นบนเดสก์ท๊อปเช่น Windows Presentation Foundation (WPF) หรือประเภท Rich Internet Application (RIA) เช่น Silverlight เป็นต้น
ระบบการแสดงผลที่ใช้ในปัจจุบัน และ XAML
เราแบ่งระบบการแสดงผลที่ใช้ในคอมพิวเตอร์ทุกวันนี้เป็นสองแบบ นั่นคือแบบ Raster Graphics และแบบ Vector Graphics กราฟิกแบบ Raster หรือที่รู้จักกันในอีกชื่อที่คุ้นเคยกว่าว่าบิตแมพ ซึ่งเป็นการสร้างภาพจากการนำจุดแต่ละจุดหรือที่เรียกว่าพิกเซลมาเรียงต่อกันในแนวตั้งและแนวนอนบนหน้าจอ พิกเซลแต่ละพิกเซลจะมีค่าสีและความสว่างที่ต่างกันออกไป เมื่อเรียงต่อกันก็จะกลายเป็นภาพที่มีความเหมือนจริงทั้งมิติและรูปทรง อย่างไรก็ดีหากเราบันทึกภาพหรือกราฟิกของเราไว้เป็นแบบบิตแมพ แล้วนำมาย่อหรือขยายภายหลัง จะทำให้เราสูญเสียความละเอียดของภาพไปไม่มากก็น้อย
ทางเลือกของการบันทึกภาพในคอมพิวเตอร์อีกแบบหรือที่เรียกว่าแบบเวกเตอร์ จึงเข้ามาเป็นทางออกของนักออกแบบกราฟิกที่ต้องการเก็บภาพที่สร้างขึ้นในคอมพิวเตอร์ด้วยความละเอียดสูง และสามารถย่อหรือขยายขนาดได้โดยไม่สูญเสียรายละเอียดของภาพ ภาพแบบเวกเตอร์จะถูกเก็บไว้รูปของผลการคำนวณทางคณิตศาสตร์แบบต่างๆ จึงทำให้รายละเอียดของภาพแปรผันไปตามตัวแปรในสูตรคำนวณ ข้อเสียของการเก็บภาพแบบนี้ก็คือ หากภาพมีความละเอียดสูงมาก จะทำให้การประมวลผลช้าลง และรายละเอียดของภาพชนิดภาพถ่ายมักจะต่ำกว่าการเก็บภาพแบบบิตแมพ
XAML มักเก็บภาพในลักษณะสองมิติ (2D) ไว้ในกราฟิกแบบเวกเตอร์ ดังนั้นอินเทอร์เฟสที่สร้างด้วย XAML จึงเป็นอินเทอร์เฟสแบบ Scalable กล่าวคือสามารถย่อขยายขนาดได้ตามขนาดของวินโดว์สหรือคอนเทนเนอร์ที่ห่อหุ้มมันอยู่โดยไม่สูญเสียความละเอียดไป จึงเหมาะกับการสร้างแอพพลิเคชั่นสมัยใหม่ที่ต้องแสดงผลในขนาดหน้าจอของอุปกรณ์ที่มีขนาดต่างๆกันไปนั่นเอง
Expression Design กับการพัฒนาแอพพลิเคชั่นยุคใหม่
ไมโครซอฟท์พัฒนา Expression Design ขึ้นเพื่อให้เป็นเครื่องมือ ที่ใช้ในการออกแบบกราฟิกและภาพประกอบ ที่เหมาะกับอินเทอร์เฟสของแอพพลิเคชั่นทั้งในแบบสำหรับเว็บและเดสก์ท๊อป มันจะมีความสามารถในการสร้างกราฟิกชนิดเวกเตอร์ในระดับที่ละเอียดซับซ้อนได้อย่างรวดเร็ว นอกจากนี้ยังสามารถ Export ไฟล์ชิ้นงานไปยังแอพพลิเคชั่นในกลุ่มเดียวกันอื่นๆ เช่น Expression Blend เพื่อทำงานต่อได้ทั้งในรูปแบบของ XAML และไฟล์กราฟิกแบบบิตแมพ เราสามารถสร้างสรรค์กราฟิกให้สวยงามได้ด้วยเครื่องมือชนิดต่างๆที่เตรียมไว้ให้อย่างเพียบพร้อมสำหรับนักออกแบบ ไม่ว่าจะเป็น Pen Tools, Shape Tools หรือเครื่องมือในการจัดการอื่นตามมาตรฐาน เรายังสามารถเพิ่มสีสันของงานได้ด้วยการเพิ่ม Effect ให้กับส่วนต่างๆของภาพ การปรับแต่ง Workspace ก็ทำได้ง่าย ทำให้นักออกแบบที่คุ้นเคยกับการใช้แอพพลิเคชั่นสำหรับการออกแบบอื่น สามารถเรียนรู้การใช้งานได้โดยใช้เวลาไม่นาน
ส่วนประกอบต่างๆในพื้นที่ทำงาน
พื้นที่ทำงานของนักออกแบบใน Expression Design ประกอบด้วย 5 ส่วนหลักๆ คือ Menu, Toolbox, Art Board, Property Inspector และ Action Bar คำสั่งต่างๆจะถูกเรียงไว้อย่างเป็นระเบียบในส่วนของ Menu เหมือนกับวินโดว์สทั่วไป เพื่อให้เรียนรู้ได้ง่าย เครื่องมือที่ใช้ในการวาดและปรับรูปร่างหน้าตาของวัตถุต่างๆจะอยู่ในส่วนของ Toolbox ส่วนรูปวัตถุที่เรากำลังทำงานจะอยู่ในพื้นที่ตรงกลางในส่วนที่เรียกว่า Art Board เมื่อเรากดเลือกเครื่องมือชิ้นใดชิ้นหนึ่ง คุณสมบัติของเครื่องมือที่เราเลือกจะแสดงขึ้นมาที่ส่วนของ Property Inspector คุณสมบัติเหล่านี้จะเปลี่ยนไปได้เรื่อยๆตามแต่เครื่องมือที่เลือกใช้นั่นเอง
รูปที่ 1 พื้นที่ทำงานของ Expression Design
โปรแกรมจัดการกราฟิกมาตรฐานทั่วไปมักจะอนุญาตให้เราสามารถแบ่งเก็บวัตถุต่างๆที่ประกอบเป็นชิ้นงานของเราแยกกันไว้ได้เป็นชั้นๆ หรือที่เรียกกันว่าเลเยอร์ สำหรับ Expression Design ก็เช่นกัน เราสามารถแยกเก็บส่วนต่างๆของชิ้นงานไว้ในเลเยอร์ที่ต่างกันได้ ในแต่ละเลเยอร์เรายังสามารถแยกเก็บวัตถุต่างๆไว้เป็นกลุ่มได้อีกด้วย การจัดเก็บจึงเป็นระเบียบและง่ายต่อการโยกย้ายวัตถุไปมาระหว่างเลเยอร์ต่างๆ อีกทั้งเรายังสามารถกำหนดให้มีการป้องกันการแก้ไขวัตถุต่างๆในชิ้นงานได้จากการล๊อควัตถุต่างๆที่อยู่ภายในแต่ละเลเยอร์ และหากเราไม่ต้องการใช้งานเลเยอร์นั้นๆ เราก็สามารถซ่อนมันไว้ได้อย่างง่ายดายอีกด้วย
และถ้าหากเราเลือกที่วัตถุชิ้นใดชิ้นหนึ่งใน Art Board แถบพื้นที่ที่เรียกว่า Action Bar จะปรากฎขึ้นที่ส่วนล่างของหน้าจอ Action Bar ทำหน้าที่เป็นเหมือนทางลัดเพื่อช่วยให้เราจัดการตำแหน่งหรือรูปทรงของชิ้นงานได้ง่ายและแม่นยำขึ้น ยกตัวอย่างเช่น เมื่อเราเลือกวัตถุหลายๆชิ้นพร้อมกันในชิ้นงานของเรา เราอาจเลือกตำแหน่งของมันจากพิกัด X, Y บน Art Board, กำหนดความกว้างและความสูงของวัตถุ, องศาที่ใช้ในการหมุน (Rotation), ลักษณะการบิด (Skewing) หรือแม้แต่การจัดเรียงวัตถุหลายๆชิ้นด้วยวิธีต่างๆ เช่น Align, Distribute และ Stack เป็นต้น
รูปที่ 2 ตัวเลือกในการปรับแต่งวัตถุต่างๆใน Action Bar
เมื่อทำความรู้จักส่วนประกอบต่างๆบนพื้นที่ทำงานของ Expression Design กันไปแล้ว ต่อไปเรามาทำความรู้จักกับเครื่องไม้เครื่องมือต่างๆและคุณสมบัติในการทำงานของมันกันบ้างดีกว่า
เครื่องมือต่างๆใน Expression Design
เมื่อลองสำรวจเข้าไปใน Toolbox ของ Expression Design เราจะพบเครื่องมือที่ใช้ในการเลือก, สร้าง, แก้ไขพาธ (Path) การหมุนหรือย่อขยายวัตถุ รวมถึงเครื่องมือที่ใช้ในการนำไปยังจุดต่างๆของชิ้นงาน เช่น แว่นขยายและมือ เป็นต้น เครื่องมือเหล่านี้อาจเป็นเครื่องมือเดี่ยวๆ หรือรวมกันอยู่เป็นกลุ่มได้โดยมีสัญลักษณ์สามเหลี่ยมเล็กๆตรงมุมล่างซ้ายของไอคอนเป็นที่สังเกต หากเรากดเมาส์ค้างไว้ที่บนไอคอนที่มีสัญลักษณ์นี้ เครื่องมือต่างๆที่อยู่ภายในก็จะปรากฏออกมาให้เลือกใช้งาน
รูปที่ 3 เครื่องมือต่างๆใน Toolbox
เครื่องมือกลุ่มแรกที่เราเห็นใน Toolbox คือเครื่องมือกลุ่มที่ใช้ไว้เลือกวัตถุต่างๆ ซึ่งประกอบด้วย Selection Tool, Group Selection Tool, Direct Selection Tool และ Lasso Selection Tool เราใช้เครื่องมือเหล่านี้ไว้เลือกวัตถุด้วยวิธีต่างๆกัน Selection Tool จะเป็นเครื่องมือพื้นฐานที่ใช้เลือกวัตถุทั้งชิ้น เพื่อหมุน, ย่อ, ขยาย หรือย้ายตำแหน่ง ในขณะที่ Group Selection Tool จะใช้เลือกวัตถุที่อยู่ในกลุ่ม ส่วน Direct Selection Tool และ Lasso Selection Tool จะใช้เลือกเฉพาะจุดต่างๆที่ประกอบเป็นพาธหรือรูปทรง
ถัดลงมาเป็นเครื่องมือที่ใช้วาดพาธและรูปทรงต่างๆ เช่น Paintbrush Tool, Pen Tool, Polyline Tool, B-spline Tool, Rectangle Tool, Ellipse Tool, Polygon Tool และ Line Tool เมื่อใช้งานเครื่องมือเหล่านี้จะทำให้เกิดวัตถุที่เป็นพาธหรือรูปทรงต่างๆขึ้นในชิ้นงาน เราสามารถปรับแต่งตำแหน่งและรูปทรงของพาธที่เกิดขึ้นได้ด้วย Direct Selection Tool และ Convert Anchor Point Tool รวมถึงสามารถเพิ่มและลดจุดในพาธได้ด้วย Add Anchor Point Tool และ Delete Anchor Point Tool
เราใช้เครื่องมือ Text Tool ในการใส่ตัวอักษรลงในภาพ เราอาจเลือกป้อนตัวอักษรลงไปบนพื้นที่ว่างหรือกำหนดให้ไหลไปกับพาธโดยการวางบนตำแหน่งต่างๆใน Art Board และยังสามารถปรับแต่งชนิดอักษรและขนาดที่ใช้ ชนิดของเส้นกรอบ สี หรือน้ำหนักของตัวอักษรได้จาก Property Inspector หากต้องการปรับแต่งรูปร่างของตัวอักษรให้ดูมีเอกลักษณ์ยิ่งขึ้น เราก็สามารถแปลงชุดตัวอักษรให้เป็นพาธได้ด้วยคำสั่ง เช่น Convert Object to Path อีกด้วย
เครื่องมืออื่นๆที่ยังไม่ได้กล่าวถึงใน Toolbox เช่น Fill Transform, Gradient Transform, Scissors, Reverse Path, Start Point, Color Dropper, Attribute Dropper, Pan หรือ Zoom ล้วนมีส่วนช่วยให้การทำงานใน Expression Design สะดวกสบายขึ้น เราสามารถใช้ Gradient Transform ในการปรับทิศทางของการไล่เฉดสี และใช้ Attribute Dropper ในการกำหนดแอททริบิวต์ของวัตถุหนึ่งให้เหมือนกับอีกวัตถุหนึ่ง เครื่องมือที่ใช้บ่อย เช่น Pan และ Zoom หรือแม้แต่เครื่องมือพื้นฐานทั่วไปล้วนเรียกมาใช้งานได้ด้วย Keyboard Shortcuts ซึ่งจะแสดงให้เห็นเมื่อเอาเมาส์ไปวางบนไอคอนของเครื่องมือแต่ละชนิด
Bezier Path และ B-spline Path
พาธนั้นเกิดจากการกำหนดจุดมากกว่าหนึ่งจุดขึ้นไปลงใน Art Board พาธที่เกิดขึ้นจากเครื่องมือวาดภาพใน Expression Design แบ่งออกได้เป็นสองชนิด คือ Bezier Path และ B-spline Path โดยทั่วไปเราใช้เครื่องมือ เช่น Direct Selection Tool ในการจัดการพาธทั้งสองแบบนี้ได้เช่นเดียวกัน Bezier Path นั้นเกิดจากการใช้เครื่องมือประเภท Pen Tool, Polyline Tool หรือ Shape Tool ในการสร้าง ส่วน B-spline Path จะเกิดจากการใช้ B-spline Tool เป็นตัวกำหนดจุด ส่วนมากนักออกแบบมักคุ้นเคยกับ Bezier Path มากกว่า B-spline Path เนื่องจากมีการใช้งานอย่างแพร่หลายในกราฟิกแอพพลิเคชั่นทั่วไปอยู่แล้ว ส่วน B-spline Path มักพบใช้งานในกราฟิกแอพพลิเคชั่นประเภทสามมิติมากกว่า อย่างไรก็ดีมีนักออกแบบหลายท่านที่พบว่าการลากเส้นด้วย B-spline Tool นั้นถนัดมือมากกว่า เนื่องจากควบคุมส่วนโค้งต่างๆได้ง่ายกว่า ซึ่งเรื่องนี้ก็คงต้องขึ้นอยู่กับความถนัดของแต่ละคน
รูปที่ 4 Bezier Path และ B-spline Path
Bezier Path จะประกอบด้วยจุด (Points / Nodes) และแขนที่กางออกไปจากจุดที่เราเรียกกันว่า Handle เราใช้ Direct Selection Tool และ Convert Anchor Point Tool ในการควบคุมส่วนโค้งของพาธ และกำหนดการหักมุมของพาธ ณ จุดที่ต้องการ หากเราต้องการให้พาธโค้งไปทางใด ให้ลาก Handle ไปในทางตรงกันข้าม ยิ่งแกนของ Handle มีความยาวมาก เส้นพาธก็จะยิ่งโค้งมากขึ้นตามไปด้วย ในทางกลับกัน B-spline Path จะประกอบขึ้นจากจุดต่างๆซึ่งมักอยู่ในตำแหน่งยอดของส่วนโค้ง หากต้องการให้โค้งมากขึ้น ก็ต้องใช้ Direct Selection Tool ในการย้ายตำแหน่งของจุดเพื่อให้เกิดความโค้งหรือเป็นรูปทรงตามต้องการ
ภาพแบบ Bitmap และ Pixel Preview
เนื่องจาก Expression Design เน้นการตกแต่งกราฟิกในแบบเวกเตอร์เป็นหลัก ดังนั้นก่อนที่จะนำชิ้นงานไปใช้ในแอพพลิเคชั่นอื่น อาจจะต้องทำการส่งออกโดยแปลงกราฟิกให้กลายเป็นแบบบิตแมพเสียก่อน ซึ่งบางครั้งอาจต้องทำการปรับแต่งตัวเลือกที่ใช้ในการส่งออกเพื่อให้เหมาะสมกับคุณภาพของกราฟิกที่ต้องการ ในการทำงานจริงหากต้องทำการส่งออกแล้วเปิดไฟล์กราฟิกที่ได้ขึ้นมาตรวจสอบทุกครั้งอาจเป็นการเสียเวลามาก Expression Design จึงมาพร้อมกับฟีเจอร์ที่เรียกว่า Pixel Preview ที่จะช่วยให้เราสามารถตรวจสอบการแสดงผลกราฟิกของเราในแบบบิตแมพได้ ก่อนที่เราจะทำการส่งออกจริง Pixel Preview จะเสนอตัวเลือกในการส่งออกก่อนจะแสดงภาพตัวอย่างที่มีคุณภาพตามแบบตัวเลือกที่เราเลือกใน Art Board แทนที่ภาพต้นฉบับของเรา ทั้งนี้เพื่อให้เราได้ตรวจสอบและปรับค่าต่างๆให้เหมาะสมก่อนการส่งออกจริงนั่นเอง เราสามารถปรับเปลี่ยนค่าเหล่านี้กี่ครั้งก็ได้ตามความต้องการ โดยที่จะไม่มีผลกระทบใดๆกับภาพต้นฉบับของเราเลย
รูปที่ 5 การใช้งาน Pixel Preview
ตกแต่งกราฟิกให้เก๋ด้วย Live Effects
เราสามารถกำหนด Effects หรือที่เรียกอีกอย่างว่า Filters ให้กับกราฟิกประเภทต่างๆได้ โดยการเพิ่ม Effect ต่างๆเข้าไปในช่อง Effects ใน Property Inspector ของวัตถุที่เลือก Effects เหล่านี้มีทั้งที่เป็นประเภทที่ใช้งานบ่อย เช่น Drop Shadow และ Gaussian Blur เป็นต้น และประเภทที่เป็นเชิงศิลป์ เช่น Film Grain, Bas Relief, Graphic Pen และ Note Paper เป็นต้น
รูปที่ 6 ปุ่มที่เกิดจากการใช้งาน Live Effects
Effects ต่างๆที่กำหนดให้กับวัตถุใน Expression Design จะไม่ทำการเปลี่ยนแปลงต้นแบบ ดังนั้นมันจึงเรียกว่า Live Effects ซึ่งหมายความว่านักออกแบบสามารถที่จะปรับค่าของ Effect, ซ่อนมัน หรือเอามันออกได้ตลอดเวลา นักออกแบบยังสามารถจัดเรียงลำดับของการกำหนดค่า Effects และสลับลำดับของมันเพื่อให้เกิดการแสดงผลที่แตกต่างออกไปได้เช่นกัน
ส่งชิ้นงานออกไปใช้ในรูปแบบ XAML
หลังจากสร้างหรือปรับปรุงกราฟิกเสร็จสิ้นแล้ว เราอาจเลือกส่งออกชิ้นงานของเราเพื่อไปใช้งานต่อในแอพพลิเคชั่นอื่นๆได้หลายรูปแบบ หากต้องการนำไปใช้ประกอบในแอพพลิเคชั่นที่สร้างด้วย Windows Presentation Foundation (WPF) หรือ Silverlight ก็สามารถทำได้โดยการเลือก Export จากเมนู File แล้วจึงเลือก Xaml เป็นชนิดของไฟล์ที่จะส่งออก จากนั้นเราจะสามารถเลือกชนิดของการส่งออกได้ว่าจะเก็บภาพเป็นแบบ Canvas, Resource Dictionary หรือ Silverlight อีกทั้งเรายังสามารถเลือกได้ด้วยว่าจะแปลง Live Effects ต่างๆให้เป็นบิตแมพด้วยหรือไม่ก่อนจะเริ่มต้นการส่งออก ภาพที่ส่งออกจะถูกแปลงให้เป็นโค้ด Xaml ซึ่งจะแสดงตัวอย่างให้ดูหากเรากดที่แท็ป Xaml ข้างหน้าต่างพรีวิว จากนั้นเราจึงเอาไฟล์ Xaml ที่ได้ไปเปิดใช้งานในแอพพลิเคชั่นอื่นๆ เช่น Expression Blend ต่อไป
รูปที่ 7 หลากหลายตัวเลือกในการส่งออกแบบ Xaml
บทสรุป
Expression Design เป็นแอพพลิเคชั่นในชุด Microsoft Expression Studio ที่ใช้ในการจัดการกราฟิกสำหรับการสร้างแอพพลิเคชั่นทั้งในแบบเวกเตอร์และบิตแมพ ด้วยเครื่องมือที่เพียบพร้อมทำให้มันเป็นแอพพลิเคชั่นที่ใช้งานง่าย และจะช่วยประหยัดเวลาให้นักออกแบบ เมื่อปรับแต่งกราฟิกต่างๆเสร็จก็สามารถส่งออกไปในรูปแบบของไฟล์ Xaml ซึ่งเป็นรูปแบบมาตรฐานที่จะนำไปใช้ได้ทันทีในแอพพลิเคชั่นแวดล้อมอื่นๆ เช่น Expression Blend เป็นต้น ด้วยความสามารถอันโดดเด่นนี้ทำให้ Expression Design เป็นแอพพลิเคชั่นหนึ่งที่น่าติดตั้งไว้ใช้งาน หากคุณเป็นนักออกแบบหรือนักพัฒนาคนหนึ่งซึ่งต้องการผลิตชิ้นงานกราฟิกดีๆสำหรับ WPF หรือ Silverlight แอพพลิเคชั่นของคุณ
แหล่งข้อมูลเพิ่มเติม