1. Det absolut första vi ska göra är att tänka efter; "Vilka bilder behöver vi lägga in i en tabell?" Det här är riktigt knepigt och det kräver god planering. Vi tittar lite på interfacet igen. Logotypen (som inte är med på bilden) behöver givetvis inte vara med i tabellen, den kan man behandla som vanlig text. De tre knapparna högst upp behöver man faktiskt inte heller ha. Därför börjar vi med att spara dem som separata filer.

Om du inte redan har linjalerna framme, ta fram dem nu (i Photoshop alltså, du behöver ingen analog linjal). Tryck Ctrl+R för att få fram dem. Om du klickar på en linjal, håller musknappen nere och drar den ut mot bilden, kommer en blå linje fram, en stödlinje. Placera ut några sådana runt knapparna, ungefär som på bilden nedan.

Se till att hela knapparna är med. Zomma gärna in lite när du håller på med stödlinjerna, så du ser att de kommer exakt där du vill ha dem. Om du skulle tappa en stödlinje på fel ställe, använd 'Flytta'-verktyget (V) på linjen. För att ta bort en linje, dra tillbaka den till linjalen igen.

2. Varför gå såhär till väga? För att bilderna blir väldigt exakta. Är de inte exakta kommer de inte att passa ihop på slutet och då är allt jobb förjäves. Man kan få det exakt om man gör det utan stödlinjer också, men det tar betydligt längre tid.

3. När du är klar med knapparna kan du gömma dessa lager. Nu är det dags att gnugga geniknölarna rejält. Resten av navigationssystemet ska in i tabeller. Jag har markerat upp hur jag kommer att skära ut bilder utav det vi har gjort här. Lägg märke till att jag tagit bort stödlinjerna till knapparna, de behövs inte längre. Denna bild kommer att användas som grund för de mindre som kommer att visas nedan.

4. För att göra det hela lite lättare för oss, skapar vi ett sista lager, som vi kallar 'Slice'. Detta lager använder vi för att fylla de områden som vi klipper ut med olika färger. Detta lager kommer väldigt väl till pass när vi ska stuva in bilderna i en tabell. Vi börjar med en mjukstart på lagret och fyller de områden som bara har bakgrundsfärgen med vitt. Dessa områden behöver du inte göra några bilder av sedan.

5. Nu ska du skapa mindre bilder utav det som är kvar. Markera vad du vill ha som bild och välj 'Kopiera sammanslagna' (Ctrl+Shift+C) för att slå ihop alla lager till urklippsbufferten. Tryck Ctrl+N för att skapa en ny bild och tryck Enter direkt. Photoshop känner av vilken storlek bilden ska ha. Klistra in bilden (Ctrl+V) och spara (använd gärna 'Spara för webben, Ctrl+Shift+Alt+S). För varje område du kopierat ihop, fyll markeringen med en ny färg i 'Slice'-lagret. Mot slutet blir det riktigt färggrant!

Kom ihåg att du hela tiden ska gå mot stödlinjerna, men du behöver inte alltid gå till den närmaste. Titta närmare på bilden till höger (klicka på den) för att se hur jag menar. Om du inte ser direkt, så är det den stora 'Hem'-knappen som dragits ner 2 rader. I det här fallet var det inte fler, men ofta blir det värre!

6. Nu kanske du sitter och undrar varför du gör färggrann mosaik. Detta är mallen för hur du sedan kommer att konstruera din tabell. Mer om det senare, först ska bilderna optimeras. Som du kanske märkt är kantbitarna långa och med upprepade mönster. Om man istället för att ha en hel bild med detta, skär ner den och har som bakgrundsbild i en cell, klarar man sig gott på en 20-30 pixlar bred bild. Detta gör vi för att spara utrymme. Nedan ligger de bitar jag optimerat, ser ni dem tror jag ni förstår principen.