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