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.
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!)
Nytt dokument
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.
Gradient
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.
Fyran
Fyran
Fyran har jag skapat med path-verktyget genom att 'rita av' logotypen på TV4's hemsida.
Högdager
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.
Slutputsningen
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.
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!
Mer i Ikoner
Raytracing
Upplsningsoberoende
Ikoner r skojigt
S skapas sandmannets ikoner
Mer i Tutorials
Grnssnitt fr mp3spelare
Dynamiska argument till PHP funktioner
Saturationscript fr hexfrger i PHP
S skapas sandmannets ikoner
S blir layouten p sandmannet till
Buy prints of my maps
3D-printer
Fältsjukhus 616
Ny kaffemaskin
Porträtt av u/elizabeeeef
Jämförelse 135 mm
Porträtt av kompis mamma
Använda utrymmet under trappen
Spelbord
Pimpning av köks-ön
Jag saknar min Dodge!
Acrylic drip
Renoverad ateljé
Nytt hemmakontor
Ny tatuering
Fågel Fenix

Vilken locksång väcker din uppmärksamhet?
Grace
I’m a lumberjack and I’m ok
Dodgen upplagd för försäljning
Gamingstol som kontorsstol
Sun and Stars
Barking up the wrong tree
Light at the end of the tunnel
Serveringsbricka
Regntunnor och grus
Pergola
Uppdatering av ikoner
Renoverat sidobord
Malin och Alex bröllop
Pizza på grillen
Myst linking book and Gehn's Inkwell
Utebord
Bord i biorummet
Mattsvart Dodge
Tuttar
Susann's gravidmage
Simson och Isi
Det blev en Volvo XC90
Ny bil?
Vardagsrumsbord
Altantak
Steven och Susann's bröllop
Trapprenovering
Semesterplanering

En sak jag saknat väldigt länge är en app på till exempel iPad där man kan lägga upp sina sommarplaner. Vi skriver ju givetvis upp i kalendern när vi tar semester, när det är skollov och liknande, men det trängs ju med en massa annat onödig information när man vill sätta sig ned och planera semester, ledighet, aktiviteter. Man vill gärna ha en sjysst översikt över bara det som ...
Paulig och Release Finans

Detta är helt galet. 2015 så skaffade vi en rätt så high end-espressomaskin till kontoret. En Thermoplan One. Företaget som levererade den heter Paulig och med dem skrev vi ett hyresavtal på maskinen.
Mother of Dragons
Maleficent
Bakbord
Extrabord till jul
Renoverat vardagsrumsbord
#inlineditbutton