โทร. 02-570-8449 มือถือ 088-807-9770 ชำระเงิน
จ–ศ 9:00–17:00 น. @itgenius
สถาบันไอทีจีเนียสIT Genius Institute
สถาบันไอทีจีเนียสIT Genius Institute
หลักสูตรเวิร์กชอปตารางอบรม
สำหรับองค์กร
อบรมในองค์กร (In-house)AI Transformationอบรมหน่วยงานภาครัฐบริการพัฒนาระบบเช่าห้องอบรม
บทความ
เกี่ยวกับเรา
รู้จักสถาบันไอทีจีเนียสวิทยากรผลงานลูกค้าของเราช่องทางชำระเงิน
ติดต่อเราคอร์สออนไลน์
ธีม
ภาษา
THENLA
สอบถามหลักสูตรเลือกช่องทางที่สะดวก ทีมงานตอบเองทุกช่อง
LINE @itgeniusตอบเร็วที่สุด · จ–ศ 9:00–17:00 น.
โทรศัพท์
02-570-8449สำนักงาน088-807-9770มือถือ
อีเมลและโซเชียล
contact@itgenius.co.thสำหรับใบเสนอราคาและเอกสารFacebookitgeniusonlineYouTubeitgeniusengขอคำปรึกษาจัดอบรมให้ทีม
หน้าแรก / หลักสูตร / ออกแบบด้านกราฟิก / รายละเอียด
ออกแบบด้านกราฟิก · GPC-35

Modern Web Design with Photoshop and Bootstrap 5

หลักสูตร Modern Web Design with Photoshop and Bootstrap 5 เป็นการอบรมออกแบบหน้าเว็บใน Photoshop ด้วย Artboard และ Grid ที่ตรงกับ Bootstrap แล้วสร้างเป็นหน้าเว็บจริงด้วย Bootstrap 5.3 พร้อม CSS ของตนเองและโหมดมืด เหมาะกับนักออกแบบที่ถนัด Photoshop และ Developer จบแล้วได้ Landing Page ที่ Responsive

อัปเดตล่าสุด
Modern Web Design with Photoshop and Bootstrap 5
ราคาเริ่มต้น 3,150 บาท / ท่าน 3,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ
ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้
PDFดาวน์โหลด Course Outline
  • ระยะเวลา6 ชั่วโมง · 1 วัน
  • รูปแบบออนไซต์ / ออนไลน์สด
  • รอบถัดไปเปิดตามคำขอ
  • ใบรับรองมี Certificate

ภาพรวมหลักสูตร

การออกแบบเว็บสมัยใหม่ไม่ได้วัดกันที่ความสวยงามเพียงอย่างเดียว หน้าเว็บต้องแสดงผลดีบนมือถือ แท็บเล็ต และคอมพิวเตอร์ โหลดเร็ว และใช้งานได้กับทุกคน นักออกแบบหลายคนถนัดจัดหน้าใน Photoshop อยู่แล้ว แต่เมื่อนำไปทำเป็นเว็บจริง ระยะห่าง สี และขนาดตัวอักษรมักคลาดเคลื่อน การวางโครงงานออกแบบให้ตรงกับระบบ Grid ของ Bootstrap ตั้งแต่ต้นจึงช่วยให้ขึ้นหน้าเว็บได้เร็วและตรงแบบ

หลักสูตรนี้พาผู้เรียนออกแบบหน้าเว็บใน Photoshop 2026 ด้วย Artboard ตามขนาดหน้าจอ Grid 12 คอลัมน์ และ Smart Object เตรียมภาพด้วยเครื่องมือ AI อย่างรู้ขอบเขต แล้วส่งออกภาพสำหรับเว็บ จากนั้นนำงานไปสร้างเป็นหน้าเว็บด้วย Bootstrap 5.3 ทั้ง Grid, Utilities, Navbar, Carousel, Card, Modal และฟอร์ม ปรับหน้าตาด้วย CSS ของตนเองพร้อมโหมดมืด และปิดท้ายด้วย Workshop แปลง Landing Page จาก Photoshop เป็นหน้าเว็บที่ Responsive (อบรม 1 วัน 6 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

  • เข้าใจแนวทางออกแบบเว็บสมัยใหม่แบบ Mobile-first ความเร็ว และ Accessibility
  • ตั้งค่า Artboard และ Grid ใน Photoshop ให้ตรงกับ Breakpoint ของ Bootstrap ได้
  • จัด Layout หน้าเว็บ เตรียมภาพ และส่งออกไฟล์สำหรับเว็บจาก Photoshop ได้
  • สร้างหน้าเว็บด้วย Grid, Utilities และ Components ของ Bootstrap 5.3 ได้
  • เขียน CSS ปรับหน้าตา Bootstrap ให้ตรงกับงานออกแบบ พร้อมโหมดมืดได้
  • แปลงงานจาก Photoshop เป็น Landing Page ที่ Responsive และตรวจด้วย Lighthouse ได้

หลักสูตรนี้เหมาะสำหรับ

  • นักออกแบบที่ถนัด Photoshop และต้องการออกแบบหน้าเว็บให้ทำเป็นเว็บจริงได้
  • UX/UI Designer ที่ต้องส่งงานให้นักพัฒนาหรือขึ้นหน้าเว็บเอง
  • Developer ที่ต้องแปลงไฟล์ PSD เป็นหน้าเว็บด้วย Bootstrap
  • ผู้ดูแลเว็บไซต์ขององค์กรและผู้สนใจทั่วไป

พื้นฐานของผู้เข้าอบรม

  • ใช้คอมพิวเตอร์ เว็บเบราว์เซอร์ และจัดการไฟล์กับโฟลเดอร์ได้คล่อง
  • เคยใช้ Photoshop เบื้องต้น เช่น Layer ข้อความ และการเลือกพื้นที่
  • ไม่ต้องมีพื้นฐานการเขียนโค้ด แต่ถ้ารู้ HTML เบื้องต้นจะเรียนได้เร็วขึ้น
  • โน้ตบุ๊กที่ติดตั้ง Photoshop และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตรออกแบบเว็บสมัยใหม่ด้วย Photoshop ร่วมกับ Bootstrap 5 อบรม 1 วัน 6 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner ฝั่งออกแบบอัปเดตเป็น Photoshop 2026 ด้วย Artboard, Smart Object, Export As และเครื่องมือเตรียมภาพอย่าง Remove Tool กับ Generative Fill ฝั่งโค้ดอัปเดตเป็น Bootstrap 5.3 ที่ใช้ CSS Variables และรองรับโหมดมืด ใช้ผ่าน CDN ให้เริ่มได้ทันที ผู้เรียนใช้ Photoshop จาก Creative Cloud ของตนเองหรือรุ่นทดลองใช้ และจะได้เอกสารประกอบการอบรม ไฟล์ PSD ตัวอย่าง และโค้ดเฉลยทุก Lab กลับไปใช้งานต่อ

Day 1: จาก Photoshop สู่หน้าเว็บจริงด้วย Bootstrap 5.3

Section 1 แนวทางออกแบบเว็บสมัยใหม่
  • Mobile-first และ Responsive Design บนหน้าจอหลายขนาด
  • ความเร็วของเว็บและ Core Web Vitals ที่นักออกแบบควรรู้
  • Accessibility เบื้องต้น: สีตัดกัน ขนาดตัวอักษร และพื้นที่กด
  • วาง Wireframe ก่อนออกแบบจริงเพื่อตกลงโครงสร้างกับทีม
Section 2 Lab: ตั้งค่า Photoshop 2026 สำหรับงานเว็บ
  • เอกสารแบบ RGB หน่วยพิกเซล และ Artboard สำหรับมือถือ แท็บเล็ต และเดสก์ท็อป
  • สร้าง Guide Layout 12 คอลัมน์ให้ตรงกับ Container และ Gutter ของ Bootstrap
  • ตั้งชื่อ Layer และจัดกลุ่มตามส่วนของหน้าเว็บ
  • Lab: วาง Wireframe ของ Landing Page บน Artboard
Section 3 Lab: จัด Layout หน้าเว็บใน Photoshop
  • รูปทรง ปุ่ม และเมนูด้วย Shape ที่แก้ขนาดได้ไม่เสียคุณภาพ
  • ข้อความภาษาไทยและอังกฤษ พร้อม Character และ Paragraph Styles
  • Smart Object สำหรับส่วนที่ใช้ซ้ำ และ Clipping Mask สำหรับครอบภาพ
  • Lab: ออกแบบ Header, Hero, Feature และ Footer
Section 4 Lab: เตรียมภาพสำหรับหน้าเว็บ
  • ลบสิ่งที่ไม่ต้องการด้วย Remove Tool และขยายภาพด้วย Generative Expand
  • เติมพื้นหลังหรือองค์ประกอบด้วย Generative Fill และ Generative Credits
  • ลิขสิทธิ์ภาพ ภาพบุคคล และเงื่อนไขการใช้งานเชิงพาณิชย์
  • Lab: เตรียมภาพ Hero ให้พอดีกับทุกขนาดหน้าจอ
Section 5 ส่งออกงานไปใช้บนเว็บ
  • Export As และ Quick Export เป็น PNG หรือ JPG พร้อมขนาด 2 เท่าสำหรับจอละเอียดสูง
  • บันทึกภาพเป็น WebP ด้วย Save a Copy และลดขนาดไฟล์
  • Export Artboard ทั้งหน้าไว้เทียบแบบตอนเขียนโค้ด
  • จดค่าสี ฟอนต์ และระยะห่างเป็นแผ่นสเปกส่งต่อ
Section 6 Lab: เริ่มต้น Bootstrap 5.3
  • ของใหม่ใน Bootstrap 5.3: CSS Variables, Color Modes และคลาสสีแบบใหม่
  • Starter Template ผ่าน CDN และโครงสร้างโฟลเดอร์โปรเจกต์
  • เปิดหน้าเว็บด้วย Live Server และจำลองมือถือด้วย DevTools
  • Lab: หน้าเว็บแรกจาก Starter Template
Section 7 Lab: Grid, Flex และ Utilities
  • Container, Row และ Column พร้อม Breakpoint sm ถึง xxl
  • จัดตำแหน่งด้วย Flex Utilities, Gap และ Order
  • Spacing, Typography และการซ่อนหรือแสดงตามหน้าจอ
  • Lab: แปลง Grid จาก Photoshop เป็น Grid ของ Bootstrap
Section 8 Lab: Components ของ Bootstrap
  • Navbar ที่ยุบเป็นเมนูบนมือถือ และ Offcanvas
  • Carousel, Card, Accordion และ Modal โดยไม่ต้องใช้ jQuery
  • ฟอร์มพร้อม Floating Labels และตาราง
  • Alert, Badge, Button, List Group และ Tooltip
Section 9 Lab: ปรับหน้าตาด้วย CSS ของตนเอง
  • ไฟล์ CSS ของตนเองที่โหลดต่อจาก Bootstrap และ Class ที่ตั้งเอง
  • ปรับสีและฟอนต์ด้วย CSS Variables ทั้งระดับหน้าและระดับ Component
  • เปิดโหมดมืดด้วย data-bs-theme และปุ่มสลับธีม
  • ไอคอนด้วย Bootstrap Icons
Section 10 Workshop: แปลง Landing Page จาก Photoshop เป็นเว็บจริง
  • สร้างหน้าเว็บตามแบบใน Photoshop ทั้ง Header, Hero, Feature, ฟอร์ม และ Footer
  • ทดสอบ Responsive บนหลายขนาดหน้าจอด้วย DevTools
  • ตรวจความเร็วและ Accessibility ด้วย Lighthouse แล้วปรับปรุง
  • ภาพรวมสิ่งที่กำลังมาใน Bootstrap 6 และแนวทางต่อยอด

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

  • ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
  • เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
  • ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

คำถามที่พบบ่อย

ออกแบบหน้าเว็บใน Photoshop ควรตั้งค่าไฟล์อย่างไร

ควรใช้โหมดสี RGB และหน่วยเป็นพิกเซล สร้าง Artboard แยกตามขนาดหน้าจอ เช่น มือถือ แท็บเล็ต และเดสก์ท็อป แล้วสร้าง Guide Layout 12 คอลัมน์ให้ตรงกับ Container และ Gutter ของ Bootstrap เพื่อให้ตอนเขียนโค้ดวางตำแหน่งได้ตรงกัน ตั้งชื่อ Layer และจัดกลุ่มตามส่วนของหน้า เช่น Header เนื้อหา และ Footer ใช้ Character Style และชุดสีเดียวกันทั้งไฟล์ และทำส่วนที่ใช้ซ้ำเป็น Smart Object

ส่งออกรูปภาพจาก Photoshop ไปใช้บนเว็บทำอย่างไร

เลือกเลเยอร์หรือ Artboard ที่ต้องการแล้วใช้คำสั่ง Export As เลือก JPG สำหรับภาพถ่าย และ PNG สำหรับภาพที่ต้องการพื้นโปร่งใส ปรับขนาดและคุณภาพให้ไฟล์เล็กลง และส่งออกขนาด 2 เท่าสำหรับจอความละเอียดสูง ถ้าต้องการไฟล์ WebP ที่เล็กกว่า ให้ใช้ Save a Copy แล้วเลือกรูปแบบ WebP ส่วนงานที่ส่งออกบ่อยใช้ Quick Export ตามค่าที่ตั้งไว้ได้ แล้วจึงนำไฟล์ไปวางในโฟลเดอร์รูปของโปรเจกต์

ปรับหน้าตา Bootstrap 5.3 ด้วย CSS ของตัวเองทำอย่างไร

สร้างไฟล์ CSS ของตัวเองแล้วโหลดต่อจากไฟล์ของ Bootstrap จากนั้นกำหนด CSS Variables ของ Bootstrap เช่น สีพื้นหลังและฟอนต์ของทั้งหน้า และตัวแปรระดับ Component อย่างสีของปุ่ม ควรเพิ่ม Class ของตัวเองแทนการแก้ไฟล์ต้นฉบับ เพื่อให้อัปเดตรุ่นได้ภายหลัง ถ้าต้องการโหมดมืดให้ใช้ data-bs-theme ที่ Bootstrap 5.3 รองรับ หลักสูตรนี้ฝึกเขียน CSS ปรับหน้าตา Bootstrap ให้ตรงกับงานที่ออกแบบใน Photoshop

หลักสูตร Modern Web Design with Photoshop and Bootstrap 5 เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักออกแบบที่ถนัด Photoshop UX/UI Designer Developer ที่ต้องแปลงไฟล์ PSD เป็นหน้าเว็บ และผู้ดูแลเว็บไซต์ขององค์กร ไม่ต้องมีพื้นฐานการเขียนโค้ดมาก่อน แต่ควรเคยใช้ Photoshop เบื้องต้น เช่น Layer และข้อความ และมี Photoshop จาก Creative Cloud ของตนเองหรือรุ่นทดลองใช้

เรียนจบหลักสูตร Modern Web Design with Photoshop and Bootstrap 5 แล้วทำอะไรได้บ้าง

ตั้งค่า Artboard และ Grid ใน Photoshop ให้ตรงกับ Bootstrap จัด Layout หน้าเว็บ เตรียมและส่งออกภาพสำหรับเว็บ สร้างหน้าเว็บด้วย Bootstrap 5.3 ทั้งเมนู สไลด์ภาพ การ์ด ฟอร์ม และ Modal โดยไม่ต้องใช้ jQuery เขียน CSS ปรับหน้าตาพร้อมโหมดมืด และตรวจความเร็วของหน้าเว็บด้วย Lighthouse ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Modern Web Design with Photoshop and Bootstrap 5 ให้ทีมในองค์กรได้ไหม

ได้ สถาบันไอทีจีเนียสรับจัดอบรมแบบ In-house ให้ทีมออกแบบและทีมพัฒนาเว็บขององค์กร ปรับตัวอย่างให้ตรงกับงานของทีม เช่น นำไฟล์ออกแบบที่ทีมมีอยู่มาฝึกสร้างเป็นหน้าเว็บ และจัดได้ทั้งแบบ Onsite และ Online สอบถามรายละเอียดและขอใบเสนอราคาได้ทางช่องทางติดต่อของสถาบัน

บทความที่เกี่ยวข้อง