Så skapas sandman.nets ikoner
2003-08-07 - skola
1508
Välkommen till den andra artikeln som handlar om hur layouten på sandman.net kommer till. Jag har aldrig skrivit något sådant här förut, så vi får hoppas på att det inte blir alltför tråkigt. Kommentera gärna den här texten och låt mig veta om det finns intresse för fler liknande texter. Du kan trycka på de olika bilderna för att få en mer grundlig förklaring till de olika momenten.
3197
Så skapas sandman.nets ikoner
Ikoner är något jag brinner för. Givetvis älskar jag att illustrera och måla i övrigt också, men just ikoner är extra fascinerande. Förmodligen mest för att man har ett begränsat utrymme och ska med en symbol förmedla rätt så mycket information.
Jag har alltid varit intresserad av dem - men det tog ett stort kliv framåt i och med Mac OS X, där ikonerna i systemet kan vara 128x128 pixlar stora - enorma! Och vilka ikoner sen! Så fina och tydliga, så fotoriktiga men ändå illustrerade! Jag vill också! Så efter en hel del pillande och misslyckande så lärde jag mig en del små tekniker för att få till ikonerna som jag ville. Ikoner går att göra i många olika program såsom PhotoShop, Illustrator eller till och med 3D-program (vilket är extra skoj!)
3198
Nytt dokument
Dokumentet är 128x128 och den runda cirkeln ligger på ett eget lager.
PhotoShop
Jag tänkte att det kunde ju vara intressant att gå igenom, steg för steg hur jag gör en ikon i PhotoShop till exempel (till exempel TV4-ikonen jag gjort till min TV-listning). Jag börjar givetvis med ett tomt 128x128 stort dokument. Eftersom resultatet kommer vara en PNG-fil så vill jag utnyttja alpha-kanalen (transparens) och skapar därför ett nytt lager där jag skapar grundformen, en stor röd cirkel.
3199
Gradient
Jag lägger till en lagereffekt som ger mig en färgövergång från ljus till mörk. Fördelen med lagereffekten är att den är enkel att ändra och den påverkar nya objekt på samma lager.
Men en cirkel kommer man ju inte så långt med. Den är ju fruktansvärt platt om inte annat. Ikoner i Mac OS X har ju en distinkt 3D-känsla, som skapas via något som kallas "refraction" och transparens. Det vill säga att grundregeln är att man har en rund glasboll, och lyser på den uppifrån, då får man ett ljus högdager (gläns) i överkant, men det reflekteras ned i underdelen av ikonen med. Så vår cirkel ska alltså ha en gradient som är mörk upptill och ljus nedtill, även fast ljuset kommer uppifrån.
3200
Fyran
Fyran har jag skapat med path-verktyget genom att 'rita av' logotypen på TV4's hemsida.
3201
Högdager
Högdagern är enkel, bara en cirkel med en gradient i.
Sedan så skapar jag själva fyran, kanske genom att ta en skärmdump på den från TV4's hemsida och sedan 'rita av' den om den inte är stor nog.
Med logotypen på plats så är det dags att lägga till en högdager i överkant. Det är i det här fallet en ellips som man skapar en cirkulär gradient i som går från vit till transparant, så man kan se kanterna på högdagern i överkant men de försvinner nedåt. Man kan även göra en i nederkant, för att få till den där extra piffen.
3202
Slutputsningen
Lite skugga under 'bollen', lite outer-glow på fyran och sådant. Sen är de klar!
När allt är på plats så lägger man till olika lagereffekter såsom outer glow och annat man tycker förstärker intrycket och 3D-känslan. Glöm inte bort att gömma eller ta bort bakgrundlagret innan du exporterar den till PNG, annars så blir den inte transparent.
Nu är inte TV4-ikonen så farligt komplicerad, och så länge man håller sig till refraktions-regeln så kan man göra en hel del mysiga saker med enkla grundformer.
3203
Illustrator
Illustrator
Jag tänkte inte gå in på djupet med Illustrator, utan mest bara nämna att tekniken är precis densamma, men man har mer direkt kontroll över elementen. Dock saknar Illustrator lagereffekter, så skuggor och liknande får du skapa i PhotoShop när du blivit klar i Illustrator. Jag visar här en bild på en ikon jag gjorde för ett program för att kontrollera film. Nästan varje del ligger på ett eget lager och det är en hel del pill för att få allt rätt.
Och som vanligt - hör gärna av dig om du tyckte texten var intressant - det ger mig en anledning att skriva fler. Just ikoner går ju att utveckla rätt mycket, så kommentera gärna!
Lite imponerad hur mycket Apple Watch kan hålla reda på bär man simmar faktiskt
Får lite välbehövlig hjälp att fixa med elen i verkstaden
Improvisationsteater på Västmanlandsteatern. Lika delar pinsamt och skoj :)
Har ryggskott som börjar bli bättre. Nyser nu på morgonen och det hugger till i ryggen och gör ont som fan. Kollapsar på golvet, och när jag reser mig upp så har jag råkat få igång Siri som tror sig ha hört detta. Ok, det gör ont som fan, men jag är ok, Siri :)
Har en trappa hemma som måste renoveras, menrenoveringskit är dyra som tusan, tanken är att jag ska bygga eget renoveringskit, får se hur det går…
Bakbunden
Även en ordentlig geringsfräs för att kunna bygga hållbara trappnosar
Har införskaffat mig en planopress inför kommande bordsprojekt samt ett test för en trapprenovering.
Byggde en pokalhylla till dotterns alla danspokaler
Pricken över i:et :)
Bakbord
Nytt projekt på gång, bakbord till svärfar :)
“Gå och lägg dig” - ”Nej jag kollar på TV med Leia” :)
Extrabord till jul
Extrabord till julafton klart! Byggvideo kommer inom kort på min youtube :)
Weehoo, jag har en egen stämpel nu. Det ni!
Bordskiva oljad och vaxad, ben borstade och betsade. Kanske blir ett bord till slut?
Bordsskiva betsad. Ska slipas/borstas och sen oljas.
Renoverat vardagsrumsbord
Favoritbild från dansuppvisningen igår
Nattduksbord
PanPastel-porträtt
Crock Pot
PanPastel
Tron för Sigge
Road Trip Italien!
Verkstad Remake
Jonas och Jenna
Brud som chillar
Showing off
Undressing
Touch thyself
Hot Love
Profilporträtt
Resa utan kamera?
Paus
Supernöjd med folieringen!
Bilen ska folieras!
Ny såg
PHP och BankID
Jack Skellington
Verkstadsplaner
Magnettavla
Verandatak och grillhörna!
Vardagsrumsbord
Knivblock
Kökshylla
Ny ikon för karta
PC-bygge
Kerlee 35mm f/1.2
Objektivhylla
Natalie Dormer
Hållare till kattmatsskålar
Hälsningar från Norge
With a little help from my friends...
The Most Incredible Fantasy Maps You've Ever Seen
Cityfestivalen
Mitakon Speedmaster 50mm/f0,95
10 minuter vatten
Sony A7R II
Petzval 58 Bokeh Control Art Lens
Scrawlrbox
Nya skärmar till jobbet
Nikon Df - ny leksak
Boba Fett
First Order Storm Trooper
Mikisen
#inlineditbutton