20 besökare, 2 medlemmar och 1 Student är online nu
Loopia

Photoshop

Bakgrundsbild 2 (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å exemplet nedan för att se exempel på Bakgrundsbild:

Bakgrundsbild 600 pixlars bredd »

 

 

Förbered bakgrundsbilden

I det här exemplet ska du anpassa ett bild så att den passar som bakgrund på en webbsida.

  1. Hämta gärna bilder i vårt Bildgalleri »

    I exemplet används bilden nedan:

    glasses.jpg Öppnas i nytt fönster (Open in new window) 




    Duplicera Bakgrunds-Layer genom att högerklicka på Layeroch välja menyn "Duplicera lager" (Duplicate Layer):



  2. Välj en färg. I exemplet används Svart färg som kommer att passa bra med de mörka kanterna på fotografiet.

    Välj Standardfärger genom att klicka på knappen eller med snabbkommande CTRL+D.

    Växla mellan Förgrundsfärg och Bakgrundsfärg genom att klicka på "pilen" eller med snabbkommando "X":





  3. Fyll ditt Bakgrunds-Layer med färgen:




    För att bilden inte ska upprepas i webbläsarfönstret som i exemplet högst upp så måste du öka storleken på bildens arbetsyta.

    Välj menyn "Bild/Storlek på arbetsyta" (Image/Canvas Size).

    Ange att bildens arbetsyta ska förstoras åt höger och nedåt.

    Ange storleken till 1280x1024 pixlar:

 

 

Anpassa bilden till bakgrundsfärgen

För att bilden ska smälta in i bakgrunden kan du tona kanterna.

Läs mer om övertoning i guiderna:
Tonade bilder 1 »
Tonade bilder 2 »
Färga ett fotografi »


  1. Skapa en Layermask i ditt Layer med fotografiet:





  2. Övertona i Layermask med verktyget "Övertoning" (Gradient Fill).

    Se till att valet för Övertoning är "Förgrund till transparent" (Foreground to Transparent):




    Övertona den högra kanten och den nedre kanten på fotografiet:







    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">

 

 

Övertona med bakgrundfärgen

Vill du att bilden ska "smälta in" bättre i din bakgrundsfärg kan du färga fotografiet med samma färg som bakgrunden. Läs mer i guiden Färga ett fotografi »

  1. Se till att du arbetar i Layer med ditt fotografi och inte i Layermask. Symbolen ska vara i form av en Pensel:





    Välj menyn "Redigera/Fyll" (Edit/fill), och se till att du fyller med Förgrundsfärg eller Bakgrundsfärg beroende på var din valda färg är.

    Välj läget "Färg" (Color):



    Bilden före fyllning i läget "Färg" (Color):



    Bilden efter fyllning i läget "Färg" (Color):




    Här är exempel på bakgrundsbilder med andra färger: