เวลาว่างๆ กับการตกแต่งรูป

การออกแบบเว็บไซต์ ตอนที่1 Design with Photoshop

วันนี้จะมาแนะนำการวาง content และวิธีการ Design หน้าเว็บ ซึ่งก็ทำเสร็จออกมาสดๆ ร้อนๆ หากใครที่กำลังออกแบบเว็บอยู่ ก็ลองมาแชร์ผลงานกันนะ

 

เว็บที่ทำนี้เป็นเว็บไซต์เกี่ยวกับสมาคม กลุ่มของนักธุรกิจ SME ในโดเมนที่ชื่อว่า www.e-atmse.com เว็บนี้ออนไลน์อยู่แล้ว ซึ่งหน้าตาอันเดิมจะเป็นสีน้ำเงิน เข้าไปดูกันก่อนได้

 

ทางเจ้าของเว็บ " ต้องการเปลี่ยนเนื้อหา content ใหม่ และเปลี่ยนหน้าตาให้ดูสดใสมากขึ้น " นี่คือโจทย์ของเรา

วิธีคิดของผม ต้องคำนึงถึง ความสวยงาม(อันนี้มันแน่อยู่แล้ว) และการประหยัดการใช้รูปภาพ

 

 * ขอขยายความหน่อย ประหยัดการใช้รูป ก็คือ เวลาที่เราออกแบบเว็บเสร็จ เราจะต้องตัดออกมาเป็นชิ้นๆ แล้วเอาไปวางในโปรแกรม Dream wever ซึ่งถ้าใช้รูปภาพน้อยที่สุด เว็บไซต์เราก็จะโหลดเร็วยิ่งขึ้น (ออกแบบต้องนึกถึงคนเขียนโปรแกรมด้วย ถึงจะเป็นที่ถูกอกถูกใจ web programmer ซึ่งในที่นี้ Web programmer ก็คือผมเองแหละครับ)

 

ON กระดาษ :: ขั้นตอนการร่างหน้าเว็บคร่าวๆ

 

ที่ร่างไว้บนกระดาษ

 

1. เมื่อเราได้โจทย์มาแล้ว ก็มาคิดล่ะ ว่าเนื้อหาอะไรที่ต้องการเพิ่มเติม เขียนออกมาเป็นข้อๆ เขียนใส่กระดาษก็ได้

2. แล้วนำมาเรียงความสำคัญ ว่าอันใหนต้องการให้เด่น ก็จับมาไว้อันแรกๆ

3. ทีนี้ก็เตรียม กระดาษมาร่างคร่าวๆ ขั้นตอนนี้สำคัญนะ สำหรับผม เพราะร่างลงในกระดาษแล้วจะเป็นโครงสร้างของเว็บว่า contain ใหนจะอยู่ในบล็อกใด ส่วนการออกแบบบล็อก นั้นก็ไปคิดตอนทำบนโปรแกรม Photoshop อีกที

4. เมื่อได้ตัวร่างในกระดาษแล้ว ที่นี้ก็ลงมือออกแบบในโปรแกรม Photoshop เลย

 

 

ON photoshop program :: Tips ที่ใช้ในการออกแบบก็จะใช้ brush  photoshop มาช่วย

- คิดสีที่ต้องการ แล้วค่อยๆ ออกแบบไป (เปิดเพลงไปด้วยก็จะดี)

- ออกแบบไปตามโครงสร้าง ที่เราได้ร่างไว้ แล้วจบด้วยการใช้ brush photoshop มาตกแต่ง head ในเว็บนี้จะใช้ Brush ที่ชื่อว่า Skyline Brush (ใช้บ่อยจริงๆ ควรดาวน์โหลดเก็บไว้ประจำเครื่อง เลยทีเดียว) ซึ่ง Brush นี้จะเป็นรูปตัวตึก ใช้ 2 brush ทับซ้อนกัน

 

 

 - และอีกส่วนที่จะทำให้เป็นจุดดึงดูดสายตาก็คือลายพริ้วๆ สีเหมือนกับโลโก้ โดยจะใช้ Pen tool (P) วาดลายเส้นออกมา

 

 

ในส่วนอื่นก็จะเน้นให้ใช้สีเรียบๆ ที่สามารถใช้โค๊ดสีในโปรแกรม Dreamwever แทนรูปภาพได้ (ตามจุดประสงค์ที่อยากให้เว็บโหลดเร็ว) ก็จะได้หน้าตาเป็นแบบนี้ครับ

 

 

ในเวอร์ชั่นออนไลน์คงต้องรอกันต่อไป เพราะตอนนี้งานอื่นเข้าอีกแล้วครับ (- -")

ทำอันนี้ยังไม่เสร็จต้องทำเว็บอื่นต่อ

 

ปล. ผู้เขียนเป็นผู้หญิงนะคะ แต่ที่ลงท้ายด้วยครับ เพราะทำให้อ่านแล้วลื่นหูดีค่ะ หุหุ

LINK ที่เกี่ยวข้อง
เว็บ e-atmse.com :: www.e-atsme.com
เว็บดาวน์โหลด Brush photoshop ที่ใช้ในการออกแบบ :: www.download.ie-mem.com
และ blog ของเจ้าของบทความนี้ :: http://fayjaa.wordpress.com

 

by fayjaa ..ก็ฝ้ายไง