สำหรับคนทำงานด้านกราฟฟิกหรือเว็บดีไซน์ทั้งหลาย ผมเชื่อว่ามีเกินครึ่งครับที่ใช้ซอฟแวร์ Adobe Photoshop (จะของแท้หรือของเถื่อนนี่ก็อีกเรื่องหนึ่ง) แม้แต่ตามโรงเรียนมัธยมยังมีสอนใช้โปรแกรมนี้เลยครับ ทีนี้ปกติแล้วคนส่วนใหญ่เอามาใช้ตกแต่งรูป ทำแบนเนอร์ ทำกราฟฟิกเล็ก ๆ ใส่ในเว็บมากกว่าที่จะเอามาทำ Layout เว็บทั้งหน้าครับผม วันนี้ผมเลยรวบรวมบทความสอนออกแบบเว็บไซด์ด้วย Photoshop มาให้ไปอ่านกัน

ปกติกระบวนการของเว็บดีไซน์ก็คือ ออกแบบเว็บไซด์ใน Photoshop (ซึ่งเรียนรู้กันได้จากบทความในวันนี้)​ แล้วเอาหน้าเว็บที่ออกแบบมาทำเป็น XHTML/CSS ครับ (อันนี้ลองเอา 960.gs CSS Framework แบบกริด ไปใช้ดูครับ ใช้ง่ายมาก ๆ) หรือถ้าใครไม่เก่ง XHTML/CSS จริง ๆ ก็มีบริการรับแปลงหน้าตาเว็บที่คุณทำใน Photshop ให้เป็นโค้ดครับ ราคามาตรฐานคิดกันอยู่ที่ประมาณ $100 (3,500 บาท) ต่อหน้า อันนี้คือแปลงเป็นโค้ดหน้าเว็บธรรมดานะครับ ถ้าให้แปลงเป็นธีม CMS อย่าง Wordpress/Drupal/Joomla ก็แพงขึ้นไปอีก

อย่างที่บอกไปว่าราคาไม่ใช่น้อย ๆ ครับ เพราะงั้นกว่าจะเก่งด้านนี้ก็ต้องศึกษาเยอะเหมือนกัน แล้วก็อย่าเข้าใจผิดว่ามันเหมือนกับการเอา Slice Tool ใน Photoshop มาหั่นเป็นส่วน ๆ แล้วเซฟเป็น HTML นะครับ เพราะการทำ XHTML/CSS จะเขียนโค้ดหน้าเว็บใหม่หมดครับ แล้วตัดเอาเฉพาะส่วนที่ต้องการใน Layout มาใช้ครับ

สำหรับมือใหม่ก็อย่าเพิ่งรีบเครียดเรื่องการเขียนโค้ดครับ มาดูวิธีการออกแบบเว็บไซด์สวย ๆ ในโฟโต้ช็อปก่อนดีกว่า:

>> 70 บทความสอนออกแบบเว็บไซด์ด้วย Photoshop <<

บทความเว็บดีไซน์อื่น ๆ ที่น่าสนใจ

• [Free Tool] CSS3 Click Chart รวมวิธีใช้ CSS3 แบบเข้าใจง่าย ๆ !!
• [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!!
• [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!!
• [CSS Framework] 960.gs Grid System มาลองใช้กริดดีไซน์หน้าเว็บไซด์กัน!!
• [Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!