موارد مواقع الويب القائمة على البكسل ، والبرامج التعليمية ، والأمثلة

يعد تصميم واجهة ويب باستخدام عمل فني على طراز البكسل غامضًا نسبيًا مقارنة بالاتجاهات الحديثة. تحتاج حقًا إلى البحث في عدد قليل من مواقع الويب على الإنترنت للعثور على بعض الأمثلة الجيدة ؛ إنه صعب ولكنه ليس مستحيلاً.

في هذه المقالة لقد جمعت مجموعة ضخمة من كل شيء تحتاجه لتصميم موقع على أساس بكسل. هناك العشرات من الدروس الصحية للمبتدئين والخبراء على حد سواء. لقد قمت أيضًا بتضمين بعض الأدوات والموارد المفيدة التي يمكنك اللعب بها لاستكشاف الموضوع بشكل أكبر. إذا كنت مهتمًا على الإطلاق برسومات ألعاب الفيديو أو الأعمال الفنية بكسل متساوي القياس ، فستحب هذه المجموعة.

مصادر

هذه بعض موارد التطوير الفريدة للبرامج النصية والرسومات الرقمية. أثناء بحثك في إنشاء تخطيطات لمواقع بكسل على الويب ، لن تشعر دائمًا بالحاجة إلى متابعة كل شيء إلى النقطة. قد تأتي هذه المجموعة من الموارد المستندة إلى الويب في متناول اليد مرارًا وتكرارًا.

Spritely

لقد اعتدت على العمل مع شفرة المصدر المفتوح. لهذا السبب فإن العثور على مكون إضافي مسج مثل Spritely هو دائمًا موقف مثير. يمكنك تضمين هذا البرنامج النصي في موقع الويب الخاص بك للحصول على رسوم متحركة ديناميكية سريعة وخلفيات التمرير.

البرنامج المساعد كله مدعوم من JavaScript و HTML / CSS؛ لا يوجد فلاش أو أي لغة خلفية أخرى مطلوبة. صفحة الوثائق بسيطة لكنها كافية لتبدأ. لدى المطورين الكثير من نماذج العروض التي يمكنك تنزيلها أيضًا.

إصدار الإصدار الثابت الحالي هو 0.6.1 والذي يتم تحديثه بشكل معتدل. تأثيرات الحركة متوافقة مع Opera و Chrome و Safari و Firefox و Internet Explorer 6+. وأي متصفحات للهواتف الذكية تعمل على نظام أندرويد أو آي أو إس يجب أن تظهر بشكل مثالي.

FatPixels

هذا نص برمجي قوي مفتوح المصدر تم تطويره بواسطة Matías Martínez. يتطلب FatPixels فقط مكتبة jQuery لتشغيل بشكل صحيح. على الرغم من أنني أقول أن Spritely هي مكتبة رسوم متحركة أكثر تعقيدًا ، إلا أن FatPixels لها مكانة في السوق لمطوري الويب.

يمكنك بسهولة إنشاء نصوص متحركة متحركة دون إنشاء صورة بتنسيق .gif. في الواقع ، ستتمكن من تصدير جميع الصور كـ jpg ، وإنشاء قائمة انتظار من العفاريت لتأثير متحرك طويل. تحتوي الصفحة الرئيسية لـ FatPixels على عرض توضيحي ممتاز إلى جانب مجموعة كود jQuery المستخدمة في بنائه. إذا كنت تبحث عن شيء خفيف الوزن لتحريك العفاريت الخاصة بك ، فإن FatPixels هي السبيل للذهاب.

SmartSprites

عند استخدام كلمة "sprite" ، هناك عدة معان مختلفة لها. تعد شخصيات لعبة الفيديو أو العفاريت المتحركة صورًا أصغر حجمًا يتم تقديمها بعدد قليل جدًا من وحدات البكسل. ومع ذلك ، في مصطلح CSS ، يشير المصطلح sprite إلى صورة واحدة تعمل بمثابة ورقة من الرموز لموقعك على الويب.

السبب الذي يجعلك تستخدم ورقة sprite واحدة بدلاً من الصور الفردية هو تقليل موارد الخادم. من الأسرع بكثير تنزيل صورة أكبر تحتوي على أيقوناتك بدلاً من العديد من الصور الصغيرة ولكن المنفصلة. لكن وضع كل هذه الرموز معًا في Photoshop يمكن أن يكون مشكلة حقيقية ؛ ليس من الصعب بالضرورة ، مجرد تكرار وتستغرق وقتا طويلا.

لحسن الحظ ، يعد SmartSprites CSS Generator مصدرًا رائعًا لهذا الموقف. يمكنك إنشاء ورقة بكسل مثالية بسرعة مع كل صورك بتنسيق GIF أو PNG. بالإضافة إلى ذلك يمكنك بسرعة تحديد ما لديك خلفية موقف يجب أن تكون إحداثيات س / ص لكل رمز الفردية.

أنماط Squidfingers BG

من الصعب جدًا تصميم مجموعة جيدة من صور الخلفية المكررة. قد يستغرق الأمر أيامًا قبل أن تتمكن من إنشاء صور غير ملحومة. ولكن لحسن الحظ ، هناك موارد عبر الإنترنت لتنزيل مربعات الخلفية المجانية.

يعد معرض Squidfingers Patterns أحد هذه المصادر. إنه يوفر أكثر من 150 نمطًا مختلفًا على طراز البكسل يمكنك تنزيله واستخدامه في مشاريعك. الأنماط ديناميكية وملونة للغاية ، وبالنسبة لمجموعة متنوعة ، فهي مورد ممتاز للبقاء في متناول يديك. تكون روابط التنزيل بتنسيق .zip مما يجعل نقلها بين أجهزة الكمبيوتر أصغر وأسهل.

الموارد Spriters

لا أستطيع أن أقول ما يكفي من الأشياء العظيمة حول الموارد Spriters. إنه موقع ويب يمكنك من خلاله البحث في جميع أنظمة الألعاب المختلفة عن أوراق العفريت. يمكن أن تشمل هذه الخرائط والمباني وشاشات القوائم وشخصيات الرموز والأيقونات وأي شيء إلى حد كبير!

لقد تم على الإنترنت منذ عام 2001 ونمت كتالوج ألعاب الفيديو بشكل كبير. هناك مجتمع كامل وراء TSR مع مصممي الغرافيك الذين يمكنهم نسخ هذه العفاريت المختلفة للألعاب. إذا كنت مهتمًا بأي شكل من أشكال تصميم ألعاب الفيديو أو المعجبين عبر الإنترنت ، فيجب عليك مراجعة هذا المعرض المدهش.

أكثر إثارة للاهتمام هي بعض المواقع الشقيقة التي ولدت TSR. ساعدت مراوح الألعاب أيضًا في نسخ نسيج القاعدة وتقديم نماذج الشخصيات. بشكل عام ، إنه مجتمع رائع حقًا يدعم العمل مع العفاريت في الأعمال الفنية الرقمية.

400 بكسل

هذا تطبيق ويب رائع حقًا ولا يوفر قيمة أساسية ، لكنه بالتأكيد أنيق. يتيح لك 400 بكسل إنشاء مستند بكسل عبر الإنترنت وتخزين الصورة في شبكتهم. تم تصميم الموقع بطريقة مماثلة للصفحة الرئيسية التي تبلغ قيمتها مليون دولار مع كل صورة تأخذ كتلة مربعة في الصورة الإجمالية.

يمكنك اللعب في واجهة الويب الخاصة بهم مما يؤدي إلى إنشاء بعض الأعمال الفنية الأبله. إنه ليس شيئًا ستلتقطه على الفور ، ولكن من الممتع أن تلعب معه بمجرد تعطله. إنها أداة لطيفة يمكنك التعامل معها من أي جهاز كمبيوتر لديه إمكانية الوصول إلى الإنترنت.

المخرجات الرئيسية

في سياق مماثل مثل 400 بكسل ، يمكنك استخدام Major Output كاستوديو شخصي عبر الإنترنت لأعمال بكسل فنية. لا يزال في المراحل الأولى من التطوير ، لكن جميع وظائف المستخدم الأساسية متاحة بالفعل. يمكنك التسجيل للحصول على حساب مجاني والبدء في إنشاء بكسل الفن على الفور.

يتم تخزين كل صورة محليا على خوادمهم والتي يمكنك ربطها على المواقع والمنتديات. العديد من الصور مفتوحة للجمهور ويمكنك التحقق منها من خلال النقر على المؤلفين أو العلامات المختلفة. يوجد أيضًا مربع بحث ، ولكني أشعر أن جودة نتائج البحث ليست دائمًا رائعة.

يبدو "المخرجات الرئيسية" بمثابة أداة مجتمعية أخرى يسهل معرفتها ، لكن من المحتمل ألا تقدم قيمة تعليمية كبيرة لفنانين البكسل.

دروس

الآن بما أن لديك الموارد ، دعونا نلقي نظرة على البرامج التعليمية المقدمة من العديد من المراكز التعليمية ومنشورات المدونات المفيدة المنتشرة في جميع أنحاء الإنترنت. لقد وضعت مجموعة صغيرة من مفيد حقا دروس الفن بكسل للمبتدئين والمصممين وسيطة. تركز العديد من هذه البرامج التعليمية على Adobe Photoshop ، ولكن يمكنك متابعتها مع أي محرر صور متقدم تقريبًا.

و Pixel العفريت البرنامج التعليمي من قبل ديريك يو

من الواضح أن هناك عشرات المئات من البرامج التعليمية العفوية على البكسل على Google ، لكن هذا البرنامج التعليمي المعين على موقع Derek Yu على الإنترنت يمضي عبر العديد من الخطوات المختلفة في تعليم كيفية إنشاء نصوص بكسل. تم تبسيط جزء كبير من العملية وشرحها بطريقة تسمح للمبتدئين بالانتقال بسرعة إلى العمل.

سيحب عشاق ألعاب الفيديو هذا البرنامج التعليمي حيث تحصل على نظرة خاطفة من وراء الكواليس على إنشاء هذه الرسومات المحددة. أنا أحب العثور على تصميم موقع على شبكة الإنترنت مع العمل الفني بكسل لعبة فيديو تناثرت في جميع أنحاء التصميم. إنه يوفر إحساسًا فريدًا بالحنين إلى الماضي ، وهو شيء لا تجده في كل مكان. يمكن لأي شخص يتطلع إلى إنشاء أشكال بكسل خاصة به لأي سبب من الأسباب أن يبدأ في سلسلة دروس من 10 خطوات من Derek.

تكوين فوتوشوب لبيكسيل الفن براندون تريب

إليك برنامج تعليمي مثالي آخر موجه نحو المبتدئين في مجال العمل الفني بالبكسل. كتب المدونة براندون تريب وهو مصمم رائع ومطور للهواتف المحمولة. يمكنك العثور على جميع أنواع المعلومات المفيدة في هذا الدليل المفصل لفن Photoshop القائم على البكسل.

يجب أن تعرف كيفية إعداد تفضيلات في Photoshop حتى لا يظهر عملك الفني بالبكسل حرجًا أو يفقد الجودة عند التصدير. قد تتفاجأ بمعرفة أن التخصيص المطلوب مطلوب للحصول على جودة صورة رائعة.

رسم بكسل يدوية الصنع بواسطة راسل تيت

إليك برنامج تعليمي رائع آخر مليء بتقنيات فن البيكسلات المرسومة يدويًا في Photoshop. هذه المجموعة من تقنيات الفن بكسل مذهل بكل بساطة. من المرجح أن يجد أي شخص يتنقل عبر المحتوى شيئًا لم يعرفه من قبل.

هناك تفسيرات مفصلة حول إنشاء نسيج على العشب واللحاء. أيضًا حول كيفية استنساخ عمل فني بالبكسل الذي قمت برسمه وتحويله إلى تصميم رمز. كل ذلك يأتي إلى الممارسة والدقة في كل مجال. أولئك الذين لديهم شغف حقيقي سيواصلونه خلال بضعة أشهر وسيجدون تقنية قوية لأفكارهم على طراز البكسل.

تطوير حزمة ألعاب CSS / JS من دانييل ستيرنشت

فيما يلي برنامج تعليمي واحد من مجلة Smashing حول كيفية ترميز مجموعة ألعاب باستخدام CSS / JS والتي استخدمت العديد من العفاريت من سلسلة ألعاب Pokemon. المؤلف هو دانيال ستيرنشت الذي يحدث أيضًا أن يدير مجموعته الشخصية على هذا التصميم القائم على الألعاب.

يعمل موقع الويب كعالم RPG حيث يمكنك التحكم في حرف العفريت باستخدام لوحة المفاتيح. يمكنك إدخال مبانٍ مختلفة ، ثم إحضار معلومات مثل تفاصيل الاتصال وإدخالات المحفظة.

أنا حقا أحب هذا البرنامج التعليمي ، وهي وسيلة مثيرة للجمع بين العمل الفني بكسل مع تطوير الموقع. حتى إذا كنت لا تعرف الكثير عن جافا سكريبت ، فلا يزال هذا مقالًا مثيرًا للاهتمام. لقد مررت ببعض التعليمات البرمجية ويجب أن أقدم تحيات هائلة إلى Dan لمثل هذا البرنامج التعليمي الخلاق. أي متعصب بوكيمون يقع بالتأكيد في حب أفكاره.

متساوي القياس بكسل الدروس بواسطة Matriax

يحتوي هذا الموقع الصغير على gas13.ru على بعض البرامج التعليمية الأكثر غرابة في البكسل والمهنية التي رأيتها في حياتي. في البرنامج التعليمي للمسبح متساوي القياس ، تعرفت على إنشاء كتل لامعة وملمس مائي. بالإضافة إلى ذلك ، ستجد موارد لكل وحدات البكسل متساوية القياس الأخرى في الشريط الجانبي.

هناك الكثير لتتعلمه: يمكنك تصميم واجهة متجر أو شبح بكسل أو حتى مواد مفصلة لألعاب الفيديو وخلفيات موقع الويب. لست متأكدًا مما إذا كان هذا المؤلف لا يزال ينشر المحتوى بنشاط ، ولكن المقالات الموجودة أكثر من كافية للمبتدئين لتعلم الأساسيات.

استوديو Purloux بكسل تعليمي بواسطة كيفن تشالوكس

الآن بعد أن أدرجت أفضل البرامج التعليمية بالبكسل ، أود بالتأكيد تضمين هذا في البداية. يعد هذا البرنامج التعليمي بالكامل حول الأعمال الفنية بالبكسل مقالة متابعة رائعة للمبتدئين. سيتم تقديمك من البداية إلى فتح برنامج المصدر مثل GIMP أو Paint.NET.

ستتعلم كيفية تصدير الصور والأوجه العديدة لتصميم البكسل مثل التدرج ومكافحة التعرجات. هناك العديد من التقنيات المختلفة لمتابعة جنبا إلى جنب مع. يجب أن تلتقط بعض أفكار التصميم من خلال النظر في ألعاب الفيديو ذات 8 بت و 16 بت الرجعية.

المؤلف Kevin Chaloux ينسب إلى برنامج Derek Yu للعنصر بكسل (المدرج سابقًا) ويذكر أن هذا مصدر إلهام عندما بدأ لأول مرة.

خلق أفضل Favicon بواسطة كايلا نايت

غالبًا ما ينسى مصممو الويب أن الصورة المفضلة (favicon) هي جزء كبير من أي مخطط للعلامات التجارية. يمكن التعرف على جميع المواقع الأكثر شعبية من خلال فافيكون 16 × 16. عندما تعمل مع لوحة قماشية محدودة كهذه ، تضطر إلى التعامل مع الأعمال الفنية والرسوم التوضيحية الكثيفة للبكسل. يقوم هذا البرنامج التعليمي favicon من OXP بعمل ممتاز في الجمع بين كلتا الأفكار.

من هذا tut ، يمكنك أن تفهم لماذا يكون فن البيكسل مفيدًا للغاية عند إنشاء favicons. هناك أيضًا أدوات وتقنيات صلبة لتصدير ملف .ico. كما شملت هو عرض صغير من favicons شعبية من جميع أنحاء شبكة الإنترنت.

هذا مصدر آخر أشعر أنه يمكن أن يستفيد منه جميع مصممي الويب. إنه تمكين لتثقيف نفسك حول إنشاء فافيكون والعمل مع قيود صارمة بكسل.

معرض الصور

أرغب في إغلاق المقالة بمعرض جميل لتصميمات مواقع الويب المصممة على طراز البكسل. لقد قمت بتضمين 40 مثالًا للتخطيطات المختلفة مع العديد من الرؤى الفنية المتنوعة. لا يزال اتجاه العمل الفني ذي البيكسلات في الظهور في مواقع الويب العادية فقط. آمل أن توفر هذه الواجهة المميزة لمواقع البكسل مصدرًا للإلهام لمطوري الويب في جميع أنحاء العالم.

متجه نحو الأرض الوسطى

PixelJam

ريد روك للتسويق التفاعلي

eBoy مدونة

Tamago بكسل

pixelHugger

بكسل الرسومات المنحرفة

8-بت HTML5 دورة قماش

دانيال ستيرنخت

جيش المتصيدون

BlockHead بيكس التطبيقات

madPXL

supertott 2.0

ClassicGaming

أدوات مجموعة أدوات RPG

مدينة الخالق

فاينل فانتسي XIII-2

KawaiiHannah بكسل الفن

رمل

السيد وونغ

بكسل غريب

Nasc Pixel Art

Paxjah

FoolsTown

رأسا على عقب

LOVEPIXEL

هنك نيبورج

Iriescope

iamnotadoll

SweetPIX

Megapont

ميني متروبوليس

هايو فان ريك

Pixeltemple ستوديو

بارعة Vormgeving

متحف بكسل

QuickHoney

Polpo.net

spiv.cz

4 ريال العجين