Liten kurs i grafisk design för webbmiljö

Del 3

Vi tar ett till exempel för att visa hur man delar upp en grafisk webbmiljö med hjälp av Photoshop 5.5. Vi ska utgå från en färdig webbmiljö, som jag har skapat vid ett tidigare tillfälle. Det här är en riktig utmaning, för bitarna ska passa ihop som i ett pussel i html-koden!

Vi börjar med att spara om filen i ett nytt namn.

Välj sedan ’Layer’ – ’Flatten image’ i menyn.

Nu återstår bara ett lager. Nu ska vi inte spara bilden igen!

Börja med att tänka ut hur vi kan lägga in webbmiljön i en html-fil. Det ljusa partiet i rutan i mitten ska användas för text och de grafiska texterna runt om ska vara klickbara.

Så här har vi tänkt oss att tabellen ska se ut, där de mindre del-bilderna av webbmiljön ska läggas in ( se de vita linjerna):

Vi börjar med att dela upp bilden i två delar.

Vi gör som jag visat tidigare genom att markera ena halvan av bilden, vilken senare ska delas upp i flera delar på höjden. Var noga med att ta med allt på höjden!

Vi gör som jag visat tidigare, markerar denna del och sedan Ctrl + C ( kopiera) och sedan
Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Sedan ska nu denna bild delas upp i mindre delar. Vi börjar med den övre delen ( se följande bild, del 1), markerar del 1, sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web” enligt tidigare instruktioner.

Därefter går jag tillbaka till föregående bild där markeringen fortfarande ligger kvar för del 1.

Välj nu ’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Nu har jag en bild som innehåller del 2 t.o.m. del 5! På denna markerar vi del 2.

sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Nu har vi en bild som ser ut så här:

Denna bild ska vi nu dela upp i mindre delar – en bild för varje ord, enligt samma metod.

Vi börjar med att markera det första ordet:

Sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Därefter väljer jag ”Save for Web” enligt tidigare instruktioner.

Sedan är det återigen dags att gå tillbaka till den föregående skapade bilden och välj

’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

och sedan Ctrl + N för att skapa den nya bilden.

Sedan Ctrl + V ( klistra in):

Markera nu det andra ordet:

Sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”:

Det är nu dags att gå tillbaka till den föregående skapade bilden och välj

’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

Sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden.

Markera nu det tredje ordet:

Sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Det är nu dags att gå tillbaka till den föregående skapade bilden och välj

’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

Sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Därefter går jag tillbaka till den bild som innehåller del 2 t.o.m. del 5!

Vi inverterar markeringen genom att välja ’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Denna bild innehåller nu del 3 t.o.m. 5 och jag fortsätter att dela upp denna bild enligt metoden jag nyss visat. D.v.s. jag markerar del 3, Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Därefter går jag tillbaka till den bild som innehåller del 3 t.o.m. del 5.

Vi inverterar markeringen genom att välja ’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Denna bild innehåller nu del 4 t.o.m. 5.

Jag markerar del 4, Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Därefter går jag tillbaka till den bild som innehåller del 4 t.o.m. del 5.

Vi inverterar markeringen genom att välja ’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera)

och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Denna bild innehåller nu del 5.

Denna del ska delas upp i tre delar. Detta gör vi genom att först markera den vänstra halvan av bilden, sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Så är det åter dags för ’Select’ - ’Select Inverse’ på den föregående bilden där markeringen för den vänstra halvan finns kvar, sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Denna del ska nu delas upp i en övre och en nedre del. Markera den övre delen, Ctrl + C

( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Välj ”Save for Web”.

Gå tillbaka till föregående bild med den övre halvan markerad och välj ’Select’ - ’Select Inverse’, sedan Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in). Därefter väljer jag ”Save for Web”.

Sedan återstår den andra halvan av webbmiljön – den till vänster om textrutan!

Vi går tillbaka till ursprungsbilden där markeringen för den högra halvan fortfarande finns kvar.

Vi inverterar markeringen genom att välja ’Select’ - ’Select Inverse’:

Sedan väljer vi kortkommandot Ctrl + C ( kopiera) och sedan Ctrl + N för att skapa den nya bilden. Sedan Ctrl + V ( klistra in).

Sedan ska nu denna bild delas upp i följande delar, enligt samma metod:

Det tror jag säkert att du nu klarar av, efter denna genomgång!

Lycka till!

Av Eva Lundberg, www.evasgraphics.se – september 2003

Texten och bilderna skyddas av lagen om upphovsrätt.