Liten kurs i grafisk design av webbmiljö

Del 1

Låt oss se vad vi kan skapa med hjälp av några foton och Photoshop 5.5.
Vi har följande fina bilder att utgå från som jag har fått låna av Sivan Tidholm:

engelskpelargon.jpg engelskpelargon2.jpg

hostblomma.jpg ros1.jpg.

Filen ’engelskpelargon2.jpg’ har starka, härliga färger och det är fin kontrast mellan blomman och bakgrunden. Den här bilden blir kul att börja med! Först kan vi titta på bildens storlek. Detta gör vi under ’Image’ – ’Image size’ i menyn. Då ser det ut så här:

Här ser vi bildens storlek i pixlar, sedan den storlek bilden har om vi skulle skriva ut den och sedan hur hög upplösning vi har på bilden. I detta fall är den 72 dpi, vilket är lämpligt för webben, men inte för tryck! Där bör den vara 300 pixels/inch, eller i alla fall mellan 200-300.

För webben bör man snarare föredra 72 pixels/inch, eftersom bilden då blir lättare räknat i kilobyte och laddas ner snabbare från servern på Internet. För bildskärm räcker alltså denna låga kvalité – den kan inte visas så mycket bättre i alla fall!

När vi nu börjar med att bearbeta bilden ska vi ju först ha någon form av idé hur bilden kan komma till sin rätt i en grafisk design för en webbsida. I den här bilden skulle jag vilja plocka upp krukans färg och den ljusa gröna färgen i fotot, som kontrasterar så fint mot pelargonens röda färg. Kanske kan vi skapa något som påminner oss om något sommaraktigt och trädgårdslikt?

Vi ska hur som helst använda hela bilden som den är, inte bara en del av den. Vi börjar därför med att förminska den till lagom storlek! Detta görs stegvis för att bibehålla kvalitén.

Vi startar med att ställa in följande värde under ’Image’ – ’Image size’ i menyn:
Pixel Dimensions: width 1200, klicka OK – se till att rutan Constrain propotions är i kryssad!

Därefter minskar vi på samma sätt till 900, därefter 700, så till sist 500. Nu har bilden en lämplig storlek.

OBS! Spar EJ bilden! Då skrivs originalet över och det är inte meningen.

Nu ska du istället skapa en ny bild som kommer att fungera som vår arbetsyta. Vi går in under ’File’ – ’New’ i menyn, fyller i värdena som i följande bild nedan och trycker OK.

Varför fyllde jag nu i dessa värden?

Jo, jag gav först bilden ett namn, sedan ser jag till att skapa en bild som är 760 pixlar bred och 560 pixlar hög. Jag utgår då från att denna webbmiljö ska kunna rymmas på en bildskärm med 800x600 pixlars upplösning. Sedan måste jag ta bort lite, eftersom bilden inte går riktigt ut i kanten. Ofta finns en scrollningslist och lite störande lister i webbläsaren, både upptill och nedtill.

Sedan är det inte så kul att skapa i en alltför liten arbetsyta, så det här brukar vara en bra storlek.

Vi väljer resolution 300, om vi skulle vilja använda en del av bilden någon annanstans, kanske för utskrift.

Sist väljer vi en transparent bakgrund så kan vi ”släcka” alla bakgrundslager, om vi vill skapa en transparent GIF av någon del av bilden.

Nu ska vi kopiera pelargonbilden till den nya arbetsytan. Detta kan göras på två sätt:
1. Markera bilden med pelargonen. Tryck Ctrl + A, därefter Ctrl + C och gå över till den nya arbetsytan (markera denna!) och tryck Ctrl + V. Då klistras bilden in på den nya arbetsytan.

2. Markera bilden med pelargonen. Bland Tools, välj flyttverktyget och markera sedan pelargonbilden igen. Dra över bilden till den nya arbetsytan som ligger bakom.

Stäng bilden engelskpelargon2.jpg, men spar den inte! Återgå till den nya arbetsytan och välj var vi ska placera bilden på pelargonen. Jag föredrar att lägga den i nederkant i detta fall.

Sedan skapar vi ett nytt lager för bakgrunden (Se bilden ovan – den röda symbolen längst ner till höger.) :

Flytta sedan lagret genom att ta tag i det och dra det under Layer 2, och släpp!

Nu ska det se ut så här:

Nu jobbar vi i det markerade lagret. Detta kan du namnge genom att dubbelklicka på det.

Vi väljer nu ut en lämplig bakgrundsfärg. I den röda ringen kan du se en kulör som jag tror kan passa! En relativt ljus färg, men varm.

Ta pipettverktyget bland Tools och ”känn dig för”! När vi hittat rätt tar vi hinken bland Tools och häller ut bakgrundsfärgen!

Ibland provar jag med flera bakgrundslager, släcker dem ett efter ett och jämför genom att klicka på ögat som finns bredvid varje Layer.

Vi återgår till Layer 2 med pelargonen. Kanske är den lite stor? Vi ska minska ner den lite! Högerklicka och välj Layer 2, om du inte redan är i det lagret.

Välj nu ’Edit’ – ’Transform’ – ’Scale’ i menyn.

Ett tips är att du nu håller ner shift-knappen samtidigt som du drar i ett av de markerade hörnen, för att bibehålla proportionerna när du minskar bilden. Jag minskade storleken med ca 25%.

När vi är nöjda med den nya storleken, klickar vi bara på något annat verktyg bland Tools. Man får då frågan om man vill ”apply” - applicera - eller ej. Det vill vi!

Hoppsan - nu kan det vara dags att spara PSD-filen innan vi fortsätter! Jobba ALLTID i PSD-format till dess att det är dags att anpassa bilden för publicering någonstans! JPEG-format vore förödande, eftersom den komprimeras för varje gång man sparar den, och bildens kvalité blir därför sämre och sämre.

Nu ska vi bearbeta lagret med pelargonen.

Gör en kopia på detta lager genom att dra Layer 2 till nytt-lager-symbolen i Layer-paletten, och sedan släpp:

Då ser vi till att vi befinner oss i ”Layer 2 copy”, och kan nu släcka original-lagret, som på detta sätt finns kvar i PSD-filen, men oförändrad.

Detta gör jag ofta - kopierar lager och spar, som en form av backup-fil. Genom detta törs jag experimentera ohämmat utan risk att förstöra ett resultat som hade kunnat bli bra! En orörd kopia av lagret finns ju alltid kvar.

I och med detta har vi tittat lite på grundläggande tekniker för ett bra resultat och för att snabba på arbetet med hjälp av kortkommandon o.s.v.

Nu ska vi titta mer på vilka effekter som kan åstadkommas.

Vi väljer nu suddverktyget i Tools och en ganska stor och suddig pensel för detta i brushes-paletten. Jag tar penselstorlek 100.

Sedan suddar vi försiktigt i kanten på bilden, går utifrån och inåt. Lite i taget! Sudda med kanten av suddverktyget.

OBS! Det går bra att ångra ett steg i taget genom Ctrl Z, eller genom att dra händelserna till papperskorgen i History-paletten.

Vi fortsätter längs den vänstra sidan, den övre kanten och i den högra kanten.

Det blir tvunget att ta en mindre pensel (45) längs den högra sidan och sedan åter igen den större penseln, för att mjuka upp kanten igen, eftersom den mindre penseln ger en hårdare kant. Dessa är bra att växla emellan.

Jag använder ofta även pensel 200 och 65.

Nu växlar jag till Smudge Tool bland Tools.

Nu ska vi nämligen i stället dra ut bladet på höger sida för att få det att avsluta snyggt, vilket vi gör med penselstorlek 35.

Passa även på att justera kanten runt om. Peta lite inåt ibland och utåt ibland!

Resultat:

Kanske försvann lite av färgerna och effekterna i fotot?

Vi gör en ny kopia på Layer 2 och ser till att det hamnar under Layer 2 copy.

Det nya lagret heter alltså Layer 2 copy 2. ( Se till att släcka originallagret igen!)

Vi provar att förändra detta lagers egenskaper - ”Mode” – genom att gå in i menyn under ’Layer’ – ’Layer Options’, eller direkt i Layer-fönstret.

Här kan du även ställa in opaciteten.

Experimentera friskt! En rad oanade effekter kan dyka upp!

Color Dodge ger härliga kontraster, lika så Difference och Exclusion.

Multiply brukar vara mycket användbart när man vill infoga ett objekt i en bild och effekten ska vara en aning transparent, eller för att göra en kulör mer intensiv.

Vi bestämmer oss för Hard Light! Därefter ställer vi in detta lagers opacitet på 60%. Det görs för att effekterna av lagret och dess starka färger inte ska dominera. Man kan även lägga på fler lager och prova de olika effekterna ovanpå varandra, om opaciteten ställs ner. Ofta använder jag 4-5 lager för att förhöja effekterna.

Nu behövs det suddas runt kanten igen, i det här nya lagret - och kom ihåg att spara!

Resultat:

Kanske skulle det behövas lite mer färg?

Vi plockar den ljust gulgröna intensiva tonen som ligger ovanför blomman. Skapa sedan ett nytt lager, placera det under blomlagren och börja måla med penseln (Tools) storlek 100.

Nu behövs detta tonas ut! Detta gör vi i menyn under ’Filter’ – ’Blur’ – Gaussian Blur’.

Radius 6,0 – prova och se!

Det blev lite mycket upptill, så vi suddar lite där med suddverktyget, pensel 200.

Nu vill vi ha med lite av den ljusare kulören som ligger som ringar till höger ovanför blomman.

Gör som tidigare: Ta färgen med pipetten. Skapa ett nytt lager ( detta blir Layer 4), som placeras ovanpå Layer 3. Måla med en grov och suddig pensel: 300. ”Dutta” ut färgen, till höger om blomman och lite ovanför och vid vänstra kanten.

Resultat:

För att förstärka färgerna något tar jag en kopia på Layer 2, som då heter Layer 2 copy 3

och hamnar överst.

Jag ställer in dess ”Mode” i Layer Options till Screen och opaciteten till endast 10%.

Prova gärna skillnaden genom att släcka och tända lagret.

Gör man flera olika lager med lite ändring i dem alla, kan resultatet bli mycket bra.

Men, vad ska vi ha i toppen då?

Kanske kan vi prova med att lägga in en del av krukan, fast spegelvänd?

Vi provar!

Nu vill vi få med alla lager.

Därför länkar jag först alla lager med varandra, utom det gröna bakgrunds-lagret, det transparenta lagret och lagret med originalblomman.

Det lager du står i länkas med de lager du väljer att länka det med. Det gör du genom att markera i den tomma rutan i dessa lager ( i paletten Layers ) – mellan ögat och namnet på lagret.

Sedan skapar vi en ny bild ( ’File’ – ’New’).

Markera den gamla bilden: ”engelskpelargon.PSD” och se till att du befinner dig i det översta lagret.

Välj Flyttverktyget i Tools och dra sedan bilden med blomman över till den nya arbetsytan/bilden som du just skapade.

På det sättet får du med alla lager med de olika effekterna.

Ta sedan tag i blomman när du befinner dig i den nya arbetsytan/filen och dra tillbaka till engelskpelargon.PSD! Nu finns alla lager med dess effekter med. Detta hade inte skett om vi gått in i ett lager och valt ”kopiera” och ”klistra in”.

Gå därefter in i menyn ’Edit’ – ’Transform’ – ’Flip Horizontal’.

Nu är dessa lager spegelvända.

Jag vill även minska storleken på den övre blomman som vi arbetar med.

Det gör man så här: Välj i menyn ’Edit’ – ’Transform’ – ’Scale’. Vi minskar bildens storlek med ca 50%. Sedan flyttar vi upp bilden till det övre vänstra hörnet av arbetsytan.

Nu ser det ut så här:

Nu ska vi lägga till en ljus yta som täcker det vi inte vill ska vara med. Vi skapar ett nytt lager, överst av alla (Layer 8). Sedan tar vi den ljusa färgen som finns längst uppe i vänster hörnet av bilden. Därefter tar vi ”Rectangular Marquee Tool” bland Tools och markerar en rektangulär yta över hela toppen. Fyll den med hjälp av hinken med den ljusa färgen.

Gå sedan in i menyn under Filter, välj ’Blur’ – ’Gaussian Blur’. Radius 6,0.

Nu ska vi sudda fram blomman ur detta lager! Välj därför suddverktyget och pensel 100. Dutta! Resultat:

Nu tar vi en kopia av Layer 8, och släcker original-lagret. Därmed fortsätter vi att arbeta i Layer 8 copy. Vi ska nämligen ta bort lite till och göra det hela mjukare. Vi väljer suddverktyget igen och börjar med pensel 300. Gör en svepande dragning upp mot höger. Se till att all ljus färg är borta i övre högra kanten! Annars blir det tvärt avhugget när grafiken används på en webbsida. Byt till mindre pensel när det behövs.

Resultat:

Nu vill vi lägga till en text överst! Vi väljer textverktyget bland Tools. Välj ut lämpligt typsnitt – jag hade Rage – och storlek – 8 points.

Färgen #BD4244 väljer vi med hjälp av pipettverktyget från blomman. Vi placerar texten där vi vill ha den med hjälp av flyttverktyget.

Texten ser lite platt ut, så vi ska lägga på lite effekter. Det gör vi genom att gå in i menyn under ’Layer’ – ’Effects’ och väljer något av alternativen. Vi väljer Drop Shadow. Förinställningen är ganska bra, men vi justerar något enligt följande bild:

Vi vill ha mer effekter! Gå in igen, men välj nu i stället Inner Glow.

Man kan också dubbelklicka på den ”f” symbol som bildats i textlagret i Lagerfönstret.

Den visar att vi använder oss av Lager-effekter.

Det fungerar också att direkt gå vidare till nästa effekt när man har lagt till en. Se följande bild:

Vi väljer nu Outer Glow enligt bilden. ( Observera att jag valde att byta färg. Klicka bara på färgen så är det bara att välja vilken som ger bäst effekt! Jag ville här skapa en kontrast, som ger liv åt texten.)

Ta sedan och gör en kopia av textlagret. Jobba vidare i kopian!

Nu ska vi lägga till effekter igen!

Gå in under ’Filter’ – ’Rough Pastels’. Vi får först frågan om vi vill omvandla textlagret till ett vanligt lager. OK, det vill vi! Vi lägger på filtret enligt förinställningen. Sedan går vi tillbaka in i menyn under Filter och väljer ’Fade Rough Pastels’:

Resultat:

Kanske blir den nedre blomman lite väl dominerande?

Jag tror att vi ska ta och minska den lite i storlek. Sedan ska vi se till att bakgrundsfärgen är den färg som går längs den högra kanten, uppifrån och ner. Skapa därför ett nytt lager, som ligger överst ( Layer 10). Gör därefter en rektangulär markering över den högra kanten:

Därefter fyller vi densamma med bakgrundsfärgen, med hjälp av hinken. Bakgrundsfärgen

(#C1CC74) hämtas med pipett. Avmarkera - Ctrl D. Välj ’Filter’ – ’Blur’ – ’Gaussian Blur’. Radius 4,8. Flytta lagret ev.ett steg åt höger. Eventuellt får man fylla på lite här. ( Det ser man om inte annat när det är dags att montera bilden i html-koden!)

Kanske behövs något mer? En liten våg kanske? Skapa ett nytt lager (Layer 11) överst. Gör en avlång markering under ordet Pelargon. Fyll denna med valfri färg och avmarkera.

Kopiera lagereffekterna från textlagret, gör så här: Ställ dig i lager ”Pelargon copy”. Högerklicka över f-symbolen. Välj Copy Effects. Gå tillbaka – högerklicka och välj Paste Effects. Ta tag i Layer 11 och dra det under de bägge textlagren. Välj sedan ’Filter’ – ’Distort’ - ’Wave’. Här får man pröva sig fram! Det blir lite olika för var gång, så det är ingen idé att följa några speciella inställningar…

Ta en kopia på lagret. Släck originalet och sudda lite i ändarna av linjen.

Nu tycker jag att grafiken känns användbar som webbmiljö. Toppen är bra och den nedre blomman går bra att använda som en del av bakgrunden, placerad längst ner.

Lycka till med dina egna grafiska experiment! Släpp lös fantasin och prova!

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

Texten och bilderna skyddas av lagen om upphovsrätt.