Liten kurs i grafisk design av webbmiljö

Del 2

Låt oss fortsätta vår lilla kurs med hjälp av ett foto (som jag har fått låna av Sivan Tidholm) och Photoshop 5.5!

ros1.jpg.

Den här gången väljer vi rosen.

Vi börjar med att öppna filen i Photoshop 5.5 och markerar den genom att använda oss av Polygonal Lasso Tool bland Tools.

Arbeta i små steg, endast några mm i taget! När du kommit fram till stället där du började markeras det med en ring. Klicka där och markeringsbanan är sluten:

Spar nu denna bild, men välj i stället att spara filen som en PSD-fil, så förstörs inte bilden mer och mer för varje gång man sparar, vilket sker med en jpg-fil. Välj därför i menyn: ’Save as’ och välj filtypen PSD.

När vi nu har sparat ska vi kopiera den markerade rosen ( Ctrl + C) och välj sedan att Klistra in ( Ctrl + V). Vi kan nu se att detta skedde automatiskt in i ett nytt lager. Bra! Spara bilden.

Kontrollera hur bra du markerade genom att släcka det undre lagret. Putsa eventuellt bort lite.

Förstora gärna så att du ser alla detaljer som ska putsas bort. Spara igen! Nu ska du minska rosens storlek så att storleken är lämplig för en webbmiljö. Minska stegvis! Vid 700 tycker jag att bilden går bra att använda.

Skapa en ny bild/arbetsyta med måtten 760x560 och dra över rosen till denna.

Gör en kopia på lagret med rosen, för nu ska vi börja bearbeta denna.

Vi börjar med skärpan: I menyn väljer vi ’Filter’ – ’Sharpen’.

Sedan ska vi förändra färgerna något. Detta gör vi under ’Image’ – ’Adjust’ – ’Brightness/Contrast’, enligt bilden. Tryck OK.

Vi har nu ökat på ljuset i rosen, men dragit ner på kontrasten något, för att ge ett mjukare och mer romantiskt intryck. Spara bilden!

Skapa ett nytt lager under ros-lagren, men ovanpå bakgrunden. Nu ska vi lägga in en cirkel bakom rosen för att framhäva den. Det gör vi med Elliptical Marquee. Håll nere shift-tangenten samtidigt, så skapas en perfekt cirkel!

Välj en ljus färg och häll i färgen i den markerade ytan med hinken.

Sedan placeras cirkeln där vi vill ha den.

Så var det dags för bakgrundsfärgen!

Här brukar jag ofta utgå från komplementfärgerna. Dessa talas det om i flera olika sammanhang när det gäller färgbehandling på datorn. I detta fallet så menar jag inte de s.k. RGB-färgernas komplementsfärger utan komplementfärgerna i en annan färgcirkel som används inom traditionellt bildarbete. I denna färgcirkel är blå och orange, röd och grön samt gul och lila komplementfärger och passar utmärkt tillsammans.

Dessutom bör man ta hänsyn till färgernas intensitet. Färger med ungefär samma intensitet skapar en harmoni tillsammans och kan ofta vara lämpliga att blanda i bakgrunden olika element.

Men, ibland vill man ju framhäva något, i stället för att låta allt harmoniera! För mycket harmoni kan i mitt tycke ge ett dött och trist intryck.

Då kan man som i detta fall välja en lugnare omgivning till den intensiva rosen. Till rosen väljer vi därför någon lugn och sval komplementfärg, med lägre intensitet.

Resultat:

Nu ska vi lägga till lite effekter, både på rosen och på cirkeln!

Gå in under ’Layer Effects’ och experimentera!

Vi väljer att lägga på Drop Shadow, Inner Glow och Outer Glow, enligt förinställningarna.

För cirkeln väljer vi Outer Glow enligt förinställning, samt Inner Shadow enligt följande:

( Observera att färgen på skuggan är ändrad från svart till en blå kulör!)

Nu vill jag ha lite fler element i bilden, för att skapa en känsla av helhet i designen.

Vi skapar ett nytt lager som vi lägger in under lagret med cirkeln. Där gör vi en rektangulär markering och fyller rektangeln med en färg som harmonierar med bakgrunden, med hjälp av hinken. Jag skapar därefter ett nytt lager och gör en ny markering. Fyll denna med ytterligare en färg.

Resultat:

Jag inser att det hela ser väldigt stort ut. Jag behöver minska allt! Därför ändrar jag bildens bredd till 700. Det blir bättre!

Nu behövs lite text! En rubrik och så några ord för de grafiska länkarna i webbmiljön.

Vi börjar med rubriken för att hitta rätt stil.

Färgen plockar vi från rosen. Stilen får gärna vara lite lekfull. Och så lägger vi till lite effekter på texten, men bara lite i detta fall:

Så lägger vi till några texter för länkar, men med mindre stil!

Börja med att noggrant utforma ett ord – typsnitt, storlek, färg och Layer Effects.

Kopiera sedan detta gång på gång, och ändra enbart själva ordet i de olika lagren för att få samma stil på samtliga ord.

Nu vill vi sammanfoga orden med den övriga designen. Det kan gå bra genom att lägga ett grafiskt element bakom orden som sammanflätas med de övriga.

Skapa därför ett till lager under cirkeln och gör en vertikal markering som löper under de mindre texterna. Fyll markeringen med en passande färg. Avmarkera.

Skapa sedan ytterligare ett lager ovanpå den sist skapade rektangeln.

Detta blir nu Layer 7.

Markera en rektangel, men något större än den förra.

Vi placerar den lite snett ovanpå denna förra rektangeln, så att det skapas en känsla av rörelse i bilden!

Fyll denna med en mycket ljus färg, med dragning åt gult.

Välj sedan i menyn ’Select’ – ’Modify’ – ’Contract’. Ställ in på 1 pixel.

Välj sedan cut, eller Ctrl + X. I och med detta blir det bara kvar en linje av rektangelns form. Vill man kan detta lager kopieras i flera och läggas lite snett ovanför varandra. Prova och se!

Resultatet:

Skapa nu ännu ett nytt lager ovanpå det förra.

Välj sedan ’Select’ – ’Reselect’ i menyn. Fyll med samma ljusa färg!

Ställ ner opaciteten till 30% och avmarkera. Nu tycker jag att bilden är bra.

Dags att göra i ordning bilden för att webbmiljön ska kunna infogas i en tabell i en html-fil!

Vi börjar med att spara om filen i ett nytt namn, för att ha en fil som tål att misslyckas med under denna process! Vi döper denna till ”ros-cut.PSD”.

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

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

Detta gör vi för att vi ska kunna dela upp bilden, som innehåller Layer Effects i sina lager. Om vi inte omvandlade bilden till endast ett lager, skulle dessa Layer Effects fortsätta längs kanterna, där vi klipper/delar upp bilden.

Nu gör vi en rektangulär markering som går över hela bilden för att plocka ut toppbilden.

Med hjälp av kortkommandon går denna procedur mycket snabbt och effektivt:

Tryck Ctrl + C och sedan Ctrl + N. Sedan Ctrl + V. Voilá! Toppbilden är skapad!

Välj sedan ’File’ – ’Save for web’. Denna funktion är en viktig del när du jobbar med bilder för webben. Här kan du jämföra resultatet av olika komprimeringar m.m.

Man kan välja bland flikarna överst i hur många versioner av bilden som ska jämföras.

I dialogrutan får man välja ett filformat. Man kan välja GIF eller JPEG i olika upplösningar.

Prova gärna att byta filformat och undersök hur det påverkar storleken och kvalitén. Det går alltid att byta tillbaka, bilden du ser är bara en förhandsgranskning och originalbilden förändras alltså inte.

Just denna bild visar sig bli mindre sparad som en JPEG. 60% kvalité bör vi ha, annars blir texten grumlig och ful. Klicka på vald variant, sedan OK och välj sedan filens placering och filnamn.

Återgå där till filen ”ros-cut.PSD” genom att klicka på listen av bilden.

OBS! Behåll markeringen. Klicka inte bort den! ( Gör du det kan du förstås välja ’Select’ – ’Reselect’.) Gå därefter direkt in i menyn och välj ’Select’ – ’Inverse’ (Ctrl + I). Sedan Ctrl + C, Ctrl + N och så Ctrl + V. Bra! Då har vi den nedre delen av bilden i en egen fil.

Därefter ska menybilden plockas ut.

Gör en markering över denna, och hela vägen ner, inkluderat den nedre delen av cirkeln.

Klicka sedan Ctrl + C, Ctrl + N och så Ctrl + V. Då har vi menyn i en ny fil. Hade vi nu haft mer grafik som skulle passa in till höger om menyn, hade dessa bilder haft samma mått när vi gått tillbaka till det föregående steget.

Nu har vi inte det, och denna är onödigt hög. Vi klipper bort den nedre delen i bilden genom att markera med Crop Tool och klipp!

Genom denna metod behåller vi alla pixlar – inga pixlar försvinner på vägen, vilket annars lätt kan ske i skarvarna. Var därför noga med att alla effekter och uttoningar av dessa kommer med när du lägger markeringen, t.ex. i kanten mellan två bilder. Låt gärna lite av den helt solida bakgrundsfärgen komma med på kanten, för säkerhets skull.

Titta på följande bild. På högra kanten ser vi bara den blå bakgrundsfärgen. Cirkeln ska därför komma med, oskadad i kanten.

På detta sätt kan vi bara lägga in en angiven bakgrundsfärg i html-koden om inte en annan bakgrundsbild behöver användas.

Välj sedan ’File’ – ’Save for web’.

Egentligen var GIF-en snyggare, men det är bra att vara konsekvent vid valet av format, eftersom bilderna sedan ska pusslas ihop och ska vara lika varandra i kanterna.

Så var det bara bakgrunden kvar!

Då återgår vi till filen ”ros-cut.PSD” och gör en ny markering uppifrån och ner, längs högerkanten för att få med färgfälten som ska löpa längs hela bredden på html-sidan.

Därefter Ctrl + C, Ctrl + N, och så Ctrl + V.

Nu ska vi ställa in en lämplig storlek på bilden, d.v.s. på höjden eftersom det är en bakgrund som ska tåla att scrollas lite. Välj i menyn ’Image’ - ’Canvas Size’.

Placera ankaret i toppen och mitten, samt välj höjd 2000.

Scrolla ner bilden och se efter hur det ser ut. A ha – det saknas färg på bakgrunden!

Då är det bara att plocka bakgrundsfärgen med pipetten och hinka ut där det saknas!

Egentligen är bilden onödigt bred. Vi kan klippa den med Crop-verktyget. Se till att markeringen följer med ända ner till slutet av bilden!

Sedan tar vi återigen ’File’ – ’Save for Web’.

Nu är GIF ett bättre lämpat filformat, eftersom filen blir minst i detta format.

GIF är bättre på att komprimera färger utan större variationer, eller större fält med stora kontraster. Dessa bilder får dessutom en fin skärpa i GIF-format.

Därför fungerar GIF oftast dåligt att använda på foton med mycket variation i färger över ytan.

Då återstår till sist att infoga bilderna i en tabell i en html-fil.

Bakgrundfärgen ska vara # CFCEEC!

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

Texten och bilderna skyddas av lagen om upphovsrätt.