Nemt og hurtigt Webdesign: Sommerhus website


Nemt og hurtigt Webdesign

Sværhedsgrad:Sværhedsgrad
Begynder – kendskab til programmerne hjælper
Internetforbindelse:
Kræves for fuldførelse
Software*:
Photoshop© CS 2
Dreamweaver© CS3
AceFtp© 3 (freeware)

*) For at kunne følge med i guiden, forudsætter det at du er i besidelse af både Adobe Photoshop© (minimum CS2) og Adobe© Dreamweaver© (minimum CS2), eller tilsvarende programmer med samme funktionalitet.

Her er en guide til hvordan man hurtigt og nemt laver en hjemmeside, som ser lækker og indbydende ud. I eksemplet vil vi lave en hjemmeside til vores sommerhus, som vi har tænkt os at leje ud.

Vi starter med at lave et nyt dokument/kanvas (Ctrl/æble + N) i Photoshop (størrelse: 900 pixels bredt og 600 pixels højt). Hvis Højde og bredde står til andet end pixels, kan du vælge hvilken måleenhed du vil bruge ved siden af den nummeriske angivelse, ved at klikke på den lille pil ved siden af måleenheden (Cm, Picas osv). Tryk OK.

new size illustration
Der er ikke brug for så meget plads, da vi ikke skal have særlig mange informationer på siden. De informartioner vi skal bruge vil blive tilgået via menuknapper eller “Hotspots”.

Åben din “lag/layers” palette, ved at vælge den i i dropdown menuen der hedder “Window” eller tryk F7.

open window illustration
I “Layers” paletten ligger allerede et lag, som hedder “Backgound/baggrund”, men vi vil gerne have lidt frihed, så vi laver et nyt lag ved at trykke på “Create new layer/skab nyt lag”, nederst i “Layers” paletten.

layer 1 illustration
Vi har nu et rent lag ovenpå vores baggrundlag. Det nye lag er indikeret ved en ternet baggrund, hvilket betyder at det nye lag er gennemsigtigt, og derfor kan vi ikke se nogen forskel på vores kanvas.

Nu vil vi bruge vores “Regtangluar Marqee tool” til at markere et udsnit på vores site, hvor hovedindholdet skal placeres.

marquee tool illustration

Sørg for at dit kanvas er i 100% størrelse og at dit nye lag er aktivt – du kan se hvilke lag er aktive udfor den blå farve i din “Layers” palette.

Marker en passende størrelse på dit kanvas.


Brug din “Paintbucket” tool (G) og fyld hvid farve i den valgte markering.

paint_bucket illustration
Med laget stadigt valgt, højeklik i den lille rude ved siden af lag-navnet. I dropdown-menuen, vælg “Blending Options…”

blending options illustration
Det bringer din “Layer Style” dialog box frem.

blending options default illustration
Find “Color overlay” og klik på den, så der kommer et lille fluben.

color overlay illustration
Nu bliver dit lag rødt, og vi vil gerne have en behagelig varm farve istedet. Klik på den røde farveindikator ved siden “Blend mode” og vælg en sandfarve. Tryk ok når du har fundet en passende farve, men undgå at lukke “Layer Style” dialog boxen.

layer style illustration
Find nu “Stroke” og klik på den så der kommer et lille flueben ud for. Det giver os en rød ramme omkring vores lag.

layer style 2
Vi vil gerne have en hvid, bred ramme med skarpe kanter, så start med at sætte size til ca. 10px og sæt position til “Inside” – det giver os en bred ramme med skarpe kanter. Lad de næste optioner være, og gå ned til “Color” under “Fill type”. Klik på farvevinduet og vælg en hvid farve. Tryk “OK”, og tryk “OK” igen i “Layer style” dialog boxen, så den lukker.

color picker illustration
Vores lag ser ikke meget anderledes ud end det gjorde før … Dette skyldes at det ligger på en hvid baggrund, men vi kan se det er påført en “Layer style” ved det lille “F” ikon til højre på laget.

f funktion
Fjern det lille “øje” ikon udfor vores baggrundslag, og vi kan pludselig se vores ramme.

synlag lag
Hold Ctrl nede og tryk på det øverste lag ” Main”, så der kommer en aktiv markering rundt om laget. Med markeringen stadig aktiv, laver vi et nyt lag, ved at trykke på det lille “bladre” ikon nederst i vores “Layers” pallette.

bladre ikon
Med det nye lag aktivt, men tomt, vælger vi vores “Gradient tool”.

gradient tool
Sørg for at din “Gradient” går fra sort til transparant.

gradient transparant
Nu trækker vi en linie fra ca. en tredjedel inde på laget og ud af kanvasset. Hold musen nede og træk / slip. Gør det både i toppen og i bunden. Så 2 gange…

skygge 1
Nu skulle vi gerne have 2 seperate lag: “Main” og “Skygge”. Sæt Skyggelagets opacitet ned til 25%.

main og skygge
Med markeringen stadig aktiv, laver vi et nyt lag. Det skal være vores baggrundsskygge, så fyld det nye lag med sort “Paint Bucket Tool”, og flyt det under “Main” laget, ved at trække det.

paint bucket tool
For at lave skyggen lidt organisk, laver vi selv skyggen. Vælg “Baggrundslaget”, og vælg “Gaussian Blur” under “Blur” i “Filters” menuen.

gaussian blur
Sæt indstillingen til en 15-20, til du ender med en godt udtværret flade.

blur illustrration
Tryk “Ctrl+T” for at få “Transform” frem, højreklik på laget og vælg “Warp”.

warp illustration
“Warp” funktionen gør det muligt at lave skyggen dynamisk. Vælg ydrepunkterne og træk ind på midten til skyggen forsvinder lidt. Hiv og træk til du er tilfreds med resultatet. Højreklik igen, vælg “Free transform” og tryk “Enter”.

warp 2 illustration
Skyggen skulle gerne se lidt ujævn og organisk ud nu.

warp skygge illustration
Nu er vores kanvas klart til næste skridt. Find et godt billede af dit sommerhus og åben det “Ctrl+ O”. Du kan også bare dobbeltklikke på den grå baggrund i Photoshop.

sommerhus billede
Tag fat i dit billede og træk det over på dit kanvas.

sommerhus billede 2
Tryk “Ctrl+T” og ændre det til en størrelse på ca. 50% af baggrunden. Højreklik på dit nye lag (det med billedet) og vælg “Blending Options” … Sæt flueben i “Stroke”, og sæt rammen til 5 px i bredden, position til “Inside” og vælg en hvid farve.

sommerhus layer style
Hold “Ctrl” nede og klik på laget så det bliver aktivt markeret. Lav et nyt lag og fyld det med sort. Træk det sorte lag under billedet.

crtl under billede
Vælg “Gaussian Blur” under “Blur” fra “Filter” menuen og vælg en radius på ca. 3 px. Tryk ok.

gaussian blur 2
Vælg begge lag; Billedlaget og skyggelaget. Hold “Ctrl” nede og vælg dem begge. Tryk “Ctrl+T” og positionér lagene så de ligger henslængt i det øverste venstre hjørne. Dobbelklik på billedet når du er tilfreds.

billede skygge lag
Vi vil bruge “Warp” igen til at give skyggen et organisk udseende. Tryk “Ctrl+T”, højreklik på billedet og vælg “Warp”. Juster skyggen til du syntes det ser godt ud.

warp sommerhus
Vælg skyggelaget og sæt opaciteten til 50%, så det ikke ligner en slagskygge.

vælg skygge lag
Nu vil vi tilføje noget tekst. Vælg “Tekst” værktøjet og træk en tekstboks fra øverste venstre hjørne og ned til højre hjørne. Lad der være lidt luft rundt om tekstboksen.

tilføje tekst
Start med at skrive en overskrift. Vælg en passende font og en god størrelse.

skriv en overskrift
Skriv resten af din tekst ind i en noget mindre font.

tekst mindre font
Nu er teksten færdig. Du kan stadig lave størrelsen på din tekstboks om ved at klikke i tekstlaget på “T”et.

nu er teksten færdig
Nu vil vi lave billedgalleriet. Åben de billeder du vil have ind i galleriet, og lav dem i en størrelse, så du kan have 2 kollonner med 3 billeder i hver.

nu til billedeglalleriet
Vi behandler galleribillederne på samme måde som vi gjorde med “Main” laget og med topbilledet. Højreklik på det nye lag og vælg “Stroke”. Sæt rammen til ca. 3 px, position til “Inside” og vælg en hvid farve.

vi behandler
Hold “Ctrl” nede og tryk på laget så det bliver aktivt markeret. Lav et nyt lag og fyld det med sort. Læg laget bag ved dit billedlag.

hold crtl nede
Vælg “Gaussian Blur” under “Blur” i “Filter” menuen, og sæt en passende størrelse fx. 2px. Tryk OK.

vælg gaussian blur
Med skyggelaget valgt, tryk “Ctrl+T” og højreklik på billedet og vælg “Warp”. Juster til det ser godt ud.

Med skyggelaget valgt
Når du er færdig vælg skyggelaget og sæt opaciteten til 50%.

Når du er færdig
Gør det samme på de resterende billeder. Til sidst skulle det gerne se sådan ud:

Gør det samme
Nu vil vi tilføje en overskrift til galleriet. Vælg tekstvæktøjet og lav en tekstboks over de små billeder. Skriv en passende overskrift.

Nu vil vi tilføje

Lav et nyt lag. Vælg malerpenslen og højreklik på kanvasset. Vælg 1px “diameter” og 100% “hardness”.

Lav et nyt lag
Hold shift nede og lav en streg under Galleri teksten.

Hold shift nede
Vælg dit viskelæder og højreklik på dit kanvas. Sæt en passende diameter og sæt hardness til 0%.

Vælg dit viskelæder
Fjern nu starten og slutning af stregen med viskelæderet.

Fjern nu starten
Vi skal også bruge en infobar med nogle vigtige ting omkring sommerhuset.
Så start med at lave en firkantet markering med markeringsværktøjet. Lav et nyt lag og fyld det med hvid.

Vi skal også bruge

Vi skal også bruge 2
Infobaren skal også have en skygge. Så vi laver et nyt lag – med markeringen stadig aktiv – og fylder det med sort. Giv det en 4-5 px “Gaussian Blur”.

Info baren
Som tidligere laver vi skyggen organisk med “Warp” værktøjet.

Som tidligere laver
Når vi er tilfredse, tager vi begge lag og lægger dem under vores Topbillede, men oven over “Main”.

Når vi er tilfredse
I det her tilfælde vil jeg gerne have en plantegning i min infobar. Så jeg åbner min plantegning og hiver den over på sommerhusdesignet.

I det her tilfælde vil
Med Transform “Ctrl+T” roterer vi og placerer den med lidt luft omkring på infostriben. Læg den øverst i lagene.

med transform
Vi vil også gerne have lidt tekst info. Så vi laver en tekstbox “T” og fylder de informationer i som er relevante, fx. kvm. antal værelser, osv.

Vi vil også gerne
Nu mangler der kun nogle småting. Vi skal bruge nogle knapper, så folk nemt kan komme i kontakt med os. Man kan selvfølgelig nøjes med at tilføje et telefonnummer, men vi laver også  en knap til Email-kontakt. Vi ønsker ikke at blive ringet op i alle døgnets timer … Email er nemt at forholde sig til.

Nu mangler der kun
Brug “Rounded rectangle Tool” til at lave et par knapper øverst på siden. Hold knappen nede på værktøjet for at se alle muligheder.

Brug Rounded rectangle Tool
Sæt radius til ca. 10px. Klik og træk en knap.

sæt radius 10

sæt radius 2
Vi har nu et lag der heder “Shape”. Højreklik på det for at få “Blending options” frem igen. Sæt et flueben i “Color Overlay”, og vælg en lys farve.

vi har nu et lag
Sæt også et flueben i “Inner Shadow”. Lad “Blend mode” stå på normal, sæt opaciteten ned til ca. 50%, og fjern fluebenet i “Global Light”. Sæt distance til ca. 3,0 i “Choke”, og ca. 7,0 i “Size”. Tryk ok.

flueben inner shadow
Tilføj et tekstlag og skriv “Kontakt”. Skriv det så det står centreret.

tilføje et tekst lag
Marker dit nye tekstlag og dit Shape lag (hold “Ctrl” nede for at vælge flere lag), hold “ALT+Shift” nede og træk med musen til højre. Det skulle gerne duplikere dit lag. Navngiv de to nye lag (ved at klikke på lagets navn). Klik på T’et ved siden af det nye tekstlag og skriv “Lokation”.

Marker dit nyt tekstlag
Fordel knapperne pænt på siden. Højeklik igen på hvert lag og åben “Blending options” – Giv begge knapper en “Stroke” (ca. 2px) og sæt position til “outside”, og vælg en hvid farve. Det giver lige et ekstra touch.

Fordel knapperne
Vi vil gerne have et ikon på de billeder, som man kan se i et større format. Find et billede af et forstørrelseglas eller lign. og hent det ind i dokumentet.

sidste ting
Sæt størrelsen “Ctrl+T” og kopier dem til alle de steder med billeder.

sæt størrelsen
Så er indholdssiden faktisk færdig.

så er indholdet faktisk
Gem siden “Ctrl+S” i “PNG” filformatet. Det gør nemlig at vi gemmer med gennemsigtig baggrund. Om lidt vil vi gå igang med at konstruere baggrunden.

gem siden
Baggrunden jeg har valgt, er et billede af en dug, som består af hvide og gule vertikale linjer. Det betyder at vi kan lave et billede, der kan gentage sig selv uendeligt, uden at man kan se forskel.
Åben dit baggrundsbillede. I mit tilfælde er det alt for stort i 100%.

ny baggrund
Så højeklik på billedrammen og vælg “Image Size”.

image size
Sæt “Width” (bredde) til ca. 700px

sæt width
Nu er størrelsen straks mere håndgriblig. Højreklik på rammen igen og vælg denne gang “Canvas Size”, og sæt orienteringen til højre og i midten. Sæt “Width” til ca. 2000px og Tryk Ok.

nu er størrelsen
Nu har vi et meget breddere kanvas.

breddere canvas
Vælg laget med striberne og hold “ALT+Shift” nede og træk laget mod venstre, det skulle gerne duplikere sig selv.

vælg laget striberne
Sæt det nye lag til 50% opacitet. og læg det oven på det  andet lag til de yderste gule striber passer til hinanden.

opacity laget
Gentag de forgående skridt til du har udfyldt hele dit kanvas.

gentag de foregående
Brug nu dit “markerings” værktøj til at markere fra halvdelen af den første gule stribe til halvdelen af den sidste gule strbe.

brug nu dit markering
Med markeringen stadig aktiv, vælg nu “Crop” fra menuen “Image”.

crop image
Vælg nu alle dine lag. Hold “Ctrl” nede og tryk “Ctrl+E” . for at lave ét lag.

vælg alle lag
Nu har vi ét lag, men der er små pletter som bliver gentaget – Dem vil vi lige fjerne. Vælg “Clone Stamp Tool”.

fjern pletter
Højre klik og vælg en passende størrelse på din “Brush”, og sæt “Hardness” til 0%.

brush hardness
“Clone Stamp” værktøjet fungerer ved at “klone” fra et sted og “klone” det til et andet sted. Så hold “ALT” nede og klik på et uniformt sted (et sted der ikke skiller sig ud ved enten prikker eller streger). Det er der du kloner fra.

clone tool
Slip “ALT” og begynd at male. Fjern alle pletterne på laget.

slip ALT
Når du har “renset” baggrunden, tilføjer vi lige en skygge. Lav et nyt lag og vælg “Gradient” fra din værktøjslinje.
Lav en sort til transperant hen over toppen.

renset baggrund
Du kan evt. farvejustere lidt. “Ctrl+U”.

farve justere
Gem din baggrund “Save to WEB” – “Ctrl+Shift+S” – og juster evt. “Quality” til det ser godt ud, uden at fylde for meget.

gem din baggrund

Dreamweaver

Nu skal vi have sitet over i Dreamweaver, så start Dreamweaver og åben et nyt HTML dokument.

dreamweaver
Start med at lave en tabel. Sæt indstillingerne til 1 row, 1 columm, table witdh til ca. 1024px og resten til 0.
Vælg “None” header.

lav en tabel
Placer din cursor i din nye tabel og klik – Tryk “Ctrl+I” for at indsætte et billede (find sommerhuswebsite.png).

placere cursor
Hvis din tabel er lidt for stor , så bare tag fat i trækpunkterne og træk til den passer.

tabel for stor
Med tabellen stadig aktiv, gå ned i “Properties” og find “ALIGN”, som står til “default”, sæt den til “Center”. Dette centerer
dit website. Du kan også justere den til højre eller venstre.

tabel stadig aktiv
Nu vil vi sætte baggrunden ind. Højreklik på det tomme kanvas, og vælg “Page properties” nederst.

sætte baggrund ind
I dialog boksen klik på “Browse” ud fra “Background image” og find dit “Background.jpg” billede. Sæt alle “margins” til 0 og tryk OK.

appearance
Så er elemeneterne på plads. Det er centreret og baggrunden ser godt ud.

elementerne
Lad os tilføre funktionalitet til knapperne. Klik på “Rectangular HotSpot Tool” nederst i din “Properties” menu.

knappefunktion
Med “Rectangular HotSpot Tool” aktivt, træk nu kasser rundet om de elementer, som skal have en “klik-funktion”.

klikfunktion
Det første hotspot er til vores kontakt knap. Når du har lavet hotspottet, kan du nederst i “Properties” indsætte et link (skriv fx mailto: dinemail @ ditsite.dk). Det gør at man kan klikke på kontakt knappen hvorefter browseren åbner din email klient så man kan skrive en email.

første hotspot
Gør det samme på Lokation knappen, men sæt et link ind til enten “Krak” elller “Googlemaps”, hvor man kan se lokationen af sommerhuset. (Aben en browser, find dit sommerhus på googlemaps, og kopier webadressen
ind i linket. Sæt “Target” til “_blank”. Det gør at den åbner i et nyt vindue.

location knap
Sæt Hotspots på resten af dine billeder.

hotspots på billeder
Start et nyt HTML dokument, “Ctrl+N”.

start nyt dokument
Nu har vi et nyt tomt HTMl dokument. Placer cursoren i dokumentet og tryk “Ctrl+I” for at finde det første billede (ca. 1024x768px) frem, og placer det i dokumentet. Højreklik på et tomt sted i på dit kanvas, og vælg “Page Properties”.

blankt html dokument
Sæt alle “Margins” til 0 og tryk OK. Navngiv dokumentet med en passende titel.

alle margins
Gem dit dokument, som fx “Stuen.html”. Det her vil være det store billede man for frem, når man klikker på den lille “Thumbnail” på hovedsiden.

gem dokument hovedsiden
Gå tilbage til din hovedside, og sørg for at det første billede i galleriet er valgt. Find din “Behaviors” menu, og vælg “Open Browser window”.

behaviors menu
I det vindue, der dukker frem nu, find dit “Stuen.html” igennem “Browse” knappen. Sæt bredde og højde til samme størrelse som det billede du satte ind i “Stuen.html” dokument. Lad resten være o, tryk OK. Tryk evt F12 for at se om funktionaliteten virker.

browse knappen
Nu har vi tilknyttet en “Behaviour” til vore “Hotspot”, men der står “default” til “OnMouseOver”, hvilket betyder a billedet kommer frem, hvis man kører musen henover billedet. Klik istedet på “OnMouseOver” og vælg “OnClick”, så billedet bliver stort når man klikker på. (Gentag dette på alle Galleribillederne).

mouseover onclick
Når du er færdig, navgiv siden “sommerhuset” og gem siden – hvis siden skal ligge som det første man ser når man taster din webadresse ind, skal det navngives som html dokument ” index.html” ( kun små bogstaver).

navngiv siden

FTP Klient

Åben din “FTP klient” program, og flyt alle dine filer i roden på dit webhotel.

ftp klient

Resultat

Voila – en fuld funktionel hjemmeside.

færdig hjemmeside

Gemt i: Grafisk Design

Om skribenten Hervard Olander Merved: Jeg har en fortid i TV produktion og en lang karriere inden for reklamebranchen. Til dagligt driver jeg mit eget reklamebureau. Mine største interesser ligger hovedsageligt inden for film, design og gode vinkler på livet som vi opfatter det her og nu. Jeg sætter stor pris på ærlighed og sætter spørgsmålstegn ved så meget jeg kan.

4 kommentarer til "Nemt og hurtigt Webdesign: Sommerhus website"

Hvad mener du om "Nemt og hurtigt Webdesign: Sommerhus website?

  1. Kenneth Hansen siger:

    Wow fed tutorial! – Nemt er måske så meget sagt – det tog mig mindst 6 timer at gennemføre denne tutorial…men fedt design!

  2. Finn B siger:

    Jeg vil give Kenneth ret. At kalde arbejdet med Photoshop og Dreamweaver nemt er måske lige at stramme den.
    Det er dog en fantastisk god og detaljeret guide med gode skærmdumps

    Tak for det :-)

  3. Så faldt jeg også lige over denne tutorial og syntes faktisk, den er rigtig god. Jeg savner bare lige det element der gør, at den kan indekseres ordentligt på søgemaskiner.

    Hele denne tutorial indeholder rigtig meget om Photoshop og arbejdet i Photoshop. Men hele delen om det, at “klippe” designet ud af et billede mangler, hvis du spørger mig.

    Alle der arbejder med design af hjemmesider, bør vide at tekst på billeder ikke indekseres og det ville derfor være meget svært at gøre siden synlig på andet end købte reklamer eller links. Når det så er sagt, så er det en god guide til en hurtig løsning. 6 timer på en hel hjemmeside er billigt sluppet og grundigheden i denne gennemgang er virkelig god. Godt arbjde :-)

    • Hej Dennis, tak for rosen og den konstruktive kritik.
      Du har helt ret i at denne tutorial omhandler meget Photoshop arbejde, og at der ikke bliver gået i dybden med SEO ( Search Engine Optimization ). Men det var heller ikke idéen.

      Idéen med denne tutorial var at give normale mennesker med et moderat kendskab til websider en mulighed, for at se de præcise skridt det tager fra start til slut for at lave en pæn/troværdig hjemmeside.

      SEO er et kapitel for sig selv, som kræver en masse andre kendskaber. Men jeg giver dig ret i at det er et naturligt kapitel at tage bagefter.

Skriv en kommentar

Modtag e-mail ved nye kommentarer til artiklen