design/tutorials

TUTORIAL: 3D-effekt

Det var flere som lurte p hvordan jeg lagde den effekten p bildene jeg postet her om dagen. Selvflgelig kan jeg lage en tutorial snn at dere ogs kan prve!

Praktisk vite p forhnd:
Jeg bruker Mac, s det kan hende oppsettet er litt annerledes om du bruker Windows.
Jeg bruker stort sett bare snarveier. Om du ikke fr til snarveier, kan du bare ske etter det du skal gjre (ved tyrkke p Help), s viser Photoshop deg hvor du skal trykke.
Om du bruker snarveier i Windows, trykk Ctrl der jeg bruker Cmd.


1. pne bilde i photoshop. Om du ikke har Photoshop, gr jeg sterkt ut ifra at det gr an gjre akkurat det samme i Gimp eller andre lignende program.

De to neste stefene er valgfrie, men jeg synes det endelige resultatet blir finest om man gjr noen endringer p bildet frst.


2.Endre bildets lysstyrke ved trykke p Image > Adjustments > Brightness/Contrast. Jeg har valgt sette lysstyrken ganske mye opp, men hvor mye du velger sette den opp bestemmer du selv, alt etter hvilket resultat du vil ha.


3. Sett opp Offset ved g inn p Image > Adjustments > Exposure. Sett den opp slik at blidet blir litt hvitt.


4. Lag et lag av bakgrunnen ved dobbelklikke p Background i Layers-panelet. Trykk OKi den boksen som pner seg, og etter dettrykker du Cmd + J for kopiere laget (eventuelt hyreklikk >Duplicate Layer).


5. Etter dette dobbelklikker du p laget du har kopiert for f opp Layer Style. Under Advanced Blending ser du at det er huket av bde p R, G og B. Hvis du vil at bildet skal vre rdt og turkis, slik mine er, velger du KUN huke av R, vil du ha det rosa og grnt huker du av kunG, og om du vil ha det bltt og gult, huker du av B.

6. G i det frste laget og gjr det sort-hvitt (Cmd + alt + shift + B, eller under Image > Adjustments > Black & White. Da fr du opp et vindu med masse greier i, men du trenger bare trykke OK). Det samme gjr du i det kopierte laget.
Etterp m du passe p vre i det verste laget, og trykk et par ganger til hyre/venstre. Du vil da se at det dannes en slags farget skygge, eller hva jeg skal kalle det.For f bildet enda mer utydelig, flytter du litt p det verste laget fr du gjr lagene sort-hvite ogs. Det har jeg gjort i bildene fra dette innlegget.


7. N har du det ferdige resultatet. Hyreklikk p et av lagene og trykk Flatten Image. Dette er strengt tatt ikke ndvendig om du velger lagre bildet i JPG-format. Da slr den lagene sammen automatisk.

Om noe er uklart eller om du har sprsml er det bare sprre!:)

HVA SYNES DU OM TUTORIALEN?

Ny header

Fant ut at jeg ville ha en ny header, s jeg redigerte sammen noe. Vet ikke om jeg er HELT fornyd, men det funker, ihvertfall midlertidig.

EDIT: Lagde en til. Er egentlig mest fornyd med den. Hva synes dere?

GAMMEL:


NY:

ELLER DENNE? Da m jeg jo selvflgelig endre det lille bildet.



HVA SYNES DU?

EDIT 2: Tror jeg har det snn som det er n, jeg. Har endret litt p fargene ogs. Synes det ble mer sommerlig. Kommer sikkert til endre det igjen om ikke s lenge uansett! HVA SYNES DERE OM DET?

NYTT DESIGN


N har jeg ftt et litt mer vinteraktig design med ny header, annen "farge" p kommentarene, nytt bilde osv! Menyen har ogs ftt en litt mer adventlig farge. Jeg ble ganske fornyd, selv om det er ganske grtt, men siden det er spass lyst, ble det ikke grtt og trist, heller lyst og viteraktig :-)

Hva synes du? Noe du ikke likte?

DESIGNHJELP - FJERN RAMMEN RUNDT PROFILBILDET

1. G inn der du redigerer designet, og trykk p Maler.Design>Rediger>Maler.

Tips: Sk ved bruke Ctrl + f, s slipper du sitte lese gjennom alt for finne noe i en tekst.

2. Sk etter denne linjen:<div id="profile" class="clearfix">,og lim inn <img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">under <a href="${ProfileUrl}" title="${ProfileName}">

Slik skal det se ut:

<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
</a>
</div>

3. Lim inn url-adressen til bildet ditt der det str URL-ADRESSEN TIL BILDET DITT, og endre strrelsen p bildet der det str 200. F.eks. 150 om du vil ha det mindre, og 250 om du vil ha det strre. Du m bare prve deg frem!


Skjnnte du hvordan det skal gjres?♥

DESIGNHJELP - BILDER P HYRESIDEN

Noen spurte om jeg kunne vise hvordan jeg laster opp bilder i tinypic, og hvordan jeg fr de p hyresiden av bloggen. Selvflgelig kan jeg det!

FRST VISER JEG HVORDAN DU LASTER OPP BILDER I TINYPIC.

1. Finn bildene du skal bruke. De bildene jeg bruker, tar jeg frawe heart it. Man kan selvflgelig bruke hvilke som helst bilder, men jeg elsker bildene frawe heart it, og de er i passe strrelse.


Velg ut et bilde, og lagre det. Jeg lagrer de i thumbnail-strrelsen, for da passer de perfekt.

2. Last bildene opp itinypic. Du trenger ikke ha bruker for gjre dette!!
Nr du har lastet opp bildet, kommer det opp at du m skrive inn to ord. Dette er for sikkerheten eller noe. Skriv inn de to ordene, og g videre.
3. Slik vil det se ut nr du har lastet opp bildet. Velg den verste linken, "HTML for websites".
Om du skal bruke bildene til noe annet, eller bare skal ha bilde-url'en, velger du bare en annen link.

SLIK LEGGER DU BILDENE P HYRESIDEN AV BLOGGEN.

4. G inn der du redigerer desginet, og velg "Widgets". Alts, Design>Rediger>Widgets.

5. Lim inn HTML-koden til bildet fratinypic.


Ikke bekymre deg over at det ikke str noe i boksen nr du trykker p widgets. Jeg har en del bilder osv der, derfor er det masse skrift i boksen.

Tips: Hvis du skal ha flere bilder, bruk <br> mellom hvert bilde/tekst. Da fr du mellomrom, og unngr at det kommer ved siden av hverandre, istedet for komme nedenfor hverandre.


6. Forhndsvis for se at alt er slik som du vil ha det. Bildene vil legge seg p p sidebaren nr du lagrer, selv om den ikke gjr det p forhndsvisningen.

7. Lagre, og g inn p bloggen din for se det ferdige resultatet.



Var det noe du ikke forsto, eller ikke fikk til, er det bare sprre, s skal jeg prve utdype det mer. Skal jeg fortsette med designhjelp?♥
hits