The new Xara Photo Grids are an easy way to add interest and a contemporary look to your websites, documents and presentations. Rather than displaying your photos in photo galleries, where they all appear as the same size, you can now display them in photo grids that are an aesthetically pleasing, compact array of photos in various sizes. To follow this tutorial and experiment with photo grids, download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try. There are two types of photo grids - Static Photo Grids and Smart Photo Grids. To find these go to File and select ‘New from Content Catalog’, then look under Components > Image resources > Photo Grids. Simply make your choice and then select Import. Alternatively, you can access them from your Local Designs Gallery in Components > Image resources > Photo Grids, if you have already downloaded them. The Online Content Catalog showing some of the photo grids

Static Photo Grids

Static Photo Grids are an attractive array of photos, but in a fixed arrangement. You can replace any photo by dragging an alternative photo (typically a JPG or PNG) from your Windows file explorer and dropping it on top of any image in the grid. Example static photo grid

Editing the photos in your grid

You can use the photo tools to edit the photos in your grid. Select the Photo tool and then click on the photo you wish to edit. You have all the normal photo editing tools available to you, but you will also see a white rotate and scale handle in the top right corner of the photo that enables you to rotate and scale the photo within the frame. If you rotate the photo then you also see a ‘hand’ handle that will enable you to move the photo within the frame. Bottom left photo rotated within the grid

Rounded corners

Drag the orange handle (in the top left corner) inwards to create rounded corners for your photos. Rounded corners on the top left image

Positioning the photos in your grid

Again, use the photo tools to adjust the image within its frame. Whilst it’s not generally a good idea to change the crop or size of the individual images there may be an occasion when you wish to have some text within your photo grid as a title. To crop a photo, use one of the blue handles that are on each of the four sides of the photo. Then drag it to crop the image. Next create some text and drag it onto the photo grid and then group the photo grid and text together using Arrange > Group or Ctrl+G. Double click on the handle to uncrop the image. A cropped image provides room for a title

Smart Photo Grids

Smart Photo Grids are far more flexible - they are essentially a SmartShape that enables you to display any collection of photos, even those with different shapes and aspect ratios, in a compact grid. You can adjust the number of photos on each row, the number of rows, drag to re- order the photos, and adjust the gap between all the photos. All the SmartShape photo grids have ‘smart’ in the title. To replace an image with your own photo, simply drag and drop a photo file from Windows Explorer (or from the Bitmap Gallery if the photo is already in the current document). The image in the grid is replaced with your photo and the grid automatically updates and resizes, if necessary, to fit your photo. Alternatively, you can right click on a photo and select Replace Photo. Then choose to either replace the photo with one of your own photos or with a stock picture from the Xara Content Catalog. A Smart Photo grid with a photo at the top and bottom that automatically adjusted to the size of the photo

Customizing your smart photo grid

As with all SmartShapes, double-click on it in the Selector Tool to show the control handles, or click on the QuickShape Tool  or use the keyboard shortcut of Shift+F2. If you hover over a handle you’ll see a useful tooltip.

Adjusting the whole grid

You can easily change the grid as follows: • Resize the grid using the Selector Tool or the handle in the lower right corner. • Rotate the grid using the handle in the top right corner. • Increase or decrease the space between the photos using the blue ‘border’ handle on the right edge of the first photo, or have no space at all if you choose. Note: when you have a border it’s simply empty space between the photos so you see whatever is behind your photo grid. Therefore if you want to see something other than the page background behind, just draw a rectangle with the desired color and place it behind the photo grid.

Adjusting the images within your grid

Add or move the images within your grid like this: • Re-ordering the images - drag the blue handle in the center of an image. • Deleting an image - click the green handle at the bottom of the picture - this will reshuffle and resize  the other images on the row. • Adding a new image to the row - click the green handle on the edge of the photo at the end of the row, which will add a placeholder image onto which you can drag a new photo. • Add or delete a row -  drag the ‘Add/Remove rows’ handle at the bottom left of the grid downwards to add a new row, or upwards to remove a complete row. Note: The height of a row is calculated by fitting the number of images in this row into the width of the grid. So the more images per row, the less tall that row is, especially if the images are wide such as panorama photos. Similarly rows containing just a single image will usually be taller. Smart photo grid with an extra row added

Editing the photos in your grid

You can use the photo tools to edit your photos in the grid. Select the Photo Tool and then click on a the photo you wish to edit. As with the static photo grids you have all the normal photo editing tools available to you, as well as the white rotate and scale handle to rotate and scale the photo within the frame, and the ‘hand’ handle that will enable you to move the photo within the frame. Each time you replace an image, it puts you into the Photo Tool mode. To get back to the SmartShape handles use the QuickShape Tool or go back to the Selector Tool and double click again.

Adding Effects to the Photo Grids on Your Website

If you are using photo grids on your website then its good to add some effects to enhance the browsing experience for your visitors.

Photo pop-ups

It is useful and pleasing for your visitors to be able to click on a photo to see a larger image. With the Photo Tool selected, click on one of the photos in your grid to select it, then right click on your mouse and you will see the bottom option is ‘Web Properties’. Select it and then select the ‘image’ tab. Check the box for ‘Pop-up photo’ and set its width, then select ‘apply’. This will set all of the photos in your grid to be a pop-up. If you wish to have a caption on each photo in the grid then you will need to click on each photo in turn and set its caption. Select the ‘Options’ button and you can add an effect to the pop-up photo, such as dimming the page while the pop-up is open, showing a shadow behind the pop-up and showing a title. Setting photos to pop-up to display a larger image with the rest of the page dimmed whilst the pop-up is open

Photo grid reveal and scroll animation

Its becoming very popular to add ‘reveal’ effects to your photos, and this can easily be added to your photo grid.  A reveal animation runs when the photo grid comes into view in the browser window. You can also select from one of the many scroll animations that animate your photo grid as the web page is scrolled. This can be the way it slides,  fades, bounces, rotates, or zooms into view.  Select Utilities > Web animation to display this dialog to make your settings: Web animation dialog

Photo Tutorials

These are further tutorials to help you enhance your photos (all recently updated for the current versions): 1. Beginner’s Guide to Photo Editing in Xara  The basics of opening photos, zooming, sizing photos, and saving. 2. Summary of the Photo Tools  A summary of the tools on the Photo Tool fly-out menu. 3. Photo Enhance options  An overview of the ‘work-horse’ range of Enhance options. 4. Changing colors in photos  How to select and enhance or adjust specific colors. 5. A real-world example  Combining many of the techniques described above, to transform a poor photo. In addition there are more detailed guides covering other photo tools: The Shadow and Highlight controls Intelligent Photo Rescaling and Zooming Erasing Backgrounds and Combining Photos Brightness Levels and Color Balance Panoramic Photos

Give it a try!

Download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try!

Copyright © 2015 Xara Group Limited.

Page created with Xara Designer Pro

The new Xara Photo Grids are an easy way to add interest and a contemporary look to your websites, documents and presentations. Rather than displaying your photos in photo galleries, where they all appear as the same size, you can now display them in photo grids that are an aesthetically pleasing, compact array of photos in various sizes. To follow this tutorial and experiment with photo grids, download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try. There are two types of photo grids - Static Photo Grids and Smart Photo Grids. To find these go to File and select ‘New from Content Catalog’, then look under Components > Image resources > Photo Grids. Simply make your choice and then select Import. Alternatively, you can access them from your Local Designs Gallery in Components > Image resources > Photo Grids, if you have already downloaded them. The Online Content Catalog showing some of the photo grids

Static Photo Grids

Static Photo Grids are an attractive array of photos, but in a fixed arrangement. You can replace any photo by dragging an alternative photo (typically a JPG or PNG) from your Windows file explorer and dropping it on top of any image in the grid. Example static photo grid

Editing the photos in your grid

You can use the photo tools to edit the photos in your grid. Select the Photo tool and then click on the photo you wish to edit. You have all the normal photo editing tools available to you, but you will also see a white rotate and scale handle in the top right corner of the photo that enables you to rotate and scale the photo within the frame. If you rotate the photo then you also see a ‘hand’ handle that will enable you to move the photo within the frame. Bottom left photo rotated within the grid

Rounded corners

Drag the orange handle (in the top left corner) inwards to create rounded corners for your photos. Rounded corners on the top left image

Positioning the photos in your grid

Again, use the photo tools to adjust the image within its frame. Whilst it’s not generally a good idea to change the crop or size of the individual images there may be an occasion when you wish to have some text within your photo grid as a title. To crop a photo, use one of the blue handles that are on each of the four sides of the photo. Then drag it to crop the image. Next create some text and drag it onto the photo grid and then group the photo grid and text together using Arrange > Group or Ctrl+G. Double click on the handle to uncrop the image. A cropped image provides room for a title

Smart Photo Grids

Smart Photo Grids are far more flexible - they are essentially a SmartShape that enables you to display any collection of photos, even those with different shapes and aspect ratios, in a compact grid. You can adjust the number of photos on each row, the number of rows, drag to re-order the photos, and adjust the gap between all the photos. All the SmartShape photo grids have ‘smart’ in the title. To replace an image with your own photo, simply drag and drop a photo file from Windows Explorer (or from the Bitmap Gallery if the photo is already in the current document). The image in the grid is replaced with your photo and the grid automatically updates and resizes, if necessary, to fit your photo. Alternatively, you can right click on a photo and select Replace Photo. Then choose to either replace the photo with one of your own photos or with a stock picture from the Xara Content Catalog. A Smart Photo grid with a photo at the top and bottom that automatically adjusted to the size of the photo

Customizing your smart photo grid

As with all SmartShapes, double-click on it in the Selector Tool to show the control handles, or click on the QuickShape Tool  or use the keyboard shortcut of Shift+F2. If you hover over a handle you’ll see a useful tooltip.

Adjusting the whole grid

You can easily change the grid as follows: • Resize the grid using the Selector Tool or the handle in the lower right corner. • Rotate the grid using the handle in the top right corner. • Increase or decrease the space between the photos using the blue ‘border’ handle on the right edge of the first photo, or have no space at all if you choose. Note: when you have a border it’s simply empty space between the photos so you see whatever is behind your photo grid. Therefore if you want to see something other than the page background behind, just draw a rectangle with the desired color and place it behind the photo grid.

Adjusting the images within your grid

Add or move the images within your grid like this: • Re-ordering the images - drag the blue handle in the center of an image. • Deleting an image - click the green handle at the bottom of the picture - this will reshuffle and resize  the other images on the row. • Adding a new image to the row - click the green handle on the edge of the photo at the end of the row, which will add a placeholder image onto which you can drag a new photo. • Add or delete a row -  drag the ‘Add/Remove rows’ handle at the bottom left of the grid downwards to add a new row, or upwards to remove a complete row. Note: The height of a row is calculated by fitting the number of images in this row into the width of the grid. So the more images per row, the less tall that row is, especially if the images are wide such as panorama photos. Similarly rows containing just a single image will usually be taller. Smart photo grid with an extra row added

Editing the photos in your grid

You can use the photo tools to edit your photos in the grid. Select the Photo Tool and then click on a the photo you wish to edit. As with the static photo grids you have all the normal photo editing tools available to you, as well as the white rotate and scale handle to rotate and scale the photo within the frame, and the ‘hand’ handle that will enable you to move the photo within the frame. Each time you replace an image, it puts you into the Photo Tool mode. To get back to the SmartShape handles use the QuickShape Tool or go back to the Selector Tool and double click again.

Adding Effects to the Photo Grids on Your Website

If you are using photo grids on your website then its good to add some effects to enhance the browsing experience for your visitors.

Photo pop-ups

It is useful and pleasing for your visitors to be able to click on a photo to see a larger image. With the Photo Tool selected, click on one of the photos in your grid to select it, then right click on your mouse and you will see the bottom option is ‘Web Properties’. Select it and then select the ‘image’ tab. Check the box for ‘Pop- up photo’ and set its width, then select ‘apply’. This will set all of the photos in your grid to be a pop-up. If you wish to have a caption on each photo in the grid then you will need to click on each photo in turn and set its caption. Select the ‘Options’ button and you can add an effect to the pop-up photo, such as dimming the page while the pop-up is open, showing a shadow behind the pop-up and showing a title. Setting photos to pop-up to display a larger image with the rest of the page dimmed whilst the pop-up is open

Photo grid reveal and scroll animation

Its becoming very popular to add ‘reveal’ effects to your photos, and this can easily be added to your photo grid.  A reveal animation runs when the photo grid comes into view in the browser window. You can also select from one of the many scroll animations that animate your photo grid as the web page is scrolled. This can be the way it slides,  fades, bounces, rotates, or zooms into view.  Select Utilities > Web animation to display this dialog to make your settings: Web animation dialog

Photo Tutorials

These are further tutorials to help you enhance your photos (all recently updated for the current versions): 1. Beginner’s Guide to Photo Editing in Xara  The basics of opening photos, zooming, sizing photos, and saving. 2. Summary of the Photo Tools  A summary of the tools on the Photo Tool fly-out menu. 3. Photo Enhance options  An overview of the ‘work-horse’ range of Enhance options. 4. Changing colors in photos  How to select and enhance or adjust specific colors. 5. A real-world example  Combining many of the techniques described above, to transform a poor photo. In addition there are more detailed guides covering other photo tools: The Shadow and Highlight controls Intelligent Photo Rescaling and Zooming Erasing Backgrounds and Combining Photos Brightness Levels and Color Balance Panoramic Photos

Give it a try!

Download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try!

Copyright © 2015 Xara Group Limited.

Page created with Xara Designer Pro

The new Xara Photo Grids are an easy way to add interest and a contemporary look to your websites, documents and presentations. Rather than displaying your photos in photo galleries, where they all appear as the same size, you can now display them in photo grids that are an aesthetically pleasing, compact array of photos in various sizes. To follow this tutorial and experiment with photo grids, download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try. There are two types of photo grids - Static Photo Grids and Smart Photo Grids. To find these go to File and select ‘New from Content Catalog’, then look under Components > Image resources > Photo Grids. Simply make your choice and then select Import. Alternatively, you can access them from your Local Designs Gallery in Components > Image resources > Photo Grids, if you have already downloaded them. The Online Content Catalog showing some of the photo grids

Static Photo Grids

Static Photo Grids are an attractive array of photos, but in a fixed arrangement. You can replace any photo by dragging an alternative photo (typically a JPG or PNG) from your Windows file explorer and dropping it on top of any image in the grid. Example static photo grid

Editing the photos in your grid

You can use the photo tools to edit the photos in your grid. Select the Photo tool and then click on the photo you wish to edit. You have all the normal photo editing tools available to you, but you will also see a white rotate and scale handle in the top right corner of the photo that enables you to rotate and scale the photo within the frame. If you rotate the photo then you also see a ‘hand’ handle that will enable you to move the photo within the frame. Bottom left photo rotated within the grid

Rounded corners

Drag the orange handle (in the top left corner) inwards to create rounded corners for your photos. Rounded corners on the top left image

Positioning the photos in your grid

Again, use the photo tools to adjust the image within its frame. Whilst it’s not generally a good idea to change the crop or size of the individual images there may be an occasion when you wish to have some text within your photo grid as a title. To crop a photo, use one of the blue handles that are on each of the four sides of the photo. Then drag it to crop the image. Next create some text and drag it onto the photo grid and then group the photo grid and text together using Arrange > Group or Ctrl+G. Double click on the handle to uncrop the image. A cropped image provides room for a title

Smart Photo Grids

Smart Photo Grids are far more flexible - they are essentially a SmartShape that enables you to display any collection of photos, even those with different shapes and aspect ratios, in a compact grid. You can adjust the number of photos on each row, the number of rows, drag to re-order the photos, and adjust the gap between all the photos. All the SmartShape photo grids have ‘smart’ in the title. To replace an image with your own photo, simply drag and drop a photo file from Windows Explorer (or from the Bitmap Gallery if the photo is already in the current document). The image in the grid is replaced with your photo and the grid automatically updates and resizes, if necessary, to fit your photo. Alternatively, you can right click on a photo and select Replace Photo. Then choose to either replace the photo with one of your own photos or with a stock picture from the Xara Content Catalog. A Smart Photo grid with a photo at the top and bottom that automatically adjusted to the size of the photo

Customizing your smart photo grid

As with all SmartShapes, double-click on it in the Selector Tool to show the control handles, or click on the QuickShape Tool  or use the keyboard shortcut of Shift+F2. If you hover over a handle you’ll see a useful tooltip.

Adjusting the whole grid

You can easily change the grid as follows: • Resize the grid using the Selector Tool or the handle in the lower right corner. • Rotate the grid using the handle in the top right corner. • Increase or decrease the space between the photos using the blue ‘border’ handle on the right edge of the first photo, or have no space at all if you choose. Note: when you have a border it’s simply empty space between the photos so you see whatever is behind your photo grid. Therefore if you want to see something other than the page background behind, just draw a rectangle with the desired color and place it behind the photo grid.

Adjusting the images within your grid

Add or move the images within your grid like this: • Re-ordering the images - drag the blue handle in the center of an image. • Deleting an image - click the green handle at the bottom of the picture - this will reshuffle and resize  the other images on the row. • Adding a new image to the row - click the green handle on the edge of the photo at the end of the row, which will add a placeholder image onto which you can drag a new photo. • Add or delete a row -  drag the ‘Add/Remove rows’ handle at the bottom left of the grid downwards to add a new row, or upwards to remove a complete row. Note: The height of a row is calculated by fitting the number of images in this row into the width of the grid. So the more images per row, the less tall that row is, especially if the images are wide such as panorama photos. Similarly rows containing just a single image will usually be taller. Smart photo grid with an extra row added

Editing the photos in your grid

You can use the photo tools to edit your photos in the grid. Select the Photo Tool and then click on a the photo you wish to edit. As with the static photo grids you have all the normal photo editing tools available to you, as well as the white rotate and scale handle to rotate and scale the photo within the frame, and the ‘hand’ handle that will enable you to move the photo within the frame. Each time you replace an image, it puts you into the Photo Tool mode. To get back to the SmartShape handles use the QuickShape Tool or go back to the Selector Tool and double click again.

Adding Effects to the Photo Grids on

Your Website

If you are using photo grids on your website then its good to add some effects to enhance the browsing experience for your visitors.

Photo pop-ups

It is useful and pleasing for your visitors to be able to click on a photo to see a larger image. With the Photo Tool selected, click on one of the photos in your grid to select it, then right click on your mouse and you will see the bottom option is ‘Web Properties’. Select it and then select the ‘image’ tab. Check the box for ‘Pop-up photo’ and set its width, then select ‘apply’. This will set all of the photos in your grid to be a pop-up. If you wish to have a caption on each photo in the grid then you will need to click on each photo in turn and set its caption. Select the ‘Options’ button and you can add an effect to the pop-up photo, such as dimming the page while the pop-up is open, showing a shadow behind the pop-up and showing a title. Setting photos to pop-up to display a larger image with the rest of the page dimmed whilst the pop-up is open

Photo grid reveal and scroll animation

Its becoming very popular to add ‘reveal’ effects to your photos, and this can easily be added to your photo grid.  A reveal animation runs when the photo grid comes into view in the browser window. You can also select from one of the many scroll animations that animate your photo grid as the web page is scrolled. This can be the way it slides,  fades, bounces, rotates, or zooms into view.  Select Utilities > Web animation to display this dialog to make your settings: Web animation dialog

Photo Tutorials

These are further tutorials to help you enhance your photos (all recently updated for the current versions): 1. Beginner’s Guide to Photo Editing in Xara  The basics of opening photos, zooming, sizing photos, and saving. 2. Summary of the Photo Tools  A summary of the tools on the Photo Tool fly-out menu. 3. Photo Enhance options  An overview of the ‘work-horse’ range of Enhance options. 4. Changing colors in photos  How to select and enhance or adjust specific colors. 5. A real-world example  Combining many of the techniques described above, to transform a poor photo. In addition there are more detailed guides covering other photo tools: The Shadow and Highlight controls Intelligent Photo Rescaling and Zooming Erasing Backgrounds and Combining Photos Brightness Levels and Color Balance Panoramic Photos

Give it a try!

Download the trial version of Xara Photo & Graphic Designer or Xara Web Designer Premium or Xara Designer Pro -  and give it a try!

Copyright © 2015 Xara Group Limited.

Page created with Xara Designer Pro