design/tutorials

TUTORIAL: 3D-effekt

Det var flere som lurte på hvordan jeg lagde den effekten på bildene jeg postet her om dagen. Selvfølgelig kan jeg lage en tutorial sånn at dere også kan prøve!

Praktisk å vite på forhånd:
Jeg bruker Mac, så det kan hende oppsettet er litt annerledes om du bruker Windows.
Jeg bruker stort sett bare snarveier. Om du ikke får til snarveier, kan du bare søke etter det du skal gjøre (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, går jeg sterkt ut ifra at det går an å gjøre 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 gjør noen endringer på bildet først. 


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 OK i den boksen som åpner seg, og etter det trykker du Cmd + J for å kopiere laget (eventuelt høyreklikkDuplicate 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 både på R, G og B. Hvis du vil at bildet skal være rødt og turkis, slik mine er, velger du å KUN huke av R, vil du ha det rosa og grønt huker du av kun G, og om du vil ha det blått og gult, huker du av B

6. Gå i det første laget og gjør det sort-hvitt (Cmd + alt + shift + B, eller under Image > Adjustments > Black & White. Da får du opp et vindu med masse greier i, men du trenger bare trykke OK). Det samme gjør du i det kopierte laget.
Etterpå må du passe på å være i det øverste laget, og trykk et par ganger til høyre/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 før du gjør lagene sort-hvite også. Det har jeg gjort i bildene fra dette innlegget. 


7. Nå har du det ferdige resultatet. Høyreklikk på et av lagene og trykk Flatten Image. Dette er strengt tatt ikke nødvendig om du velger å lagre bildet i JPG-format. Da slår den lagene sammen automatisk. 

Om noe er uklart eller om du har spørsmål er det bare å spørre!:)

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 fornøyd, men det funker, ihvertfall midlertidig. 

EDIT: Lagde en til. Er egentlig mest fornøyd med den. Hva synes dere?

GAMMEL:


NY:

ELLER DENNE? Da må jeg jo selvfølgelig endre det lille bildet.



HVA SYNES DU?

EDIT 2: Tror jeg har det sånn 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 fått et litt mer vinteraktig design med ny header, annen "farge" på kommentarene, nytt bilde osv! Menyen har også fått en litt mer adventlig farge. Jeg ble ganske fornøyd, selv om det er ganske grått, men siden det er såpass lyst, ble det ikke grått 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: Søk ved å bruke Ctrl + f, så slipper du å sitte å lese gjennom alt for å finne noe i en tekst.

2. Søk 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 står URL-ADRESSEN TIL BILDET DITT, og endre størrelsen på bildet der det står 200. F.eks. 150 om du vil ha det mindre, og 250 om du vil ha det større. Du må bare prøve deg frem!


Skjønnte du hvordan det skal gjøres?♥

DESIGNHJELP - BILDER PÅ HØYRESIDEN

Noen spurte om jeg kunne vise hvordan jeg laster opp bilder i tinypic, og hvordan jeg får de på høyresiden av bloggen. Selvfølgelig kan jeg det!

FØRST VISER JEG HVORDAN DU LASTER OPP BILDER I TINYPIC.

1. Finn bildene du skal bruke. De bildene jeg bruker, tar jeg fra we heart it. Man kan selvfølgelig bruke hvilke som helst bilder, men jeg elsker bildene fra we heart it, og de er i passe størrelse. 


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

2. Last bildene opp i tinypic. Du trenger ikke å ha bruker for å gjøre dette!!
Når 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 når 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Å HØYRESIDEN AV BLOGGEN.

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

5. Lim inn HTML-koden til bildet fra tinypic


Ikke bekymre deg over at det ikke står noe i boksen når 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 får du mellomrom, og unngår at det kommer ved siden av hverandre, istedet for å komme nedenfor hverandre.


6. Forhåndsvis for å se at alt er slik som du vil ha det. Bildene vil legge seg på på sidebaren når du lagrer, selv om den ikke gjør det på forhåndsvisningen. 

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 å spørre, så skal jeg prøve å utdype det mer. Skal jeg fortsette med designhjelp?♥
hits