ความผิดพลาดคืออาจารย์ 2

Posts Tagged ‘atsme

การออกแบบเว็บไซต์ ตอนที่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 แทนรูปภาพได้ (ตามจุดประสงค์ที่อยากให้เว็บโหลดเร็ว) ก็จะได้หน้าตาเป็นแบบนี้ครับ

 

e-atsme

 

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

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

 

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

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

 

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

ทำ รูปตกแต่งเว็บ www.e-atsme.com เพื่อทำลิงค์เชื่อมโยงไปยัง Video Conference (ที่จิงก็ webcam นั่นเอง )

งานนี้มีใช้ brush photoshop

brush ที่ใช้ชื่อว่า Skyline Brushes (JCM_skyline!.abr)–> download brush นี้

free brush photoshop

เมื่อดาวน์โหลดมาก็แตก zip ออกแล้วก็อปปี้ brush ไว้ใน C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Brushes

 

เปิด photoshop ขึ้นมา new หน้าขนาด 126×100 pixel แล้วคลิกเลือก brush ที่ Brush tool หรือจะกดคีย์บอร์ดตัวอักษร B ก็ได้ เมื่อคลิกเลือก brush ในเครื่องมือ tools แล้ว ให้คลิกที่แถบ option ด้านบน จะเห็น brush ให้เลือกใช้กันเยอะแยะอยู่แล้ว แต่เราจะใช้ brush ที่เราดาวน์โหลดเข้ามาโดย

คลิกเลือก Mode แล้วคลิกรูปสามเหลี่ยมเล็กๆ เพื่อเลืิอกแบบของ brush ให้เลือก brush ที่ชื่อว่า JCM_skyline!  

ซึ่ง brush ตัวนี้เป็นรูปตึกต่างๆ ให้เลือกตามใจชอบ ด้วยที่ brush ตัวนี้มีขนาดใหญ่มาก จึงต้องลดขนาดโดย กดคีย์บรอ์ด ปุ่ม ” [ ” เพื่อย่อขนาด brush และกดปุ่ม ” ] ” เพื่อเพิ่มขนาด brush เมื่อได้ตามความพอใจแล้วจะได้ดังรูปข้างล่าง

 

หลังจากนั้นก็วาดวงกลมเพื่อทำเป็นแถบสีมนๆ ทับซ้อนกัน

step1 ลดขนาด alpha ลง

step2

แล้วเพิ่มรูปที่ไดคัทมาแล้ว เป็นรูปกล้อง มาเพิ่มเติม

และพิมพ์ข้อความลงไป แล้วก็ทำ animation อีกนิดหน่อย ก็จะได้ดังรูปด้านล่าง

ซึ่งเอาไปใช้ในเว็บไซต์ http://www.e-atsme.com

by fayjaa ก็ฝ้ายไง

ป้ายกำกับ: , ,

หมวดหมู่

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 335 other followers

brush photoshop

Add new tag asp.net atsme banner Blog ไทยโดเมน.in.th brush brush photoshop brush photoshop7 brush photoshop ตึก และ นก brush photoshop นักธุรกิจ Business Marketing Day chiangmai magazine cmhappy cmhappy.com cmtoday cmtoday cmhappy download brush download brushes photoshop CS4 download brush photoshop download บรัช e-atsme flash banner free domani FTP+PHP FW mail meeting menu photoshop brush download PHP RA Red Alert3 reggae sme tab thnic virus web design wordpress Yetii Yuri การทำ flash banner กินเนื้อสด ข้าวยาก หมากแพง ความฝัน ฆ่าควาย ฆ่าหมู่ จ๊อบ บรรจบ ชมรมเว็บมาสเตอร์ & ทำ web ทำเว็บ บรัช โฟโต้ช็อป ประกันชีวิต ปริญญา ปาย สวนบวกหาด สอบกพ สอบภาค ก หนังฆ่าคนดำ หน้าที่ webmaster หมาใจดำ หวยออก 111 หางดง เชียงใหม่ อ.ไชยยันต์ ไชยพร ออกแบบเว็บ เบื่อ เร้กเก้ เลี้ยงดง เว็บ SME เว็บเชียงใหม่ แจก brush photoshop แต่งภาพ แว่นตาเกาหลี แว่นตาแฟชั่น แว่นแฟชั่น
พฤศจิกายน 2019
พฤ อา
« พ.ย.    
 123
45678910
11121314151617
18192021222324
252627282930  

Blog Stats

  • 344,612 hits

ติดตามด้วย Twitter

  • กูบ่าเจื่อบ่าแคว้นมั่ง #กลิ่นกาสะลองep15 #กลิ่นกาสะลอง 3 months ago
  • RT @natthaporn5800: กูรอซีนนี้จนใจจะขาดแล้วอีเหี้ย ความฉิบหายของมึงสองป้อลูก #กลิ่นกาสะลองep14 https://t.co/Vy8tBcrV14 3 months ago
  • มีคนแจ้งแอดมินเพจจอมทองให้เคลียร์ทางให้หมอกับอี่นายเรียบร้อยละ #กลิ่นกาสะลองep12 #กลิ่นกาสะลอง #โอ้ยยยน่อ https://t.co/n5LP9AxYHR 4 months ago
  • ใจ๋หมะดี #กลิ่นกาสะลอง https://t.co/9KHyRz8uy7 4 months ago
  • 😭😭😭หายใจไม่ทั่วท้อง ฮานิบะเห้ย. #กลิ่นกาสะลอง #กลิ่นกาสะลองep10 https://t.co/kjOLfWniFr 4 months ago