ตัวอย่างการใช้งาน Illustrator ออกแบบเว็บไซต์ (ตอนที่ 1)

Illustrator

    ในบทความนี้จะเป็นการใช้งานโปรแกรม Illustrator ในการออกแบบเว็บไซต์ จะเป็นบทความที่ต่อเนื่องกับ ทดลองใช้ Dreamweaver ทำเว็บเพจ

ขั้นตอนการออกแบบเว็บไซต์ด้วย Illustrator

1.สร้างเอกสารใหม่

    โดยคลิกที่ file > new ดังรูป



เมื่อคลิกที่ new จะมีหน้าต่างสร้างเอกสารใหม่ขึ้นมา มีรายละเอียดดังนี้

    Name ชื่อของเอกสาร

    Size ขนาดมาตราฐานของเอกสาร

    Units หน่วยที่ใช้

    Width ความกว้างของเอกสาร

    Height ความสูงของเอกสาร

    Orientation เอกสารวางแนวตั้ง หรือแนวนอน

    Color Mode มีให้เลือก 2 แบบคือ

        1.CMYK เป็นโหมดสีที่ใช้กับสิ่งพิมพ์

        2.RGB เป็นโหมดสีที่ใช้กับการแสดงผลทางจอภาพเป็นหลัก



เมื่อคลิก ok ก็จะมีเอกสารว่างขึ้นมา

2.การเปิดหน้าต่างที่ซ่อนอยู่

illustrator จะมีหน้าต่างเครื่องมือซ่อนอยู่ ซึ่งสามารถเปิดได้โดยคลิกที่ window และเลือกหน้าต่างที่ต้องการใช้งาน ในบทความนี้จะบอกชื่อเครื่องมือที่ใช้ และให้ผู้อ่านเปิดเครื่องมือได้จาก window ดังภาพ



3.สร้างรูปสี่เหลี่ยม

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



หรือคลิกที่พื้นที่เอกสารจะมีช่องให้กรอกขนาดของช่องสี่เหลี่ยม ดังรูปให้กรอกสี่เหลี่ยมขนาด 800 x 600px



ใส่สีให้รูปสี่เหลี่ยมโดย คลิกเมาส์ที่ tool จะเห็นว่ามีรูปลูกศรสีดำอยู่ เมื่อคลิกที่รูปลูกศร เมาส์จะเปลี่ยนเป็นรูปลูกศรสีดำเช่นเดียวกัน

เมื่อเมาส์เป็นรูปลูกศรแล้วก็ให้คลิกที่รูปสี่เหลี่ยม และไปที่เครื่องมือ tool จะเห็นว่ามีสีอยู่ 2 ชนิดทับกันอยู่ สีที่อยู่ด้านล่างคือสีพื้น สีที่อยู่ด้านบนคือสีขอบ จากนั้นให้คลิกที่เครื่องมือ color ก็จะใส่สีให้สี่เหลี่ยมที่เราวาดขึ้นมาได้



4.สร้างรูปสี่เหลี่ยมแบบมุมมน

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



    สร้างรูปสี่เหลี่ยมมุมมนขนาด 215 x 100px และรูปสี่เหลี่ยมขนาด 215 x 550px เราจะทำการรวมรูปสี่เหลี่ยม 2 อันนี้เข้าด้วยกัน โดยวางสี่เหลี่ยม 2 รูปให้ทับกัน และเลือกเครื่องมือ parthfinder รูปที่สี่เหลี่ยมทับกัน

    เมื่อคลิกแล้วจะได้รูปสี่เหลี่ยมรวมกัน ดังรูปทางขวามือ



ใส่สีให้กับรูปสี่เหลี่ยมผสมโดยคลิกที่รูปสี่เหลี่ยม แล้วไปที่เครื่องมือ Gradient ถ้าต้องการสีใดก็ให้เลือกจาก สีด้านบน