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

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

posted in: All Posts, Freebie | 0 6,745 views

เพื่อ UX/UI ที่ดี พี่ยุ้ยนี่แทบจะสิงจออยู่แล้วคับ นั่งทำเส้น guides ตาลาย วิ๊ง…มากตอนเน้ ตอนแรกก็ download free – Bootstrap Grid System ที่เขาแจกกันมาใช้แหละ แต่ยังไม่ค่อยถูกใจเท่าไหร่ ก็เลยทำเองใช้เอง แล้วเอามาแจกดีกว่า ทีนี้เลยเข้าใจแล้วว่าตัวแจกฟรี กับตัวที่ต้องเสียเงินซื้อ มันแตกต่างกันอย่างไร อิอิ พี่ยุ้ยใจป๋า ทำมาให้ทั้ง 2 แบบเลย PSD และ Vector (CS5) ฟรี 100% หรือใครอยากจะจ่ายเงินให้ก็ได้นะ ฮ่าๆๆ …เดินมากอดพี่ยุ้ยแน่นๆ 1 ทีพอละคับ สำหรับกำลังใจ
 

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

Free Download - PSD Free Download - 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)

bootstrap-grid-12col-1170px-psd-webmonsterlab

 

AI – Bootstrap Fluid Grid

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

bootstrap-grid-12col-1170px-ai-webmonsterlab

 

ตัวอย่าง Mockup – Webmonster Lab
ใช้ WordPress Theme ที่ออกแบบด้วย Bootstrap Grid System 1170px

 

Bootstrap Grid มีมานานแล้วแต่พี่เพิ่งเอาจริง ฮ่าๆๆๆ

 

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

 

SEO ไม่ใช่ The King
Alone On Independence Day

Comments

comments