128 besökare, 1 medlem och 1 Student är online nu
Loopia

Photoshop

Bakgrundsbild 1 (5/5.5)

Bakgrundbilder till en webbplats kan utformas med flera olika metoder. När du skapar en bakgrund bör tänka på vilken upplösning dina besökare har på sina bildskärmar

Läs mer om upplösning här »

Titta på exemplen nedan. Maximera de webbläsarfönster som öppnas.

Din bildskärmsupplösning är pixlar

Klicka på länkarna nedan för att se exempel på olika bredd på Bakgrundsbilder:
400 pixlar Öppnas i nytt fönster (Open in new window) 
640 pixlars Öppnas i nytt fönster (Open in new window) 
800 pixlar Öppnas i nytt fönster (Open in new window) 
1024 pixlar Öppnas i nytt fönster (Open in new window) 
1280 pixlar Öppnas i nytt fönster (Open in new window) 
1600 pixlar Öppnas i nytt fönster (Open in new window) 

 

Exempel 1: Bakgrundsbild som upprepas nedåt

  1. I det första exemplet ska du göra en bakgrundsbild som ska ligga i vänster kant på webbsidan.

    Skapa ett nytt dokument med storleken 1024x100 pixlar och upplösningen 96 dpi.

    Zooma ditt dokument till 100 % och se till att du ser vänster kant i dokumentet.

    Använd bläddringslist eller CTRL+HOME:




  2. Skapa ett nytt Layer:




    Skapa ett markeringsområde som motsvarar bredden på bakgrundsbilden, i exemplet 150 pixlar.

    Använd " Linjaler" (Rulers) som stöd. Välj menyn "Visa/Visa Linjaler" (View/Show Rulers).

    När du gör markeringsområden som ska börja exakt i kanten på arbetsytan finns alltid en risk att du missar någon pixel.

    Zooma ut din arbetsyta så att du ser hela bredden på din bild, i exemplet 50%.

    Förstora dokument-fönstret genom att dra i kanterna eller i ett hörn. Börja skapa markeringsområdet utanför arbetsytan, i den grå ytan.

    Zoomad till 50% :



    Påbörja markeringsområdet utanför arbetsytan:



    Markeringsområdet ligger exakt i kanten på dokumentet:




  3. Fyll din markering med en färg. ALT+Backsteg för vald Förgrundsfärg eller CTRL+Backsteg för vald Bakgrundsfärg:




    Avmarkera med CTRL+D.

    Spara din bakgrundsbild i ett webbformat. Läs mer i guiden Webbformat »

    Nu kan du prova din bakgrund på din webbsida.

    Klicka här för att se resultatet »

    Så här anger du HTML-koden för bakgrundsbilden:

    <body bgcolor="#FFFFFF" background="your_background.gif">

 

 

Exempel 2: Bakgrundsbild med Layer-stil (Layer Style)

Om du vill ha en effekt på din bakgrundsbild kan du skapa den med Photoshops "Effekter" (Effects). I senare versioner av Photoshop kallas det " Layer-stil" (Layer Style).

  1. Se till att din bakgrundsbild ligger i ett eget Layer.

    Bilden får inte vara i läget "Indexerade färger" (Indexed color). Om du utfört momenten ovan så kan du ångra flera steg med CTRL+ALT+Z tills du ser dina Layer igen.

    Du ser Layer när du är i läget "RGB":






    Högerklicka på Layer-namnet välj menyn "Effekter":



    Läs mer om "effekter" (Effects) och Layer-stilar (Layer Styles) i guiderna nedan:
    Skugga 2 »
    Glöd - Gläns 2 »
    Innerskugga 2 »
    Inre avfasning 2 »
    Yttre avfasning »


  2. I exemplet har via valt "Skugga" (Drop Shadow) och "Inre Avfasning" (Inner Bevel):




    Om du sparar bakgrunden i det här läget som kommer den övre och den undre avfasade kanten att bilda ett mönster.

    Klicka här för att se resultatet »



    För att undvika detta måste bilden beskäras (Crop) i överkant och underkant.

    Överför "Effekter" (Effects) till egna Layer.

    Högerklicka på symbolen i Layer:



    Väljer menyn "Skapa Lager" (Create Layers).

    De "effekter" (Effects) du valt placeras i egna Layer:




  3. Använd verktyget "Beskär" (Crop) och skapa ett område där du inte väljer överkant och underkant, där "Effekterna" (Effects) du vill ta bort finns.

    Använd samma metod som tidigare (se ovan) så missar du inga pixlar i bilden:

    Zoomad till 50% när beskärning (Crop) påbörjas:.



    Zoomad till 100 %:



    Bekräfta ENTER.

    Klicka här för att se resultatet »