Det finns ett stort antal webbplatsmallar på webben, men de har en nackdel - de är inte unika. Om webbplatsägaren inte vill att designen av sin webbplats ska upprepas någon annanstans kan han beställa en mall från en professionell designer eller försöka skapa den på egen hand.
Det är nödvändigt
Adobe Photoshop-program
Instruktioner
Steg 1
Att skapa din egen mall är inte en så svår uppgift som det kan tyckas vid första anblicken. För att arbeta behöver du Adobe Photoshop - naturligtvis måste du ha åtminstone en grundläggande förståelse för att arbeta med det. Men innan du startar programmet och börjar skapa måste du tänka över den framtida designen i förväg. Det enklaste sättet att göra detta är att först bekanta dig med minst hundra färdiga mallar, utvärdera deras fördelar och nackdelar. Var uppmärksam på de framgångsrika lösningarna för vissa designelement. Detta betyder inte att du kommer att kopiera dem, men det är ganska rimligt att ta några vackra och praktiska lösningar som grund.
Steg 2
Baserat på analysen av andras mallar och din egen kreativitet bör du få en uppfattning om hur din webbplats kommer att se ut. Det är bäst att göra grova skisser av den framtida designen med färgpennor på vanliga A4-ark. Du bör börja arbeta med Photoshop först efter att du har fått en klar uppfattning om vad du ska rita exakt.
Steg 3
Starta Photoshop, skapa ett nytt 1200x1600-projekt, ställ in en transparent bakgrund. Slå på linjalverktyget, om det inte redan är på, för att göra detta, tryck på tangentkombinationen Ctrl + R. Aktivera snapping: Visa - snappa.
Steg 4
Nu måste vi dela mallen med guider som visar gränserna för dess element - sidor, kolumner etc. Till exempel vill du dela mallen så att det finns en smal kolumn till vänster, en bred kolumn till höger till höger om mallen och det finns plats högst upp för en rubrik. Detta innebär att du behöver tre vertikala linjer (mallens vänstra kant, den högra och linjen mellan dem) och en horisontell linje som visar rubrikens nedre kant. För att ställa in en vertikal linje flyttar du markören till vänster linjal på vänster sida, trycker på V och håller ned tangenten och drar linjen till önskad plats. Gör detsamma med de andra två vertikala linjerna. Horisontella byggs på samma sätt, endast den övre linjalen används.
Steg 5
Hitta en bakgrund för din mall, den ska vara ett litet, upprepande mönster. Öppna den i Photoshop, välj, kopiera. Klistra sedan in i mallen så många gånger som du behöver för att fylla den med bakgrunden. Klistra in görs så här: "Redigera" - "Klistra in" och dra sedan bakgrundsområdet till önskad plats. Det går ännu snabbare att infoga en bild med Ctrl + V-kommandot. Lägg till en bakgrund för sidhuvudet på samma sätt. Du kan använda olika gradientfyllningar för att skapa en bakgrund.
Steg 6
Använd pennverktyget för att rita mallens kanter med fokus på de linjer som redan har ritats (det vill säga ovanpå dem). Du har fått grunden för den enklaste mallen, nu måste du komplettera den med nödvändiga detaljer - navigeringsknappar, menyrader, olika dekorationselement etc. För mer information om hur du skapar knappar och andra element, läs motsvarande artiklar om hur du arbetar med Adobe Photoshop.
Steg 7
Mallen skapas, nu måste du klippa den i bitar för att infoga dem i html-sidan. Använd skärverktyget för att klippa. För att hitta det högerklickar du på ramverktyget och väljer Cutout i menyn som öppnas. Nu kan du bygga in mallen som önskat och sedan spara: "File" - "Save for Web". I fönstret som öppnas väljer du filtyp: HTML & bilder, anger filnamn: index.htm och sparar det. Du kommer att ha en index.htm-fil och en bildmapp med skivade bilder.
