Till Startsidan Läs Photoshoptips Se vanliga frågor (FAQ) Ladda ner nyttiga saker Läs om Devello

Ramar för HTML

Photoshopversion: CS  |  Område: Avancerat



» Index
» Arbete
» Photoshop
» Gå vidare
» Kontakt

 

Att rita ramar är inte så svårt kanske, knepet är att sedan stoppa in det i HTML så att det fungerar tillsammans med text och annat. Man kan till exempel använda detta till att göra en trevlig meny eller liknande som i exemplet eller varför inte layouten på de här sidorna.

Steg 1

Börja med att skapa en ny bild som är ungefär så stor som du vill ha din meny. Skapa även ett lager. Markera sedan hela bilden - SELECT > ALL (CTRL+A). När detta är gjort väljer du den färg du vill ha på ramen, typ en grå nyans.

Steg 2

Välj sedan EDIT > STROKE. Här ställer du värdet till 6 pixels och Inside.
Detta gör att du skapar en grå ram runt din bild.

Steg 3

Nästa steg är att skapa svarta kanter på den grå ramen. Detta förutsätter dock att du ska använda vit/ljus bakgrund. Men gör i alla fall så här: Håll nere CTRL och klicka på lagret med den grå ramen i lagerpaletten. Detta gör att du markerar allt som finns på det. Byt sedan förgrundsfärg till svart (D) och välj återigen EDIT > STROKE. Nu sätter du värdet till 1 pixel men fortfarande inside. Kolla sedan att ramen ritats ordentligt, Photoshop kan ibland ha problem med hörnen.

Steg 4

Nästa steg är att runda till ramen lite. Detta gör du genom att först skapa ett nytt lager. Rita sedan ett svart streck för de mörka delarna och ett vitt för de ljusa. Du ser hur det ser ut på bilden nedan. Det är enklast om man klickar där strecket ska börja, håller ner Shift-tangenten och klickar där strecket slutar. Då ritas det ut automatiskt. Byt sedan Blending Mode (blandningsläge) till Soft Light. Detta gör du i Lagerpaletten.

Steg 5

Okej, då återstår att skära upp bilden i flera delar så att den kan användas i HTML. Har du inte ImageReady kan du se hur man gör här.

Spara annars bilden i PSD-formatet. Och klicka på ImageReady-knappen längst ner i Toolbox.

I ImageReady

Bilden hamnar i ImageReady. Se först till att du visar Rulers/linjaler genom att trycka CTRL+R. Växla sedan till Move Tool som ser likadant ut här som i Photoshop. Dra ut guides från linjalerna till de ställen där du vill skära upp bilden. Du kan flytta dem lite som du vill med Move Tool.

Det gäller alltså att sätta ut guides så att du får den tomma ytan i mitten fri då bilden är uppskuren. Det är ju där som texten ska finnas.

Steg 6

Välj nu SLICES > CREATE SLICES FROM GUIDES. Bilden skärs upp där du lagt dina guides. Välj sedan FILE > SAVE OPTIMIZED AS. När du gör detta skapas en HTML-fil där bilderna ligger färdiga i en tabell samt en undermapp som heter images där alla bilderna hamnar. Du får alltså flytta alltihop till ditt HTML-projekt om du vill att det ska fungera.

Texten eller det som skall finnas i ramen stoppar du in istället för den stora tomma bilden i mitten. Se till att sätta bakgrundsfärg på den cellen så att annat som ligger bakom inte lyser igenom.

Vill du ha en ram som passar oavsett hur brett eller högt innehållet är så får du stoppa in kortside- och långsidebilderna som bakgrund i respektive celler. Tänk då också på att stoppa in en transparent bild (typ 1x1 pixel) i de cellerna så att de visas i Netscape (Netscape visar inte tomma celler).