Bloggdesign och flytt

Copyright Hanna Sikter



Hej på er! I veckan hjälpte jag en annan trevlig 25 åring (jag fyllde den 30/12) vid bloggnamnet Fröken Pe med hennes ROSA design till sin träningsblogg, duktigt och aktiv tjej som jobbar som träningsinstruktör. Besök den här.

Anledningen till tystnaden på bloggen har nog främst varit våran förestående flytt och försäljning av lägenheten!

Den 1 mars så flyttar vi till en 2:a på 60 kvm inne i Skövde, vilket känns väldigt roligt och spännande! Ska bli kul med något nytt och hyran kommer i stort sätt att bli oförändrad. Försäljningen av lägenheten höll på i en månad och i veckan så hoppas vi att kontraktet blir påskrivet.

Mer om detta någon annan gång, trevlig start på veckan på er!

En het kopp med rykande färsk bloggdesign

Copyright Hanna Sikter



Vad tycker ni, ris eller ros? Min förra webbdesign såg ut så här. (Om ni inte ser någon skillnad får ni trycka på F5)

Istället för att använda bilder till att få runda hörn så använder jag nu CSS till allting. Sidan skall bli snabbare nu. Anledningen till om-designen är att den skall passa ihop med min personliga sida (greenrealm.se) där jag skall ha portfolio mm men jag ska jobba vidare på den ett tag till:)

Ny maskot till sidan också, en illustration av min favorit fågel, sädesärla. De är så söta!

Gratis alternativ till Photoshop

Photoshop i all ära, det ledande bildredigerings programmet sedan många år tillbaka. Men det kostar. Om man endast ska ha den senaste versionen av photoshop blir den nätta prislappen på cirka 5 000 kr.



Men visste du att det finns grattis, lagliga on-line applikationer som kan göra lättare arbeten förträffligt och minst lika bra som photoshop? Lite mindre alternativ, men de vanligaste finns.



Här nedan kommer ett snabbt sätt att ge dina bilder runda hörn med hjälp av on-line programmet Sumo som passar perfekt in i ett blogginlägg.



Ingen nedladdnings krävs bara en internetuppkoppling!



 

Bild 1: Layouten är väldigt lik photoshops, bl a så använder sig Sumo också av lager. Vi börjar med att öppna en fil från "My computer" (klicka på bilderna för full storlek).

 

 

Bild 2: Vi börjar med att göra ett nytt lager i lagerpanelen. Se till att det nya, tomma, lagret är markerat.

 


Bild 3: Vi fyller det nya lagret med vit (jag väljer vit eftersom min bakgrundsfärg är vit så välj eran) med paint bucket tool (utmarkerad på bilden med blå pil) välj färg och klicka en gång vart som helst på bilden.

 

 

Bild 4: Vi har fortfarande det nya, vita, lagret markerat och väljer ett nytt verktyg, "rounded rectangle tool". Detta verktyg skall vi nu ställa in genom att titta i övre meny raden och klicka på "fill" en gång. Gör de inställningar som visas på bilden.

 

 

Bild 5: Nu skall du ställa in lagrets genomskinlighet, på den högra pilen ser du en nedrullnings lista över lagerpanelen, välj alternativet "lighten". Ta sedan och gör din markering, fortfarande på den vita lagret, börja i något av hörnen, håll knappen intryck till du är nöjd. Om något går fel så kan du alltid ångra genom snabb kommandot Ctrl+z. Du borde se hur det undre lagret kommer fram där du gjort din markering. Släpp knappen när du är nöjd. Det vita lagret kommer nu i lagerpanelen att se nästan helsvart ut.

 

 

Bild 6: Nu tycker jag att bilden ser bra ut, men den är fortfarande för stor för att använda i ett blogginlägg. Vi ska därför ändra storleken på det (blogg.se har ett verktyg som låter en ändra på storleken när man laddar upp bilder. Detta gör dock att bilden komprimeras och bör undvikas genom att du redan har bilder i rätt storlek.) Gå in via den övre menyraden "Image" och ned till "image size"

 

Bild 6: Välj en lämplig längd. jag brukar sats på bred mellan 400px och max 550px. Glöm inte att välja "constrain proportions" då blir bilden ändrad proportionerligt.

 

Bild 7: Sedan är det bara att spara verket, vilket du gör precis likadant som i andra program.

 

 

Och så här blev det!

 

Copyright Hanna Sikter

 

Vad tycker ni, krångligt? Det är allting i början, men med övning så borde det inte ta mer än en minut att göra detta på vilken bild som helst.



Trevlig vecka på er!

Blogg design

...Är roligt och avslappnande när man pluggar de ämnen som jag gör. Så när en läsare med en ur-kul bloggidé frågade om en header i illustrations form så hjälpte jag mer än gärna till!

Då jag bara är självlärd (än så länge...) så tar det lite tid och tålamod, men jag är nöjd med resultatet! Det är förstås även roligt att det har gått så bra för bloggen:)

Copyright Hanna Sikter



findmytwin kan du (kopierat från bloggen):

- Tipsa mig om nya look a likes som du har i dina tankar, som jag sedan kan lägga upp här på min blogg.

- Skicka in en bild på dig själv, så letar jag upp just DIN look a like.
Bilden skickar du som en bifogad fil till min mail [email protected]. Fotot ska vara en ansiktsbild, för bästa     resultat.

- Kommentera, ge ris och ros så jag vet vilka look a like-par som är bra, och vilka som är mindre bra.
Visa ert intresse!

Fick även förtroendet att göra designen till Lisas personliga blogg i veckan, vilket var ett riktigt roligt projekt, och visst är tinycitylife.blogg.se en rolig namn på bloggen?


Copyright Hanna Sikter



Vad som händer för övrigt så skall sambon iväg på fisketräff några dagar. Bästisen skall komma över och vi ska ha en riktigt tjejkväll med god mat, vin och övernattning, det ser jag verkligen fram emot!


....men jag kommer att sakna Harald också förstås;)

Trevlig helg på er!

Nyheter på bloggen

Copyright Hanna Sikter
Använd bilden ovan om ni vill bildlänka


Har gjort några smågrejer med bloggen i veckan. Har flyttat till mitt egna domän www.greenrealm.se som jag haft ett tag för lite små projekt. Har även lagt till mitt Twitter feed på sidomeny. Här hittar ni min Twitter sida om ni vill prenumera. För er som inte vet vad Twitter är så kan jag förklara det som 'micro-bloggning', inläggen är inte längre än ett sms och perfekt för alla de tillfällen när man bara vill säga en sak eller två till världen:) Man kan även skicka ett inlägg eller 'tweet' från sin mobil.



Kul att man fått lite feedback på designen! Är faktiskt nöjd med den, den sticker ut rejält med färgerna men jag tycker att de ser harmoniska ut tillsammans:) På någe vis...

Igår badade vi för första gången! Blev ett riktigt snabb dopp, men skönt va det! Sedan satt vi och metade lite på en brygga vid Göta kanal efter abborre, men ingen fiskelycka tyvärr;-)

Trevlig helg önskas!

Webbtips - Användarvänlig webbdesign



Användarvänlighet på nätet är något jag har pluggat på högskolan, vad är då detta? I stort sätt så är det läran om att göra en webbplats som så många som möjligt kan ta del utav och med så lite frustration som möjligt!

När man driver en blogg så finns det inte alltid så många alternativ (som man har till exempel på en hemsidan) men en blogg kan enkelt höja sin användarvänlighet genom att ha några enkla tips i bakhuvudet:
  • Se till att det alltid går att komma tillbaka till startsidan från alla sidor. Om du har en logo eller liknande i din header (en vanlig internet standard) så se till att den länkar till din index sida
  • Spela inte upp film eller musik automatiskt, låt användaren välja om de vill starta en uppspelning
  • Markera länkar i text med understrykning (ännu en internet standard som folk vet om). Det är inte alltid nödvändigt att strycka under länkar i tex en meny, deras placering gör det nämligen lätt att se att de är just länkar
  • Bäst är svart text på vit bakgrund (du vill att dina läsare ska kunna läsa din text utan att anstränga sig eller hur?) näst bäst är när det är starka kontraster på text och bakgrund (tex svart text på ljusgrått). Sedan är vit text på en svart bakgrund inte heller så dåligt
  • Använd inte javascript för någon essentiell funktion på din sida, alla människor har inte javascript!


Här var det lite tips på hur du kan undvika att användare upplever frustration! Så klart, är detta en hel vetenskap, och man ska inte se dessa som regler utan som riktlinjer och göra avvägningar. Att din design ger ett sammanhängande intryck är oftast viktigare än att bakgrunden eller länkar följer en viss riktlinje.


Så, lite lagom tråkigt blogginlägg på kvällskvisten;-) Har faktiskt inte badat i år än, men nu när det är lite väder för det så är det hög tid känns det som!

 

Fortsatt trevlig kväll!

Ny bloggdesign


Gamla designen

Hej på er! Idag så tyckte jag att det var dax att lägga upp min nya design som jag har jobbat/lekt runt med några veckor! Lite enklare, lite roligare och lite med grönt:) Är ju kanske lite svårt att förstå vart mitt bloggnamn kommer ifrån när hela bloggdesignen är blå;-) Namnet har några år på nacken då jag hade min första seriösa hemsida, och gick igenom en "enormt grön period", därav namnet.

 Realm fick jag nog från att jag läste Sagan om Ringen triologin i samma veva, på engelska och svenska. Tyckte att det var ett vackert ord.

Har även bytt webbläsare, från explorer 7 till Mozilla Firefox. Vilken skillnad! Ni som ej har provat gör det, kan jag verkligen rekommendera! För övrigt så läser mozilla websidorna korrekt, inte som explorer har gjort.  Verkar dock som om att Explorer 8 följer samma spår, härligt för alla som håller på med webbdesign då det är ett steg i rätt riktning mot ett gemensamt språk! Skönt att inte behöva sitta uppe med olika webbläsare när man kollar kod;-)

Designen är lite fågel inspirerad som ni nog ser, har vuxit upp med både små och stora fåglar så de är ett återkommande nöje! Både i min fasta inredning och mer levande "inredning" har lånat hem en liten fågel från mina föräldrar, som min sambo sa "du smugglar bara in fler och fler smådjur", väldigt sant! Han är för snäll min fina Harald:D

Trevlig vecka!

Förladda bilder med hjälp av CSS



Här är ett lite tips för er som har över-rullnings bilder i tex header som ni vill att användaren skall se (och i mitt fall, använda) så fort som möjligt då de kommer in på er blogg eller webbplats.

Tidigare så använde jag mig av javascript, långsamt, krångligt och ej användarvänligt då cirka 10% av användare ej har javascript aktiverat.

Då finns det en liten kodsnutt som du kan använda dig utav:

<div style=" display:none;">

<img src="preload.gif" height="125" weight="500"> //De angivna måtten gör att bilden laddas ännu snabbare//

</div>

Denna kodsnutt säger åt webbläsaren att ladda den/de angivna bilderna men att göra det bakom kulliserna! Placera denna kod högst upp i din kodmall, efter <body> taggen.

Så, enklare än javascript och så mycket snabbare! Hoppas att någon får användning av detta:D