|
Så här gör du ditt eget pussel i PSP 7.0 eller PS
Välj ut en bild som du vill ha i ditt pussel. Pusslet i detta fallet ska ha tolv bitar så bilden ska ha "bra mått" att dela på tolv bitar.
För att det inte ska se konstigt ut ska bilden helst vara längre på bredden än höjden. Öppna din bild i PSP.
Min bild jag använt i årets adventspussel passade inte så bra att dela i bitar så jag förlängde den en aning på höjden genom
att "klippa och klistra". Tog två mått som var bra att dela på fyra och tre; 400 px bred och 240 px hög. Jag satte också dit en text, vilket
måste göras innan bilden delas upp i bitar.
För att lätt kunna dela in bilden i rutor använde jag mig av "view-new guide...".
Sätt vertikal till 100 px. Klicka ok.
Gör om proceduren igen men sätt nu vertikal till 200 px. Igen till 300 px. Som du ser får du nu blå vertikala linjer på din bild.
Nu ska det göras horisontella linjer. Gör på samma sätt men välj "view-new guide..." horisontal. I mitt fall ska jag dela in bilden
i tre delar horisontellt. 240/3= 80. Varje horisontell del ska alltså sättas till 80 px. (Tänk på att du arbetar med px och inte cm!)
Nu är bilden indelad i rutmönster. Varje del ska sparas och döpas men inte än.
Du väljer nu "crop-tool".
Sätt värdena som kommer upp i verktygsraden till "width 100 px" och "height 80 px". Dra ditt croptoolverktyg från översta
vänstra hörnet snett neråt första rutan.
Markören är så pass känslig att den med enkelhet känner av hur långt du ska dra musen. Den vill helt
enkelt "fastna" på den blåmarkerade linjen.
När markören når hörnet, släpp musknappen. När nu första rutan är markerad trycker du på "returknappen". Nu blir bilden
du markerat en egen liten bild.
Bilden ska du spara genom att välja "file-save for web".
Markera "gif", "256 colors". Spara och döp bilden till "T1". Spara bilderna i en speciellt avsedd mapp.
För att återgå till din bild du arbetar i klicka "ctrl+alt+z" (alltså ångra) och bilden kommer upp igen med helt omarkerade rutor. Markera nu
ruta två till höger om den första rutan.
Upprepa proceduren med att ta cropverktyget och dra det från översta vänstra hörnet på bild två och ner i dess hörn. Släpp musknappen, tryck retur.
Spara bilden på samma sätt som förra men nu ska bilden döpas till "T2". Gör på samma sätt med alla tolv bilderna.
HTMLdokumentet (som du får koden till här nedan) och bilderna du gjort ska ligga i samma mapp. Kopiera koden och döp ditt dokument och
lägg till filändelsen "*.html"
|
Mellan <title> och </title> skriver du in vad du vill att ditt pussel ska heta. Här har jag döpt det till "Tomtefar".
Kopiera koden här nedan i rutan och kopiera in den i ett nytt dokument.
<HTML>
<HEAD>
<TITLE>Tomtefar</TITLE>
</HEAD>
<BODY onLoad="checkit()">
<SCRIPT LANGUAGE="JavaScript">
<!--
var temp = new Image()
var loc
var gotit
function checkit()
{
if ((navigator.appName=="Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion) >= 4))
return
else
alert("To play, you need MSIE 4 or greater")
}
function exch()
{
if ((event.button == 1) && (event.srcElement.className == "drag"))
{
if (gotit == 1)
{
gotit = 0
document.images[loc].src = document.images[event.srcElement.name].src
document.images[event.srcElement.name].src = temp.src
}
else
{
gotit = 1
loc = event.srcElement.name
temp.src = document.images[loc].src
}
}
}
document.onmousedown=exch
// -->
</SCRIPT>
<CENTER>
<NOSCRIPT>
To play this game, you need IE 4 or greater
</NOSCRIPT>
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" STYLE="border:15px ridge red">
<TR>
<TD><IMG SRC="T9.gif" WIDTH="100" HEIGHT="80" NAME="pic11" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T4.gif" WIDTH="100" HEIGHT="80" NAME="pic12" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T6.gif" WIDTH="100" HEIGHT="80" NAME="pic13" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T1.gif" WIDTH="100" HEIGHT="80" NAME="pic14" CLASS="drag" ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="T7.gif" WIDTH="100" HEIGHT="80" NAME="pic21" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T10.gif" WIDTH="100" HEIGHT="80" NAME="pic22" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T2.gif" WIDTH="100" HEIGHT="80" NAME="pic23" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T12.gif" WIDTH="100" HEIGHT="80" NAME="pic24" CLASS="drag" ALT=""></TD>
</TR>
<TR>
<TD><IMG SRC="T3.gif" WIDTH="100" HEIGHT="80" NAME="pic31" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T5.gif" WIDTH="100" HEIGHT="80" NAME="pic32" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T11.gif" WIDTH="100" HEIGHT="80" NAME="pic33" CLASS="drag" ALT=""></TD>
<TD><IMG SRC="T8.gif" WIDTH="100" HEIGHT="80" NAME="pic34" CLASS="drag" ALT=""></TD>
</TR>
</TABLE>
<BR>
</CENTER></BODY>
</HTML>
|
I tabellen som finns i HTMLdokumentet är alla bilder angivna med namn.
Om du inte har samma mått på dina bilder som i dokumentet ska "width" och "height" ändras till måttet du valt på dina bilder.
Är dina T1.gif, T2.gif o.s.v. i måtten 100x50 ska måtten i tabellen ändras till samma mått!
Spara dokumentet och glöm ej att döpa det till "namn_på_ditt_dokument.html" om du arbetar i anteckningar.
Öppna nu ditt HTMLdokument och se om ditt pussel kommer upp.
|