Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Images
Because Macaw has no direct connection with Photoshop (you can’t place Photoshop files), you can design in Macaw in place of or alongside of Adobe Photoshop or other tools like Adobe Illustrator or Adobe Fireworks. Image content that comes from those programs needs to be saved in web format already, so using the Photoshop Generator in Photoshop CC will be handy.
In order to place images, choose File > Import To Canvas (which places the linked image on the page) or File > Import To Library (which places the image in the Macaw Library panel for later use). With an image on the page, you can drag it into position (see Figure 7).
)
Figure 7 Image settings
With the image selected, looking in the Inspector panel, you will see all of the formatting options available. Macaw breaks down the formatting options for images into:
- Image: the image and frame dimensions are here, along with the ability to reset the size.
- Dimensions: Useful for setting a max and min width for responsive images.
- Effects: Effects like opacity, shadows, and more. All applied to the image as CSS.
- Advanced: You can set properties for the image like alternate (alt) text, transition, and transforms.
Macaw has a feature for toggling retina images for retina devices——images that are 2x the pixel dimensions. If you want to supply retina-ready graphics, they need to be saved in Photoshop or another program at twice the pixel dimension that you intend to use them. For instance, if you want an image to be 200x200 pixels, you would save it as 400x400 in Photoshop before optimizing it. With the image selected on the page, you then toggle @2x in the Inspector panel. In the next section, I’ll mention how to fully take advantage of retina images when you publish.