EnOmDagen.net

Sort-hvitt bilder

Morten — Tue, 22 Jun 2010 11:32:59 +0000

I denne tutorialen skal jeg vise hvordan du får fine sort-hvitt bilder i Photoshop.

Du kan bare åpne bildet ditt og trykke image>mode>greyscale.

Men da mener jeg at bildene ikke ser bra ut. Men følger du denne tutorialen så vil du få fine sort-hvit. Huska at alle bilder er forskjellige, så mine innstillinger passer ikke nødvendigvis helt perfekt til ditt bilde. Så juster litt selv så du finner justeringene som passer perfekt til ditt bilde.
1: Åpne det bildet du vil gjøre om til sort/hvit.
2: Trykk ”CTRL+U” for å åpne ”Hue / Saturation” innstillingene og dra saturation til -100.

3: Dubliser det layeret ved å klikke ”CTRL+J”. Og velg det øverste.
4: til Image>Adjustments>Brightness/Contrast og ca. velg 8 på Brightness og 20 på Contrast.

5: Sett ”Blend mode” til overlay ved å øyreklikke på layeret>blending options og velg fra dropdown menyen, Overlay.

6: Gå til ”Image>Adjustmenst>Levels” og trekk de to ytterste innover og den midterste kan du leke litt med til du får ønsket resultat.

Her har du mitt resultat.

Lag pop-art portrett i Photoshop

Morten — Mon, 21 Jun 2010 16:22:43 +0000

I denne tutorialen skal jeg vise hvordan man lager et pop-art portrett med Photoshop CS4.

1: Finn et bilde du vill bruke.

2: Bruk “Pylogonal lasso tool” og merk rundt ansiktet og kroppen du vill ha med på bildet. Når det er gjort høyreklikk der du merket og velg “Layer via cut”. Bakgrunnen kan du fjerne.

3: Dubliser layeret.

4: Skjul det øverste layeret og velg det layeret som er nederst.

5: Klikk på “Image>Adjustments>Threshold” og still inn på ca. 115.

6: Velg det øverste layeret og gå til “Image>Adjustments>Threshold” igjen, denne gang still inn på ca. 135.

7: Sett “Opacity” til ca. 40% på det øverste layeret.

8: Høyreklikk på det øverste layeret og trykk “Merge down”

9: Klikk “Select>Color range”. Klikk en plass på bildet hvor det er svart farge og trykk ok.

10: Nå er alt det svarte på bildet valgt. Velg den fargen du vill ha som forgrunnsfarge og klikk “Edit>Fill” og klikk ok.

11: Klikk “Select>Color range”. Klikk en plass på bildet hvor det er grå farge og trykk ok.

12: Nå er alt det grå på bildet valgt. Velg den fargen du vill ha som forgrunnsfarge og klikk “Edit>Fill” og klikk ok.

13: Klikk “Select>Color range”. Klikk en plass på bildet hvor det er hvit farge og trykk ok.

14: Nå er alt det hvite på bildet valgt. Velg den fargen du vill ha som forgrunnsfarge og klikk “Edit>Fill” og klikk ok.

15: Fyll bakgrunnslayeret i ønsket farge.

Da ender du opp med noe lignende som bildet under.

Du kan også bruke denne tutorialen for å lage en litt mer fancy bakgrunn som på bildet under.

Lag en enkel matrix effekt i Photoshop

Morten — Sun, 20 Jun 2010 13:40:58 +0000

Her skal jeg vise hvordan du enkelt lager en Matrix effekt i Photoshop. Senere skal jeg vise hvordan du animerer effekten.

1: Det første du må gjøre er å åpne et nytt dokument med valgfri størrelse.
2: Så går du til “Filter>Texture>Grain” og bruker følgende innstillinger:
Intensity : 100
Contrast : 75
Grain type: Vertical

3: Deretter går du til “Filter>Artistic>Neon Glow” og bruker følgende innstillinger:
Glow size: 5
Glow Brightness: 20
Glow Color: Velg hvilken farge du vill.

4: Så går du til “Filter>Stylize>Glowing Edges” og bruker disse innstillingene:
Edge width: 1
Edge Brightness: 7
Smoothness: 1

Det var det. Hvis du ikke er fornøyd med fargene du fikk kan du klikke “Ctrl + U” og leke deg litt der.
Her er mitt resultat:

Enkel xHTML side

Morten — Sat, 19 Jun 2010 14:53:59 +0000

Her skal jeg vise hvordan du koder en enkel hjemmeside i valid XHTML med bruk av “DIV” taggen. I del to skal vi style hjemmesiden i CSS. Tutorialen er skrevet med DreamWeaver, men du kan såklart bruke et annet program.

All koden skal skrives mellom og taggene.

1: Nå skal vi lage en container som skal være “rammen” for hjemmesiden.
Det gjør vi ved å skrive:

åpner HTML taggen og

lukker den.
All den andre kodingen skal skrives mellom

—

2: Nå skal vi lage headeren. Den skal inneholde logoen til hjemmesiden.
Vi skal igjen bruke en

tag.

All informasjonen som skal være i header taggen skal stå mellom de inni den

taggen.

—

3:Så skal vi legge inn logoen. Til det bruker jeg

taggen og for å få logoen til og lenke til startsiden på din hjemmeside bruker vi . Vi legger også inn en div som vi kaller clear. Hvorfor vil bli forklart når vi skal style siden i CSS.
`NAVNETpåDINhjemmeside`

—

4: Nå skal vi lage en kolonne på venstre side av skjermen. Også her bruker vi
taggen.
`NAVNETpåDINhjemmeside`

—

5: I den kolonnen skal det være en meny som skal inneholde lenker til undersidene dine. De lenkene lager vi ved å bruke en uordnet liste. For og lage listen skriver du

og for å legge til liste elementer skriver du

mellom
taggene. For å lenke til undersidene dine skal du igjen bruke .
`NAVNETpåDINhjemmeside NAVNpåSIDE 1 NAVNpåSIDE 2 NAVNpåSIDE 3`

—

6: Nå skal vi lage området der innholdet på siden skal være. Her brukes det også en
tagg. På overskriften på innholdet skal vi bruke
taggen. Teksten skal vi bruke en
tagg til.

`NAVNETpåDINhjemmeside NAVNpåSIDE 1 NAVNpåSIDE 2 NAVNpåSIDE 3 Overskriften på innholdet Her skal teksten på din hjemmeside være. Her kan du skrive hva du vil og så langt du vil. Jeg kommer ikke til å skrive så alt for langt, men langt nok så du ser at det er her du skal legge teksten din.`

—

7: Legg inn en <div id=”clear”></div> etter du har avsluttet hovedinnhold div taggen. Næ skal vi legge til en såkaldt “footer”. Det er den informasjonen som er nederst på hjemmesider. Det er gjerne informasjon om kopirettigheter og hvem som har laget hjemmesiden. Vi bruker også her en
tagg. Teksten som skal stå her bruker vi en
tagg til å lage.

`NAVNETpåDINhjemmeside NAVNpåSIDE 1 NAVNpåSIDE 2 NAVNpåSIDE 3 Overskriften på innholdet Her skal teksten på din hjemmeside være. Her kan du skrive hva du vil og så langt du vil. Jeg kommer ikke til å skrive så alt for langt, men langt nok så du ser at det er her du skal legge teksten din. Denne siden er laget av DITT NAVN!`

—

Da var hele siden kodet færdig og den skal være valid XHTML 1.0 Transitional. For og se min HTML kode kan du klikke HER.

I del to av denne serien skal vi style denne hjemmesiden med CSS koder.

NAVNETpåDINhjemmeside

NAVNpåSIDE 1

NAVNpåSIDE 2

NAVNpåSIDE 3

Her skal teksten på din hjemmeside være. Her kan du skrive hva du vil og så langt du vil. Jeg kommer ikke til å skrive så alt for langt, men langt nok så du ser at det er her du skal legge teksten din.

Tekst rotator

Morten — Fri, 18 Jun 2010 00:06:20 +0000

Her skal jeg vise hvordan man lager et tekst-rotasjons script som du kan se i footeren på denne siden, med PHP koding.

Det man gjør for å lage dette scriptet er å opprette en funksjon som inneholder et array som inneholder teksten som skal roteres. Deretter så ”analyserer” vi den arrayen gjennom array_rand() for å avgjøre hvilken av tekstene som skal vises. Det siste er å bruke echo for å vise teksten på siden.

Koden ser slik ut.

Når vi nå har koden så kaller vi den opp ved å skrive

Se demonstrasjon av koden her!

Du kan også se en demonstrasjon av koden i footeren på siden.

Starburst bakgrunn

Morten — Thu, 17 Jun 2010 18:51:31 +0000

Her skal jeg vise hvordan man lager en enkel men tøff bakgrunn til bilder i Photoshop.

1: Åpne nytt dokument. Velg så stort du vill ha. Jeg valgte 500×500px.
2: Velg deg en bakgrunnsfarge. Jeg valgte #095879.

3: Bruk rectangular marqueetool og lag like striper som på bildet over.

4: Fyll de strekene med ønsket farge, så det blir likt som bildet over.. Jeg fylte med #328eb5.
5: Gå til filte>Distort>Polar coordinates.
-Med instillingene “rectangular to polar”.
Da skal du ende opp med et bilde som er slik.

Lag en enkel PHP bilde rotasjon

Morten — Wed, 16 Jun 2010 19:22:22 +0000

Her viser jeg hvordan du lager en enkel bilde / banner rotasjon med PHP koding.

1: Først må du åpne et nytt dokument i Dreamweaver eller det programmet du bruker for å lage hjemmesider.
2: Så må vi definere at det er et PHP script det er snakk om. Det gjør man ved å skrive.

3: Så må vi skrive inn koden for de tingene vi skal vise frem, i dette tilfellet, Bilder. Det gjøres slik.

4: Nå må vi telle hvor mange forskjellige ting som kan vises, og vi må generere et tilfeldig nummer som ikke er høyere enn antall bilder som du la til og ikke er lavere enn 0. Fordi tellingen starter på 0 default.

5: Til slutt må vi sette inn koden som gjør at et bilde vises i internettleseren. Dette gjøres med echo koden. Da vil det tilfeldige tallet bestemme hvilket bilde som vises i internettleseren.

Når koden er færdig vil den se slik ut:

Hvis du vil at bildene skal linke til en hjemmeside, så kan du bytte ut

Med

Klikk for full størrelse

Og da vil koden se slik ut:

Klikk for full størrelse

Klikk her for live demo.

Lag et lyn i Photoshop

Morten — Wed, 16 Jun 2010 18:33:19 +0000

Her er en tutorial som viser hvordan du lager lyn i Adobe Photoshop.

1: Åpne et nytt dokument på rundt 400*400px.
2: Sørg for at HVIT er forgrunnsfarge og SVART er bakgrunnsfarge.
3: Gå til “Filter>Render>Clouds”.
4: Gå til “Filter>Render>Difference clouds”.
5: Gå til “Image>Adjust>Invert”.
6: Gå til “Image>Adjust>Levels” og trekk den midterste pilen helt til høyre.

settings
7: Gå til “Image>Adjust>Color balance” Og still deg frem til den fargen du vil ha.
Mitt resultat etter å ha lekt med flere layers:

mitt lyn