29
Jan
2010

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

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 <<

About the author

designil เจ้าของเว็บไซต์ CodeNIL และ DesignIL. มีประสบการณ์ด้านการสร้างเกมส์ด้วย RPG Maker XP/VX และเขียนสคริปต์ RGSS/RGSS2 (Ruby) สำหรับใช้ในเกมส์. ปัจจุบันเป็นฟรีแลนซ์รับทำงานเว็บดีไซน์ และเขียน Web Application โดยใช้ XHTML/CSS/PHP/MySQL. กำลังศึกษาอยู่ที่คณะวิศวกรรมยานยนต์ จุฬาลงกรณ์มหาวิทยาลัย.




บทความ Web Design น่าอ่าน

1 views
Tags: , , , , ,
โพสใน Basic, Graphics, Photoshop, Tutorial

  • http://twitter.com/woraperth/status/8367735368 Woratana Perth

    RT: @designil: [Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้วยโฟโต้ช็อป!! http://bit.ly/9HRICP …

  • VanDesign

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

  • เพลิน

    ขอบคุณมากค่ะ~

  • http://topsy.com/tb/bit.ly/9HRICP Tweets that mention [Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้วยโฟโต้ช็อป!! | DesigNIL — Topsy.com

    [...] This post was mentioned on Twitter by Woratana Perth, DesignIL. DesignIL said: New Blog post [Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้วยโฟโต้ช็อป!! http://bit.ly/9HRICP … [...]

  • moddd

    สนใจเรียนออกแบบเวบกราฟฟิกดีไซน์ ลองเข้าดู>>>>www.artanddesign.ac.th

  • http://www.designil.com เว็บดีไซน์นิล

    เสียดายไม่มีสอนทำ Tableless Design :D

  • http://twitter.com/nhongz/status/10316467694 Nhongz

    [Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้วยโฟโต้ช็อป!! | DesigNIL http://icio.us/hjzfz2

  • http://www.designil.com/60-web-design-tutorials-photoshop-2.html [Photoshop Tutorials] 60 บทความสอนทำเว็บไซด์สวย ๆ ใน Photoshop~!! | DesignIL

    [...] Photoshop กันไปแล้ว ใน [Photoshop Tutorials] 70 บทความสอนออกแบบเว็บไซด์ด้… ซึ่งก็ได้รับผลตอบรับดีพอสมควร [...]

  • http://www.designil.com/44-webdesign-tutorial-photoshop-%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c.html [Photoshop Tutorials] 44 บทความสอนเว็บดีไซน์ใน Photoshop ที่ห้ามพลาด !! | เว็บดีไซน์ สอนออกแบบเว็บไซต์ Web Design

    [...] บทความ คือ 60 บทความสอนเว็บดีไซน์ และ 70 บทความสอนเว็บดีไซน์ [...]

  • http://www.movieseed.net/ ดูหนังออนไลน์

    ขอบคุณครับ ๆๆๆๆๆๆๆๆๆๆ