Med webbverktygen i Photoshop kan du enkelt skapa komponenter för webbsidorna eller visa hela webbsidor i fördefinierade eller anpassade format.

  • Använd lager och segment för att skapa webbsidor och gränssnittselement för webbsidor. (Se Lager och Dela upp webbsidor.)

  • Använd lagerkompositioner om du vill experimentera med olika sidkompositioner eller om du vill exportera variationer av en sida. (Se Lagerkompositioner.)

  • Skapa överrullningstext eller knappgrafik för import till Dreamweaver eller Flash.

  • Skapa webbanimeringar med panelen Animering och exportera dem som animerade GIF-bilder eller Quick Time-filer. Se Skapa bildruteanimeringar.

  • Använd Adobe Bridge för att skapa ett webbfotogalleri, och snabbt förvandla en uppsättning bilder till en interaktiv webbplats med hjälp av många olika professionella mallar.

En videofilm om design av webbplatser med Photoshop och Dreamweaver finns på Använd Photoshop från Dreamweaver för att förbättra webbilder.

Skapa överrullningsbilder

En överrullning är en knapp eller bild på en webbsida som ändras när användaren för musen över den. Du behöver minst två bilder för att skapa en överrullning: en primär bild för knappens eller bildens normala utseende och en sekundär bild för knappens eller bildens utseende när pekaren placeras över den.

Photoshop inkluderar flera praktiska verktyg som du kan använda för att skapa överrullningsbilder:

  • Använd lager för att skapa primära och sekundära bilder. Skapa innehåll i ett lager, duplicera lagret och redigera det för att skapa liknande innehåll. Se till att justeringen mellan lagren bibehålls. När du skapar en överrullningseffekt kan du ändra lagrets stil, synlighet eller placering, göra färg- eller tonjusteringar eller använda filtereffekter. Se Duplicera lager.

  • Du kan också använda lagerstilar om du vill lägga till effekter som färgövertäckning, skuggor, glöd eller relief i det primära lagret. Om du vill skapa ett överrullningspar aktiverar eller avaktiverar du lagerstilen och sparar bilden i respektive utseende. Se Lagereffekter och lagerstilar.

  • Använd de fördefinierade knappstilarna i panelen Stilar för att snabbt skapa överrullningsknappar för normalt utseende, för då användaren för musen över knappen och för då användaren trycker på musknappen. Rita en grundläggande form med rektangelverktyget och välj en stil, t.ex. Avfasning, normal, för att automatiskt förvandla rektangeln till en knapp. Kopiera sedan lagret och använd andra fördefinierade stilar, t.ex. Avfasning, mouseover, för att skapa fler knapputseenden. Spara varje lager som en separat bild för att skapa en färdig överrullningsknappuppsättning.

  • Använd dialogrutan Spara för webben och enheter för att spara överrullningsbilder i ett webbkompatibelt format med optimerad filstorlek. Se Optimera bilder.

Obs!

När du sparar överrullningsbilder bör du använda beskrivande namn som särskiljer den primära bilden (normalt knapputseende) från den sekundära bilden (pekaren är placerad på bilden).

När du har skapat en överrullningsbilduppsättning i Photoshop använder du Dreamweaver för att montera bilderna på en webbsida och automatiskt lägga till JavaScript-koden för överrullningsåtgärden.

Exportera till Zoomify

Du kan publicera högupplösta bilder på webben som användarna kan panorera och zooma in för att öka detaljrikedomen. Bilden med basstorlek hämtas lika snabbt som en JPEG-fil med motsvarande storlek. Photoshop exporterar JPEG-filerna och HTML-filen som du kan överföra till webbservern.

  1. Välj Arkiv > Exportera > Zoomify och ange exportalternativ.

    Mall

    Anger bakgrunds- och navigeringsinställningarna för bilden som visas i webbläsaren.

    Utdataplats

    Anger filens plats och namn.

    Alternativ för bilder sida vid sida

    Anger bildens kvalitet.

    Webbläsaralternativ

    Anger pixelbredd och -höjd för basbilden i användarnas webbläsare.

  2. Överför HTML- och bildfilerna till webbservern.

Arbeta med hexadecimala färgvärden

I Photoshop kan du visa de hexadecimala värdena för bildens färger eller kopiera en bilds hexadecimala värde för användning i en HTML-fil.

Visa hexadecimala färgvärden i panelen Info

  1. Visa panelen genom att välja Fönster > Info eller klicka på panelfliken Info.
  2. Välj Panelalternativ på menyn i panelen. Välj Webbfärg på menyn Läge under Första färgvärde eller Andra färgvärdet, och klicka på OK.
  3. Peka på färgen som du vill visa hexadecimalvärdet för.

Kopiera en färg som ett hexadecimalvärde

Färger kopieras antingen som HTML COLOR-attribut där det hexadecimala värdet ingår (färg = #xxyyzz) eller som enbart hexadecimalt värde.

  1. Gör något av följande:
    • Flytta pekaren med pipetten över den färg du vill kopiera. Högerklicka (Windows) eller håll ned Ctrl och klicka (Mac OS) och välj antingen Kopiera färg som HTML eller Kopiera färgens hexadecimala kod.

    • Använd panelen Färg, panelen Färgrutor eller färgväljaren till att ange förgrundsfärgen. På menyn i panelen Färg väljer du antingen Kopiera färg som HTML eller Kopiera färgens hexadecimala kod.

    • I dialogrutan Spara för webben klickar du på färgrutan eller väljer Mask > Annat. Högerklicka i det hexadecimala värdet i färgväljaren och välj Kopiera.

  2. Öppna önskad fil i ett HTML-redigeringsprogram och välj Redigera > Klistra in.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy