Hvordan Tegne En Mal For Et Nettsted

Innholdsfortegnelse:

Hvordan Tegne En Mal For Et Nettsted
Hvordan Tegne En Mal For Et Nettsted

Video: Hvordan Tegne En Mal For Et Nettsted

Video: Hvordan Tegne En Mal For Et Nettsted
Video: Lær at mal solsikker 2024, November
Anonim

Det er et stort antall nettstedsmaler på nettet, men de har en ulempe - de er ikke unike. Hvis nettstedseieren ikke vil at utformingen av nettstedet hans skal gjentas andre steder, kan han bestille en mal fra en profesjonell designer eller prøve å lage den på egen hånd.

Hvordan tegne en mal for et nettsted
Hvordan tegne en mal for et nettsted

Det er nødvendig

Adobe Photoshop-program

Bruksanvisning

Trinn 1

Å lage din egen mal er ikke en så vanskelig oppgave som det kan virke ved første øyekast. For å jobbe trenger du Adobe Photoshop - selvfølgelig må du ha minst en grunnleggende forståelse av å jobbe med det. Men før du starter programmet og begynner å lage, må du tenke på den fremtidige designen på forhånd. Den mest praktiske måten å gjøre dette på er å først bli kjent med minst hundre ferdige maler, evaluere fordeler og ulemper. Vær oppmerksom på vellykkede løsninger for visse designelementer. Dette betyr ikke at du vil kopiere dem, men det er ganske rimelig å ta noen vakre og praktiske løsninger som grunnlag.

Steg 2

Basert på analysen av andres maler og din egen kreativitet, bør du få en ide om hvordan nettstedet ditt vil se ut. Det er best å lage grove skisser av fremtidens design med fargeblyanter på vanlige A4-ark. Du bør begynne å jobbe med Photoshop først etter at du har fått en klar ide om hva du akkurat skal tegne.

Trinn 3

Start Photoshop, lag et nytt 1200x1600-prosjekt, sett en gjennomsiktig bakgrunn. Slå på linjalverktøyet, hvis det ikke allerede er på, for å gjøre dette, trykk på tastekombinasjonen Ctrl + R. Aktiver snapping: Vis - snapping.

Trinn 4

Nå må vi dele malen med guider som viser grensene til elementene - sider, kolonner, etc. For eksempel vil du dele malen slik at det er en smal kolonne til venstre, en bred kolonne til høyre til høyre for malen, og det er plass øverst for en overskrift. Dette betyr at du trenger tre vertikale linjer (den venstre kanten av malen, den høyre og linjen mellom dem) og en horisontal linje som viser den nederste kanten av overskriften. For å sette en vertikal linje, flytt markøren til venstre linjal på venstre side, trykk på V, og hold nede tasten, og dra linjen til ønsket sted. Gjør det samme med de to andre vertikale linjene. Horisontale er bygget på samme måte, bare den øvre linjalen brukes.

Trinn 5

Finn en bakgrunn for malen din, den skal være et lite, gjentatt mønster. Åpne den i Photoshop, velg, kopier. Lim deretter inn i malen så mange ganger du trenger for å fylle den med bakgrunnen. Liming gjøres slik: "Rediger" - "Lim inn", og dra deretter bakgrunnsområdet til ønsket sted. Det er enda raskere å sette inn et bilde ved hjelp av Ctrl + V-kommandoen. Legg til en bakgrunn for sidehodet på samme måte. Du kan bruke forskjellige gradientfyll for å lage en bakgrunn.

Trinn 6

Bruk blyantverktøyet til å tegne kantene til malen, med fokus på linjene som allerede er tegnet (det vil si på toppen av dem). Du har fått grunnlaget for den enkleste malen, nå må du supplere den med de nødvendige detaljene - navigasjonsknapper, menylinjer, forskjellige dekorasjonselementer, etc. For mer informasjon om hvordan du lager knapper og andre elementer, kan du lese de tilsvarende artiklene om hvordan du arbeider med Adobe Photoshop.

Trinn 7

Malen er opprettet, nå må du kutte den i biter for å sette dem inn i HTML-siden. Bruk skjæreverktøyet til å kutte. For å finne det, høyreklikk på rammeverktøyet og velg Cutout fra menyen som åpnes. Nå kan du rede malen som ønsket, og deretter lagre: "File" - "Save for Web". I filvinduet som åpnes velger du filtypen: HTML & images, spesifiserer filnavnet: index.htm og lagrer det. Du vil ha en index.htm-fil og en bildemappe med skivede bilder.

Anbefalt: