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

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

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

Transkript

1 Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors

2 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en zip- fil som innehåller en mapp med några webbsidor och bildfiler. Länk &ll zip- filen finns på labora&onens webbsida. I mappen (glaswebb) finns: tre HTML- dokument (index.htm, about.htm och course.htm) Öppna HTML- dokumenten i din webbeditor för ay se koden. Öppna dem också i webbläsaren för ay se hur de visas där. HTML- koden innehåller 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- ayributet. ey CSS- dokument (style.css) DeYa innehåller kod för ay skapa sidornas layout och en del andra s&linställningar. Öppna dokumentet i webbeditorn för ay se koden. I övningarna ska du sedan kompleyera denna kod, genom ay bl.a. ta in ey par bakgrundsbilder. en mapp kallad pics I denna mapp ska du lägga de bilder som du skapar i övningarna. en mapp kallad originalbilder I denna mapp ligger de bilder som du ska utgå ifrån i övningarna.

3 2. Bildredigeringsprogram I dessa övningar ska du öva på ay redigera några bilder för ay anpassa dem &ll en webbplats. Bilderna kommer ay beskäras på olika säy, förändras i färguppsäyning och konverteras &ll format som jpeg och png som används på webben. Bilderna ska användas som bakgrunder och illustra&oner på webbplatsen i HTML- och CSS- kod. Vi &Yar också på hur vi säyer bakgrundsfärg. Instruk&onerna gäller för hyp://pixlr.com/editor/. Svensk version. Observera ay Pixlr:s menyer visas högst upp i webbläsarens fönster. Önskat språk väljer du i menyn Språk.

4 3a. Bakgrundsbild för navigeringsmenyn I denna övning ska du utgå från bilden pipor.jpg och skapa en bild som dels ger en bakgrund &ll navigeringslänkarna och dels en illustra&on av webbplatsens innehåll. Bilden ska beskäras och förses med en logotyp. Bilden ska användas som bakgrund &ll blocket nav. I CSS- filen är bredden på nav say &ll 200 pixlar. Lagom höjd på bilden kan vara 600 pixlar, sedan kommer resten ay fyllas ut med lämplig bakgrundsfärg. Bilden ska bli som vidstående bild. Beskär och förminska bilden Öppna filen pipor.jpg i bildredigeringsprogrammet. Välj verktyget för ay 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 600. Klicka sedan i bilden och dra en rektangel, för ay markera den yta som visas i ovanstående figur. Markeringen ska gå från övre &ll nedre kanten av bilden och rama in glaspiporna. Det går ay dra rektangeln och ändra storlek på den, även eder det ay du ritat den. Dubbelklicka i rutan, för ay bekräda markeringen. Då beskärs bilden och förminskas &ll den valda storleken. Dubbelklicka sedan på förstoringsglaset (Zoomverktyg) i verktygspaleyen, för ay visa bilden i 100% storlek i fönstret.

5 3b. Bakgrundsbild för navigeringsmenyn Lägg på en logotyp Öppna filen logo.jpg i bildredigeringsprogrammet. Du ska nu kopiera hela bilden och klistra in den i din bild med piporna. Markera allt (Redigeraà Markera allt) och kopiera (Redigeraà Kopiera). Gå över &ll fönstret med bilden på piporna och klistra in (Redigeraà Klistra in). Bilden med logon hamnar då i ey lager framför den andra bilden. Välj förflyyningsverktyget (FlyEningsverktyg) och dra bilden &ll önskad plats (c:a en halv cen&meter från vänster- och överkanten). Nu ska du 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å &ll ay AnI- alias är valt och ay Angränsande inte är valt. Det sista valet gör ay 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 Då markeras ytan och alla andra pixlar med samma färg. Däreder väljer du Redigeraà Klipp ut (eller trycker på backstegstangenten) Markerad del tas då bort. Välj sedan Redigeraà Avmarkera allt Då tas markeringen bort.

6 3c. Bakgrundsbild för navigeringsmenyn Spara bilden för användning på webben Bilden ska nu sparas i jpeg- format. DeYa är ey format som komprimerar bilden och man får då välja kvalitét. Komprimerar man mycket, blir filstorleken liten, men kvalitén på bilden blir kanske dålig. Vill man ha mycket hög kvalitét, 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 du &ll ay formatet är JPEG och väljer kvalitet 50. Klicka sedan på OK och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Pixlr- format, för ay kanske sedan redigera den vidare, väljer du kommandot Arkivà Spara... och formatet PXD.

7 3d. Bakgrundsbild för navigeringsmenyn Använd bilden i CSS- mallen Öppna filen style.css i din editor för HTML och CSS. I s&len för nav lägger du &ll följande: background- image:url(pics/navbar.jpg); background- repeat:no- repeat; Bilden används då som bakgrundsbild. Den ska inte repeteras. Öppna filen index.htm i webbläsaren och studera resultatet. Har du &llräckligt stort fönster i din webbläsare (mer än 600 pixlar högt), så ser du ay den grå bakgrundsfärgen som finns med i s&len för nav kommer under bilden, för ay fylla ut hela fönstrets höjd. Denna grå nyans är dock lite för ljus, så du ska nu byta &ll samma grå färg som finns längst ner i bilden. Gå över &ll bildredigeringsprogrammet 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ärgpipeyen (Färgväljarverktyg) och klicka i den grå ytan längst ner i bilden. Färgen som du klickar på kommer då in i verktygspaleyens färgruta. Klicka på färgrutan, så får du ey 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 deya värde och klicka sedan på Avbryt för ay stänga fönstret igen. Gå över &ll CSS- filen i editorn igen och byt bakgrundsfärg för nav: background- color:#3c3a34; Klistra alltså in den kod som du hade kopierat. Studera resultatet i webbläsaren. Lägg &ll följande kod i s&len för nav ul: margin- top:150px; DeYa 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.

8 4a. "Gradient" bakgrundsbild för sidans innehåll Du ska nu skapa en bakgrund som gradvis övergår från viy &ll samma orange färg som du har i glasugnen på föregående bild. Vi kommer här ay &Ya på två alterna&v för deya. Det första alterna&vet är ay använda en bakgrundsbild och det andra alterna&vet är ay använda gradient CSS- s&l. 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). Skapa ea nya bilddokument Skapa ey nyy dokument som är 1000x20 pixlar i bildredigeringsprogrammet. Välj Arkivà Ny bild... I fönstret som då dyker upp väljer du storleken 1000 och 20 för bredd respek&ve höjd. Klicka däreder på OK, så får du en ny tom bild.

9 4b. "Gradient" bakgrundsbild för sidans innehåll Fyll med ea gradient mönster Du ska nu göra en gradient övergång från en vit färg i vänsterkanten &ll en orange färg i högerkanten. Den orange färgen ska ha 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 ey 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å ay den döljs. Peka i bildens miy och tryck ned musknappen. Dra sedan åt höger &ll högerkanten och släpp upp musknappen. Bilden fylls då med ey gradient mönster.

10 4c. "Gradient" bakgrundsbild för sidans innehåll Spara bilden för användning på webben 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 &ll följande: main {background- image:url(pics/bg.jpg); background- repeat:repeat- y;} Det finns visserligen redan en s&l för main i filen, men det går bra ay lägga &ll en ny. Båda kommer ay användas &llsammans av webbläsaren (CSS är ju en kaskad av s&lar). Bilden tas in som en bakgrundsbild och upprepas i y- led så ay hela ytans höjd fylls. Öppna filen index.htm i webbläsaren och studera resultatet. Om du har ey brey fönster i din webbläsare (bredare än 1200 pixlar), så ser du ay det är ey viy utrymme &ll höger om den gradienta bakgrunden. Det beror på ay bakgrundsfärgen för body är say &ll vit färg i CSS- filen. Du ska nu lägga &ll en gul bakgrundsfärg för main. Lägg &ll följande i din nya s&l för main i CSS- filen: background- color:#ffaa00; Färgen säys &ll den färg som den gradvisa övergången slutar med. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.

11 5a. "Gradient" bakgrundsfärg för sidans innehåll Vi ska nu se på ey alterna&vt säy ay få en gradient bakgrund, genom ay använda inställningar i CSS. DeYa ingår i CSS3, men är ännu inte standardiserat och implementerat på samma säy i webbläsarna. Så därför får man använda ey antal olika koder, för ay det ska fungera i alla (vanliga) webbläsare. Vi ska här utgå från ey exempel som finns på följande url: hyp:// 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;*/ background:- webkit- linear- gradient(le[,#fff,#f80); /* For Safari 5.1 to 6.0 */ background:- o- linear- gradient(right,#fff,#f80); /* For Opera 11.1 to 12.0 */ background:- moz- linear- gradient(right,#fff,#f80); /* For Firefox 3.6 to 15 */ background:linear- gradient(to right,#fff,#f80); /* Standard syntax */ } Omge den gamla koden med /* och */. Då "kommenterar vi bort den", men den finns ändå kvar, ifall vi vill återgå &ll den. Sedan följer ey antal alterna&va koder för ay skapa en gradient färg från vit &ll orange färg. Det är den sista koden som är den som är föreslagen som korrekt kod i CSS3. Jag valde här färgen F80 istället för FA0, som jag hade i bilden i övning 4. Det blir en lite mörkare nyans, vilket jag tyckte passade bäyre. Men ändra gärna &ll den färgnyans du vill ha. Studera resultatet i webbläsaren. Ändra fönstrets storlek och se hur det blir i olika storlekar.

12 5b. Jämförelse av de båda säyen i övning 4a- c och 5a Vi har nu sey två olika säy ay skapa en liknande effekt. Men det finns en del skillnader. Gradient bakgrund med bild: Det kräver ay vi skapar en bild och ay webbläsaren måste läsa in bilden. Det blir yyerligare en fil ay läsa in, vilket kan vara en nackdel i mobila enheter med långsam nätanslutning. Vi är friare i hur den gradienta övergången ska ske. I deya exempel börjar vi med en helvit bakgrund, som i miyen av sidan övergår &ll en orange bakgrund. Gradient bakgrund med CSS: Vi slipper någon extra fil som ska läsas in. 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.

13 6a. Bilden med glasformning på ingångssidan Nu ska du skapa en bild som ska användas som illustra&on på ingångssidan. 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. Beskär och förminska bilden Öppna bilden formning.jpg i bildredigeringsprogrammet. Du ska nu beskära bilden, så ay du endast får med handen och verktygen. Sedan förminskar du bilden så ay den blir 500 pixlar bred. Dessa moment har du uuört &digare för de andra bilderna i övningarna, så här ges endast korta förklaringar. Använd verktyget för ay beskära (Beskärningsverktyg). SäY storleken &ll 500 både för höjd och bredd. Klicka i bilden och dra en markering, så ay du endast får med handen och verktyget. Dubbelklicka sedan i rutan, för ay uuöra beskärningen. Förstora bilden med förstoringsglaset (Zoomverktyg), så ay du ser bilden i 100%. Eventuellt förstorar du även fönstret, så ay du ser hela bilden. På webbsidan ska bilden vara ännu mindre, men den sista förminskningen gör vi i webbsidans kod. DeYa ska vara en bild med en transparant bakgrund och då kan den bli lite "hackig" i kanterna. För ay minimera denna effekt, förminskar vi den lite även då vi tar in den på webbsidan. Om det inte är en transparant bild, så är det bäyre ay förminska den &ll önskad storlek i bildredigeringsprogrammet. Då får vi dels en bäyre kvalitet och dels en mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund.

14 6b. Bilden med glasformning på ingångssidan Gör bilden ljusare 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 ay ä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. Ta bort bildens bakgrund Du ska nu sudda ut bakgrunden i bilden, så ay endast handen och verktygen återstår. Det kan vara ganska pilligt och &dskrävande arbete med ay ta bort bakgrunden. Då du tar bort bakgrunden i bilden får du en vit bakgrund, som sedan ska göras genomskinlig så ay webbsidans bakgrund lyser igen. Det är vik&gt ay vara noggrann då du tar bort bakgrunden, annars kan det sedan se hackigt ut då bilden tas in på webbsidan. Då du förståy 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 ay spara &d i övningen. Välj radergummit (Suddningsverktyg). Radergummit ä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.

15 6c- 1. Bilden med glasformning på ingångssidan Gör en mjuk övergång från bakgrunden Hll bilden Utgå nu an&ngen från din egen avmaskade bild eller bilden i filen formning_avmaskad.jpg. Bilden ska nu få en transparent (genomskinlig) bakgrund och sam&digt en mjuk övergång. DeYa kräver lite tricks. Börja med ay skapa ey lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ey nyy lager med Lagerà NyE lager. I lagerpaleyen dubbelklickar du på hänglåset &ll höger i bakgrundslagret, för ay låsa upp det. (Det är alltså lagret med bilden.) Dra sedan lagret uppåt, så ay det hamnar ovanför det nya lagret. Välj markeringsverktyget (Trollspö). I den övre delen av programmets fönster kontrollerar du inställningar för verktyget och ser &ll ay Tolerance är 30 och både AnI- alias och Angränsande är valt. Angränsande gör ay det endast är sammanhängande pixlar som väljs och inte alla med samma färg. Klicka i den vita delen av bilden och välj Redigeraà Klipp ut (eller tryck på backstegstangenten). Den markerade delen tas då bort. Upprepa det, så ay båda de vita ytorna tas bort. fortsäening på nästa sida

16 6c- 2. Bilden med glasformning på ingångssidan fortsäening från föregående sida Nu ska du skapa en mjuk övergång &ll handen och verktyget. Välj markeringsverktyget i verktygspaleyen. I fönstrets övre kant klickar du på den ellip&ska markeringen. I rutan för Feather skriver du in 20. Peka i bildens övre vänstra hörn, tryck ned musknappen och dra ner &ll det undre högra hörnet, så ay hela bilden markeras med en cirkel. Välj Redigeraà Invertera markeringen Då ändras markeringen, så ay det är ytan utanför cirkeln som är markerad. Välj Redigeraà Klipp ut (eller tryck ned backstegstangenten). Den markerade delen tas då bort. Välj sedan Redigeraà Avmarkera allt. Du har nu fåy en mjukare övergång &ll handen och glaspipan.

17 6d. Bilden med glasformning på ingångssidan Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så ay 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 &Ya på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Förminska bilen Bilden ska nu också förminskas i sidans kod. Öppna filen index.htm i din editor. Skriv in ey width- ayribut i img- taggen: <img src="pics/formning.png" alt="glasformning i glasbruk" width="350"> Studera resultatet i webbläsaren. Ändra fönstrets storlek och se ay bilden hela &den ligger i fönstrets högerkant.

18 7a. Bilden med kartan Du ska nu redigera bilden med Europakartan. Antalet färger i denna ska reduceras &ll endast två. Färgen för haven ska göras transparent och färgen för landområdena ska väljas &ll en orange/brun färg som passar &ll övriga färger på sidan. Bilden ska bli som vidstående bild. Öppna bildfilen Öppna filen europe.png i bildredigeringsprogrammet. Gör haven transparenta Gör på samma säy som i föregående övning, dvs skapa ey nyy tomt lager och lägg det underst. Ta sedan bort det som ska vara genomskinligt i kartan. Skapa lagret med Lagerà NyE lager. Dubbelklicka på hänglåset i bakgrundslagret (med kartan), för ay låsa upp det. Dra lagret med kartan uppåt, så ay det ligger överst. 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 &ll varandra som markeras, utan alla pixlar i bilden med den färg som du sedan klickar på. Klicka i den gröna ytan på kartan, för ay markera alla gröna pixlar. Välj Redigeraà Invertera markeringen, för ay istället markera allt utom de gröna pixlarna. Ta bort markerade pixlar genom ay 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.

19 7b. Bilden med kartan Byt ut den gröna färgen i kartan Nu ska du byta kartans färg &ll en mörkbrun färg. Välj Redigeraà Invertera markeringen, för ay växla om &ll den gröna ytan igen. Klicka i den stora färgade (eller svarta) rutan längst ner i verktygspaleyen. Välj en mörkbrun färg. Observera ay du måste dra i de runda prickarna både i den omgivande cirkeln och den inre romben, för ay välja färg. Klicka på OK, då du hiyat den färg du vill ha. Välj penseln (Målarpenselverktyg) i verktygspaleyen. 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 ay ta bort markeringen.

20 7c. Bilden med kartan Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så ay 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 &Ya på resultatet. Öppna filen about.htm i webbläsaren och studera resultatet.

21 8a. Bilden med formning av glasfot I denna övning ska du skapa bilden som visar hur två glasbruksarbetare säyer på en glasfot på ey 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 vidstående bild. Öppna bildfilen Öppna filen glasfot.jpg i bildredigeringsprogrammet. Kopiera delen som ska vara förstorad Innan du förminskar bilden, ska du kopiera den del som ska vara förstorad. Välj markeringsverktyget i verktygspaleyen. I fönstrets övre del väljer du ellipsen och Constraint &ll Aspect raio. Då kommer markeringen ay bli en cirkel. Dra en cirkel runt den del som glasarbetarna arbetar med. Hamnar inte cirkeln räy, så kan du peka i den och dra den &ll önskad plats. Kopiera den markerade delen med Redigeraà Kopiera. Denna del ska sedan klistras in eder det ay hela bilden förminskats.

22 8b. Bilden med formning av glasfot Förminska bilden Du ska nu förminska hela bilden &ll 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 automa&skt i rutan för Höjd, om Behåll proporionerna är markerad). Klicka sedan på OK. Förstora bilden &ll 100% med förstoringsglaset (Zoomverktyget) Om det behövs, förstora fönstret så ay hela bilden syns. Klistra in den kopierade delen Nu ska du klistra in den del som du &digare kopierade och anpassa dess storlek och placering. Välj Redigeraà Klistra in. Delen med glasfoten kommer in i ey nyy lager. Ändra storlek: Välj Redigeraà Free transform. Ta tag i ey av hörnen och dra inåt så ay bilden förminskas. Håll ner shi[- tangenten, så behålls propor&onerna. Peka och dra miy i rutan för ay flyya bilden &ll önskad plats. Då du förminskat och placerat bilden så som visas i bilden härin&ll, klickar du utanför den markerade ytan. Svara Yes i den dialogruta som kommer upp, för ay bekräda den transformering du gjort.

23 8c. Bilden med formning av glasfot Lägg på en skugga på bilden Du ska nu lägga på en "glödande skugga" på bilden i cirkeln. Lagret med cirkeln ska vara markerat i Lagerpanelen (&ll höger om bildfönstret). Om det inte är det, klickar du på det, så ay det markeras I underkanten av panelen finns det några små knappar. Klicka på den tredje av dessa (Layer styles). Då dyker det upp ey 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 &ll 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å ay storleken blir c:a 30 och opaciteten c:a 60. Klicka sedan på OK. Du har nu fåy en "skugga" på den förstorade delen av glasfoten.

24 8d. Bilden med formning av glasfot 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 &ll 50. Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsäea och redigera bilden senare, sparar du även bilden i PXD- format med Arkivà Spara... Spara en miniatyrbild för länken Du ska nu förminska bilden &ll 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. 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 &Ya på resultatet. Öppna filen index.htm i webbläsaren och studera resultatet. Klicka på länken med den lilla bilden.

25 Slut Experimentera nu med ay på egen hand förändra bilderna. Arbeta också med de bilder du ska ha på din webbplats för uppgid U3.

Ö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

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

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

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

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

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

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

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

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

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

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

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

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

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

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

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

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

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

PHOTOSHOP GUIDE. Magnus Servin

PHOTOSHOP GUIDE. Magnus Servin B I L D M O N T A G E En steg-för-steg guide av Magnus Servin. Publicerad 2008-06-18. För fler guider, tips och inspiration se www.familjenservin.se/magnus h i m m e l.jp g Inl e d n i n g Denna guide

Läs mer

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Labora&on 1 Variabler och beräkningar övningar/uppgi9er Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

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

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

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

Grunderna i Pixlr. Klicka på WEB APPS och välj

Grunderna i Pixlr. Klicka på WEB APPS och välj Grunderna i Pixlr Det första att tänka på när du ska använda Pixlr är att (om du jobbar på skolans dator) använda Explorer och inte Crome. Det är ett tillägg som saknas i Crome. Gå till pixlr.com Klicka

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

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

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

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

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

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

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

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

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

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

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

«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

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

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

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

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

Image Converter. Användarhandbok. Innehåll: Version: 1.1.0.0. Läs följande innan du använder Image Converter. Översikt av Image Converter

Image Converter. Användarhandbok. Innehåll: Version: 1.1.0.0. Läs följande innan du använder Image Converter. Översikt av Image Converter Image Converter Användarhandbok Version: 1.1.0.0 Läs följande innan du använder Image Converter Innehåll: Översikt av Image Converter S2 Bildkonverteringsprocessen S3 Importera till HDD Navigation System

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

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

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

Steg 14 Bildbehandling Irfanview, Photoshop Windows 7/8

Steg 14 Bildbehandling Irfanview, Photoshop Windows 7/8 Steg 14 Bildbehandling Irfanview, Photoshop Windows 7/8 Nov -14 Liljedalsdata Liljedalsdata Steg 14 W78 Sida 1 Inledning Förkunskaper Steg 1, 2, 3, 13. Du bör ha mycket träning i att hantera olika minnen

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

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

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

HDR den enkla vägen. Råkonverteraren Det första vi gör i råkonverteraren är att öppna våra tre bilder. av Kristoffer Ingemansson

HDR den enkla vägen. Råkonverteraren Det första vi gör i råkonverteraren är att öppna våra tre bilder. av Kristoffer Ingemansson HDR den enkla vägen av Kristoffer Ingemansson Att ta sina bilder Allting börjar ju så klart med att man letar upp ett motiv och tar sina bilder, men man bör även tänka på en del speciella saker när man

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

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

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

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

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

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

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

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

PowerPoint. Kapitel 1. Vasen

PowerPoint. Kapitel 1. Vasen Kapitel 1 PowerPoint PowerPoint används vanligen till att göra presentationer som antingen skall visas på dator eller som overhead. I det här exemplet visas hur programmet kan användas av elever för att

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

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

En introduktion till WeavePoint 7 demo version. Att använda ett vävprogram

En introduktion till WeavePoint 7 demo version. Att använda ett vävprogram En introduktion till WeavePoint 7 demo version Demoversionen är det fullständiga WeavePoint med undantag för att det inte går att spara egna mönster. Det går att testa olika sätt att skriva ut de exempel

Läs mer

E-post. A. Windows Mail. Öppna alternativ. Placera ikonen på skrivbordet.

E-post. A. Windows Mail. Öppna alternativ. Placera ikonen på skrivbordet. E-post A. Windows Mail Öppna alternativ Klicka på startknappen Startmenyn öppnas Klicka på Alla Program Leta reda på Windows Mail Dubbelklicka Windows Mail öppnas. Om ikonen ligger i Start-menyn Klicka

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

Arbeta med bilder. Lathund kring hur du fixar till bilder från digitalkamera eller Internet så att de går att använda i ett kommunikationsprogram.

Arbeta med bilder. Lathund kring hur du fixar till bilder från digitalkamera eller Internet så att de går att använda i ett kommunikationsprogram. Arbeta med bilder Lathund kring hur du fixar till bilder från digitalkamera eller Internet så att de går att använda i ett kommunikationsprogram. Habilitering & Hjälpmedel Installera PhotoFiltre Att installera

Läs mer

Rullningslisten. Klicka på rullningslistpilar (pil upp eller pil ner) 1 för att förflytta dig i önskad riktning, en liten bit i taget.

Rullningslisten. Klicka på rullningslistpilar (pil upp eller pil ner) 1 för att förflytta dig i önskad riktning, en liten bit i taget. Rullningslisten Om informationen i fönstret inte ryms på skärmen skapas automatiskt en rullningslist i fönstrets högra kant. Med rullningslisterna kan du snabbt och enkelt flytta dig i fönstret 1 Klicka

Läs mer

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång

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

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

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

RACCOON DEVELOPMENT AB

RACCOON DEVELOPMENT AB Sid 1 Överföring av bilder från kamera Så här kommer kamerabilderna in i datorn: Koppla in datasladden som följer med kameran. Det är oftast en s.k. USB-sladd (änden som ska in i datorn ser ut ungefär

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

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

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

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

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

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

Öppna bilden C:\Photoshop5-kurs\Bananer 96ppi.psd. Aktivera verktyget Färgpyts i verktygslådan.

Öppna bilden C:\Photoshop5-kurs\Bananer 96ppi.psd. Aktivera verktyget Färgpyts i verktygslådan. 140 Målnings- och redigeringsverktyg 3 Fyllningsverktyg Ofta vill man fylla ett helt område med en viss färg, ett visst mönster eller en övertoning mellan flera färger. Detta kan åstadkommas på några olika

Läs mer