6. PNG-bilder 2: GräsVi ska titta på ett typiskt sätt att använda PNG-bilder på: Vi ska skapa en komponent som låter oss placera ut någorlunda realistiskt gräs. 6.1. Rotera ett material
6.1. Rotera ett materialInnan vi skapar gräset ska vi bygga en enkel ritning vi kan använda gräset i och samtidigt repetera ett par enkla men viktiga detaljer. Jag har ritat tre ytor: Två väggar och samt en markyta. Jag har täckt marken med ett gräsmaterial ur kategorin Vegetation och täckt den ena väggen med tegel ur kategorin Brick and Cladding. Sedan har jag täckt den andra väggen med materialet Cladding_Siding_Tan, även den ur Brick and Cladding.
Jag vill att de liggande brädorna ska vara stående istället, så jag högerklickar på den ytan och väljer Texture > Position.
Då utökas materialet så man lättare ser hur det upprepas, och de fyra modifieringsnålarna dyker upp. För att kunna rotera materialet så det blir stående behöver jag använda den gröna nålen -- men i det här fallet är alla nålar gula. Som du minns från förra lektionen så använder man de gula nålarna för att skeva detaljer i en viss bild så den bättre täcker ytan -- men då kan man inte använda nålarnas olika egenskaper.
Därmed högerklickar jag på materialet och väljer Fixed Pins i menyn som visas.
Då återfår de fyra nålarna sina olika egenskaper.
Man använder ju den gröna nålen för att rotera texturen, så jag håller ned musknappen på den...
... och flyttar pekaren runt gradskivan som dyker upp runt den röda nålen. Jag är noga med att hålla pekaren på den böjda hjälplinjen som visas runt gradskivan. Det gör att materialet inte skalas om utan behåller sin ursprungliga storlek -- det roteras bara. När jag roterat materialet ett kvarts varv släpper jag musknappen...
... och klickar utanför materialets yta. Då verkställs ändringen, så nu är brädorna stående istället för liggande.
6.2. Färga om ett materialJag ska dessutom färga om brädorna så de blir röda istället för beiga. Jag kan ju inte använda hinken på brädväggen eftersom brädorna ju bara är texturbilden i ett annat material. Däremot kan jag gå in i kategorin In Model i materialpaletten och klicka på brädmaterialet där. (Det går även att välja det genom att välja Paint Bucket-verktyget, hålla ned tangenten Alt (Windows) eller Cmd (Mac) och klicka på brädmaterialet i ritningen. Då markeras det materialet i paletten.)
Sedan kan jag klicka på fliken Edit ("Redigera") så visas det valda materialets egenskaper.
Här kan jag välja en röd nyans...
... så färgas materialet i ritningen. Då klickar jag på fliken Select för att återställa paletten.
6.3. Rotera en komponent på enklaste sättNu ska jag infoga ett fönster på brädväggen. Jag går in på Window > Components så komponentpaletten visas. Där skriver jag window i sökrutan och klickar på förstoringsglaset (eller trycker på Enter).
Alla komponenter som har med sökordet window att göra laddas in. Jag hittar ett fönster jag vill använda -- du hittar exakt samma fönster om du letar på window kyle1456. Jag klickar på det fönstret...
... och klickar in det i min ritning. Då ser jag att det ligger fel åt alla håll. Det är bara bra, för då får vi öva på att vända komponenter med.
Jag stänger komponentpaletten...
... och zoomar in på fönstret.
Det snabbaste och enklaste sättet att rotera komponenter på är att använda verktyget Move. När du pekar med det på en komponents sida så visas små röda plustecken. Då kan du klicka på dem för att rotera komponenten med den sidan som center. Jag väljer alltså verktyget Move och pekar på fönstrets "ovansida" (långsidan som är riktad uppåt just nu). Då visas små röda plus på den.
Jag pekar på ett av plusen och klickar. Då fästs en gradskiva vid fönstrets övre långsida.
Jag flyttar pekaren runt gradskivan tills fönstret är vänt mot väggen. Sedan klickar jag. (Var noga med att se att roteringen snärtar till mot någon av gradskivans "hack" innan du klickar fast den, annars blir roteringen lätt skev. Du känner av hacken bättre ju närmare gradskivan du håller pekaren.)
Då fastnar fönstret i det läget. Nu pekar jag med Move på fönstrets utåtvända sida. Då visas fyra röda plus.
Jag pekar och klickar på ett av plusen (det spelar ingen roll vilket). En gradskiva fästs på samma sida.
Jag flyttar pekaren runt gradskivan tills fönstret blir stående. Sedan klickar jag. Då är fönstret vänt åt rätt håll.
6.4. Skär hål för en komponentJag zoomar in på fönstrets ovansida och klickar med Move på någon av fönstrets yttre hörnpunkter som är närmast väggen.
Sedan trycker jag på en sidpekande piltangent för att låsa flyttningen längs den sidaxel som låter mig flytta fönstret rakt mot väggen. (Om du råkar låsa flyttningen vid fel axel så behöver du ju inte avbryta någonting: Tryck bara på den andra piltangenten istället.)
Då kan jag peka och på väggen, så trycks punkten jag drar i mot den ytan.
Just nu visar ju fönstret bara väggens brädor genom glaset. Ett snabbt sätt att göra en öppning för ett fönster i en vägg är att använda verktyget Rectangle...
... och klicka med det på någon av fönstrets yttre hörnpunkter som är tryckt mot väggen.
Klicka sedan på den diagonalt motsatta hörnpunkten. Då ritas en rektangel som får exakt samma storlek som fönstret, och eftersom fönstrets instans inte är öppen så fästs rektangeln på väggen.
Då kan man enklast vända kameran så man ser väggen från andra sidan och klicka på fönstret vars linjer skymtar genom den. Det får rektangeln vi just ritade att markeras...
... och då är det bara att radera den, så får vi en öppning för fönstret i väggen. Det finns naturligtvis många olika sätt att göra det här på, men det här är ett av de enklare.
Nu är själva ritningen klar, och vi har fått repetera några enkla men användbara knep. Då ska vi hämta en gräsbild.
6.5. Hämta en texturbild för gräsFördelen med vanliga saker som gräs i SketchUp och andra 3D-program är att det redan finns hundratals bilder som är färdiga att användas. Vi ska se hur vi hittar sådana. Starta en webbläsare och gå in på www.google.se. Klicka in markören i sökrutan...
... och skriv grass (alltså engelska för "gräs"). Tryck på Enter om det behövs. Då listas alla resultat, vilket förstås är en hel del.
Högst upp bland resultaten borde du nu ha en länk som heter Bilder på grass (eller liknande). Det är alltså en länk som leder till alla bilder som stämmer överens med sökordet grass, och det är ju bilder vi är ute efter, så vi klickar på den länken.
Då hamnar vi på Google Bilder (eller Google Images, vilket förstås är samma sak).
Högst upp bland resultaten finns samlingar med bilder som har samma filnamn. Ett sådant vanligt filnamn är grass.png, alltså bilder som bara döpts till grass och är av typen PNG. Det är precis sådana bilder vi är ute efter, så klicka på den samlingen.
Då öppnas samlingen. (Om du av någon anledning inte hittar fram till samlingen grass png kan du klicka på den här länken istället: grass.png.) Här visas de vanligaste bilderna som föreställer gräs och som är av typen PNG.
Det vi vill ha är en liggande rektangel med gräs som kan användas som material, så den lätt kan upprepas utan alltför tydliga hack. Då är ofta realistiskt gräs inte alltid så bra, eftersom man lätt ser hur samma bild upprepas. Illustrerat gräs fungerar oftast bättre. Vi hittar en bra sådan bild genom att klicka på knappen 100+ till (det finns alltså minst 100 fler gräsbilder av typen PNG att bläddra bland).
De övriga gräsbilderna laddas in. Då kan vi rulla nedåt...
... tills vi hittar en bild vi tycker passar. Målet är att välja en bild som visar gräs sett "från sidan", som har vit bakgrund, och som ser ut att kunna upprepas lätt -- alltså att man skulle kunna placera kopior av samma bild sida vid sida och inte direkt se skarvarna mellan dem. Realistiskt gräs brukar ofta inte riktigt passa för det ändamålet medan illustrerat gräs vanligtvis är gjort specifikt för att kunna upprepas. Vi hittar en sådan bild en bit ned bland resultaten -- du får samma bild jag väljer när du hittat en illustrerad gräsbild där varje strå har en mörk- och ljusgrön sida, och etiketten visar adressen s470.photobucket.com när du pekar på den. Klicka på den bilden. (Det kan förstås vara litet krångligt att hitta en bild bland tusentals andra, så du kan lika gärna klicka på den här länken för att komma till exakt samma bild: länk.)
Då öppnas den bildens sida -- och här ser vi det viktigaste med bilden vi valt: Dess bakgrund är egentligen inte vit utan genomskinlig. Det ser vi på att den består av ett grå/vit-rutigt mönster istället för slät färg. (Om du öppnar en PNG-bild på det här viset och den har vit bakgrund istället för det grå/vit-rutiga mönstret så betyder det att bakgrunden inte är genomskinlig utan helt enkelt vit. Då är det enklast att leta efter en annan bild istället -- men om du vill så kan du annars gärna spara den, öppna den i Pixlr, och radera den vita bakgrunden på samma sätt vi gjorde med granbilden tidigare. Sedan sparar du den ändrade bilden i formatet PNG, så kan du använda den på samma sätt som vi använder bilden jag valt nedan.) Klicka på knappen Visa bild.
Då visas bilden i sin riktiga storlek. Högerklicka på den och välj Spara bild som (eller liknande) i menyn som visas...
... och spara den i en passande mapp. Jag döper filen till gras.
Men vi ska inte använda den i SketchUp ännu -- som vi redan vet så är PNG-bilder ganska stora redan från början, och den här är inget undantag: Den är över 300KB stor, så vi behöver krympa den.
6.6. Krymp texturbildenGå in på www.pixlr.com och klicka på Pixlr Editor.
Klicka på Öppna en bild från din dator...
... och öppna bilden gras.png.
Bilden öppnas i programmet. Det första vi ska göra är att beskära den.
Välj Beskärningsverktyget...
... och håll ned musknappen någonstans nära bildens övre vänstra hörn.
Med musknappen nedtryckt, för pekaren snett nedåt åt höger tills du närmar dig själva gräsets nedre högra hörn. Då kan du släppa musknappen, så visas ett vitt rutnät mellan dina två klick. Rutnätet har blå fyrkanter i sina hörn. Vi kan använda dem för att dra ut rutnätet så det omsluter det område vi vill ha kvar av bilden. Håll ned musknappen på den nedre högra blå rutan...
... och för pekaren ned mot gräsets nedre högra hörn. Se till så att rutnätets kant inte hamnar bortanför gräsets neder- eller högerkant, annars kan det uppstå ett hack i bilden när vi väl använder den i SketchUp: Ha gärna någon pixel till godo vid kanterna; det gör i regel ingenting om man råkar beskära bilden aningen för mycket än för litet.
Dra sedan den nedre vänstra blå rutan mot gräsets nedre vänstra hörn.
Du kan dra i de övre rutorna med, men det behövs inte i det här fallet. Dubbelklicka istället någonstans i bilden...
... så verkställs beskärningen.
Nu är bilden beskuren så den blir lättare att hantera i SketchUp. Då ska den krympas. Gå in på Bild > Bildstorlek...
... så fönstret med samma namn visas. Se till att rutan Behåll proportioner är förbockad...
... och skriv in ett passande värde i någon av måttrutorna. Jag skriver 100 i rutan Höjd och klickar på OK.
Det gör gräsbilden 100 pixlar hög, vilket fungerar bra.
Då kan vi spara bilden. Gå in på Arkiv > Spara.
Skriv ett namn i rutan Namn. Jag skriver gras-litet. Se till att rutan Format är inställd på PNG. Klicka sedan på OK (och strax ovanför knappen ser vi dessutom att den här bilden bara är ungefär 30 KB stor till skillnad från originalversionen, som var tio gånger så stor).
Då får du ange var bilden ska sparas. Jag sparar den i samma mapp som originalet.
Nu är bilden gras-litet klar att användas i SketchUp.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||
