Miklas Njor - Page 2
Lifebelt_053_600

Sådan tegner du en redningskrans i Photoshop

Som med alting i photoshop, så er der mange måder at opnå samme resultat.

En af de “nyerer” ting med Photoshop er, at man kan arbejde non-destruktivt.

Det betyder, at du ikke skal starte forfra hver gang du vil lave en ændring eller at du behøver et utal af kopier til at ligge og fylde på harddisken, men kan arbejde med layers, som hurtigt kan ændres, slå til og fra og flyttes rundt. Så du behøver kun at have en kopi gemt som .psd eller .tif, med alle oplysninger.

I denne tutorial vil vi også kigge på, layer styles, vector masks, “rund” tekst, custom contour og meget mere.

Det skal lige nævnes at dette er en lavet til photoshop til mac og den engelske udgave. Jeg tror ikke der er de store forskelle på mac og windows, men nu er du advaret og skal måske lige eksperimenter dig frem.

Arbejdstid. ca. ti minutter.

Åben et nyt dokument (CMD+N).

Gerne så stort som muligt – sørg for at det er kvadratisk og at baggrunden er transparent. Jeg har valgt et dokument, der er 1200×1200 pixel.

Det næste du gør er at gemme dokumentet som .psd fil.


Tryk CMD+R for at vise linealerne i siden, hvis de ikke allerede er der.

Nu klikker du i højre side på linialerne, holder musen inde og trækker den blå streg der på magisk vis dukker op – ind mod midten. I mit tilfælde til halvdelen af 1200, nemlig 600 pixel.

Nu gentager du det samme, men starter for oven. Træk ned til du når 600 pixel vandret.

Og så gør du det samme, så du har streget ved 100 og 1100 og ved 400 og 800 både fra oven og fra venstre.

DEN HVIDE CIRKEL

TIP! Du kan bladre imellem dine værktøjer ved at holde shift nede samtidig.

Vælg Circular Marque tool eller tryk ‘m’

Når du har valgt Circular Marque Tool, så klikke du i midten imens du holder SHIFT+ALT nede samtidig og træk ud mod kanten indtil du når de yderste blå streger.


Vælg Paint Bucket og forgrundsfarven hvid. Klik inde i cirklen.

Vælg marque tool igen og klik uden for cirklen for at afmarkere.

DE ORANGE FELTER

TIP! Du kan skjule dine guide linier og stiplet linier ved at trykke CMD+H

Nu er det tid til en af circular marque tools søskende, nemlig Rektangular Marque tool.

Vælg med musen eller tryk ‘m’ (Og husk du kan bladre ved at holde SHIFT nede og trykke m). Tegn fra midten og ud over kanten af cirklen.

Det var en firkant. Nu skal du dragge igen, men denne gang holder du shift nede og et lille plustegn dukker op ved sigtekornet. Så hold shift nede og træk fra midten af cirklen og ud indtil du er ud over kanten.


Klik på farverne og vælg forgrundsfarve. I mit tilfælde har jeg valgt orange #FF5500.

Vælg paint bucket og klik en gang inden i dine nye markeringer.

Vælg marque tool og klik uden for din markering.

HULLET I MIDTEN


Vælg vektor mask og en hvid kasse dukker op ved siden billedet i din layers palette.


Vælg circular marque tool og træk inde fra midten og ud til ca. en trediedel.

Sørg for at dine farvevalg er hvid og sort (eller tryk CMD+D), med sort som baggrund.

Tryk CMD+BACKSPACE (delete knappen med venstre pegende pil over Return)


Og voila. Nu er der hul igennem. Du har ikke fjernet noget, men derimod maskeret med sort det vi ikke vil se. Bemærk den sorte cirkel på din layer mask.

TID TIL VOLUMEN

Og her taler jeg ikke om at skrue op for musikken, men at vores ret flade og kedelige cirkel, skal have skygger, så den ser rund og fyldig ud. Der er dermed blevet tid til layer styles

Drop Shadow – Her giver vi cirklen lidt skygge, så det så ud som om den svæver.

Inner Shadow – Nu begynder der at ske noget. Bemærk hvordan der er skygger på indersiden, men at de ikke går helt ud til siden. Det er lavet med en hjemmebrygget custom contour.

Inner Glow – Lidt ekstra kanthighlight.

Bevel & Emboss – Fjerne lidt af den skarpe kant.

Pattern Overlay – Lidt ekstra struktur i form af noget støj.

TID TIL TEKST


Vi skal have teksten inde i selv ringen, så vi tager elipse tool eller trykker “u”.


Træk en cirkel fra midten og ud til lige en tand efter hjørnerne af de fire indre firkanter.


Hvis du synes at cirklen skal gøres større eller mindre, så kan du trykke CMD+T og trække ud af (ved at hive i hjørnerne) imens du holder SHIFT+ALT nede samtidig.


Vælg tekst tool eller tryk “t” og placer markøren øverst (klokken 12.01) på kanten af cirklen vi lige har lavet.


Markøren skal ændre sig fra at have en kasse omkring sig til at en “tilde” går igennem den.

Nu kan vi skrive. wordpress photoshop photography webdesign.

Vi retter bogstaver lidt til så det er symetrisk.

Du får sikkert et andet resultat, da det kommer an på hvilket skriftsnit du har valgt, afstand imellem bogstaver og den slags.

Og så kan vi fjerne cirklen i midten ved at klikke i øjet ud for layeret – og ikke dit eget øje :)

Jeg synes ordet photography fylder lidt for meget, så jeg gør afstanden imellem bogstaverne lidt mindre. Og så kunne jeg også godt tænke mig at der var større afstand fra midten.

Her retter jeg teksten.


Men det er stadig lidt mast, så nu vil jeg rette afstanden fra midten ved at markere tekst-layeret

derefter trykke CMD+T, holder SHIFT+ALT inde og hive i et af hjørnerne. Teksten skal derefter rettes lidt til.


Så er vi stort set færdige. Hvis du vil give bogstaverne lidt dybde, så kan du markere layeret med tekst (ikke selve teksten) og klikke på fx.

Så – lad os se den uden guidelinierne CMD+H

Flot.

Og se hvor få elementer der skal til

SÅDAN LAVER DU RETTELSER

Cirklen i midten er måske lige vel lille. Jeg ville i hvert fald ikke kunne bruge redningsbæltet, så hvordan laver man den større. Easy-peasy. Vi kan flytte på vores maske.


Sæt baggrundsfarven til sort.

Klik på den hvide firkant ved siden af baderingen, så den har klammer i hjørnerne. Det betyder at den er markeret.

Tryk CMD+T holder SHIFT+ALT inde og hive i et af hjørnerne.

Vupti. Redningsbæltet hul i midten er blevet større.

OG MINDRE

Men hvordan hvis vi vil gøre hullet mindre?

Sæt baggrundsfarven til hvid.

Klik på layer masken, så den er markeret som foroven.

Hold CMD nede samtidig (en lille firkant dukker op ud for hånden) og klik på layermasken igen.

Nu har du valgt alt det hvide i din layermask. Tryk CMD+T for at lave det markerede større eller mindre. Hold SHIFT+ALT i bund og træk ind mod midten.


Som du nok har bemærket med layer masken, så alt det der er sort, det “forsvinder”. Så du kan tegne eller lave vilde figurer med sort på din layer mask og det kan ses med samme.

Det er nemlig fordelen ved at arbejde non-destruktivt i Photoshop og ved at du gemme som .pds eller .tif, så kan du altid vende tilbage og lave ændring.

Her er to andre eksempler:

lifebelt

Hva’ sker der? – Hjælp til WordPress, Photoshop og fotografi – # 1

Hva’ #@&€^ sker der?

WordPress, Photoshop, Webdesign, Photography Lifebelt
Knirker din WordPress og begynder man at kunne se sømmene i designet?
Driller Photoshop eller har du mistet dit foto-mojo?

Tag en dyb indånding. Onkel Miklas – kongen af WordPress, web og fotografi – hjælper dig!

Jack of all trades
Som freelancer er man nødt til at hacke et utal af ting selv. Man kan ikke bare lige ringe til X-afdelingen og få hjælp. Det gør, at man over årene akkumulerer en ufattelig stor portion viden og den viden vil jeg gerne dele ud af.

Jeg får dagligt spørgsmål om fotografi og webdesign. I stedet for at de svar kun bliver delt blandt nogle få, så tænkte jeg, at jeg vil åbne sluserne og lade jer stille spørgsmål, som jeg så svarer på her på bloggen ugen efter. Dette er første gang, så vi må lige se hvad der sker.
Hvis det drejer sig om fotografi, så må du finde dig i, at jeg bruger billederne her på sitet for at illustrere løsningen.

Go on, hit me with your best shot
Hent din lange liste over ting ved WordPress, der får dig i det røde felt. Eller er du gået død i Photoshops mange muligheder? Måske du mangler et spark i skridtet til at komme videre med dit fotografi.

Den eneste jeg beder om som tak, hvis jeg svarer på dit spørgsmål, er lidt linklove i form af et link fra dit site til mig eller måske endda en blogpost om hvor sej jeg er og hvordan jeg reddede din røv.

Beskriv problemet grundigt
Hvad er det du vil opnå?
Hvad er det du ikke forstår?
Hvad har du prøvet?
Hvad er det der ikke fungerer?
Link til website eller billeder.
Gyldig email adresse, så jeg kan kontakte dig.
Navn på plugin/theme?
Version af WordPress/Photoshop du bruger

Brug kommentarfeltet nederst til at spørge om alt ang:
WordPress
Webdesign
Photoshop
Fotografi
(Ikke kameramærke specifikke ting)

Så følger jeg op på det med blogposts om dit problem ugen efter.

Det var så lidt.

njor_facebook_css_04

Sådan Pimper du din Facebook Fanbox og Pagestream


Her er en tutorial der handler om hvordan du bruger CSS til at style din Facebook fanbox (facepile/likebox) og pagestream.

Under det store billede nederst kan du se en detaljeret beskrivelse, af hvordan jeg har rullet min egen css blanding og integrerer facebook med mit eget site, uden at give køb på den overordnet grafiske identitet. Det er testet i Safari og Firefox.

Facebooks sociale plugins kommer sit eget css. Det giver et ensartet look på tværs af alle Facebooks widgets og fortæller brugerne, at de interagerer med Facebook.

Husk det når du styler din Fanbox kasse. Det er vigtig, at dine brugere føler at de er i et “sikkert miljø”.

Jeg vil dække både hvordan du installerer dit eget css der udligner den originale facebook-style og hvordan du styler elementerne inden i kassen.

Sådan ændrer du Facebooks custom css

Hvis du bruger wordpress pluginet Simple Facebook Connect smider du bare dit css i kassen “Fanbox Custom CSS på SFC’s admin side.

Hvis du derimod har hentet din Fanbox direkte fra Facebooks site, får du her en forklaring på, hvordan du ændrer koden.

I teorien kan du bare linke til din standard css fil, men Facebook bruger sine egne css style-navne, så et bedre valg være, at lave din egen fil og gemme den på dit site. Måske i din themefolder, så det er lettere at vedligeholde.

XFBML

Hvis du bruge en XFBML version så kan du indsætte et direkte link (http://ditsite.dk/facestylesheet.css) til hvor din css fil er et sted inden

"></fb:like-box>

Her er et eksempel:
css="http://ditsite.dk/facestylesheet.css?1"></fb:like-box>

Hvis du bruger wordpress og opbevarer css filen i din themefolder, så kan du skrive:

css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1"

bemærk ?1. Det hentyder til den cached version af dit stylesheet. Det er vigtigt, at du husker at ændre nummeret i din XFBML kode, hver gang du laver ændringer (og ikke inkluderer ?1 i dit css filnavn, mmmmkay) så Facebook ved, hvilken version af dit css du hentyder til.

iframe

Iframe løsningen ser lidt mere kompliceret ud, men det er nu let nok. Ved slutningen på den her linie

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 DIN KODE HER "

skal du skrive linket til din css fil lige inden den afsluttende .

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1"

Husk at ændre ASCII bogstaverne:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…css=1 => …css%3D1

Bemærk at iframe løsningen bruger ikke ?1 men =1, så husk at ændre = til %3D (%3D1)

Slutresultatet vil se nogenlunde sådan her ud:

iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&amp;width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Nu har vi fået installationen af vejen. Så er tiden kommet til være kreativ med Fanboxen og pimpe den.

Detaljeret Beskrivelse

Under billedet finder du en detaljeret beskrivelse af hvordan jeg har stylet min Fabox.
how to css style facebook facebox facepile and pagestream

1 – Hele kassen


NOTE: Dette er hele kassen. Jeg har valgt at give den en orange kant.
Og for at være på den sikre side har jeg valgt at inkludere a:link, så jeg ved at alle links ser ud som jeg ønsker. Vi kan ændre de efterfølgende links, idet de “læses” senere og derfor har højere prioritet.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}

2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook logo

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE: Jeg kunne ikke lide den blå kant rundt om facebooklogo-billedet, så jeg downloadede billedet og ændrede det. Jeg hentede billedet her via dette link.

3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top avatar billede

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Page navn (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C – Connect top – Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Ligesom foroven, så har jeg hentet billedet og ændret det. Det kan hentes her

4 – Pagestream – alle historier

.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – enkelt historie

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B – Bruger link – Miklas Njor Fotografi

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: Jeg bruger css pseudo styles :before og :after til at at indsætte situationstegn før og efter teksten. Du kan se hvilke bostaver/tegn du kan bruge på denne fortegnelse for HTML entities. Du kan også bruge billedet. Pseudo classes kan ikke ses i IE6 og IE7.

4D – Post Billeder

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post Overskrift – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F – Websitelink – miklasnjor.com

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Brødtekst – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }

5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile tekst – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

Det var det! – stop editing :)

Der er rigtig mange elementer du kan ændre, men jeg har valgt at fokusere på de vigtigste. Hvis du vil finde flere detaljer du kan style, så vil jeg anbefale at du installerer Firebug til Firefox.

Information Layers. Posters upon posters.

Din hjemmeside er ikke en plakat

Information Layers. Posters upon posters.

Information Layers. Posters upon posters.

Jeg synes det her er et meget godt billede på mange virksomheders indhold på nettet. Lag på lag på lag, som ikke er forbundet dybere ned (eller op) i informations hierarkiet. Der er en masse statisk information og gentagelser, uden at man kan bore sig længere ned i, eller forstå, konteksten eller hvilken relation informationerne har til andre dele af hjemmesiden.

En plakat har tydelige “constraints” og det er inden for disse, at en grafiker må arbejde. Det har en hjemmeside slet ikke i så høj grad, og jeg synes flere organisationer burde fokusere på at lade brugeren selv styre hvordan de vil indtage information.

bolig_have_indretning_dorthe_kvist

Boligstylist og havdesigner Dorthe Kvist med forårsfrisk website

bolig have indretning rådgivning design website

En nye hjemmeside er hermed søsat. Denne gang er det boligstylist og havedesigner Dorthe Kvist, der via meltdesignstudio/blog kan holde dig opdateret om bl.a. livstil, haveindretning, shopping, boligtips, planter og meget mere. Følg med på hendes blog, hvor hun giver gode råd om alt fra have til kvist.

facebook fan box different color
Med blandt andet:

  • · Specieltsyet design ud fra kundens ønsker
  • · Søgemaskineoptimering
  • · Integration med facebook fanpage og twitter
  • · Ændring af Facebook’s udseende på sitet
  • · Optimering af sitets hastighed
  • · Nyhedsbrev