מדריך למשתמש ביטול

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

הערה:

ליצירת גלריות אינטרנט ב-Photoshop CS5, ראה יצירת גלריית תמונות באינטרנט בעזרה של Adobe Bridge. כדי להשתמש בתוסף Web Photo Gallery האופציונלי המתואר בנושאים להלן, הורד והתקן אותו תחילה עבור Windows או Mac OS.

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

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

עמוד בית של גלריית תמונות באינטרנט ב-Photoshop
עמוד בית של גלריית תמונות באינטרנט

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

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

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

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

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

  1. הורד והתקן את תוסף Web Photo Gallery הישן יותר עבור Windows או Mac OS.

  2. (אופציונלי) בחרו בקבצים או בתיקיות שברצונכם להשתמש בהם ב- Adobe Bridge.

    התמונות יוצגו באותו סדר שבו הן מוצגות ב- Bridge. אם אתם מעדיפים סדר שונה, שנו את הסדר ב- Bridge.

  3. בצעו אחת מהפעולות הבאות:

    • ב- Adobe Bridge, בחרו Tools‏ ‏> Photoshop‏ ‏> Web Photo Gallery.

    • ב- Photoshop, בחרו File‏ ‏> Automate‏ ‏> Web Photo Gallery.

  4. בחרו סגנון לגלריה מהתפריט הנפתח Styles. תצוגה מקדימה של עמוד הבית של הסגנון הנבחר מופיעה בתיבת הדו-שיח.

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

  6. בחרו בקובצי המקור לגלריה מהתפריט Use.

    Selected Images From Bridge

    שימוש בתמונות שבחרת לפני פתיחת תיבת הדו-שיח Web Photo Gallery.

    Folder

    שימוש בתמונות מתיקיות שנבחרו באמצעות הלחצנים Browse‏ (Windows) או Choose‏ (Mac OS). בחרו Include All Subfolders כדי לכלול תמונות מתת-תיקיות של התיקייה שנבחרה.

  7. לחצו על Destination ולאחר מכן בחרו תיקייה לשמירת התמונות ועמודי ה- HTML של הגלריה. לאחר מכן לחצו על הלחצן OK‏ (Windows) או על הלחצן Choose‏ (Mac OS).

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

  9. לחצו על הלחצן OK.‏ Photoshop ממקמת את קובצי HTML ו- JPEG הבאים בתיקיית היעד:

    • עמוד בית לגלריה שנקרא index.htm או index.html, בהתאם לאפשרויות Extension. להצגת תצוגה מקדימה של הגלריה, פתחו קובץ זה בדפדפן אינטרנט כלשהו.

    • תמונות JPEG בתת-תיקייה של תמונות.

    • עמודי HTML בתת-תיקייה של עמודים.

    • תמונות JPEG ממוזערות בתת-תיקייה של תמונות ממוזערות.

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

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

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

General

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

Extension

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

Use UTF 8 Encoding For URL

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

Add Width And Height Attributes For Images

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

Preserve All Metadata

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

Banner

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

Site Name

שם הגלריה.

Photographer

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

Contact Info

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

Date

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

Font and Font Size

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

Large Images

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

Add numeric links

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

Resize Images

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

הערה:

Photoshop משתמשת באינטרפולציית ברירת המחדל שנקבעה בהעדפות. לקבלת התוצאות הטובות ביותר בעת הקטנת גודל של תמונה, בחרו באפשרות Bicubic Sharper כברירת המחדל.

Border Size

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

Titles Use

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

Font and Font Size

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

Thumbnails

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

Size

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

Columns and Rows

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

Border Size

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

Titles Use

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

Font and Font Size

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

Custom Colors

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

Security

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

Content

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

Font, Color, and Position

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

Rotate

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

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

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

‏Windows

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

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery.

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

Caption.htm

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

FrameSet.htm

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

IndexPage.htm

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

SubPage.htm

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

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 ואסימונים לקובצי התבנית. כל האסימונים חייבים להיות באותיות גדולות, ולהתחיל ולהסתיים בסמל אחוז (%).

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

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

    הסגנון החדש או המותאם אישית (בשם זהה לשם התיקייה שלו) מופיע בתפריט Styles בתיבת הדו-שיח Web Photo Gallery‏.

  3. היעזרו בעורך HTML, ובצעו אחד מהצעדים הבאים:
    • התאימו אישית את קובץ תבנית HTML.

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

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

    הערה:

    בשעת התאמה אישית או יצירה של תבנית לסגנון גלריה, יש למקם כל אחד מהאסימונים הבאים בשורה נפרדת בקובץ HTML‏: %CURRENTINDEX%, ‏%NEXTIMAGE%, ‏%NEXTINDEX%, ‏%PAGE%, ‏%PREVIMAGE% ו- %PREVINDEX%. בשעת יצירת עמודים מסוימים בגלריה, Photoshop מדלגת על שורות בתבנית שכוללות אסימונים שאינם מוחלים על עמודים אלה. לדוגמה, כש- Photoshop יוצרת את העמוד הראשון בגלריה, היא מדלגת על שורה בתבנית שכוללת את האסימון %PREVIMAGE%, שקובע את הקישור לעמוד הקודם בגלריה. השאירו את האסימון %PREVIMAGE% בשורה נפרדת כדי לוודא ש- Photoshop לא תתעלם מאסימונים אחרים בתבנית.

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

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

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

%ALINK%

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

%ALT%

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

%ANCHOR%

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

%BANNERCOLOR%

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

%BANNERFONT%

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

%BANNERFONTSIZE%

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

%BGCOLOR%

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

%CAPTIONFONT%

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

%CAPTIONFONTSIZE%

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

‏%CAPTIONTITLE%

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

%CHARSET%

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

‏%CONTACTINFO%

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

‏%CONTENT_GENRATOR%

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

‏%COPYRIGHT%

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

‏%CREDITS%

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

%CURRENTINDEX%

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

%CURRENTINDEXANCHOR%

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

%DATE%

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

‏%EMAIL%

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

%FILEINFO%

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

%FILENAME%

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

%FILENAME_URL%

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

%FIRSTPAGE%

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

%FRAMEINDEX%

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

%HEADER%

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

%IMAGEBORDER%

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

%IMAGE_HEIGHT%

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

%IMAGE_HEIGHT_NUMBER%

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

%IMAGEPAGE%

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

%IMAGE_SIZE%

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

%IMAGESRC%

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

%IMAGE_WIDTH%

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

%IMAGE_WIDTH_NUMBER%

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

%LINK%

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

%NEXTIMAGE%

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

%NEXTIMAGE _CIRCULAR%

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

%NEXTINDEX%

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

%NUMERICLINKS%

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

%PAGE%

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

%PHOTOGRAPHER%

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

%PREVIMAGE%

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

%PREVINDEX%

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

%SUBPAGEHEADER%

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

%SUBPAGETITLE%

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

%TEXT%

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

%THUMBBORDER%

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

%THUMBNAIL_HEIGHT%

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

%THUMBNAIL_HEIGHT_NUMBER%

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

%THUMBNAILS%

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

%THUMBNAIL_SIZE%

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

%THUMBNAILSRC%

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

%THUMBNAILSROWS%

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

%THUMBNAIL_WIDTH%

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

%THUMBNAIL_WIDTH_NUMBER%

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

%TITLE%

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

%VLINK%

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

קבל עזרה במהירות ובקלות

משתמש חדש?