สร้างปุ่มกดด้วย Inkscape (2)

ต่อจากของเดิม
http://surapongu.blogspot.com/2008/06/inkscape.html

เราจะเพิ่มการตกแต่งสักหน่อย โดยอ้างอิงจากรูปนี้

ขั้นตอน
1. สร้างรูปให้ได้ตามกำหนด
2. Duplicate พื้นสีน้ำเงิน เปลี่ยนเป็นสีขาว กำหนดไล่สีจากสว่างมากไปสว่างน้อย แล้วลากไปวางไว้ที่ส่วนบนของปุ่ม ขั้นตอนนี้อาจต้องลองผิดลองถูกจนกว่าจะได้สีตามต้องการ
3. Duplicate พื้นสีน้ำเงิน เปลี่ยนเป็นสีขาว กำหนด blur ให้สูงๆ ลากมาวางที่ส่วนล่างของปุ่ม

4. เอาตัวหนังสือมาวาง ก็เสร็จเรียบร้อยครับ

5. ลองปรับเงาให้ไปอยู่ข้างใต้แทน โดยย้ายเงาเดิมออกมา ปรับขนาดให้เล็กลง แล้วเปลี่ยนค่า blur กับ opacity ก็จะได้รูปแบบที่ต่างออกไป

เสร็จแล้วครับ ลองเอาไปปรับเปลี่ยนได้

ขอบคุณมากๆครับ กับบทความต้นฉบับ http://howto.nicubunu.ro/shiny_web_buttons_inkscape/

สร้างปุ่มกดด้วย Inkscape

อ้างอิงจาก
http://howto.nicubunu.ro/shiny_web_buttons_inkscape/

วันนี้เราจะลองสร้างปุ่มกดสำหรับเว็บด้วย Inkscape แบบนี้ครับ

ขั้นตอน
1. เรียกโปรแกรม Inkscape (ดาวน์โหลดได้ฟรีที่ http://www.inkscape.org/)
2. สร้างพื้นปุ่ม เลือกสีตามชอบ ในที่นี้ผมเลือกสีน้ำเงิน
3. Duplicate ปุ่มนี้ เปลี่ยนสีเป็นสีดำ จากนั้นปรับสีแบบไล่สี (gradient) จากมืดไปสว่าง
4. จากนั้นลากไปทับรูปสีน้ำเงิน
5. Duplicate พื้นของปุ่มนี้ เปลี่ยนสีเป็นสีดำ ปรับค่า blur ให้สูงขึ้น

6. ลากมาวางทับปุ่มหลัก กำหนดให้ไปอยู่หลังสุดของภาพ


7. สร้างตัวหนังสือมาวางทับ ได้รูปแบบแรกดังนี้

แลัวมาต่อรูปอื่นกันครับ

ฟอกสีฟัน ด้วย Artweaver

เราเคยใช้ Paint.NET ทำเทคนิคนี้ไปแล้ว
http://surapongu.blogspot.com/2008/02/paintnet_11.html

ซึ่งสามารถใช้ artweaver ได้เช่นกัน ดังนี้

รูปต้นฉบับ
ขั้นตอน

1. เปิดรูป
2. สร้าง Layer ใหม่ ตั้งชื่อเป็น White teeth ซึ่งเราจะวาดสีขาวลงบน Layer นี้
3. เลือก Paintbrush tool แล้วเลือกสีขาว ระบายลง Layer ที่สร้างขึ้นใหม่
4. ใช้ Filter / Blur / Gaussian blur เพื่อปรับแต่งให้สีขาวกลืนเข้ากับภาพ
   
5. ปรับลด opacity ของ Layer อยากให้ขาวมาก ขาวน้อย
6. เสร็จแล้วครับ

Visual C# GUI 3

ทดลองเล่น radioButton กับ checkBox กันครับ

เป้าหมาย


อันนี้ง่ายๆ ครับ ใช้คุณสมบัติ Checked

public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
radioDT.Checked = true;
radioPC.Checked = true;
cbMouse.Checked = true;
}

private void bttOK_Click(object sender, EventArgs e)
{
string choice = "คุณเลือก ";
if (radioDT.Checked)
choice += radioDT.Text;
else if (radioNB.Checked)
choice += radioNB.Text;
choice += Environment.NewLine + "ประเภท ";
if (radioPC.Checked)
choice += radioPC.Text;
else if(radioMAC.Checked)
choice += radioMAC.Text;
choice += Environment.NewLine + "และของแถม ";
if (cbMouse.Checked)
choice += cbMouse.Text + " ";
if (cbFlash.Checked)
choice += cbFlash.Text;

txtResult.Text = choice;
}
}

เรียบร้อยครับ

Visual C# GUI 2

วันนี้เราจะทดลองเล่นกับ ComboBox กันนะครับ

เป้าหมาย

เมื่อคลิกปุ่ม ตกลง จะได้


กำหนดให้ comboBox ของอาหารคาว ชื่อ cmbFood และ อาหารหวาน ชื่อ cmbDessert และ ปุ่มตกลงชื่อ bttOK

สำหรับ cmbFood เราจะเพิ่มรายการอาหารจากเมนู Properties โดยเลือกหัวข้อ Items


เมื่อคลิก จะเกิดช่องให้เติมรายการ


ส่วน cmbDessert เราจะเขียนรหัสโปรแกรมเพื่อเพิ่มรายการทีหลัง

จากนั้นดับเบิลคลิกปุ่มตกลง แล้วเพิ่มรหัสดังนี้

ส่วนแรกเป็นส่วนที่ทำงานเมื่อเรียกฟอร์มขึ้นมา
public Form1()
{
InitializeComponent();
string[] dessert = {"รวมมิตร", "บัวลอย", "กล้วยบวดชี"};
cmbDessert.Items.AddRange(dessert); //เพิ่มรายการของหวานให้คอมโบ
cmbFood.SelectedIndex = 0; //เลือกรายการแรก
cmbDessert.SelectedIndex = 0; //เลือกรายการแรก
}

ส่วนของปุ่มตกลง
private void bttOK_Click(object sender, EventArgs e)
{
MessageBox.Show("คุณเลือก "+cmbFood.Text+" และ "+cmbDessert.Text,"รายการอาหาร",MessageBoxButtons.OK,MessageBoxIcon.Information);
}

จะสังเกตว่าเราใช้คุณสมบัติ Text ของคอมโบได้โดยตรง นอกจากนี้แล้ว เรายังสามารถรู้ได้ว่าเลือกรายการอันดับที่เท่าไร โดยดูจากคุณสมบัติ SelectedIndex

วันนี้ก็ขอจบคร่าวๆแค่นี้ครับ