ตัวอย่างการสร้าง form comment จาก photoshop สู่ Code HTML/CSS

วันนี้ลองหยิบ form comment มาคุยกันในเรื่องของการออกแบบตั้งแต่ต้น จนถึงการใส่ลงไปใน HTML กันว่าจะทำยังไง ผมใช้ file เพียงไฟล์เดียวเขียนจะได้เห็น Code กันง่ายๆไปเลย ว่าตรงไหนเป็นยังไง อาจจะดูไม่สวยและไม่ถูกจริตของ CSS นักนะครับ ถือว่าเป็นตัวอย่างละกัน

Screen shot form

Screen shot form

เริ่มต้นก็อย่างที่เห็นครับ ให้คุณสร้างไฟล์งานของ Photoshop ขึ้นมาก่อน จากนั้นก็เข้าไปสร้าง form กัน ซึ่งตรงนี้ต้องอาศัยทักษะด้านการออกแบบของแต่ละคนกันด้วยนะครับ ส่วนตัวผมไม่เก่งนัก เลยได้มาแค่นี้ 555

Step 1.
เปิดไฟล์เปล่าขึ้นมาเอาขนาด ตามที่คุณต้องการเลยครับ จากนั้นก็เริ่มต้นสร้างบรรทัดแรก ของผมใส่คำว่า yourname ลงไปเพื่อบอกให้ผู้ใช้รู้ว่า ต่อไปนี้จะเป็นการกรอกชื่อคุณนะ

Step 2.
ผมสร้างแถบสีดำ มุมโค้งนิดหน่อยขึ้นมา ด้วยเครื่องมือ Rounded Rectangle Tool  เทสีดำลงไป เลือกแบบไม่ดำสนิทนัก

Rounded Rectangle Tool

Rounded Rectangle Tool

Step 3.
ผมทำเพิ่มเติมในส่วนของข้อความ label ด้านบนว่า your email เพื่อบอกให้คุณรู้ว่าตรงนี้ต้องกรอก Email นะ แล้วสร้างกรอบสีดำขึ้นมาอีกเหมือนเดิม  และทำแบบนั้นกับกล่องใส่ข้อความของ Comment ด้วยแต่กล่องจะใหญ่กว่าเดิม เพราะต้องกรอกข้อมูลเยอะพอสมควร

Step 4.
ตรงนี้ผมทำคล้ายกัน แต่เพิ่มลูกเล่นให้มันหน่อยตรงแยกสีตรงคำว่า send กับคำว่า  comment เพื่อเพิ่มลูกเล่นมั้ง !! กลัวมันดูเหงาๆนะ

ทั้งหมดผมทำเป็น Folder ไว้เวลาจะแยกจะทำอะไรจะได้ง่ายๆนะครับ เพื่อจะเอาไปใช้กันต่อ

Folder Layer

Folder Layer

Step 5.
เราจะมาเริ่มตัดในส่วนของรูปภาพเพื่อเตรียมสำหรับเอาไปใช้กับ CSS และ HTML กันต่อไปนะครับ
ตรงนี้แนะนำว่าอ่านเรื่อง การตัดรูปภาพเพิ่มเติมนะครับ

การแปลงไฟล์รูปภาพเป็น XHTML ด้วยโปรแกรม Photoshop

Step 6.
จากนั้นเราจะเอามาทำเป็ฯ Form ที่สามารถใช้งานได้จริง และส่งค่าได้จริงกันครับ
เริ่มจากเปิด Tag  form ขึ้นมาแล้วก็ทำการสร้าง Table ก่อนก็แล้วกันจะได้ง่ายต่อการเรียนรู้ แล้วใครคล่องคล่อยปรับไปใช้ CSS กันเองนะครับ

<form action=”index.html” method=”post”>
<table>
<tr>
<td></td>
</tr>
</table>
</form>

จากนั้นเราจะเริ่มวางรูปภาพลงในส่วนของพื้นที่ที่ไม่ใช่ กล่องรับข้อความกันก่อน ตัวอย่างนะครับ

<tr>
<td><img src=”images/index_01.png”/></td>
</tr>

ผมเอารูปที่ได้มาวางไว้ใน Folder ชื่อ images แล้วผมก็เริ่มจากการวาง รูปที่เป็นข้อความ  Label ก่อนวางแบบ HTML ธรรมดาไปเรื่อยๆให้ครบนะครับ

Step7.
จากนั้นผมจะเริ่มการวางพื้นหลังของกล่องรับข้อความ อันนี้ผมจะเขียนเป็น CSS นะครับ

<input type=”text” name=”yourname” style=”width: 90%; margin-left: 20px; background: none; border: none; color: #FFF; height: 46px;” />

สำหรับกล่อง Textbox ธรรมดา ผมจะเริ่มต้นด้วยการกำหนดความกว้างนะครับ
แล้วก็ต้องกำหนดระยะห่างจากด้านซ้ายมือคือต้องวางพื้นที่ให้ตรงกับกล่องที่เป็นรูปภาพนะครับ ตรงนี้ผมใช้ margin
จากนั้นผมเอา background ออกไป โดยการใส่ค่าเป็น none
แล้วก็เอา Border ออกไปเหมือนกัน
จากนั้นรูปเรามันเป็นสีดำ ดังนั้นก็ต้องปรับเปลี่ยนสีของตัวอักษรที่จะเอามาวางลงในกล่อง ซึ่งผมเลือกเป็นสีขาว
สุดท้ายปรับความสูงซักนิดให้สวยงาม

ทำแบบนี้ให้ครบสำหรับทุกๆกล่องรับข้อความนะครับ

Step 8.
ต่อไปมาดูการกำหนดค่าให้กับ Textarea กันบ้าง

<td background=”images/index_06.png”>
<textarea cols=”10″ rows=”13″ style=”width: 90%; margin-left: 20px; background: none; border: none; color: #FFF;”>
</textarea>
</td>

ตรงนี้ผมเอารูปมาวางเป็นพื้นหลังของตารางไปแทน แล้วเอา background ใน css ออกไป ที่เหลือทำเหมือนกันกับ Textbox

Step 9.
ตรงนี้เรามาดูกันเรื่องของการกำหนดรูปให้ปุ่ม Submit กันบ้าง

<td>
<input type=”submit” value=””
style=”width: 210px;                                          //ค่าความกว้ง
margin-left: 220px;                                             //ระยะห่างจากด้านซ้าย
background: url(images/index_09.png); //กำหนดรูปพื้นหลัง
border: none;                                                         //ไม่ใส่เส้นขอบ
color: #FFF;                                                           //ตัวหนังสือที่พิมพ์ลงไปเป็นสีขาว
height: 39px;                                                         //ความสูงของปุ่ม
cursor: pointer;                                                    //เมื่อเอาเมาส์ไปวางให้เปลี่ยนเป็นรูปมือ
background-repeat: no-repeat;”                   //ไม่ต้องวนซ้ำการแสดงรูป
/>
</td>

ตรงนี้ ผมใช้ความเป็น CSS แบบเต็มที่หน่อย เวลาใครจะเอาไปต่อยอดใช้กับ CSS แบบไม่ใช้ตารางเลยจะได้เข้าใจแล้วก็พอเป็นแนวทาง มาดูกันครับ ผมเอาข้อความของปุ่มนี้ออกไปด้วยการปล่อยค่าใน value ของ html เป็นค่าว่าง จากนั้นในส่วนของ CSS  ก็ตาม comment กันเลยครับ

ทีนี้หน้าตาก็จะออกมาดังรูปนี้ครับ

เสร็จแล้ว

เสร็จแล้ว

 

ก็เป็นเรื่องเป็นราวที่ดูมีสาระดี หวังว่าอาจจะเป็นประโยชน์กับผู้ที่สนใจได้ไม่มากก็น้อยนะครับ ผมหยิบเอาไฟล์มาให้ download กันเป็นตัวอย่างในการศึกษาด้วยเหมือนเดิมครับ

download

download