Mac   Windows
Cmd (nedersta raden)   Shift (näst nedersta raden)
 
   
Shift (näst nedersta raden)   Ctrl (nedersta raden)
 
Ctrl (nedersta raden)   Alt (nedersta raden)
 
Alt (nedersta raden)   Esc (övre vänstra hörnet)
 
Esc (övre vänstra hörnet)   Backspace (ovanför Enter)
 
Delete (vid Enter)  
 

 
SketchUp grundkurs Barents hus AB Nätbildarna Svefi - Sverigefinska folkhögskolan

3. Om PNG-bilder

Vi har hittills nästan uteslutande använt oss av bilder av filtypen JPG, eller JPEG (det är exakt samma sak), när vi hämtat in egna material eller importerat bilder i våra ritningar.

Men det finns en annan filtyp för bilder som också är väldigt vanlig i 3D-sammanhang. Den heter PNG.

PNG-formatets tydliga nackdel jämfört med JPG är att PNG-bilder lätt blir väldigt stora till filstorleken. Men dess tydliga fördel är att de till skillnad från JPG-bilder kan innehålla genomskinliga områden.

Här är ett enkelt exempel: Jag har ritat en rektangel.

 

Sedan väljer jag exempelvis materialet "Fencing_Lattice_Natural", det beiga krysset, ur kategorin Fencing ("Stängsel")...

 

... och klickar med hinken på rektangeln jag ritat. Då läggs det mönstret in över rektangeln, och här ser vi nu att materialet innehåller genomskinliga områden. Det kan det göra eftersom texturbilden materialet använder är en PNG-bild, och personen som skapade den såg till att områdena mellan linjerna skulle vara genomskinliga istället för ifyllda.

Om texturbilden hade varit av formatet JPG hade den varit vit på de ställen där det här materialet är genomskinligt.

 

Vi ska titta på några enkla vis vi kan använda PNG-bilder i SketchUp.

 

 

 

4. PNG-bilder 1: Ge en bild genomskinliga områden och importera den

Vi ska se hur vi kan hämta en vanlig bild, ge den genomskinliga områden, och sedan importera den ändrade bilden i SketchUp utan att de genomskinliga områdena försvinner eller fylls med färg. På så vis kan vi enkelt göra exempelvis texturbilder med genomskinliga områden i eller skapa bilder som blir färdigt utklippta när vi importerar dem.

4.1. Hämta en bild
4.2. Öppna bilden i pixlr.com
4.3. Placera bilden på ett eget lager
4.4. Skär bort bakgrunden runt bilden
4.5. Beskär bilden
4.6. Krymp bilden
4.7. Spara bilden i filformatet PNG
4.8. Importera bilden i SketchUp
4.9. Gör det importerade objektet till en komponent
4.10. Göm objektets yttre kantlinjer

 

 

 

4.1. Hämta en bild

I det här fallet ska vi hämta en enkel, handritad bild med tydliga konturer eftersom de i regel är enklast att ändra på. Processen vi går igenom nu går alltså att utföra på hurdan sorts bild som helst, men eftersom det här bara är ett exempel ska vi hålla det hela enkelt så det blir så tydligt som möjligt -- det blir nämligen betydligt svårare om man vill ändra på en "vanlig" bild, åtminstone om den inte har tydliga kanter i form av skarpa färg- eller kontrastskillnader runt de områden du vill göra genomskinliga.

Ett snabbt sätt att hitta handritade bilder på är att gå in på gratisgalleriet Stock.xchng, som vi tittade på i förra lektionen, så vi kan gå på www.sxc.hu.

Logga in i galleriet (om du inte redan loggas in automatiskt) genom att klicka på Sign in-knappen uppe i det högra hörnet. När du är inloggad, klicka på Advanced Search till höger om sökrutan vid överkanten.

 

Då visas fler rutor vi kan använda i vår sökning. Vi ska hitta en bild på ett träd, så vi kan skriva in sökordet tree (alltså "träd" på engelska, eftersom man måste ange sökorden på engelska) i rutan Search for ("Sök efter").

 

Klicka sedan på pilen vid rutan Type, längst till höger...

 

... så får du välja mellan alla typer av bilder ("any"), endast foton ("photos") eller handritade bilder ("graphics"). Vi väljer det sistnämnda.

 

Klicka sedan på knappen Search så får vi fram alla bilder i Stock.xchng som stämmer överens med sökordet tree och är handritade.

 

Jag hittar en passande bild på sida 4 av resultaten och klickar på den. (Exakt vilken sida av resultaten den här bilden ligger på kan komma att ändras med tiden i takt med att fler liknande bilder laddas upp av galleriets användare -- men direktlänken till bilden jag klickar på är: http://www.sxc.hu/photo/1372566.)

 

Då visas den bildens sida. Klicka på bilden igen...

 

... så visas den i originalstorlek. De flesta bilderna i galleriet Stock.xchng är som sagt anpassade för tryck, så de är väldigt stora. Det är förstås något vi ska rätta till, annars blir vår SketchUp-ritning flera megabyte stor så snart vi importerar bilden.

Högerklicka på den stora bilden och välj Spara bild som (eller liknande) i menyn som visas...

 

... och välj att spara den någonstans där du lätt hittar den. Jag sparar den direkt på mitt skrivbord eftersom jag ändå ska slänga bilden sedan -- när vi väl är klara behövs inte originalet längre, såvida du inte vill ha kvar det. Jag döper bilden till julgran och sparar den. Den är i formatet JPEG, vilket är något vi strax kommer att ändra på.

 

 

 

4.2. Öppna bilden i pixlr.com

Gå nu in på www.pixlr.com. (Allt vi gör i Pixlr går ju även att göra i exempelvis Photoshop, om du hellre använder det programmet.)

Klicka på Pixlr Editor.

 

Då får du välja vad du vill göra. Klicka på Öppna en bild från din dator...

 

... och bläddra fram till bilden du just sparade (bilden julgran i mitt fall).

Klicka på den, och klicka sedan på Öppna.

 

Då öppnas bilden i Pixlr.

Nu ska vi göra bakgrunden runt trädet genomskinlig istället för vit. Sedan ska vi krympa ned trädet till en mer hanterbar storlek, och slutligen spara resultatet i bildformatet PNG istället för JPEG så genomskinligheten följer med när vi väl importerar den i SketchUp.

 

 

 

4.3. Placera bilden på ett eget lager

När man öppnar en vanlig JPG-bild i Pixlr (eller Photoshop) så består bilden av ett enda lager. Det ser vi om vi tittar på panelen Lager längst till höger -- där finns bara en rad, och den heter alltid Bakgrund.

Bakgrundslagret är dessutom markerat med ett hänglås. Hänglåset betyder att vi inte kan göra precis vad vi vill med det: Det är väldigt begränsat.

 

En sådan begränsning är att man inte kan göra områden genomskinliga i bakgrundslagret. Så för att kunna göra områden genomskinliga behöver vi först placera vår bild på ett eget vanligt lager. Vanliga lager är inte begränsade på något vis, så vi kan göra områden genomskinliga i dem.

Det enklaste sättet att få vår gran att hamna i ett eget, vanligt lager är att först kopiera den och sedan göra en helt ny bild där bakgrunden inte är vit, utan genomskinlig. Sedan klistrar vi in granen i den nya bilden.

Allt man klistrar in hamnar nämligen automatiskt på ett eget, vanligt lager som helt saknar begränsningar. Då kan vi sudda bort det vita området runt granen, så visas den nya bildens genomskinlighet där det vita var. Resultatet blir att det då är genomskinligt runt granen istället för vitt.

Men först måste vi alltså markera och kopiera granen. Det enklaste sättet är att gå in på menyn Redigera > Markera allt.

 

Då får bilden en streckig markeringsram runt sina kanter: Allt i hela bilden är alltså markerat nu.

 

Då kan vi kopiera det markerade området -- alltså hela bilden -- genom att gå in på Redigera > Kopiera.

 

Nu har det markerade området -- alltså hela bilden -- hamnat i datorns minne.

Då kan vi skapa en helt ny bild med genomskinlig bakgrund. Gå in på Arkiv > Ny bild.

 

Ett fönster med samma namn visas. Här finns ett par rutor som behöver vara rätt inställda för att allt ska bli som vi vill ha det: Rutan Presets ("förinställningar") måste vara inställd på Clipboard. (Värdena efter "clipboard" spelar ingen roll.) Det kan hända att rutan är inställd på Clipboard från början.

När rutan Presets är inställd på Clipboard kommer nämligen den nya bilden automatiskt att få exakt samma storlek som området vi just kopierade, vilket är precis vad vi vill.

(Om du inte kan välja Clipboard i rutan Presets så har du inte kopierat någonting ännu. Klicka i så fall på Avbryt och upprepa det här steget från början.)

 

Sedan måste rutan Transparent (alltså "Genomskinlig") vara förbockad. Det gör att bakgrunden i den nya bilden vi är på väg att skapa blir genomskinlig istället för vit.

(Bocka inte för rutan Skapa bild från utklipp, annars kommer det vi kopierade att bli den nya bildens bakgrundslager, och då är vi tillbaka där vi började.)

 

Nu är rutan Presets inställd på Clipboard, så bilden blir lika stor som det vi just kopierade, och rutan Transparent är förbockad så den nya bildens bakgrundslager blir inte bara tomt utan helt genomskinligt. Då kan vi klicka på OK...

 

... så får vi en sådan bild. Det grå/vit-rutiga mönstret är bara standardsättet för grafikprogram att visa att något är helt genomskinligt -- det följer inte med när vi väl är klara med bilden.

 

Nu kan vi gå in på Redigera > Klistra in...

 

... så klistras det vi kopierade in i den nya bilden.

 

Om vi nu tittar på paletten Lager så ser vi att det finns två rader i den nu: Lager 0, längst ned, samt Lager 1 ovanför det. Det betyder att det genomskinliga Lager 0 ligger under bilden vi just klistrade in. Det är så vi vill ha det.

Se till att raden Lager 1 är markerad (alltså blå), om den inte redan är det, genom att klicka på dess namn.

Nu ska vi skära bort det vita runt granen så det blir genomskinligt där.

 

 

 

4.4. Skär bort bakgrunden runt bilden

Välj verktyget Trollspö markeringsverktyg i knappraden längs vänsterkanten.

 

Klicka sedan någonstans på det vita runt granen.

 

Då markeras allt det vita runt granen. Det ser vi på att det nu läggs in en streckig ramlinje inte bara runt bildens kanter, utan även runt granen. Allt mellan dem är nu markerat, vilket i det här fallet innebär den vita färgen.

Det här verktyget används alltså för att snabbt markera sammanhängande, enfärgade områden (eller någorlunda enfärgade -- det kan även känna av mindre nyansskillnader) så som den vita bakgrunden runt trädet. Det är därför man oftast vill ha enfärgade bakgrunder bakom sina motiv, så man lätt kan markera dem så här. Om det hade varit t ex en normal skogsmiljö runt granen hade det varit mycket svårare att markera.

 

Nu kan vi radera det som är markerat: Gå in på Redigera > Clear.

 

Då skärs allt som finns inuti markeringen bort, och vi ser det genomskinliga lagrets grå/vita mönster där det tidigare var vitt. Det innebär att det nu är helt genomskinligt runt granen.

Man kan göra på samma sätt om man t ex vill ha en bild där ett fönster ska vara genomskinligt: Då är det bara att gör en markering (inte nödvändigtvis med Trollspöt, utan med det markeringsverktyg du tycker passar) runt det du vill radera och sedan gå in på Redigera > Clear.

 

 

 

4.5. Beskär bilden

När man importerar en bild är det alltid enklast om den inte har något onödigt tomrum runt sig, så vi ska skära bort tomrummet runt granen så bildens kanter precis nuddar i granens konturer. Det kallas för att beskära en bild.

Vi har ju igång en markering som omgärdar allt runt granen (och om du inte har det, klicka på verktyget Trollspö markeringsverktyg och klicka sedan på tomrummet runt granen).

För att få markeringen att omgärda själva granen istället för tomrummet runt den kan vi gå in på Redigera > Invertera markeringen.

 

Det får markeringen att omsluta det som tidigare inte var markerat. I det här fallet innebär det alltså att det inte längre är tomrummet runt hela granen som är markerat, utan nu är det själva granen som är markerad istället. Det ser vi på att det ju är allt som ligger innanför den streckiga ramlinjen som är markerat, och just nu är det själva granen, inget annat.

 

Då kan vi gå in på menyn Bild > Crop (engelska för "Beskär")...

 

... så klipps allt utom det som är markerat -- alltså granen -- bort. Nu är bilden exakt så stor den behöver vara för att endast den markerade granen ska få plats.

Markeringen stängs dessutom av automatiskt. Det gör ingenting, för den behövs inte längre. (Om markeringen är kvar hos dig, gå in på Redigera > Avmarkera allt.)

 

 

 

4.6. Krymp bilden

Bilden är beskuren, men den är fortfarande väldigt stor och skulle bli tung att jobba med i SketchUp -- så vi behöver krympa den till en mer lätthanterlig storlek.

Gå in på Bild > Bildstorlek.

 

Fönstret Bildstorlek visas. Se till att rutan Behåll proportioner är förbockad...

 

... och klicka i någon av de två måttrutorna. Markera värdet i den...

 

... och skriv in något eget. Jag byter ut värdet i rutan Höjd mot 500. Det får alltså granen att bli exakt 500 pixlar hög, och eftersom rutan Behåll proportioner är förbockad så ändras även värdet i den andra rutan (Bredd, i mitt fall) automatiskt så bilden inte blir utdragen åt något håll.

Jag klickar på OK.

 

Då blir bilden genast mycket mindre.

Det här är inte dess riktiga storlek, den är bara lika kraftigt utzoomad som den var när den först öppnades i programmet.

 

Om du vill se bildens nya normala storlek kan du hålla ned musknappen på dragknappen i paletten Navigator, uppe till höger...

 

... och dra knappen åt höger tills det står 100 i rutan. Just 100% betyder "varken in- eller utzoomad".

 

Så här stor är bilden nu. Det är lagomt för SketchUp. (Du behöver inte ändra zoomningen om du inte vill, det har ingen "fysisk" påverkan på bilden vare sig här eller i SketchUp.)

 

 

 

4.7. Spara bilden i filformatet PNG

Nu ska vi spara bilden. Gå in på Arkiv > Spara...

 

... så visas fönstret Spara bild.

Ange ett namn för bilden i rutan Namn (jag låter den heta julgran).

 

Klicka sedan på pilen vid rutan under Format...

 

... och välj PNG i listan som visas.

 

Då kommer alltså bilden att sparas i formatet PNG. Nu ser vi genast att två saker händer: Det vita runt granen i exempelbilden blir grå/vitrutigt istället för vitt, vilket innebär att genomskinligheten vi raderade fram kommer att behållas. Dessutom så ökar filstorleken, vid Storlek nere till höger, från 31 KB till 49 KB. Det är ändå en ganska liten storlek, så det gör ingenting -- det är när den börjar närma sig 100 KB man kanske behöver krympa ned bilden ytterligare.

Jag klickar på OK...

 

... så får jag spara bilden. Det är ju den här versionen av bilden jag vill använda i SketchUp, så jag sparar den i en passande mapp på min dator. Originalet behövs inte längre och kan raderas om du inte vill ha kvar det.