Liten kurs i grafisk design för webbmiljö, fler exempel

 

Del 4

Låt oss se vad vi kan skapa med de återstående fotografierna 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             

 

 hostblomma.jpg       

 

Eftersom jag redan ingående har visat de tekniker jag har arbetat med i dessa bilder, kommer jag nu i följande fall enbart att beskriva i stora drag hur jag har gjort.

Resultatet kan du se dels infogat här och framför allt i medföljande PSD-fil, där du kan gå in och se de olika lagrens inbördes placeringar och dess egenskaper.   

 

Vi skapar engelskpelargon.PSD

 

Minska bilden till lämplig storlek: jag valde bredd 300. Minska stegvis!!

För att markera blomman använder vi trollspöt, tolerance 32. Det går bra i detta fall, eftersom kontrasten är hög i bilden. Kopiera markerat område när markeringen täcker hela blomman och välj sedan klistra in eller Ctrl + V. Länka dessa två lager med varandra.

 

Skapa sedan en ny bild i lämplig storlek för webbmiljö.

Kopiera över bägge blomlagren genom att dra över dem till den nya arbetsytan.

Lägg en lämplig bakgrundsfärg bakom dessa lager, i detta fall en ljust grön.

Minska storleken på blommorna och placera dem i övre hörnet.

Vänd dem spegelvänt.

 

Arbeta nu med det undre pelargonlagret, d.v.s. det med omgivande grönska!

Justera färgerna något: ’Image’ – ’Adjust’ – ’Hue/Saturation’.

Välj sedan Gaussian Blur filtret.

Sedan Smudgeverktyget och Suddverktyget för att dra ut detta bakomliggande lager och på detta sätt använda dess färgrikedom. Kvar blir alltså bara färgerna!

 

Skapa ett bakomliggande lager till. Gör en rektangel i ovankanten, som är mellangrön.

Sudda med stort sudd så att enbart en triangel återstår i det vänstra hörnet. Ställ sedan om lagrets options till multiply och dess opacitet till 60.

 

Lägg sedan till valfri text. Lägg på effekter!

 

Nu ska vi ha ett bakomliggande lager till. Jag väljer en aprikos ton, som jag lägger in som en vertikal rektangel. Ta sedan Gaussian Blur filtret, ställ om lagrets options till multiply och dess opacitet till 90.

Bearbeta med Smudgeverktyget och Suddet!

 

Lägg en vit rektangel i ett lager ovanpå.

 

Ta kopia på lagret som tidigare innehöll pelargon med omgivande grönska. (Se ovan)

Rotera detta nya lager 90 grader medsols. Placera det vid vänstra kanten av den ljusa rektangeln, där det är tänkt att en meny ska kunna placeras.

Sudda lite så att det blir bra.

 

Lägg sedan på effekter på lagret med den frilagda pelargonen.

Se till att alla kanter slutar snyggt med hjälp av Smudgeverktyget.

 

Resultatet kan du se nedan och i sin helhet i filen vitpelargon.PSD (här packad som en zip-fil)

 

Vi skapar hostblomma.PSD

Minska bilden till lämplig storlek.

 

Skapa sedan en ny bild i lämplig storlek för webbmiljö.

Kopiera över fotot genom att dra över det till den nya arbetsytan

 

Här väljer jag att placera fotot i nederkanten.

I fotot finns en härlig kastanjebrun färg som jag väljer att ta upp i bilden som bakgrundsfärg över hela ytan.

 

Jag tar en kopia på fotot genom att kopiera lagret och släcker originallagret. Sedan bearbetar jag det nya lagret genom att använda Smudgeverktyget och Suddet runt kanterna på fotot.

Jag drar ut en del blad och suddar inåt kanten mellan dessa.

 

När jag är nöjd markerar jag själva blomman med cirkelmarkeringsverktyget, kopierar och klistrar in i ett nytt lager.

Placera den cirkelformade bilden ovanför den avklippta stjälken i föregående lager, så att denna ser ut att hänga ihop. Vi får hjälpa till lite genom att använda Smudgeverktyget och Suddet.

Suddet används flitigt runt kanten, så att bara blomman återstår.

 

Sedan tar jag en kopia av detta lager, spegelvänder detta horisontellt och placerar ovanför nästa avklippta stjälk – den till vänster!

Använd så återigen Smudgeverktyget och Suddet.

 

Nu ska jag lägga in ett lager där det är tänkt att texten i webbmiljön ska kunna placeras!

Jag gör en rektangulär markering i ett nytt lager som placeras emellan blomlagren.

Fyll denna med en ljus färg. Ställ om opacitet och option.

 

Markera rektangeln igen. Skapa ett nytt lager ovanpå föregående och välj en rosa ton. Hinka i färgen, välj sedan ’Select’ – ’Modify’ – ’Contract’ inställning på 1 och sedan klipp ut/cut eller

Ctrl + X.

Nu har vi skapat en ram runt den ljusa rektangeln.

 

Lägg till sist till text och effekter på dessa.

Resultatet kan du se nedan och i sin helhet i filen hostblomma.psd (här packad som en zip-fil)

 

 

Bägge de nu skapade miljöerna kan behöva minskas ned något i storlek innan de är lämpliga för användning. Spara i så fall om dem under nytt namn först!

 

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.