פיקסל מבוסס אתרי אינטרנט משאבים, הדרכות, דוגמאות

עיצוב ממשק אינטרנט באמצעות גרפיקה בסגנון פיקסל הוא יחסית מעורפל בהשוואה למגמות המודרניות. אתה באמת צריך לחפור דרך קומץ של אתרי אינטרנט באינטרנט כדי למצוא כמה דוגמאות טובות; זה קשה אבל לא בלתי אפשרי.

במאמר זה אספתי מגה אוסף של כל מה שאתה צריך עבור עיצוב אתר מבוסס פיקסל. ישנם עשרות מדריכים בריאים למתחילים ומומחים כאחד. אני גם כללה כמה כלים שימושיים ומשאבים שבהם אתה יכול לשחק עם כדי לחקור את הנושא עוד יותר. אם אתה בכלל מעוניין גרפיקה משחק וידאו או יצירות אמנות פיקסל איזומטרי אז אתה תאהב את האוסף הזה.

משאבים

אלה הם כמה משאבי פיתוח ייחודיים עבור סקריפטים אינטרנט וגרפיקה דיגיטלית. כפי שאתה להתעמק ביצירת פריסות אתר אינטרנט פיקסל אתה לא תמיד מרגיש צורך לעקוב הכל כדי נקודה. אוסף זה של משאבים מבוססי אינטרנט עשוי בהחלט להיות שימושי שוב ושוב.

באדיבות

התרגלתי לעבוד עם קוד פתוח. זו הסיבה למצוא תוסף jQuery כמו Spritely הוא תמיד מצב מרגש. אתה יכול לכלול סקריפט זה לאתר האינטרנט שלך עבור אנימציה ספרייט דינמי מהיר ורקע גלילה.

הפלאגין כולו מופעל על ידי JavaScript ו- HTML / CSS; לא נדרש פלאש או כל שפה backend אחרים. דף התיעוד הוא פשוט אך מספיק כדי להתחיל. היזמים יש שפע של הדגמות לדוגמה אשר ניתן להוריד גם כן.

הגרסה הנוכחית יציבה לשחרר 0.6.1 אשר מתעדכן באופן מתון. האפקטים של האנימציה תואמים את Opera, Chrome, Safari, Firefox ו- Internet Explorer 6+. כמו כן, כל דפדפנים חכמים הפועלים על אנדרואיד או iOS צריכים להיות מושלמים.

פאטפיקסלים

זהו קוד פתוח ספרייט סקריפט שפותח על ידי Matías Martínez. FatPixels דורש רק את הספריה jQuery לרוץ כראוי. למרות שהייתי אומר כי Spritely היא ספריית הנפשה מורכבת יותר, FatPixels יש נישה בשוק עבור מפתחי אינטרנט.

אתה יכול בקלות לבנות sprites אנימציה ללא יצירת .gif תמונה. למעשה, תוכל לייצא את כל התמונות כמו .jpg, וליצור תור של שדונים עבור אפקט אנימציה אחת ארוכה. דף הבית של FatPixels כולל הדגמה מצוינת יחד עם הבלוק של קוד jQuery המשמש לבנייתו. אם אתה מחפש משהו קל להנפיש את שדונים שלך ואז FatPixels היא הדרך ללכת.

SmartSprites

בעת שימוש במילה "ספרייט" יש כמה משמעויות שונות אליו. משחק וידאו תווים או sprites אנימציה הם בדרך כלל תמונות קטנות שניתנו עם מעט מאוד פיקסלים. עם זאת ב- CSS, המונח ספרייט מתייחס לתמונה אחת הפועלת כסדין של סמלים עבור אתר האינטרנט שלך.

הסיבה שאתה צריך להשתמש בגיליון ספרייט אחד במקום תמונות בודדות היא לצמצם את משאבי השרת. זה הרבה יותר מהר כדי להוריד תמונה גדולה יותר מחזיק את כל הסמלים שלך במקום הרבה תמונות קטנות אך נפרדות. אבל לשים את כל הסמלים האלה יחד Photoshop יכול להיות מטרד אמיתי; אפילו לא בהכרח קשה, רק חוזר על עצמו זמן רב.

תודה לאל SmartSprites CSS Generator הוא משאב פנטסטי למצב זה. אתה יכול ליצור במהירות גיליון פיקסל מושלמת עם כל התמונות שלך בפורמט GIF או PNG. בנוסף אתה יכול לקבוע במהירות מה שלך מיקום הרקע קואורדינטות x / y צריכות להיות עבור כל סמל בנפרד.

דגימות BG

עיצוב קבוצה טובה של תמונות רקע חוזר מאוד קשה. זה יכול לקחת ימים לפני שתוכל ליצור תמונות חלקה. אבל למרבה המזל יש משאבים מקוונים להורדת אריחי רקע חינם.

גלריית תבניות Squidfingers היא משאב אחד כזה. הוא מציע מעל 150 דפוסים שונים בסגנון פיקסל שבו אתה יכול להוריד ולהשתמש על הפרויקטים שלך. סגנונות הם דינמיים מאוד צבעוני, ועל מגוון כזה, זה משאב מצוין לשמור שימושי. קישורים להורדה הם בפורמט. Zip מה שהופך אותם קטנים וקלים יותר להעביר בין מחשבים.

משאבים Spriters

אני לא יכול להגיד דברים גדולים מספיק על משאבים Spriters. זה אתר שבו אתה יכול לחפש את כל מערכות המשחקים השונים עבור גיליונות ספרייט. אלה יכולים לכלול מפות, מבנים, מסכי תפריט, sprites אופי, סמלים, וכל דבר פחות או יותר!

הם היו באינטרנט מאז 2001 ואת הקטלוג של משחקי וידאו גדלה מאוד. יש קהילה שלמה מאחורי TSR עם מעצבים גרפיים אשר יכולים לקרוע אלה שדונים שונים המשחקים. אם אתה מעוניין בכל צורה של עיצוב משחק וידאו או אוהדים מקוונים, תצטרך לבדוק את זה בגלריה מדהימה.

עוד יותר מעניין כמה אתרים אחות אשר הוליד את TSR. אוהדי משחקים גם עזר עם קרע בסיס textures ו טיוח מודלים אופי. בסך הכל זה באמת קהילה גדולה מאוד תומכת לעבוד עם שדונים יצירות אמנות דיגיטלית.

400 פיקסלים

זהו יישום אינטרנט מגניב מאוד אשר אינו מספק ערך חיוני, אבל זה בהחלט מסודר. 400 פיקסלים מאפשר לך ליצור מסמך פיקסל באינטרנט לאחסן את התמונה ברשת שלהם. האתר מעוצב באופן דומה לדף הבית של מיליון דולר עם כל תמונה תופסת בלוק מרובע בתמונה הכוללת.

אתה יכול לשחק ברחבי ממשק האינטרנט שלהם ליצור כמה אמנות מטופשת באמת. זה לא משהו שאתה תרים מיד, אבל זה כיף לשחק עם פעם אתה מקבל את העניין. וזה כלי נחמד שאתה יכול לעבוד עם כל מחשב שיש לו גישה לאינטרנט.

תפוקה גדולה

ברוח דומה כמו 400 פיקסלים אתה יכול להשתמש פלט ראשי כמו סטודיו מקוון אישי עבור גרפיקה פיקסל. זה עדיין בשלבים המוקדמים של הפיתוח, אבל כל הפונקציונליות של המשתמש הליבה כבר זמין. אתה יכול להירשם לקבלת חשבון בחינם ולהתחיל ליצור אמנות פיקסל מיד.

כל תמונה מאוחסן באופן מקומי על השרתים שלהם שבו אתה יכול hotlink באתרי אינטרנט ופורומים. רבים מהתמונות פתוחים לקהל הרחב וניתן לבדוק אותם על ידי לחיצה על מחברים או תגים שונים. יש גם תיבת חיפוש, אבל אני מרגיש את האיכות של תוצאות החיפוש לא תמיד נהדר.

פלט מרכזי נראה כמו כלי קהילה אחרת זה כיף לדעת על, אבל כנראה לא יכול להציע ערך חינוכי רב עבור אמנים פיקסל.

הדרכות

עכשיו שיש לך את המשאבים, בואו נסתכל על הדרכות שסופקו על ידי מרכזי חינוך רבים ופוסטים מועילים הבלוג מפוזרים ברחבי האינטרנט. אני צריך להרכיב קבוצה קטנה של שימושי באמת פיקסל אמנות הדרכות למתחילים ומעצבי ביניים. רבים של הדרכות אלה הילוך להתמקד Adobe Photoshop, אבל אתה יכול לעקוב יחד עם כמעט כל עורך תמונה מתקדמת.

הדרכה ספריי פיקסל על ידי דרק יו

ברור שיש עשרות מאות מדריכים פיקסל ספרייט ב- Google, אבל זה הדרכה ספציפית באתר של דרק יו עובר הרבה שלבים שונים לחנך כיצד ליצור שדונים פיקסל. רוב התהליך כבר יעיל ומסביר בצורה המאפשרת למתחילים לקפוץ במהירות לתוך הפעולה.

אוהדי משחק וידאו יאהבו את המדריך הזה, כי אתה מקבל מאחורי הקלעים להציץ על יצירת גרפיקה ספציפית זו. אני אוהב למצוא פריסת אתר עם גרפיקה משחק וידאו פיקסל littered לאורך כל העיצוב. הוא מספק תחושה ייחודית של נוסטלגיה, וזה משהו שאתה לא מוצא בכל מקום. כל אחד מחפש ליצור sprites פיקסל משלו מכל סיבה שהיא יכול להתחיל על 10 שלבים סדרה של דרק הדרכה.

הגדרת Photoshop עבור אמנות פיקסל על ידי ברנדון טרב

הנה עוד מדריך מושלם המיועד למתחילים בתחום של גרפיקה פיקסל. פוסט הבלוג נכתב על ידי ברנדון טרב שהוא מעצב פנטסטי ומפתח סלולרי. אתה יכול למצוא כל מיני מידע שימושי במדריך מפורט זה פיקסל מבוסס Photoshop אמנות.

עליך לדעת כיצד להגדיר העדפות ב- Photoshop כך שתמונת הפיקסלים שלך לא תיראה מביכה או שתאבד איכות בעת ייצוא. אתה עלול להיות מופתע ללמוד התאמה אישית הרבה נדרש באמת לקבל איכות תמונה נחמדה.

ציור יד מעשה ידי פיקסלים מאת ראסל טייט

הנה עוד מדהים הדרכה מלאה של טכניקות יד מצוירת אמנות פיקסל ב Photoshop. אוסף זה של טכניקות אמנות פיקסל הוא פשוט מדהים. כל מי שגלוש בתוכן ימצא, קרוב לוודאי, משהו שלא הכירו קודם לכן.

ישנם הסברים מפורטים על יצירת מרקם על הדשא לנבוח; גם על איך לשכפל יצירות אמנות פיקסל שצייר ולהפוך אותו עיצוב סמל. כל זה מגיע לתרגול ודיוק בכל תחום. אלה באמת תשוקה יהיה לדבוק בו ובתוך כמה חודשים למצוא טכניקה מוצקה עבור רעיונות בסגנון פיקסל שלהם.

פיתוח תיק CSS / JS על ידי דניאל שטרנליכט

הנה מדריך אחד מתוך Smashing מגזין על איך קוד תיק משחקים עם CSS / JS אשר ניצלו שדונים רבים מסדרת המשחק פוקימון. המחבר הוא דניאל Sternlicht אשר גם במקרה להפעיל את תיק אישי על פריסת המשחק מבוסס.

האתר פועל כעולם RPG שבו אתה שולט על ספרייט אופי עם המקלדת. ניתן להזין מבנים שונים ולאחר מכן להביא מידע כגון פרטים ליצירת קשר ורשומות תיק.

אני באמת אוהב את זה הדרכה, וזו דרך מרגשת לשלב גרפיקה פיקסל עם פיתוח אתר אינטרנט. גם אם אתה לא יודע הרבה על JavaScript זה עדיין מאמר מעניין. עברתי כמה קוד חייב לתת מחמאות אדירות דן עבור הדרכה כזה יצירתי. כל הקנאים פוקימון בוודאי להתאהב הרעיונות שלו.

הדרכות פיקסל איזומטרי על ידי מטריקס

זה אתר קטן gas13.ru יש כמה הדרכות פיקסל אקסצנטרי ומקצועי ביותר שראיתי אי פעם. בבריכה בריכת איזומטרי אתה הציג ליצירת בלוקים מבריק ומרקם מים. בנוסף תמצאו משאבים עבור כל האחרים איזון פיקסלים איזומטרי בסרגל הצד.

יש כל כך הרבה ללמוד: אתה יכול לעצב חזית החנות, ספרייט פיקסל, או אפילו טקסטורות מפורט עבור משחקי וידאו ורקע האתר. אני לא בטוח אם המחבר עדיין פעיל לפרסם תוכן, אבל המאמרים הקיימים הם יותר ממספיק כדי ללמוד את היסודות.

סטודיו Purloux פיקסל הדרכה על ידי קווין Chaloux

עכשיו, כי אני כל הרישום הטוב ביותר פיקסלים Tutorials הייתי בהחלט לכלול את הזכות לכיוון ההתחלה. זה כל הדרכה על גרפיקה פיקסל הוא גדול מעקב המאמר Newbies. אתה תהיה הציג מן ההתחלה מאוד לפתוח תוכנות קוד כמו GIMP או Paint.NET.

תלמד כיצד לייצא תמונות ואת היבטים רבים של עיצוב פיקסל כגון dithering ו aliasing. יש כל כך הרבה טכניקות שונות כדי לעקוב אחר. אתה צריך להרים כמה רעיונות עיצוב ידי להסתכל לתוך רטרו 8 סיביות ו 16 סיביות משחקי וידאו.

מחבר קווין Chaloux זיכויים דרק יו של פיקסל ספרייט הדרכה (המפורטים קודם לכן) ומזכיר כי זה כמקור השראה כאשר הוא התחיל הראשון.

יצירת Favicon טוב יותר על ידי Kayla Knight

מעצבי אתרים שוכחים לעתים קרובות כי סמל מועדף (סמל מועדף) התמונה היא חלק ענק של כל תוכנית מיתוג. כל האתרים הפופולריים ביותר ניתן לזהות על ידי 16 × 16 שלהם favicon. כאשר אתה עובד עם בד כזה מוגבל, אתה נאלץ להתמודד עם אמנות פיקסל צפופה ואיורים. זה הדרכה favicon מ OXP עושה עבודה מצוינת של שילוב של שני הרעיונות.

מ Tut זה, אתה יכול להבין מדוע אמנות פיקסל הוא מועיל כל כך בעת יצירת favicons. יש גם כלים וטכניקות מוצקות לייצוא קובץ .ico. כמו כן נכלל חלון ראווה קטן של favicons פופולרי מרחבי האינטרנט.

זה עוד משאב שבו אני מרגיש יכול להועיל לכל מעצבי אתרים. זה מעצים לחנך את עצמך על יצירת favicon ועבודה עם מגבלות פיקסל קפדנית.

גלריית התצוגה

אני רוצה לסגור את המאמר עם גלריה יפה של עיצובים אתר בסגנון פיקסל. כללתי 40 דוגמאות של פריסות שונות עם חזיונות אמנותיים רבים ומגוונים. המגמה של יצירות אמנות pixelated רק מתחיל רק לצוץ מחדש בתוך אתרי אינטרנט המיינסטרים. אני מקווה זה ראווה נפרדת של אתרי פיקסל יכול להציע מקור השראה עבור מפתחי אינטרנט בכל רחבי העולם.

מרכז כדור הארץ

פיקסל

Red Rokk אינטראקטיבית שיווק

בלוג eBoy

טמגו פיקסל

פיקסל

גרפיקה

8 סיביות בד HTML5 מחזור

דניאל שטרנליכט

צבא הטרולים

BlockHead Pix App

madPXL

2.0

קלאסי

RPG Toolkit הדרכות

יוצר העיר

סופי פנטזיה XIII-2

KawaiiHannah פיקסל אמנות

ארגז חול

מר וונג

פיקסל פריק

אמנות פיקסל נסק

Paxjah

טיפשים

ראש מעל עקבים

LOVEPIXEL

הנק ניבורג

Iriescope

iamnotadoll

מתוק

Megapont

מיני מטרופוליס

הייו ואן ריק

סטודיו Pixletemple

Vormgeving מיומן

מוזיאון פיקסל

מהיר

Polpo.net

spiv.cz

4 בצק אמיתי