🖼️ ✂️️ Using Preview to edit images

What we’ll do

Make an image 🖼️ the correct size ✂️️ for a website, using:

An Image we want to use online:
Group of Red Badger emloyees in Krakow at night

A Template image (the correct size for a certain page or part of a page):
White rectangle template

Some software (Preview):
Logo for Preview software

How to do it

Double click the template to open it in Preview Logo for Preview software.

Double click your chosen image to open it in Preview Logo for Preview software.
⌘ A (Select all)
⌘ C (Copy)

Click into the template
⌘ V (Paste)

Now your image is inside the template in Preview Logo for Preview software. The image is probably too big 🎪 for the template so we need to shrink it and position it.

Left-click and pull Hand icon to illustrate pulling the image within the template until you can see the blue dot on the top right corner.
Template image being edited

Left-click and drag Diagonal arrow icon to illustrate dragging the blue dot on the corner to the bottom left. This will shrink your image.
Template image being edited

Then left-click on the actual image and pull Hand icon to illustrate pulling it back into the visible part of the template.
Template image being edited

Template image being edited

Repeat Circular arrows repeat icon : Left-click and drag Diagonal arrow icon to illustrate dragging the blue dot on the corner to the bottom left. This will shrink your image. Then left-click on the actual image and pull Hand icon to illustrate pulling it back into the visible part of the template.

Until your image is the desired size.

Now position Hand icon to illustrate pulling your image to your chosen composition.
Final template-size image of Red Badger emloyees in Krakow at night

Save 💾 your file:
File > Export
Preview's File menu with Export highlighted

Export As: [Name your file]
Where: [Choose a destination folder]
Preview's Export dialog box with Export As: and Where: highlighted

Format:
[JPEG] for photos
[PNG] for logos and illustrations

[JPEG]
Quality: Should ideally be about 75%, no less than 50%
File Size: Should be as small as possible whilst maintaining a good quality.
Under 100KB = 👍👍👍
100KB - 200KB = 👍👍
200KB - 1MB = 👍
Over 1MB = 👎🚨

1000 Bytes (B) = 1 Kilobyte (KB)
1000KB = 1 Megabyte (MB)
1000MB = 1 Gigabyte (GB)
Preview's Export dialog box with Format: JPEG, Quality: 80% and File size: 49KB highlighted

[PNG]
There are no options to adjust for png’s. Use the image sizes above ☝️️ as a guide.
Preview's Export dialog box with Format: PNG and File size: 206KB highlighted

[Save]
Preview's Export dialog box with Save button highlighted

Voila 👏 .

What to do next ⏩

See the Cloudinary how-to to learn how to get your image online 📡.

Templates available

These are sized for retina screens so may seems larger than you expect 😲 . They can be left-clicked and dragged to your desktop directly from this page:

  1. Events page images (432px x 243px)
    Events page images template

  2. Meetup pages Speaker images (227px x 227px)
    Meetup pages Speakers template

results matching ""

    No results matching ""