แหล่งข้อมูลเว็บไซต์สอนและตัวอย่างพิกเซล

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

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

ทรัพยากร

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

spritely

ฉันคุ้นเคยกับการทำงานกับโอเพ่นซอร์สโค้ดมากขึ้นเรื่อย ๆ นั่นเป็นเหตุผลที่การค้นหาปลั๊กอิน jQuery อย่าง Spritely นั้นเป็นสถานการณ์ที่น่าตื่นเต้นอยู่เสมอ คุณสามารถรวมสคริปต์นี้ไว้ในเว็บไซต์ของคุณสำหรับภาพเคลื่อนไหวสไปรท์แบบไดนามิกและพื้นหลังการเลื่อนที่รวดเร็ว.

ปลั๊กอินทั้งหมดขับเคลื่อนโดย JavaScript และ HTML / CSS; ไม่จำเป็นต้องใช้ Flash หรือภาษาแบ็กเอนด์อื่น ๆ หน้าเอกสารนั้นง่าย แต่ก็เพียงพอที่จะให้คุณเริ่มต้น นักพัฒนามีตัวอย่างจำนวนมากซึ่งคุณสามารถดาวน์โหลดได้เช่นกัน.

เวอร์ชันรีลีสที่เสถียรในปัจจุบันคือ 0.6.1 ซึ่งได้รับการอัพเดตในระดับปานกลาง เอฟเฟ็กต์ภาพเคลื่อนไหวนั้นเข้ากันได้กับ Opera, Chrome, Safari, Firefox และ Internet Explorer 6+ เบราว์เซอร์สมาร์ทโฟนใด ๆ ที่ทำงานบน Android หรือ iOS ควรแสดงผลได้อย่างสมบูรณ์แบบ.

FatPixels

นี่คือสคริปต์สไปรต์โอเพนซอร์สที่มีประสิทธิภาพซึ่งพัฒนาโดยMatíasMartínez FatPixels ต้องการไลบรารี jQuery เพื่อให้ทำงานได้อย่างถูกต้อง แม้ว่าฉันจะบอกว่า Spritely เป็นห้องสมุดแอนิเมชั่นที่ซับซ้อนกว่า FatPixels มีช่องว่างในตลาดสำหรับนักพัฒนาเว็บ.

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

SmartSprites

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

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

โชคดีที่เครื่องสร้าง CSS SmartSprites เป็นทรัพยากรที่ยอดเยี่ยมสำหรับสถานการณ์นี้ คุณสามารถสร้างชีตพิกเซลที่สมบูรณ์แบบได้อย่างรวดเร็วด้วยรูปภาพทั้งหมดของคุณในรูปแบบ GIF หรือ PNG นอกจากนี้คุณสามารถกำหนดสิ่งที่คุณ พื้นหลังตำแหน่ง พิกัด x / y ควรสำหรับแต่ละไอคอน.

รูปแบบ Squidfingers BG

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

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

ทรัพยากร Spriters

ฉันไม่สามารถพูดสิ่งที่ดีเกี่ยวกับ The Spriters Resource ได้มากพอ เป็นเว็บไซต์ที่คุณสามารถค้นหาระบบเกมต่าง ๆ สำหรับแผ่นผีสาง สิ่งเหล่านี้อาจรวมถึงแผนที่สิ่งปลูกสร้างหน้าจอเมนูสไปรต์ตัวละครไอคอนและอะไรก็ได้!

พวกเขาออนไลน์ตั้งแต่ปี 2001 และแคตตาล็อกของวิดีโอเกมเติบโตขึ้นอย่างมาก มีชุมชนทั้งหมดที่อยู่เบื้องหลัง TSR พร้อมด้วยนักออกแบบกราฟิกที่สามารถฉีกรูปแบบการเล่นเกมต่าง ๆ เหล่านี้ได้ หากคุณสนใจในการออกแบบวิดีโอเกมหรือแฟนไซต์ออนไลน์ทุกรูปแบบคุณจะต้องไปที่แกลเลอรีที่น่าตื่นตาตื่นใจนี้.

สิ่งที่น่าสนใจยิ่งกว่าก็คือบางเว็บไซต์ในเครือที่ออกมาจาก TSR แฟนเกมยังช่วยด้วยการริปเท็กซ์เจอร์พื้นฐานและการสร้างแบบจำลองตัวละคร โดยรวมแล้วเป็นชุมชนที่ยอดเยี่ยมมากที่สนับสนุนการทำงานกับสไปรต์ในงานศิลปะดิจิทัล.

400 พิกเซล

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

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

การส่งออกที่สำคัญ

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

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

ผลผลิตหลักดูเหมือนเครื่องมือชุมชนอื่นที่น่าสนุก แต่ก็ไม่สามารถให้คุณค่าการศึกษาสำหรับศิลปินพิกเซลได้มากนัก.

สอน

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

The Pixel Sprite Tutorial โดย Derek yu

เห็นได้ชัดว่ามีบทเรียนนับร้อยพิกเซลบน Google แต่บทช่วยสอนพิเศษนี้ในเว็บไซต์ของ Derek Yu ผ่านขั้นตอนต่าง ๆ ในการให้ความรู้เกี่ยวกับวิธีสร้างพิกเซลสไปรท์ กระบวนการส่วนใหญ่ได้รับการปรับปรุงและอธิบายในลักษณะที่ช่วยให้ผู้เริ่มต้นสามารถกระโดดเข้าสู่การกระทำได้อย่างรวดเร็ว.

แฟนวิดีโอเกมจะรักบทช่วยสอนนี้เนื่องจากคุณได้เห็นเบื้องหลังการสร้างกราฟิกเฉพาะเหล่านี้ ฉันชอบที่จะหาเลย์เอาต์ของเว็บไซต์พร้อมงานศิลป์พิกเซลวิดีโอเกมซึ่งเกลื่อนไปด้วยตลอดการออกแบบ มันให้ความรู้สึกที่เป็นเอกลักษณ์ของความคิดถึงและเป็นสิ่งที่คุณไม่พบทุกที่ ทุกคนที่ต้องการสร้างสไปรต์พิกเซลของตัวเองไม่ว่าด้วยเหตุผลใดก็ตามสามารถเริ่มด้วยชุดการสอนแบบ 10 ขั้นตอนของ Derek.

การกำหนดค่า Photoshop สำหรับ Pixel Art โดย Brandon Treb

นี่คือการสอนที่สมบูรณ์แบบอีกรูปแบบหนึ่งซึ่งมุ่งเน้นไปที่ผู้เริ่มต้นในสาขางานศิลปะพิกเซล บล็อกโพสต์เขียนโดย Brandon Treb ผู้ออกแบบและผู้พัฒนามือถือ คุณสามารถหาข้อมูลที่เป็นประโยชน์ได้ทุกประเภทในคู่มือรายละเอียดเกี่ยวกับงานศิลปะ Photoshop ที่ใช้พิกเซล.

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

การวาดพิกเซลด้วยมือโดย Russell Tate

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

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

การพัฒนาพอร์ตโฟลิโอเกม CSS / JS โดย Daniel Sternlicht

ต่อไปนี้เป็นแบบฝึกหัดหนึ่งจาก Smashing Magazine เกี่ยวกับวิธีเขียนโค้ดพอร์ตเกมด้วย CSS / JS ซึ่งใช้ sprite มากมายจากซีรี่ส์เกมโปเกมอน ผู้เขียนคือแดเนียลสเติร์นลิชท์ซึ่งเป็นผู้จัดทำแฟ้มสะสมผลงานส่วนตัวบนเค้าโครงเกมนี้.

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

ฉันรักการกวดวิชานี้อย่างแท้จริงและเป็นวิธีที่น่าตื่นเต้นในการรวมงานศิลปะพิกเซลเข้ากับการพัฒนาเว็บไซต์ แม้ว่าคุณจะไม่ค่อยรู้เรื่อง JavaScript มากนัก แต่ก็ยังเป็นบทความที่น่าสนใจ ฉันได้อ่านโค้ดบางส่วนแล้วและต้องให้คำชมอย่างมากกับ Dan สำหรับการสอนที่สร้างสรรค์ แฟน ๆ โปเกมอนทุกคนจะตกหลุมรักกับความคิดของเขาอย่างแน่นอน.

บทช่วยสอน Isometric Pixel โดย Matriax

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

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

Studio Purloux Pixel Tutorial โดย Kevin Chaloux

ตอนนี้ฉันกำลังแสดงรายการบทแนะนำพิกเซลที่ดีที่สุดทั้งหมดที่ฉันจะรวมไว้ในจุดเริ่มต้น บทช่วยสอนทั้งหมดเกี่ยวกับงานศิลปะพิกเซลนี้เป็นบทความที่ยอดเยี่ยมสำหรับมือใหม่ คุณจะได้รับการแนะนำตั้งแต่เริ่มแรกถึงซอฟต์แวร์โอเพ่นซอร์สเช่น GIMP หรือ Paint.NET.

คุณจะได้เรียนรู้วิธีการส่งออกภาพและการออกแบบพิกเซลเช่นการทำ dithering และ anti-aliasing มีเทคนิคต่าง ๆ มากมายให้ติดตามพร้อมกับ คุณควรเลือกแนวคิดการออกแบบโดยดูจากวิดีโอเกมย้อนยุค 8 บิตและ 16 บิต.

ผู้แต่ง Kevin Chaloux ให้เครดิตการสอนพิกเซลสไปรต์ของ Derek Yu (ระบุไว้ก่อนหน้านี้) และกล่าวว่านี่เป็นแหล่งที่มาของแรงบันดาลใจเมื่อเขาเริ่มต้นครั้งแรก.

สร้าง Favicon ที่ดีกว่าโดย Kayla Knight

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

จากตุ้มนี้คุณสามารถเข้าใจได้ว่าทำไมศิลปะพิกเซลจึงมีประโยชน์มากเมื่อสร้าง favicons นอกจากนี้ยังมีเครื่องมือและเทคนิคที่เป็นของแข็งสำหรับการส่งออกไฟล์. ico รวมถึงการแสดงเล็ก ๆ น้อย ๆ ของ favicons ยอดนิยมจากในเว็บ.

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

ตู้โชว์ตู้โชว์

ฉันต้องการที่จะปิดบทความด้วยแกลเลอรี่ที่ดีของการออกแบบเว็บไซต์ในสไตล์พิกเซล ฉันได้รวบรวมตัวอย่างของเลย์เอาต์ต่างๆ 40 รูปพร้อมด้วยวิสัยทัศน์ทางศิลปะที่หลากหลาย แนวโน้มของงานศิลปะพิกเซลตัวอักษรเป็นเพียงการเริ่มต้นที่จะเกิดขึ้นอีกครั้งในเว็บไซต์หลัก ฉันหวังว่าการจัดแสดงเว็บไซต์พิกเซลที่แตกต่างสามารถนำเสนอแหล่งที่มาของแรงบันดาลใจสำหรับนักพัฒนาเว็บทั่วโลก.

กลางดิน

PixelJam

การตลาดเชิงโต้ตอบ Red Rokk

บล็อก eBoy

Tamago Pixel

pixelHugger

กราฟิกเบี่ยงเบนของพิกเซล

ผ้าใบ Canvas 8-Bit HTML5

Daniel Sternlicht

กองทัพแห่ง Trolls

แอพ BlockHead Pix

madPXL

supertott 2.0

ClassicGaming

ชุดเครื่องมือ RPG

ผู้สร้างเมือง

ไฟนอลแฟนตาซี XIII-2

ศิลปะพิกเซล KawaiiHannah

The Sandbox

นายหว่อง

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

ปวดหัว

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

เมืองเล็ก ๆ

Hayo van Reek

สตูดิโอ Pixeltemple

Vormgeving เก่ง

พิพิธภัณฑ์พิกเซล

QuickHoney

Polpo.net

spiv.cz

4 แป้งจริง