Tutorials

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...

Tutorial - Lage bloggdesign i Paint

15:28 // 07.nov.2009 // Tutorials // enkelt design paint blogg // 9 kommentarer

Jeg tenkte jeg skulle vise hvordan man kan lage et bloggdesign i Paint, som de fleste har på pc'en sin. Det kan selvfølgelig lages i andre programmer også, for Paint er det simpleste. Jeg må si at det er lenge siden jeg har jobbet med Paint, og dette er ikke et veldig avansert design, men det kan være greit å begynne med.

ferdig
Det ferdige resultatet


Det man trenger:
  • Paint
  • Internettilkobling
  • Noen bilder man vil bruke
  • Kreativitetpaint1

Først begynner jeg med å finne meg noen fine farger jeg vil bruke. Man kan finne paletter på COLOURlovers.com og jeg valgte dette. Så åpner jeg Paint. Der endrer jeg størrelsen på dokumentet ved å dra på firkanten nede i det høyre hjørnet. Jeg lar størrelsen bli 1200x600 px. Man kan se hvilken størrelse det er nede i høyre hjørne.

paint2

Etter det åpner jeg Paint på nytt. Her er ikke størrelsen så viktig enda, for den endrer vi etter vi har satt inn bilder.




paint3
Etter dette finner man seg ett eller flere bilder som man vil ha med i headeren sin. Det er ikke så viktig om fargene passer, for dette skal vi endre på. Vi må også endre størrelsen på headeren, ved å dra nede i dokumentets høyre hjørne. Jeg har valgt størrelsen 950x300 px. Dette kan man jo velge selv. Deretter lagrer man headeren på datamaskinen, f.eks header.png.


paint4
Deretter åpner jeg Paint nok en gang. Nå skal jeg lage bakgrunnen for det området som selve blogginnleggene står. Jeg endrer størrelsen på dokumentet til 950x600. Bredden (det tallet som står først) må være lik som headeren.




paint5
Deretter finner jeg frem paletten jeg har valgt meg. Om man går litt ned på nettsiden finner man fargene separert.
Under hver farge står det HEX: "noen tall" og RGB: "noen tall". HEX er den fargekoden vi skal bruke senere, når vi skal endre stilsettet. Nå skal vi bruke RGB-koden. I Paint dobbeltklikker jeg på en farge i toppen, og da kommer det en dialogboks opp. Der trykker man på "Definer farger" og skriver inn RGB-koden. Deretter trykker man på "Ok".
paint6

Jeg bruker da bøtten til å fylle området med denne fargen.





paint7
Deretter markerer jeg hele området (Ctrl + A) og kopierer det.






paint8
Jeg limer det inn i mitt opprinnelige dokument, og plasserer det innlimte området omtrent midt i dokumentet.





paint9
Så henter jeg en farge fra paletten igjen, på samme måte som forrige gang. Denne gangen velger jeg en mørkere farge, for det skal være bakgrunnen til hele bloggen.




paint10

Deretter fylle jeg denne fargen inn på hver side i mitt opprinnelige dokument.





paint11
I et vanlig bilderedigeringsprogram kan man endre bildet som det passer direkte, men Paint har ikke slike muligheter. Derfor går jeg inn på Picnik.com. Her må man selv se hva man vil gjøre med hederen, men det kan være en fordel å legge til tekst og slik her, slik at man slipper det senere. Etter man er ferdig blir bildet lagret på dataen. Jeg åpner det i Paint og deretter limer jeg den inn i mitt opprinnelige dokument.

paint12

Der legger jeg headeren rett oppå det lyse området, og da mener jeg rett oppå.





paint13
Deretter finner jeg frem et nytt bilde. Dette bør være et bilde av deg, eller som representerer deg, for det skal brukes til å skrive litt om deg selv. Jeg åpner bildet i Paint.




paint14

Jeg endrer størrelsen på bildet til 150x190 px.





paint15

Så endrer jeg størrelsen på dokumentet til samme som bildet (150x190), merker alt (Ctrl + A) og kopierer det).




paint17

Deretter limer jeg det inn på venstre side i det opprinnelige dokumentet. Vi skal legge til tekst, og det er viktig at du markerer at du ikke skal ha hvit bakgrunn bak teksten. Dette gjør man med å trykke der pila viser.



paint19


Så legger jeg inn den teksten jeg vil ha ved siden av bildet.




paint20

Så markerer jeg området med bilde og teksten, og så kopierer jeg det inn i et nytt Paint dokument.




paint21

Deretter lagrer jeg dette bildet, som f.eks ommeg.png






Så er det bare å laste bildene opp. Headeren har man jo allerede på dataen et sted, med mindre man endret på den senere i Paint. Da er det bare å gjøre samme som med ommeg.png. Ommeg.png må settes inn i sidebaren på forsiden, innlegg, kategori og arkiv. Eventuelt kan man lage en modul, men det skal ikke jeg forklare nå.

Så er det bare å sette inn bredden, riktige bakrunnsfarger, linkfarger og alt annet man vil endre i stilsettet. Husk at her bruker man HEX-kodene.

Selvfølgelig må man ikke gå gjennom alle trinnene her, og man må ikke sette opp hele designet i Paint. Det er bare jeg som liker å ha en plan og en tegning å gå etter, for jeg synes det er lettere da.

Hva synes du om denne guiden? Skal jeg lage flere?
hits