If your site uses the Front Page Slide Slow on your home page you will want to eventually change out those slides to keep your site looking fresh as well as promote your business and events. I’m going to explain how you can create slides using images we provide as well as how to add them to the slideshow component. For the demonstration here we will using the STN demo site (http://demo.stoysnet.com).
SlideShow Image Dimensions
To get started you will first need to know what your slide show dimensions are. You can get the width of the slideshow image by asking your project manager.
Or if you are using Chrome you can right click on the slideshow image and select “Inspect elment” and then mouse over the image code which will tell you what the dimensions are for the image.
If you are using Firefox right click on the slideshow image and select “View Image Info”. this pop up an information window that will give you the dimensions.
If you are on Safari right click on the slideshow image and select “Open image in New Tab” which will display the image only in a new tab. Mouse over the tab and it will display the dimensions for the image.
If you are using Internet Explorer then stop using it. Just kidding 😉 For Internet Explorer right click on the slideshow image and select “Properties” which will pop open a properties box that shows the dimensions for the image.
Desiging The Image Using Pixlr
Now that we know our dimensions we can get to work on creating it. If you are not a Photoshop user or Gimp user then we recommend using Pixlr ( https://pixlr.com/editor/ ) which is a free online tool used to create and modify images. For this demonstration I am going to use Pixlr.
When you first go to Pixlr you are given a few options. What you choose depends if you already have an image that you want to work with or if you are going to start from scratch. For my demonstration I am going to use an image from the STN image library (https://www.mediafire.com/#67n6x9k4kk3qp). The slideshow I’m creating is for Easter so on the STN image library I navigate to the seasonal images and go to Easter and find the image I want to use. Right clicking on the image lets me select “Download”. Once I have done that I jump to Pixlr (https://pixlr.com/editor/) and select “Open image from computer”. I then select the image that I just downloaded.
Defining The Size
Next in Pixlr I want to change the width of the image to what our slideshow image width that we discovered. To do this in the top menu in Pixlr under “Image” select “Image Size”. Then change the width to be the width of your slideshow image. In this example my slideshow image width was 702 pixels so I’m going to enter 702 and then hit OK.
This has set the width but now we need to set the height. This we will want to do by setting it in the “Canvas size”. To do this in the top menu in Pixlr under “Image” select “Canvas Size”. Then change the Height to be the height of your slideshow image. In my case it is 302 pixels.
Add A Message
Now that we have a background image and have defined the width and height we will want to add a message to the slideshow image using Pixlr. Select on the text editor and slect where you want the text to go. Use Pixlr’s text tools to make it the size, font and color you want it to be. Explore Pixlr’s tools and effects to create the perfect slideshow image.
Save The Image
Once you have the image just the way you want it you will now need to save it so that you can upload it to your site. To do this in the top menu in Pixlr under “File” select “Save…” and then give it a name that makes sense to you and select “JPEG” in format dropdown and set the quality to 100. Click OK. You will now be saving it to your computer. You now have an image ready to be added to your Fontpage SlideShow.
