แจก Free – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)

เพื่อ UX/UI ที่ดี พี่ยุ้ยนี่แทบจะสิงจออยู่แล้น นั่งทำเส้น guides ตาลาย วิ๊ง…มากตอนเน้ ตอนแรกก็ download free – Bootstrap Grid System ที่เขาแจกกันมาใช้แหละ แต่ยังไม่ค่อยถูกใจเท่าไหร่ ก็เลยทำเองใช้เอง แล้วเอามาแจกฟรีดีกว่า ทีนี้เลยเข้าใจแล้วว่าตัวแจกฟรี กับตัวที่ต้องเสียเงินซื้อ มันแตกต่างกันอย่างไร อิอิ

พี่ยุ้ยทำมาให้ทั้ง 2 แบบเลย PSD และ AI Vector (CS5) ฟรี 100% จ้า หรือใครอยากจะโอนเงินให้ก็ได้นะ ฮ่าๆๆ …เดินมากอดพี่ยุ้ยแน่นๆ 1 ทีพอละจ้ะ สำหรับกำลังใจ

Download – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)

พรีวิวกันดีกว่าแมะว่าในไฟล์มีอะไร ใช้ยังไง (สำหรับมือใหม่)

• เปิดไฟล์ขึ้นมาแล้วเลือก เปิด/ปิด Layer ได้ค่ะ …ปิดเครดิตได้นะ ไม่ว่า อิอิ :}
• สำหรับไฟล์ AI พี่ยุ้ย Lock Layer ไว้บางตัว กันไปจิ้มโดนแล้วมันเลื่อน
• ตัว Desktop นี้ทำมาที่หน้าจอ 1366px จะได้เห็นภาพรวมของจริงเวลาวาง Layout ที่ 1170px
• พี่ยุ้ยทำเส้น guides ให้เรียบร้อยแล้ว กด Ctrl + ; เพื่อโชว์หรือซ่อนเส้น guides ได้
• ทำ Column บวกลบเลข มาให้ด้วย จะได้เห็นชัดๆ ไม่ต้องกดเครื่องคิดเลขบ่อยๆ (อันนี้ inner ตัวเอง)
• เปลี่ยนสีเองได้ตามใจชอบ
• วิธีใช้:  New Layer ขึ้นมาให้อยู่ใต้ Layer ของ Grid
  แล้วลด opacity ที่ Layer Grid หรือปิดไปเลย ใช้แต่เส้น guides ก็ได้จ่ะ
  ตัว Column สีฟ้าๆ เพิ่มความสูงให้มันด้วยการจับทีเดียวทั้งแผง แล้วลากยาวๆ ลงมา

PSD – Bootstrap Fluid Grid

Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)

AI – Bootstrap Fluid Grid

Large Displays > 1200px Width
70px Colums, 30px Gutters, 1170px Total Grid Width
(1 Column มี Gutter 15px (ซ้าย-ขวา) เมื่อ 2 ตัวมาชนกันจึงมี Gutter เท่ากับ 30px)

ตัวอย่าง Mockup – Webmonster Lab

ใช้ WordPress Theme ที่ออกแบบด้วย Bootstrap Grid System 1170px

Resource/บทความ/รูปภาพ : Webmonster Lab | Yui K Artist