![[next]](next.gif)
![[previous]](previous.gif)
![[contents]](contents.gif)
11. Grafik för layout
Såvida du inte är fullständig minimalist lär du använda grafik på din sida. Det kan vara dels i layouten, dels som ren information (illustrationer), eller kanske en blandning. Blandningen är nog det snyggaste man kan åstadkomma. I det här avsnittet tänker jag använda ett litet exempel för att visa vad jag pratar om. Under arbetet med exemplet i Gimp ser det ut som nedan. Vill du kolla mer noggrant på hur saker är gjorda kan du ladda ned xcf'en.
Nåja, kom ihåg att ett visst mått av minimalism alltid är bra, du kommer vilja få ut så mycket som möjligt av de byte du har tillgängliga. Hela tiden handlar det om avvägningar, man brukar prata om att en hel sida får uppta absolut max 100 Kb, men det är en förenkling. För en sida med mycket text man vill läsa är det alldeles för mycket, speciellt om allt detta måste laddas innan man får se något alls. Å andra sidan, för en intro-sida där det rör sig om en animation som rullar framåt kontinuerligt eller om du har möjlighet att precachea/återanvända grafiken (se avsnittet om JavaScript) kan det nästan vara ok med tyngre saker.
Ok, jag är ingen riktig klippa på grafiken, men lite kan jag ändå. Jag kan bara skriva om hur jag brukar göra saker och ting, sen finns det folk som gör det både snyggare och bättre än jag gör...
Jag börjar med att sätta mig och rita upp hur jag vill ha saker och ting, sedan klipper man upp bilden, plockar ihop delbilderna med HTML och applicerar ev. JavaScript. Du vet inte hur du ritar något? Ingen fara, du kan antingen läsa in tipsen nedan, eller läsa några av alla tutorials som finns på nätet. http://wlug.westbo.se/gimp/ har en hel del som är läsvärda, men det finns förstås fler.
Exemplet ovan skulle kunna användas som en förstasida, läser du nästa avsnitt får se hur man kan lägga på några snygga effekter också, men så här gjorde jag sakerna ovan (tipsen är ganska generellt hållna och kanske svåra att sätta sig in i, men de är mest menade som en liten guide för Gimp, vill du ha en steg-för-steg-guide hänvisas du till någon annan grafisk tutorial):
- Cirkeln - en cirkulär markering (får man genom att hålla inne shift) fylld med en radiell toning, dra ihop markeringen 20 pixlar, och så en toning åt andra hållet.
- Menyn - först gör man en rektangulär markering, skapar ett tomt lager, fyller markeringen, kopierar lagret, flyttar det nedåt o.s.v. Hela tiden använder man flitigt "Alpha to selection", för att på ett smidigt sätt kunna arbeta med och spara markeringar. Rita en sned kant, Alpha to selection, och klipp bort merkeringen ifrån de tidigare rektanglarna.
- Runda hörn - runda hörn får man smidigt genom att blurra objektet, sedan använda Nivåer-dialogen för att snäva ned vit- och svartpunkterna kring lämplig gråton. På det sättet skärps objektets blurrade kant åter upp till en skarp, nu rundad kant.
- Bakgrund på knapparna - jag laddade in knapparnas kontur med en "Alpha to selection" och fyllde denna med ett av Gimps mönster. Avfärgade detta, la i ett lager ovanpå en röd-svart gradient inställt så att färgen fortplantas nedåt.
- Kant kring knapparna - återigen laddade jag in knapparnas kontur och körde en stroke på denna markering, bockade för "preserve transparency" och fyllde med en vit-blå gradient. Gjorde om samma sak för att få en kant som jag blurrade och använde denna som bump-map.
Härefter följer det lite bökigare. För att kunna använda bilden i delar på sidan, kunna ladda in andra delar o.s.v måste man klippa upp den. Man tänker efter en stund och lägger sedan ut några hjälplinjer likt de i bilden ovan, sedan markerar man arean man vill kopiera (använd "copy visible", Ctrl+Shift+C), skapar en ny bild och klistrar in urklippet där.
Om vi ovan inte skulle brytt oss om att göra onmouseovers på menyn kunde vi gjort den i ett stycke, det är avvägningar man får göra, man ska inte göra det onödigt bökigt för sig.
Se nästa avsnitt om hur vi plockar ihop bilden igen.
Innan vi kan spara våra urklipp som gif måste vi dra ned antalet färger (helst till en jämn potens av 2 - d.v.s. 2, 4, 8, 16, 32, 64, 128 eller 256). Vill vi ändå använda transparens samtidig med en effektiv dithering är det smidigast att använda trollspöt för att markera bakgrunden medans den fortfarande är homogen och sedan, när ditheringen i färgreduceringen har förstört bakgrunden, klippa bort markeringen. Se bara till att ha toleransen på trollspöt ställd till 0. Använder man denna metod för färgreduceringen kan man ofta nöja sig med förvånansvärt få färger. Ovan behövde jag som mest 32 färger för de aktiva menyerna, annars räckte det med 16.
Spara bilderna med vetiga filnamn så att de är lätta att hålla ordning på sen, en stor site blir omöjlig att hålla reda på om man strör filerna omkring sig.