Ö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 Photoshop CS6 (engelsk version), men fungerar även för tidigare versioner. 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 (Crop Tool ). I övre vänstra hörnet av programmets fönster visas två rutor där du kan skriva in önskad storlek. Skriv in storleken 200px och 600px (Obs! viktigt att du inte glömmer enheten px) Rune Körnefors 1

2 Lägg på en logotyp En ruta visas över bilden. Peka i den och tryck ned musknappen. Dra sedan bilden i sidled till önskad position. Försök markera ungefär samma del som i ovanstående bild. 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 (Zoom Tool ) 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 (Select->All) och kopiera (Edit->Copy). Gå över till fönstret med bilden med piporna och klistra in (Edit->Paste). Bilden med logon hamnar då i ett lager ovanför den andra bilden. Välj förflyttningsverktyget (Move Tool ) 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öt" (Magic Wand ). Verktyget ligger på samma plats som ett annat som ser nästan likadant ut. Tryck ned musknappen över verktyget, så att en popupmeny dyker upp och se till att du väljer rätt verktyg. Skriv in 30 i rutan för Tolerance i den övre delen av programmets fönster. Se också till att Anti-alias är valt. Klicka någonstans i den gröna ytan i bilden, för att markera ytan. Välj menykommandot Select->Similar, för att markera alla gröna pixlar. Därefter väljer du Edit->Cut (eller trycker på backstegstangenten), för att ta bort markerad del. Välj sedan Select->Deselect, för att ta bort markeringen. Om du inte använder Photoshop, utan 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 File->Save for Web... I fönstret som du då får kan du med "flikar" i överkanten välja hur du vill se bilden. Välj 2-Up, så kan du både se originalbilden och hur den kommer att bli i det format du ska spara i. I högra delen av fönstret väljer du formatet jpeg i en popupmeny. I menyn därunder kan du välja kvalitét. Prova att välja de olika värdena (Low, Medium, etc.). Studera bildens kvalitét och se samtidigt informationen under den om hur pass stor bildfilen kommer att bli Rune Körnefors 2

3 Använd bilden i CSS- mallen Till höger om menyn finns ett värde för kvalitéten och en knapp med en pil. Klickar du på den knappen får du ett reglage som du kan dra till vänster och höger för att förändra kvalitén. Dra den till värdet 50, så får du i detta fall tillräcklig kvalité och en ganska liten fil. Klicka sedan på Save och spara bilden med namnet navbar.jpg i mappen pics. Vill du även spara bilden i Photoshop-format, för att kanske sedan redigera den vidare, så väljer du kommandot File->Save As... I fönstret som du då får väljer du lämpligt namn och plats för bilden och ser till att formatet Photoshop är valt innan du klickar på Save. Slutligen ska du se till att bilden importeras som bakgrund till navigeringskolumnen. Öppna filen style.css i din editor för HTML och CSS. 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 (Eyedropper Tool ) 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. Längst ner i det fönstret finns det en ruta där färgkoden står (t.ex. 3c3a34). Kopiera detta värde och klicka sedan på Cancel 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 Rune Körnefors 3

4 3. Gradient bakgrundsfärg för sidans innehåll Medieteknik 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). Skapa ett nytt bilddokument Skapa ett nytt dokument som är 1000x20 pixlar i ditt bildredigeringsprogram. Välj File->New... I fönstret som då dyker upp väljer du enheten pixels för Width och Height och fyller sedan i värdena 1000 respektive 20. För Resolution väljer du 72 Pixels/inch. Se också till att Color Mode är valt till RGB Color. 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). Klicka på färgrutan för förgrundsfärg i verktygspaletten, den främre rutan. I fönstret som dyker upp drar du den runda pricken, i den stora färgade rutan, längst upp till vänster, för att välja vit färg. Alternativt skriver du in FFFFFF i rutan för färgkoden längst ner i fönstret. Klicka sedan på OK. Klicka sedan på den bakre färgrutan för bakgrundsfärg. Skriv in koden för den orange färgen, FFAA00. Klicka på OK. Välj verktyget för gradient fyllning (Gradient Tool ) i verktygspaletten. Detta ligger kanske dolt bakom verktyget med färghinken. Tryck i så fall ner musen över den, så poppar det upp en liten meny, där du kan välja det verktyg du vill ha. Peka i bildens mitt och tryck ned musknappen. Dra sedan åt höger till högerkanten. Se till att den linje som visar hur du drar är vågrät (du kan hålla ner shift-tangenten samtidigt som du drar). Släpp sedan 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 File->Save for Web... I fönstret som dyker upp kan du behöva dra bilden åt vänster för att du ska se det "gradienta" mönstret. Välj formatet jpeg. I detta fall räcker nog kvalitén Medium (Quality 30). Klicka sedan på OK och spara bilden med namnet bg.jpg i mappen pics Rune Körnefors 4

5 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 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). o Bilden tas in som en bakgrundsbild och upprepas i y-led så att hela ytans höjd fylls. Ö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);} Rune Körnefors 5

6 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. 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 mindre bildfil. Men nu handlar det alltså om en bild som ska få en transparant bakgrund. o Photoshop: 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 (Crop Tool ), för att skära ut den del som du ska ha. Sätt storleken till 500 px både för höjd och bredd. Du får en ruta där du dels drar i bilden för att placera rutan rätt och dels drar i hörnen, för att minska den till önskad del av bilden. Markera en del 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 (Zoom Tool ), så att du ser bilden i 100%. Eventuellt förstorar du även fönstret, så att du ser hela bilden Rune Körnefors 6

7 Gör bilden ljusare Bilden är ganska mörk, så gör den nu ljusare. Välj Image->Adjustments->Brightness/Contrast... I fönstret som dyker upp drar du i reglagen för att ändra ljushet och kontrast. Gör bilden mycket ljusare, ungefär Kontrasten kan du dra ner något, ungefär -15. Klicka sedan på OK. Ta bort bildens bakgrund Du ska nu markera och ta bort 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 verktyget för snabbmarkering (Quick Selection Tool ) i verktygspaletten. Det ligger på samma plats som trollspöt, så tryck ner musknappen och välj rätt verktyg i popupmenyn. Klicka sedan i den grå ytan ovanför glasformen i bilden. Fortsätt att klicka vid sidan av markeringen, för att utöka markeringen. Fortsätt så tills hela ytan ovanför handen och glasformen är markerade. o Du kanske får med lite av formens skaft eller handen, men det gör inget. Du ska nu justera det. Klicka på knappen för redigering av markeringen (Edit Mask ) längst ner i verktygspaletten. Det som inte ingår i markeringen färgas rött. Använd penseln (Brush Tool ) och radergummit (Eraser Tool ) för att utöka respektive minska den färgade ytan. På det sättet justerar du markeringen. Bry dig nu endast om ytan ovanför handen och formen. Ytan under handen ska du markera senare. Då du är nöjd klickar du på knappen för redigering av markeringen igen, för att återgå till normalläget. Ta bort den markerade ytan genom Edit->Cut (eller tryck på backstegstangenten). o Dyker det upp en ruta som frågar hur den borttagna ytan ska fyllas, så väljer du White. Välj sedan Select->Deselect för att ta bort markeringen. Upprepa sedan proceduren med den blå delen av bilden och ytan under handen och formen. De sista delarna närmast formen kan vara svåra att markera, så här får du använda radergummit i normalläge och sudda ut bakgrunden. Justera även resten av bilden med radergummit Rune Körnefors 7

8 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. o Photoshop: Börja med att skapa ett lager med transparent bakgrund och ta sedan bort den vita ytan i bilden. Skapa ett nytt lager med Layer->New->Layer... o I rutan som dyker upp behöver du inte ändra något, utan klicka bara på OK. 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 (Magic Wand ). 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 Contiguous ä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 Edit->Cut (eller tryck på backstegstangenten), för att ta bort den markerade delen. o Upprepa det, så att båda de vita ytorna tas bort. o Ytorna fylls med ett schackmönster som markerar den transparenta ytan i det underliggande lagret. Nu ska du skapa en mjuk övergång till handen och verktyget. Välj det elliptiska markeringsverktyget (Eliptical Marking Tool ) i verktygspaletten. Detta ligger högst upp till vänster på samma plats som en del andra markeringsformer, så tryck ned musknappen och välj rätt verktyg i popupmenyn. 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 Select->Modify->Feather... Skriv in värdet 20 i rutan som dyker upp och klicka på OK. Välj Select->Inverse, för att ändra så att det är ytan utanför cirkeln som är markerad. Välj Edit->Cut (eller tryck ned backstegstangenten) för att ta bort den markerade ytan. o Välj White som fyllning. Välj sedan Select->Deselect. Du har nu fått en mjukare övergång till handen och glaspipan Rune Körnefors 8

9 Spara bilden för användning på webben Bilden ska nu sparas i formatet png, så att den transparenta delen behålls. Välj File->Save for Web... Välj formatet PNG-24 i den första popup-menyn. o PNG-24 använder 24 bitar per pixel, vilket gör att vi få miljontals färgnyanser och hög kvalitet, men samtidigt blir bildfilen ganska stor. o Kontrollera att Transparency är valt, annars klickar du på det. I bilden ska du se schackmönstret för den genomskinliga delen. 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 sedan 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. Spara bilden för användning på webben och reducera samtidigt antalet färger Att reducera antalet färger görs i Photoshop enkelt då vi ska spara bilden för webben. Välj File->Save for Web... Välj formatet PNG-8. PNG-8 använder upp till 8 bitar per pixel, vilket betyder att vi har max 256 färgnyanser. I detta fall har vi endast tre färger i bilden, så det är fullt tillräckligt. Vi får också en färgpalett, där vi kan reducera antalet färger och enkelt byta färger. I popup-menyn därunder väljer du Adaptive, för att färgpaletten ska anpassas till bildens färger. I den tredje popup-menyn väljer du No Dither. I detta fall vill vi inte ha någon grynighet i bilden Rune Körnefors 9

10 Se hur bilden blir på webben I popupmenyn för Colors väljer du hur många färger bilden ska ha. Dra ner värdet till 2. Den svarta färgen försvinner och det återstår endast den blå och den gröna färgen. Nu ska du byta ut den gröna färgen mot en orange/brun färg. Dubbelklicka på den gröna färgrutan i färgpaletten. Du får då ett fönster för färginställning. Du ska välja en färg som är lite mörkare än den färg du använde för den smala bakgrundsbilden. Så börja med att skriva in koden FFAA00 i rutan för färgkoden. I det övre högra hörnet av den stora färgrutan ser du en del av en cirkel. Denna markerar den valda färgen. Klicka någonstans nedanför denna och dra runt markören tills du hittar en färgnyans som verkar bra, t.ex. några centimeter ner och en halv centimeter in från högerkanten, så att du väljer en mörkbrun färg. Klicka sedan på OK. Nu ska du göra den blå färgen transparent. Klicka på den blå färgrutan i färgpaletten. Klicka sedan på den lilla schackmönstrade rutan under färgpaletten, för att markera att den blå färgen ska vara transparent. o I bilden ersätts då den blå färgen med ett schackmönster. Spara bilden med namnet europe.png i mappen pics. 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. 6. Bilden med formning av glasfot 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) Rune Körnefors 10

11 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. Förminska bilden Välj det elliptiska markeringsverktyget (Eliptical Marking Tool ) i verktygspaletten. 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. Håll samtidigt ner shift-tangenten, så blir det en exakt cirkel. Kopiera den markerade delen med Edit->Copy. Denna del ska sedan klistras in efter det att hela bilden förminskats. Förminska hela bilden till 600x450 pixlar. Välj Image->Image Size... I fönstret som dyker upp skriver du in 600 i den övre rutan för Width (450 fylls då i automatiskt i rutan för Height, om Constrain Proportions är markerad). Klicka sedan på OK. Förstora bilden till 100% med förstoringsglaset (Zoom Tool ) och, om det behövs, förstora fönstret så att hela bilden syns. Klistra in den kopierade delen Nu ska du klistra in den del som du tidigare kopierade och anpassa dess storlek och placering. Välj Edit->Paste. Delen med glasfoten kommer in i ett nytt lager. Ändra storlek. Välj Edit->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å dubbelklickar du i den markerade ytan. Då bekräftas 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. Se till att lagret med cirkeln är markerat i Lagerpanelen (längst till höger i fönstret). Välj Layer->Layer Style->Outer Glow... Då dyker det upp ett fönster med några val. I den övre delen finns en färgruta. Klicka på denna och välj vit färg Rune Körnefors 11

12 Dra sedan reglagen för Size (i mitten) till c:a 30 och Opacity (i den övre delen) till 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 File->Save for Web... Välj formatet jpeg och den kvalité du vill ha (Medium räcker nog för denna bild). Spara bilden med namnet glasfot.jpg i mappen pics. Ifall du vill fortsätta och redigera bilden senare, spara du även bilden i Photoshop-format med File->Save As... 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 Image->Image Size... I fönstret som dyker upp skriver du in 100 i rutan för Width och klickar på OK. Välj File->Save for Web... Välj formatet jpeg och kvalité Low. 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 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

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

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

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

Laboration 2 Grunderna i Photoshop

Laboration 2 Grunderna i Photoshop Mitthögskolan Institutionen för Informationsteknologi och medier. Jan-Erik Jonsson 060-14 87 90 Laboration 2 Grunderna i Photoshop Interaktiva multimedier v1.0 2001-11-27 lab_2.doc Sida 2/5 Allmänt Materialet

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

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

Ö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

Att använda bildhanteringsprogram, del 2

Att använda bildhanteringsprogram, del 2 Att använda bildhanteringsprogram, del 2 Gå till Adobe Online (M) Markeringsram - (L) Lasso - (C) Beskärning - (J) Airbrush - (S) Klonstämpel - (E) Suddgummi - (R) Oskärpa - (A) Markering av bankomponenter

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

Photoshop CS4. Adobe. Fortsättningskurs

Photoshop CS4. Adobe. Fortsättningskurs Photoshop CS4 Adobe Fortsättningskurs Adobe Photoshop CS4 Fortsättningskurs Till denna bok medföljer ett antal övningsfiler på cd-skiva (filerna finns i mappen Photoshop CS4 Forts). Kopiera filerna till

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

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

SVARTVITT METOD 1. Originalbilden

SVARTVITT METOD 1. Originalbilden SVARTVITT METOD 1 Svartvita bilder är fortfarande populära och att skapa dem i Photoshop erbjuder en viss utmaning. Alla bilder passar inte att göra svartvita. För att skapa en fungerande svartvit bild

Läs mer

2007-03-28. Manual för Typo3 version 4.04

2007-03-28. Manual för Typo3 version 4.04 2007-03-28 Manual för Typo3 version 4.04 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.2 Redigera

Läs mer

Referens till. WeavePoint 6 Mini

Referens till. WeavePoint 6 Mini Referens till WeavePoint 6 Mini Arkiv Öppna Välj Arkiv Öppna eller klicka på snabbknappen Öppna för att komma till dialogrutan Öppna. Du kan öppna ett av de senaste mönstren du arbetat med genom att klicka

Läs mer

Adobe PHO SHOP CC. Fördjupning

Adobe PHO SHOP CC. Fördjupning Adobe PHO SHOP CC Fördjupning Innehållsförteckning 1 Färghantering...5 Färgomfång... 6 Behöver du färghantering?... 6 Färginställningar... 6 Arbetsfärgrymder... 8 Färgmodeller... 9 Provtryck... 11 Kalibrera

Läs mer

Lite verktyg och metoder Photoshop CS2

Lite verktyg och metoder Photoshop CS2 Lite verktyg och metoder Photoshop CS2 Kurvor och Nivåer Med Nivåer och Kurvor kan man ställa nästan allt i bilden. Vitt ska vara vitt och svart ska vara svart. Fixa det med Nivåer. Hur ljus ska den vara?

Läs mer

Elisabeth Bejefalk IT-Assistent Avesta kommun

Elisabeth Bejefalk IT-Assistent Avesta kommun Elisabeth Bejefalk IT-Assistent Avesta kommun Du ska nu få lära dig hur du enkelt kan göra ett bildspel i PowerPoint. Utifrån det du snart har lärt dig kan du sen göra mer avancerade bildspel genom att

Läs mer

Tips och idéer för Chrome OS och Google Dokument

Tips och idéer för Chrome OS och Google Dokument Tips och idéer för Chrome OS och Google Dokument Läs mer om it i lärandet på webben: www.spsm.se/itilarandet Tips och idéer för Chrome OS och Google Dokument Skriften är utgiven av Specialpedagogiska skolmyndigheten

Läs mer

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter

Läs mer

- En handledning för personal och elever i Karlshamns kommun

- En handledning för personal och elever i Karlshamns kommun - En handledning för personal och elever i Karlshamns kommun Denna handledning är än så länge bara ett arbetsmaterial. Innehållsförteckning Ladda ner/installera... 3 Börja använda programmet... 4 Första

Läs mer

Egenskaper och inställningar för QuickScan och förhandsgranskningsfönstret

Egenskaper och inställningar för QuickScan och förhandsgranskningsfönstret [LISTAN TILL HÖGER. Hela vägen uppifrån och ned] Använda knappen QuickScan (snabbavläsning) Inställningar för QuickScan Inställningar för egenskaper Förhandsgranskningsfönster (Preview window) [SLUT LISTA]

Läs mer

Gimp Handbok. Christian Gundersson Xxxx. Xxxx@xxx.xx

Gimp Handbok. Christian Gundersson Xxxx. Xxxx@xxx.xx Gimp Handbok Christian Gundersson Xxxx Xxxx@xxx.xx Gimp Handbok av Christian Gundersson Publicerad $Date: 2006/04/12 20:04:19 $ Copyright 2005-2006 Christian Gundersson En liten sammanfattning här Permission

Läs mer

Resurscentrum för kommunikation Dako 2013. SymWriter. Minimanual

Resurscentrum för kommunikation Dako 2013. SymWriter. Minimanual Resurscentrum för kommunikation Dako 2013 SymWriter Minimanual Symboler som stöd till det du skriver 2 F9 - Byt symbol 2 F11 - Skapa nya ord/symboler 3 Spara ändringar i ordlista 4 Specifikationer grammatik

Läs mer

Clicker 5. Lathund kring de vanligaste och mest grundläggande funktionerna för att komma igång med Clicker. Habilitering & Hjälpmedel

Clicker 5. Lathund kring de vanligaste och mest grundläggande funktionerna för att komma igång med Clicker. Habilitering & Hjälpmedel Clicker 5 Lathund kring de vanligaste och mest grundläggande funktionerna för att komma igång med Clicker. Habilitering & Hjälpmedel Vad är Clicker 5? Clicker 5 är ett stöd till personer i behov av extra

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

InPrint. Grunderna för hur du kommer igång och arbetar med Communicate: InPrint. Habilitering & Hjälpmedel

InPrint. Grunderna för hur du kommer igång och arbetar med Communicate: InPrint. Habilitering & Hjälpmedel InPrint Grunderna för hur du kommer igång och arbetar med Communicate: InPrint Habilitering & Hjälpmedel Förord Communicate InPrint är ett program du använder för att skapa material för utskrift. Du kan

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

1. Beskär bilden och räta eventuellt upp bilden med beskärningsverktyget

1. Beskär bilden och räta eventuellt upp bilden med beskärningsverktyget Bildbearbetning i Photoshop Gör stegen i denna ordning. Det spelar roll. 1. Beskär bilden och räta eventuellt upp bilden med beskärningsverktyget 2. Kontrollera vilken färgrymd bilden har (OBS! detta går

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

Att visa flera filmer i samma film

Att visa flera filmer i samma film Att visa flera filmer i samma film Att visa flera olika scener eller klippbilder i samma ruta kan ibland vara användbart, man kanske vill visa olika personer samtidig i en parallell berättelse eller förstärka

Läs mer

Photoshop CS4. Adobe. Fortsättningskurs

Photoshop CS4. Adobe. Fortsättningskurs Photoshop CS4 Adobe Fortsättningskurs Innehållsförteckning 1 Färghantering...5 Färgomfång... 6 Behöver du färghantering?... 6 Kalibrera bildskärmen... 6 Färginställningar... 7 Arbetsfärgsrymder... 9 Färgmodeller...

Läs mer

Guide för pdf-formulär

Guide för pdf-formulär Guide för pdf-formulär Innehållsförteckning Rätt programvara... 3 Instruktion för automatiskt formulär... 3 Steg 1 Mall till pdf-format via Word... 3 Alternativt steg 1 Mall till pdf-format via Acrobat...

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

Macromedia Flash MX 2004

Macromedia Flash MX 2004 Mittuniversitetet ITM Telefon 0771-97 50 00 Erik Öberg Macromedia Flash MX 2004 Visuell kommunikation Detta exemplar tillhör: VT 2005 Laborationskompendium för Macromedia Flash Uppgift 1 Texthanteringen

Läs mer

Lathund för redaktörer. Lokala webbplatser Sacoföreningar, Sacoråd och Akademikerföreningar

Lathund för redaktörer. Lokala webbplatser Sacoföreningar, Sacoråd och Akademikerföreningar 2014-11-17 Lathund för redaktörer Lokala webbplatser Sacoföreningar, Sacoråd och Akademikerföreningar Åsa Widert Schoug Saco Box 2206 103 15 Stockholm Besök: Lilla Nygatan 14 Tel växel: 08-613 48 00 Fax:

Läs mer

Photoshop Elemements 2.0

Photoshop Elemements 2.0 Mittuniversitetet ITM Telefon 063-16 53 00 Photoshop Elemements 2.0 Laborationskompendium för grundläggande digital bildbehandling Detta exemplar tillhör: VT 2005 Innehållsförteckning Gränssnitt 1 Laborationskompendium

Läs mer

Microsoft Publisher. Laborationskompendium för digital behandling av publikationer. Detta exemplar tillhör:

Microsoft Publisher. Laborationskompendium för digital behandling av publikationer. Detta exemplar tillhör: Mittuniversitetet ITM Telefon 0771-97 50 00 Microsoft Publisher Laborationskompendium för digital behandling av publikationer Detta exemplar tillhör: HT 2006 Innehållsförteckning Objekt 1 Textblock 2 Tabeller

Läs mer

I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint.

I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint. Microsoft PowerPoint I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint. Allmänt Det första du ser i programmet

Läs mer

SymWriter. Lathund kring hur du arbetar med programmet SymWriter med de absolut vanligaste grunderna. Habilitering & Hjälpmedel

SymWriter. Lathund kring hur du arbetar med programmet SymWriter med de absolut vanligaste grunderna. Habilitering & Hjälpmedel SymWriter Lathund kring hur du arbetar med programmet SymWriter med de absolut vanligaste grunderna. Habilitering & Hjälpmedel Vad är SymWriter? Symwriter ingår i en serie som heter Communicate och riktar

Läs mer

Lathund GUL Lärare. Allmänt. Hur du presenterar Dig själv för kursdeltagarna. Hur du lägger upp din kontaktlista

Lathund GUL Lärare. Allmänt. Hur du presenterar Dig själv för kursdeltagarna. Hur du lägger upp din kontaktlista Lathund GUL Lärare Allmänt I plattformen kallas din kurs för aktivitet Första gången du loggar in GUL så kommer du att få välja vilket språk du vill att plattformen skall ha. Därefter kommer du in i plattformen.

Läs mer

Marie Andersson, IKT-centrum E-post: iktcentrum@mdh.se 2012-06-10 (Bb Learn 9.1.8) Wikis i Blackboard

Marie Andersson, IKT-centrum E-post: iktcentrum@mdh.se 2012-06-10 (Bb Learn 9.1.8) Wikis i Blackboard Marie Andersson, IKT-centrum E-post: iktcentrum@mdh.se 2012-06-10 (Bb Learn 9.1.8) Wikis i Blackboard Innehåll Om Wiki- funktionen... 1 Skapa en Wiki... 1 Lägg till/ redigera innehåll i en Wiki... 3 Läsa/skriva

Läs mer

DigitalBild del 1 Adobe Photoshop Elements ver 6.0

DigitalBild del 1 Adobe Photoshop Elements ver 6.0 Sidan 1 av 7 Innehåll Photoshop Elements ver 6.0... 2 Startfönster... 3 Öppna flera bilder samtidigt... 4 Öppna en egen gruppbild... 5 Gör en delförstoring (porträttbild) av varje person... 5 Spara...

Läs mer

Manual Introduktionskurs SiteVision

Manual Introduktionskurs SiteVision Manual Introduktionskurs SiteVision sidan 1 Manual Introduktionskurs SiteVision 20141125 Version 3 Innehållsförteckning Logga in 2 Redigera text 3 Om bilder på ale.se 6 Lägga till en bild 7 Lägga till

Läs mer

Manual för praktiker

Manual för praktiker Manual för praktiker Version: 2012-03-18 v.1 Innehållsförteckning Inloggning... 2 Logga in... 2 Glömt lösenord... 2 Logga ut... 3 Behandlingar / Tjänster... 4 Lägg in era behandlingar... 4 Hantering av

Läs mer

2. Markera område (se instruktioner längt ner på sidan) och markera Fastighetskartan och Laserdata till höger (se bild). Tryck på Ready.

2. Markera område (se instruktioner längt ner på sidan) och markera Fastighetskartan och Laserdata till höger (se bild). Tryck på Ready. Joakim Svensk, november 2013 Revidering av Fredrik Ahnlén, april 2014 Att generera OL-kartor från Laserdata Sedan 2009 har Lantmäteriet jobbat med att laserscanna hela Sverige för att skapa en bättre höjdmodell.

Läs mer

Detta sätt lämpar sig bra om man bara kort vill kommentera den inlämnade uppgifter som helhet. Gör så här:

Detta sätt lämpar sig bra om man bara kort vill kommentera den inlämnade uppgifter som helhet. Gör så här: FRONTER-LATHUND TRE OLIKA SÄTT ATT KOMMENTERA INLÄMNINGSUPPGIFTER PÅ Det finns tre olika möjligheter för att kommentera inlämningsuppgifter i Fronter Skriva i Fronters kommentarruta, kommentera direkt

Läs mer

InkScape. Inkscape är ett gratisprogram för objektgrafik (vektorgrafik) Man använder programmet till att illustrera, rita, skapa logotyper och figurer

InkScape. Inkscape är ett gratisprogram för objektgrafik (vektorgrafik) Man använder programmet till att illustrera, rita, skapa logotyper och figurer InkScape Inkscape är ett gratisprogram för objektgrafik (vektorgrafik) Man använder programmet till att illustrera, rita, skapa logotyper och figurer Gunnar Markinhuhta ITLyftet 2012-10-09 sida 1 Med Ctrl-tangenten

Läs mer

SÅindex 5 i Microsoft Excel 2010

SÅindex 5 i Microsoft Excel 2010 Installera/uppdatera/aktivera SÅindex 5 i Microsoft Excel 2010 Översikt SÅindex 5 är ett tillägg till Microsoft Excel. I SÅindex 5 finns en särskild fil som är en tilläggsfil (en addin). Filen heter Sindex5.xlam.

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

Resurscentrum för kommunikation Dako 2015. SymWriter 2. Minimanual

Resurscentrum för kommunikation Dako 2015. SymWriter 2. Minimanual Resurscentrum för kommunikation Dako 2015 SymWriter 2 Minimanual Symboler som stöd till det du skriver 2 F9 Byt symbol 2 F11 Skapa nya ord/symboler 3 Spara ändringar i ordlista 4 Specifikationer grammatik

Läs mer

Skapa ett register över din grupp/klass

Skapa ett register över din grupp/klass SYDSOL Handledning CW 2000-02-23 Skapa ett register över din grupp/klass Syfte: Att göra ett register i ClarisWorks och hantera olika informationer om en grupp/klass Pedagogens viktigaste uppgift är att

Läs mer

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker Sid 1 Laborationer i kursmomentet Datoranvändning E1 http://www.etek.chalmers.se/~hallgren/eda/ : Mer om FrameMaker 1996, 1997 Magnus Bondesson 1998 och 99-09-22 Thomas Hallgren 1 Introduktion I Laboration

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

Raw Hide. hantera camera raw-bilder

Raw Hide. hantera camera raw-bilder Fotograf: Scott Kelby Exponeringstid: 1/125 1/250 Brännvidd: 70 18 mm Bländaröppning: f/3.5 f/7.1 Kapitel 2 Hantera Camera Raw-bilder Raw Hide hantera camera raw-bilder Apropå rubriken om du tillhör den

Läs mer

En introduktion till Complex Drafting demo version

En introduktion till Complex Drafting demo version En introduktion till Complex Drafting demo version Demoversionen är det fullständiga Complex Drafting med undantag för att det inte går att spara mönster och inte heller skriva ut några egna mönster. Det

Läs mer

A3-scanner. Svenska. Användarhandbok

A3-scanner. Svenska. Användarhandbok A3-scanner Svenska Användarhandbok Hämta TWAIN-drivrutinen för scannern TWAIN-drivrutinen är den scanningsmodul som tillhandahålls med din scanner. Den är lätt att nå från de medföljande scannerprogrammen

Läs mer

ipad och AdobeReader

ipad och AdobeReader ipad och AdobeReader Innehållsförteckning Så använder du din ipad.1-2 Inställningar, SIM-kort, Wi-Fi, lösenkodlås 3 Internet..4 E-post..5 Adobe Reader.6-8 Övrigt om ipad..9 Vilo-/väckningsknapp, av-/påknapp

Läs mer

Instruktion för L-100 IF:s kartpärm

Instruktion för L-100 IF:s kartpärm Instruktion för L-100 IF:s kartpärm Rev PA2b 2014-05-27 I L-100 IF:s kartpärm på http://www.andli.com/doma kan du lägga upp dina kartor och hur du sprang så att alla kan se dem. Här beskrivs hur du publicerar

Läs mer

Version: 2012-08-13 v.1.0. Manual för praktiker

Version: 2012-08-13 v.1.0. Manual för praktiker Version: 2012-08-13 v.1.0 Manual för praktiker Innehållsförteckning Inloggning... 2 Logga in... 2 Glömt lösenord... 2 Logga ut... 3 Behandlingar / Tjänster... 4 Lägg in era behandlingar... 4 Redigera behandling...

Läs mer

Här kan du välja befintligt upplägg eller skapa ett nytt. Klicka på edit uppe till höger för att redigera och/eller skapat nytt.

Här kan du välja befintligt upplägg eller skapa ett nytt. Klicka på edit uppe till höger för att redigera och/eller skapat nytt. Start-skärmen Här kan du välja befintligt upplägg eller skapa ett nytt. Klicka på edit uppe till höger för att redigera och/eller skapat nytt. Det grå kugghjulet indikerar att du är i redigeringsläge och

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

Bildbehandling i Adobe Photoshop

Bildbehandling i Adobe Photoshop : Samuel Kvarnbrink samuel@acc.umu.se 16 november 2005 1 Uppgift Din beställare från en fackpresstidning ger dig i uppdrag att ordna fram en bra bild till en artikel som ska handla om den sensationella

Läs mer

Bloggen har tre sidtyper

Bloggen har tre sidtyper Handbok för bloggare i CMS7.5, på sunne.se Sida 1 av 12 Bloggen har tre sidtyper Blogginläggen Dina återkommande inlägg (berättelser, kåserier, personliga iakttagelser) som du skriver för din klass/grupp.

Läs mer

Användarmanual för Hemsida

Användarmanual för Hemsida Användarmanual för Hemsida Sida 1 av 44 Inledning Detta dokument är en användarmanual för redigerbara hemsidor utvecklade av. Du kan själv, i ett wordliknande gränssnitt, enkelt uppdatera din egen hemsida

Läs mer

Instruktion arbeta med rapportmallen

Instruktion arbeta med rapportmallen Instruktion arbeta med rapportmallen 29 oktober, 2015 INNEHÅLLSFÖRTECKNING 1 BÖRJA ANVÄNDA MALLEN 3 1.1 FYLLA I INFORMATION 3 1.2 INSTÄLLNING VISA /DÖLJ 3 1.3 INSTÄLLNING VISA TABELLSTÖDLINJER 3 2 FORMATMALLAR

Läs mer

2. Komma igång Skapa grupper och elever Skriv också ut sidan 13 så att eleverna har en snabbguide till programmet.

2. Komma igång Skapa grupper och elever Skriv också ut sidan 13 så att eleverna har en snabbguide till programmet. 2. Komma igång Skapa grupper och elever Börja med att läsa texten nedan om hur man börjar jobba med programmet efter installationen. Skriv gärna ut sidan och ha bredvid dig tills du känner att du behärskar

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

Svartvitt i Photoshop

Svartvitt i Photoshop Svartvitt i Photoshop Lathund Det här dokumentet är en liten lathund som du kan skriva ut och ha tillgänglig när du arbetar med dina svartvita bilder i Photoshop. Den innehåller en sammanfattning av kursens

Läs mer

LATHUND FRONTPAGE 2000 SV/EN

LATHUND FRONTPAGE 2000 SV/EN LATHUND FRONTPAGE 2000 SV/EN RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel

Läs mer

Webb: www.magnusfermin.se Email: mediaproducer@fermin.se Tel: +46 706 86 33 30. Utbildning i EpiServer för Konstfack.

Webb: www.magnusfermin.se Email: mediaproducer@fermin.se Tel: +46 706 86 33 30. Utbildning i EpiServer för Konstfack. Webb: www.magnusfermin.se Email: mediaproducer@fermin.se Tel: +46 706 86 33 30 Utbildning i EpiServer för Konstfack Övningsuppgifter Oktober 2010 Övningsuppgifter I mappen kursmaterial på skrivbordet i

Läs mer

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

Läs detta innan du fortsätter, eller skriv ut det, klicka runt lite och läs samtidigt.

Läs detta innan du fortsätter, eller skriv ut det, klicka runt lite och läs samtidigt. Bruksanvisning Installera CubeBiz... 2 Välj språk... 2 När du vill köra testversionen i 15 dagar... 3 När du köper en CubeBiz-licens... 3 Registrera en giltig licensnyckel... 3 Starta ett nytt projekt...

Läs mer

Kom igång. Version 3

Kom igång. Version 3 Kom igång Version 3 Installation & Inställningar Om du läser den här filen, har du troligtvis redan tagit dig igenom installationsprocessen hos PMView Pro. Den här sektionen är tänkt att guida dig genom

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

Webbteknik för ingenjörer

Webbteknik för ingenjörer Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera

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

Att använda laget.se

Att använda laget.se 2012 Att använda laget.se för ungdomsledare i MSSK Dokumentet är framtaget för att hjälpa till att förenkla användningen av lagens webbsidor. Har du förslag på ändringar eller ser felaktigheter kan du

Läs mer

ViTex snabbguide. 1. Inläsning till ViTex från scanner eller PDF Läs in text via scanner Läs in text från en JPEG-bild eller ett PDF-dokument

ViTex snabbguide. 1. Inläsning till ViTex från scanner eller PDF Läs in text via scanner Läs in text från en JPEG-bild eller ett PDF-dokument ViTex snabbguide 1. Inläsning till ViTex från scanner eller PDF Läs in text via scanner Läs in text från en JPEG-bild eller ett PDF-dokument 2. Uppläsning i ViTex Ikoner för uppläsning Läs upp enstaka

Läs mer

Struktur och innehåll Laboration 2

Struktur och innehåll Laboration 2 Laborationsanvisning Struktur och innehåll Laboration 2 Författare: Johan Leitet Version: 2 Datum: 2011-08-08 Inledning Till skillnad från laboration 1 som mest handlade om att komma igång med arbetsmiljön

Läs mer

Tips och tricks 1 Cadcorp SIS 5.2 2003-03-03

Tips och tricks 1 Cadcorp SIS 5.2 2003-03-03 Tips och tricks 1 Cadcorp SIS 5.2 2003-03-03 Skapa en raster pensel från en Windows bakgrund (1) 1. Kontrollera att Paper är uppsatt som koordinatsystem/projektion 2. Öppna en Bitmap fil i ett tom fönsterfil

Läs mer

Classfronter Vägledning för Studenter (version 1.1)

Classfronter Vägledning för Studenter (version 1.1) Classfronter Vägledning för Studenter (version 1.1) 1. LOGGA IN. VÄLJA RUM/KURS 4 3. SKRIVA IN INFORMATION OCH ÄNDRA PERSONLIGA UPPGIFTER. 4 4. ANVÄNDA HJÄLP-SYSTEMET 5 5. LÄSA MEDDELANDEN. 5 6. DELTA

Läs mer

Processen att frilägga objekt innehåller följande steg Att analysera bilden Markeringsverktyg

Processen att frilägga objekt innehåller följande steg Att analysera bilden Markeringsverktyg Friläggning av hår Att frilägga en bild tillhör de stora utmaningarna inom bildredigering och den största utmaningen av dem alla kanske är att frilägga hår och få ett godkänt resultat. Olika bilder innebär

Läs mer

Microsoft Windows 8 Grunder

Microsoft Windows 8 Grunder WINDOWS 8 GRUNDER Inledning Mål och förkunskaper...5 Pedagogiken...5 Hämta övningsfiler...6 Del 1 1 Introduktion till Windows Grundläggande om operativsystem...7 Starta och avsluta Windows 8...8 Välja

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

Handledning för redigering av lagsidor.

Handledning för redigering av lagsidor. Handledning för redigering av lagsidor. Hela sidan redigeras online vilket innebär att man sitter uppkopplad mot en server och utför sina kommandon. Kör igång webbläsaren och skriv in adressen: http://www.ronn.se/itw/

Läs mer

ADAD-net. Användarmanual INDIVIDEN. Råbe och Kobberstad Februari 2010

ADAD-net. Användarmanual INDIVIDEN. Råbe och Kobberstad Februari 2010 ADAD-net Användarmanual INDIVIDEN Råbe och Kobberstad Februari 2010 1 INNEHÅLLSFÖRTECKNING INNEHÅLLSFÖRTECKNING... 1 INLOGGNING OCH BEHÖRIGHETER... 2 STARTA PROGRAMMET OCH LOGGA IN... 2 BEHÖRIGHETSSYSTEM...

Läs mer

LÄSLANDET - BOKSTÄVER OCH ORD

LÄSLANDET - BOKSTÄVER OCH ORD LÄSLANDET - BOKSTÄVER OCH ORD Programmet består av 21 övningar som övar förmågan att känna igen bokstäver och ord. Här tränas såväl läsning som stavning och bokstavsordning. Du får hela tiden stöd av inspelat

Läs mer

SCHOLA COMAI ELEV WEBBKALENDER / SCHEMA VERSION 1.1. [Skriv text]

SCHOLA COMAI ELEV WEBBKALENDER / SCHEMA VERSION 1.1. [Skriv text] 20111206 SCHOLA COMAI WEBBKALENDER / SCHEMA VERSION 1.1 ELEV [Skriv text] Innehåll 1 Inledning... 3 1.1 Terminologi... 3 1.2 Teknisk kravspecifikation... 4 1.3 Behörigheter... 4 1.5 Start... 4 1.5.1 Grundinställning

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

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

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

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

Innehåll. WordWall låter dig som pedagog skapa övningar, aktiviteter och presentationer med några enkla klick.

Innehåll. WordWall låter dig som pedagog skapa övningar, aktiviteter och presentationer med några enkla klick. Wordwall innebär ett nytt sätt att arbeta interaktivt i klassrummet. Genom bara några klick skapar du interaktiva aktiviteter. Aktiviteterna kan sedan omvandlas och återanvändas på ett sätt som tidigare

Läs mer

Pagineringsgadget... 26 Ordlista... 27 Scen... 27 Spellista... 27 Slide... 27 Mall... 27 Innehållselement... 27 Gadget... 27

Pagineringsgadget... 26 Ordlista... 27 Scen... 27 Spellista... 27 Slide... 27 Mall... 27 Innehållselement... 27 Gadget... 27 Innehåll Interactive Scene 2.0... 4 Redaktörsmanual... 4 Översikt... 5 Redigeravy... 5 Verktygsfält... 7 Arbetsyta... 8 Egenskaper... 9 Tidslinje... 10 Arbeta med Interactive Scene... 11 Scener... 11 Spellistor...

Läs mer

Rita med ritstift. Raka banor Klicka med Ristiftet vid varje hörn.

Rita med ritstift. Raka banor Klicka med Ristiftet vid varje hörn. Rita med ritstift Raka banor Klicka med Ristiftet vid varje hörn. Mjuka kurvor Klicka, håll ned musknappen och dra i banans riktning. En hävarm dras ut på var sida om ankarpunkten. De sitter ihop som en

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

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

PIXLR #1 BILDBEHANDLING

PIXLR #1 BILDBEHANDLING PIXLR #1 BILDBEHANDLING lightbox image ronny hvass 2015 #1 Beskriver och visar en arbetsmetod från start till färdig bild. Arbetsmetoden innehåller få och enkla moment och fungerar på de allra flesta bilder.

Läs mer