Tutorial - Design som vårdesignet mitt.

16:55 // 04.jun.2010 // Tutorials // 10 kommentarer

Jeg tenkte jeg skulle lage en tutorial på hvordan man lager et design som mitt. Jeg har brukt Photoshop CS4, men andre avanserte grafikkprogrammer kan nok også brukes. Tviler på at det går i paint.

Her er det vi skal lage:


Tenkte jeg skulle skrive noen små tips som kommer til nytte:
- HTML-fargen er den samme som kommer opp i den lille boksen når man velger farge. Man bare bruker # forran. Eks: 000000 er #000000 i HTML-farge.
- Det kan være lurt å laste opp bildene på et annet sted enn blogg.no. Jeg bruker imageshack.us.
- Hjelperutene mine er innstilt på 128px inndelt i 4. Det kan man endre på Edit > Preferences > Guides, grids & slices.

Noen hurtigtaster (windows):
- Fyll med bakgrunnsfarge: CTRL + Backspace
- Fyll med forgrunnsfarge: ALT + Backspace
- Kopier: CTRL + C
- Kopier alle lag: CTRL + SHIFT + C
- Lim inn: CTRL + V
- Nytt dokument: CTRL + N
- Nytt lag: SHIFT + CTRL + ALT + N
- Grids (hjelperuter) av/på: CTRL + '
- Lage "clipping mask": ALT + (klikk på linjen mellom lagene)
- Endre størrelsen på et lag: CTRL + T

Jeg begynner med å lage et nytt dokument i størrelsen 1024px x 768px, og lager et nytt lag. Jeg slår også på hjelperutene (grids).

Jeg bruker Rounded Rectangle Tool med radius på 25px. Jeg lager et rektangel der headeren skal være.

Høyreklikk, og velg Make selection. Feather radiusen er 0 px.

Jeg fyller det markerte området med en tilfeldig bakgrunnsfarge, hvit. Så lager jeg et nytt lag, og med samme markeringen høyreklikker jeg og velker Stroke. Fyller med svart, og rammen er 1 px på innsiden. Hvis man vil ha tjukkere ramme, velger man et større tall enn 1.


Jeg lager en ny mappe til lagene mine og kaller den header. Her legger jeg de to lagene jeg har laget til nå.


Deretter gjentar jeg det samme som jeg har gjort til nå med rektangler til main og sidebaren. Nytt lag --> rektangler --> Make selection --> Fyll med hvit --> Nytt lag --> Stroke. Jeg bruker hvit bakgrunn for det gjør jeg alltid i main, men om du føler for å ha en annen farge, så gjør du det.


Så velger jeg det aller nederste laget, Background. Jeg velger en bakgrunnsfarge for bloggdesignet, #e5decb, en lys beige. Fyller laget background med denne.


Jeg går inn i lag-mappen Header, og velger det laget med den hvite rektangelen. Deretter limer jeg inn hva jeg vil ha bilde av i headeren. Jeg fant et på flickr.


Endre størrelsen på bildet (CTRL + T) til slik du vil ha det i headeren.


Deretter lager jeg en clipping mask av dette laget.


Så lager jeg et nytt lag i størrelsen 1024x1024 px


Fyll laget background med en farge, jeg velger rosa, #f89dc8.
 

Deretter velger jeg en stor brush, 300 px.


Med denne store børsten velger jeg mange fine farger og lager klatter over hele bakgrunnen. Ingen nye lag!


Så går jeg på Filter > Blur >Gaussian Blur. Her velger jeg radiusen til å være 100 px, men du må se selv hva som passer. Kanskje du må ha mer, kanskje mindre.


Kopier og lim det inn i orginaldokumentet i headermappen. Over bildet du ville ha til headerbilde.


Endre størrelsen slik at det passer til headeren.


Lag en clipping mask av dette laget.


Nå må du endre layer-stilen. Jeg pleier å bla meg gjennom alle og se hva som passer best. Denne gangen valgte jeg Screen.


Nå kan jeg se bedre hva slags farge som bør være på rammene. Jeg lager et nytt lag over laget med rammen i headermappen, og fyller det med en brun farge, #886859.


Lag clipping mask av laget.


Gjør det samme med rammen til de to andre rektanglene.


Nå begynner vi på sidebaren. Bruk Rounded rectangle took til å lage et rektangel i sidebaren. Jeg pleier bare å følge kanten til sidebaren.


Høyreklikk og make selection.


Deretter høyreklikker jeg igjen, og trykker på Transform selection. Jeg endrer størrelsen til 75%, men det velger du selv etter hvor stort bilde du vil ha.


Lag en ny lag-mappe som heter Profil og lag et nytt lag inni denne. Fyll markeringen med hvitt.


Lag et nytt lag. Med samme markeringen, høyreklikk og stroke. Samme som de andre rammene, men denne gangen velger jeg brunfargen dirkete isteden for svart.


Det ser slik ut til nå.


Finn et bilde av deg selv, jeg fant et random på weheartit, og lim det inn over det hvite rektangelet i sidebaren.


Endre størrelsen på bildet slik at det passer i rektangelet.


Ta "fargebildet" som du brukte over headeren og lim det inn igjen, over bildet av deg selv. Du kan evt. bare bruke en farge, da hopper du over det neste steget.


Endre størrelsen slik at det passer til profilbildet.


Lag en clipping mask av dette laget.


Endre layer-stilen til dette laget. Jeg velger screen igjen. Bare ta det som ser best ut.


Gå inn på profilbildet og finn en fin farge med eyedropper tool. Jeg fant en fin orange, #fbb370.


Zoom inn nok til at du har en grei oversikt, men også nok plass. Velg ramme-laget i profilmappen.


Finn en fin tekst og skriv bloggnavnet eller navnet ditt i den orange fargen du fant istad. Jeg brukte Antipasto i størrelsen 30pt. Den finner du her.


Lag så et nytt lag og lag en ny tekst. Denne gangen skriver jeg bloggadressen. Jeg bruker Arial i størrelsen 12, uten noen "mykning" på teksten. Jeg har også ekstra lange mellomrom mellom teksten, 500. Fargen jeg har brukt er bagrunnsfargen på bloggen, #e5decb.


Marker begge tekstlagene, og lag en selection som er like bred som sidebaren.


Sentrer tekstlagene ved å gå inn på Move tool, og vel den som er markert på bildet.


Sånn ser designet ut til nå, og jeg sier meg ferdig med denne delen.


Nå skrur jeg på hjelperutene igjen, og markerer det som skal være med i headeren. Pass på at du får med deg den øverste delen av rektangelet "main". Bildet og teksten skal også være med. Kopier alle lagene.


Lag et nytt dokument, størrelsen skal automatisk komme opp, og lim inn.


Lagre bildet, der du kan finne det igjen, som header. Husk å lagre det som png.


Nå markerer du det som skal være bagrunnen på wrapperen din, og kopierer alle lag. Husk å ikke marker for lang oppe, der det er kurvete.


Lag et nytt dokument og klipp det inn. Lagre som wrapperbakgrunn, husk png!


Velg det som skal være footeren din og kopier alle lag.


Lim inn i nytt dokument og lagre som footer.png.


Nå markerer du litt av bakgrunnen og kopierer alle lag. Lim inn i et nytt dokument og lagre som bakgrunn.png.


Nå er det ikke mye igjen. Last opp bildene dine på nettet et sted. Deretter limer du nettadressen til bildene inn i stilsettet, bakgrunnsbildet til hvert enkelt. Det kan også hende at du må endre på bredden og høyden til "div'ene". Dette er det så mange som skriver om hvordan man gjør, så dette gidder jeg ikke gå gjennom.

PS: Hvis du vil ha bakgrunnsbilde isteden for bakgrunnsfarge, skjuler du bare bakgrunnen når du kopierer og lager nye dokumenter. Det går ikke med gjennomsiktig bakgrunn på blogg.no, så da er du nødt til å laste opp bildene på et annet sted.

Håper dette var en hjelpsom tutorial. Vet at ikke alt er veldig godt forklart, men om du ikke har jobbet med Photoshop før, så er det ikke meningen at du skal begynne rett på denne...

Kommentarer

Sunniva Elise

04.jun.2010 kl.16:59

Du er jo superdyktig! Men alt for komplisert for meg desverre, selv om det var en god tutorial :)
Camilla Fredrikke

04.jun.2010 kl.17:35

Fin tutorial det. Ikke så ulikt slik jeg lager design faktisk:) Eller altså, designene er veldig ulik, men framgangsmåten er lik.
katinka

04.jun.2010 kl.20:06

Du er utrolig dyktig! :)
Frida

04.jun.2010 kl.20:16

Hadde vært kjempefint om du forklarte hvordan man setter det inn også :D Du er veldig flink! :D
Aurora

04.jun.2010 kl.20:33

åj, det var jo et kjempebra tutorial! :D genialt! det ble KJEMPEFINT!
Nesrin

23.jun.2010 kl.20:10

Kult, kan du skrive inn alt det som står på stilsettet ditt, elller bare lime inn da?

Hadde vært en engel!
Torunn Galina

15.aug.2010 kl.20:52

Hei! Ok, må bare få takke deg noe grusomt for at du har lagt ut en så fin toturial som dette! Nei, den var ekstremt vanskelig for meg å skjønne, siden jeg er totalt nybegynner med PS. Men du forklarer så pass godt at til og med jeg skjønte :) Håper det er greit at jeg bruker det grunnleggende i dette designet. :-)
Nora

15.aug.2010 kl.21:04

Torunn Galina: Det er derfor den er der ;)
Mediekarina

10.nov.2010 kl.08:12

Jeg får det ikke til. Men det er sikkert bra :D hehe. Jeg får ikke fylt rektangelen min med farge... Og det går ikke ann å høyreklikke å velge stroke.
Nora

11.nov.2010 kl.14:03

Mediekarina: Du må ha valg "pen-tool" før du kan fylle og stroke ;)
Skriv en ny kommentar
hits