Webmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - LogoWebmonster Lab สอนทำเว็บไซต์ WordPress SEO เพื่อธุรกิจยุคใหม่ - Logo
  • Home
  • บทความฟรี
    • บทความทั้งหมด
    • บทความแนะนำ
    • WordPress
      • การติดตั้ง / การใช้งาน
      • WordPress Plugins
    • SEO
    • Tips & Trick
    • Free Tools
    • Inspiration
    • My Experience
  • คอร์สเรียน
    • Basic WordPress (เรียนสด)
  • เกี่ยวกับผู้สอน
  • ติดต่อผู้สอน

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

Published by Yui Kanchita
Categories
  • Free Tools
Tags
  • design
  • free
  • theme
  • website
  • wireframe
แจก Free – 2016 Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
  • Facebook
  • Twitter
  • Line

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

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

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

ดาวน์โหลด Grid PSD (ฟรี) ดาวน์โหลด Grid 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-12col-1170px-mockup-guides2-webmonsterlab
bootstrap-grid-12col-1170px-mockup-grid-webmonsterlab
bootstrap-grid-12col-1170px-mockup-columns-webmonsterlab

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

SEO vs. User ใครคือ The King ของการทำเว็บไซต์
Alone On Independence Day
  • Facebook
  • Twitter
  • Line
Yui Kanchita
Yui Kanchita
พี่ยุ้ยเป็นคนทำเว็บที่สนุกกับการใช้ชีวิต inspire อยู่กับศิลปะการใช้กลยุทธ์เว็บไซต์ 18 ปี "หลงรักงานสอน" ชอบอ่านหนังสือ ถ่ายรูปเล่น กินบุฟเฟ่ต์ และก็ชอบขับรถเที่ยวต่างจังหวัดคนเดียว มันชิลดีนะ : )

Related posts

ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที
December 10, 2018

ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที


Read more
KSME-webinar-featured4
June 21, 2014

SME Webinar แหล่งความรู้ชั้นดีและฟรี ที่อยากแนะนำ


Read more

ค้นหาบทความ

Webmonster Lab

blog แชร์ความรู้เว็บมาสเตอร์ การทำเว็บไซต์ด้วย WordPress ที่ไม่มีสอนในโรงเรียน
เขียนจากประสบการณ์ทำงาน 18 ปี ในสายงาน Web Design & Development, WordPress, SEO, E-Commerce, Digital Marketing

คอร์สเรียนทำเว็บไซต์ “Basic WordPress”

สอนผู้เริ่มต้น สร้างเว็บไซต์ธุรกิจ
ด้วย WordPress + Elementor
(ไม่ต้องเขียนโค้ด)

เรียนตัวต่อตัว/กลุ่มส่วนตัว
รายละเอียดคอร์ส
** ให้สิทธิ์ผู้ที่จองก่อน **
ได้เลือกวันเรียนก่อนจร้าาา : )

บทความล่าสุด

  • ทำไมเว็บไซต์จึงต้องการ Webmaster
    ทำไมเว็บไซต์จึงต้องการ Webmaster
    August 14, 2020
  • ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    January 13, 2020
  • ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที
    ไอเดียจดโน้ตด้วยเว็บไซต์ ใช้ Google Sites ทำเว็บใน 5 นาที
    December 10, 2018
  • SEO ไม่ใช่ The King ของการทำเว็บไซต์
    SEO vs. User ใครคือ The King ของการทำเว็บไซต์
    March 20, 2016
  • แจก Free – 2016 Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
    แจก Free – Bootstrap Grid 12 Columns Desktop 1170px (PSD/AI)
    February 22, 2016

บทความแนะนำ

  • howto-fix-install-wordpress-on-xampp-featured
    ปัญหาการติดตั้ง WordPress บน localhost (XAMPP)
    July 13, 2014
  • วิธีการติดตั้ง WordPress บน localhost (XAMPP)
    วิธีการติดตั้ง WordPress บน localhost (XAMPP) สอนละเอียดยิบ
    June 27, 2014
  • wp-ecommerce-plugin-all
    WordPress E-Commerce Plugins ตัวไหนชนะเลิศ
    June 5, 2014
  • wordpress-updates
    คุณก็อัพเดท WordPress ได้ด้วยตัวเอง
    April 2, 2014

Tags

add-ons browser code color content CSS design Digital Marketing font free Google How To HTML image install WordPress life localhost MS-Office plugins SEO SME social theme tool tools twitter update User/UX/UI Webmaster website wireframe WooCommerce WordPress work-life xampp ความรู้ ธุรกิจ รูปภาพ แก้ปัญหา
© Webmonster Lab. All rights reserved.
บทความในบล็อกนี้ ยุ้ยเขียนและจัดทำขึ้นเองทั้งหมดค่ะ อนุญาตให้เผยแพร่เนื้อหาบทความและนำไฟล์ที่แจกไปใช้ได้ฟรี เพื่อการแบ่งปันสิ่งดีๆ :)
โดยขอให้ท่านอ้างอิงแหล่งที่มา
link กลับมาหน้าเว็บที่ท่านนำไปใช้ด้วยทุกครั้งนะจร๊ะ
❤︎

Webmonster Lab

085-615-9244 (ยุ้ย)

เวลาทำการ
จันทร์-ศุกร์ 10:00-18:00 น.

ออฟฟิศ/ห้องเรียน
คลิคเอ็กซ์ สามย่าน (KliqueX Samyan)
co-working space ชั้น 3 แอมพาร์ค จุฬา

© 2021 Webmonster Lab. All Rights Reserved.
Created with ❤︎ Kanchita Varitthinanon
นโยบายข้อมูลส่วนบุคคล
เราขอเก็บข้อมูลการใช้งานเว็บไซต์ของคุณด้วย cookies นำมาวิเคราะห์และพัฒนา เพื่อให้คุณได้รับประสบการณ์การใช้งานได้ดียิ่งขึ้น

หากคุณเลือกไม่ยอมรับ ข้อมูลการใช้เว็บไซต์ของคุณจะไม่ถูกจัดเก็บ อ่าน นโยบายข้อมูลส่วนบุคคล
ยอมรับไม่ยอมรับ