DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์ » tips & techniques

[Photoshop] รวม 10 Tutorial สอนตกแต่งตัวอักษรเท่ ๆ สวย ๆ

designil — Mon, 27 Jun 2011 16:06:45 +0000

สวัสดีครับ วันนี้ไปเจอ Tutorial (บทความสอน) ทำ Effect ตัวหนังสือ ใน Photoshop เจ๋ง ๆ เลยเอามาแบ่งปันกัน ปกติก็เจอใน Feed เป็นธรรมดาอยู่แล้ว แต่ส่วนใหญ่คุณภาพไม่ค่อยเวิร์กแบบสุด ๆ ครับ เลยจะโพสใน @designil บน Twitter ซะมากกว่า วันนี้เจออันที่คิดว่าเด็ดจริง ๆ เลยเอามาแบ่งปันกันครับ

บทความสอนมีอยู่ 10 บทความครับ ซึ่งก็จะมีดีไซน์หลายแนว ทั้งแบบ น่ารัก สดใส ไปจนถึงแนวหรู ๆ ตัวหนังสือ 3D หรือตัวหนังสือแนวโลกอนาคต (Futuristic) เทคนิคในการตกแต่งตัวอักษรพวกนี้ ยังเอาไปใช้กับงานประเภทกราฟฟิกดีไซน์ (Graphic Design) ได้ด้วย เรียกได้ว่าอ่านทีเดียวได้ประโยชน์สองต่อเลย (แถมงานใน Tutorial นี้ก็สวยพอที่จะเอาไปใช้กับงานจริงได้สบายเลยครับ)

ไปดูกันเลยครับว่ามี Tutorial อะไรกันบ้าง:

รวม 10 บทความสอนแต่งตัวอักษรใน Photoshop

[Video] สอนทำหน้า Facebook Landing Page แบบเข้าใจง่ายมาก ๆ

designil — Thu, 23 Jun 2011 20:41:25 +0000

สวัสดีครับ ต้องขออภัยที่ช่วงนี้หมดมุขเล็กน้อย ไม่รู้จะอัพอะไรดี เนื่องจากเรามีการอัพเดท Content หลายช่องทางมากครับ เช่น บทความต่างประเทศเจ๋ง ๆ หรือเว็บสวย ๆ จะทวีตอยู่ใน @designil ครับ ส่วนหน้า Designil Fanpage ใน Facebook ก็จะมีการอัพเดท Status อะไรไปเรื่อยครับ แต่ก็จะเกี่ยวกับ เว็บดีไซน์ อยู่นะครับ

สำหรับหน้าเว็บหลักเราจะคัดสรรมาลงแค่ที่น่าสนใจจริง ๆ เท่านั้นครับ บางทีก็กรองออกมาจากทวีตใน @designil อีกทีนึง (จริง ๆ ที่ทวีตออกไปก็น่าสนใจในระดับหนึ่งอยู่แล้วครับผม)

Video สอนทำหน้า Facebook Fanpage

สิ่งที่ไปเจอมาเมื่อวานนี้เป็นวีดิโอสอนทำหน้า Facebook Fanpage ครับ ซึ่งที่บอกว่า “สอนทำ” หมายถึง สอนเอาดีไซน์ที่เสร็จเรียบร้อยแล้ว เข้ามาใช้ใน Facebook ครับผม

วีดิโอมีความยาว 38 นาทีครับ ออกจะยาวไปสักหน่อย แต่เมื่อคืนผมก็นั่งดูจนจบครับ รับรองว่าดูจบแล้วทำเป็นชัวร์ ๆ ถ้าไปลองหาทางเองยังไงก็เสียเวลามากกว่า 38 นาทีแน่นอนครับ

อันนี้เป็นหน้าที่ผมลองทำดู หลังจากดูวีดิโอจบครับ >> DesignIL Say Hi: Facebook Landing Page

สิ่งที่วีดิโอนี้จะสอน มีดังนี้ครับ:

เอาดีไซน์ HTML CSS ที่เราทำเสร็จแล้ว เข้าไปใส่ใน Facebook Page
สอนตั้งค่าตอนสร้าง Facebook App และตอนเอา App มาใส่ใน Page อีกที (Setting มันเยอะครับ ดูวีดิโอแล้วช่วยได้มาก)
ปกติ Facebook App ยอมให้หน้าต่างสูงสุดแค่ 800px เท่านั้น วีดิโอนี้จะสอนวิธีแก้ให้มันยาวได้ตามดีไซน์เรา
สอนดึงข้อมูลพื้นฐานจาก Facebook PHP SDK เช่น เช็คว่าถ้าคนยังไม่กด LIKE เพจเราให้แสดงรูปชวนกด LIKE

ถ้าสิ่งเหล่านี้เป็นสิ่งที่ยังไม่รู้ และสนใจอยากจะรู้ ดูวีดิโอได้เลยครับ

How to Design and Program a Facebook Landing Page from NoupeMag on Vimeo.

หากมีข้อสงสัยอะไรในการทำ Facebook Page ตามวีดิโอนี้ สามารถสอบถามได้เลยนะครับ ^^

เทคนิคสั่ง Web Browser โหลดไฟล์ CSS ใหม่ทุกครั้งที่เราอัพเดท!!

designil — Sat, 26 Mar 2011 12:05:15 +0000

สวัสดีครับ เนื่องจากช่วงนี้ก็ติดภารกิจอะไรหลาย ๆ อย่างเลยมาอัพช้าสักหน่อยก็ต้องขออภัยด้วยนะครับ วันนี้พอดีไปเจอเทคนิค CSS เจ๋ง ๆ โดยบังเอิญระหว่างการเล่นกับ HTML5 เลยเอามาแบ่งปันกันครับ ก่อนอื่นมาดูกันก่อนว่าบราวเซอร์มีปัญหาอะไร ทำไมถึงต้องใช้ CSS Versioning นะครับ

Web Browser ไม่ยอมรีเฟรชไฟล์ CSS?

โดยปกติแล้วเนี่ย ถ้าเราไม่สั่งให้บราวเซอร์เปิดระบบ No Cache บราวเซอร์จะทำการแคช (เก็บ) ไฟล์ CSS ไว้ (สำหรับ Firefox ผมใช้วิธีลงปลั๊กอินชื่อ Web Developer แล้วไปตั้งค่า ส่วนบราวเซอร์อื่นผมไม่ทราบครับ) ซึ่งพอเว็บบราวเซอร์แคชไฟล์ไว้จะทำให้เกิดปัญหาว่า พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

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

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน ของเราเป็นแบบนี้นะครับ:

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

แค่นี้ทุกครั้งที่เราอัพเดท CSS คนเข้าก็จะเห็น CSS ใหม่แล้วครับ โดยสิ่งที่เราต้องทำก็แค่แก้เลขเวอร์ชั่นจุดเดียวเท่านั้นเอง

เทคนิคนี้หลายคนอาจทราบกันแล้ว แต่เชื่อว่าส่วนใหญ่น่าจะยังไม่รู้กันครับ ถ้าชอบไม่ชอบยังไงก็มาบอกกันได้ครับผม หรือใครมีเทคนิคอะไรเจ๋ง ๆ ก็แนะนำมาได้เลยครับ ขอบคุณมากครับ

UPDATE วิธีที่ไม่ต้องมานั่งแก้ตัวเลขเวอร์ชั่นเอง

เนื่องจากว่า @dtinth แนะนำเทคนิคดี ๆ มาทางทวิตเตอร์ครับ โดยเป็นการใช้โค้ด PHP ในการตั้งเลขเวอร์ชั่น = วันเวลาที่อัพเดทไฟล์ CSS โดยอัตโนมัติครับ ซึ่งเทคนิคนี้จะใช้ได้เฉพาะกับไฟล์ PHP เท่านั้นนะครับผม โค้ดด้านล่างสามารถก็อปไปแปะใช้ได้เลยครับ

ขอบคุณ @dtinth สำหรับเทคนิคดี ๆ ครับ

[Quality Check] เทคนิคเด็ด!! เช็คคุณภาพเว็บดีไซน์ใน 30 วินาที!!

designil — Sat, 03 Jul 2010 05:06:13 +0000

เว็บดีไซน์เนอร์แต่ละคนก็มีสไตล์การดีไซน์เว็บไซด์แตกต่างกันไปครับ แต่สุดท้ายแล้วเว็บไซด์ที่ออกมาก็มีเป้าหมายเดียวกัน นั่นคือ แสดงข้อมูลที่เราต้องการด้วยวิธีใดวิธีหนึ่ง (รูปภาพ ตัวหนังสือ การจัดวาง ฯลฯ)

วันนี้ได้ไปเจอบทความของ ZURB ครับ ซึ่งบทความนี้แนะนำวิธีเด็ด ๆ ต่าง ๆ ที่เอาไว้เช็คคุณภาพเว็บดีไซน์ของเรา ว่าเว็บไซด์ของเรานำเสนอข้อมูลออกมาได้ตรงจุดมั้ย และสร้าง First Impression แค่ไหน ซึ่งผมได้เลือกวิธีทั้งจากในบทความ และจากคอมเม้นท์ต่าง ๆ ที่น่าสนใจมาเสนอครับ

1. ดูว่าตามองที่ไหนเป็นที่แรก?

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

2. อ่านเว็บไซด์จากซ้ายบน -> ขวาล่าง

คนส่วนใหญ่เวลาดูเว็บไซด์มักจะมองจากมุมซ้ายบน ไปจนถึงมุมขวาล่าง (ซึ่งบางประเทศอาจจะตรงข้ามกัน) เนื่องจากสมองของมนุษย์เตรียมรับข้อมูลจากมุมบนซ้ายถึงมุมขวาล่างอยู่แล้ว การเรียงข้อมูลบนเว็บไซด์ก็ควรจะเป็นไปตามลำดับที่ถ้าอ่านในทิศทางนั้นแล้ว จะเข้าใจง่าย

3. ทริค “5 อย่าง”

เปิดหน้าแรกของเว็บไซด์คุณขึ้นมา ดูหน้าเว็บไซด์ 5 วินาทีแล้วปิด จากนั้นลิสต์ 5 อย่างแรกที่จำได้ลงบนกระดาษ ซึ่งสิ่งที่คุณควรจะจำได้ก็คือสิ่งที่คุณอยากให้ลูกค้าจำได้ สมองของมนุษย์จะจดจำข้อมูลส่วนใหญ่ได้ในระยะเวลาสั้น ๆ เท่านั้น และคนเข้าเว็บไซด์ส่วนใหญ่ก็จะไม่มีเวลาอ่านเนื้อหาจนครบทั้งหน้า เพราะฉะนั้นสิ่งที่ควรเห็นอย่างแรก ๆ ในเว็บไซด์จะต้องเป็นสิ่งสำคัญมาก

เพิ่มเติม: เว็บไซด์ FiveSecondTest ให้บริการคล้าย ๆ อันนี้ ฟรี! (แบบเสียเงินก็มี) โดยเราสามารถโพสรูปหน้าเว็บไซด์ของเรา รอให้คนมาทำการทดสอบด้วยวิธีดูหน้าเว็บเรา 5 วินาที แล้วคลิกบนจุดที่เด่นที่สุดบนเว็บไซด์เรา (เราสามารถเป็นฝ่ายทำการทดสอบเว็บไซด์คนอื่นได้ เพื่อเก็บเครดิตมาซื้อบริการแบบเสียเงินบนเว็บไซด์นี้)

เทคนิคที่ผมคิดว่าน่าสนใจก็มีเท่านี้ครับ ใครที่มีเทคนิคในการเช็คของตัวเองแบบไหนก็เอามาแบ่งปันกันหน่อยนะครับ~!!

[Graphic Design] กราฟฟิกดีไซน์กับจิตวิทยามนุษย์ (part I)

LuviKunG — Tue, 29 Jun 2010 14:43:34 +0000

ก่อนอื่นต้องขอโทษด้วยครับที่อัพเดทช้า ที่สัญญากันไว้ว่าจะอัพให้หลังจาก 1 สัปดาห์ผ่านมา แต่กลับเป็น 1 เดือนไปซะงั้น เนื่องจากผมมีงานเข้าอย่างแรงครับ จึงต้องรีบทำงานให้เสร็จก่อน (และรับเงินไปซื้อ psp มานั่งเล่น…)

คราวนี้เราจะมาพูดถึงกราฟฟิกดีไซน์กับจิตวิทยาของมนุษย์กัน ซึ่งเป็นเรื่องสำคัญต่อนักกราฟฟิกดีไซน์เนอร์โดยตรง หรืออาจเป็นสายอื่นๆเช่น นักคำนวน นักวิทยาศาสตร์ หรือนักร้อง ก็ย่อมทำได้นะครับ (เว่อร์ไปมั้ง…)

บทความนี้มีเนื้อหาค่อนข้างยาว ดังนั้นผมจะแบ่งออกเป็น 7 ตอนใหญ่ๆด้วยกัน ซึ่งตอนนี้ผมจะนำเสนอตอนแรกกันก่อน

ปฐมบทจิตวิทยาของมนุษย์

จิตวิทยา คือศาสตร์ที่ว่าด้วยการศึกษาเกี่ยวกับจิตใจ (กระบวนการของจิต) , กระบวนความคิด, และพฤติกรรม ของมนุษย์ด้วยกระบวนการทางวิทยาศาสตร์ เนื้อหาที่นักจิตวิทยาศึกษาเช่น การรับรู้ (กระบวนการรับข้อมูลของมนุษย์) , อารมณ์, บุคลิกภาพ, พฤติกรรม, และรูปแบบความสัมพันธ์ระหว่างบุคคล จิตวิทยายังมีความหมายรวมไปถึงการประยุกต์ใช้ความรู้กับกิจกรรมในด้านต่าง ๆ ของมนุษย์ที่เกิดขึ้นในชีวิตประจำวัน (เช่นกิจกรรมที่เกิดขึ้นในครอบครัว, ระบบการศึกษา, การจ้างงานเป็นต้น) และยังรวมถึงการใช้ความรู้ทางจิตวิทยาสำหรับการรักษาปัญหาสุขภาพจิต นักจิตวิทยามีความพยายามที่จะศึกษาทำความเข้าใจถึงหน้าที่หรือจุดประสงค์ ต่าง ๆ ของพฤติกรรมที่เกิดขึ้นจากตัวบุคคลและพฤติกรรมที่เกิดขึ้นในสังคม ขณะเดียวกันก็ทำการศึกษาขั้นตอนของระบบประสาทซึ่งมีผลต่อการควบคุมและ แสดงออกของพฤติกรรม^[1]

จิตวิทยาเป็นศาสตร์ที่ศึกษาค้นคว้าเพื่อนำข้อมูลความรู้มาเสนอ อธิบาย และเพื่อควบคุมและเปลี่ยนแปลงพฤติกรรมของมนุษย์และสัตว์ จิตวิทยามุ่งศึกษาด้านความสัมพันธ์ระหว่างกระบวนการของร่างกายกับจิตใจ ด้วยวิธีการทางวิทยาศาสตร์ที่เป็นระเบียบแบบแผน เพราะร่างกายและจิตใจมักมีการแสดงออกร่วมกัน อีกทั้งยังแสดงออกในแนวทางที่สามารถทำนายได้^[1]

จิตของมนุษย์

มีอยู่ 3 แบบด้วยกันคือ

1.จิตสำนึก (Conscious) คือจิตที่เราสามารถระลึกได้ คิดได้ ควบคุมได้ เป็นจิตที่เสมือนอยู่บนผิวน้ำ
2.จิตใต้สำนึก (Subconscious) คือจิตที่เราไม่สามารถระลึกได้ ควบคุมไม่ได้ แต่จะทำได้ก็ต่อเมื่อมีสมาธิในระดับหนึ่ง หรือถูกระลึกขึ้นมาโดยสิ่งเร้า เช่น รูปภาพตอนคุณยังเด็กๆ เป็นต้นฯ จิตนี้เสมือนปลาที่ว่ายอยู่ภายในน้ำ อยู่ระหว่างผิวน้ำและก้นบึง
3.จิตไร้สำนึก (Unconscious) คือจิตที่เราไม่สามารถระลึกได้ เป็นจิตที่ไร้การควบคุม ไร้ความคิด ไร้ตัวตน เป็นจิตที่อยู่ลึกที่สุด เสมือนก้นบึงมหาสมุทร

จิตวิทยาที่สัมพันธ์กับกราฟฟิกดีไซน์

แบ่งออกเป็น 4 อย่างด้วยกัน คือ

1.สี (Color)
2.ขนาด (Size)
3.ลักษณะปรากฎ (Texture)
4.รูปแบบการทำงาน (Technical)

สี (Color)

สีเป็นสิ่งสำคัญสำหรับการกำหนดภาพลักษณ์ (Imagination) ของผลงาน เป็นสิ่งที่มีการเชื่อมต่อ (Resonance) ระหว่างผลงานและผู้สัมผัส (Human) โดยผู้สัมผัสจะถูกคล้อยตามไปทางจิตวิทยาด้านสีที่กำหนดในผลงาน เช่น ถ้าสีใช้โทนร้อน (Hot-Tone Color) ผู้สัมผัสจะมีกระบวนการทางความคิดภายในจิตสำนึกหรือจิตใต้สำนึก สร้างอารมณ์และความคิดขึ้นมาต่อชิ้นงาน โดยในที่นี้หมายถึงผลงานคือสิ่งเร้านั่นเอง

ผลงานหรือชิ้นงานของคุณอาจเป็นรูปปั้น รูปวาด รูปถ่าย หรือ รูปแบบเว็บไซท์ที่ได้ออกแบบไว้ก็ได้

บทบาทของสี อย่างที่ได้กล่าวมาข้างต้น สีมีบทบาทด้านการแสดงอารมณ์และความคิดมาเป็นอันดับหนึ่ง รองลงมาเป็นขนาดและลักษณะปรากฎ สีเป็นพื้นฐานเกี่ยวกับการควบคุมระบบในสมอง มีการเชื่อมต่อกับสิ่งเร้าตลอดเวลา เมื่อขณะคุณใช้สายตามอง กระบวนการทางสมองก็จะแปรตามความคิดที่เกิดขึ้น เช่น เด็กอายุ 3-4 เดือนที่นั่งเล่นของเล่นหลากสี เหตุที่ทำแบบนั้นก็เพื่อให้เด็กมีการควบคุมระบบในสมองด้วยตนเองตั้งแต่เกิด

เราต้องรู้จักการควบคุมสี ซึ่งเป็นปัจจัยสำคัญต่อการออกแบบหรือดีไซน์ชิ้นงานหรือผลงาน การหัดมองสีและเรียกชื่อจึงเป็นสิ่งสำคัญ คุณต้องรู้การควบคุมโทนสี การกะโทนสี การวางโทนสี การเรียงโทนสี เป็นต้นฯ

http://www.colourlovers.com/ เป็นเว็บไซท์หนึ่งที่มีนักเชี่ยวชาญด้านการออกแบบโทนสี จัดสรรโทนสีให้กับนักดีไำซน์เนอร์ทั้งมือใหม่และผู้ที่คิดโทนสีไม่ออก ซึ่งท่านสามารถเข้าไปดู และสังเกตการออกแบบโทนสีได้เป็นตัวอย่าง

ทฤษฎีสี

มีอยู่หลายทฤษฎี ซึ่งท่านสามารถหารายละเอียดได้ที่ Google แต่ในที่นี้ผมจะยกตัวอย่างทฤษฎีแค่ 2 อย่างที่ผมใช้อยู่เป็นประจำ

1.Percentage Color & Lightening

การกำหนดค่าสีออกมาเป็นสัดส่วนร้อยละ (เปอร์เซ็นท์) และการกำหนดความสว่างของสี เช่น 60/30/10 ที่ใช้กันทั่วไปตามการตกแต่งห้องหรือตกแต่งบ้าน^[2] หรือ 50/30/20 ที่ใช้กันตามเว็บไซท์ชื่อดัง (เช่น Facebook) หรือ 90/4/4/2 ซึ่งเป็นทฤษฎีสีของเว็บไซท์ Google นั่นเอง

การกำหนดค่าออกมาเป็นสัดส่วนร้อยละ มีประโยชน์ด้านการวัดขนาดและลักษณะด้วย อาจทำให้การทำงานง่ายขึ้น และมองภาพลักษณ์ได้ชัดเจนมากขึ้น

การกำหนดค่าความสว่างของสีก็เช่นกัน ในแต่ละสัดส่วนที่เรากำหนด เราจะต้องควบคุมสีให้มีความเข้มหรืออ่อนที่เข้ากับสีอื่นๆที่อยู่ข้างเขียง หรือที่เรียกว่าการทำให้เกิดการคู่ขนานของสี (Parallel Color)

Verdin
by pinkcoma

2.Luvi’s Color Creation Laws

เป็นทฤษฎีที่ผมเขียนขึ้นมาเอง ท่านสามารถนำไปใช้ได้โดยไม่ต้องขออนุญาติจากผม ซึ่งวิธีนี้จะคล้ายๆกับวิธีข้างต้น แต่จะทำให้คุณมองได้ง่ายขึ้น

การทำตามทฤษฎีนี้จะต้องทำเป็นลำดับขั้นตอนอย่างน้อย 4 ขั้นตอนจาก 7 ขั้นตอน ซึ่งจะมีดังนี้

1.กำหนดขอบเขตของโทนสี คิดถึงอารมณ์และความรู้สึกของสี จากนั้นร่างสีออกมาตามจินตนาการที่คุณเห็น
2.วางสีโดยใช้สีที่คุณจินตนาการไว้ จากมากที่สุดไล่ไปจนถึงน้อยที่สุด (จะได้ออกมาเป็นสัดส่วนร้อยละ)
3.ค่อยๆเรียบเรียงสีที่ไม่มีความจำเป็นออกไป หรือมีความจำเป็นน้อยให้ไปอยู่ด้านหลังสุดของลำดับ
4.ลองค้นหาสีที่ใกล้เคียงกับสีหลัก แล้วค่อยๆใส่ลงไป อาจใช้ทฤษฎี Secant, Triangle, Quadable, Gradient ช่วยก็ได้ (โดยเทียบกับวงกลมสี) จากนั้นใส่เข้าไปในชุดสีที่คุณได้เรียงไว้
5.ใส่สีที่อยู่ตรงข้ามกับสีหลักของคุณอย่างน้อย 1 สีเข้าไป (เช่นสีหลังคุณเป็นสีน้ำเงิน คุณต้องใส่สีเหลืองเข้าไปด้วย)
6.ปรับความสว่างและความเข้มให้ไล่เรียงกัน ไม่ควรนำสีหลักของคุณเป็นสีสว่าง (ควรเข้มไว้เพื่อให้สีเด่น)
7.ถ้าเป็นคอมพิวเตอร์กราฟฟิก ให้จดจำ HEX Color Code ไว้ (เป็นเลขฐาน 16 เรียงกัน 6 ตัว) ส่วนถ้าเป็นกราฟฟิกที่ไม่เกี่ยวกับคอมพิวเตอร์ ให้หาชื่อสีที่ค้างเคียงและจดจำ (ซึ่งขั้นตอนนี้เป็นสิ่งสำคัญที่สุด เพราะคุณอาจนำกลับมาใช้ใหม่ได้อีกครั้ง)

บทความหน้า ผมจะมาสอนเกี่ยวกับการควบคุมสีและการเลือกใช้สี โดยใช้ Color Circle และการใช้ตารางสี HEX Color Code โดยใช้ชื่อสามัญในการเทียบ ซึ่งจะเป็นขั้น Advance สำหรับผู้เชี่ยวชาญด้วย (อาจมีการใช้ศัพท์เฉพาะปะปนเข้าไป) ส่วนวันนี้ผมขอตัวไปทำงานต่อละครับ

ป.ล. ก่อนไปจากบทความนี้ ให้สังเกตดีๆครับ เกี่ยวกับหน้าแรกของบทความนี้ จะเห็นว่ามีความผิดปกติไปเกี่ยวกับตัวอักษร “อ่านบทความนี้…” ซึ่งจะใหญ่กว่าทั่วไปที่เคยทำมา นั่นก็เป็นจิตวิทยาครับ แต่อยู่ในหมวดหมู่ของขนาดและลักษณะปรากฎ ซึ่งจะทำให้เนื้อหาดูน่าอ่านมากขึ้นครับ

LuviKunG

อ้างอิง :

[1] http://th.wikipedia.org/wiki/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2

[2] http://www.thaihomelist.com/viewarticle.php?lg=th&pid=33

[Free Tool] CSS3 Click Chart รวมวิธีใช้ CSS3 แบบเข้าใจง่าย ๆ !!

designil — Mon, 14 Jun 2010 08:34:45 +0000

สำหรับใครที่ยังไม่รู้ว่า CSS3 คืออะไร และทำอะไรได้บ้าง แนะนำให้ไปลองอ่านบทความสอนพื้นฐาน CSS3 กันก่อนครับ

ถ้ารู้สึกว่าตัวเองเข้าใจ CSS ในระดับหนึ่ง และพอรู้แล้วว่า CSS3 พอจะทำอะไรได้บ้าง ก็มาลองดูกันว่าความสามารถของ CSS3 ยังมีอะไรอีกบ้างที่คุณยังไม่รู้!! ซึ่งเว็บไซด์ที่ผมไปเจอมานี้ รวมคำสั่ง CSS3 เอาไว้เยอะมาก พร้อมรูปประกอบ โค้ดตัวอย่างการใช้ และระบุชัดเจนว่าบราวเซอร์เวอร์ชั่นไหนบ้างที่รองรับคำสั่งแต่ละอัน

สนใจคำสั่งไหนก็คลิกบนหัวข้อคำสั่งนั้นเลยครับ จะมีโค้ดตัวอย่างอย่าง และข้อมูลเกี่ยวกับคำสั่งนั้นโผล่ขึ้นมาให้ดู

ในการเข้าชมเว็บไซด์นี้ แนะนำให้ใช้บราวเซอร์ใหม่ ๆ หน่อยนะครับ เว็บบราวเซอร์ที่เค้าแนะนำก็คือ Chrome 4+, Safari 4+, หรือ Firefox 3.6+ ครับผม (สำหรับคนที่อยากเป็นเว็บดีไซน์เนอร์ แต่ใช้ Internet Explorer มาตลอด… แนะนำให้เปลี่ยนด่วนเลยครับ!)

>> CSS3 Click Chart by Impressive Webs <<

[Webdesign ETC] 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์

LuviKunG — Tue, 01 Jun 2010 15:26:56 +0000

ในหัวข้อนี้จะอธิบายเกี่ยวกับการเป็นเว็บดีไซน์เนอร์ที่มีคุณภาพ หรือการเป็นเว็บดีไซน์เนอร์ที่ทำงานแล้วมีความผิดพลาดน้อยและมีความรอบคอบในการทำงานสูง โดยผมได้แจกแจง 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์ ไว้ให้ผู้อ่านได้ทำความเข้าใจได้ง่ายขึ้นไว้แล้ว ผู้อ่านสามารถนำตัวอย่างที่อยู่ภายใน 5 ข้อนี้ไปใช้ได้โดยไม่ต้องได้รับอนุญาติจากผู้เขียน แต่ขอความกรุณาเอาไปใช้ในทางที่ถูกต้องด้วยครับ

มาเริ่มกันเลยดีกว่า กับ 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์ ว่ามีอะไรกันบ้าง?

1.ทำงานให้ดี อันนี้ใกล้ตัวกับทุกคนมาก ข้อแรกคือคนที่ทำงานด้านดีไซน์ไม่เป็นมักจะใช้โค๊ดที่สิ้นเปลืองเนื้อที่(หมายถึงขนาดไฟล์ก็ใหญ่เพิ่มไปด้วย) ข้อที่สองคือทำงานโดยไม่สนใจความผิดพลาดของโค๊ด(แบบว่า กุทำแบบนี้มีปัญหาไรฟ่ะ!) และอันดับสุดท้ายคือเลือกใช้โค๊ดไม่เป็น(มือใหม่มักจะเป็นกันแทบทั้งหมด) ซึ่งผมได้ยกตัวอย่างให้ท่านสังเกตไว้ด้านล่าง

ตัวอย่างที่ไม่ดี

โปรดเลือกอายุ

ตัวอย่างที่ดี

โปรดเลือกอายุ

ซึ่งผลออกมาก็มีความเหมือนกันทุกประการ เพียงแต่เรียงลำดับ ใช้โค๊ดให้ถูกต้อง

2.เลือกโปรแกรมให้ถูก เว็บดีไซน์เนอร์มักมีปัญหาเรื่องการเลือกใช้โปรแกรมและการเรียนรู้โปรแกรมที่ถูกต้อง ประเด็นไม่ได้อยู่ที่ตัวโปรแกรม แต่อยู่ที่ความถนัดของเว็บดีไซน์เนอร์ว่าคุณถนัดโปรแกรมอะไร เลือกใช้โปรแกรมอะไร ซึ่งบางโปรแกรมถ้าเว็บดีไซน์เนอร์เลือกไม่ดี อาจเกิดบัคขึ้นได้ หรืออาจเกิดปัญหาด้านการใช้งานไม่สะดวก เช่น การเซฟไฟล์ซึ่งมีการเซฟแบบ ASCII กับ UTF-8 ซึ่งคุณก็ต้องพิจารณาความแตกต่างระหว่างการเซฟ 2 แบบนี้ด้วย(ลองเปิด Notepad แล้วเซฟไฟล์ดู จะมีให้เลือกด้านล่างว่าจะเซฟเป็นแบบไหน) หรืออาจเป็นการเลือกชนิดไฟล์ของภาพ ซึ่งส่วนใหญ่มักจะใช้ JPG GIF และ PNG เป็นหลัก

อย่าใช้ความถนัดโปรแกรมแค่ 1 อย่าง พยายามเรียนรู้โปรแกรมอื่นๆไว้เพื่อคุณจะได้มีความหลากหลายในการดีไซน์ หรือเพิ่มความยืดหยุ่นให้กับทักษะของตน เช่น ถ้าคุณถนัด Photoshop แล้ว ลองหัดโปรแกรมอื่นๆไว้ด้วย เช่น Firework, Namo Web Canvas, Inkscape เป็นต้นฯ

3.มีความรู้ด้านดีไซน์เนอร์ เรียกว่าสำคัญที่สุดเลย คุณจะต้องรู้เรื่องเกี่ยวกับทุกด้านในการทำเว็บไซน์หรือกราฟฟิกดีไซน์เนอร์ด้วย เช่น คุณจะต้องตอบได้ว่า JPG คืออะไร, เป็นไฟล์แบบไหน, มีคุณสมบัติอย่างไร, ต่างกับ GIF และ PNG อย่างไร หรือคุณจะต้องรู้ว่า HTML ย่อมาจากอะไร, tag ใน HTML คืออะไร,

ใว้ใช้ทำอะไร เป็นต้นฯ

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

4.วางแผนการทำงาน ถ้าคุณจำเป็นต้องทำงานที่มีการสร้างเว็บเพจหลายๆหน้า หรือเขียนระบบ PHP ออกมาขนาดใหญ่ ประเด็นนี้จะสำคัญ คุณจะต้องมีกระดาษและปากกา ในการวาดรูปตารางหรือวาดมายน์แมพ(Mind Map)ขึ้นมาและเริ่มวางแผน เรียงลำดับ จัดความสำคัญ และเริ่มลงมือทำตามแผนที่คุณเขียนไว้ ถ้าคุณได้วางแผนไว้ดี ผลงานของคุณก็จะออกมาดีตามด้วย แต่ผมเชื่อว่ายังไงก็ต้องมีข้อผิดพลาดอยู่บ้างอย่างแน่นอน พยายามค่อยๆแก้ไปเรื่อยๆจนกว่าผลงานของคุณจะไร้ที่ติ!

ถ้าคุณไม่รู้ว่าจะเริ่มวางแผนยังไง ลองคิดดูว่าส่วนไหนของเว็บไซท์หรือ PHP ที่คุณต้องเขียนและสำคัญที่สุด เช่น อาจเป็นไฟล์หน้าแรก (index.htm / index.php) หรืออาจเป็นการดีไซน์หน้าเว็บก็จัดลำดับ 4 ขั้นตอน (head / menu / content / footer) เป็นต้นฯ แล้วค่อยๆเริ่มขยายความไปเรื่อยๆ จนคุณคิดว่าคุณได้วางแผนงานของคุณเสร็จเรียบร้อยแล้ว!

5.วางยาหลอก ดูเหมือนว่าวิธีนี้จะชั่วนิดหน่อย(หรืออาจจะมาก?) แต่เป็นวิธีที่ดีมากๆครับ เวลาคุณทำงานพวกดีไซน์แล้วคุณโดนเจ้านายงานหลอกหรือโดนโกง อย่างน้อยคุณก็ยังใช้ทริกส์นี้ได้ครับ ยกตัวอย่างง่ายๆเช่น คุณสร้างเว็บไซท์ PHP ขึ้นมาสมบูรณ์ แล้วส่งงานให้เจ้านายงาน แล้วเขาไม่จ่ายเงินคุณค่าทำ คุณก็วางยาโดยการอาจใส่โค๊ดบัคใน PHP ที่คุณทำ หรือจงใจเขียนโค๊ดที่ทำให้ PHP นั้นไม่ทำงาน แล้วสั่งให้มันทำงานปั่นป่วนภายในเว็บไซท์ที่ได้อัพโหลดไว้

ยกตัวอย่าง Code PHP ที่ไว้วางยา โดยภายในไฟล์ config.php นั้นต้อมีค่า $buy ไว้ อาจเป็นค่า null ก็ได้ (หมายถึงถูกเซตไว้อยู่ดี)

";
    }
    else {
      echo "ไม่จ่าย โค๊ดนี้ก็ยังอยู่นะโว้ย!!
"; /* ให้มันสลับคำพูดไปมาเรื่อยๆจนมันครบ 1 พันล้านครั้ง */
    }
  }
}
?>

การเป็นเว็บดีไซน์เนอร์ที่ดีนั้น ไม่จำเป็นต้องพึ่งพาทั้ง 5 ข้อนี้ก็ได้ เพราะยังมีอีกหลายวิธีที่สามารถทำให้เราเป็นเว็บดีไซน์เนอร์ที่ดีได้ อีกอย่างควรพึงระลึกความถูกต้องเข้าไว้ ชีวิตในการทำงานด้านเว็บดีไซน์เนอร์ของคุณก็จะรุ่งเรืองเองครับ และข้อที่สำคัญ เชื่อมั่นในตัวเองและผลงานของตัวเองไว้ ถ้าใจคิดว่างานของตนยังไม่ดีพอ ก็เริ่มลงมือพยายามแก้ไขงานของตนให้พึงพอใจอย่างที่ใจคิดไว้ และข้อที่สำคัญที่สุดคือ อย่ากลัวที่จะเรียนรู้สิ่งใหม่ๆครับ

LuviKunG

PS : http://w3schools.com/ เว็บสอนเกี่ยวกับการทำเว็บไซท์ครับ มีครบทุกภาษา เช่น HTML, HTML5, XHTML, CSS, PHP, ASP, JavaScript, MySQL และอีกหลายอย่าง ถ้าสนใจศึกษาลองทนอ่านภาษาอังกฤษดูนะครับ เว็บนี้สอนเข้าใจง่ายสุดแล้วครับ

â»Ã´àÅ×Í¡ÍÒÂØ

[Graphic Design] กราฟฟิกดีไซน์สำคัญกับทุกอย่าง!?

LuviKunG — Wed, 26 May 2010 13:52:30 +0000

จริงหรือที่กราฟฟิกดีไซน์สำคัญกับทุกอย่างในโลก?

ลองมองรอบๆตัวคุณสิครับว่า มีอะไรบ้างที่เป็นกราฟฟิกดีไซน์บ้าง? เช่น ขวดน้ำที่มีฉลากโลโก้สินค้า, กรอบรูปที่คุณโปรด, หน้าปกหนังสือที่มีสีสัน ฯลฯ ทุกอย่างถูกสร้างขึ้นมาโดยการออกแบบทางศิลปะที่เรียกว่า “กราฟฟิกดีไซน์”

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

แล้วกราฟฟิกดีไซน์สำคัญกับโลกเราอย่างไร?

ลองมองไปรอบตัวคุณสิครับ ถ้าสมมุติว่าทุกอย่างไม่มีสีสัน ทุกอย่างเป็นสี่เหลี่ยมแข็งๆทื่อๆ หรืออาจจะเป็นทรงกลมเพียงอย่างเดียว มันก็คงจะไม่เข้าหูเข้าตากับชีวิตประจำวันของเราแน่ๆ

ทำไมกราฟฟิกดีไซน์ถึงถูกใช้ขึ้นมาในโลก ก็เพราะว่า “มนุษย์มักจะชอบความแตกต่างเสมอ” หมายถึงชีวิตของมนุษย์จะไม่คงอยู่กับที่ จะไม่คงอยู่กับสิ่งเดิมๆที่เห็นตลอด (ยกเว้นเรื่องสามี-ภรรยา) ดังนั้นจึงมีคนที่สามารถคิดออกแบบสิ่งที่เปลี่ยนแปลงไปจากเดิม หรือที่เรียกว่า ครีเอเตอร์ (Creator) หรือในสมัยนี้เรียกใหม่กันว่า ดีไซน์เนอร์ (Designer)

ดูๆไปเหมือนคำว่า ครีเอเตอร์ จะไม่คุ้นหูคุ้นตาเราในชีวิตประจำวันสักเท่าไหร่ ไม่เหมือนกับ ดีไซน์เนอร์ ที่เมื่อพูดถึงชื่อก็ต้องร้องอ๋อกันทุกคน ปกติ ครีเอเตอร์ ไว้เรียกคนที่มีความสามารถสร้างสรรค์สิ่งต่างๆได้โดยใช้ความคิดด้านตรรกศาสตร์เพียงอย่างเดียว (เช่น วิศวกร, นักสถาปัตย์ เป็นต้นฯ)

องค์ประกอบของกราฟฟิกสำหรับดีไซน์เนอร์มีอะไรบ้าง?

องค์ประกอบจะถูกจัดให้เป็นหมวดใหญ่ๆอยู่ 5 หมวดด้วยกันคือ

1. รูปร่าง
2. สีสัน
3. ขนาด
4. องค์ประกอบ
5. ความหลากหลาย

รูปร่าง เป็นความสำคัญอันดับหนึ่ง ถ้าพูดถึงการออกแบบเว็บไซท์ก็คือ “คุณจะทำอย่างไรให้เว็บไซท์ของคุณดูมีความเป็นเอกลักษณ์ตรงกันมากที่สุด” เช่น ถ้าคุณออกแบบเว็บไซท์เกี่ยวกับเกมส์ คุณจะต้องออกแบบรูปร่างเว็บไซท์ให้เข้ากับเกมส์มากที่สุด

สีสัน เป็นความสำคัญรองลงมา สีให้อารมณ์ที่หลากหลาย ดังนั้นจึงต้องเข้ากับสิ่งที่คุณได้ออกแบบไว้ให้ดี ถ้าเกิดสีไม่สัมพันธ์กันกับรูปร่าง มันก็จะออกมาเป็นผลงานที่ไม่มีคุณภาพ เช่น ถ้าพูดถึงทองแดง ก็จะต้องทำสีให้เป็น “น้ำตาลแดงเหลือบทอง” แต่ถ้าคุณทำสีอื่นเช่น “น้ำเงินเข้มเหลือบเงิน” มันจะใช่ทองแดงมั้ยละครับ?

ขนาด เป็นความสำคัญอันดับสามที่ต้องควบคุมร่วมกับองค์ประกอบ มีความจำเป็นเรื่องการออกแบบด้านสัดส่วนของสิ่งนั้น ถ้าพูดถึงเว็บไซท์ก็จะเป็นด้านความยาว ความกว้าง การเรียงสัดส่วนรูปภาพ เป็นต้นฯ

องค์ประกอบ เป็นความสำคัญลำดับสุดท้ายแต่ยังไม่ท้ายสุด ถ้าคุณจะทำงานใดงานหนึ่ง คุณต้องจัดลำดับองค์ประกอบให้เข้ากันอย่างลงตัวก่อน นักดีไซน์เนอร์เก่งๆมักจะจัดองค์ประกอบก่อนการเริ่มงานเสมอ เช่น บางคนเปิดโปรแกรม MS – Paint แล้วเริ่มบรรจงวาดรูปลงไปอย่างเละๆ แล้วค่อยเริ่มจัดรูปเละๆนั่นให้เป็นรูปร่างเว็บไซท์ โดยอาศัยหลักการจัดองค์ประกอบอย่างละเอียด จนเริ่มสร้างเว็บไซท์ตามที่วาดรูปลงในโปรแกรมนั้น จนสุดท้ายก็ออกมาอย่างสวยงาม

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

การเป็นนักกราฟฟิกดีไซน์เนอร์ที่ดีควรทำอย่างไร?

คำถามนี้มักจะเกิดขึ้นในหัวของนักดีไซน์มือใหม่เสมอ ซึ่งผมได้หาคำตอบมาให้แล้วครับ

1. อย่ากังวลว่าผลงานตัวเองห่วย เพราะการที่คุณคิดว่าผลงานของคุณห่วย นั่นคือคุณได้ดึงเส้นด้ายจินตนาการของคุณขาดไปแล้ว
2. สร้างความมั่นใจในผลงานของตน คล้ายๆกับข้อที่หนึ่ง ดูเหมือนง่าย แต่ความจริงยากมาก เวลาคุณทำงาน อย่าสร้างความเครียดให้กับตนเอง แต่ให้คิดว่าคุณกำลังสนุกกับการทำงาน ผมเรียกวิธีนี้ว่า “Enjoy your Imaginations”
3. ไม่ควรคิดหักโหมกับจินตนาการ เพราะงานดีไซน์ของคุณจะออกมาไม่ดี ควรไปพักผ่อนให้สมองผ่อนคลายลง เพราะงานดีไซน์ที่ดีไม่ได้มาจากกำลังสมอง แต่มาจากอารมณ์ของคนคิด ดังนั้นพักถ้าคุณคิดว่าไม่ไหว ลองดื่มน้ำเย็นๆสักแก้วแล้วนั่งฟังเพลงหรือดูทีวีก็ได้!
4. จินตนาการอยู่ทุกที่ บางเวลาถ้าคุณได้มีโอกาสไปเที่ยวพักผ่อน ลองหลับตาแล้วฟังเสียงของสายลมดู ลองจินตนาการตามที่คุณได้เห็นภาพเมื่อคุณหลับตา แล้วลองคิดออกแบบตามหลักของนักดีไซน์เนอร์ดู บางทีผลงานขอบคุณออกมาอาจจะดีเกินที่คาดคิดไว้
5. ไม่ควรขี้เกียจ อันนี้สำคัญ เพราะนักดีไซน์เนอร์ส่วนใหญ่มักจะส่งงานให้เจ้านายหรือผู้รับจ้างล่าช้าเสมอ (เรื่องจริงนะ! ผมเคยไปทำแบบสอบถามแล้ว) บ้างก็อ้างว่า คิดงานไม่ออก หรือไม่ก็ งานเยอะ พอไปดูเบื้องหลังกลับเห็นนั่งเล่นเกมส์ หรือไม่ก็ดูภาพยนต์ ลองปรับพฤติกรรมเล็กน้อยในชีวิตประจำวันดูครับ
6. สมุดพก จะสมุดอะไรก็ได้ มีเส้นหรือไม่มีก็ได้ แต่ขอให้พกติดตัว เวลาคุณคิดอะไรได้ขึ้นมา หรือนั่งเหม่อลอยอยู่จู่ๆก็มีความคิดพุ่งขึ้นมาแล้วคุณคิดว่าควรเก็บไว้ จดมันลงในสมุดนั้นเลยครับ บางทีคุณอาจจะได้ใช้มันในอนาคต

ผมหวังว่า บทความที่ผมเขียนมานั้นจะทำให้คุณได้เข้าใจเกี่ยวกับกราฟฟิกดีไซน์เนอร์ขึ้นบ้าง สัปดาห์หน้าพบกันกับอีกบทความหนึ่งเกี่ยวกับ “กราฟฟิกดีไซน์กับความจำเป็นของจิตวิทยามนุษย์” ที่จะสอนเกี่ยวกับการออกแบบกราฟฟิกดีไซน์ให้ลงตัวกับผลงานของคุณอย่างสวยงามเลยทีเดียว วันนี้ขอลาไปก่อนนะครับ แล้วพบกันใหม่

LuviKunG

[CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!!

designil — Mon, 08 Mar 2010 16:23:06 +0000

ใครยังไม่ได้อ่านตอนแรก สามารถกลับไปอ่านบทความสอนใช้ CSS3 เบื้องต้น พร้อมโค้ดตัวอย่าง (ตอน 1) ได้เลยครับ แต่ไม่จำเป็นต้องอ่านตอน 1 ก่อนนะครับ อ่านตอนไหนก่อนก็ได้ ต้นฉบับภาษาอังกฤษของบทความนี้อยู่ที่ WebdesignerWall ครับ

ใส่กรอบโค้งในเว็บดีไซน์ด้วย CSS3

หลาย ๆ คนคงเบื่อกล่องเหลี่ยม ๆ จืด ๆ แล้วใช่มั้ยครับ CSS3 มีการเพิ่มการทำขอบกล่องให้โค้งมน ซึ่งนอกจากเอาไปใช้กับกล่องทั่ว ๆ ไป ยังนิยมเอาไปใช้ในการทำลิงค์ให้น่าสนใจด้วยครับ

ชื่อของ Property ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้งครับ ยิ่งค่านี้เยอะยิ่งโค้งมาก อย่างไรก็ตาม ในบราวเซอร์ Mozilla Firefox กับ Safari 3 (บราวเซอร์ที่ติดตั้งมากับ Mac OS ครับ เวอร์ชั่นในวินโดว์ไม่ได้รับความนิยมมากนัก) มีการใส่ฟังก์ชั่นที่ทำงานเหมือนอันนี้เข้าไปแล้ว แต่ใช้ชื่อ Property ที่ต่างกันครับ

การที่จะทำให้กรอบโค้งของเราเรนเดอร์ได้ทุกบราวเซอร์ (ยกเว้นบราวเซอร์เก่ามาก ๆ อย่าง IE6) ก็เลยต้องเรียกใช้ Property ของทุกบราวเซอร์มันซะเลย

โค้ดจะออกมาประมาณนี้ครับ:

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox หมาไฟของเรานั่นเอง

ตัวอย่างการทำกรอบโค้ง << ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ

ซึ่งเทคนิคในการใช้กรอบโค้งอันนี้ นอกจากจะกำหนดแบบค่าเดียวใช้ทุกมุม ยังกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย โดยใช้โค้ดดังนี้ครับ

สำหรับ -webkit-:

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;

โดยจะใช้คำบอกตำแหน่งมุมที่จะเซ็ตค่า เช่น -top-left- สำหรับมุมบนซ้ายครับ

สำหรับ -moz-:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;

สังเกตได้ว่า -moz- กับ -webkit- จะแตกต่างกันนิดเดียวครับ ซึ่งโค้ดทั้งสองอันนี้จะแสดงผลดังตัวอย่างด้านล่างเลยครับ:

ตัวอย่างการเซ็ตกรอบให้โค้งไม่เท่ากัน

<< ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ

ใส่กรอบให้กล่องในเว็บดีไซน์ด้วย Box Shadow

อันนี้แทบจะไม่ต่างจาก text-shadow ที่เขียนถึงในตอนที่แล้วเลยครับ แต่ความแตกต่างคือถ้าจะใช้ความสามารถนี้ เราต้องเขียน -webkit- กับ -moz- ทั้งสองอันครับ โดยโค้ดหน้าตาจะเป็นแบบนี้:

-webkit-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);
-moz-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);

และสามารถใส่ได้หลายเงาโดยใช้วิธีเหมือนกับ text-shadow เลยครับ ถ้าจำวิธีไม่ได้ลองกลับไปอ่าน ตอนที่แล้ว ใหม่นะครับ

ลองมาดูตัวอย่างการใช้กันนะครับ โดยใช้โค้ดนี้:

-webkit-box-shadow: 2px 2px 3px #000;
-moz-box-shadow: 2px 2px 3px #000;

จะออกมาเป็นแบบกล่องด้านล่างครับ:

กล่องทดสอบเงา CSS3

สำหรับบทความสอน CSS3 เบื้องต้น ก็จบลงเพียงเท่านี้ครับ ชอบไม่ชอบยังไงบอกกันได้เลยครับ หรืออยากให้นำบทความเกี่ยวกับอะไรมาเสนอ ก็โพสคอมเม้นท์ไว้เลยครับ ตอบทุกคอมเม้นท์ครับ!

[CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!!

designil — Wed, 03 Mar 2010 18:11:52 +0000

จริง ๆ แล้ว CSS3 ก็ออกมาได้สักพักนึงแล้วครับ แต่ด้วยความที่ต้องอัพเดทเว็บบราวเซอร์ของคุณให้เป็นเวอร์ชั่นใหม่ล่าสุดก่อน ถึงจะเรนเดอร์ CSS3 ได้ (เช่น Mozilla Firefox เวอร์ชั่น 3.6+) เลยยังไม่ค่อยได้รับความนิยมเท่าที่ควรในเว็บไซด์ส่วนใหญ่ครับ และเหตุผลอีกอย่างนึงก็คือคนส่วนใหญ่อาจคิดว่า CSS3 น่าจะใช้ยาก แต่ความจริงแล้วมันก็เป็น CSS เดิมที่เพิ่มฟังก์ชั่นใหม่ ๆ เข้ามาเท่านั้นเองครับ

พอดีผมไปเจอบทความหนึ่งจาก WebdesignerWall ซึ่งสรุปเกี่ยวกับพื้นฐานของ CSS3 ไว้ได้เข้าใจง่ายดีมากครับ เลยแปลบางส่วนมาให้ได้อ่านกัน สำหรับใครที่ยังไม่เชี่ยวชาญพื้นฐาน CSS มากเท่าไร แนะนำให้ไปอ่าน [CSS Tutorial สำหรับมือใหม่] เทคนิค CSS ที่ฉันน่าจะรู้ให้เร็วกว่านี้! [English] กันก่อนครับผม (ยังเป็นภาษาอังกฤษอยู่นะครับ เร็ว ๆ นี้จะแปลเป็นภาษาไทยมาให้ได้อ่านกันครับ)

มาดูกันเลยครับว่า CSS3 มีอะไรใหม่ ๆ บ้าง

RGBA

ปกติน่าจะรู้จัก RGB กันใช่มั้ยครับ เป็นโหมดสีที่ใช้ในงานกราฟฟิกส่วนใหญ่บนคอมพิวเตอร์ ซึ่งสร้างสีโดยประกอบสีจากความแตกต่างในค่า R (Red สีแดง) G (Green สีเขียว) และ B (Blue สีน้ำเงิน) ครับ ทีนี้ใน CSS3 จะมีค่า A เพิ่มขึ้นมาให้ใช้กัน นั่นคือค่า Alpha ครับ

ค่า Alpha นี่พูดให้เข้าใจง่าย ๆ จะใช้อีกคำ คือ Transparency หรือ ค่าความโปร่งใส นั่นเอง โดยแบ่งเป็นค่า

0 = โปร่งใสจนมองไม่เห็นอะไรเลย
1 = ทึบแสง เห็นทุกอย่าง

ซึ่งค่านี้เราสามารถใส่เป็นทศนิยมได้ ตัวอย่างเช่น:

background: rgba(255, 255, 255, .5);

จะเห็นว่าผมใส่ .5 ในส่วนของ Alpha ซึ่งจะทำให้สีพื้นหลังใส 50% ครับ

ถ้าเห็นตัวหนังสือตัวนี้ใส ๆ แปลว่าบราวเซอร์คุณรองรับ CSS3 (ไม่งั้นจะเห็นสีดำสนิท)

ฟังก์ชั่น RGBA นี่สามารถใช้ได้ในทุกที่ที่ใช้ RGB ได้ครับ เช่น border, background, outline, etc.

Text Shadow

ต่อไปเป็นความสามารถในการใส่เงาให้ตัวอักษรครับ ใช้ง่าย ๆ แบบนี้เลยครับ:

text-shadow: (ระยะแกนตั้ง X) (ระยะแกนนอน Y) (ความเบลอ) (สีเงา);
Example: text-shadow: 2px 2px 3px #000000;

อักษรเงาเป็นแบบนี้ครับ (ถ้าบราวเซอร์เรนเดอร์ CSS3 ได้จะเห็นครับ)

ซึ่ง ระยะแกนตั้ง X กับ ระยะแกนนอน Y นี่ถ้าเป็นบวก เงาจะไปทางด้านขวา-ล่าง แต่ถ้าเป็นค่าติดลบ เงาจะไปทางด้านซ้าย-บน ครับผม และเราสามารถใช้ RGBA ในส่วน สีเงา ได้ด้วยครับ

นอกจากนั้นยังกำหนดเงาได้มากกว่า 1 เงาได้ครับ เช่นตัวอย่างจากเว็บไซด์ WebdesignerWall อันนี้:

ทดสอบตัวอักษรแบบยุบลงไป

ใช้โค้ดนี้ครับ

text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #000000;

จะเห็นว่าใช้เครื่องหมายคอมมา (,) เพื่อแยกการเซ็ตค่าของเงาแต่ละอันครับผม

>> คลิกที่นี่เพื่ออ่านบทความ สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!! <<

สำหรับตอนที่ 1 จะสอน 2 ฟังก์ชั่นนี้ก่อนครับ ใครลองเอาไปใช้แล้วเจอเทคนิคดี ๆ ยังไงก็ลองเอามาแบ่งปันกันครับ ถ้าชอบบทความนี้ก็กดดาว หรือทิ้งคอมเม้นท์ไว้หน่อยครับ ตอบทุกคอมเม้นท์ครับ

แล้วก็อย่าลืมแวะเวียนไปที่ เว็บบอร์ดเว็บดีไซน์ ของเราครับ สามารถทิ้งคำถามเกี่ยวกับเว็บดีไซน์ หรือไปหาความรู้เพิ่มเติมที่มีคนเอาไปโพสไว้ได้ครับ ขอบคุณคร้าบ!