På Dzineblog.com har de publicerat en lista med över 30 gratis .psd-filer att ladda ner. Som du kanske redan visste är .psd filfändelsen för Photoshop-dokument och du kan alltså öppna dessa i Photoshop och ändra på allting. Riktigt bra kvalitét på vissa måste jag säga. Länk.

Det är väldigt enkelt att göra en snygg sol i Photoshop. Denna passar utmärkt till web 2.0 webbdesign, t.ex. som bakgrund i en header eller liknande. Låt oss börja:

Det finns gott om Photshop-guider, men de allra flesta handlar om bildbehandling och fotografier. Det är inte alls lika gott om guider för den som vill syssla bara med webbdesign och layout av hemsidor, så jag tänkte att jag skulle svänga ihop en nybörjarguide om de vanligaste verktygen och teknikerna.

Jag använder ett engelskt Photoshop och skriver vissa ord, t.ex. “styles” på engelska, men du förstår nog även om du kör svensk version.

Snygg text

Det är väldigt lätt att göra snygg text med hjälp av styles/stilar. Skriv något, och gå sen in under layer -> layer style -> blending options. Här kan du lägga på snygga effekter t.ex. drop shadow, inner glow, gradients o.s.v.

Gradients används extremt mycket i webbdesign idag (färgövergång på svenska). Klicka bara i rutan så får du en gradient på din text. Du har ett antal gradients att välja på från början men default-versionerna är inte speciellt roliga. Du kan ladda in nya genom att klicka på lilla på de små pilarna enligt bilden. Nu ser du fler gradients att välja mellan, dock finns de snyggaste versionerna finns att ladda ner gratis på Internet. Se mer i slutet på guiden.

Drop shadow är en gammal klassiker som antagligen inte behöver någon vidare förklaring. Du kan testa att leka runt med inställningarna.

Stroke skapar en linje längs med kanterna på texten.

Vanlig text med drop shadow och en gradient.

Om texten är “frasig”, “pixlig” eller ojämn i kanterna beror det antagligen på att du inte har aliasing på. Enkelt fixat om du har textverktyget valt och sen väljer aliasing i menyn ovanför huvudområdet. Jag brukar oftast välja “crisp”, men ibland är något av de andra valen bättre. Testa själv.

Custom shapes

Rektanglar, cirklar, ellipser o.s.v. är naturligtvis behändigt ibland, men under samma meny finns Custom shape tool som är mycket trevligt. Redan inbyggt i Photoshop finns massor av riktigt användbara shapes. Grejen är att du, som med text, kan lägga styles på dessa former och få snygga symboler och grejer till din webbdesign.

Ladda in nya shapes med menyn som dyker upp när du klickar på den lilla pilen.

Välj först custom shape genom att högerklicka på rektangeln, sen dyker shape-menyn upp i fältet ovanför workspacet.

2 custom shapes med gradient, stroke och drop shadow. 

Brushes

Det finns riktigt grymma brushes/penslar som man kan ladda ner gratis från nätet och använda i sina egna verk. Med väldigt lite kunskap kan åstadkomma bilder som ser riktigt proffsiga ut om man har laddat ner någon snygg brush. När du valt brush-verktyget kan du högerklicka på din bild för att välja storlek på brushen samt välja nya brushes. Ladda som vanligt in nya genom att klicka på den lilla pilen. Det finns som sagt grymma brushes på Internet, se slutet på guiden för länkar.

Logo skapad på 1 minut med en nerladdad brush som jag la en gradient och drop-shadow på. Samma med texten.

Snabba tips

- De kortkommandon som jag använder överlägset oftast är ctrl + V för Move tool och shift + ctrl + N för nytt lager. 

- Om du, som jag, håller på mycket med styles så kan du öppna styles fönstret mycket enklare genom att dubbelklicka bredvid lagret på lagerpaletten.

Dubbelklicka här

- Om inget kopieras när du vill kopiera något i Photoshop med hjälp av markeringsverktyget så måste du välja Copy merged istället för bara Copy.

- Du vrider och vänder på saker och ting med antingen Free transform (ctrl + T) eller Edit -> Transform följt av det du vill göra.

Mitt mål med guiden har varit att skriva om de, enligt mig, bästa verktygen för en nybörjare att komma igång snabbt och kunna skapa snygg webbdesign.

Resurser av intresse:

Photoshop gradients

Photoshop penslar

Det behövs egentligen bara en länk för alla dina webbdesign-gradient-behov och det är denna:

http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download/

Denna samling har så många otroligt snygga gradients (svenska: färgövergångar) i alla tänkbara former att man, i alla fall jag, inte behöver fler.

På senare tid har det verkligen börjat komma helt fantastiska gratis penslar (brushes på engelska) till Photoshop som oftast är helt fria att använda. Jag har plöjt igenom säkert 50 sidor med gratis penslar/brushes och här kommer en lista på de 5 bästa gratissidorna. Kvalitét över kvantitet - du kommer att ha upp till öronen med kvalitetspenslar efter att du suttit i dig den här listan:

http://www.brusheezy.com/

http://www.brushking.eu/

http://myphotoshopbrushes.com/brushes

http://qbrushes.com/

http://www.biorust.com/downloads/browse/3/added/desc/1/

Enjoy!