קידמוס - גרפיקה ממוחשבת | עיצוב גרפי | מדריכים און ליין

בלנדר גרפיקה ממוחשבת ומפות - Blender and computer graphics

2012-01-12T22:43:00.000+02:00

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

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

Blender UV Mapping

2011-12-27T21:55:00.000+02:00

ערב טוב,

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

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

בלנדר תאורה חלק 2 - Blender three point lighting

2011-12-11T19:18:00.001+02:00

היי,

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

קבלו את הסרטון...

בלנדר תאורה - Blender lighting

2011-11-10T01:12:00.001+02:00

"Lighting is 5% setting up and 95% revisions and adjustments"
Jeremy Birn

הי,

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

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

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

מצלמה בבלנדר - Blender camera controls

2011-10-28T15:26:00.000+02:00

הי,

עיצוב גרפי, גרפיקה ממוחשבת מתבסס על עבודה עם תמונות!

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

הפוסט היום יעסוק בהכרות עם המצלמה, הכרות בסיסית מאוד (בהמשך נראה גם את כרטסת \ טאב המצלמה) ובנוסף נכיר את כרטסת Render.

שבת שלום.

מידול משטח לגו בבלנדר - Blender modeling

2011-10-13T09:01:00.000+02:00

שנה טובה,

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

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

3D Blender : parent, join, copy location, origin

2011-09-15T22:51:00.000+03:00

סוף שבוע נעים,

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

Parent
Clear Parent
Join
Copy Location
Layers
Origin
Snap

בעתיד אני מתכנן עוד 3-4 סרטונים שיעסקו: בתאורה, חומרים, טקסטורות ואנימציה. התכוננו להמון בלנדר...
ואל תשכחו האובייקט האחרון שנבחר הוא ההורה! בהצלחה.

בלנדר מידול חלק של לגו - Blender lego part modeling

2011-09-01T22:47:00.000+03:00

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

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

נושאים המופיעים בסרטון:

Edit Mode ו Object Mode בבלנדר
Extrude
Subdivision surrface
Edge Slide
Edge Loop
Mirror Modifier
Copy Location
Join
Convert to

שיטת אנמציה באמצעות Guide בפלאש CS4 - animation with guides flash cs4

2011-08-23T14:25:00.010+03:00

טריק נחמד שהיה מאוד שימושי בתקופת CS3 והאנימציה הקלאסית היה אנימציה באמצעות Guide.
אז נכון שהיום יש את ה- Motion Editor וMOTION שאפשר ליבא, תיכנות יותר מופשט ומה לא, אבל עדיין שימושי מידי פעם.
אז לעניין;
לעומת CS3 מאוד הקלו על העניין בגירסת CS4 ובאמת מגוחך להראות על זה צילום מסך אבל בכל זאת:
כל שעלינו לעשות זה ליצור MOTION TWEEN ולהדביק עליו מסלול שבנינו ובאופן אוטומטי המסלול שבנינו באמצעות – עיפרון, עט, קו וכו' יהפוך לאנימציה של הצורה שלנו (יש לוודא כמובן שהמסלול פתוח ולא סגור משני צדדיו).

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

לחיצה על השכבה של הצורה עם הכפתור הימני תאפשר בחירה ב Add classic Motion Guide

נוצרת שכבה נוספת עם שרשרת לשכבה שמתחת, בה עלינו ליצור את המסלול שלנו.

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

מקווה שנהנתם,
שיהיה המון בהצלחה!!
מור ורדי

בלנדר ( תלת מימד ) מדריך בסיסי חלק חמישי - Blender basic tutorial

2011-08-19T17:36:00.002+03:00

שבת שלום,

חלק חמישי, הפעם מידול כף היד.

אני חייב להודות שהיא קצת קטנה ביחס לזרוע אבל כמו שציינתי לאורך הדרך אני בטוח שנוכל לחיות עם זה (-;

נושאים המופיעים בסרטון:

Edit Mode ו Object Mode בבלנדר
extrude
Subdivision surrface
Edge Slide
Edge Loop
3d manipulator
Interactive Mirror
Pivot Point

ממש בקרוב סרטון בלנדר נוסף.

Photoshop Brush size & Hardness - שינוי גודל ורמת רכות של מברשת בפוטושופ

2011-08-15T23:51:00.009+03:00

טיפ מספר 6670

איך נשנה גודל ורמת רכות של מברשת (SIZE & HARDNESS) בפוטושופ ?
אפשר כמובן לגשת לחלונית ולשנות את הגודל ורמת הרכות של המברשת או להשתמש במקשי הקיצור ( [ ]-להגדלה והקטנה ,או [ ] + SHIFT -לשינוי רמת רכות) .

כאשר עושים זאת בעזרת מקשי הקיצור שהוזכרו השינוי מתבצע בקפיצות ובלי אפשרות לדייק (קפיצות ברמת הרכות(HARDNESS – רמת קושי אם תרצו) הם של 25% , ובגודל- עד 100 -קפיצות של 10, מ100 עד 200 קפיצות של 25 וכן הלאה …). וגם הדבר נעשה ללא שום אפשרות שלנו לעקוב אחרי השינויים בזמן אמת . נשנה את המברשת ונצטרך לבדוק אם השינוי מתאים לנו או לא .

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

וכך זה נעשה(כאשר כלי המברשת פעיל):

ב CS4 -

גודל המברשת : נלחץ על ALT ולחצן ימני בעכבר וגרירה פנימה והחוצה (פנימה – מקטין, החוצה- מגדיל) .
רכות: ALT+SHIFT ולחצן ימני בעכבר וגרירה ימינה ושמאלה (שמאלה -מרכך מברשת , ימינה -מקשה).

-ב CS5 -

גודל המברשת : נלחץ על ALT ולחצן ימני בעכבר ונגרור ימינה ושמאלה (ימינה – מגדיל ,שמאלה מקטין) .
רכות: ALT ולחצן ימני בעכבר וגרירה למעלה ולמטה (למעלה- מרכך מברשת , למטה- מקשה).

נסו ! כדאי .

בלנדר ( תלת מימד ) מדריך בסיסי חלק רביעי - Blender basic tutorial

2011-08-12T23:40:00.004+03:00

לילה טוב,

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

נושאים המופיעים בסרטון:

Edit Mode ו Object Mode בבלנדר
extrude
Subdivision surrface
Edge Slide
Edge Loop
Normals
Orientation
Pivot Point

בלנדר ( תלת מימד ) מדריך בסיסי חלק שלישי - Blender basic tutorial

2011-08-09T16:17:00.005+03:00

צהריים טובים,

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

נושאים המופיעים בסרטון:

Mirror Modifier
Edit Mode ו Object Mode בבלנדר
extrude
Subdivision surrface
Edge Slide
Edge Loop
Normals
Shift scaling

3d בלנדר מדריך בסיסי חלק שני – 3d Blender basic tutorial

2011-08-05T09:44:00.008+03:00

בוקר טוב,

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

נושאים המופיעים בסרטון:

Mirror Modifier
Edit Mode ו Object Mode בבלנדר
extrude
Subdivision surrface
Edge Slide
Edge Loop

Box shadow no images css3 – הצללות ללא תמונה CSS3

2011-08-02T16:57:00.019+03:00

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

מטרתנו הפעם היא ליצור הצללות לאלמנטים בדף ללא תמונה וללא מגבלת גודל , או בפשטות יצירת הצללות חכמות לאתרים עם תוכן דינמי וחסכון משמעותי בזמן ובאנרגיה בעבודתינו ?(ברור שגם נהנה יותר – באנו להנות -לא?)

כמו שכבר הבנתם גם הפעם נעסוק בפקודת עיצוב בCSS3.( נזכיר בקצרה שמדובר בסט פקודות עיצוביות חדש יחסית שנוסף לפקודות הCSS הקיימות ונותן אפשרויות עיצוביות נוספות – כדאי לאמץ בחום).

וכעת נוציא את הצל לאור :

הפקודה בCSS (המספרים לצורך הדגמה בלבד – גם הרווחים) :

box-shadow: 1px 1px 1px 1px #000;

{צבע} {טווח-פיזור} {רמת טשטוש} {ציר Y} {ציר X}: הסבר

הפקודה מורכבת מ5 מאפיינים-רצוי להגדיר את כולם(X , Y , צבע - הכרחיים לעבודה תקינה בכל הדפדפנים התומכים) – עדיף לשלוט בכל המאפיינים ולא לתת לאלת המזל (או ברירת המחדל) לשלוט בנו .

1)הצללה על ציר הX.

2)הצללה על ציר הY.

3)רדיוס הטשטוש של ההצללה (רמת טשטוש- ככל שהערך המספרי גבוה יותר ההצללה מטושטשת יותר) .

4)טווח הפיזור של ההצללה (ניתן גם לתת ערך מספרי שלילי) .

5)צבע ההצללה .

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

כמה דוגמאות להמחשה (וזה לא הכל) :

כמה הערות חשובות :

1) יש לשים לב לסדר שבו נכתבת הפקודה והזנת הנתונים . אם נרצה הצללה של 5 פיקסלים על צירי הX וה Y ,רמת טשטוש של 10 פיקסלים וטווח הפיזור גם בערך של 5 פיקסלים נצטרך לכתוב :

Box-shadow:5px 5px 10px 5px #999;

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

2)במידה ולא נגדיר ערך לרמת הטשטוש – המאפיין השלישי בפקודה – נקבל הצללה חלקה(דוגמה לענין למעלה).

3)אם לא נגדיר טווח פיזור לטשטוש – המאפיין הרביעי בפקודה – גודל ההצללה יהיה בדיוק

הגודל שהוגדר בשני המאפיינים הראשונים בפקודה (צירי הX והY). - כמובן שפקודה שמוגדר בה טווח פיזור וגודל תראה אחרת מפקודה בה מוגדר גודל בלבד .

4)ניתן לתת הצללות בגדלים שונים לצירX ו Y.

5)לא לשכוח הגדרת צבע , חלק מהדפדפנים לא יאפשרו הצללה ללא הגדרת הצבע (ספארי למשל) .

ראינו שניתן להגדיר צל על צירי X וY ולקבל הצללה מחלקו התחתון של האלמנט ומצידו הימני . ומה אם נרצה הצללה לכל ארבעת הצדדים?

נוסיף הצללה נוספת – נעשה ריבוי הצללות – שם מפוצץ לדבר מאד פשוט .

בפקודה למעלה בצירי הX וה Y במקום ערכים חיוביים נזין ערכים שליליים ואז נקבל הצללה הפוכה מהצד השני (השמש שזרחה על האלמנט מהפינה השמאלית העליונה הפכה כיוון וכעת זורחת מהפינה הימנית התחתונה וזה נותן בדיוק את מה שחיפשנו הצללה לכל חלקי האלמנט). לא נשכח להפריד בפסיקים בין ההצללות(הכרחי) – מדובר בשני הצללות שונות .

כך זה יראה בקוד(המספרים שוב להדגמה בלבד) :

box-shadow:2px 2px 5px #999 , -2px -2px 5px #999;

דוגמא:

ולקינוח (יש עוד אחד בסוף) :

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

(INNER SHADOW ) , בדיוק באותה השיטה בתוספת קטנה – נוסיף לפקודה את המילה INSET בתחילת הפקודה וכעת יש לנו הצללה פנימית – החוקיות היא אותה החוקיות כמו ההצללה החיצונית .

דוגמא לקוד :

box-shadow: inner 2px 2px 5px 5px #999 ,inner -2px -2px 5px 5px #999;

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

ריבוי הצללות כאמור מאפשר הגדרה להצללות פנימיות וחיצוניות באותה שורה כשפסיק מפריד ביניהם (חשוב מאד ) .

דוגמא :

הדפדפנים התומכים והתאמת הקוד אליהם(בדוגמאות המצורפות ניתן לראות את הקוד כפי שצריך להיכתב בCSS) .

מוזילה – פיירפוקס מגרסה 3.5 : הפקודה נכתבת בתוספת -MOZ- בתחילת הפקודה .

דוגמא:

-moz-box-shadow:1px 1px 1px 1px #999;

ספארי – כרום עד גרסה 9 : הפקודה נכתבת התוספת -WEBKIT- בתחילת הפקודה .

דוגמא:

-webkit-box-shadow:1px 1px 1px 1px #999;

אופרה(מגרסה 10.5) – אקספלורר 9 -כרום 10 ומעלה : הקוד הרגיל כפי שהודגם .

{ נזכיר שהפקודה נכתבת יותר מפעם אחת כדי לאפשר לכל דפדפן ל"קרוא" את השורה שלו - ניתן לראות זאת בכל הדוגמאות}

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

דוגמא למה שאפשר ליצור (קצת מוטרף רק להדגמה):

עד כאן הפעם - תודה .

3d בלנדר מדריך בסיס חלק ראשון – 3d Blender basic tutorial

2011-07-30T22:37:00.001+03:00

ערב טוב,

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

הסרטון עוסק בנושאים הבאים:

1. הגדרות ה- preferences של בלנדר.

2. עבודה עם ההיטלים השונים.

3. Edit Mode ו Object Mode בבלנדר

4. extrude

5. Subdivision surrface

6. מידול הרגליים של הלגומן.

שתי מילים על - Subdivision surrface
אלוגריתם מתמטי ששמו "Catmul-Clark" כך ניצור חלוקות משנה ובעזרתם תתקבל תוצאה שהיא מוחלקת ואורגנית יותר. קל יותר לעבוד עם מספר נמוך של פוליגונים אך הצורה (ה- mesh) שיוצג בסוף התהליך יכיל מאות או אולי אלפי פוליגונים.

בשורה התחתונה, נקבל Mesh "מעוגל ויפה" אורגני יותר. שבפועל מורכב ממעט פוליגונים, כך שהטיפול בו קל יותר.

יצירת מסיכה עם אפקט טשטוש (blur)

2011-07-26T11:24:00.002+03:00

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

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

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

ואם בכול זאת אנו רוצים לתת איזשהו עידון למסכה? עם קוד וקצת התחכמות ניתן גם ניתן:

להל"ן השלבים:

יש ליצור מסמך חדש בפלאש (AS3 כמובן).

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

יש להפוך כל אחד מהאובייקטים ל MovieClip באמצעות F8.

נעניק לכל אחד מהם Instance Name כדי שנוכל לפנות אליו באמצעות בקוד שנבנה.

לצורך ההדגמה; לתמונה קראתי PIC ולמסכה קראתי MASK1

למען הנוחות עדיף שהתמונה תהיה מתחת למסכה, למרות שהיא תעבוד גם אם תהיה מעל!

לאחר מכן ניצור אפקט טשטוש על העיגול. נגדיל קצת את הערך שלו כדי שנראה את האפקט (20 בערך).

ועכשיו לחלק החשוב מכולם! נסמן את התמונה ובצד תחת DISPLAY נסמן ב'וי' את cache as bitmap.

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

עכשיו לקוד! ניצור שכבה חדשה מעל השכבה הנוכחית ונקרא לה ACTION הקוד מאוד פשוט:

pic.mask = mask1שאומר: המסכה של הPIC היא mask1

CTRL+ENTER לבחון את הסרט שלנו ו... זהו!

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

החליפו את הקוד הקודם בקוד הבא (ממליצה קודם להגדיל את תמונת הרקע על כל הבמה) ובחנו את הסרט:

pic.mask=mask1

mask1.addEventListener(Event.ENTER_FRAME,mousemask(

function mousemask(e:Event):void

{

mask1.x = mouseX

mask1.y = mouseY

}

נחמד לא?
שיהיה לכם המשך יום מצוין! מור
נכתב ע"י מור ורדי .

רקע מסוג GRADIENT ללא תמונה - css3 gradient background no image

2011-07-25T11:43:00.000+03:00

אנחנו אוהבים מעברי צבע(GRADIENT) , מאד אוהבים , למה ? כנראה שכמו בחיים גם העין אוהבת גיוון ,
ההתמזגות הזו של צבעים מרעננת , מעבירה תחושות יותר מורכבות , יותר דומה לחיים .

באינטרנט הדבר נפוץ מאד, כמעט ואין אתר שלא עושה שימוש בויזואליות הזו .

בדרך כלל מייצרים GRADIENT בתוכנה גרפית מסויימת כקובץ תמונה , ובקובץ הCSS תמונת הGRADIENT תהיה BACKGROUND-IMAGE ותכונה זו מאפשרת שכפול ה GRADIENT לאורך (ציר X) או לרוחב (ציר Y) באלמנט על הדף אותו רוצים לצבוע בGRADIENT.

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

שימוש ברקע GRADIENT באמצעות קובץ תמונה יגביל מאד את גמישות האתר שלנו .
לדוגמא אם היינו בונים אתר שמימדיו הם רוחב-940 , גובה-1000 פיקסלים והיינו רוצים שהרקע של האתר יהיה GRADIENT לאורך (כלומר הצבע משתנה לאורך הדף). היינו מייצרים פס ברוחב של פיקסל בודד ובאורך של 1000 פיקסלים כמידות הדף שבנינו ומשכפלים את התמונה הזו לרוחב הדף (כדי ליצור את אותו הGRADIENT האורכי לכל רוחב המסמך ) .

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

ברור שתמונת הGRADIENT ברוחב הפיקסל שעשינו קודם לא תוכל לסייע , היא תתאים רק לדף בגובה קבוע של 1000 פיקסלים(וכאמור הסיכויים שמידות הדף ישארו קבועות אפסי).

בשיטה הקיימת אם היינו רוצים באמת לבצע את המשימה היינו מקבלים כל כמה שעות מידות ומכינים תמונת GRADIENT שתתאים לתוכן החדש (זה טירוף!) .

{הערת ביניים מהיציע : נכון שאם מדובר באלמנטים שגודלם קבוע (בר ניווט למשל) לא ניתקל בבעיה הזו , ולמרות זאת בהנחה שאפשר לחסוך את התמונות ולתת פקודות קצרות גמישות ופשוטות על מנת להגיע לאותה תוצאה בדיוק , יש מישהו שיגיד "לא אני רוצה לעבוד קשה"?
האם היינו מעלים על הדעת לחתוך ריבוע כחול בפוטושופ כדי לתת לטבלה רקע כחול במקום להשתמש בפקודת BACKGROUND-COLOR ?}

אז איך נחיל GRADIENT גם על אלמנטים שגובהם לא קבוע?

התשובה נעוצה בכותרת הפוסט (דיברנו על CSS3 בפעם הקודמת – ההקדמה באה להבהיר לספקנים למה לא כדאי לנו לוותר עליו בקלות).

GRADIENT בCSS יש!יש!(נסתפק בפעמיים) .

עד כאן השתעשענו ועכשיו לדבר האמיתי!

איך זה עובד ?

נתמקד היום בGRADIENT LINEAR ׁ-כלומר קווי . השינוי בצבע נעשה על ציר אופקי או אנכי בניגוד לGRADIENT מסוג מעגלי (RADIAL) שהשינוי נעשה על פני הרדיוס של המעגל וטבעות הרדיוס הן הבסיס לGRADIENT (עליו נדבר בפעם אחרת).

הפקודה בה נשתמש בקובץ הCSS היא BACKGROUND הגיוני לא?

מבנה הפקודה באופן כללי :

BACKGROUND: LINEAR-GRADIENT (TOP , #FFF , #000);

ניתן להתחיל את הGRADIENT מארבעת צידי או האלמנט (top ,left ,bottom ,right) או מאחת מארבעת פינותיו (right top , right bottom , left top , left bottom). - דוגמאות קוד מפורטות עם הסברים בתחתית הדף .

בדוגמא הבסיסית המופיעה לעיל , הGRADIENT יתחיל בחלקו העליון של האלמנט (DIV או טבלה או כל אלמנט אחר ) ותנועת הצבע תהיה מלבן לשחור כשהחלוקה בין הצבעים היא 50% לכל צבע (גם הערבוב ביניהם וגם המעבר מצבע אחד לשני נמצא באיזון מושלם בין הצבעים ) .

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

הקוד לכל הפינות והצדדיםׁ(הצבעים הם רק להדגמה) :

צדדים :

BACKGROUND: LINEAR-GRADIENT (TOP , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (BOTTOM , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (RIGHT , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (LEFT , #FFF , #000);

פינות :

BACKGROUND: LINEAR-GRADIENT (RIGHT TOP , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (RIGHT BOTTOM , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (LEFT TOP , #FFF , #000);

BACKGROUND: LINEAR-GRADIENT (LEFT BOTTOM , #FFF , #000);

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

BACKGROUND:LINEAR-GRADIENT (TOP , #FFF , #000) ;

נוסיף לצבע הלבן הגדרת אחוזים 10% וכך עד ל10% מגודלו של האלמנט הוא לבן (אין אף צבע לפניו ) ושינוי הצבע ל#000 מתחיל משם .
והפקודה:

BACKGROUND:LINEAR-GRADIENT (TOP , #FFF 10%, #000);

כמובן שניתן היה לקבוע גם מיקום בפיקסלים ואז הפקודה היתה נראית ככה:

BACKGROUND:LINEAR-GRADIENT (TOP , #FFF 200PX , #000);

לצבע הלבן קבענו עצירה ב10%(או 200PX) ומשם מתחיל שינוי הצבע לשחור , במקום שהשינוי ההדרגתי יחל בקצה העליון של האלמנט .(לשים לב שיש רווח בין הצבע לאחוז בשורת הקוד )

ועכשיו למנה העיקרית (לא יותר קשה ,יותר משביע) -

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

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

נשמע מסובך אך בעצם פשוט מאד !

נניח שנרצה GRADIENT עם 5 שינויי צבע (הגזמה פראית רק לצורך הדגמה )

הקוד שנכתוב :

BACKGROUND: LINEAR-GRADIENT(LEFT , #fff ,#333 , #444 , #456343 , #CCC );

במצב הזה האלמנט יחולק ל5 ושינויי הצבע ימוקמו תמיד בקפיצות של 20%.

אם נרצה חלוקה שונה נצטרך לציין ליד הסטופר אותו אנו רוצים במיקום אחר אחוזים (אם נציין ליד #333 30% הצבע הראשון יתפוס שלושים אחוזים והצבע השני #333 יכנס ב30% כיון שהגדרנו לו שמיקומו בדף הוא 30% ברוחב האלמנט (לא נשכח שרשמנו לו מאיפה להתחיל! LEFT – אם לא מופיע צבע לפניו אין מה שיעצור אותו ולכן הוא יתפוס מ0 עד ה30%) מה שקורה עם שאר הצבעים זו חלוקה שווה של השטח הנותר אחרי הגדרת האחוזים בין יתר הצבעים שהוספנו .
לכל צבע שנציין עבורו מיקום ספציפי באלמנט באחוזים הצבע ימוקם באחוזים על פי גודל האלמנט (גם אם הצבע מוגדר אחרון ). לכן כדאי ורצוי ושמור על הסדר כדי להימנע מברדק (הוספתי בדוגמאות למטה דוגמה שממחישה את הטעות) .

לשים לב :במידה והגדרנו עשרה צבעים בGRADIENT ובצבע החמישי ציינו מיקום של 90%
5 הצבעים הראשונים עד הסטופר שנמצא ב90% יחלקו ביניהם את ה90% באופן שוה וחמשת הצבעים הנותרים יחלקו ביניהם רק 10%.

וכך זה יראה בקוד :

BACKGROUND: LINEAR-GRADIENT(LEFT , #fff ,#333 , #444 , #456343 , #CCC 90%, #fff ,#333 , #444 , #456343 , #CCC );

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

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

 background: -webkit-gradient(linear, left top,
left bottom, from(#00abeb), to(#fff));

ואם צריך עצירות(צריך בכל סטופר לומר לצבע היכן לעצור-במקרה הזה 0.5 שמייצג 50% - בלי זה לא יעבוד) :

background: -webkit-gradient(linear, left top,
left bottom, from(#00abeb),
color-stop( 0.5, #ccc ),
to(#fff));

רק כאן צורת הקוד היא כזאת- הגדרנו נקודת התחלה ונקודת סיום וביניהם את הצבעים .}

פיירפוקס:-MOZ-
אקספלורר (רק גרסה 10 ):-MS-
אופרה:-0-
דוגמא קטנה (דוגמאות קוד מפורטות בדוגמאות) :

BACKGROUND: -MOZ-LINEAR-GRADIENT(START COLOR , STOP COLOR);

(גם כאן לא עסקנו בהתאמה לגרסאות מוקדמות יותר של כרום אופרה וספארי כי זה מיותר )

ונחתום בקטע מתוך שירו של מאיר אריאל :

"הו פסים פסים פסים שלי אני לא אשתגע , לא אשתגע רק אתן לגוונים מעט אור"(כתונת פסים -מאיר אריאל) .

דוגמאות:

צילום ושאר ירקות

2011-07-21T12:12:00.000+03:00

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

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

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

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

ניגש להסברים קצרים:

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

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

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

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

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

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

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

יום טוב, אלעד.

פינות מעוגלות ללא תמונה - css3

2011-07-20T12:48:00.000+03:00

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

למה אני מספר לכם את כל זה ?

מה זה משנה לי בתור בונה אתר באיזו דלת בוחרים להיכנס לאינטרנט?

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

אז כל זמן שאפשרויות ההתאמה הם פשוטות יחסית , אך עדיין ניתנות לביצוע באמצעות הכלים הרגילים של HTML ו CSS ניחא . אבל שכשיש סט כלים מרשים שנוסף לעזרת בוני אתרים ומקל מאד על החיים, ודפדפן מרכזי - אקספלורר (אולי נסחפתי) לא מאפשר שימוש בהם(אפילו בגירסה 9 הרבה אופציות לא נתמכות שלא לדבר על גרסאות קודמות) ומאלץ אותנו לחזור לתקופת האבן של האינטרנט , צריך "להחליף דיסקט" לצאת מהקיבעון ולהשתמש בדפדפנים ידידותיים לנו המתעסקים בתחום וממילא לכולם(פיירפוקס!!!) . בשלב ראשון נדגים את היכולות החדשות ונראה כיצד ליישם אותן בדפדפנים התומכים (כולם חוץ מאקספלורר עד גרסה 9 ) .

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

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

נתמקד הפעם בקצוות מעוגלים (border-radius).
פינות מעוגלות? (ללא תמונה? ללא חיתוכים? גדל וקטן בהתאמה לתוכן? אכן.).
איך מיישמים את העניין בדף הCSS? איך בדיוק זה עובד?
נקדים ונאמר שהדפדפנים הידידותיים יותר ל CSS3 וקוד תקני הם פיירפוקס – מוזילה . ספארי וכרום . האקספלורר המסורתי די מסבך את כל העסק-כפי שכבר הבנתם ( למה? ככה ).
נתחיל בקוד הרשמי (יש שינויים קלים בניסוח בין הדפדפנים ).

הקוד הרשמי (כפי שנמצא בw3c):

border-radius

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

ניתן לאפיין כל פינה בנפרד או בקוד מקוצר את כל הפינות יחד .
בדף הCSSנרשום לדוגמא:

border-top-left-radius:18px;

border-top-right-radius:15px;

border-bottom-right-radius:11px;

border-bottom-left-radius:17px;

או בקיצור:

border-radius:18px 15px 11px 17px;

סדר הפינות בקוד בכיוון השעון (הפינה השמאלית העליונה היא נקודת ההתחלה).
בדומה לmargin ו padding גם כאן ניתן לקצר בקוד .
במידה וכל הפינות אחידות נרשום:

border-radius:18px ;

במידה ונרצה כל צמד של פינות ברדיוס שונה :

border-radius: 18px 16px ;

כעת פינה שמאלית עליונה וימנית תחתונה מעוגלות ברדיוס 18 פיקסלים ומולן בהתאמה שמאלית עליונה וימנית תחתונה יקבלו רדיוס של 16 פיקסלים.
וההפתעה החביבה ביותר , פינה כידוע מורכבת מ2 צדדים , צד אנכי וצד אופקי , שני צדדים אלו(רבע-עיגול) יכולים לקבל הגדרות רדיוס שונות וליצור תיבות עם גבולות מגוונים מאד .
נדגים את העניין : נשתמש בערכים של 18 ו16 לאפיון פינה שמאלית עליונה

border-top-left-radius: 18px 16px ;

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

border-radius: 18px / 16px ;

כעת כל הפינות חציין האופקי ברדיוס 18 וחציין האנכי ברדיוס 16 .

דוגמה אחרונה לעניין הזה(כדי שנהיה סגורים)

4 פינות כאשר כל חצי פינה מאופיין ברדיוס שונה :

border-radius:18px 15px 11px 17px / 54px 13px 6px 32px;

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

אחרי שהבנו שאפשר בואו ניישם את זה בדפדפנים השונים:
הקוד הרשמי (המופיע למעלה)מתאים לספארי כרום , פיירפוקס 4 ומעלה ואקספלורר 9.

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

פיירפוקס : moz-border-radius-
והפינות : moz-border-radius-topleft-
ובמבנה הזה את שאר הפינות(bottomright , bottomleft ,topright ).

ספארי וכרום : webkit-border-radius -
והפינות: webkit-border-top-left-
וגם כאן מבנה הפקודה נכון לכל הפינות .

תזכורת: כדי שהקוד יפעל בכל הדפדפנים התומכים יש לכתוב את שורת הקוד המתאימה לכל דפדפן כך שבעצם פקודה זהה תיכתב פעמיים בצורה שונה כדי לאפשר לדפדפנים להתמודד יפה עם הcss (כל דפדפן מזהה את השורה שלו ופועל מה שלא נתמך על ידו זוכה להתעלמות כך שאין דאגה להתנגשויות)
דוגמה לקוד מתוך קובץ CSS:

#border-radius{

margin: auto;

background-color: #666600;

height: 200px;

width: 200px;

-moz-border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px ;

border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px ;

text-align:right;

}

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

סוף דבר (בינתיים): css3 הוא כלי רב עוצמה ויעיל . כמה שנצרוך אותו יותר זה יאלץ את הדפדפנים לתמוך בתקן וכך לשפר ולייעל את עבודתנו . ועד הפעם הבאה אתם רשאים לעגל פינות .

תהליך בניית אתר פלאש חלק שלישי - Flash site part three

2011-07-17T00:02:00.000+03:00

לילה טוב,

איך בונים אתר פלאש? או כיצד בונים אתר פלאש ממש מההתחלה?...

פרויקט פלאש חדש, (בניית אתר Flash) בסיסי יחסית שיחולק למספר חלקים. וכעת החלק האחרון אולי?

תהליך בניית אתר פלאש חלק שלישי,

נשלב את הלוגו ולאחר מכן נבנה דף HTML ב- Dreamweaver.

תהליך בניית אתר פלאש חלק שני - Flash site part two

2011-07-11T08:42:00.000+03:00

בוקר טוב,

איך בונים אתר פלאש? או כיצד בונים אתר פלאש ממש מההתחלה?...

פרוייקט פלאש חדש, (בניית אתר Flash) בסיסי יחסית שיחולק למספר חלקים.

תהליך בניית אתר פלאש חלק שני,

נסיים להרכיב את שני ה- Movie Clip, נשלב לחצנים עם over ו up שיאפשרו מעבר בין הדפים.

לצפייה בתהליך בניית אתר פלאש חלק ראשון

תהליך בניית אתר פלאש חלק ראשון - Flash site part one

2011-07-07T08:51:00.000+03:00

בוקר טוב,

איך בונים אתר פלאש? או כיצד בונים אתר פלאש ממש מההתחלה?...

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

תהליך בניית אתר פלאש חלק ראשון,

נרכיב את הסצנה, נהפוך את התמונות ל- Movie Clip. לאחר מכן נכיל את האנימציות, כמובן עם Motion tween, easing ולבסוף Filters ובו נשתמש ב Blur, בכדי ליצור משחק של עומק שדה משתנה.

להורדת קובץ הפרויקט לחצו כאן

Xara Designer 7

2011-06-12T21:57:00.000+03:00

הי,

גרסה חדשה 7 Xara Designer, וווהההוו.

אתם יודעים שאותי קשה לשאול מה אני חושב, אני באמת מאוהב ולכן אני משוחד. אין לי ספק שמשתמשי Illustrator יביטו מהצד ולא יבינו על מה הרעש והמהומה. כל המאפיינים החדשים (הקריטיים מבחנתי) קיימים ב- Illustrator כבר לפני 3 ו 4 גרסאות.

נכון!

הגרסה הזו היא קפיצה משמעותית ל- Xara מכיוון שרמת הדיוק גדלה עוד יותר Non-axis aligned snapping הוא חובה כאשר רוצים לעבוד בדיוק יעיל וקל (ללא חלון Align). לדעתי זהו המאפיין החשוב ביותר בגרסה זו, ומאפשר Workflow מושלם לעבודה.

שינויים בכל הקשור לשיפור ה – UI
המסמכים מופיעים כעת בטאבים (כרטסת) והחלונות ניתנים לעגינה בצורה מאורגת בכל אזור במסך, הפלטות (חלונות) כברירת מחדל מקופלות בצידו הימני של המסך, ונשלפות כמו מגירות. מזכיר מעט את סידור הפלטות ב- Coreldraw או Indesign .

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

כמו תמיד "רצתי" לקנות את התוכנה, ואני מאוד מרוצה מהרכישה. שדרוג גרסה עולה סה"כ $39, גרסת ה- Pro (שהיא ממש קטלנית) $129.

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

http://www.youtube.com/watch?v=W2toFVKvfn8
http://www.youtube.com/watch?v=cAzGozQhVnQ&feature=related

Dreamweaver forms, spry validation text field - טופס בדרימוויבר הכולל אימות נתונים

2011-06-05T07:24:00.000+03:00

בוקר טוב,

סרטון קצרצר המתאר תהליך של בניית טופס בדרימוויבר. נעבוד עם, Form, Text Field ונשתמש בטבלה, כדי למקם את האובייקטים. הסרטון מתאר כיצד מתבצע תהליך אימות הנתונים ע"י שימוש ב - Spry validation text field.