En webside er ikke meget værd uden billeder. Men hvis billederne på din webside eller din webshop ikke har de samme dimmensioner kan det hurtigt komme til at se “rodet” ud. Derfor anbefaler vi altid at du bruger den samme størrelse billeder når du skal designe landingpages, lægge produkter ind i din webshop eller lave blogindlæg.
Men hvordan gør man så det – Altså rent praktisk??

Jeg bruger altid Photoshop!! Ingen undtagelse – det er bare det nemmeste.

Så har jeg en fast format jeg  opretter billederne i. Og det kan godt svinge alt efter formå. Mine billeder til blogindlæg er typisk i “landskabsformat” mens produktbillederne til en webshop ofte er et andet format. Er der tale om billeder til en “landingpage” er det ofte et helt 3. format.

Til denne tutorial har jeg “lånt” logobilleder fra Det skønne Hjørne i Mariager.

 

1: Åbn PhotoShop

Start med at åbne Photoshop og oprette et nyt dokument. Til denne tutorial har jeg valgt at lave kvadratiske billeder der måler 500×500 px. Vær OBS på at når vi taler om webdesign, så arbejder vi ALTID med pixels frem for cm eller mm.

Når du har åbnet photoshop opretter du et nyt dokument.

Screen-Shot-2017-04-25-at-15.55.00

Sørg for at du har valgt pixels som “målenhed” og ikke centimeter eller mm.

Screen-Shot-2017-04-25-at-15.55.11I dette tilfælde er dokumentet jeg opretter – 500×500 px

 

2: Indsæt dit billede i dokumentet

Når du har oprettet dit nye dokument, skal du have dit billede kopieret ind i dokumentet. Dette gør du ved at åbne det billede du ønsker at bruge.
FYI – Jeg ved godt at samme effekt kan opnåes ved at beskære et billede – men ofte er det rart at have et billede i flere forskellige dimensioner, så derfor gør vi det på denne måde – således at man ikke uden at ville det kommmer til at ændre på “original-filen”. 

 

 

Screen-Shot-2017-04-25-at-15.57.17

Find det billede du ønsker at tilrette i størrelsen og åbn det.

Når du har åbnet billede”markeringskasse” hen over indholdet. Herefter kopieret du indholdet (ctrl+C) / (cmd+C)

Screen-Shot-2017-04-25-at-15.57.27

 

3: Juster og placér dit billede i det nye dokument

Når du har kopieret indholdet fra dit åbnede billede, hopper du tilbage til det dokument du oprettede tidligere. Nu sætter du det kopierede indhold ind i dit dokument. (Ctrl+V) / (cmd+V)

 

Som du kan se er indholdet her for stort til det vores “papir” og det skal derfor skaleres. Dette gøres ved at trække i kassen. Hvis ikke “justeringsboksen” selv fremkommer når du sætter billedet ind kan du finde den ved at bruge genvejstasterne (ctrl+T) / (cmd+T).

 

Screen-Shot-2017-04-25-at-15.58.00

 

Når logoet eller billedet har den størrelse du ønsker, placerer du det på siden.

 

Screen-Shot-2017-04-25-at-15.58.08

 

Bemærk at Photoshop automatisk kommer frem med “guidelines” når du rammer midten af dit “papir”

 

Screen-Shot-2017-04-25-at-15.58.16

– Afslut med “Enter”.

 

4: Eksportér billedet

 

Når billedet er som du gerne vil have det til at se ud eksporterer du billedet til web.
Det er vigtigt at du IKKE gemmer dine webbilleder i for høj en opløsning, da  dette kan påvirke din websides hastighed.
Dette er også én af grundene til at vi ikke redigerer i originalfilerne, men istedet opretter nye filer i mindre opløsninger.

Jeg vælger oftest PNG-formatet når jeg arbejder med logobilleder og JPEG når jeg arbejder med “rigtige” billeder. Men det er vist lidt en smagssag.

Screen-Shot-2017-04-25-at-15.59.21

Navngiv dit billede og vælg den folder du ønsker at gemme billedet i.
Det kan være en god idé at navngive dit billede så det matcher et evt. søgeord hvis du arbejder med SEO – Men måske har du en anden fil/navne struktur der giver mere mening for dig.

 

WUPTI – Det var det!
Dit billede burde nu være gemt i det ønskede format og du er klar til at smide det ind på din hjemmeside.

 

Hvis du vil vide lidt mere om SEO så kan du læse en simpel gennemgang af SEO-optimering med Yoast lige her