Billedjustering

Her kan du se og læse om billedjustering. Man kan bruge billeder på mange måder. Man kan bruge store flotte, billeder som taler for sig selv og ikke behøver ordrige forklaringer og tekster. Man kan bruge billeder, som understøtter budskaber i teksten eller illustrerer bestemte pointer. Det kan også være godt at skabe variation ved at bruge forskellige størrelser og højre- eller venstrestille dem.

Man kan vælge at venstrestille, højrestille eller centrere billedet. Man kan også vælge ikke at justere billedet. Derudover kan man vælge imellem 4 foruddefinerede størrelser: thumbnail, medium, stor og fuld størrelse.

Peytz & Co drift og hosting

Billedet herover er centreret og i størrelsen medium på 300 x 146.

Man kan flytte tekst og billeder rundt i forhold til hinanden, til man får det ønskede resultat. Ovenstående er nok ikke et ønskværdigt resultat, men det illustrerer mulighederne.

BeakerHandsHer til venstre har vi et lille billede, som vi har venstrestillet. Billedet er størrelsesmæssigt thumbnail i 150 x 150 og kunne måske være et billede af en person, som man ville skrive noget om. Når man skriver en masse tekst ved siden af billedet, kan man se, at teksten vil flyde omkring billedet. Vi har sat det sådan op, at der automatisk er en hvid ramme omkring billedet, så teksten ikke lægger sig alt for tæt på billedet. På den måde kommer det til at se pænt og ordentligt ud, uden at man som redaktør behøver at gøre andet end at sætte billedet ind og skrive sin tekst. Der er også lagt luft ind over og under billedet, så selvom man har en masse tekst og en masse at fortælle, så vil det stadig stå pænt omkring billedet. Som der fremgår lægger teksten sig pænt omkring billedet – uden at man behøver specielle redigeringsevner.

Og herunder har vi valgt et billede i fuld bredde.

hero_large

Billedet herover er faktisk 1200px bredt. Men det er selvfølgelig ikke meningen, at det skal flyde ud over indholdsfeltet, så derfor er det blevet tilpasset størrelsen for fuld bredde. Brede billeder fylder meget og kan f.eks. bruges til at slå et tema an. Det kan også være, at I har en masse flotte billeder, som I gerne vil vise jeres kunder eller brugere, fordi de viser noget vigtigt om jer. Der er ingen begrænsninger på hvor højt billedet kan være. Billeder indsat i indholdsfelter (dvs. de 4 størrelser vist på denne side) beskæres ikke, men de bliver automatisk tilpasset i størrelsen, så de passer til den valgte billedstørrelse. Så hvis billedet er meget stort, vil det blive resized til den rigtige størrelse, og hvis billedet er meget lille, vil det blive forstørret så det passer. Hvis billedet er meget pixeleret, kan det være, fordi det er forstørret for meget. Billeder udover indholdsfeltet (topbilledet og billeder i kasserne på forsiden) bliver automatisk beskåret.

blurred_linesHer har vi højrestillet et billede. Det er måske en lidt uvant placering for nogen, men det kan være en god variationsmulighed, hvis man har mange billeder i samme størrelse og vil undgå, at siden bliver for monoton. Som det fremgår, er der stadig fin luft over billedet, og teksten holder også fin afstand til billedet på samme måde som ved det venstrestillede billede. Margen fra billedet til tekst-feltets ophør er den samme for alle billederne, og teksten flyder omkring det højrestillede billede, på samme måde som det venstre-stillede billede. Billedet her på 300 x 200 er også en rigtig god størrelse – der er plads til at vise noget, uden at billedet dominerer hele tekstfeltet. På samme måde som ved det venstrestillede billede, vil teksten også lægge sig fint omkring billedet, når det er højrestillet. Man opnår en mere organisk fornemmelse på siden, når man lader teksten omslutte billederne i stedet for at dele teksten og billeder op i to separate kolonner.

Her kommer billederne igen. Samme størrelse og samme valgmuligheder i forhold til placering, men nu har vi tilføjet en billedtekst.

Peytz & Co drift og hosting
Peytz & Co drift og hosting

Herover ses det store billede med billedtekst. Og herunder thumbnail billedet med en billedtekst.

BeakerHands
Her er noget billedetekst

 

 

 

 

 

 

Og her er billedet i fuld bredde med billedtekst.

hero_large
Billedetekst billedetekst billedetekst

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

blurred_lines
Noget mere billedetekst

Og her til sidst kommer så billedet i 300 x 200 med billedtekst. For variationens skyld har vi venstrestillet billedet denne gang.