Hvordan Man Tegner En Skabelon Til Et Websted

Indholdsfortegnelse:

Hvordan Man Tegner En Skabelon Til Et Websted
Hvordan Man Tegner En Skabelon Til Et Websted

Video: Hvordan Man Tegner En Skabelon Til Et Websted

Video: Hvordan Man Tegner En Skabelon Til Et Websted
Video: Lær at tegne PIKACHU fra Pokémon | HVORDANTEGNERJEG.DK ✔ 2024, April
Anonim

Der er et stort antal webstedsskabeloner på nettet, men de har en ulempe - de er ikke unikke. Hvis webstedsejeren ikke ønsker, at designet på sit websted skal gentages andetsteds, kan han bestille en skabelon fra en professionel designer eller prøve at oprette den på egen hånd.

Hvordan man tegner en skabelon til et websted
Hvordan man tegner en skabelon til et websted

Er det nødvendigt

Adobe Photoshop-program

Instruktioner

Trin 1

Oprettelse af din egen skabelon er ikke så vanskelig en opgave, som det kan se ud ved første øjekast. For at arbejde har du brug for Adobe Photoshop - selvfølgelig skal du have mindst en grundlæggende forståelse af at arbejde med det. Men inden du starter programmet og begynder at oprette, skal du tænke over det fremtidige design på forhånd. Den mest bekvemme måde at gøre dette på er først at stifte bekendtskab med mindst hundrede færdige skabeloner, evaluere deres fordele og ulemper. Vær opmærksom på de succesrige løsninger på visse designelementer. Dette betyder ikke, at du vil kopiere dem, men det er ganske rimeligt at tage nogle smukke og praktiske løsninger som grundlag.

Trin 2

Baseret på analysen af andres skabeloner og din egen kreativitet, skal du få en idé om, hvordan dit websted vil se ud. Det er bedst at lave grove skitser af det fremtidige design med farvede blyanter på almindelige A4-ark. Du skal først begynde at arbejde med Photoshop, når du har en klar idé om, hvad du præcist skal tegne.

Trin 3

Start Photoshop, opret et nyt 1200x1600-projekt, indstil en gennemsigtig baggrund. Tænd linealværktøjet, hvis det ikke allerede er tændt, for at gøre dette skal du trykke på tastekombinationen Ctrl + R. Aktivér snapping: Vis - snapper.

Trin 4

Nu skal vi dele skabelonen med hjælpelinjer, der viser grænserne for dens elementer - sider, søjler osv. For eksempel vil du opdele skabelonen, så der er en smal søjle til venstre, en bred søjle til højre til højre for skabelonen, og der er plads øverst til en overskrift. Dette betyder, at du har brug for tre lodrette linjer (skabelonens venstre kant, højre og linjen imellem dem) og en vandret linie, der viser den nederste kant af overskriften. For at indstille en lodret linje skal du flytte markøren til venstre lineal på venstre side, trykke på V og mens du holder tasten nede, trækker du linjen til den ønskede placering. Gør det samme med de to andre lodrette linjer. Vandrette er bygget på samme måde, kun den øvre lineal bruges.

Trin 5

Find en baggrund til din skabelon, den skal være et lille, gentaget mønster. Åbn den i Photoshop, vælg, kopier. Indsæt derefter i skabelonen så mange gange, som du har brug for, for at udfylde den med baggrunden. Indsæt udføres således: "Rediger" - "Indsæt", og træk derefter baggrundsområdet til den ønskede placering. Det er endnu hurtigere at indsætte et billede ved hjælp af Ctrl + V-kommandoen. Tilføj en baggrund til sidehovedet på samme måde. Du kan bruge forskellige gradientudfyldninger til at skabe en baggrund.

Trin 6

Brug blyantværktøjet til at tegne skabelonens kanter med fokus på de linjer, der allerede er tegnet (dvs. oven på dem). Du har modtaget grundlaget for den enkleste skabelon, nu skal du supplere den med de nødvendige detaljer - navigationsknapper, menulinjer, forskellige dekorationselementer osv. For at få flere oplysninger om, hvordan du opretter knapper og andre elementer, skal du læse de tilsvarende artikler om arbejde med Adobe Photoshop.

Trin 7

Skabelonen oprettes, nu skal du klippe den i stykker for at indsætte dem i html-siden. Brug skiveværktøjet til at skære. For at finde det skal du højreklikke på rammeværktøjet og vælge Cutout i menuen, der åbnes. Nu kan du rede skabelonen som ønsket og derefter gemme: "File" - "Save for Web". I det vindue, der åbnes, skal du vælge filtype: HTML & billeder, angive filnavnet: index.htm og gemme det. Du vil have en index.htm-fil og en billedmappe med skivede billeder.

Anbefalede: