[Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้วยโฟโต้ช็อป!!

designil
Web Design Tutorials in Adobe Photoshop

สำหรับคนทำงานด้านกราฟฟิกหรือเว็บดีไซน์ทั้งหลาย ผมเชื่อว่ามีเกินครึ่งครับที่ใช้ซอฟแวร์ 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 <<

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

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด

3 Responses

  1. ขอบคุณครับ ผมทำเป็นแต่โฟโต้ช็อปแหละคับ CSSไม่เคยใช้เลย