יצירת גלריות תמונות באינטרנט

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

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

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

יצירת גלריית תמונות באינטרנט

יצירת גלריות אינטרנט באמצעות Adobe Bridge

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

שימוש בתוסף Photoshop האופציונלי הישן יותר

וידוא התאמת צבעים

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

• להמרת תמונה בודדת, בחרו Edit ‏> ‏Convert To Profile‏ ולאחר מכן בחרו sRGB. ראו הקצאה או הסרה של פרופיל צבע(Illustrator, Photoshop).

• להמרת תיקיית תמונות, השתמשו ב- Image Processor. בחרו File ‏> ‏Scripts ‏> ‏Image Processor. ראו המרת קבצים עם Image Processor‏.

בשעת שימוש ב- Image Processor, ניתן לשמור את הקבצים ישירות בתבנית JPEG בגודל הרצוי. במקרה כזה, ודאו שביטלתם את הפעלת האפשרות Resize Images באפשרויות Large Image.

אפשרויות גלריית תמונות באינטרנט

אפשרויות של סיומות קובץ, קידוד ומטה-נתונים.

שימוש בסיומת הקובץ ‎.htm או ‎.html

שימוש בקידוד UTF‑8.

ציון מידות, קיצור זמן הורדה.

שמירה על פרטי מטה-נתונים.

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

שם הגלריה.

שם האדם או הארגון שהם בעלי הזכויות על התמונות בגלריה.

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

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

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

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

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

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

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

(זמין בסגנונות אתר מסוימים) ציון אפשרויות להצגת כיתוב מתחת לכל אחת מהתמונות. בחרו Filename להצגת שם הקובץ, או בחרו Description, ‏Credits, ‏Title ו- Copyright להצגת מלל תיאורי שנלקח מתיבת הדו-שיח File Info.

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

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

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

ציון מספר הטורים והשורות בתצוגת התמונות הממוזערות שבעמוד הבית. אפשרות זו אינה מוחלת על גלריות שמשתמשות ב- Horizontal Frame Style או ב- Vertical Frame Style.

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

(זמין בסגנונות אתר מסוימים) ציון אפשרויות להצגת כיתוב מתחת לכל אחת מהתמונות הממוזערות. בחרו Filename להצגת שם הקובץ, או בחרו Description, ‏Credits, ‏Title ו- Copyright להצגת מלל תיאורי שנלקח מתיבת הדו-שיח File Info.

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

אפשרויות של צבעי רכיבים בגלריה. לשינוי צבע של רכיב, לחצו על דוגמית הצבע שלו ולאחר מכן בחרו צבע חדש מ- Adobe Color Picker. ניתן לשנות את צבע הרקע של כל אחד מהעמודים (האפשרות Background) ושל הכרזה (האפשרות Banner).

הצגת מלל המתריע מפני גניבה מעל כל אחת מהתמונות.

ציון המלל שיוצג. בחרו Custom Text להזנת מלל מותאם אישית. בחרו Filename‏, Description‏, Credits‏, Title‏ או Copyright להצגת מלל שלקוח מתיבת הדו-שיח File Info.

ציון הגופן, הצבע והיישור של הכיתוב.

מיקום המלל בתמונה בזווית.

סגנונות גלריית תמונות באינטרנט

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

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

‎Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery‎.

‏Adobe Photoshop CS5/Presets/Web Photo Gallery.

השם של כל אחת מהתיקיות במיקום זה מופיע כאפשרות בתפריט Styles בתיבת הדו-שיח Web Photo Gallery. כל אחת מהתיקיות מכילה את קובצי תבנית HTML הבאים, שמשמשים את Photoshop ליצירת הגלריה:

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

קובע את פריסת ערכת המסגרות להצגת העמודים.

קובע את פריסת עמוד הבית.

קובע את פריסת עמודי הגלריה המכילים תמונות בגודל מלא.

Thumbnail.htm קובע את פריסת התמונות הממוזערות שמופיעות בעמוד הבית.

כל אחת מתבניות הקובץ כוללת קוד HTML ואסימונים. אסימון הוא מחרוזת מלל ש- Photoshop מחליפה בשעת קביעת האפשרות המתאימה בתיבת הדו-שיח Web Photo Gallery‏. לדוגמה, קובץ תבנית יכול לכלול את רכיב TITLE הבא המשתמש באסימון למלל המצורף:

<TITLE>%TITLE%</TITLE>

כש- Photoshop יוצרת את הגלריה באמצעות קובץ תבנית זה, היא ממקמת את האסימון %TITLE% במלל שהזנתם בשדה Site Name בתיבת הדו-שיח Web Photo Gallery.

כדי להבין טוב יותר סגנון קיים, ניתן לפתוח קובצי תבניות HTML באמצעות עורך HTML. מכיוון שיצירת מסמכי HTML דורשת תווי ASCII בלבד, ניתן לפתוח, לערוך וליצור מסמכים אלה באמצעות עורך מלל פשוט כגון Notepad‏ (Windows) או TextEdit‏ (Mac OS).

אודות התאמה אישית של סגנונות גלריית תמונות באינטרנט

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

• תיקיית הסגנון צריכה לכלול את הקבצים הבאים: Caption.htm, ‏IndexPage.htm, ‏SubPage.htm, ‏Thumbnail.htm, ו- FrameSet.htm.

• ניתן לשנות את שם תיקיית הסגנון אך לא את השמות של קובצי תבנית HTML שבתיקייה.

• ניתן להשאיר את הקובץ Caption.htm ריק, ולמקם את קוד HTML והאסימונים שקובעים את פריסת הכיתוב בקובץ Thumbnail.htm.

• ניתן למקם אסימון בקובץ תבנית עם מלל או קוד HTML מתאים, כך שאפשרות נקבעת על-ידי קובץ התבנית מאשר בתיבת הדו-שיח Web Photo Gallery. לדוגמה, קובץ תבנית יכול לכלול רכיב BODY עם תכונת צבע הרקע הבאה שמשתמשת באסימון כערך:

  ‎bgcolor=%BGCOLOR‎%‎

  כדי לקבוע לעמוד צבע רקע אדום, ניתן להחליף את האסימון %BGCOLOR% ב- “FF0000".

• ניתן להוסיף קוד HTML ואסימונים לקובצי התבנית. כל האסימונים חייבים להיות באותיות גדולות, ולהתחיל ולהסתיים בסמל אחוז (%).

התאמה אישית או יצירה של סגנון גלריית תמונות באינטרנט

אסימונים של סגנונות גלריית תמונות באינטרנט

Photoshop משתמשת באסימונים בקובצי תבנית HTML כדי להגדיר סגנון ברירת מחדל לגלריית תמונות באינטרנט. Photoshop משתמשת באסימונים אלה ליצירת גלריה המבוססת על קלט שמוזן על-ידי המשתמש בתיבת הדו-שיח Web Photo Gallery.

בשעת התאמה אישית או יצירה של סגנון גלריה, ניתן להוסיף לקובץ תבנית HTML כל אסימון שהוא, פרט לאסימונים %THUMBNAILS% ו- %THUMBNAILSROWS%, שיכולים להופיע בקובץ IndexPage.htm בלבד. בשעת הוספת אסימון, זכרו שייתכן שיהיה עליכם להוסיף לקובץ גם קוד HTML כדי להשתמש באסימון כהלכה.

ניתן להשתמש באסימונים הבאים בקובצי תבנית HTML:

קובע את צבע הקישורים הפעילים.

קובע שם של קובץ תמונה.

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

קובע את צבע הכרזה.

קובע את הגופן של מלל הכרזה.

קובע את גודל הגופן של מלל הכרזה.

קובע את צבע הרקע.

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

קובע את גודל הגופן של הכיתוב.

מוסיף את כותרת המסמך ככתובית מפרטי הקובץ.

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

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

מתרחב ל-"Web Photo Gallery של Adobe Photoshop CS5".

מוסיף את נתוני זכויות היוצרים ככתובית מנתוני הקובץ.

מוסיף תודות לכתובית מנתוני הקובץ.

קובע את הקישור לעמוד הבית הנוכחי.

נמצא בקובץ SubPage.htm ומצביע על עמוד האינדקס הראשון.

קובע את התאריך המופיע על הכרזה.

קובע את המידע ליצירת קשר של כתובת הדואר האלקטרוני עבור הגלריה.

קובע את נתוני קובץ התמונה שכלולים בכיתוב.

קובע את שם הקובץ של תמונה. השתמשו באסימון זה למטא-נתונים שמופיעים כמלל HTML.

קובע שם קובץ URL של תמונה. השתמשו באסימון זה לשמות קובצי URL בלבד.

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

קובע את הקישור לעמוד הבית שמופיע במסגרת השמאלית של ערכת מסגרות.

קובע את כותרת הגלריה.

קובע את גודל הגבול של תמונה בגודל מלא בעמוד בגלריה.

מפעיל את התיבה Add Width And Height Attributes For Images‏. הדבר מאפשר למשתמש להוריד את התכונות ולקצר את זמן ההורדה.

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

קובע את הקישור לעמוד בגלריה.

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

קובע את ה-URL לתמונה בגודל מלא בעמוד בגלריה.

מפעיל את התיבה Add Width And Height Attributes For Images‏. הדבר מאפשר למשתמש להוריד את התכונות ולקצר את זמן ההורדה.

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

קובע את צבע הקישורים.

קובע את הקישור לעמוד הבא בגלריה.

קובע את הקישור מתצוגה מקדימה גדולה של תמונה לתצוגה מקדימה גדולה של התמונה הבאה.

קובע את הקישור לעמוד הבית הבא.

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

קובע את מיקום העמוד הנוכחי (לדוגמה, עמוד 1 מתוך 3).

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

קובע את הקישור לעמוד הקודם בגלריה.

קובע את הקישור לעמוד הבית הקודם.

קובע את כותרת הגלריה.

קובע את כותרת הגלריה.

קובע את צבע המלל.

קובע את גודל הגבולות של התמונות הממוזערות.

מפעיל את התיבה Add Width And Height Attributes For Images‏. הדבר מאפשר למשתמש להוריד את התכונות ולקצר את זמן ההורדה.

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

אסימון זה מוחלף בתמונות ממוזערות באמצעות הקובץ Thumbnail.htm של סגנונות המסגרת. יש למקם אסימון זה לבד בשורה בודדת קשיחה בקובץ HTML.

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

קובע את הקישור לתמונה ממוזערת.

אסימון זה מוחלף בשורות של תמונות ממוזערות באמצעות הקובץ Thumbnail.htm לסגנונות ללא מסגרת. יש למקם אסימון זה לבד בשורה בודדת קשיחה בקובץ HTML.

מפעיל את התיבה Add Width And Height Attributes For Images‏. הדבר מאפשר למשתמש להוריד את התכונות ולקצר את זמן ההורדה.

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

קובע את כותרת הגלריה.

קובע את צבע הקישורים שנפתחו לתצוגה.