gettyimages.com

gettyimages

Denna sida är grym att leta på när man behöver bilder på framför allt människor. I deras sökfunktion kan man bl a välja mellan 1 eller flera personer på bilden, en specifik ålder, hur/vad gör personen på bilden mm.

En favorit hos mig är att du kan välja från vilken vinkel du vill ha personen ifrån, t ex 3/4 vinkel, fram- eller bakifrån.

Så behöver man bilder på personer så är gettyimages sidan som man surfar in på först.

iStockphoto

istockphoto

Den här sidan upptäckte jag för ett tag sen. Jag som tycker om vektorstil söker ofta på den här sidan för att hitta referensbilder när jag ska skapar egna vektorbilder. Då är deras sökfunktioner riktigt bra ha ta till.

Jag behöver bara kryssa i ‘Illustrations’ för att enbart få vektorbilder. Jag har tidigare försökt söka efter vektor på Google men har ofta suttit en längre tid för att hitta bra bilder. iStockphoto tar ner tiden avsevärt när jag letar efter vektor.

Med inspiration från en utav artisterna på iStockphoto skapade jag min buddy som du ser i headern.

Stock.XCHNG

stock.xchng

Bland de första stocksidorna som jag använde. Stock.xchng har en blandad kompott i bilder men jag söker oftast efter allmänna fotografier t ex landskap eller föremål. Deras sökfunktioner är lite fattiga och det kan vara svårt att få ett bra resultat.

De som lägger upp sina bilder verkar vara positiva till att man får använda deras bilder för icke kommersiellt bruk. Det går enkelt att kolla detta genom att klicka in sig på en utav bilderna och läsa under vilken licens bilder ligger under. Licensen talar om hur man får använda bilden.

Som avslutning två extra tips på sidor som man kan hitta bra ikoner och ikonpaket. Dessa är iconfinder och icondock.

iconfinder_icondock

Om du enbart behöver enstaka ikoner så rekommenderar jag iconfinder. Med hjälp utav sökfunktionerna kan du enkelt ställa in sökresultatet efter önskad storlek på ikon, se hur ikoner ser ut på en vit eller svart bakgrund samt hur många ikoner du vill se på varje söksida. Du har även möjlighet via iconfinder att hitta ikoner i ett och samma paket genom att klicka INFO och sedan Show all icons in this icon set.

Icondock är mer för dig som behöver hela paket av ikoner till t ex en webbapplikation eller nya ikoner till datorn. Icondock erbjuder även olika gratispaket med ikoner som jag tycker håller hög kvalité.

Jag hoppas att dessa tips hjälper dig i ditt letande efter stockimages. Du kanske använder andra sidor och vill tipsa om dem? Lämna då en kommentar!

• CSS Sprites: Image Slicing’s Kiss of Death (A List Apart)
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials (Smashingmagazine)
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them (CSS-tricks)

Jag tänkte gå igenom vad jag gjorde med CSS-sprites på den här sidan. Men först…

Vad är CSS-sprites?

CSS-sprites är inte nytt utan har funnits ett par år. Jag trodde från början att det hade att göra med JavaScript att göra i och med namnet sprite men det har ingenting att göra med JavaScript utan är bilder ihopbakade till en bild. Anledningen till att man lägger ihop alla bilder till en är att dra ner på laddningstiden av sidan och minska antalet HTTP-requests, dvs. för varje bild så måste webbläsare kontakta servern för att bilden ska kunna visas på webbsidan.

T ex till den här sidan använder jag några ikoner för kategori, kommentar, rss mm.

Alla dessa kan man lägga ihop till en bild och med hjälp av CSS-selektorn background-position kan man flytta bilden och visa endast den önskade ikonen. Med background-position anger man bildens startpunkt.

Under sökningen på Google fick jag även fram ett verktyg som gör automatiskt en CSS-sprite av de bilder man laddar upp, CSS Sprites generator. Dessutom får man varje ikons position i bilden.

CSS Sprites generator

Detta är dock ett väldigt enkelt verktyg och passar bra om man inte har för många bilder. Jag märkte att verktyget la ikonerna ovanpå varandra så om man hade haft 50 st ikoner så skulle bilden blivit en rätt lång bild. Då ska man nog fundera på att göra sina egna CSS-sprites i t ex Photoshop eller GIMP.

CSS-sprite

När man har sin CSS-sprite och vet varje ikons position är det dags att använda sig av bilden och applicera det på sin webbsida. I mitt exempel visar jag hur jag positionerade ut ikonerna vid kategori och kommentar under inläggets rubrik.

Ett litet tips är att kopiera positionerna man får från CSS sprites generator till en .txt-fil och spara den i en mapp på sin dator ifall man råkar glömma bort positionerna eller klicka bort webbsidan.

Utav min CSS-sprite fick jag följande positioner.

CSS sprites generator - Resultat

Men först lägger jag en grundkod som jag kan bygga på.

<dl>
    <dd class="category"><a href="#">Webdesign</a></dd>
    <dd class="comments"><a href="#">Lämna en kommentar</a></dd>
</dl>

Här skapar jag en definition lista. Varje element i listan har jag gett en särskild klass (kan även använda id). Dessa används när jag lägger till ikonerna.

För att detta ska fungera nu måste vi lägga en bakgrundsbild på <dd>-taggen, dvs. den CSS-sprite som vi skapade i generatorn. Så i stilmallen blir koden följande för <dd>

dd {
     background: url(images/css-sprite.png) no-repeat;
}

Härnäst ska vi lägga till första ikonen. För att visa ikonen för kategori tittar vi vilken plats den ligger på i bilden. Därefter går vi och tar samma plats i våran lista över bakgrundspositioner och skriver in de nummer som står där. (I mitt exempel ligger ikonen på 6:e plats)

dd.category {
    background-position: -16px -251px;
}

Med samma metod lägger vi till ikonen för kommentarer.

dd.comments {
    background-position: -16px -204px;
}

Nu återstår det att flytta texten åt höger så att texten inte ligger på ikonen. Det gör vi genom att lägga till padding (utfyllnad) på taggen <dd>.

dd {
   background: url(images/css_sprite.png) no-repeat;
   padding: 2px 0 2px 20px; /* (top, right, bottom, left) */
}

Eftersom ikonerna hade ursprungligen en bredd på 16px så valde jag att ge en vänsterutfyllnad på 20px så att det blir lite mellanrum mellan text och ikon.

För att elementen i listan ska ligga bredvid varandra istället för under så lägger jag till

display: inline;

på taggen <dd>.

Slutkoden blir följande:

dd {
    background: url("images/css_sprite.png") no-repeat;
    padding: 2px 0 2px 20px;
    display: inline;
}
dd.category {
    background-position: -16px -251px;
}
dd.comments {
    background-position: -16px -204px;
}

Resultatet av denna kod blir följande:

Resultat

Jag hoppas att detta har gett dig lite hjälp i att förstå hur CSS Sprites fungerar och hur man gör för att använda sig utav tekniken.

Denna filmen var det första stora projekt jag gjorde i Flash och den har lite småmissar här och var men för att vara den första filmen så är jag nöjd.
Filmen gjordes under utbildningen på Högskolan på Gotland i en av de längre projektkurserna. Anledningen till att det är katter som spelar rollerna är att jag ville ta upp ett par gamla teckningar jag gjorde under högstadiet och göra om dessa till en animation. Under högstadiet var jag inne i period där jag tittade och lyssnade mycket på musikalen Cats och därefter ritade mina egna karaktärer som katter fast i ett skolkontext istället för den kontexten i musikalen.
Målgruppen var högstadiet, dvs. 13-17 år. Jag valde denna målgrupp därför att mina teckningar kommer ursprungligen från när jag gick på högstadiet och sen är det ofta där som mobbning uppmärksammas mest.

Sen var jag även mycket inne på mobbning under den här tiden så det var självklart att filmen skulle handla om mobbning. Jag lärde mig mycket nytt under den här filmen och jag har utifrån denna fått ny kunskap och en önskan om att förbättra mina animationskunskaper samt att utveckla mitt ritande.

Tyvärr finns det ingen musik till den här filmen. Jag gjorde musiken färdig helt och hållet men fick det aldrig att fungera bra i Flash därför valde jag att ta bort musiken för tillfället. Jag hoppas kunna lägga tillbaka musiken vid ett senare tillfälle då filmen behöver stödjas upp med lite ljud.

Ett litet Hej gjorde i samarbete med studierna på Gotland. Inriktningen var mobbning och en möjlighet att presentera det för svenska Friends. Den första tanke var en reklamfilm för Friends på ca 30 sec men under arbetets gång utvecklades historien och den blev längre.

Att den gjordes i Flash är ingen överraskning då jag har fastnat för Flash och dess stil under utbildningen på Gotland. I Flash får man mycket möjligheter att utforma sin film eller animation.

Målgruppen var 10-16 år. För att locka denna målgrupp mera valde jag att rita i stilen Manga som är en japansk teckningsstil. Jag fick möjlighet att utveckla mitt ritande och samtidigt försöka få ihop en bra film. Manga syns ofta i t ex Pokemon eller Sailor Moon. Jag tog min inspiration från dessa och lånade böcker kring hur man tecknar manga. För mig var det viktigaste att få fram budskapet på ett bra visuellt sätt dock valet av teckningsstil.

Denna film tog ett halvår att göra och jag själv är rätt nöjd med den. Jag tackar Adam Löppe som ville göra musiken till filmen. Hans musik blev passande och höjde upp filmen. Så höj volymen på din dator och njut!

Intressanta program om man inte vill lägga ut flera tusen på ett bra bildprogram. Jag rekommenderar GIMP och Googles Picasa.

Vilka tycker du är bra?