Designtips: Triangelformad bild

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!
18

Designtips : Hur man skapar rörliga objekt

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!
23

Designtips: Footer

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!
29