Webbutveckling med HTML och CSS

1. Öppna och spara

Öppna programmet

• Pixlr E körs via webbläsaren. Gå till adressen https://pixlr.com/se/
• Klicka på knappen för Pixlr E, så är programmet igång.

Öppna bildfil

• Öppna filen glassblower.jpg
  • Klicka på knappen Öppna bild eller dra bilden till webbläsarens fönster.
  • Då en bild redan är öppen, så att programmets menyrad syns högst upp, går det också välja Öppna bild… i Arkiv-menyn.

Spara bildfil

• Välj Spara... i Arkiv-menyn.
• Skriv in filnamn och välj filtyp
  • PXZ är Pixlrs eget format och används om du också vill spara lager och annan information, för att sedan kunna arbeta vidare med att redigera bilden.
  • För JPG kan du också välja kvalitet, dvs hur mycket bilden ska komprimeras.
• Skriv namnet glassblower2, välj formatet JPG och valfri kvalitet. Klicka sedan på knappen Ladda ner.
  • Bilden sparas enligt de inställningar du gjort i webbläsaren, dvs antingen sparas den direkt i din nedladdningsmapp eller så får du en dialog, där du kan välja var du ska spara bilden. Har du inte valt inställningen att webbläsaren ska fråga var filen ska sparas, rekommenderas du att göra det, se lab L1a.

2. Ändra storlek

• Öppna bilden glassblower.jpg
• Välj Ändra storlek på sidan (skala) i Sida-menyn.
  • Menyn har i tidigare versioner hetat Bild, men heter nu Sida, vilket kan tyckas underligt, då det är bilder man arbetar med. Men den heter Page i engelsk version, så det är inte något fel i översättningen.
• Kontrollera att Lås proportioner är valt och skriv in t.ex. 400 i rutan Bredd.
• Klicka på knappen Tillämpa.
• Välj Zoom-verktyget i menyn till vänster. Klicka på bilden för att förstora – håll ner Shift-tangenten för att förminska.
  • Dubbelklicka på verktyget i menyn, för att visa bilden i 100%.
  • Zoom-verktyget ändrar inte bildens storlek, utan ändrar endast storleken på visning av bilden.

3. Beskära bild

• Öppna bilden pipes.jpg
• Zooma bilden med Zoom-verktyget , så att du ser hela bilden så stor som möjligt.
• Välj verktyget Beskära
  • Under menyraden dyker det upp en del inställningar för verktyget.
  • Markera Begränsning: FRI.
  • Dra sedan i kanterna i rutan som ligger över bilden, för att välja ut önskad del. Du kan flytta rutan, genom att klicka i den och dra.
  • Klicka sedan på knappen Tillämpa.
• Nu ska du prova en annan inställning, så välj Ångra i Redigera-menyn, för att få tillbaks originalbilden.
• Välj verktyget Beskära igen
  • Markera Begränsning: Storlek
  • Skriv in önskad storlek i fälten till höger, t.ex. 200 i W och 600 i H.
  • Dra i rutans kanter och välj ut önskad del av bilden. Klicka sedan på Tillämpa.

4. Justering av ljusstyrka, m.m.

• Öppna bilden glassfoot.jpg
• Välj olika alternativ i menyn Justering och prova att ändra inställningarna.
  • Klicka på Avbryt istället för Tillämpa, om du vill prova olika inställningar på originalbilden.

5. Markeringar

• Öppna bilden tools.jpg
• Välj verktyget för Rammarkering och markera den undre saxen med röda handtag.
  • Det är svårt att bara få med saxen, utan en del av pinsetten som ligger ovanför kommer också med, så vi ska prova ett annat markeringsverktyg.
• Välj Avmarkera i Markera-menyn.
• Välj verktyget Lassomarkering . Rama in den undre saxen, så att ingen del av de andra verktygen kommer med.
  • Kopiera – Redigera > Kopiera eller cmd+C (MacOS), ctrl+C (Windows).
  • Skapa en ny bild – Arkiv > Ny bild.... Välj storleken 800x600 och klicka på Skapa.
  • Klistra in bilden på saxen – Redigera > Klistra in eller cmd+V (MacOS), ctrl+V (Windows).
• Välj Trollstaven . Öka Tolerans till c:a 40 och avmarkera Angränsande, så att det inte är valt. Klicka någonstans i den bruna bakgrunden i bilden.
  • Observera att en del av saxen också markeras, så vi ska försöka igen.
  • Välj Avmarkera i Markera-menyn.
  • Klicka sedan på Angränsande i inställningarna för verktyget.
  • Klicka i bildens bakgrund. Häll ner Shift-tangenten och klicka på de andra delarna i bakgrunden, så att hela bakgrunden markeras.
  • Ta bort det markerade, genom att trycka på backstegstangenten eller Del-tangenten. Välj sedan Markera > Avmarkera.
  • Välj Suddgummit och radera det som är kvar av bakgrunden.

6. Transformera

• Bilden med saxen består nu av två lager, så klicka först i det övre lagret i kolumnen till höger, så att det lagret är markerat.
• Välj sedan Omforma fritt i Redigera-menyn.
• Klicka på ett hörn och dra inåt, för att göra bilden lite mindre. Gör bilden ungefär hälften så stor.
  • Vill du ändra fritt, utan att bildens proportioner ska behållas, håller du ner shift-tangenten medan du drar.
• Håll muspekaren strax utanför ett hörn, så att muspekaren blir en böjd pil. Tryck ner och dra, för att vrida bilden. Vrid den till önskad position.
• Du kan också flytta bilden, genom att klicka mitt i den och dra den till önskad plats (fast du har ju inte något behov av det i just detta fall).
• Dubbelklicka på bilden och klicka sedan på knappen Yes, för att bekräfta transformationen.

7. Lager

• Välj verktyget för Rammarkering och markera saxen. Kopiera sedan bilden.
• Gå över till bilden pipes.jpg (den bild som du tidigare beskar) och klistra in saxen.
  • Observera i "Lagermenyn" till höger att saxen hamnar i ett nytt lager.
• Välj verktyget för Ordna . Peka på bilden och dra den uppåt, så att den ligger i den övre delen av bilden. Eventuellt behöver du också dra i ett hörn, för att ändra storleken, så att den täcker ungefär halva bredden av bilden.
• Välj Textverktyget och klicka i bilden.
  • Det ska dyka upp en ruta med en fråga om du vill lägga till ett textlager, men ibland får man klicka två gånger i bilden innan den dyker upp. Klicka sedan på Lägg till.
  • Skriv någon text, t.ex. GlasWebb, och välj teckensnitt, färg, storlek, etc. i inställningarna för textverktyget.
  • Klicka sedan utanför rutan med texten, så kan du dra den till önskad plats. Vill du ändra texten eller inställningarna för den, kan du dubbelklicka på texten.
• Välj verktyget för Ordna och flytta texten och saxen, så att de delvis överlappar varandra.
• I den högra kolumnen med lagren kan du dra dem uppåt och nedåt, för att byta ordning på dem.
  • Lagret med bakgrundsbilden är låst, men du kan klicka på hänglåset, för att låsa upp det.
• Klicka på den symbolen med ett "öga", för att dölja/visa ett lager.
• Du kan högerklicka på ett lager, för att få fram fler inställningar.
• För att ta bort ett lager, markerar du det och väljer sedan Radera lager i menyn Lager.
• Du kan ta bort ett lager, genom att högerklicka på det och i den ruta du då får klicka på soptunnan.

8. Ta bort bakgrund i en bild

• Öppna bilden forming.jpg
• Välj Justering > Nivåer och gör bilden lite ljusare, så att du tydligare ser konturen för handen och formverktyget.
• Välj verktyget Lassomarkering och klicka på polygon i verktygets inställning.
  • Klicka och markera runt handen, glasmassan och verktyget.
• Välj Konvertera till mask i Markera-menyn.
• Lägg till ett lager, fyll det med vit färg och lägg det längst ner, dvs gör följande:
  • Nytt lager i Lager-menyn.
  • Klicka på den övre färgcirkeln längst ner i verktygspaletten och välj vit färg.
  • Välj verktyget Fyll och klicka i bilden, för att fylla lagret med vit färg.
  • Klicka på hänglåset i det undre lagret i lagermenyn, för att låsa upp det.
  • Dra ner det nya, vita lagret, så det hamnar längst ner, dvs bakom bilden.
• Klicka i det övre lagret, det med bilden, så att det lagret är valt.
• Välj Mask-verktyget och verktyget Pensel i inställningarna. Välj också metod Lägg till eller Ta bort . Klicka och "måla" kring bilden, för att justera kanterna.
• Beskär och förminska bilden, genom att använda Beskär-verktyget med begränsning Storlek och 400 både i W och H. Rama in bilden och klicka sedan på knappen Tillämpa.
• Dubbelklicka på Zoom-verktyget för att visa bilden i 100%.
• Spara en transparent bild:
  • Klicka på "ögat" i det undre, vita lagret, så att lagret döljs i bilden.
  • Välj Arkiv > Spara... och spara bilden i PNG- eller WebP-format.

9. Byta färg

• Öppna bilden europe.png
• Välj verktyget Trollstav . I inställningarna tar du bort valet av Angränsande. Klicka sedan i den gröna delen av kartan, så att alla gröna pixlar markeras.
• Välj Markera > Invertera markering, så att istället haven och de svarta kanterna markeras.
• Ta bort det markerade, genom att trycka på backstegstangenten eller Del-tangenten.
• Invertera markeringen igen, så att den gröna kartan är markerad.
• Klicka på den övre cirkeln i färgväljaren och välj den färg du vill ha på kartan.
• Välj Fyll-verktyget . Ta bort valet Angränsande i inställningarna. Klicka sedan på kartan.
  • Det går också välja Fyll... i Redigera-menyn.
• Välj Markera > Avmarkera
• Välj Trollstaven igen och markera hela kartan.
• Välj två olika färger i de båda cirklarna i färgväljaren .
• Klicka på verktyget Övertoning . Peka i kartan och dra, för att markera riktning och omfattning för övertoningen.
  • Det går också klicka på färgrutan i verktygets inställningar och där välja övertoningsfärger.
• Välj Markera > Avmarkera

10. Färgpipetten

• Öppna bilden pipes.jpg
• Välj verktyget Färgpipett och klicka på den färg i bilden som du vill fånga upp.
  • Färgen hamnar då i den övre av ringarna i Färgväljaren
• Klicka på ringen i Färgväljaren så att du får upp färgdialogen. Där kan du kopiera den hexadecimala koden, om du t.ex. vill använda den i din CSS-kod.