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

[raraymondas]

Advertisement

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

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

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

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


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

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

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

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


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


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

Tags : convert psd to html,psd to html