Tutorials

Tutorial - Design som vrdesignet 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 gr 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 nr man velger farge. Man bare bruker # forran. Eks: 000000 er #000000 i HTML-farge.
- Det kan vre 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 strrelsen p et lag: CTRL + T

Jeg begynner med lage et nytt dokument i strrelsen 1024px x 768px, og lager et nytt lag. Jeg slr ogs p hjelperutene (grids).

Jeg bruker Rounded Rectangle Tool med radius p 25px. Jeg lager et rektangel der headeren skal vre.

Hyreklikk, og velg Make selection. Feather radiusen er 0 px.

Jeg fyller det markerte omrdet med en tilfeldig bakgrunnsfarge, hvit. S lager jeg et nytt lag, og med samme markeringen hyreklikker jeg og velker Stroke. Fyller med svart, og rammen er 1 px p innsiden. Hvis man vil ha tjukkere ramme, velger man et strre 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 gjr jeg alltid i main, men om du fler for ha en annen farge, s gjr 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 gr 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 strrelsen 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 strrelsen 1024x1024 px


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


Deretter velger jeg en stor brush, 300 px.


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


S gr jeg p Filter > Blur >Gaussian Blur. Her velger jeg radiusen til vre 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 strrelsen 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 br vre 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.


Gjr 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 flge kanten til sidebaren.


Hyreklikk og make selection.


Deretter hyreklikker jeg igjen, og trykker p Transform selection. Jeg endrer strrelsen 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, hyreklikk 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 strrelsen 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 strrelsen 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 strrelsen 30pt. Den finner du her.


Lag s et nytt lag og lag en ny tekst. Denne gangen skriver jeg bloggadressen. Jeg bruker Arial i strrelsen 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.


Snn ser designet ut til n, og jeg sier meg ferdig med denne delen.


N skrur jeg p hjelperutene igjen, og markerer det som skal vre med i headeren. Pass p at du fr med deg den verste delen av rektangelet "main". Bildet og teksten skal ogs vre med. Kopier alle lagene.


Lag et nytt dokument, strrelsen 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 vre 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 vre 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 hyden til "div'ene". Dette er det s mange som skriver om hvordan man gjr, s dette gidder jeg ikke g gjennom.

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

Hper dette var en hjelpsom tutorial. Vet at ikke alt er veldig godt forklart, men om du ikke har jobbet med Photoshop fr, 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 selvflgelig 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 vre greit begynne med.

ferdig
Det ferdige resultatet


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

Frst 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 strrelsen p dokumentet ved dra p firkanten nede i det hyre hjrnet. Jeg lar strrelsen bli 1200x600 px. Man kan se hvilken strrelse det er nede i hyre hjrne.

paint2

Etter det pner jeg Paint p nytt. Her er ikke strrelsen 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 strrelsen p headeren, ved dra nede i dokumentets hyre hjrne. Jeg har valgt strrelsen 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 omrdet som selve blogginnleggene str. Jeg endrer strrelsen p dokumentet til 950x600. Bredden (det tallet som str frst) m vre lik som headeren.




paint5
Deretter finner jeg frem paletten jeg har valgt meg. Om man gr litt ned p nettsiden finner man fargene separert.
Under hver farge str det HEX: "noen tall" og RGB: "noen tall". HEX er den fargekoden vi skal bruke senere, nr 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 btten til fylle omrdet med denne fargen.





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






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





paint9
S henter jeg en farge fra paletten igjen, p samme mte som forrige gang. Denne gangen velger jeg en mrkere farge, for det skal vre 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 gr jeg inn p Picnik.com. Her m man selv se hva man vil gjre med hederen, men det kan vre 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 omrdet, og da mener jeg rett opp.





paint13
Deretter finner jeg frem et nytt bilde. Dette br vre 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 strrelsen p bildet til 150x190 px.





paint15

S endrer jeg strrelsen 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 gjr man med trykke der pila viser.



paint19


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




paint20

S markerer jeg omrdet 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 gjre 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.

Selvflgelig 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