לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read(); חץ ימינה  

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



  #1  
ישן 22-11-2005, 15:02
  Mishaniy Mishaniy אינו מחובר  
 
חבר מתאריך: 09.11.05
הודעות: 71
שלח הודעה דרך MSN אל Mishaniy
*מדריך מלא* שילוב פוטושופ לHTML -כדאי לקרוא

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

חשוב לציין שאם מישהו כבר בנה לעצמו את העיצוב יכול לעבור ישר לשלב שני ולדלג על הראשון!.
אז נתחיל? *כן*
שלב ראשון: בניית העיצוב לאתר שלי!
הכלים:
Photoshop-פוטושופ תוכנת העיצוב
ImageReady-איימ'ג ראדי תוכנת הנפשה וכדומה לכמה צרכים (תוכנה זו באה עם התוכנה פוטושופ)
עכשיו כמובן שצריך פוטושופ חוקי וכל זה בשביל כל האישורים אבל כל עוד האתר והעיצוב נשאר במשפחה ובבית אני חושב שתוכלו לחרוג מהכללים ולהוריד פוטושופ דרך האיימיול, עדיף מאוד שזה יהייה בגרסאות העדכניות יותר, אני משתמש בPhotoshop CS
אחרי שהורדנו והתקנו. נתחיל לעבוד
תפחתחו את הפוטושופ זה יריץ לכם כמה קבצים ותקבלו חלון כזה:
http://img519.imageshack.us/img519/1369/19il.jpg
אני לא הולך ללמד את כל תורת הפוטושופ מה יש בה וכדומה בשביל זה יש מדריכים אחרים אז אני אתן תמונות שיעזרו לי לעזור לכם.
אחרי שפתחו את התוכנה ניגש ל-File>New או יותר פשוט ctrl+n
נפתח לנו חלון חדש בוא קובעים את הגדלים!
אחרי שקבענו עם איזה גודל אנו עובדים בדרך כלל זה 800X600 או 1024X768 מי שיש לו גודל יותר טוב יופי לו. אני אוהב לעבוד עם 800X600 אז זה מה שנפתח נרשום ב:
Width:800
Height:600
נתן שם לקובץ שיהייה באנגלית! ונלחץ לו OK!
זה פתח לנו חלון חדש אחרי שהוא פתח לנו את החלון החדש נגדיל אותו לחיצהX2 על הפס הכחול וזה הגדיל אותו, עכשיו למעלה אם תראו כתוב 66.7% השטח שאתם רואים מהמסך זה לא טוב לעבוד על גודל כזה לכן בצד ימין למעלה רשום המספר הזה 66.67 רואים אותו? תסמנו את כל המספר רשמו 100 ותלחצו enter!
זה הגדיל לנו את המסך ל100% עכשיו אני מבקש ללחוץ ctrl+R כדי להוסיף את הקווים הקטנים האלה ציר X וציר Y שיהייה יותר קל לעבוד
עד כה זה צריך להראות ככה:
http://img501.imageshack.us/img501/9156/21fd.jpg
אחרי שסיימנו את כל זה נתחיל אם העיצוב חשוב לזכור אני לא מנסה לעצב משהו יפה פה אני רק עושה עיצוב רגיל בשביל ההסבר אחרי הכל העיצוב הוא פרי דמיונכם!
אז ככה:
יש שתי אפשריות אחת להשתמש במברשת ולהכניס על כל קטע layer חדש או לבנות עם צורות
בשביל לא לסבך יותר מידי אני השתמש בצורות אז ככה
תלחצו בפוטושום על המקש U וזה קפץ לכם לסימון אחר של העכבר עכשיו בתיבה מצד שמאל יש לכם את הכפתור הזה שהוא קפץ עליו וזה מסומן עליו אני רוצה שתלחצו על הכפתור שמסומן כבר לחיצה ארוכה... עכשיו צריך לקפוץ לכם כמה צורות אפשריות.. יש ריבוע ריבוע עם פינות עגולות עיגול ועוד.. אני רוצה שתבחו את הריבוע עם הפינות העגולות ותצירו ככה:
http://img505.imageshack.us/img505/1189/37iv1.jpg
תשתדלו שהמרובע יהייה סימטרי בשני הצדדים וגם למעלה ולמטה זוכרים את הctrl+R שעשינו בהתחלה זה בשביל דיוק הדברים..
עכשיו הנה לנו צורה יפה אחרי שעשינו את הצורה הזאת אני רוצה לצבוע אותה כי צבע שחור חזק מדי ולא מתאים לרקע הלבן אז יש לנו את תיבת הlayers מצד ימין למטה עכשיו אתם רואים יש background ומעליו יש עוד לייר הוא בעצם המרובע מצב שמאל למרובע יש תיבה שחורה כזאת אני רוצה שתלחצו עליה ותבחרו צבע אני בחרתי אפור.. אחרי שבחרנו צבע ולחצנו אוקיי המרובע נצבע.
עכשיו נכין את התפריט ואת הקו המפריד אני רוצה עכשיו שתלחצו על B ואני צריך את המברשת אם זה על עיפרון תלחצו לחיצה ארוכה על הסמן ותשנו אותו למברשת למי שזה על מברשת מה טוב עכשיו שבחרנו את המברשת יש לכם למעלה חלון וכתוב 1 בתוכו ולידו חץ אני רוצה שתלחצו על החץ ותשנו את הגודל ל3 אחרי שבחרנו את הגודל הרצוי נבדוק שזה יצבע לנו את זה בצבע שחור איך בודקים בסרגל מצד שמאל יש חלון של צבע על חלון של צבע צריך שהחלון של הצבע שלמעלה יהייה בצבע שחור אם זה לא בבקשה לשנות. אחרי ששינינו נעבור עם המברשת על הריבוע ומה נראה שיש מן עיגול עם איקס מה שאומר שאי אפשר לצבוע טוב אנחנו רוצים לצבוע נעשה הכל זאת אומרת נלחץ על הריבוע האפור ואופס קפצה אזהרה אני רוצה שתעשו לו OK... ועכשיו אפשר לצבוע עכשיו אני רוצה שתלחו לאמצע הריבוע תלחצו shift תחזיקו אותו תלחצו נקודה קטנה למעלה ותורידו לאט לאט את העכבר למטה עד סוף הריבוע שיצא לכן משהו כזה:
http://img345.imageshack.us/img345/1462/40zp.jpg
עכשיו למי שיש טעות לא נורא יש מסך של History מצד ימין פשוט נלחץ על הריבוע אחד למעלה וזה תיקן את זה או לחילופין ctrl+z
אחרי שקיבלנו את מה שעשיתי נלחץ עוד פעם על U ונסמן ריבוע בצד שמאל של הריבוע שיצא ככה:
http://img501.imageshack.us/img501/6167/58kl.jpg
אחרי שעשינו את הריבוע נלך לתיבת הליירים ונלחץ על הצבע השחור כדי לשנות אותו כמו ששינינו את הצבע של הריבוע השחור ונצבע את הריבוע החדש ללבן אחרי שצבנו נסמן את הלייר של הריבוע החדש עם הצבע הלבן פשוט לוחצים על הלייר פעם אחת ונלחץ על האפשרות הראשונה למטה מין ציור כזה עם f קטן אפשרות ראשונה מצד שמאל אחרי שלחצנו נפתח חלון עם אפשרויות ונלחץ על האפשרות הראשונה מלמעלה קפץ חלון נלחץ v על Drop Shdow ועל Inner Shdow ונלחץ OK ככה:
http://img454.imageshack.us/img454/7311/65ax.jpg
אחרי שסיימנו לצבוע נבנה את הלוגו והתפריט..
אז נלחץ U כדי לעשות ריבוע חדש ונעשה את הלוגו כדאי שזה יהייה סמטרי ושיהייה מרווח סביר בין שני הצדדים הוא צריך להיות למעלה. אחרי שסיימנו את הלוגו אני רוצה שנעשה ריבוע אחד בצד ימין וריבוע אחד מצד שמאל רצוי שהם יהיו סימטרים
ושהלוגו יהייה סימטרי מעלהם אחרי שסרטטנו את הריבועים עכשיו אני רוצה שנשנה את הצבע של כולם אתם יודעים כבר איך לעשות את זה הולכים לתיבת הליירים לוחצים על הצבע ומשנים אותו אני שיניתי אותו לכחול אבל אתם יכולים לצבוע אותו למה שאתם רוצים עכשיו שכל הריבועים צבועים לכחול אני רוצה שתקחו את הלייר של הריבוע עם הלוגו ו תלחצו פעם אחת על הלייר אם אתם לא יודעים איזה לייר של איזה ריבוע פשוט מעוד תלחצו על הליירים של הריבועים עד שתראו את הריבוע של הלוגו עם קווים מסביב מסומן כזה ואז תדעו שזה זה ברגע שסימנתם את הריבוע הזה תלחצו על הלחצן הכי שמאלי עם ה f ועל האפשרות הכי גבוהה כמו מקודם ותעשו v על Drop Shdow Inner Shdow ועל Gandient Overlay ותעשו OK עכשיו עשינו הרבה דברים גם יצרנו את הריבועים גם צבענו אותו וגם עשינו את הלוגו שונה אז זה צריך לצאת ככה:
http://img513.imageshack.us/img513/1618/89xs.jpg
אם יצא לכם ככה זה טוב מאוד או אפילו דומה גם טוב
אחרי שעשינו את זה נעשה את הכתב!
אני רוצה שתלחצו T אפשיהו במסף ותקבעו את גודל תיבת הטקסט זה לא צריך להיות גדול מדי ולא קטן מידי ואת האמת שזה לא משנה כי אחרי זה, זה נעלם אז קבענו את גודל תיבת הטקסט אני רוצה שנעשה כותרת על הלוגו עכשיו למעלה יש סרגל של הגודל של הכתב והסוג שלו אז נשנה את הגודל עכשיו ל48 ואת הכתב לArial אחרי שעשינו את זה נכתוב Welcome! בתוך התיבת טקסט אחרי שזה רשם יש בסרגל מצד שמאל עם כל האפשרויות אפשרות למעלה זה מין סמן כזה של העכבר בצבע שחור עם מצפן שמצביע לכל הכיוונים נלחץ עליו כרגע ועל מקום כלשהו במסך רק לא על תיבת הטקסט.. ואופס התיבת טקסט נעלמה עכשיו נלחץ על ה welcome ונגרור אותו לאמצע הלוגו נסדר שיהייה יפה עכשיו שאתם יודעים איך לעשות טקסט אני רוצה שתלחצו עוד פעם על T ותשנו את הגודל ל 24 עם אותו סוג כתב ותעשו גם Home News Downloads Forum תעשו כמו שלמדי אותכם תסמנו את הסמן השחור של העכבר ותשימו אותו בריבוע הכחול השמאלי יותר ושהם יהיו באמצע אחד מתחת לשני משהו כזה:
http://img482.imageshack.us/img482/4935/98xe.jpg
וזהו סיימנו לעשות את העיצוב סוף סוף.
שלב שני: העברת העיצוב לאיימ'ג ראדי להנפשה וגבולות
עכשיו נעבור לסמן הזה ונלחץ עליו:
http://img519.imageshack.us/img519/1631/108eu.jpg
נחכה כמה שניות וראיתם מה קרה
פתח לנו את איימ'ג ראדי עם העיצוב שלנו עכשיו נכון אתם רואים למעלה כתוב 66.67% אני רוצה שתלחצו על הכחול פעמיים להגדיל את זה ומצד שמאל למטה למטה יהייה רשום 66.67% תלחצו עליו וקפץ חלון עם כמה גדלים תשנו ל100%! אחרי שסיימנו את זה בואו נעשה קצת הנפשה לחצו על Windows למעלה בסרגל של הfile edit וכ'ו.. ותבחרו ב Animation שבחרתם את זה קפץ חלון עד כה זה צריך להראות ככה:
http://img454.imageshack.us/img454/3646/114ao.jpg
אחרי זה נעשה משהו חמוד עם כתב אני רוצה שתלחצו T תעשו תיבת טקסט חדש ותרשמו
Thank you Yoni! בגודל של 24
תשימו את זה בצד ימין למטה מתחת לשני הריבועים הכחולים
אחרי שסייימתם זוכרים את החלון של ה Animation אני רוצה שתלחצו על add layer באמצע של החלון למטה ליד התמונה של הפח צריך לקפוץ עוד חלון בול אותו דבר עכשיו יש 0 למטה מתחת לחלון הזה עם התמונה תלחצו על ה0 sec ותעבירו את זה ל1
בשניהם!
אחרי שסיימתם ליד הadd layer מצד שמאל יש חלון קטן שקורים לו Tween תלחצו עליו ויקפוץ לכם חלון פשוט תאשרו את החלון והופס קסם יש לכם את זה 7 פעמיים עד כאן זה צריך להיות ככה:
http://img363.imageshack.us/img363/2500/123fb.jpg
אתם יכולים ללחוץ פליי כדי לראות מה זה עושה אחרי שראיתם תלחצו סטופ אחרי שסיימנו עם ההנפשה ויש עוד הרבה אני לא ארחיב אפשר לעבור לגזירות! זה הקטע היותר מסוך אני רוצה שתלחצו K קפץ לכם סמן עם סכין חדה עכשיו מה שאני רוצה שתעשו שתסמנו כל חלק איפה שאתם רוצים שיהייה כתוב ואיפה שאתם רוצים שהטקסט יהייה קישור למשל: יש את הריבוע הלבן תקחו למטה והצידה לצד ימין תלחצו ותסמנו גבול בפנים שלא יצא מהריבוע הלבן! שיהייה ככה:
http://img462.imageshack.us/img462/6742/139vh.jpg
רואים שיהייה בפנים שם אתם תכתבו!
עכשיו את אותו דברים רק ללניקים אני רוצה שתקיפו את הHome News Download Forum אותו דבר שרק יעקוף אותו שלא יבצר מצב שלמשל ה H של ה Home תיהייה מיחוץ לגזירה שתיהייה בול! למשל ככה:
http://img379.imageshack.us/img379/8042/147rh.jpg
זהו סיימנו עכשיו מה שנותר לעשות ללחוץ File>Save Optimized as וקפץ חלון ושואל אותכם איך אתם רוצים לשמור את הקובץ תסמנו לו ככה:
http://img484.imageshack.us/img484/1528/159ip.jpg
וסיימנו! תפתחו את איפה ששמרתם ותפתחו את קובץ הHTML כל הכבוד!.
שלב שלישי: העיצוב שלי על HTML!
עכשיו אנחנו רוצים לעשות את הלינקים ולשמור בואו נפתח את הקובץ HTML ונעשה לו view source
שנוכל לשנות אותו
דבר ראשון אתם יודעים כבר מה לעשות נעשה לו שם Center שהעיצוב יהייה באמצע עכשיו אנחנו מעוניינים לרשום שם אז כמו שאתם רואים התמונות מחולקים שם לimg בתוך td
אם אתם רוצים לרשום למשל בתוך הריבוע לבן נפתח את דף הHTML נקליק על הריבוע הלבן בעכבר עם מקש ימיני ונעשה לו מאפיינים עכשיו אם תראו בסוף בכתובת כתוב מספר לכל חלק בגזרה עשינו מספר אצלי המספר של הריבוע הלבן הוא שלוש זה ככה: 1_03 מה שאומר שנכנס לפנקס רשימות עם המקור שלו... ונחפש שורה כזאת
td rowspan="9">
<img src="images/Untitled-1_03.gif" width="309" height="362" alt=""></td
זה לא כזה מסודר אבל לא משנה אני בטוח שאתם רואים את זה עכשיו מה שנעשה זה פשוט
נשנה את זה ל
<"td rowspan="9" background="images/Untitled-1_03.gif" width="309" height="362>
תוסיפו את הalt="" לא היה לי מקום..
עכשיו תרשמו מה שאתם רוצים!!!!!!!
ותעשו <td/>
מה שעשינו בעצם איחדנו את שני השורות לשורה אחת אה ושחכתי לאמר תמחקו את ה img src= ופשוט תעשו לכתובת alt+x וalt+v איפה שאמרתי לכם
תשמרו תעשו ריפרש לאתר ומה קרה יש כתוב!!
עכשיו ללינקים עושים משהו אחר לגמרה למשל לוקחים את ה home אצלי זה תמונה מספר 6... הולכים לשם
<td colspan="2">
<img src="images/Untitled-1_06.gif" width="62" height="17" alt=""></td>
הנה זה עכשיו פשוט מעוד לא נוגים בזה
מוסיפים לפני הimg src
<a href="untitled-1.html">
ומוסיפים אחרי >/a>
עכשיו יש את הכתובת של הHome מה שאני רוצה שתעשו שתרשמו בתוך הכתובת אחרי הalt=""
border="0" תאמינו לי..
תשמרו תעשו ריפרש והנה לכם קישור!
סיימנו!
ואני סיימתי את המדריך מקווה שנהנתם בהצלחה לכולם ותנסו לעשות עיצוב יותר יפה!!
הנה אתרים שאפשר ללמוד מהם לעצב:
http://www.negetiv.net/
ופונטים פה:
http://www.1001freefonts.com/
והנה אתר שלי פרטי
http://plainro.servehttp.com
בברכה יוני.
אה כן ותגיבו!!
כל הזכויות שמורות אני בניתי עשיתי הכל ליוני 2005!
_____________________________________
חתימתכם הוסרה כיוון שלא עמדה בחוקי האתר. לפרטים נוספים לחצו כאן.

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #6  
ישן 22-11-2005, 18:58
צלמית המשתמש של fat fish
  fat fish fat fish אינו מחובר  
 
חבר מתאריך: 20.06.03
הודעות: 5,616
כמה תגובות בנושא
בתגובה להודעה מספר 1 שנכתבה על ידי Mishaniy שמתחילה ב "*מדריך מלא* שילוב פוטושופ לHTML -כדאי לקרוא"

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

2. ב- photoshop / image ready ניתן לבחור לייצא את הפלט כ-xhtml תוך שימוש
ב- css. ככה לא משתמשים בטבלאות (לא מומלץ).

3. פלט ה-CSS של תוכנות אלו משתמש במאפיין postion:absolute, שיכול להגביל
את עיצוב האתר.

4. השמות של תגי ה-div שמספקות תוכנות אלו, הינן סדרתיות (div_image_1_1,
div_image_1_2 וכו...) וכך אנו מאבדים את אחד מעקרונות השימושיות של מתן
שמות הגיוניים על מנת לאפשר תוכן ברור למנועים (שמות כמו content, header, links וכו)

בקיצור, לא תמיד משתלם לקצר את הדרך בתהליך כתיבת קוד html.
ולא מומלץ לתת לתוכנות לעשות את בשבילך.

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

אז אולי מדריך מושקע, אבל מצטער, קצת מיותר.
_____________________________________
[ זיו ]
[ fat fish ]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #8  
ישן 22-11-2005, 21:56
  ישראל K ישראל K אינו מחובר  
 
חבר מתאריך: 25.08.03
הודעות: 9,114
בתגובה להודעה מספר 6 שנכתבה על ידי fat fish שמתחילה ב "כמה תגובות בנושא"

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

בקיצקוץ, חסכת לי את המילים, ואני כמובן מסכים עם זה ועם התגובה של S - Designer.

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

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

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
דרג אשכול זה:

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

קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 20:05

הדף נוצר ב 0.08 שניות עם 12 שאילתות

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2024 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר