Övningar i bilder och färger

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Övningar i bilder och färger"

Transkript

1 Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och konverteras till format som jpeg och png som används på webben. Bilderna ska användas som bakgrunder och illustrationer på en webbplats i HTML- och CSS-kod. Vi tittar också på hur vi sätter bakgrundsfärg. Instruktionerna gäller för Svensk version. Observera att Pixlr:s menyer visas högst upp i webbläsarens fönster. Önskat språk väljer du i menyn Språk. 1. Studera innehållet i mappen I denna övning ska du orientera dig i det material som du ska använda. Om du ännu inte laddat ner materialet från laborationens sida, så börjar du med det. Gå igenom mappen glaswebb I mappen finns: o två HTML-dokument (index.htm och about.htm) Dessa är strukturerade med div-taggar i två avdelningar för navigering och innehåll. Öppna HTML-dokumenten i din editor för att se koden. Öppna dem också i webbläsaren för att se hur de visas där. HTML-koden innehåller också img-taggar för några bilder, men dessa kan ännu inte visas. Bilderna ska du skapa i de följande övningarna. Istället visas nu texten i alt-attributet. o ett CSS-dokument (style.css) Detta innehåller kod för att skapa sidornas layout och en del andra stilinställningar. Öppna dokumentet i editorn för att se koden. I övningarna ska du sedan komplettera denna kod med att ta in ett par bakgrundsbilder. o en mapp kallad pics I denna mapp ska du lägga de bilder som du skapar i övningarna. o en mapp kallad originalbilder I denna mapp ligger de bilder som du ska utgå ifrån i övningarna. 2. Bakgrundsbild för navigeringskolumnen I denna övning ska du utgå från bilden pipor.jpg och skapa en bild som dels ger en bakgrund till navigeringslänkarna och dels en illustration av webbplatsens innehåll. Bilden ska beskäras och förses med en logotyp. Bilden ska användas som bakgrund till blocket nav. I CSS-filen är bredden på detta satt till 200 pixlar. Lagom höjd på bilden kan vara 600 pixlar, sedan kommer resten att fyllas ut med lämplig bakgrundsfärg. Bilden ska bli som vidstående bild (visas här förminskad). Beskär och förminska bilden Öppna filen pipor.jpg i ditt bildredigeringsprogram. Du ska nu beskära bilden och samtidigt förminska den till önskad storlek. Välj verktyget för att beskära (Beskärningsverktyg ). I övre delen av programmets fönster visas två rutor där du kan skriva in önskad storlek. Välj Output size och skriv in storleken 200 och Rune Körnefors 1

2 Lägg på en logotyp Klicka sedan i bilden och dra en rektangel, för att markera den yta som visas i ovanstående figur. Det går att dra rektangeln och ändra storlek på den, även efter det att du ritat den. Den ska gå från övre till nedre kanten av fönstret och rama in glaspiporna. Dubbelklicka i rutan, för att bekräfta markeringen. Då beskärs bilden och förminskas till den valda storleken. Dubbelklicka sedan på förstoringsglaset (Zoomverktyg ) i verktygspaletten, för att visa bilden i 100% storlek i fönstret. Öppna även filen logo.jpg i ditt bildredigeringsprogram. Kopiera hela bilden och klistra in den i din bild med piporna. Markera allt (Redigera->Markera allt) och kopiera (Redigera->Kopiera). Gå över till fönstret med bilden med piporna och klistra in (Redigera->Klistra in). Bilden med logon hamnar då i ett lager ovanför den andra bilden. Välj förflyttningsverktyget (Flyttningsverktyg ) och dra bilden till önskad plats (c:a en halv centimeter från vänster- och överkanten). Ta bort den gröna färgen i logon. Välj markeringsverktyget (Trollspö ). Skriv in 60 i rutan för Tolerans i den övre delen av programmets fönster. Se också till att Anti-alias är valt och att Angränsande inte är valt. Det sista valet gör att det inte bara är angränsande pixlar som väljs, utan alla pixlar med den färg som du sedan klickar på. Klicka någonstans i den gröna ytan i bilden, för att markera ytan och alla andra pixlar med samma färg. Därefter väljer du Redigera->Klipp ut (eller trycker på backstegstangenten), för att ta bort markerad del. Välj sedan Redigera->Avmarkera allt, för att ta bort markeringen. Om du använder ett bildredigeringsprogram som inte har olika lager, så behöver du ta bort den gröna färgen innan du flyttar över logon till bilden med piporna. Du kan då i bilden med logon markera den gröna färgen. Sedan väljer du att invertera markeringen, så att logons text markeras. Kopiera därefter logon och klistra in den i bilden med piporna. Spara bilden för användning på webben Bilden ska nu sparas i jpeg-format. Detta är ett format som komprimerar bilden och man får då välja kvalitét. Komprimerar man mycket, så blir filstorleken liten, men kvalitén på bilden blir kanske dålig. Vill man ha mycket hög kvalitét, så blir kanske filen istället onödigt stor. Så man får kompromissa. Välj Arkiv->Spara... I fönstret som du då får ser till att formatet är JPEG och väljer kvalitet 50. Använd bilden i CSS- mallen Klicka sedan på OK och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Pixlr-format, för att kanske sedan redigera den vidare, så väljer du kommandot Arkiv->Spara... och formatet PXD. Slutligen ska du se till att bilden importeras som bakgrund till navigeringskolumnen. Öppna filen style.css i din editor för HTML och CSS Rune Körnefors 2

3 I stilen för #nav lägger du till följande: #nav {... background-image:url(pics/navbar.jpg); background-repeat:no-repeat;} o Bilden används då som bakgrundsbild. Den ska inte repeteras, utan endast tas med en gång. o Punkterna markerar här de inställningar som redan står i stilen. Dessa låter du vara kvar som de är. Öppna filen index.htm i webbläsaren och studera resultatet. o Har du tillräckligt stort fönster i din webbläsare (mer än 600 pixlar högt), så ser du att den grå bakgrundsfärgen som finns med i stilen för #nav kommer under bilden, för att fylla ut hela fönstrets höjd. Denna grå nyans är dock lite för ljus, så du ska nu byta till samma grå färg som finns längst ner i bilden. Gå över till ditt bildredigeringsprogram och ifall du hade stängt bildfönstret, öppnar du din bild igen. Ta reda på färgkoden för den grå nyansen längst ner. Välj färgpipetten (Färgväljarverktyg ) och klicka i den grå ytan längst ner i bilden. Färgen som du klickar på kommer då in i verktygspalettens färgruta. Klicka på denna färgruta, så får du ett fönster för färginställning. I högra halvan i det fönstret finns det en ruta där färgkoden står i fältet markerat med # (t.ex. 3c3a34). Kopiera detta värde och klicka sedan på Avbryt för att stänga fönstret igen. Gå över till CSS-filen i editorn igen och byt bakgrundsfärg för #nav: #nav {... background-color:#3c3a34;...} o Klistra alltså in den kod som du hade kopierat. Studera resultatet i webbläsaren. o Nu blir färgutfyllnaden bättre. Du kanske också noterat att navigeringslänkarna hamnar ovanför logon. Det ska nu justeras. Lägg till följande kod i stilen för #nav ul: #nav ul {... margin-top:150px;} o Detta ger listan med navigeringslänkarna en övre marginal på 150 pixlar. Eventuellt får du justera värdet, beroende på var du placerade logon i din bild. Studera resultatet i webbläsaren. 3. Gradient bakgrundsfärg för sidans innehåll Du ska nu skapa en bakgrund som gradvis övergår från vitt till samma orange färg som du har i glasugnen på föregående bild. Vi kommer här att titta på två alternativ för detta. Det första alternativet är att använda en bakgrundsbild och det andra alternativet är att använda gradient CSS-stil. Bakgrundsbild Bilden ska göras som en smal remsa (1000 pixlar bred och 20 pixlar hög) som ska upprepas på webbsidan. Bilden ska bli som nedanstående bild (visas här förminskad) Rune Körnefors 3

4 Skapa ett nytt bilddokument Skapa ett nytt dokument som är 1000x20 pixlar i ditt bildredigeringsprogram. Välj Arkiv->Ny bild... I fönstret som då dyker upp väljer du storleken 1000 och 20 för bredd respektive höjd.. Klicka därefter på OK, så får du en ny tom bild. Fyll med ett gradient mönster Du ska nu göra en gradient övergång från en vit färg i vänsterkanten till en orange färg i högerkanten. Den orange färgen sätter vi till koden FFAA00 (som ungefär är färgen för en av de ljusa nyanserna i glasugnen). Välj verktyget för gradient färg (Gradientverktyg ). I programfönstrets överkant visas inställningar för verktyget. Klicka på färgrutan för Gradient. Du får då en ruta med ett antal mönster. I den övre delen finns två "pilar". I den första är det vit färg och den andra svart färg. Klicka på den högra pilen, så kommer dess färg ner i rutan för Färg. Klicka i färgrutan. Skriv in koden FFAA00 i rutan markerad med #. Klicka sedan på OK. Klicka utanför rutan med alla mönster, så att den döljs. Peka i bildens mitt och tryck ned musknappen. Dra sedan åt höger till högerkanten och släpp upp musknappen. Bilden fylls då med ett gradient mönster. Spara bilden för användning på webben Bilden ska nu sparas i jpeg-format. Välj Arkiv->Spara... Välj formatet JPEG och kvalitet 80. Klicka sedan på OK och spara bilden med namnet bg.jpg i mappen pics. Använd bilden i CSS- mallen Nu ska du använda bilden som en bakgrundsbild på webbsidorna. Öppna filen style.css i din editor. Längst ner i filen lägger du till följande: #main {background-image:url(pics/bg.jpg); background-repeat:repeat-y;} o o Det finns visserligen redan en stil för #main i filen, men det går bra att lägga till en ny. Båda kommer att användas tillsammans av webbläsaren (CSS är ju en kaskad av stilar). Bilden tas in som en bakgrundsbild och upprepas i y-led så att hela ytans höjd fylls Rune Körnefors 4

5 Öppna filen index.htm i webbläsaren och studera resultatet. o Om du har ett brett fönster i din webbläsare (bredare än 1200 pixlar), så ser du att det är ett vitt utrymme till höger om den gradienta bakgrunden. Det beror på att bakgrundsfärgen för body är satt till vit färg i CSS-filen. Du ska nu lägga till en gul bakgrundsfärg för #main. Lägg till följande i din nya stil för #main i CSS-filen: #main {background-image:url(pics/bg.jpg); background-repeat:repeat-y; background-color:#ffaa00;} o Färgen sätts till den färg som den gradvisa övergången slutar med. Studera resultatet i webbläsaren. Gradient bakgrundsfärg i CSS Vi ska nu se på ett alternativt sätt att få en gradient bakgrund, genom att använda inställningar i CSS. Detta ingår i CSS3, men är ännu inte standardiserat och implementerat på samma sätt i webbläsarna. Så därför får man använda många olika koder, för att det ska fungera i alla (vanliga) webbläsare. Vi ska här utgå från ett exempel som finns på följande url: Kod i CSS- filen Skriv in följande kod för #main i CSS-filen: #main {/*background-image:url(pics/bg.jpg); background-repeat:repeat-y; background-color:#ffaa00;*/ /* Gradient background, as described at */ background:-moz-linear-gradient(left,#fff,#f80); /* FF 3.6+ */ background:-ms-linear-gradient(left,#fff,#f80); /* IE10 */ background:-webkit-gradient(linear,left,right, color-stop(0%,#fff),color-stop(100%,#f80)); /* Safari 4+, Chrome 2+ */ background:-webkit-linear-gradient(left,#fff,#f80); /* Safari 5.1+, Chrome 10+ */ background:-o-linear-gradient(left,#fff,#f80); /* Opera */ filter: progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr='#ffffff',endcolorstr='#ff8800'); /* IE6 & IE7 */ -ms-filter: "progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr='#ffffff',endcolorstr='#ff8800')"; /* IE8+ */ background:linear-gradient(left,#fff,#f80);} o Omge den gamla koden med /* och */. Då kommenterar vi bort den, men den finns ändå kvar, ifall vi vill återgå till den. o Den nya koden börjar med en kommentar där vi hänvisar till källan. Det är för att visa att det inte är vi som skapat koden, utan att vi utgått från en annan kod. Det är också för att visa hänsyn till den som skapat den ursprungliga koden. o Sedan följer ett antal alternativa koder för att skapa en gradient färg från vit till orange färg. Det är den sista koden som är den som är föreslagen som korrekt kod i CSS3. Studera resultatet i webbläsaren Rune Körnefors 5

6 Jämförelse av de båda sätten Vi har nu sett två olika sätt att skapa en liknande effekt. Men det finns en del skillnader. Gradient bakgrund med bild: o Det kräver att vi skapar en bild och att webbläsaren måste läsa in bilden. Det blir ytterligare en fil att läsa in, vilket kan vara en nackdel i mobila enheter med långsam nätanslutning. o Vi är friare i hur den gradienta övergången ska ske. I detta exempel börjar vi med en helvit bakgrund, som i mitten av sidan övergår till en orange bakgrund. Gradient bakgrund med CSS: o Vi slipper någon extra fil som ska läsas in. o Den gradienta övergången sker i hela det block där den finns, så vi kan inte bestämma var i blocket den ska ske. 4. Bilden med glasformning på startsidan Nu ska du skapa en bild som ska användas som illustration på startsidan. Du ska utgå från bilden formning.jpg och ta bort bakgrunden i den, förminska den och spara den i png-format med en transparant (genomskinlig) bakgrund. Bilden ska bli som vidstående bild (visas här förminskad). Beskär och förminska bilden Öppna bilden formning.jpg i ditt bildredigeringsprogram. Beskär bilden, så att du endast får med handen och verktygen. Förminska sedan bilden så att den blir 500 pixlar bred. o På webbsidan ska den vara ännu mindre, men den sista förminskningen gör vi i webbläsaren. Detta ska vara en bild med en transparant bakgrund och då kan den bli lite hackig i kanterna. För att minimera denna effekt, förminskar vi den lite även då vi tar in den i webbläsaren. Om det inte är en transparant bild, så är det bättre att förminska den till önskad storlek i bildredigeringsprogrammet. Då får vi dels en bättre kvalitet och dels en o Gör bilden ljusare mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund. Pixlr: Dessa moment har du utfört tidigare för de andra bilderna i övningarna, så här ges endast korta förklaringar. Använd verktyget för att beskära (Beskärningsverktyg ), för att skära ut den del som du ska ha. Sätt storleken till 500 både för höjd och bredd. Klicka i bilden och dra en markering, så att du endast får med handen och verktyget. Dubbelklicka sedan i rutan, för att utföra beskärningen. Förstora bilden med förstoringsglaset (Zoomverktyg ), så att du ser bilden i 100%. Eventuellt förstorar du även fönstret, så att du ser hela bilden. Bilden är ganska mörk, så gör den nu ljusare. Välj Justeringar->Ljushet & Kontrast... I fönstret som dyker upp drar du i reglagen för att ändra ljushet och kontrast. Gör bilden ljusare, ungefär +15. Kontrasten kan du dra ner något, ungefär -5. Klicka sedan på OK Rune Körnefors 6

7 Ta bort bildens bakgrund Du ska nu sudda ut bakgrunden i bilden, så att endast handen och verktygen återstår. o Det kan vara ganska pilligt och tidskrävande arbete med att ta bort bakgrunden. Då du tar bort bakgrunden i bilden får du en vit bakgrund, som sedan ska göras genomskinlig så att webbsidans bakgrund lyser igen. Det är viktigt att vara noggrann då du tar bort bakgrunden, annars kan det sedan se hackigt ut då bilden tas in på webbsidan. Då du förstått nedanstående princip för hur man gör, så kan du istället öppna filen formning_avmaskad.jpg och utgå från den, för att spara tid i övningen. Välj radergummit (Suddningsverktyg ). Det är kanske för stort, så i fönstrets överkant klickar du på siffran med en pil under. Du får då en ruta, där du kan välja en annan storlek, t.ex. 15. Sudda sedan i bilden de delar som ligger runtom handen och verktyget. Gör en mjuk övergång från bakgrunden till bilden Utgå nu antingen från din egen avmaskade bild eller bilden i filen formning_avmaskad.jpg. Bilden ska nu få en transparent (genomskinlig) bakgrund och samtidigt en mjuk övergång. Detta kräver lite tricks. Börja med att skapa ett lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ett nytt lager med Lager->Nytt lager. I lagerpaletten dubbelklickar du på hänglåset till höger i bakgrundslagret, för att låsa upp det. Dra sedan lagret uppåt, så att det hamnar ovanför det nya lagret. Välj markeringsverktyget (Trollspö ). o I den övre delen av programmets fönster kontrollerar du inställningar för verktyget och ser till att Tolerance är 30 och både Anti-alias och Angränsande är valt. o Det sista alternativet gör att det endast är sammanhängande pixlar som väljs och inte alla med samma färg som du sedan klickar på. Klicka i den vita delen av bilden och välj Redigera->Klipp ut (eller tryck på backstegstangenten), för att ta bort den markerade delen. o Upprepa det, så att båda de vita ytorna tas bort Rune Körnefors 7

8 Nu ska du skapa en mjuk övergång till handen och verktyget. Spara bilden för användning på webben Välj markeringsverktyget ( ) i verktygspaletten. I fönstrets övre kant klickar du på den elliptiska markeringen. I rutan för Feather skriver du in 20. Peka i bildens övre vänstra hörn, tryck ned musknappen och dra ner till det undre högra hörnet, så att hela bilden markeras med en cirkel. Välj Redigera->Invertera markeringen, för att ändra så att det är ytan utanför cirkeln som är markerad. Välj Redigera->Klipp ut (eller tryck ned backstegstangenten) för att ta bort den markerade ytan. Välj sedan Redigera->Avmarkera allt. Du har nu fått en mjukare övergång till handen och glaspipan. Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj Arkiv->Spara... Välj formatet PNG och klicka på OK. Spara sedan bilden med namnet formning.png i mappen pics. Se hur bilden blir på webben I HTML-filen index.htm finns det redan en img-tagg som tar in bilden på webbsidan, så du behöver nu endast titta på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Förminska bilen Bilden ska nu också förminskas i webbläsaren. Öppna filen index.htm i din editor. Skriv in ett width-attribut i img-taggen: <img src="pics/formning.png"... width="350"> Studera resultatet i webbläsaren. 5. Bilden med kartan Du ska nu redigera bilden med Europakartan. Antalet färger i denna ska reduceras till endast två. Färgen för haven ska göras transparent och färgen för landområdena ska väljas till en orange/brun färg som passar till övriga färger i bilderna. Bilden ska bli som vidstående bild (visas här förminskad). Öppna bildfilen Öppna filen europe.png i ditt bildredigeringsprogram. Gör haven transparenta Gör på samma sätt som i föregående övning, dvs skapa ett nytt tomt lager och lägg det underst. Ta sedan bort det som ska vara genomskinligt i kartan. Skapa lagret med Lager->Nytt lager. Dubbelklicka på hänglåset i bakgrundslagret (med kartan), för att låsa upp det. Dra lagret med kartan uppåt, så att det ligger överst Rune Körnefors 8

9 Välj markeringsverktyget (Trollspö ). Klicka bort markeringen av Angränsade i den övre delen av programmets fönster. Då blir det inte bara pixlar som angränsar till varandra som markeras, utan alla pixlar i bilden med den färg som du klickar på. Klicka i den gröna ytan på kartan, för att markera alla gröna pixlar. Välj Redigera->Invertera markeringen, för att istället markera allt utom de gröna pixlarna. Ta bort markerade pixlar genom att välja Redigera->Klipp ut (eller tryck ned backstegstangenten). Ta inte bort markeringen. Den behövs i nästa steg, så låt den vara kvar. Byt ut den gröna färgen i kartan Nu ska du byta kartans färg till en mörkbrun färg. Välj Redigera->Invertera markeringen, för att växla om till den gröna ytan igen. Klicka i den stora färgade (eller svarta) rutan längst ner i verktygspaletten. Välj en mörkbrun färg. Observera att du måste dra i de runda prickarna både i den omgivande cirkeln och den inre romben, för att välja färg. Klicka på OK, då du hittat den färg du vill ha. Välj penseln (Målarpenselverktyg ) i verktygspaletten. Peka på bilden och tryck ned musknappen. Håll den nedtryckt och måla över hela kartan. Det är endast den markerade delen som målas, dvs den del som var grön. Välj Redigera->Avmarkera allt, för att ta bort markeringen. Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj Arkiv->Spara... Välj formatet PNG och klicka på OK. Spara sedan bilden med namnet europe.png i mappen pics. Se hur bilden blir på webben I HTML-filen about.htm finns det redan en img-tagg som tar in bilden på webbsidan, så du behöver nu endast titta på resultatet. Öppna filen about.htm i webbläsaren och studera resultatet Rune Körnefors 9

10 6. Bilden med formning av glasfot Medieteknik I denna övning ska du skapa bilden som visar hur två glasbruksarbetare sätter på en glasfot på ett vinglas. Detaljen med glasfoten ska kopieras och läggas in som en förstoring på bilden. Sedan ska du spara hela bilden som en miniatyr, som ska användas i länken på webbsidan. Bilden ska bli som nedanstående bild (visas här förminskad). Kopiera delen som ska vara förstorad Öppna filen glasfot.jpg i ditt bildredigeringsprogram. Innan du förminskar bilden, ska du kopiera den del som ska vara förstorad. Välj markeringsverktyget ( ) i verktygspaletten. I fönstrets övre del väljer du ellipsen och Constraint till Aspect ratio. Förminska bilden Då kommer markeringen att bli en cirkel. Dra en cirkel runt den del som glasarbetarna arbetar med. Peka vid krysset mellan den vänstra mannens hand och pipan han håller i och dra nedåt tills du ramat in glasfoten. Hamnar inte cirkeln rätt, så kan du peka i den och dra den till önskad plats. Kopiera den markerade delen med Redigera->Kopiera. Denna del ska sedan klistras in efter det att hela bilden förminskats. Förminska hela bilden till 600x450 pixlar. Välj Bild->Bildstorlek... I fönstret som dyker upp skriver du in 600 i den övre rutan för Bredd (450 fylls då i automatiskt i rutan för Höjd, om Behåll proportionerna är markerad). Klicka sedan på OK. Förstora bilden till 100% med förstoringsglaset (Zoomverktyget ) och, om det behövs, förstora fönstret så att hela bilden syns Rune Körnefors 10

11 Klistra in den kopierade delen Nu ska du klistra in den del som du tidigare kopierade och anpassa dess storlek och placering. Välj Redigera->Klistra in. Delen med glasfoten kommer in i ett nytt lager. Ändra storlek. Välj Redigera->Free transform. Ta tag i ett av hörnen och dra inåt så att bilden förminskas. Håll ner shift-tangenten, så behålls proportionerna. Peka och dra mitt i rutan för att flytta bilden till önskad plats. Då du förminskat och placerat bilden så som visas i den färdiga bilden ovan (fast skuggan visas inte ännu), så klickar du utanför den markerade ytan. Svara Yes i den dialogruta som kommer upp, för att bekräfta den transformering du gjort. Lägg på en skugga på bilden Du ska nu lägga på en "glödande skugga" på bilden i cirkeln. Lagret med cirkeln är markerat i Lagerpanelen (längst till höger i fönstret). I underkanten av panelen finns det några små knappar. Klicka på den tredje av dessa (Layer styles ). Då dyker det upp ett fönster med några val. Välj Outer glow, så får du också några reglage. Om reglagen inte dyker upp, får du kanske klicka en gång till på Outer glow. Klicka inte bara i rutan, utan på texten. Klicka på färgrutan och välj vit färg. Dra sedan i reglagen, så att storleken blir c:a 30 och opaciteten c:a 60. Klicka sedan på OK. Du har nu fått en "skugga" på den förstorade delen av glasfoten. Spara bilden för användning på webben Bilden ska nu sparas i formatet jpeg. Välj Arkiv->Spara... Välj formatet JPEG och dra ner reglaget för kvalitet till 50. Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsätta och redigera bilden senare, spara du även bilden i PXDformat med Arkiv->Spara... Spara en miniatyrbild för länken Du ska nu förminska bilden till en miniatyrbild som du kan ha i länken på webbsidan. Välj Bild->Bildstorlek... Skriv in 100 i rutan för Bredd och klicka på OK. Välj Arkiv->Spara... Välj formatet JPEG och kvalitet 30. Spara bilden med namnet glasfot_liten.jpg i mappen pics Rune Körnefors 11

12 Se hur bilden blir på webben I HTML-filen index.htm finns det redan HTML-kod för bilden, så du behöver nu endast titta på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Klicka på länken med den lilla bilden. Slut Experimentera nu med att på egen hand förändra bilderna Rune Körnefors 12

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Grundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14

Grundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14 Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så

Läs mer

En grund i bildbearbetning för webben i Photoshop Elements 11

En grund i bildbearbetning för webben i Photoshop Elements 11 En grund i bildbearbetning för webben i Photoshop Elements 11 Mappstrukturering... 2 Arbetsflöde bildbearbetning för webb Beskär... 3 Storleksförändra bild... 4 Skärpa... 5 Spara för webb... 6 Från logga

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Att skapa en bakgrundsbild och använda den i HIPP

Att skapa en bakgrundsbild och använda den i HIPP Att skapa en bakgrundsbild och använda den i HIPP Bakgrundsbilder i HIPP kan användas till olika saker, t ex som ett rutnät för en tabell eller en grundkarta. Här visas hur man gör en grundkarta som en

Läs mer

Mitt hus och jag steg för steg instruktioner

Mitt hus och jag steg för steg instruktioner Mitt hus och jag steg för steg instruktioner Till den här uppgiften behöver du ett foto på dig själv, ditt hus, en karta och en huvudlös figur. Se till att alla bilder ligger på samma ställe på din dator

Läs mer

skapa genvägar till andra sidor (externa och interna)

skapa genvägar till andra sidor (externa och interna) Hotspot skapa genvägar till andra sidor (externa och interna) Du kan låta bilder och/eller text bli knappar för genvägar eller navigering. Genvägarna kan leda till en annan sida i din resurs (intern sida)

Läs mer

Lär dig grunderna i Photoshop Elements 4.0

Lär dig grunderna i Photoshop Elements 4.0 Lär dig grunderna i Photoshop Elements 4.0 Här får du lära dig hur man flyttar bilder från kameran till datorn, hur man fixar till ett foto, hur man skriver ut bilder och mycket mera. Lycka till! copyright

Läs mer

En grund i bildbearbetning för webben i Photoshop CS5

En grund i bildbearbetning för webben i Photoshop CS5 En grund i bildbearbetning för webben i Photoshop CS5 Mappstrukturering... 2 Arbetsflöde bildbearbetning för webb Beskär... 3 Storleksförändra bild... 4 Skärpa... 5 Spara för webb... 6 Från logga i jpg,

Läs mer

Så här använder du de enklaste funktionerna i programmet: Starta programmet. Programmet startas från ikonen på skrivbordet.

Så här använder du de enklaste funktionerna i programmet: Starta programmet. Programmet startas från ikonen på skrivbordet. PhotoFiltre 1 Innehåll Starta programmet... 3 Rotera bilden... 4 Beskära bilden... 4 Ljusa upp en bild... 5 Förminska bilden... 6 Skärpa i bilden... 7 Spara och komprimera bilden... 7 Ta bort röda ögon...

Läs mer

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

Läs mer

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering övningar/uppgi9er Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna

Läs mer

DK-serien. Enklare bildredigering med Irfanview

DK-serien. Enklare bildredigering med Irfanview DK-serien Enklare bildredigering med Irfanview 1 Enklare bildredigering med Irfanview Irfanview är ett gratis bildredigeringsprogram med svenska menyer. Den här kursen är en ren nybörjarkurs och kräver

Läs mer

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 PIXLRGUIDEN av AlizonWeb Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 Innehåll Introduktion 3 Vad är Pixlr? 3 Fördelar med Pixlr 3 Om denna guide 3 Kapitel 1: Genomgång av arbetsyta

Läs mer

Grundredigering i Photoshop Elements

Grundredigering i Photoshop Elements Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så

Läs mer

Guide till att använda Audacity för uttalsövningar

Guide till att använda Audacity för uttalsövningar Guide till att använda Audacity för uttalsövningar Victoria Johansson Humlabbet, SOL-center, Lund IT-pedagog@sol.lu.se 28 mars 2006 1 Inledning Audacity är ett program som kan användas för att spela in

Läs mer

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen.

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen. Fiskar Arbetsbeskrivning knappmeny (Mediator 8) I detta exempel kommer du att lära dig Att göra en mastersida med knappar Att använda en mastersida på andra sidor Att använd funktionen Alignment Arbetsgång

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8)

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) I detta exempel kommer du att lära dig Att skapa en ny presentation från början Att skapa en enkel knapp Att använda händelseinställningar, events

Läs mer

Verktygsfält. Hantering av webbkarta Grundinstruktion. Sida 1 av 6. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet.

Verktygsfält. Hantering av webbkarta Grundinstruktion. Sida 1 av 6. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet. Flytta i sidled Zooma in Zooma ut Panorera Hela utbredningen Tillbaka Framåt Förstoring av kartdel Kartskikt Förstora/ förminska

Läs mer

10 olika ramar. Originalbilden (600 x 390px) Metod 1 - Enkel ram Det finns olika sätt att göra en enkel ram, se även metod 3.

10 olika ramar. Originalbilden (600 x 390px) Metod 1 - Enkel ram Det finns olika sätt att göra en enkel ram, se även metod 3. 10 olika ramar Originalbilden (600 x 390px) Metod 1 - Enkel ram Det finns olika sätt att göra en enkel ram, se även metod 3. 1. Skapa ett nytt lager och fyll detta med vitt. 2. Välj svart som förgrundsfärg

Läs mer

Du hittar manualen på.

Du hittar manualen på. Du hittar manualen på http://www.buf.kristianstad.se/it/pse/index.htm Innehåll Start s 3 Verktyg s 4 Beskär s 5 Bildpaket s 6 Bakgrundbild s 7 Flyta ut s 8 Infoga bild i Word s 9 Justera färger s 11 Ludda

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

PIM Examination 5. Inspirationsmaterial för pedagoger. Bildredigering i webbtjänsten pixlr.com

PIM Examination 5. Inspirationsmaterial för pedagoger. Bildredigering i webbtjänsten pixlr.com PIM Examination 5 Inspirationsmaterial för pedagoger Bildredigering i webbtjänsten pixlr.com Innehållsförteckning Inledning... 3 Planering LPP... 4 Presentationsfilm - Startnyckel... 5 Från kamera till

Läs mer

INSPIRA. Microsoft. PowerPoint Grunder

INSPIRA. Microsoft. PowerPoint Grunder INSPIRA Microsoft PowerPoint Grunder Del. ClipArt och bilder 78 6. Diagram 87 7. Organisationsschema 98 8. Tabeller 0 9. Bildspel 0. Praktiska övningar 6 CLIPART OCH BILDER CLIPART OCH BILDER Infoga ClipArt

Läs mer

Labora&on 7 Färger och bilder för webben övningar i Photoshop

Labora&on 7 Färger och bilder för webben övningar i Photoshop Labora&on 7 Färger och bilder för webben övningar i Photoshop 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA

Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA Pensionärsföreningens webbplats GUIDE FÖR NYA WEBBANSVARIGA 1- Adress till webbplatsen Alla föreningar har tillgång till en webbplats (webbsajt) gratis via förbundet Webbplatsen är en undersida till www.spfpension.fi,

Läs mer

Lathund Hemsida för Astma- och Allergiförbundets föreningar

Lathund Hemsida för Astma- och Allergiförbundets föreningar 1/17 Lathund Hemsida för Astma- och Allergiförbundets föreningar Webbplatsen är byggd i WordPress 3.8.1. Den är byggd för att på ett enkelt sätt ska kunna skapa nya föreningshemsidor och innehåller: Inloggning

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9

Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9 Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9 Infoga, redigera och ta bort bilder på sunne.se En webbsida bäddar inte in en bild i sidan som många andra program, till exempel Word. Alla bilder och

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

Storleksförändra figurer och bildobjekt - Word 2007 / 2010

Storleksförändra figurer och bildobjekt - Word 2007 / 2010 Word (Textruta Figursättning, storleksförändra, beskära, Linjal, Sidhuvud/fot) 1:5 En textruta är en ram som kan innehålla text, bild, tabell etc. och kan precis som bilder, figursättas. Textrutan använder

Läs mer

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord

Skapa innehåll. Logga in och administrera hemsidan. Inloggningslänk: www.alvsbyn.se/wp-admin. Byta lösenord Sidan 1 av 9 Logga in och administrera hemsidan Inloggningslänk: www.alvsbyn.se/wp-admin Byta lösenord 2. Klicka på Profil 3. Längst nere hittar du två fält: Nytt lösenord och Bekräfta nytt lösenord. Fyll

Läs mer

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

Läs mer

Laboration1 Vektorgrafik med Illustrator Innehåll: Filter Text Objekt Knappar Kurvor Ritverktyget Formverktyget Symboler Övertoning Effekt Lager

Laboration1 Vektorgrafik med Illustrator Innehåll: Filter Text Objekt Knappar Kurvor Ritverktyget Formverktyget Symboler Övertoning Effekt Lager Laboration1 Vektorgrafik med Illustrator Innehåll: Filter Text Objekt Knappar Kurvor Ritverktyget Formverktyget Symboler Övertoning Effekt Lager Uppgift 1 Designa en webbknapp Rita en form Håll ned musen

Läs mer

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E.

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. Word Grunderna 1 Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. A Starta programmet Word. Titta på skärmen efter en bild som det finns ett W på. Tryck med musknappen snabbt två gånger

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

Skapa, öppna och ladda ned bilder

Skapa, öppna och ladda ned bilder Skapa, öppna och ladda ned bilder Skapa en bild 1. Välj Arkiv - Nytt 2. Ge bilden ett namn i rutan Namn 3. Skriv vilken bredd och höjd i rutan Bredd och Höjd 4. Ange upplösning (pixlar/tum = dpi) 5. Klicka

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Skapa mappar, spara och hämta dokument

Skapa mappar, spara och hämta dokument Skapa mappar, spara och hämta dokument Övningen görs på hårddisken i mappen Mina dokument 1a Starta programmet utforskaren 1 b Huvudgrupper i utforskaren 1c Expandera huvudgrupper, enheter och mappar Skapa

Läs mer

Kom igång med. Windows 8. www.datautb.se DATAUTB MORIN AB

Kom igång med. Windows 8. www.datautb.se DATAUTB MORIN AB Kom igång med Windows 8 www.datautb.se DATAUTB MORIN AB Innehållsförteckning Grunderna i Windows.... 1 Miljön i Windows 8... 2 Startskärmen... 2 Zooma... 2 Snabbknappar... 3 Sök... 4 Dela... 4 Start...

Läs mer

Collage: Flygande brunnslock

Collage: Flygande brunnslock 1/6 Collage: Flygande brunnslock To kända surreallister som levde under 1900-talet är Salvador Dali och Rene Magritte. Nu har du chansen att ta upp konkurrensen. Med lagerhantering i Paint Shop Pro är

Läs mer

Börja med att samla alla bilder som du vill använda till din film i en mapp under Mina dokument.

Börja med att samla alla bilder som du vill använda till din film i en mapp under Mina dokument. Workshop Photo Story Börja med att samla alla bilder som du vill använda till din film i en mapp under Mina dokument. Tänk på att du bara får använda bilder som är OK ur upphovsrättsligt hänseende. Översikt

Läs mer

Photo Story. Sara Eriksson IKT A, HT 2007

Photo Story. Sara Eriksson IKT A, HT 2007 Photo Story Mitt tips: Om du inte ser bilderna i manualen backa ett steg och spar filen. Öppna sedan den sparade filen. Då ser du bilderna. Med Photo Story kan du skapa bildberättelser, genom att sätta

Läs mer

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor

Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Börja med att logga in på hemsidan Adress: http://www.edu.falkenberg.se/gymnasieskolan Klicka på nyckeln. Skriv i användarnamn och lösenord,

Läs mer

Användarmanual WebNailer. 19 januari 2004

Användarmanual WebNailer. 19 januari 2004 Användarmanual WebNailer Tobias Holgers Mattias Castegren 19 januari 2004 1 Innehåll 1 Inledning 3 1.1 Definitionerochförkortningar... 3 2 WebNailer 4 2.1 Knapprad... 4 2.1.1 Gemensamma... 4 2.1.1.1 Webbläsare...

Läs mer

DIGITALA RESURSER MANUAL FÖR. Arbeta med video i imovie

DIGITALA RESURSER MANUAL FÖR. Arbeta med video i imovie DIGITALA RESURSER MANUAL FÖR Arbeta med video i imovie 1 Introduktion Följande guide beskriver hur man går tillväga för att hämta in, redigera och färdigställa video med imovie. 1.1 Förutsättningar imovie

Läs mer

APPEN FOTO. Windows 10 Anniversary. Behandlade Ord

APPEN FOTO. Windows 10 Anniversary. Behandlade Ord APPEN FOTO Windows 10 Anniversary Behandlade Ord Appen Foto Windows 10 Anniversary 2017 Behandlade Ord Behandlade Ord Göran Johansson Stabbegatan 73 416 80 GÖTEBORG Internet info@behandladeord.se www.behandladeord.se

Läs mer

Photoscape (http://photoscape.sv.softonic.com/download)

Photoscape (http://photoscape.sv.softonic.com/download) Photoscape (http://photoscape.sv.softonic.com/download)..har ett antal trevliga funktioner som dessutom är lätta att använda. Det är lite annorlunda uppbyggt en andra program men jag tycker att man ganska

Läs mer

Adobe Photoshop CS. Ritprogrammet Photoshop är ett pixelbaserat ritprogram. I botten på bilderna Photoshop åsadkommer finns ett rutmönster av pixels.

Adobe Photoshop CS. Ritprogrammet Photoshop är ett pixelbaserat ritprogram. I botten på bilderna Photoshop åsadkommer finns ett rutmönster av pixels. Adobe Photoshop CS Ritprogrammet Photoshop är ett pixelbaserat ritprogram. I botten på bilderna Photoshop åsadkommer finns ett rutmönster av pixels. Vad är det du ser när du öppnar Photoshop Nedan ser

Läs mer

Exempel på hur man kan bygga enkla former i Illustrator

Exempel på hur man kan bygga enkla former i Illustrator Exempel på hur man kan bygga enkla former i Illustrator Öppna ett nytt dokument (ctrl-n), storleken spelar ingen större roll eftersom innehållet är vektorbaserat kan det alltid skalas om senare. Välj Pennverktyget

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

Läs mer

Bilder till bildspel på TV med Lightroom. Förberedelser

Bilder till bildspel på TV med Lightroom. Förberedelser Bilder till bildspel på TV med Lightroom En beskrivning av ett arbetsflöde i Lightroom för att anpassa bilder till ett bildspel som skall visas på en TVskärm i full HD 1920x1080 pixlar. HD formatet 1920x1080

Läs mer

1.1 Verktygslådan översikt

1.1 Verktygslådan översikt 1.1 Verktygslådan översikt Markeringsramverktygen markerar rektanglar, ellipser samt enstaka rader eller kolumner. Flytta-verktyget flyttar markeringar, lager och stödlinjer. Lassoverktygen skapar frihandsmarkeringar,

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

bilder för användning

bilder för användning Grundläggande guide i efterbehandling av bilder för användning på webben Innehåll Innehåll...2 Inledning...3 Beskärning...4 Att beskära en kvadratisk bild...5 Att beskära med bibehållna proportioner...5

Läs mer

Instruktion. För att använda banläggarstödet i OCAD 8 version 8.13. För innehållet svarar Karl Bergstrand 0503-101 14 kb@hbok.se

Instruktion. För att använda banläggarstödet i OCAD 8 version 8.13. För innehållet svarar Karl Bergstrand 0503-101 14 kb@hbok.se Instruktion För att använda banläggarstödet i OCAD 8 version 8.13 För innehållet svarar Karl Bergstrand 0503-101 14 kb@hbok.se Instruktion för banläggarstöd i OCAD 8 Öppna OCAD 8 Välj Arkiv, Nytt. Välj

Läs mer

Användarutbildning i SiteVision

Användarutbildning i SiteVision Användarutbildning i SiteVision Innehållsförteckning 1 Komma igång med SiteVision 2 1.1 Starta SiteVision 2 1.2 Redigeringsläget i SiteVision 3 1.2.1 Verktygsfält 3 1.2.2 Modulväljare 4 1.2.3 Navigator

Läs mer

J A G T Ä N K E R, D Ä R F Ö R Ä T E R J A G.

J A G T Ä N K E R, D Ä R F Ö R Ä T E R J A G. bistro JAG TÄNKER, DÄRFÖR ÄTER JAG. Stockholm Örebro Gävle Uppsala Norrköping InDesign CS4 innehåller en mängd genomskinlighetsfunktioner som främjar din fantasi och kreativitet. InDesign CS4 ger dig kontroll

Läs mer

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

Läs mer

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer,

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, affischer, nyhetsbrev eller flersidiga publikationer som en

Läs mer

IT-körkort för språklärare. Modul 7. Bildbehandling

IT-körkort för språklärare. Modul 7. Bildbehandling IT-körkort för språklärare Modul 7 Bildbehandling Brian Kottonya 2012 Innehåll 1. Vad är Splashup? 2. Skapa ett konto 3. Verktyg 4. Öppna en bild 5. Spara en bild 6. Ändra storlek på en bild 7. Lägga till

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

Läs mer

Arbeta med bilder på bloggen Sida 1 av 7

Arbeta med bilder på bloggen Sida 1 av 7 Arbeta med bilder på bloggen Sida 1 av 7 Infoga, redigera och ta bort bilder på bloggen En webbsida bäddar inte in en bild i sidan som många andra program, till exempel Word. Alla bilder och bildobjekt

Läs mer

Användarutbildning i SiteVision

Användarutbildning i SiteVision Användarutbildning i SiteVision SiteVision AB Version 3 Innehållsförteckning 1 Komma igång med SiteVision...1 1.1 Starta SiteVision... 1 1.2 Redigeringsläget i SiteVision... 2 1.2.1 Verktygslisten...2

Läs mer

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1 SCRIBUS grund Guide och uppgifter ITlyftet Gunnar Markinhuhta Sida 1 Scribus grund del 1 Text och textramar Inställningar: 1. Gå till Fil/Inställningar 2. Välj Dokument 3. Ändra enheter till millimeter.

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

DIGITALA RESURSER MANUAL FÖR

DIGITALA RESURSER MANUAL FÖR DIGITALA RESURSER MANUAL FÖR Skapa presentationer med Prezi 1 Introduktion Prezi är ett verktyg för att skapa presentationer, precis som Power Point. Skillnaden är att man i Prezi jobbar med en stor arbetsyta,

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik.

Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik. Lite teori bakom symboler och förekomster Centralt i Flash är begreppen grafik, symboler och förekomster. Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik. Symboler kan

Läs mer

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

Läs mer

Användarutbildning i SiteVision

Användarutbildning i SiteVision Användarutbildning i SiteVision Senselogic AB Version 2.4 Innehållsförteckning 1 Komma igång med SiteVision...1 1.1 Starta SiteVision... 1 1.2 Redigeringsläget i SiteVision... 2 1.2.1 Verktygsfält...2

Läs mer

Gå till nästa bygge. Ibland vill man hoppa till nästa bild i presentationen utan att behöva gå igenom alla byggen på diabilden igen.

Gå till nästa bygge. Ibland vill man hoppa till nästa bild i presentationen utan att behöva gå igenom alla byggen på diabilden igen. KEYNOTE guiden Det här en guide med en sammanställning av de några av de vanligaste funktionerna och snabbkommandon i keynote. Lär du dig dem så går det snabbare och effektivare att både använda och göra

Läs mer

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard.

Snabbguide. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. ITP Whiteboard har 3 nivåer bas, medel och avancerad. Detta gör att det är enkelt att börja jobba med ITP Whiteboard. Verktygsfunktioner i BAS Snabbguide Klicka på det verktyg du vill jobba med. Det verktyg

Läs mer

Interaktiv skrivtavla Lintex ebeam

Interaktiv skrivtavla Lintex ebeam Interaktiv skrivtavla Lintex ebeam Paletten Pennan Kalibrera tavlan Öppna Powerpoint direkt via paletten Öppna Scrapbooken (lektionsplaneraren) Pilen bredvid tangentbordsknappen visar att det finns fler

Läs mer

Dokument i klassens aktivitet

Dokument i klassens aktivitet Dokument i klassens aktivitet I min mall har jag ju tagit bort Aktivitetens dokument, så att eleverna inte har tillgång till dem. Min tanke med detta är att de lärare som arbetar i klassen då får en plats

Läs mer

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm

DynaPahlm är användbart på många olika typer av webbplatser. Denna handbok ger dig tips och vägledning till hur du bäst använder DynaPahlm Användarhandbok (testsite http://www.pahlm.com/dynapahlm/ Förord DynaPahlm är levererat tillsammans med din webbplats från KM-Företagsutveckling. DynaPahlm är ett Content Management System (CMS), fritt

Läs mer

Redigera. Rotera bild

Redigera. Rotera bild Redigera Ofta tar man bilder på höjden, d v s håller kameran vertikalt när man fotograferar. Några digitalkameror känner av detta och lägger bilden rätt, men oftast får man gå in i ett program och rotera

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

Steg 8 OpenOffice Presentation

Steg 8 OpenOffice Presentation Steg 8 OpenOffice Presentation Mac OS X Sept -13 Liljedalsdata.se Liljedalsdata Steg 8 Mac Sida 1 Inledning Förkunskaper Steg 1, 2. Datorns funktion OpenOffice Presentation är ett program som du kan använda

Läs mer

ANVÄNDARBESKRIVNING FÖR PERSONAL

ANVÄNDARBESKRIVNING FÖR PERSONAL ANVÄNDARBESKRIVNING FÖR PERSONAL 1 INLEDNING Programmet ipool är ett system för att på ett effektivt sätt sköta bemanning och personalinformation via ett webbaserat gränssnitt som är enkelt att använda

Läs mer

Workshop PIM 2 - PowerPoint

Workshop PIM 2 - PowerPoint Workshop PIM 2 - PowerPoint Varje ny sida i bildspelet kallas för en Bild. Foton och andra bilder som man lägger in kallas för Bildobjekt. All text skrivs i Textrutor. Växlingen från en bild till nästa

Läs mer

Adobe. Photoshop CS3. Grundkurs. www.databok.se

Adobe. Photoshop CS3. Grundkurs. www.databok.se Adobe Photoshop CS3 Grundkurs www.databok.se Innehållsförteckning 1 Introduktion till materialet... 1 Övningsfiler... 1 2 Digitala bilder...2 Bildskärmens upplösning... 2 Svartvita halvtonsbilder... 3

Läs mer

1 Photo Story Steg 1 - Hämta och fixa dina bilder

1 Photo Story Steg 1 - Hämta och fixa dina bilder 1 Photo Story Microsoft Photo Story är ett program för att skapa bildberättelser. Det är gratis att ladda hem från Microsofts webbplats för Photo Story. Programmet fungerar bara om du har Windows XP. Se

Läs mer

SLU anpassad lathund

SLU anpassad lathund SLU anpassad lathund för personpresentation i EPiServer uppdaterad 17 maj 2011 För att kunna använda CV mallen på SLU webben krävs två saker: 1. Att man är anställd på SLU och har AD behörighet. Detta

Läs mer

Symprint Snabbstartsguide

Symprint Snabbstartsguide Symprint Snabbstartsguide Artikelnummer: 12020, 12021, 12022 v.1 0.10 1 Innehåll Välkommen till SymPrint... 3 Installation av medföljande mjukvara:... 3 Komma igång... 4 Skapa nytt dokument från mall...

Läs mer

Innan du börjar göra din katalog så rekommenderar vi att du läser igenom den korta introduktionen på startsidan.

Innan du börjar göra din katalog så rekommenderar vi att du läser igenom den korta introduktionen på startsidan. Innan du börjar göra din katalog så rekommenderar vi att du läser igenom den korta introduktionen på startsidan. Där efter går du till rutan Skapa ny katalog och väljer där att Skapa ny produktkatalog.

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

Skola: Photoshop och Elements Redigering för äkta bilder

Skola: Photoshop och Elements Redigering för äkta bilder Skola: Photoshop och Elements Redigering för äkta bilder Med Photoshop kan du lägga på coola effekter, skruva färger och kontraster till oigenkännlighet och skapa fantasibilder, men här lär vi dig i stället

Läs mer

Men banners kan också placeras i composerblock samt på nyhets- och artikelsidor. Du kan skapa en banner i vilken editor som helst i EpiServer CMS 5.

Men banners kan också placeras i composerblock samt på nyhets- och artikelsidor. Du kan skapa en banner i vilken editor som helst i EpiServer CMS 5. Snabbguide till EpiServer CMS 5 Banners Vad är en banner? En banner är egentligen en bild. Med en banner menas oftast en reklambild eller ett erbjudande. Exempel på banners på innebandy.se (banners är

Läs mer

Administration av lagets arbetsrum lathund

Administration av lagets arbetsrum lathund Administration av lagets arbetsrum lathund 1: Logga in Öppna din webbläsare och gå in på nya Skuru-webben (www.skuruik.se/handboll). 1. Gå till ditt lags arbetsrum (du hittar laget antingen under Barn/Ungdom

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer