การจัดทำเว็บไซต์จาก photoshop และ การตัดเว็บเป็น เว็บ html เพื่อใช้งานจริง

[raraymondas]

Advertisement

การทำเว็บจาก photoshop และ การตัดเว็บเป็น website html เพื่อใช้งานจริง

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

Photoshop เป็น programที่ท่านทุกคนคงผ่านตา ผ่านหู ผ่านมือ มาบ้างแล้ว เพราะ นี้คือหนึ่งในโปรแกรมcomputerชื่อกระฉ่อน ที่ใช้งานด้านการ รีทัชรูปภาพ  ออกแบบกราฟฟิก  ยอดนิยมที่สุดในโลกล่านี้แล้วครับท่าน   
ตัวนี้จะเป็นอุปกรณ์หลักที่นักdesignwebsiteจำเป็นต้องมีในเครื่อง และ เป็นพระเอกของงานนี้เลยครับ

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


ซึ่งwebsiteส่วนใหญ่เส้น grid เป็น 12 column เราสามารถหารูปแบบเส้น grid ได้จาก google ตามกล้วยๆ

หลังจาก ออกแบบเสร็จ เราจะทำการ ตัดเว็บ  ซึ่งการตัดเว็บไซต์คือการ แยกส่วนกราฟฟิคใน photoshop ในเว็บไซต์ออกเว็บส่วนๆ ด้วย Slice Tool  และ save for web  ด้วยฟังชั่น save selection  โดยเทคนิคคือการตัดไฟล์ออกมาให้ได้ขนาดไฟล์ที่เล็กที่สุดเพื่อความเบาของwebsite  ส่วนไหนใช้ css ได้ก็ไม่ต้องตัดออกมา และ นามสกุลไฟล์ให้ save ออกมาเป็น .jpg เพื่อให้ไฟล์มีขนาดเล็ก แต่ส่วนไหนเป็นภาพแบบโปรงแสงควรใช้แบบ .png

เราจะได้ไฟล์กราฟฟิคเป็นชิ้นๆ เพื่อใช้ประกอบเป็นเว็บ Html โดยการใช้โปรแกรม  Dreamweaver   โดยเคล็ดลับการขึ้นรูปเป็นwebsite สมัยเก่าจะนิยมใช้ Tag <table> ซึ่งขณะนี้จะใช้เป็น tag <div> แทน ซึ่งจะดีกว่าตรงที่โค็ดที่เขียนออกมาจะไม่ซับซ้อน  ทำให้ google เก็บข้อมูลได้เหนาะๆ
และ สามารถทำเป็นเว็บ Responsive ได้

โดยการเขียนcodeสำหรับเว็บไซต์  ต้องต้องมีความเข้าใจภาษา Html , Css  , Java Script  เคล็ดที่อยากแนะแนวคือการใช้ Css Framwork อย่าง Bootstrap เพื่อลดเวลาในการเขียนของเรา 


โดยย่อใจความ การทำwebsiteด้วยตัวเอง  แค่มีความสามารถการออกแบบ และ การเรียนโค็ดเบื้ยงต้น และ เลือกใช้เครื่องไม้เครื่องมือที่ถูกต้อง จะออมเวลา และ เพิ่มความงดงามได้


คำค้นหาที่เกี่ยวข้อง : convert psd to html

Tags : convert psd to html,ตัดเว็บไซต์