สมาชก กลม ced2

นางสาวกมลรตน ทองลา หส 533410080301 นางสาวจรารตน เทศารนทร รหส 533410080306 นางสาวสวรรณ ปะทะโก รหส 533410080330 นายชยยา ปรสมย รหส 533410080336

ป 4 หม 3

สาขาคอมพวเตอรศกษา

มหาวทยาลยราชภฏมหาสารคาม

ภาคเรยนท 1 ปการศกษา 2556

นอกจากการเลอก Font มาใชงานแลว การวางต าแหนงตวอกษรกเปนอกเรองหนงทมความส าคญกบการทางาน สาหรบการวางต าแหนงตวอกษร มขอควรค านงถงไวใหอย 3 ขอคอ

1. ธรรมชาตการอานของคนไทยจะอานจากซายไปขวา และบนลงลาง โดยมรศมการกวาดสายตาตามล าดบ ดงนนถาอยากใหอานงาย ควรจะวางเรยงลาดบใหดดวย ไมเชนนนจะเปนการอานขามไปขามมาทาใหเสยความหมายของขอความไป

2. จดเดนควรจะมเพยงจดเดยว หรอพดงาย ๆ กคอ มตวอกษรตวใหญๆ อยเพยงชดเดยว จงจะเปนจดเดนทมองเหนไดงาย ไมสบสน สวนจดอน ๆ ขนาดควรจะเลกลงมาตามลาดบความส าคญ

3. ไมควรใช Font หลากหลายรปแบบเกนไป จะทาใหกลายเปนงานทอานยากและชวนปวดศรษะมากกวาชวนอาน ถาจาเปนจรง ๆ แนะนาใหใช Font เดมแตไมตกแตงพวกขนาด, ความหนาหรอก าหนดใหเอยงบาง เพอเพมความนาสนใจไมใหงานดนาเบอแบบนจะดกวา

ค าน า

เอกสารฉบบนจดท าขนเพอประกอบการเรยนวชาโปรแกรมสรางเวปเพอ

การศกษา โดยมจดประสงคเพอการศกษาความรเกยวกบเรองทฤษฎและ

การออกแบบเวปไซต ซงจะน าความรทไดจากเรองทฤษฎและการออกแบบเวปไซต

ไปประยกตใชในชวตประจ าวน

ทางคณะผจดท าหวงเปนอยางยงวารายงานฉบบนจะเปนประโยชนแกผท

สนใจจะศกษาไมมากกนอย หากรายงานฉบบนมความผดพลาดประการใดตองขอ

อภยไว ณ โอกาสน

เวบไซตคอ หนาเวบหลายหนาทเชอมตอทางไฮเปอรลงค ท าขนเพอเสนอขอมลผานทาง internetใหเปนแหลงขอมลตางๆผานใน www องคประกอบของการออกแบบเวบไซต การออกแบบเวบไซตทมประสทธภาพนนตองค านงถง องคประกอบส าคญดงตอไปน 1. ความเรยบงาย (Simplicity)

หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความค าราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก 2. ความสม าเสมอ ( Consistency)

หมายถง การสรางความสม าเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจท าใหผใชเกดความสบสนและไมแนใจวาก าลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ (Identity)

ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปนอยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจท าใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได

วธเลอก Font ไปใชในงานออกแบบ

การเลอก Font ไปใชในงานออกแบบมขอควรค านงงาย ๆ อย 2 ขอคอ

1. ความหมายตองเขากน หมายความวา ความหมายของคาและ Font ทเลอกใชควรจะไปดวยกนได เชน คาวานารกกควรจะใช Font ทดนารกไปดวย ไมควรใช Font ทดเปนทางการดงภาพตวอยาง

2. อารมณของฟอนต และอารมณของงานตองไปในทศทางเดยวกน เชน งานทตองการความนาเชอถอกจะเลอกใช Font แบบ Serif ทดหนกแนน นาเชอถอ สวนงานทตองการความฉดฉาดอยางโปสเตอรลดราคากควรจะเลอกใช Font ทเปนกนเองไมเปนทางการมากนกอยาง Font ในกลม Script เปนตน

ภาพตวอยาง อารมณของฟอนต และอารมณของงานทเปนไปในทศทางเดยวกน

รจกตวอกษรทใชอยใหดขนอกสกนด (Typography)

ส าหรบการเลอกใชงานตวอกษรทเหมาะสม เราจะตองมารจกกบคณสมบตหลก ๆ ทส าคญของตวอกษร เชน สวนประกอบหลก ๆ และชนดกนกอน

Body & Proportion

Body หลก ๆ จะประกอบไปดวยตว Body เอง และสวนแขนขา และทส าคญทสดทจะสงผลถงการเลอกใชงาน Font กคอสวนของ “เชง” หรอ “Serif” (ในตว Body ของ Font อาจจะแยกยอยไดเปนตา หรอไหลไดอก และในเบองตนใหรจกกนไวในชอของ Body กอน)

สวนของ Proportion ของ Font จะหมายถง ลกษณะการตกแตงเพอนาไปใชงาน เชน ตวหนา หรอตงเอยง โดยปกตแลว Proportion ของ Font จะมอย 3 แบบคอ Normal คอ แบบปกตไมไดก าหนดอะไรเพมเตม Bold คอ แบบทเปนตวหนาและ Italic คอ แบบทเปนตวเอยง

นอกจากทง 3 แบบทกลาวมาแลว ในบางครงอาจจะเจอแบบทยอยลงไปอก เชน Bold Italic ทเปนตวหนาและเอยงหรอ Narrow ทมลกษณะแคบๆ ผอมๆ กเปนไปได

4. เนอหา (Useful Content) ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบ

การปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซ ากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจ าเปนตองกลบมาใชงานลงคเหลานนอก 5. ระบบเนวเกชน (User-Friendly Navigation)

เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ต าแหนงของการวางเนวเกชนกควรวางใหสม าเสมอ เชน อยต าแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอ านวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร 6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)

ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน 7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)

การใชงานของเวบไซตนนไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายหลากหลายควรใหความส าคญกบเรองนใหมาก

8. ความคงทในการออกแบบ (Design Stability)

ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรให

ความส าคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบ

เรยงเนอหาอยางรอบคอบ ถาเวบทจดท าขนอยางลวก ๆ ไมมมาตรฐานการ

ออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและ

ท าใหผใชหมดความเชอถอ

9. ความคงทของการท างาน (Function Stability)

ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบ

การออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต

ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการ

เปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปน

ปญหาทสรางความร าคาญกบผใชเปนอยางมาก

กระบวนของการออกแบบเวบไซต

ก าหนดเปาหมายของเวบไซต ขนตอนแรกของการออกแบบเวบไซต คอการก าหนดเปาหมายของเวบไซตใหแนชดเสยกอน เพอจะไดออกแบบการใชงานไดตรงกบเปาหมายทไดตงเอาไว โดยทวไปมกจะเขาใจวาการท าเวบไซตมจดมงหมายเพอบรการขอมลของหนวยงานหรอองคกรเทานน แตในความเปนจรงแลว เวบไซตแตละแหงกจะมเปาหมายของตนเองแตกตางกนออกไป

เทคนคการนาสไปใชงานมอยมากมายหลายวธ แตทกวธจะชไปทวตถประสงคเดยวหลก ๆ คอ ใชสเพมความโดดเดนใหกบจดเดนในภาพ และใชสตกแตงสวนอนๆ ของภาพใหไดภาพรวมออกมาในอารมณทตองการ

เทคนคการเลอกสจะมสตรส าเรจใหเลอกใชงานอยบาง คอ วธโยงความสมพนธจากวงลอส กอนนะท างานทกครง และน าวาใหเปดไฟลวงลอสขนมา แลวเลอกสหลก ๆ สาหรบใชในการท างานกอน

เทคนคการเลอกใชสแบบสตรส าเรจจะมอยหลายรปแบบ แตแบบทนยมใหงานกนเปนหลกจะมอยาง4รปแบบ คอ

Mono หรอเอกรงค จะเปนการใชสทไปในโทนเดยวกนทงหมด เชน จดเดนเปนสแดง สสวนทเหลอจะเปนสทใกลเคยงกบสแดง โดยใชวธลดนาหนกความเขมของสแดงลงไป

Complement คอ สทตดกนหรอสตรงกนขาม เปนสทอยตรงขามกนในวงจรสเชน สฟาจะตรงขามกบสสม หรอสแดงจะตรงขามกบสเขยว สามารถนามาใชงานไดหลายอยาง และกสามารถสงผลไดทงดและไมด หากไมรหลกพนฐานในการใชงาน การใชสตรงขามหรอสตดกน ไมควรใชในพนทปรมาณเทากนในงาน ควรใชสใดสหนงจานวน 80% อกฝายหนงตองเปน 20% หรอ 70-30 โดยประมาณ บนพนทของงานโดยรวม จะทาใหความตรงขามกนของพนทนอยกลายเปนจดเดนของภาพ

Triad คอ การเลอกสสามสทระยะหางเทากนเปนสามเหลยมดานเทามาใชงาน

Analogicหรอสขางเคยงกน การเลอกสใดสหนงขนมาใชงานพรอมกบสทอยตดกนอกขางละส หรอกคอสสามสอยตดกนในวงจรสนนเอง

ตวอยางภาพทออกแบบโดยการเลอกใชสตางๆ

นอกจากแตละสจะสรางความรสกดวยตนเองแลว เมอนามาใชรวมกนเรายงสามารถ

แบงสออกเปน 2 วรรณะ เพอสรางอารมณทแตกตางกนออกไปเมอใชงานรวมกนได

อกคอ สทอยในวรรณะรอน (Warm Tone Color) ไดแก สเหลองสม สสม สแดง

และสมวงแดง สกลมนเมอใชในงานจะรสกอบอน รอนแรง สนกสนาน

สทอยในวรรณะ (Cool Tone Color) ไดแก สเขยว สฟา สมวงคราม สกลมนเมอใช

งานจะไดความรสกสดชน เยนสบาย

การแบงสออกเปนสโทนรอนและสโทนเยน

ภาพตวอยางงานออกแบบสโทนเยน และสโทนรอน

ก าหนดกลมผใชเปาหมาย ผออกแบบเวบไซตจ าเปนตองทราบกลมผใชเปาหมายทเขามาใชบรการเวบไซต เพอทจะไดตอบสนองความตองการของผใชไดอยางชดเจน ตวอยางเชนเวบไซตทมกลมผใชหลากหลาย เชน เซรชเอนจน เวบทา และเวบไดเรกทอร แตเวบไซตสวนใหญนนจะตอบสนองความตองการเฉพาะกลมเทานน ไมส าหรบทกคน เพราะคณไมสามารถตอบสนองความตองการของคนทหลากหลายไดในเวบไซตเดยว สงทผใชตองการจากเวบ หลงจากทไดเปาหมายและกลมเปาหมายของเวบไซตแลว ล าดบตอไปคอการออกแบบเวบไซตเพอดงดดผใชงานใหไดนานทสด ดวยการสรางสงทนาสนใจเพอดงดดผใชโดยทวไปแลว สงทผใชคาดหวงจากการเขาชมเวบไซตหนง ไดแก - ขอมลและการใชงานทเปนประโยชน - ขาวและขอมลทนาสนใจ - การตอบสนองตอผใช - ความบนเทง - ของฟร ขอมลหลกทควรมอยในเวบไซต เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนง ๆ แลว เรากออกแบบเวบไซตใหมขอมลทผใชตองการ ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต - ขอมลเกยวกบของ - รายละเอยดของผลตภณฑ - ขาวความคบหนาและขาวจากสอมวลชน - ค าถามยอดนยม - ขอมลในการตดตอ

หลกการออกแบบเวบไซต

1.น าเสนอขอมลโดยจดสสนขอความใหดสะดดตาและมรปภาพประกอบ

2.หนาแรกไมควรมขอมลหรอรปภาพใหญๆมากเกนไป จะท าใหเวบเปดได

ชาถาตองการน าเสนอภาพขนาดใหญควรเรมตนแสดงภาพเลกกอนแลวท าลงคให

คลกเพอเปดดภาพใหญ

3.มภาพเคลอนไหวประกอบเพอโฆษณาประชาสมพนธเพอดงดดความสนใจ

แตไมควรใสมากเกนไปจะท าใหลายตา

4.หนาเวบทมภาพถายควรใชโปรแกรมกราฟก เชน Photoshop ลดขนาด

ไฟลและบบ%ลง ไมควรน าภาพจากกลองขนไปตรงๆเพราะขนาดไฟลจะใหญมาก

5.อพเดทขอมลหนาเวบเปนระยะๆเพอไมใหผชมรสกเบอ เชน เพมเนอหา

ขาวใหม เปลยนส เปลยนรปภาพ ฯลฯ

6.ไมควรใสเบอร อเมลลไวทหนาเวบไซตเพราะจะท าใหเมลลขยะ (สแปม) สง

เขามามาก ใหใชแบบฟอรมส าหรบตดตอสอบถามแทน

หลงจากรจกการผสมสกนไปแลว ตอไปกจะตองมารจกกบจตวทยาของสทจะมผลตออารมณของผพบเหนกนสอะไรใหความรสกอยางไรบาง เราจะมาดกนตามรายละเอยดตอไปน

สแดง ใหความรสกอนตราย เรารอน รนแรง มนคง อดมสมบรณ

สสม ใหความรสกสวาง เรารอน ฉดฉาด

สเหลอง ใหความรสกสวาง สดใส สดชน ระวง

สเขยว ใหความรสกงอกงาม พกผอน สดชน

สน าเงน ใหความรสกสงบ ผอนคลาย สงางาม ทม

สมวง ใหความรสกหนก สงบ มเลศนย

สน าตาล ใหความรสกเกา หนก สงบเงยบ

สขาว ใหความรสกบรสทธ สะอาด ใหม สดใส

สด า ใหความรสกหนก หดห เศราใจ ทบตน

สทองเงนและสมนวาว แสดงถงความรสกมนคง

สด ากบสขาว แสดงถงความรสกทางอารมณทถกกดดน

สเทาปานกลาง แสดงถงความนงเฉย สงบ

สเขยวแกผสมสเทา แสดงถงความสลด รนทดใจ ชรา

สสดและสบาง ๆ ทกชนด แสดงความรสก กระชมกระชวย แจมใส

ความรสกเกยวกบสทกลาวมาจะเปนความรสกแบบกลาง ๆ ทเปนสวนใหญในโลก แตนอกจากทกลาวมาแลว ในบางพนทหรอบางวฒนธรรม อทธพลของสจะแตกตางกนออกไปตามประสบการณของแตละบคคลวฒนธรรม ประเพณ ขนบธรรมเนยม หรอคานยมของแตละกลมชน

สเกดจากหมกสในการพมพ เกดจากการผสมหมกพมพทง 4 สในเครองพมพ

คอ สฟา, สมวงแดง, สเหลอง และสด า เรยก

รวมกนวา CMYK จนไดออกมาเปนสสนตาง ๆ

ตามทตองการ ในการทางานกราฟก ถาหากวา

เปนงานทนาไปพมพตามแทนพมพแลว นก

ออกแบบกควรจะเลอกใชโหมดสแบบนทกครง

เพอใหไดผลลพธทออกมาตรงกบทเหนในจอคอมฯ ทท างานอย

สทเกดจากธรรมชาตเปนสทไดจากธรรมชาต จากกระบวนการสงเคราะหทาง

เคม 3 สคอ สแดง สเหลองและสนาเงน หลงจากนนจงนามาผสมกนจนเกดเปนส

อนๆ แหลงก าเนดสแบบทเราเรยนกนมาในคลาสศลปะตงแตเดกจนโต ทเรยกกนวา

แมสกคอสแบบนนนเอง การผสมสไวใชงานจะใชงานจะใชวธผสมจากสทเกดจากสท

เกดธรรมชาต โดยเรมผสมจากแมส หรอสขนทหนง ไปจนเปนสขนทสองและขนท

สามตากลาดบภาพแตละสมความหมายอยางไร?

การออกแบบโครงสรางเวบไซต

เวบไซตในปจจบน จะมหลกการอกแบบทแตกตางไมมากนก ซงจะมวธการ

ออกแบบหนาตาของเวบไซตอย 3 รปแบบ คอ

1.ออกแบบหนาเวบไซตทเนนการน าเสนอเนอหามากๆ

เปนการออกแบบเวบไซตทมการน าเสนอเนอหามากกวารปภาพ โดยจะใชโครงสราง

ของตารางเปนหลก เพอใสขอความแบบหนาสารบญ และรปภาพทเปนชนเลกๆได

2.ออกแบบหนาเวบไซตทเนนภาพกราฟกเปนหลก

เปนการออกแบบเวบไซตทมภาพกราฟกทสวยงามถกจดวางไวในหนาโฮมเพจ ซง

แตกตางจากขอแรกมากเพราะจะไมคอยมขอความในเวบเพจ แตจะเปนการ Link

ทภาพเพอเขาไปยงหนาเวบเพจอนๆตอไป การสรางเวบไซตแบบนจะใหโปรแกรม

Photoshop ส าหรบตกแตงภาพกอนน าไปใชบนหนาเวบ

3.ออกแบบหนาเวบไซตทมทงภาพและเนอหา

เปนการออกแบบหนาเวบไซตทผสมกนระหวางขอ1 และ 2 ขางตน โดยจะเนนการ

จดวางภาพทตดแบงเปนชนเลกๆกอน หลงจากนนจงใสขอความประกอบภาพลงไป

เพอใหเวบไซตของเรามความสวยงามดวยภาพกราฟกทน ามาประกอบและใสเนอหา

ไดอยางสมบรณดวยเวบไซต (Web site)

สวนประกอบของหนาเวบไซต

สวนประกอบของหนาเวบไซตแบงออกเปน 3 สวนหลกๆ คอ

1. สวนหวของเวบเพจ (Page Header)

เปนสวนทอยตอนบนสดของหนา และเปนสวนทส าคญทสดของหนา เพราะเปนสวนทดงดดผชมใหตดตามเนอหาภายในเวบไซตมกใสภาพกราฟกเพอสรางความประทบใจสวนใหญประกอบดวย

- โลโก (Logo) เปนสงทเวบไซตควรม เปนตวแทนของเวบไซตไดเปนอยางด และยงท าใหเวบนาเชอถอ

- ชอเวบไซต

- เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหาของเวบไซต

2.สวนของเนอหา (Page Body)

เปนสวนทอยตอนกลางของหนา ใชแสดงขอมลเนอหาของเวบไซต ซงประกอบดวยขอความ, ตารางขอมล ภาพกราฟก วดโอ และอนๆ และอาจมเมนหลกหรอเมนเฉพาะกลมวางอยในสวนนดวย

ส าหรบสวนเนอหาควรแสดงใจความส าคญทเปนหวเรองไวบนสด ขอมลมความกระชบ ใชรปแบบตวอกษรทอานงาย และจด Layout ใหเหมาะสมและเปนระเบยบ

3. สวนทายของหนา (Page Footer)

เปนสวนทอยดานลางสดของหนา จะมหรอไมมกได มกวางระบบน า

ทางทเปนลงคขอความงาย ๆ และอาจแสดงขอมลเพมเตมเกยวกบเนอหาภายใน

เวบไซต เชน เจาของเวบไซต, ขอความแสดงลขสทธ, วธการตดตอกบผดแลเวบไซต,

ค าแนะน าการใชเวบไซต เปนตน

ตวอกษร (Type)

ตวอกษรเปนสงส าคญไมเปนรองใคร เมอตองทางานกราฟกดไซน ในเรองงานกราฟกทดบางงาน นกออกแบบอาจจะใชเพยงแคตวอกษรและสเปนสวนประกอบเพยงสองอยาง เพอสรางสรรคงานทสามารถสอความหมายออกมาไดในดไซนทสวยงาม ดงนน เรองนจะตองยกไปอธบายใหละเอยดมากขนในหวขอใหญ ๆ ตอไปจากเรองส

สและการสอความหมายในอารมณตางๆ

ถาจะรจกสใหลกซงถงขนเลอกใชไดอารมณทตองการได กตองมาทาความเขาใจกบ

3 เรองเหลาน คอ สเกดจากอะไร, แตละสมความหมายอยางไร และเทคนคการนาส

ไปใชใหไดอยางใจตองการท าอยางไรกนกอน

สเกดจากอะไร?

ในปจจบนแหลงก าเนดสจะมอย 3 ชนดคอ

สทเกดจ าแสง เกดจากการหกเหของแสงผานแทงแกว

ปรซมม 3 สคอ สแดง (Red), สเขยว (Green) และสนา

เงน (Blue) เรยกรวมกนวา RGB นามาผสมกนจนเกดเปน

สสนตาง ๆ มากมาย ตวอยางอปกรณทใชแหลงก าเนดส

แบบน เชน โทรทศนหรอจอคอมฯ ของเรานนเอง

ทวาง (Space)

อาจจะจะเกดจากความตงใจหรอไมตงใจของนกออกแบบกได ทวางไมไดหมายความถงพนทวางเปลาในงานเพยงอยางเดยว แตหมายถงรวมไปถงพนททไมส าคญหรอ Background ดวย ในการออกแบบงานกราฟก ทวางจะเปนตวชวยในงานดไมหนกจนเกนไป และถาควบคมพนทวางนใหด ๆ ทวางกจะเปนตวทชวยเสรมจดเดนใหเหนไดชดเจนมากขน

ส (Color)

สของงานกราฟก ถอเปนหวใจหลกส าคญเลยกวาได เพราะการเลอกใชสจะแสดงถงอารมณทตองการไดชดเจนมากกวาสวนประกอบอนๆ ทงหมด เชน สโทนรอน สาหรบงานทตองการความตนเตน ทาทาย หรอสโทนเยนสาหรบงานตองการใหดสภาพ สบายๆ ส าหรบเรองสเปนเรองทตองพดถงละเอยดมากกงาหวขออน ๆ ดงนนจงขอยกไปอธบายไวเปนเรองใหญๆ ในหวขอตอไป

รปโครงสรางเวบไซตทเหมาะสม

สวนประกอบยอยอนๆ ทจ าเปน

1. Text เปนขอความปกต โดยเราสามารถตกแตงใหสวยงามและมลกเลนตางๆ ดงเชนโปรแกรมประมวลค า

2. Graphic ประกอบดวยรปภาพ ลายเสน ลายพน ตางๆ มากมาย

3. Multimedia ประกอบดวยรปภาพ ภาพเคลอนไหว และแฟมเสยง

4. Counter ใชนบจ านวนผทเขามาเยยมชมเวบไซตของเรา

5. Cool Links ใชเชอมโยงไปยงเวบไซตของตนเองหรอเวบไซตของคนอน

6. Forms เปนแบบฟอรมทใหผเขาเยยมชม กรอกรายละเอยด แลวสงกลบมายงเวบไซต

7. Frames เปนการแบงจอภาพเปนสวนๆ แตละสวนกจะแสดงขอมลทแตกตางกนและเปนอสระจากกน

8. Image Maps เปนรปภาพขนาดใหญทก าหนดสวนตางๆ บนรป เพอเชอมโยงไปยงเวบไซตอนๆ

9. Java Applets เปนโปรแกรมส าเรจรปเลกๆ ทใสลงในเวบไซต เพอใหการใชงานเวบไซตมประสทธภาพมากยงขน

องคประกอบงานกราฟก (Element of Design)

องคประกอบหลก ๆ ในงานกราฟกจะแบงออกเปน 8 ชนดคอ เสน, รปราง, รปทรง, น าหนก, พนผว, ทวาง, ส และตวอกษร

เสน (Line)

ลกษณะของเสน (Line) แบบตาง ๆ ตามตารางมาตรฐานแลวจะพดถงเรองนวาเปนเรองของจด เสน ระนาบ แตถาจะเอาใหเขาใจงาย ๆ กเพยงแตเขาใจวาความหมายของเสนกคอ การทจดหลาย ๆ จด ถกน มาวางตอเนองจนกลายเปนเสนรปทรงตาง ๆ ขนมา รปทรงของเสนทจะสอออกมาถงความรสกทแตกตางกนออกไป

พนผว (Texture)

ในงานออกแบบกราฟก พนผวจะเปนอกหนงองคประกอบทชวยสออารมณของงานออกมาไดชดเจนมากขน เชน ถาเราเลอกพมพงานลงในกระดาษ Glossy ทเงาและแวววาว งานนนจะสอกอกไปไดทนทวา “หร มระดบ” หรอ ถาเราใสลวดลายทดคลาย ๆ สนม หรอรอยเปอนลงไปในงานกจะสอไดทนทถง “ความเกา” ดงนนในการท างาน นกออกแบบจงควรเลอกสรางพนผวทงในองคประกอบตาง ๆ ทใสลงไปในภาพ รวมทงวสดทใชพมพงานดงกลาวลงไป กจะสามารถชวยสอความหมายทตองการไดอยางเหมาะสม

รปราง (Shape), รปทรง (Form) ,น าหนก (Value)

รปราง : เปนองคประกอบตอเนองมาจากเสน เกดจากการน าเสน

แบบตาง ๆ มาตอกนจนไดรปราง 2 มตทมความกวางและความยาว (หรอความสง) ในทางศลปะจะแบงรปรางออกเปน 2 แบบคอ รปรางทคนตา แบบทเหนแลวรเลยวานนคออะไร เชนดอกไม หรอคน และอกแบบหนงจะเปนรปรางแบบฟรฟอรม เปนแนวทใชรปรางสอความหมายทจนตนาการไวออกมา ไมมรปทรงทแนนอน แตดแลวเกดจนตนาการถงอารมณทตองการสอได

รปทรง : เปนรปรางทมตเพมขนมากลายเปนงาน 3 มตคอ มความลกเพมเขามาดวย

น าหนก : เปนสวนทมาเสรมใหดออกวารปทรงมน าหนกขนาดไหนเบา หรอหนก ทบ หรอโปรงแสง น าหนกจะเกดจากการเตมสและแสงแรเงาลงไปในรปทรงจนไดผลลพธออกมาตามทตองการ

ในการท างานกราฟกรปรางจะมผลอยางมากตออารมณของงาน เชน ถาตองการงานทอารมณผหญงจด ๆ เพยงแคใสรปของดอกไมลงไปกจะสามารถแสดงอารมณไดอยางชดเจน หรอในงานทตองการใหมมตมากขนกอาจจะเปนรปทรงของดอกไมในมมมองทแปลกตา กจะสามารถสออารมณทตองการออกไปไดพรอมกบเปนการสรางความนาสนใจเพมขนมาอกดวย

เสนแนวนอน ใหความรสกสงบ ราบเรยบ

เสนตรงแนวตง ใหความรสกมนคงแขงแรง

เสนทแยง ใหความรสกไมมนคง รวดเรว แสดงถงเคลอนไหว

เสนตดกน ใหความรสกประสาน แขงแกรง หนาแนน

เสนโคง ใหความรสกออนชอย ออนนอม

เสนประ ใหความรสก โปรง ไมสมบรณ หรอในบางกรณอาจจะใชเปน

สญลกษณในการแสดงถงสวนทถกซอนเอาไว

เสนโคงกนหอย ใหความรสกเคลอนไหวไมมทสนสด

เสนโคงแบบคลน ใหความรสกถงการเคลอนไหวอยางนมนวล

เสนซกแซก ใหความรสก นากลว อนตราย

สวนใหญแลวเสนจะมอยทกๆ งานออกแบบ โดยถกน าไปใชรวมกบ

องคประกอบตางๆ จนสอถงอารมณของผลงานออกมาได ในแบบทตองการ ดงนน

การเลอกใชเสนเขามาเปนสวนประกอบในงานของเราจงถอวาเปนสงทตองค านงถง

เปนอนดบแรก