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

  • השתמשו בשכבות ובפרוסות לעיצוב עמודי אינטרנט ורכיבי ממשק של עמוד אינטרנט. (ראו עמודי האינטרנט Layers ו-Slicing.)

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

  • צרו מלל אינטראקטיבי או גרפיקה ללחצנים וייבאו אותם ל- Dreamweaver או ל- Flash.

  • צרו הנפשה לאינטרנט באמצעות החלונית Animation וייצאו אותה כתמונת GIF עם הנפשה או כקובץ QuickTime. ראו יצירת מסגרות הנפשה.

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

לצפייה בסרטון לעיצוב אתרי אינטרנט עם Photoshop ו-Dreamweaver, ראו גישה ל-Photoshop מ-Dreamweaver לשיפור תמונה באינטרנט.

יצירת תמונות אינטראקטיביות

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

Photoshop מספקת כלים שימושיים אחדים ליצירת תמונות אינטראקטיביות:

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

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

  • השתמשו בסגנונות לחצנים מוגדרים מראש מהחלונית Styles ליצירה מהירה של לחצנים אינטראקטיביים שכוללים מצב רגיל, מצב הצבעה (mouseover) ומצב לחיצה (mousedown). ציירו צורה בסיסית באמצעות הכלי Rectangle והחילו עליה סגנון, כגון Beveled Normal, להפיכה אוטומטית של המלבן ללחצן. ליצירת מצבי לחצן נוספים, העתיקו את השכבה והחילו סגנונות מוגדרים מראש נוספים, כגון Beveled Mouseover. להשלמת ערכת המצבים ללחצן האינטראקטיבי, שמרו כל אחת מהשכבות כתמונה נפרדת.

  • לשמירת תמונות אינטראקטיביות בתבנית המתאימה לשימוש באינטרנט ובגודל קובץ ממוטב, השתמשו בתיבת הדו-שיח Save For Web& Devices. ראו מיטוב תמונות.

הערה:

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

לאחר יצירת ערכת תמונה אינטראקטיבית ב- Photoshop, השתמשו ב- Dreamweaver למיקום התמונה בעמוד אינטרנט והוספה אוטומטית של קוד JavaScript לפעולה האינטראקטיבית.

ייצוא ל- Zoomify

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

  1. בחרו File ‏> Export ‏> Zoomify וקבעו אפשרויות ייצוא.

    Template

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

    Output Location

    ציון מיקום ושם לקובץ.

    Image Tile Options

    ציון איכות התמונה.

    Browser Options

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

  2. העלו קובצי תמונות וקובצי HTML לשרת האינטרנט.

עבודה עם ערכי צבע הקסדצימליים

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

הציגו ערכי צבע הקסדצימלי בחלונית Info

  1. להצגת החלונית, בחרו Window ‏> Info או לחצו על כרטיסיית החלונית Info.
  2. בחרו Panel Options מתפריט החלונית. באפשרות First Color Readout או Second Color Readout, בחרו Web Color מהתפריט Mode ולחצו על OK.
  3. מקמו את המצביע על הצבע שברצונכם להציג את ערכיו ההקסדצימליים.

העתקת צבע כערך הקסדצימלי

Photoshop מעתיקה צבעים כתכונת צבע של HTML המכילה ערך הקסדצימלי (color=#xxyyzz), או כערך הקסדצימלי עצמאי.

  1. בצע אחת מהפעולות הבאות:
    • בעזרת הכלי Eyedropper, הזיזו את המצביע שברצונכם להעתיק. לחצו לחיצה ימנית (Windows) או הקישו Ctrl ולחצו (Mac OS), ובחרו Copy Color As HTML או Copy Color’s Hex Code.

    • קבעו את צבע החזית בעזרת החלונית Color, החלונית Swatches או דוגם הצבע של Adobe. מתפריט החלונית Color, בחרו Copy Color As HTML או Copy Color’s Hex Code.

    • בתיבת הדו-שיח Save For Web, לחצו על דוגמית הצבע או בחרו Matte ‏> ‏Other. בדוגם הצבע של Adobe, לחצו לחיצה ימנית על הערך ההקסדצימלי ובחרו Copy.

  2. פתחו את הקובץ הרצוי ביישום לעריכת HTML ובחרו Edit ‏> ‏Paste.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת