BANGKOK GRAPHIC

แนวทางการออกแบบ Portfolio

ออกแบบ website

แนวทางการออกแบบ Portfolio

ให้ทำรูปแบบ Presentation และ Portfolio Print ตามนี้
การออกแบบ Profolio
การออกแบบ Profolio
1. ปก รูปแบบพัฒนามาจาก งานออกแบบ logo 2. Capture 01 : Design Brief 3. Capture 02 : logo design การพัฒนาต้นแบบ —ตัวอย่าง logo design 4. Capture 03 : ชุดกิจกรรม ภายในร้าน ความหมายของกิจกรรม (ให้ เกริ่นก่อนว่ากิจกรรมภายในร้านแบ่งเป็นกี่ประเภท) 5. Capture 04 : ชุดกิจกรรมที่ 1 : กิจกรรมซัก อบ รีด Icon : Portfolio Design 6. Capture 05 ชุดกิจกรรมที่ 2 : มุมพัก รอ Index : Icon Design ,Book Design 7. Capture 06 : การออกแบบ ชุดอัตลักษณ์องค์กร Corporate Identity : Heftys Burgers , CI 8. Capture 07 : ชุดการออกแบบ ป้าย Signage Design .Signage ,Roll up

การสร้าง Website ด้วย WordPress

การสร้าง Website ด้วย WordPress

Screen shot 2015-02-12 at 4.03.04 PM   ไปที่ wordpress com คลิก สร้าง website   Screen shot 2015-02-12 at 4.04.44 PM 2. ตั้งชื่อ ใส่ รหัสผ่าน ให้จำอยู่ 3 จุด สำคัญเวลากลับมาแก้ไข – User Name – eMail – Pass Word – ชื่อที่ตั้ง ก่อหน้า .wordpress.com 3,]. **** เวลา จะเข้ามาแก้ไข ให้ พิมชื่อ Web อย่างในกรณีภาพตัวอย่าง พิมตรง Web : www.tanndee.wordpress.com/wp-admin แล้วค่อยใส่ Usr Name & Pass Word   Screen shot 2015-02-12 at 4.05.24 PMScreen shot 2015-02-12 at 4.19.31 PM Screen shot 2015-02-12 at 4.06.07 PM ในขั้นตอนนี้ คือ ตั้งชื่อ หัว Web เรา ว่าเราต้องใช้ Keyword อะไร     Screen shot 2015-02-12 at 4.17.49 PM พอสมัครเรียบร้อย ให้คลิก ดังภาพ จะอยู้ซ้ายมือบน คลิกตามในภาพ หลังจากเลือก เว็บของฉัน จะมีแถบแก้ไข ด้าน ซ้ายมือ Screen shot 2015-02-12 at 4.19.41 PM +++ คลิก   Screen shot 2015-02-12 at 4.19.49 PM คลิก ด้านซ้ายบน เข้าสู่หน้า Dash Board Screen shot 2015-02-12 at 4.20.32 PM +++ คลิกรูปแบบ บลอค เพื่อเลือก theme Screen shot 2015-02-12 at 4.20.15 PM ++ คลิก คำว่า หน้า และเลือก หน้าทั้งหมด   Screen shot 2015-02-13 at 1.12.29 AM เข้าสู่หน้าทั้งหมด มีหน้าเริ่มต้นมาให้ คือ หน้า เกี่ยวกับ Screen shot 2015-02-13 at 1.12.39 AM นำ Mouse มา Over ตรงหัวข้อ เพื่อ เลือก แก้ไข Screen shot 2015-02-13 at 1.13.03 AM จะเข้ามาสู่หน้า แก้ไข หน้านั้นๆๆ Screen shot 2015-02-13 at 1.13.16 AM ครั้งต่อไปก็ เลือกที่ เขียน หน้าใหม่ ***ให้ Create หน้า ใน Web เราให้ครบ 5 หน้า …………………………………………………………………………………… การสร้าง Post หรือ เรื่อง   Screen shot 2015-02-13 at 1.13.26 AM ให้เริ่มต้นจาก สร้าง หัวข้อ หมวดหมู่ก่อน Screen shot 2015-02-13 at 1.18.15 AM Screen shot 2015-02-13 at 1.18.20 AM   จะพบ ค่าเริ่มต้น ตัวอย่าง คือ ไม่มีหมวด ให้ นำ Mouse ไป Over เพื่อเลือก แก้ไข Screen shot 2015-02-13 at 1.18.40 AM ในที่นี้ ตั้ง หมสดหมู่ว่า เครื่องดื่ม Screen shot 2015-02-13 at 1.19.14 AM กลับไปที่ เมนู เรื่อง เลือก เขียนเรื่องใหม่ Screen shot 2015-02-13 at 1.19.29 AM ในที่นี้ เขียนเรื่อง กาแฟ   Screen shot 2015-02-13 at 1.19.37 AM สุดท้าย ให้มา ติ้ก ในส่วนหมวดหมู่ที่เรา ตั้งไว้ ในขั้นตอน ตั้งชื่อ หมวดหมู่     ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, การนำ หมวดหมู่ ให้มาปรากฎใน web Screen shot 2015-02-13 at 1.23.47 AM ให้เลือกที่ เมนู : รูปแบบบลอค : วิคเจ็ค       Screen shot 2015-02-13 at 1.24.32 AM ให้ หา วิคเจ็ค ที่ชื่อ หมวดหมู่ และคลิก จะปรากฏ เมนูย่อย ถาม ว่าเราจเลือกใส่ ที่ ส่วนไหน ของ เว็บ     Screen shot 2015-02-13 at 1.25.15 AM ต่อมา ให้เลือก วิคเจ็ค ว่า คลังภาพ และใส่ Banner — Gif ที่เราทำ      

ทดสอบวิชา ออกแบบ website

ทดสอบวิชา ออกแบบ website

Link Download file Game : http://www.bangkokgraphic.com/bin-debug.zip   สำหรับ นักศึกษาเลขรหัส ลงท้าย เลขคี่ 1. วาด Sketch HUD. หรือ Window – Manu – icon ทั้งหมด ใน Game พร้อม เปรียบเทียบ วาด เปรียบเทียบ ตัวอย่าง จาก Game หรือ Web อื่น เช่น BusProject-Item เมนู และ window หน้า แรก เกม BusProject-TrainingByToon window หน้า เพิ่มทักษะในเกม 2. วิเคราะห์ วิจารย์ ข้อดี ข้อเสีย โดยเฉพาะ งานออกแบบ และการเข้าถึงข้อมูล ของ Web : Nited ………………………………………………………………………………………………………………… สำหรับนักศึกษาเลข ลงท้าย เลขคู่ 1. วาด Sketch สถานที่ ดังในภาพ 443px-Statute_in_Front_of_Wat_Thai_in_Los_Angeles 504px-Bangkok_montage_2 788px-Chao_Phraya_Phra_Pradaeng_Mega_Bridge_2-edit 800px-Grand_Palace_Bangkok OLYMPUS DIGITAL CAMERA grand-palace Sathorn-Bang-Rak-from-the-Rhythm-Sathorn-6-210x210 Section-of-Buddhist-Temple-in-Bangkok-Thailand The-Memorial-Bridge-Bangkok-670x447 ** แล้วนำมา จัดวาง องค์ประกอบ Composition ขนาด แนวนอน หรือตามตัวอย่าง ในภาพ BG-Game ภาพตัวอย่าง หลังจากนำ มาจัดวางองค์ประกอบ ** ออกแบบ ธง เหรียญ ดังตัวอย่าง ในรูป Bus-LikeCoin ภาพตัวอย่าง งานออกแบบ ธง เหรียญ กำกับ สถานที่และ ระดับคะแนน   2. ให้นักศึกษาวิพากษณ์ วิจารณ์ หลังจากลองเล่ม เกม ถึงข้อดี ข้อเสีย หลังจากการเล่น โดยละเอียด ทั้งงานออกแบบ และความท้าทายในเกม

ประเภทของ HUD วิดีโอเกม

ประเภทของ HUD วิดีโอเกม

ประเภทของ HUD – Heads Up Display หริอ Status Bar ของเกม

assassins-creed-gameplay-hree ภาพประกอบที่ 12 User interface ประเภท Diegetic เกม Assassin’s Creed http://www.freegameswallpapers.com/assassins-creed-gameplay/) User interface ประเภท Diegetic จะปรากฎอยู่ในโลกของเกมที่มีทั้งลักษณะของ Fiction และ Geometry ดังนั้นผู้เล่นและ avatar ในโลกของเกมจะสามารถมีปฏิสัมพันธ์กับ interface ประเภทนี้ได้โดยการ มองเห็น การได้ยิน หรือการสัมผัส Diegetic ที่ออกแบบมาได้ดีจะช่วยเน้นการเล่าเรื่องเพื่อเสริมประสบการณ์ สำหรับผู้เล่น และทำให้ผู้เล่นรู้สึกมีส่วนร่วมและเข้าไปอยู่ในโลกของเกม เกม Metro 2033 ใช้ Diegetic อย่างสมบูรณ์แบบในการเล่าเรื่องของเกมโดยไม่ต้องอาศัย องค์ประกอบของ HUD โดยเกมนี้สามารถจัดการกับความเสี่ยงที่จะทำให้ผู้เล่นรำคาญกับการตอบสนอง ที่ล่าช้าได้และกลายเป็นส่วนหนึ่งของกลไกของเกมนาฬิกาข้อมือ ของตัวละครใช้ในการวัดว่าหน้ากากที่ใช้ สำหรับกรองแก๊สพิษจะหมดอายุเมื่อใด มีหลายเกมที่เหมาะสมกับการใช้ Diegetic เพราะเป็นการเล่าเรื่องที่เกี่ยวกับอนาคต ตัวอย่างที่พบคือ เกม Syndicate เวอร์ชั่นล่าสุด ในกรณีที่เรื่องราวถูกกำหนดไว้ในช่วงเวลาที่ต่างกัน องค์ประกอบของ User interface ที่เลือกใช้ อาจจะเป็นลักษณะของ Spatial (ซึ่งจะอธิบายรายละเอียดในภายหลัง) แทนการใช้ Diegetic เช่น ในเกม The DART จะใช้วิธีการไฮไลต์ที่ศัตรู และให้ตัวละครและผู้เล่นสามารถมองเห็น ผ่านที่กำบังได้ เกม Assassin’s Creed ก็ใช้รูปแบบของ Diegetic อย่างมาก แม้ว่าเรื่องราวจะเป็นการย้อนอดีตก็ตาม แต่ที่จริงแล้วผู้เล่นกำลังใช้ระบบเสมือนจริงในโลกอนาคต ดังนั้น มันจึงเป็นเรื่องราวเกี่ยวกับอนาคตมากกว่าเรื่องย้อนอดีต เกมจะใช้มุมสูงในการเน้นกลุ่มศัตรูและแหล่งเชื้อเพลิงของพวกเขา และผู้เล่นหรือตัวละครสามารถ มองเห็นในสิ่งเดียวกัน มีหลายกรณีเช่นกันที่ใช้ User interface แบบ Diegetic อย่างไม่เหมาะสม อาจเป็น เพราะผู้ออกแบบเกมอ่านลักษณะ geometry ของเกมไม่ออก หรือเพราะต้องการที่จะเบรกความเป็น fiction เพื่อให้ข้อมูลเพิ่มเติมอื่น ๆ แก่ผู้เล่น   2). Meta a href=”http://www.bangkokgraphic.com/wp-content/uploads/2015/03/Need-For-Speed-Hot-Pursuit.jpg”>Need-For-Speed-Hot-Pursuit ภาพประกอบที่ 13 Interface ประเภท Meta : Need for Speed http://technocola.com/2014/deals/need-speed-hot-pursuit-now-available-reduced-price-steam/) บางครั้ง User Interface ก็ไม่เหมาะสมกับ geometry ของเกม หมายความว่า นอกจาก User Interface จะมีส่วนช่วยในการเล่าเรื่องแล้ว ยังมีผลต่อการให้ข้อมูลเกี่ยวกับ status ของผู้เล่นบนแถบระนาบ 2 มิติ (2D HUD plane) ด้วย และสิ่งนี้ถูกเรียกว่า Meta ตัวอย่างทั่วไปของ User Interface แบบ Meta คือ เลือดที่สาดกระจายบนหน้าจอในรูปแบบของการบ่งชี้ถึงสภาพของตัวละคร ดังเช่น ในเกม Call of Duty: Modern Warfare 2 ที่ปราฏกภาพเลือดที่สาดกระเซ็นบนจอภาพในส่วนของ 2D HUD plane เพื่อที่จะบอก ให้ผู้เล่นรับรู้ว่าตัวละครกำลังจะหมดพลังแล้ว ตัวอย่างการปฏิสัมพันธ์กับโทรศัพท์ของตัวละครในเกม Grand Theft Auto 4 ก็เป็นอีกอันหนึ่ง ที่น่าสนใจ เนื่องจากมีการเลียนแบบปฏิสัมพันธ์ที่เกิดขึ้นในโลกแห่งความเป็นจริง โดยคุณจะได้ยินเสียง โทรศัพท์ดัง จากนั้นจะมีการดีเลย์เล็กน้อยก่อนที่ตัวละครจะรับโทรศัพท์ แม้ว่า User Interface จะปรากฎ อยู่ในส่วนของ 2D HUD plane แต่ที่จริงแล้วมันคือ Meta และถึงแม้มันจะเริ่มต้นการปฏิสัมพันธ์แบบ Diegetic ก็ตาม ขณะที่ตัวละครกำลังรับโทรศัพท์ User Interface ที่แท้จริงจะอยู่ในส่วนของ 2D HUD plane ที่ผู้เล่นเห็นได้เพียงคนเดียวเท่านั้น Meta อาจจะระบุได้ยากถ้าปราศจากองค์ประกอบของการเล่าเรื่อง เช่น ในเกมที่เกี่ยวกับกีฬาหรือการ แข่งขัน เช่นในเกม Need for Speed: Hot Pursuit ที่ทำให้รู้สึกว่ามาตรวัดความเร็วในส่วน 2D HUD plane น่าจะเป็น Meta เนื่องจากตัวละครของผู้เล่นซึ่งเป็นคนขับจะรู้ว่ารถวิ่งด้วยความเร็วเท่าไร และสิ่งนั้นก็ถือ เป็นส่วนหนึ่งของการเล่าเรื่อง องค์ประกอบของ HUD อื่น ๆ เช่น การบอกพิกัดหรือตำแหน่งยิ่งระบุว่าเป็น Meta ได้ยากขึ้นไปอีก โดยบางคนอาจจะมองว่ามันเป็น Meta เนื่องจากคนขับจะต้องมีข้อมูลเหล่านั้น ในขณะที่คนอื่น ๆ ที่เหลืออาจมองว่าเป็น Non-Diegetic ก็ได้   3). Spatial 6788863_orig าพประกอบที่ 14 Spatial UI. เกม Fable 3 (http://rfahy.weebly.com/interfaces-in-educational-games.html) User Interface แบบ Spatial จะถูกใช้เมื่อต้องการที่จะคั่นจังหวะการเล่าเรื่องอย่างแนบเนียน เพื่อที่จะให้ข้อมูลเพิ่มเติมกับผู้เล่นโดยที่ตัวละครอื่นในเกมไม่รับรู้ Spatial จัดเป็นส่วนหนึ่งของวัตถุในพื้นที่ หรือสิ่งแวดล้อมในเกมเพื่อช่วยดึงดูดให้ผู้เล่นรู้สึกมีส่วนร่วมและขณะเดียวกันก็เป็นการป้องกันไม่ให้ผู้เล่นรู้สึกว่าถูกขัดจังหวะเนื่องจากเมนูอื่นที่โผล่ขึ้นมาบนหน้าจอ เกม Splinter Cell Conviction ได้ปรับใช้องค์ประกอบแบบ Spatial ในรูปแบบของการฉายภาพ ที่อธิบายถึงเป้าหมายในเกม แต่ขนาดของมันดูเหมือนจะเป็นอุปสรรค์ต่อความเป็น fiction เล็กน้อยเมื่อ เที่ยบกับตัวอย่างอื่น ๆ แต่การฉายภาพลักษณะนี้จะทับซ้อนกับสิ่งแวดล้อมอื่นที่ใช้ในการสื่อสารกับผู้เล่น เกม Fable 3 เป็นอีกตัวอย่างหนึ่งที่ใช้ Spatial ในการให้ข้อมูลกับผู้เล่นและป้องกัน ไม่ให้เขาหลุดออกจากแผนที่บนหน้าจอ เส้นทางที่บ่งชี้เกือบจะเหมาะเจาะพอดีกับความเป็น fiction ที่ให้ความ งดงามอย่างมหัศจรรย์ แต่ไม่ได้มีความหมายกับตัวละครในเกม หน้าที่ของมันเพียงแค่ช่วยชี้แนวทางไป สู่เป้าหมายต่อไปให้กับผู้เล่นเส้นทางที่ส่องเป็นประกายช่วยให้ผู้เล่นสามารถนำพาตัวละครของตนไปยังทิศทางที่ถูกต้อง Spatial อาจเป็นสิ่งที่งดงามเมื่อมันทำงานเข้ากันได้กับวัตถุอื่น ๆ ในพื้นที่ของเกม (geometry) spatial ในเกม Forza 4 แสดงให้เห็นถึงรูปแบบง่าย ๆ ที่ต่างจากคุณลักษณะที่มีมากมายของเกม 3D ความกลมกลืนทำให้เกิดทิศทางการออกแบบที่งดงามบน User Interface ของ Forza 4           4). Non-diegetic 1545040_orig ภาพประกอบที่ 15 Non-diegetic UI. : เกม World of Warcraft (http://rfahy.weebly.com/interfaces-in-educational-games.html) มีองค์ประกอบดั้งเดิมอีกแบบหนึ่ง คือ Non-diegetic ซึ่งเป็นองค์ประกอบที่หลุดออกจากความเป็น fiction และ geometry อย่างสมบูรณ์และสามารถปรับมุมมองของพวกมันเองได้ แม้ว่า Non-diegetic มักจะได้รับอิทธิพลจากแนวทางการออกแบบของเกม องค์ประกอบแบบนี้น่าจะใช้ได้ดีที่สุดเมื่อองค์ประกอบ แบบอื่นๆ อย่าง Diegetic, Meta, และ Spatial มีข้อจำกัดที่ทำลายความแนบเนียน ความสอดคล้องกัน และความชัดเจนขององค์ประกอบของ User Interface เกม World of Warcraft ส่วนใหญ่ใช้ Non-diegetic นั่นคือ ผู้เล่นสามารถปรับเปลี่ยนเกมได้ตามความต้องการ องค์ประกอบของ user interface ส่วนใหญ่ของ World of Warcraft จะอยู่บนแถบ 2D HUD plane และองค์ประกอบอื่นบางส่วนจะอยู่ในพื้นที่ของการเล่นเกม เช่น ชื่อของผู้เล่นเป็นต้น แต่อย่างไรก็ตามตัวละครไม่ได้รับรู้ถึง User interface ใด ๆ สุดท้าย เกม Mass Effect 3 ใช้ User Interface แบบ Non-diegetic อย่างมาก เพื่อบอกกับผู้เล่น ว่าควรจะเลือกอาวุธ เพิ่มพลัง หรือทำกิจกรรมอื่น ๆ อย่างไร

Web Study

Web Study

ตัวอย่าง ทดสอบ วาง Layout หน้า ออกแบบเว็บไซต์ Web Design Download Image-Site pixelmag Screen Shot 2016-01-29 at 12.42.30 AM

การออกแบบ กิจกรรมพิเศษ Event Design

การออกแบบ กิจกรรมพิเศษ Event Design

แบบฝึกหัด การออกแบบ กิจกรรมพิเศษ Event Design : Eve การออกแบบ กิจกรรมพิเศษ การสื่อสารการตลาด Event Design รู้จัก Big ธุรกิจของบิ๊กซี 10 ความหมาย ที่สะท้อนชื่อของ “บิ๊กซี” แสดงถึง 2 ปัจจัยหลักสําคัญของการดําเนินธุรกิจ และกลยุทธ์ที่นํามาซึ่งความสําเร็จของบริษัทฯ“บิ๊ก” หมายถึง พื้นที่ขายขนาดใหญ่พร้อมการบริการ และสิ่งอํานวยความสะดวกสารพัน สําหรับรองรับความต้องการของลูกค้า รวมถึงความหลากหลายของสินค้าที่ถูกคัดสรรมาจําหน่าย“ซี” หมายถึง ลูกค้าคนสําคัญซึ่งเรามุ่งเน้นที่จะมอบประสบการณ์ของการจับจ่ายที่ดีเยี่ยมให้ More Detail Download

การออกแบบ รีทัช ภาพ

การออกแบบ รีทัช ภาพ

QA. A : แบบฝึกการ รีทัชภาพ

โจทย์ A รายละเอียด ให้สร้างผลงานโฆษณา โดยมีรูปภาพดังนี้ ในองค์ประกอบของงาน “ขาย Wine โดยมี ผลไม้ ตกลงในแก้ว แล้วนำกระเพื่อม + logo” มีคำโฆษณา : Santolin Pinot Noir & Chardonnay 2013 Swiss German ขนาด : 2000 x 1200 PX. Res : 200 Pixel/In.  
โจทย์ B รายละเอียด ให้สร้างผลงานโฆษณา โดยมีรูปภาพดังนี้ ในองค์ประกอบของงาน “ทำเมือง ผสมกับดินแดนทุ่งหญ้า โดยมีเมืองอยู่ด้านบน ดินแดนหญ้า อยู่ด้านล่าง ในแก้ว Wine มีน้ำกระเพื่อม + ปลา + logo” มีคำโฆษณา : satellite town ขนาด : 2000 x 900 PX. Res : 200 Pixel/In.
โจทย์ C รายละเอียด ให้สร้างผลงานโฆษณา โดยมีรูปภาพดังนี้ ในองค์ประกอบของงาน “ออกแบบ Mobile เป็นองค์ประกอบหลัก มีน้ำสี กระจายออกจากตัวเครื่อง สีสันสดใส + logo หรืออาจมีปลา ในองคฺประกอบ ” มีคำโฆษณา : Full Fill Color ขนาด : 600 x 1700 PX. Res : 200 Pixel/In.
3 113486 746762-bigthumbnail art01 ll_wk_11_2
©2009 Thomas van Ardenne Strobist: aquarium with 1 x SB26 1/32 left, 1 x 430ex 1/32 right. camera: 1/200, F/8, iso 100
©2009 Thomas van Ardenne
Strobist: aquarium with 1 x SB26 1/32 left, 1 x 430ex 1/32 right. camera: 1/200, F/8, iso 100
heart-shaped-splash3 desktop_wallpaper_liquid_splash_photography_watersplash_1920x1200_01 clean glass_4ba3e3545ed3e_hires 24260-old-city-street-1920x1080-photography-wallpaper ออกแบบ Website Santolin-Logo-489x130 photo-project-water-splash maxresdefault01 maxresdefault landscape_photography_trees_cool_wallpapers empty-wine-glass-7172186 Shanghai - City Of Lights || China albertpark3b albertpark3b rape and the tree water-splash-collection-isolated-white-background-abstract-liquid-splashes-35747487 water-splash-2279697 Splash splash blue-water-splash-9987879 san-juan-mountains-dallas-divide-panoramic-autumn-fall-foliage-colorado-high-definition-hd-professional-landscape-photography iphone-mockup-psds-(41) iPhone-6-Mockup-psd1 16413158-Colored-paint-splash-isolated-on-white-background-Stock-Photo-color 8490608-red-paint-splash-isolated-on-white-background-Stock-Photo 930529 05 stock-photo-abstract-color-splash-set-isolated-on-white-background-378583123 splash-illustration-cmyk-color-34422640 splash-abstract-illustration-colorful-ink-34601338 paint-can-falls-color-splash-26171852 oaint iphone-mockup-psds-8 Betta-Fish-Photography-2 fish_10