Photoshop

Dagens lektion så går vi igenom:

• Photoshop
• Optimering av bilder
• Olika bildformat
• Beskärning av bilder
• Räta upp en bild
• Ta bort fläckar
• Markeringsverktyget 
• Göra en bild svart vit

Photoshop

Meny

Verktygspanel

Bildytan

Lagerpanelen

Flikar

Photoshop Verktygspanel

Kortkommandon

Exempel Bilder

För nerladding

Länk

Photoshop

Optimera bild

Photoshop - Optimera bild

• Många webbplatser är onödigt tunga, och en av de största bovarna är bilderna.
• Det är vanligt att 60-80% av storleken på en webbsida består av bilder.
• Genom att optimera bilderna kan du få sidan att ladda snabbare, och på så vis komma ett steg närmare alla fördelar en snabb webbplats ger.

• Det finns tre filformat som används flitigt på webben, och ett filformat som börjar bli vanligare av en god anledning.  

JPEG 

• JPEG ( .jpg) som kallas för JPG ibland ska användas för fotografier.
• Dessa bilder innehåller extremt många färger, vilka komprimeras väldigt effektivt när de är sparade i JPEG.
• Spara man spara en JPEG som en logotyp  skulle den bli i sämre kvalitet samtidigt som filstorleken skulle bli mycket större.

PNG  

• Detta filformat lämpar sig bäst för illustrationer, alltså i princip allt som inte är fotografier, exempelvis logotyper, ikoner, diagram och annan enkel grafik.
• Dessa illustrationer har mycket färre och renare färger, och blir i mycket bättre kvalitet som PNG-bild samtidigt som filstorleken blir mindre.
• Skulle ett fotografi sparas som PNG skulle ingen märkbar skillnad ske utseendemässigt, men filstorleken skulle antagligen bli runt fem gånger större, vilket gör att den tar betydligt längre tid att ladda in på en webbplats.

GIF  

• Illustrationer sparades ofta i GIF-format förr, innan det nyare PNG-formatet kom.
• En GIF-bild kan endast ha 256 färger, vilket gör att den duger fint för enkel grafik, men har man många runda former och färgskiftningar lämpar sig PNG bättre.
• Sanningen är att PNG nästan alltid lämpar sig bättre än GIF, i och med att man kan göra mer med en PNG samtidigt som filstorlekarna inte skiljer sig så mycket åt.
• GIF-bilder kan för övrigt vara animerade, vilket är något som de andra bilderna inte kan vara.
• Skulle ett fotografi eller detaljerad illustration sparas som GIF skulle färgerna och formerna på bilden bli kantiga och pixliga.

Filformaten JPEG och PNG kan komprimeras (eller rättare sagt optimeras), och på så vis levereras snabbare till webbläsaren.

JPEG

• När du sparar JPEG-bilder i ditt bildbehandlingsprogram kan du välja hur bra kvalitet du vill att bilden ska ha.
• Många tänker att de vill ha den bästa kvaliteten och väljer därför 100%, men sanningen är att du oftast kan välja så låg kvalitet som 80% utan att man ser någon skillnad — ibland ännu lägre.
• Sämre kvalitet leder i det här fallet till en mindre filstorlek.

Filformaten JPEG och PNG kan komprimeras (eller rättare sagt optimeras), och på så vis levereras snabbare till webbläsaren.

Att man minska storleken MB och inte så mycket på pixlar.

Visa original och ny

Ställa in kvalitet

Ställ in bildstorlek

Tid att ladda bild på webbsida

100% kvalitet

3.13 MB

60% kvalitet

1500 pixlar

383 kb

Spara bilden i rätt storlek

• Ett misstag som ofta görs är att man lägger till en bild i full storlek och sedan förminskar den i HTML-koden.
• Detta betyder att webbläsaren måste ladda ner hela bilden, vilket är onödigt.
• Ta istället reda på vilken storlek du kommer använda och förminska bilden i ditt bildbehandlingsprogram innan du lägger till du på webbplatsen. 

Photoshop

Photoshop - Beskär

Beskärverktyget

Photoshop - Räta upp

Photoshop - Ta bort fläckar

Photoshop - Ta bort fläckar

Photoshop - ändra storlek

Photoshop - Spara

Photoshop - Spara

Photoshop - Maskering

Photoshop - Svart-vit

Uppgiften Photoshop

Du ska göra:

• Efterlikna bilden
• Biden ska läggas in i ett HTML-dokument och länkas via eran egensida. 
• Namn: Uppgift Photoshop

Uppgiften

Photopea

Photopea är ett webbaserat bildbehandlingsprogram som kan arbeta med raster- och vektorgrafik.

Det kan användas för bildredigering, att göra illustrationer, webdesign och att byta mellan olika filformat.

Dagens lektion så går vi igenom:

• Photoshop
• Optimering av bilder
• Olika bildformat
• Beskärning av bilder
• Räta upp en bild
• Ta bort fläckar
• Markeringsverktyget 
• Göra en bild svart vit

Photopea

Skapa ett nytt projekt eller ladda upp en egen bild.

Eller dra in en bild för att ladda upp.

Photopea

Verktygspanel

Bildytan

Egenskaper

Flikar

Photopea - kortkommandon

Kortkommandon

Exempel Bilder

För nerladding

Länk

Photopea

Optimera bild

Photopea - Optimera bild

• Många webbplatser är onödigt tunga, och en av de största bovarna är bilderna.
• Det är vanligt att 60-80% av storleken på en webbsida består av bilder.
• Genom att optimera bilderna kan du få sidan att ladda snabbare, och på så vis komma ett steg närmare alla fördelar en snabb webbplats ger.

• Det finns tre filformat som används flitigt på webben, och ett filformat som börjar bli vanligare av en god anledning.  

JPEG 

• JPEG ( .jpg) som kallas för JPG ibland ska användas för fotografier.
• Dessa bilder innehåller extremt många färger, vilka komprimeras väldigt effektivt när de är sparade i JPEG.
• Spara man spara en JPEG som en logotyp  skulle den bli i sämre kvalitet samtidigt som filstorleken skulle bli mycket större.

PNG  

• Detta filformat lämpar sig bäst för illustrationer, alltså i princip allt som inte är fotografier, exempelvis logotyper, ikoner, diagram och annan enkel grafik.
• Dessa illustrationer har mycket färre och renare färger, och blir i mycket bättre kvalitet som PNG-bild samtidigt som filstorleken blir mindre.
• Skulle ett fotografi sparas som PNG skulle ingen märkbar skillnad ske utseendemässigt, men filstorleken skulle antagligen bli runt fem gånger större, vilket gör att den tar betydligt längre tid att ladda in på en webbplats.

GIF  

• Illustrationer sparades ofta i GIF-format förr, innan det nyare PNG-formatet kom.
• En GIF-bild kan endast ha 256 färger, vilket gör att den duger fint för enkel grafik, men har man många runda former och färgskiftningar lämpar sig PNG bättre.
• Sanningen är att PNG nästan alltid lämpar sig bättre än GIF, i och med att man kan göra mer med en PNG samtidigt som filstorlekarna inte skiljer sig så mycket åt.
• GIF-bilder kan för övrigt vara animerade, vilket är något som de andra bilderna inte kan vara.
• Skulle ett fotografi eller detaljerad illustration sparas som GIF skulle färgerna och formerna på bilden bli kantiga och pixliga.

Filformaten JPEG och PNG kan komprimeras (eller rättare sagt optimeras), och på så vis levereras snabbare till webbläsaren.

JPEG

• När du sparar JPEG-bilder i ditt bildbehandlingsprogram kan du välja hur bra kvalitet du vill att bilden ska ha.
• Många tänker att de vill ha den bästa kvaliteten och väljer därför 100%, men sanningen är att du oftast kan välja så låg kvalitet som 80% utan att man ser någon skillnad — ibland ännu lägre.
• Sämre kvalitet leder i det här fallet till en mindre filstorlek.

100% kvalitet

3.13 MB

60% kvalitet

1500 pixlar

383 kb

Spara bilden i rätt storlek

• Ett misstag som ofta görs är att man lägger till en bild i full storlek och sedan förminskar den i HTML-koden.
• Detta betyder att webbläsaren måste ladda ner hela bilden, vilket är onödigt.
• Ta istället reda på vilken storlek du kommer använda och förminska bilden i ditt bildbehandlingsprogram innan du lägger till du på webbplatsen. 

Photopea

Photopea - Beskär

Beskärverktyget

Håll in shift för att behålla proportioner, när du dra rutan

Photopea - Räta upp

Photopea - Ta bort fläckar

Photopea - ändra storlek

Välj Fil -> Exportera som -> JPG eller PNG

Ställa in kvalitet

Storleken på den ny filen

Photopea - Spara PSD-fil

Photopea - Maskering

Photoshop - Svart-vit

Uppgiften Photoshop

Du ska göra:

• Efterlikna bilden
• Biden ska läggas in i ett HTML-dokument och länkas via eran egensida. 
• Namn: Uppgift Photoshop

Uppgiften