Designtips: Triangelformad bild

DATUM: 2012-04-11 | KLOCKSLAG: 11:35:00 | KATEGORI: BLOGGTIPS | 18 KOMMENTARER
Många av er har frågat hur jag gjorde bilderna i min header triangelformade. Nu tänkte jag visa ett sätt man gör detta på (finns ju såklart olika sätt man kan göra det på och olika program man kan använda men jag kommer iallafall visa hur jag gjorde det).

1. Öppna den bild du vill använda i Photoshop (jag använder cs5) Välj sedan verktyget "Polygonal Lasso Tool"


2. Skapa sedan en form av en triangel genom att dra och klicka med verktyget. Är ni lika dåliga som jag så kan man googla upp en bild på en triangel och klistra in i Photoshop och dra linjerna direkt på bilden!

3. Sen är det bara att trycka på ctrl+c för att kopiera och sen klistrar du in triangeln på ett nytt dokument! Är det så att du vill göra detta på flera bilder samtidigt i Photoshop så är det bara att dra över triangelformen till en annan bild som du har uppe samtidigt.

Sådär ja, då var vi klara! Det är så enkelt att göra detta! Skulle det dock vara så att du har frågor om du gjort fel eller om det är något du inte förstår så är det bara att fråga i en kommentar, jag försöker svara på era frågor så fort som jag kan!

Designtips : Hur man skapar rörliga objekt

DATUM: 2012-01-21 | KLOCKSLAG: 12:09:53 | KATEGORI: BLOGGTIPS | 23 KOMMENTARER
Rubriken är lite missledande, men det var en bloggläsare som undrade hur jag kunnat placera mina ikoner uppe vid headern så det tänkte jag visa er nu! Kan ni detta så kan ni lägga saker precis som ni vill på bloggen sen!



1. Detta är faktiskt ganska enkelt, om man är van med blogg-koder. Vi kan ta facebook-knappen som exempel. Du skapar den bilden du vill ska upp på bloggen, lägger upp den på bloggen och kopierar html-adressen.

2. Sen går du in i kodmallen och scrollar ner tills du hittar <div id="wrapper">. Under denna kod ska du skriva en likadan kod fast med annat namn, jag har döpt min till <div id="facebook"> för att hålla det enkelt. Vid denna div-tag ska du klistra in html-adressen till din bild, då kommer det se ut såhär:

<div id="facebook">
<img src="din adress här"></div>

3. Spara och gå in i stilmallen. Nu ska du skapa en "tag" till din bild. Nånstans i din stilmall (spelar ingen roll vart) så ska du klistra in denna kod:

#facebook {
position: absolute;
top: 25px;
left: 620px;

4.  Nu kommer nog din bild lägga sig lite galet, men det ändrar du genom att ändra antalet pixlar på top: och left: . Man får prova sig fram! Vill du ha som mig och ha flera ikoner på rad så måste du göra om detta för varje knapp, dock med olika namn då förstås! Hoppas jag förklarat mig bra och kommentera om ni behöver hjälp!

Designtips: Footer

DATUM: 2011-12-28 | KLOCKSLAG: 10:56:20 | KATEGORI: BLOGGTIPS | 29 KOMMENTARER
Har fått förfrågan om att visa hur jag satte in min footer på bloggen. För er som inte vet vad det är så är det som ett "avslut" på bloggen som på min blogg visas efter varje inlägg under kommentarsrutan. Min footer ser ut såhär:
1.  Först måste du skapa en bild i photoshop, bredden på bilden ska max vara lika bred som måttet som står angivet under width i #wrapper { i din stilmall. Går förstås att göra bilden mindre om du vill det.

2.  Klistra sedan in följande kod längst ner i din stilmall:
#footer{
clear: both;
margin: 0px 0px 0px 0px;
padding: 6px 0px 0px 0px;
width: 856px;
height: 20px;
background: #CCCCCC url(adressen till din bild) no-repeat bottom center;
text-align: center;
font-family: verdana, arial;
font-size: 10px;
color: #FFFFFF;
}
#footer{
clear: both;
margin: 0px 0px 0px 0px;
padding: 6px 0px 0px 0px;
width: 856px;
height: 20px;
background: #CCCCCC url(adressen till din bild) no-repeat bottom center;
text-align: center;
font-family: verdana, arial;
font-size: 10px;
color: #FFFFFF;
}

3. Där det står "adressen till din bild" ska du klistra in koden till bilden som ska vara din footer. Glöm inte heller att ändra width och height så det passar in på din blogg.

4. Gå in i din kodmall. Eftersom jag har lagt in min footer på inläggskodmallen tänker jag förklara hur man gör där. Vill du ha bilden under kommentars rutan så tryck ctrl+f, sök upp "<a name="trackback"></a>" och lägg denna kod precis under:
<div id="footer">
<img src="adressen till din bild">
</div>

5. Har ni följt instruktionerna så ska allt sitta fint nu! Har footern hamnat för mycket åt ett håll eller liknande så kan ni behöva pröva er fram genom att ändra i margin & padding, det var dock inget jag behövde göra.

Detta var ett designtips som en läsare ville att jag skulle dela med mig av. Är det något mer ni vill veta hur jag gjort? De fallande snöflingorna? Rullande status på bloggen? Hör av er i en kommentar eller mail så skriver jag ett inlägg om det!

Designtips: Bildspel i headern

DATUM: 2011-12-13 | KLOCKSLAG: 20:12:00 | KATEGORI: BLOGGTIPS | 37 KOMMENTARER
Som ni kan se så har jag ett bildspel i min header nu, det är en del som undrar hur man gör just ett sådant så det tänkte jag visa nu! Har ni mer saker ni vill att jag ska tipsa om så hör av er i en kommentar eller skicka mail!

1. Börja med att lägga in denna kod ↓ under #header { avsnittet i stilmallen.
#EmilyPictureBackground {
float: center;
margin-right: 0px; }

2. Lägg sedan in denna kod precis över </head> i kodmallen. (Koden är inlagd på en testblogg för den inte går att kopiera korrekt annars) Glöm inte att lägga in koden i alla kodmallar och spara!

3. Lägg sedan in denna kod ↓ efter <div id="header">.
<div id="EmilyPictureBackground">
<img src="BILD 1" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"BILD 1;BILD 2;SISTA BILDEN",5);
</script>

Du kan lägga in hur många bilder du vill i bildspelet, bara du har ett " ; " mellan bilderna. Obs gäller ej sista bilden!

4. Lägg in koden i alla kodmallar och glöm inte att spara! Nu är allt klart, har ni några frågor så är det bara att ställa dem i en kommentar! Hoppas det funkar bra för er och att ni vill att jag fortsätter med designtipsen!
#EmilyPictureBackground {
float: center;
margin-right: 0px; }

Designtips: Genomskinlig bakgrund

DATUM: 2011-12-07 | KLOCKSLAG: 19:00:00 | KATEGORI: BLOGGTIPS | 23 KOMMENTARER
Många har frågat mig om hur jag har gjort den genomskinliga "rutan" som ligger mellan bakgrunden och content så nu tänkte jag visa det! Har tänkt börja med designtips nu för det är många som efterfrågar det, allt för er! ♥

Steg 1. Skapa en ny fil i Photoshop med måtten 180 x 30 pixels. Bakgrunden ska vara transparent.

Steg 2. Använd Rectangle Tool och dra en ruta över hela bilden. Dubbelklicka sedan på Shape 1 i lagerrutan så att du kommer in på Layer Style sidan.

Steg 3. I General Blendning rutan så drar du sedan ner Opacity till hur genomskinlig du vill att rutan ska vara (den jag har på bloggen just nu är runt 40%) Spara sedan bilden i PNG-format i Save for Web and Devices.


Steg 4. Ladda upp bilden på din blogg. Kopiera länken och gå in i din stillmall och leta upp #wrapper. Där ska koden in i backgroundpartiet, alltså ska det stå background: url("DIN LÄNK") repeat; Glöm inte att skriva dit repeat; för annars funkar det INTE! Behöver ni hjälp eller är det något som strular så lämna en kommentar!
background: url("http://mkarlstrom.blogg.se/images/2011/untitled-4_168898103.png") repeat;
background: url("DIN LÄNK") repeat;

Lättaste sättet att installera eget typsnitt på bloggen

DATUM: 2011-10-10 | KLOCKSLAG: 16:32:13 | KATEGORI: BLOGGTIPS | 38 KOMMENTARER
Det finns som sagt många sätt att installera typsnitt på bloggen, men nu har jag hittat det lättaste sättet någonsin som man inte kan misslyckas med, tack vare Google Web Fonts!


1.Tryck på "Start using fonts" så kommer ni in på denna sidan. Till höger finns det ett filter för vilket slags typsnitt man vill ha, man kan välja på "Serif", "Sans-Serif", "Display" och "Handwriting". Jag valde Handwiting och sedan valde jag fonten "Loved by the king" genom att trycka på knappen "Add to Collection". Efter man har tryckt där så kommer den blåa raden upp längst ner, tryck då på knappen "Use".


2.Scrolla sedan ner lite på sidan och kopierar koden som står i den blåa rutan.


3.Klistra sedan in koden under <head> i din kodmall, glöm inte att klistra in koden på alla kodmallarna!


4.När du lagt in koden på alla kodmallar så sparar du och går in på stilmallen. Leta upp den delen som du vill ha typsnittet på, jag valde mina inläggrubriker (under Entry headers, h3). Ändra under font-family till namnet på det typsnittet som du har valt. Glöm inte att ha några typsnitter efter den typsnittet du valt, vissa äldre webbläsare kan nämligen inte läsa Google Web Fonts.

Och så var det klart! Snabbt och enkelt. Det enda som är dåligt med denna sida är att man bara kan välja dessa fonter som finns på sidan, men förhoppningsvis så laddar dem upp mer fonter snart! Tycker det var ett mycket enkelt sätt att snabbt byta typsnitt. Är det något ni inte förstår så är det bara att fråga på! =)

BLOGGTIPS

DATUM: 2010-09-03 | KLOCKSLAG: 18:20:08 | KATEGORI: BLOGGTIPS | 93 KOMMENTARER
Tänkte tipsa er om Viktors blogg, han skriver om allt nästan, mest om kläder, stil & mode. Ni har sett han i min blogg förut, då jag fotat han flertal gånger. Tycker ni ska kika in på hans blogg, enligt mig är han Eskilstunas svar på Andreas Wijk!
Malin Karlström | 20 år
Student. Fotograf. Eskilstunabo.
 Fikaholic. Musiknörd. Livsnjutare.

Follow on Bloglovin